mise a jours post wikithon winterschool 2024

special/wikipage/Makefile

@@ -0,0 +1,6 @@
+
+all: dist/app.js
+
+dist/app.js: src/*.js
+	# node_modules/.bin/rollup src/index.js --file dist/index.js --format iife
+	node_modules/.bin/rollup -c

special/wikipage/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "wikipage",
+  "version": "1.0.0",
+  "description": "",
+  "main": "rollup.config.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "d3-selection": "^1.4.0",
+    "rollup": "^1.17.0"
+  }
+}

special/wikipage/package.json~

@@ -0,0 +1,16 @@
+{
+  "name": "recentfiles",
+  "version": "1.0.0",
+  "description": "",
+  "main": "rollup.config.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "d3-selection": "^1.4.0",
+    "rollup": "^1.17.0"
+  }
+}

special/wikipage/rollup.config.js

@@ -0,0 +1,17 @@
+// rollup.config.js
+// https://github.com/rollup/rollup-plugin-commonjs
+import commonjs from 'rollup-plugin-commonjs';
+import resolve from 'rollup-plugin-node-resolve';
+
+export default [{
+  input: 'src/wikipage.js',
+  output: {
+    file: 'dist/wikpage.js',
+    format: 'iife',
+    name: 'app'
+  },
+  plugins: [
+    resolve(), 
+    commonjs()
+  ]
+}];

special/wikipage/src/wikipage.js

@@ -0,0 +1,86 @@
+import { selectAll, select } from 'd3-selection';
+
+/*
+
+Uses the Mediawiki API to simply display the contents of a wiki page.
+
+Makes use of the following API calls:
+
+* https://www.mediawiki.org/wiki/API:Parsing_wikitext
+
+*/
+var main = select("#content"),
+    title = window.location.hash ? window.location.hash.substring(1) : "Bienvenue_à_l’erg",
+    baseurl = "/mw/api.php?action=parse&format=json&formatversion=2title=",
+    url = baseurl;
+
+async function get_json (url) {
+    var resp = await fetch(url);
+    return await resp.json();
+}
+
+function url_for_title (title) {
+    return "/w/"+encodeURI(title.replace(/ /g, "_"));
+}
+
+async function load () {
+    let count = 0,
+        debugloopcount = 0;
+    while (count < NUM_FILES) {
+        console.log("starting loop", debugloopcount, "count", count, "url", url);
+        let resp = await fetch(url),
+            data = await resp.json(),
+            allimages = data.query.allimages,
+            useimages = [];
+        // console.log("got data", data.query.allimages.length);
+        // For each image:
+        // Use API:Imageinfo request/get the URL to a thumbnail image
+        // 
+        for (var i=0, l=allimages.length; i<l; i++) {
+            let image = allimages[i];
+            // console.log("image", image.name);
+            let iu_data = await get_json(`/mw/api.php?action=query&list=imageusage&iutitle=${image.title}&iunamespace=0&format=json&formatversion=2`);
+
+            image.imageusage = iu_data.query.imageusage;
+            if (image.imageusage.length == 0) { 
+                continue;
+            }
+
+            let ii_data = await get_json(`/mw/api.php?action=query&prop=imageinfo&titles=${image.title}&iiprop=url|size&dimensions|mime&iiurlwidth=320&format=json&formatversion=2`);
+            image.imageinfo = ii_data.query.pages[0].imageinfo[0];
+            if (!image.imageinfo.thumburl) {
+                continue;
+            }
+
+            useimages.push(image);
+            // console.log("imageusage", image.name, image.imageusage.length);
+            // console.log("imageinfo", image.name, image.imageinfo);
+        }
+
+        // console.log("allimages", allimages);
+        // allimages = allimages.filter(d=>d.imageinfo.thumburl && (d.imageusage.length > 0));
+        let items = main.selectAll("div.file")
+            .data(useimages, d=>d.title)
+            .enter()
+            .append("div")
+            .attr("class", "file")
+            .append("a")
+            .attr("href", d=>url_for_title(d.imageusage[d.imageusage.length-1].title))
+            .attr("target", "wikiframe")
+            .append("img")
+            .attr('src', d=>d.imageinfo.thumburl);
+
+        if (data.continue) {
+            url = baseurl+"&aicontinue="+data.continue.aicontinue;
+        }
+        count += useimages.length;
+        debugloopcount += 1;
+        // if (debugloopcount >= 5) break;
+    }
+
+}
+document.addEventListener("DOMContentLoaded", load);
+document.querySelector("a#more").addEventListener("click", function (e) {
+    e.preventDefault();
+    load();
+});

special/wikipage/wikipage.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>recent files</title>
+<meta charset="utf-8">
+<style>
+    body {
+        background: #eee;
+        background-image: linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0), linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
+        background-position: 0 0, 20px 20px;
+        background-size: 40px 40px;
+    }
+    div.file {
+        float: left;
+        margin: 8px;
+	max-width: 45%;
+    }
+    div.file img {
+	max-width: 100%;
+    }
+    div#footer {
+        clear: both;
+        text-align: center;
+    }
+    a#more {
+        color: white;
+        text-decoration: none;
+        background: black;
+        padding: 5px;
+    }
+</style>
+</head>
+<body>
+<div id="content"></div>
+<div id="footer"><a href="#" id="more">en plus&hellip;</a></div>
+<script src="dist/recentfiles.js"></script>
+</body>
+</html>