Linkding + SingleFile Archief

Bookmarks uit Linkding met inline archief-viewer. Klik op 📄 om de opgeslagen versie te bekijken.

#ldsf-container {
  display: flex;
  height: 75vh;
  border: 1px solid #4e5d6c;
  border-radius: 4px;
  overflow: hidden;
}
#ldsf-left {
  width: 35%;
  min-width: 200px;
  max-width: 60%;
  overflow-y: auto;
  background: #2b3e50;
  display: flex;
  flex-direction: column;
}
#ldsf-divider {
  width: 6px;
  background: #4e5d6c;
  cursor: col-resize;
  flex-shrink: 0;
  transition: background 0.2s;
}
#ldsf-divider:hover, #ldsf-divider.dragging { background: #df691a; }
#ldsf-right {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}
#ldsf-status {
  color: #6b7c8d;
  font-size: 13px;
  padding: 8px 12px;
  flex-shrink: 0;
}
#ldsf-bookmarks {
  overflow-y: auto;
  flex: 1;
}
#ldsf-bookmarks ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#ldsf-bookmarks li {
  padding: 6px 12px;
  border-bottom: 1px solid rgba(78,93,108,0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}
#ldsf-bookmarks li:hover { background: #3b4e60; }
.sf-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4e5d6c;
  color: #df691a;
  font-size: 11px;
  font-weight: bold;
  flex-shrink: 0;
}
#ldsf-bookmarks a {
  color: #5bc0de;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
#ldsf-bookmarks a:hover { color: #df691a; }
.sf-btn {
  cursor: pointer;
  background: #4e5d6c;
  border: none;
  color: #5bc0de;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
  flex-shrink: 0;
}
.sf-btn:hover { background: #df691a; color: #fff; }
#ldsf-viewer-bar {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  background: #2b3e50;
  color: #ebebeb;
  font-size: 12px;
  flex-shrink: 0;
  border-bottom: 1px solid #4e5d6c;
}
#ldsf-viewer-bar .close-btn {
  cursor: pointer;
  color: #d9534f;
  font-size: 18px;
  padding: 0 4px;
}
#ldsf-viewer-bar .close-btn:hover { color: #ff6b6b; }
#ldsf-viewer-frame {
  width: 100%;
  flex: 1;
  border: none;
  background: #fff;
  display: none;
}
#ldsf-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #6b7c8d;
  font-size: 15px;
  background: #2b3e50;
}

/* --- Configuration --- */
var LDSF = {
  linkding:  'https://bookmarks.rhebergen.org/api/bookmarks/',
  token:     '3b7443e0f84e2b2b269adebb96d7475e4a5e653e',
  tag:       'Nuclear-&-Energy',
  count:     20,
  share:     'eT2X9ttBHK5GoEY',
  webdav:    'https://cloud.rhebergen.org/public.php/webdav/'
};
LDSF.auth = 'Basic ' + btoa(LDSF.share + ':');

/* --- State --- */
var ldsf_urlToFile = {};
var ldsf_fileMap = {};

/* --- URL matching (exact, with/without slash, without query string) --- */
function ldsfMatch(url) {
  var tries = [url, url.replace(/\/$/, ''), url + '/', url.replace(/\?.*$/, '')];
  for (var i = 0; i < tries.length; i++) {
    if (ldsf_urlToFile[tries[i]]) return ldsf_urlToFile[tries[i]];
  }
  return null;
}

/* --- Show archived page in viewer --- */
function ldsfShow(filename) {
  document.getElementById('ldsf-viewer-title').textContent = filename.replace(/\.html?$/i, '');
  document.getElementById('ldsf-viewer-bar').style.display = 'flex';
  document.getElementById('ldsf-placeholder').style.display = 'none';
  var frame = document.getElementById('ldsf-viewer-frame');
  frame.style.display = 'block';
  frame.srcdoc = '
Laden...
';
  fetch(LDSF.webdav + encodeURIComponent(filename), { headers: { 'Authorization': LDSF.auth } })
    .then(function(r) { return r.text(); })
    .then(function(html) { frame.srcdoc = html; })
    .catch(function(e) { frame.srcdoc = '
Fout: ' + e.message + '
'; });
}

/* --- Close viewer --- */
function ldsfClose() {
  document.getElementById('ldsf-viewer-bar').style.display = 'none';
  document.getElementById('ldsf-viewer-frame').style.display = 'none';
  document.getElementById('ldsf-placeholder').style.display = 'flex';
}

/* --- Render bookmark list --- */
function ldsfRender(data) {
  var total = data.count || 0, archived = 0;
  var container = document.getElementById('ldsf-bookmarks');
  var html = '
';
  (data.results || []).forEach(function(bm, i) {
    var title = bm.title || bm.website_title || bm.url;
    var file = ldsfMatch(bm.url);
    if (file) { archived++; ldsf_fileMap[i] = file; }
    html += '
' + (i + 1) + '';
    if (file) html += '📄';
    html += '' + title + '';
  });
  container.innerHTML = html + '
';
  document.getElementById('ldsf-status').textContent = total + ' bookmarks, ' + archived + ' met archief';
}

/* --- Click handler (event delegation, works in XWiki html macro) --- */
document.addEventListener('click', function(e) {
  var t = e.target;
  if (!t || !t.getAttribute) return;
  var sf = t.getAttribute('data-sf');
  if (sf !== null && ldsf_fileMap[sf]) ldsfShow(ldsf_fileMap[sf]);
  if (t.getAttribute('data-sfclose') !== null) ldsfClose();
}, true);

/* --- Draggable divider --- */
var ldsf_drag = false;
document.getElementById('ldsf-divider').addEventListener('mousedown', function(e) {
  ldsf_drag = true;
  this.classList.add('dragging');
  e.preventDefault();
});
document.addEventListener('mousemove', function(e) {
  if (!ldsf_drag) return;
  var box = document.getElementById('ldsf-container').getBoundingClientRect();
  var w = e.clientX - box.left;
  if (w >= 200 && w <= box.width * 0.6)
    document.getElementById('ldsf-left').style.width = w + 'px';
});
document.addEventListener('mouseup', function() {
  if (ldsf_drag) {
    ldsf_drag = false;
    document.getElementById('ldsf-divider').classList.remove('dragging');
  }
});

/* --- Load index, then bookmarks --- */
fetch(LDSF.webdav + 'index.json', { headers: { 'Authorization': LDSF.auth } })
  .then(function(r) { return r.ok ? r.json() : {}; })
  .then(function(idx) {
    for (var f in idx) { if (idx.hasOwnProperty(f)) ldsf_urlToFile[idx[f]] = f; }
  })
  .catch(function() {})
  .then(function() {
    return fetch(LDSF.linkding + '?limit=' + LDSF.count + '&q=%23' + encodeURIComponent(LDSF.tag),
      { headers: { 'Authorization': 'Token ' + LDSF.token } });
  })
  .then(function(r) { return r.json(); })
  .then(ldsfRender)
  .catch(function(e) {
    document.getElementById('ldsf-status').textContent = 'Fout: ' + e.message;
  });