Changes for page Machine Learning en Data Science

Summary

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

Details

Page properties

Content

...	...	@@ -3,235 +3,37 @@
3	3	//Deze sectie wordt nog gevuld.//
4	4
5	5	{{html clean="false"}}
6		-<style>
7		-#ldsf-container-mldatascience {
8		- display: flex;
9		- height: 65vh;
10		- border: 1px solid #4e5d6c;
11		- border-radius: 4px;
12		- overflow: hidden;
13		-}
14		-#ldsf-container-mldatascience .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-mldatascience .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-mldatascience .ldsf-divider:hover,
31		-#ldsf-container-mldatascience .ldsf-divider.dragging { background: #df691a; }
32		-#ldsf-container-mldatascience .ldsf-right {
33		- flex: 1;
34		- min-width: 200px;
35		- display: flex;
36		- flex-direction: column;
37		-}
38		-#ldsf-container-mldatascience .ldsf-status {
39		- color: #6b7c8d;
40		- font-size: 13px;
41		- padding: 8px 12px;
42		- flex-shrink: 0;
43		-}
44		-#ldsf-container-mldatascience .ldsf-bm {
45		- overflow-y: auto;
46		- flex: 1;
47		-}
48		-#ldsf-container-mldatascience .ldsf-bm ul {
49		- list-style: none;
50		- padding: 0;
51		- margin: 0;
52		-}
53		-#ldsf-container-mldatascience .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-mldatascience .ldsf-bm li:hover { background: #3b4e60; }
61		-#ldsf-container-mldatascience .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-mldatascience .ldsf-bm a:hover { color: #df691a; }
70		-#ldsf-container-mldatascience .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-mldatascience .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-mldatascience .sf-btn:hover { background: #df691a; color: #fff; }
94		-#ldsf-container-mldatascience .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-mldatascience .ldsf-vbar .close-btn {
106		- cursor: pointer;
107		- color: #d9534f;
108		- font-size: 18px;
109		- padding: 0 4px;
110		-}
111		-#ldsf-container-mldatascience .ldsf-vbar .close-btn:hover { color: #ff6b6b; }
112		-#ldsf-container-mldatascience .ldsf-frame {
113		- width: 100%;
114		- flex: 1;
115		- border: none;
116		- background: #fff;
117		- display: none;
118		-}
119		-#ldsf-container-mldatascience .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-mldatascience">
131		- <div class="ldsf-left" id="ldsf-left-mldatascience">
132		- <div class="ldsf-status" id="ldsf-status-mldatascience">Laden...</div>
133		- <div class="ldsf-bm" id="ldsf-bm-mldatascience"></div>
134		- </div>
135		- <div class="ldsf-divider" id="ldsf-div-mldatascience"></div>
136		- <div class="ldsf-right">
137		- <div class="ldsf-vbar" id="ldsf-vbar-mldatascience">
138		- <span id="ldsf-vtitle-mldatascience"></span>
139		- <span class="close-btn" data-sfclose-mldatascience="1">&times;</span>
140		- </div>
141		- <div class="ldsf-ph" id="ldsf-ph-mldatascience">Klik op &#128196; om een archief te bekijken</div>
142		- <iframe class="ldsf-frame" id="ldsf-frame-mldatascience" sandbox="allow-same-origin"></iframe>
143		- </div>
144		-</div>
145		-
	6	+<div id="linkding-bookmarks-mldatascience">Laden...</div>
146	146	<script>
147	147	(function() {
148		- var U = 'mldatascience';
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/'
	9	+ var config = {
	10	+ url: 'https://bookmarks.rhebergen.org/api/bookmarks/',
	11	+ token: '3b7443e0f84e2b2b269adebb96d7475e4a5e653e',
	12	+ tag: 'AI-&-Machine-Learning',
	13	+ count: 10
156	156	};
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) {
	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-mldatascience');
	22	+ var total = data.count || 0;
	23	+ var html = '<h3>Bookmarks: ' + config.tag + ' (' + total + ' totaal)</h3><ul>';
	24	+ (data.results || []).forEach(function(bm) {
190	190	var title = bm.title || bm.website_title || bm.url;
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>';
	26	+ html += '<li><a href="' + bm.url + '" target="_blank">' + title + '</a></li>';
196	196	});
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();
	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-mldatascience').innerHTML = '<p>Kon bookmarks niet laden: ' + err.message + '</p>';
212	212	});
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; });
235	235	})();
236	236	</script>
237	237	{{/html}}