Changes for page AI en LLMs

Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -3,37 +3,235 @@
3	3	//Deze sectie wordt nog gevuld.//
4	4
5	5	{{html clean="false"}}
6		-<div id="linkding-bookmarks-aillms">Laden...</div>
	6	+<style>
	7	+#ldsf-container-aillms {
	8	+ display: flex;
	9	+ height: 65vh;
	10	+ border: 1px solid #4e5d6c;
	11	+ border-radius: 4px;
	12	+ overflow: hidden;
	13	+}
	14	+#ldsf-container-aillms .ldsf-left {
	15	+ width: 35%;
	16	+ min-width: 200px;
	17	+ max-width: 60%;
	18	+ overflow-y: auto;
	19	+ background: #2b3e50;
	20	+ display: flex;
	21	+ flex-direction: column;
	22	+}
	23	+#ldsf-container-aillms .ldsf-divider {
	24	+ width: 6px;
	25	+ background: #4e5d6c;
	26	+ cursor: col-resize;
	27	+ flex-shrink: 0;
	28	+ transition: background 0.2s;
	29	+}
	30	+#ldsf-container-aillms .ldsf-divider:hover,
	31	+#ldsf-container-aillms .ldsf-divider.dragging { background: #df691a; }
	32	+#ldsf-container-aillms .ldsf-right {
	33	+ flex: 1;
	34	+ min-width: 200px;
	35	+ display: flex;
	36	+ flex-direction: column;
	37	+}
	38	+#ldsf-container-aillms .ldsf-status {
	39	+ color: #6b7c8d;
	40	+ font-size: 13px;
	41	+ padding: 8px 12px;
	42	+ flex-shrink: 0;
	43	+}
	44	+#ldsf-container-aillms .ldsf-bm {
	45	+ overflow-y: auto;
	46	+ flex: 1;
	47	+}
	48	+#ldsf-container-aillms .ldsf-bm ul {
	49	+ list-style: none;
	50	+ padding: 0;
	51	+ margin: 0;
	52	+}
	53	+#ldsf-container-aillms .ldsf-bm li {
	54	+ padding: 6px 12px;
	55	+ border-bottom: 1px solid rgba(78,93,108,0.3);
	56	+ display: flex;
	57	+ align-items: center;
	58	+ gap: 8px;
	59	+}
	60	+#ldsf-container-aillms .ldsf-bm li:hover { background: #3b4e60; }
	61	+#ldsf-container-aillms .ldsf-bm a {
	62	+ color: #5bc0de;
	63	+ text-decoration: none;
	64	+ overflow: hidden;
	65	+ text-overflow: ellipsis;
	66	+ white-space: nowrap;
	67	+ font-size: 13px;
	68	+}
	69	+#ldsf-container-aillms .ldsf-bm a:hover { color: #df691a; }
	70	+#ldsf-container-aillms .sf-num {
	71	+ display: inline-flex;
	72	+ align-items: center;
	73	+ justify-content: center;
	74	+ width: 22px;
	75	+ height: 22px;
	76	+ border-radius: 50%;
	77	+ background: #df691a;
	78	+ color: #fff;
	79	+ font-size: 11px;
	80	+ font-weight: bold;
	81	+ flex-shrink: 0;
	82	+}
	83	+#ldsf-container-aillms .sf-btn {
	84	+ cursor: pointer;
	85	+ background: #4e5d6c;
	86	+ border: none;
	87	+ color: #5bc0de;
	88	+ padding: 2px 6px;
	89	+ border-radius: 3px;
	90	+ font-size: 13px;
	91	+ flex-shrink: 0;
	92	+}
	93	+#ldsf-container-aillms .sf-btn:hover { background: #df691a; color: #fff; }
	94	+#ldsf-container-aillms .ldsf-vbar {
	95	+ display: none;
	96	+ justify-content: space-between;
	97	+ align-items: center;
	98	+ padding: 4px 12px;
	99	+ background: #2b3e50;
	100	+ color: #ebebeb;
	101	+ font-size: 12px;
	102	+ flex-shrink: 0;
	103	+ border-bottom: 1px solid #4e5d6c;
	104	+}
	105	+#ldsf-container-aillms .ldsf-vbar .close-btn {
	106	+ cursor: pointer;
	107	+ color: #d9534f;
	108	+ font-size: 18px;
	109	+ padding: 0 4px;
	110	+}
	111	+#ldsf-container-aillms .ldsf-vbar .close-btn:hover { color: #ff6b6b; }
	112	+#ldsf-container-aillms .ldsf-frame {
	113	+ width: 100%;
	114	+ flex: 1;
	115	+ border: none;
	116	+ background: #fff;
	117	+ display: none;
	118	+}
	119	+#ldsf-container-aillms .ldsf-ph {
	120	+ display: flex;
	121	+ align-items: center;
	122	+ justify-content: center;
	123	+ flex: 1;
	124	+ color: #6b7c8d;
	125	+ font-size: 15px;
	126	+ background: #2b3e50;
	127	+}
	128	+</style>
	129	+
	130	+<div id="ldsf-container-aillms">
	131	+ <div class="ldsf-left" id="ldsf-left-aillms">
	132	+ <div class="ldsf-status" id="ldsf-status-aillms">Laden...</div>
	133	+ <div class="ldsf-bm" id="ldsf-bm-aillms"></div>
	134	+ </div>
	135	+ <div class="ldsf-divider" id="ldsf-div-aillms"></div>
	136	+ <div class="ldsf-right">
	137	+ <div class="ldsf-vbar" id="ldsf-vbar-aillms">
	138	+ <span id="ldsf-vtitle-aillms"></span>
	139	+ <span class="close-btn" data-sfclose-aillms="1">&times;</span>
	140	+ </div>
	141	+ <div class="ldsf-ph" id="ldsf-ph-aillms">Klik op &#128196; om een archief te bekijken</div>
	142	+ <iframe class="ldsf-frame" id="ldsf-frame-aillms" sandbox="allow-same-origin"></iframe>
	143	+ </div>
	144	+</div>
	145	+
7	7	<script>
8	8	(function() {
9		- var config = {
10		- url: 'https://bookmarks.rhebergen.org/api/bookmarks/',
11		- token: '3b7443e0f84e2b2b269adebb96d7475e4a5e653e',
12		- tag: 'AI-&-Machine-Learning',
13		- count: 10
	148	+ var U = 'aillms';
	149	+ var CFG = {
	150	+ linkding: 'https://bookmarks.rhebergen.org/api/bookmarks/',
	151	+ token: '3b7443e0f84e2b2b269adebb96d7475e4a5e653e',
	152	+ tag: 'AI-&-Machine-Learning',
	153	+ count: 20,
	154	+ share: 'eT2X9ttBHK5GoEY',
	155	+ webdav: 'https://cloud.rhebergen.org/public.php/webdav/'
14	14	};
15		- var apiUrl = config.url + '?limit=' + config.count + '&q=%23' + encodeURIComponent(config.tag);
16		- fetch(apiUrl, {
17		- headers: { 'Authorization': 'Token ' + config.token }
18		- })
19		- .then(function(r) { return r.json(); })
20		- .then(function(data) {
21		- var container = document.getElementById('linkding-bookmarks-aillms');
22		- var total = data.count || 0;
23		- var html = '<h3>Bookmarks: ' + config.tag + ' (' + total + ' totaal)</h3><ul>';
24		- (data.results || []).forEach(function(bm) {
	157	+ CFG.auth = 'Basic ' + btoa(CFG.share + ':');
	158	+
	159	+ var urlToFile = {}, fileMap = {};
	160	+
	161	+ function match(url) {
	162	+ var t = [url, url.replace(/\/$/, ''), url + '/', url.replace(/\?.*$/, '')];
	163	+ for (var i = 0; i < t.length; i++) { if (urlToFile[t[i]]) return urlToFile[t[i]]; }
	164	+ return null;
	165	+ }
	166	+
	167	+ function show(f) {
	168	+ document.getElementById('ldsf-vtitle-' + U).textContent = f.replace(/\.html?$/i, '');
	169	+ document.getElementById('ldsf-vbar-' + U).style.display = 'flex';
	170	+ document.getElementById('ldsf-ph-' + U).style.display = 'none';
	171	+ var fr = document.getElementById('ldsf-frame-' + U);
	172	+ fr.style.display = 'block';
	173	+ fr.srcdoc = '<p style="padding:20px;color:#888">Laden...</p>';
	174	+ fetch(CFG.webdav + encodeURIComponent(f), { headers: { 'Authorization': CFG.auth } })
	175	+ .then(function(r) { return r.text(); })
	176	+ .then(function(h) { fr.srcdoc = h; })
	177	+ .catch(function(e) { fr.srcdoc = '<p style="padding:20px;color:#d9534f">' + e.message + '</p>'; });
	178	+ }
	179	+
	180	+ function close() {
	181	+ document.getElementById('ldsf-vbar-' + U).style.display = 'none';
	182	+ document.getElementById('ldsf-frame-' + U).style.display = 'none';
	183	+ document.getElementById('ldsf-ph-' + U).style.display = 'flex';
	184	+ }
	185	+
	186	+ function render(data) {
	187	+ var total = data.count || 0, arc = 0;
	188	+ var html = '<ul>';
	189	+ (data.results || []).forEach(function(bm, i) {
25	25	var title = bm.title || bm.website_title || bm.url;
26		- html += '<li><a href="' + bm.url + '" target="_blank">' + title + '</a></li>';
	191	+ var f = match(bm.url);
	192	+ if (f) { arc++; fileMap[i] = f; }
	193	+ html += '<li><span class="sf-num">' + (i + 1) + '</span>';
	194	+ if (f) html += '<span class="sf-btn" data-sf-' + U + '="' + i + '" title="Archief bekijken">&#128196;</span>';
	195	+ html += '<a href="' + bm.url + '" target="_blank">' + title + '</a></li>';
27	27	});
28		- html += '</ul>';
29		- if (total > config.count) {
30		- html += '<p><em>Toont ' + config.count + ' van ' + total + '. <a href="https://bookmarks.rhebergen.org/bookmarks?q=%23' + config.tag + '">Meer in Linkding</a></em></p>';
31		- }
32		- container.innerHTML = html;
33		- })
34		- .catch(function(err) {
35		- document.getElementById('linkding-bookmarks-aillms').innerHTML = '<p>Kon bookmarks niet laden: ' + err.message + '</p>';
	197	+ document.getElementById('ldsf-bm-' + U).innerHTML = html + '</ul>';
	198	+ document.getElementById('ldsf-status-' + U).textContent = total + ' bookmarks, ' + arc + ' met archief';
	199	+ }
	200	+
	201	+ document.addEventListener('click', function(e) {
	202	+ var t = e.target;
	203	+ if (!t || !t.getAttribute) return;
	204	+ var sf = t.getAttribute('data-sf-' + U);
	205	+ if (sf !== null && fileMap[sf]) show(fileMap[sf]);
	206	+ if (t.getAttribute('data-sfclose-' + U) !== null) close();
	207	+ }, true);
	208	+
	209	+ var drag = false;
	210	+ document.getElementById('ldsf-div-' + U).addEventListener('mousedown', function(e) {
	211	+ drag = true; this.classList.add('dragging'); e.preventDefault();
36	36	});
	213	+ document.addEventListener('mousemove', function(e) {
	214	+ if (!drag) return;
	215	+ var box = document.getElementById('ldsf-container-' + U).getBoundingClientRect();
	216	+ var w = e.clientX - box.left;
	217	+ if (w >= 200 && w <= box.width * 0.6)
	218	+ document.getElementById('ldsf-left-' + U).style.width = w + 'px';
	219	+ });
	220	+ document.addEventListener('mouseup', function() {
	221	+ if (drag) { drag = false; document.getElementById('ldsf-div-' + U).classList.remove('dragging'); }
	222	+ });
	223	+
	224	+ fetch(CFG.webdav + 'index.json', { headers: { 'Authorization': CFG.auth } })
	225	+ .then(function(r) { return r.ok ? r.json() : {}; })
	226	+ .then(function(idx) { for (var f in idx) { if (idx.hasOwnProperty(f)) urlToFile[idx[f]] = f; } })
	227	+ .catch(function() {})
	228	+ .then(function() {
	229	+ return fetch(CFG.linkding + '?limit=' + CFG.count + '&q=%23' + encodeURIComponent(CFG.tag),
	230	+ { headers: { 'Authorization': 'Token ' + CFG.token } });
	231	+ })
	232	+ .then(function(r) { return r.json(); })
	233	+ .then(render)
	234	+ .catch(function(e) { document.getElementById('ldsf-status-' + U).textContent = 'Fout: ' + e.message; });
37	37	})();
38	38	</script>
39	39	{{/html}}