Linkding + SingleFile Test

author	version	line-number	content
		1	= Linkding + SingleFile Test =
		2
		3	Bookmarks met archief-viewer. Klik op het archief-icoon om de opgeslagen versie te bekijken.
		4
		5	{{html clean="false"}}
		6	<style>
		7	#ldsf-wrapper {
		8	display: flex;
		9	flex-direction: column;
		10	gap: 0;
		11	}
		12	#ldsf-bookmarks {
		13	color: #ebebeb;
		14	}
		15	#ldsf-bookmarks ul {
		16	list-style: none;
		17	padding: 0;
		18	}
		19	#ldsf-bookmarks li {
		20	padding: 6px 12px;
		21	background: #2b3e50;
		22	border-left: 3px solid #df691a;
		23	border-radius: 0 4px 4px 0;
		24	margin: 4px 0;
		25	display: flex;
		26	align-items: center;
		27	gap: 8px;
		28	}
		29	#ldsf-bookmarks li:hover { background: #3b4e60; }
		30	#ldsf-bookmarks a { color: #5bc0de; text-decoration: none; }
		31	#ldsf-bookmarks a:hover { color: #df691a; }
		32	#ldsf-bookmarks .sf-btn {
		33	cursor: pointer;
		34	background: #4e5d6c;
		35	border: none;
		36	color: #5bc0de;
		37	padding: 2px 8px;
		38	border-radius: 3px;
		39	font-size: 14px;
		40	flex-shrink: 0;
		41	}
		42	#ldsf-bookmarks .sf-btn:hover { background: #df691a; color: #fff; }
		43	#ldsf-bookmarks .sf-btn.active { background: #df691a; color: #fff; }
		44
		45	#ldsf-viewer-container {
		46	display: none;
		47	margin-top: 10px;
		48	border: 1px solid #4e5d6c;
		49	border-radius: 4px;
		50	overflow: hidden;
		51	background: #1a2a3a;
		52	}
		53	#ldsf-viewer-bar {
		54	display: flex;
		55	justify-content: space-between;
		56	align-items: center;
		57	padding: 6px 12px;
		58	background: #2b3e50;
		59	color: #6b7c8d;
		60	font-size: 13px;
		61	}
		62	#ldsf-viewer-bar .close-btn {
		63	cursor: pointer;
		64	background: none;
		65	border: none;
		66	color: #d9534f;
		67	font-size: 18px;
		68	padding: 0 4px;
		69	}
		70	#ldsf-viewer-bar .close-btn:hover { color: #ff6b6b; }
		71	#ldsf-viewer-frame {
		72	width: 100%;
		73	height: 70vh;
		74	border: none;
		75	background: #fff;
		76	}
		77	#ldsf-status { color: #6b7c8d; font-size: 13px; margin-bottom: 8px; }
		78	</style>
		79
		80	<div id="ldsf-wrapper">
		81	<div id="ldsf-status">Laden...</div>
		82	<div id="ldsf-bookmarks"></div>
		83	<div id="ldsf-viewer-container">
		84	<div id="ldsf-viewer-bar">
		85	<span id="ldsf-viewer-title">...</span>
		86	<button class="close-btn" onclick="ldsfCloseViewer()">×</button>
		87	</div>
		88	<iframe id="ldsf-viewer-frame" sandbox="allow-same-origin"></iframe>
		89	</div>
		90	</div>
		91
		92	<script>
		93	var LDSF_LINKDING_URL = 'https://bookmarks.rhebergen.org/api/bookmarks/';
		94	var LDSF_TOKEN = '3b7443e0f84e2b2b269adebb96d7475e4a5e653e';
		95	var LDSF_TAG = 'Nuclear-&-Energy';
		96	var LDSF_COUNT = 20;
		97	var LDSF_SHARE = 'eT2X9ttBHK5GoEY';
		98	var LDSF_WEBDAV = 'https://cloud.rhebergen.org/public.php/webdav/';
		99	var LDSF_AUTH = 'Basic ' + btoa(LDSF_SHARE + ':');
		100	var ldsf_urlToFile = {};
		101	var ldsf_archiveMap = {};
		102
		103	function ldsfFindArchive(url) {
		104	var v = [url, url.replace(/\/$/, ''), url + '/', url.replace(/\?.*$/, '')];
		105	for (var i = 0; i < v.length; i++) { if (ldsf_urlToFile[v[i]]) return ldsf_urlToFile[v[i]]; }
		106	return null;
		107	}
		108
		109	function ldsfOpen(idx) {
		110	var f = ldsf_archiveMap[idx];
		111	if (f) ldsfShowArchive(f);
		112	}
		113
		114	function ldsfShowArchive(filename) {
		115	document.getElementById('ldsf-viewer-title').textContent = filename.replace(/\.html?$/i, '');
		116	document.getElementById('ldsf-viewer-container').style.display = 'block';
		117	var frame = document.getElementById('ldsf-viewer-frame');
		118	frame.srcdoc = '<p style="padding:20px;color:#666">Laden...</p>';
		119	fetch(LDSF_WEBDAV + encodeURIComponent(filename), { headers: { 'Authorization': LDSF_AUTH } })
		120	.then(function(r) { return r.text(); })
		121	.then(function(html) { frame.srcdoc = html; })
		122	.catch(function(err) { frame.srcdoc = '<p style="padding:20px;color:red">Fout: ' + err.message + '</p>'; });
		123	}
		124
		125	function ldsfCloseViewer() {
		126	document.getElementById('ldsf-viewer-container').style.display = 'none';
		127	}
		128
		129	function ldsfLoadBookmarks() {
		130	var apiUrl = LDSF_LINKDING_URL + '?limit=' + LDSF_COUNT + '&q=%23' + encodeURIComponent(LDSF_TAG);
		131	fetch(apiUrl, { headers: { 'Authorization': 'Token ' + LDSF_TOKEN } })
		132	.then(function(r) { return r.json(); })
		133	.then(function(data) {
		134	var total = data.count \|\| 0;
		135	var archiveCount = 0;
		136	var container = document.getElementById('ldsf-bookmarks');
		137	var ul = document.createElement('ul');
		138
		139	(data.results \|\| []).forEach(function(bm) {
		140	var title = bm.title \|\| bm.website_title \|\| bm.url;
		141	var fname = ldsfFindArchive(bm.url);
		142	if (fname) archiveCount++;
		143
		144	var li = document.createElement('li');
		145
		146	if (fname) {
		147	var btn = document.createElement('button');
		148	btn.className = 'sf-btn';
		149	btn.title = 'Archief bekijken';
		150	btn.textContent = '\uD83D\uDCC4';
		151	btn.addEventListener('click', (function(f) {
		152	return function() { ldsfShowArchive(f); };
		153	})(fname));
		154	li.appendChild(btn);
		155	}
		156
		157	var a = document.createElement('a');
		158	a.href = bm.url;
		159	a.target = '_blank';
		160	a.textContent = title;
		161	li.appendChild(a);
		162	ul.appendChild(li);
		163	});
		164
		165	container.innerHTML = '';
		166	container.appendChild(ul);
		167	document.getElementById('ldsf-status').textContent = total + ' bookmarks, ' + archiveCount + ' met archief';
		168	})
		169	.catch(function(err) { document.getElementById('ldsf-status').textContent = 'Fout: ' + err.message; });
		170	}
		171
		172	// Load index then bookmarks
		173	fetch(LDSF_WEBDAV + 'index.json', { headers: { 'Authorization': LDSF_AUTH } })
		174	.then(function(r) { return r.ok ? r.json() : {}; })
		175	.then(function(idx) {
		176	Object.keys(idx).forEach(function(f) { ldsf_urlToFile[idx[f]] = f; });
		177	ldsfLoadBookmarks();
		178	})
		179	.catch(function() { ldsfLoadBookmarks(); });
		180	</script>
		181	{{/html}}

Wiki source code of Linkding + SingleFile Test