creation d'un bouton pour fermer et de reouvrire la carte

.gitignore

@@ -0,0 +1,6 @@
+package-lock.json
+venv/
+node_modules/
+*~
+*.swp
+*.swo

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

README.md

@@ -1,3 +1,15 @@
+<<<<<<< HEAD
+
+
+
+Development
+===============
+
+To rebuild the javascript, you need to use node + rollup.
+
+    npm install
+=======
 # map
 
 La carte intéractive du site de l'erg. Dévellopper en jquery, utilisant leaflet.
+>>>>>>> cb36396efa5e9c161aff3dd7cc9cc3f751b04a51

custom_delo.css

@@ -0,0 +1,37 @@
+#page {  
+        left:40%;  
+    }  
+      
+    #wikiframediv {  
+        right: 60%;  
+    }  
+      
+    svg g.page text {  
+        font-size: 2pt;  
+        fill: rgba(255,255,255,0.9);  
+        font-family: monospace;  
+        stroke: rgba(0,0,0,0.3);  
+        stroke-width: 0.5px;  
+          
+    }  
+      
+    svg g.active2 text {  
+        font-size: 4pt;  
+        visibility: visible;  
+    }  
+      
+    svg g.active text {  
+        font-size: 8pt;  
+        visibility: visible;  
+    }  
+      
+    .links .page, .nodes .page{  
+        opacity: 0.4;  
+    }  
+      
+      
+    .page.active, .page.active2 {  
+        opacity: 1;  
+    }
+
+

data/cats.json

@@ -0,0 +1,257 @@
+[
+  {
+    "title": "Actualit\u00e9s",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Actualit\u00e9s"
+  },
+  {
+    "title": "Actualit\u00e9s (2013)",
+    "depth": 1,
+    "parent": "Actualit\u00e9s",
+    "name": "Cat\u00e9gorie:Actualit\u00e9s (2013)"
+  },
+  {
+    "title": "Actualit\u00e9s (2014)",
+    "depth": 1,
+    "parent": "Actualit\u00e9s",
+    "name": "Cat\u00e9gorie:Actualit\u00e9s (2014)"
+  },
+  {
+    "title": "Actualit\u00e9s (2015)",
+    "depth": 1,
+    "parent": "Actualit\u00e9s",
+    "name": "Cat\u00e9gorie:Actualit\u00e9s (2015)"
+  },
+  {
+    "title": "Actualit\u00e9s (2016)",
+    "depth": 1,
+    "parent": "Actualit\u00e9s",
+    "name": "Cat\u00e9gorie:Actualit\u00e9s (2016)"
+  },
+  {
+    "title": "Actualit\u00e9s (2017)",
+    "depth": 1,
+    "parent": "Actualit\u00e9s",
+    "name": "Cat\u00e9gorie:Actualit\u00e9s (2017)"
+  },
+  {
+    "title": "Actualit\u00e9s (2018)",
+    "depth": 1,
+    "parent": "Actualit\u00e9s",
+    "name": "Cat\u00e9gorie:Actualit\u00e9s (2018)"
+  },
+  {
+    "title": "Actualit\u00e9s (2019)",
+    "depth": 1,
+    "parent": "Actualit\u00e9s",
+    "name": "Cat\u00e9gorie:Actualit\u00e9s (2019)"
+  },
+  {
+    "title": "Ateliers pluridisciplinaires",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Ateliers pluridisciplinaires"
+  },
+  {
+    "title": "Ateliers pluridisciplinaires (BA)",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Ateliers pluridisciplinaires (BA)"
+  },
+  {
+    "title": "Ateliers pluridisciplinaires (MA)",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Ateliers pluridisciplinaires (MA)"
+  },
+  {
+    "title": "B1",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:B1"
+  },
+  {
+    "title": "B2",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:B2"
+  },
+  {
+    "title": "B3",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:B3"
+  },
+  {
+    "title": "Bachelors",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Bachelors"
+  },
+  {
+    "title": "Cours de soutien sp\u00e9cifique",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Cours de soutien sp\u00e9cifique"
+  },
+  {
+    "title": "Cours techniques",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Cours techniques"
+  },
+  {
+    "title": "Cours th\u00e9oriques",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Cours th\u00e9oriques"
+  },
+  {
+    "title": "Critique du f\u00e9minisme",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Critique du f\u00e9minisme"
+  },
+  {
+    "title": "English",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:English"
+  },
+  {
+    "title": "\u00c9quipes",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:\u00c9quipes"
+  },
+  {
+    "title": "Conseil de gestion p\u00e9dagogique",
+    "depth": 1,
+    "parent": "\u00c9quipes",
+    "name": "Cat\u00e9gorie:Conseil de gestion p\u00e9dagogique"
+  },
+  {
+    "title": "Conseil \u00e9tudiant",
+    "depth": 1,
+    "parent": "\u00c9quipes",
+    "name": "Cat\u00e9gorie:Conseil \u00e9tudiant"
+  },
+  {
+    "title": "Enseignants",
+    "depth": 1,
+    "parent": "\u00c9quipes",
+    "name": "Cat\u00e9gorie:Enseignants"
+  },
+  {
+    "title": "\u00c9quipe administrative",
+    "depth": 1,
+    "parent": "\u00c9quipes",
+    "name": "Cat\u00e9gorie:\u00c9quipe administrative"
+  },
+  {
+    "title": "Essai paru en 1984",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Essai paru en 1984"
+  },
+  {
+    "title": "\u00c9tudes de genre",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:\u00c9tudes de genre"
+  },
+  {
+    "title": "Index",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Index"
+  },
+  {
+    "title": "International",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:International"
+  },
+  {
+    "title": "Les lieux de production et d'exp\u00e9rimentation",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Les lieux de production et d'exp\u00e9rimentation"
+  },
+  {
+    "title": "Livre sur le f\u00e9minisme",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Livre sur le f\u00e9minisme"
+  },
+  {
+    "title": "Masters",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Masters"
+  },
+  {
+    "title": "Cours de soutien \u00e0 l'orientation",
+    "depth": 1,
+    "parent": "Masters",
+    "name": "Cat\u00e9gorie:Cours de soutien \u00e0 l'orientation"
+  },
+  {
+    "title": "M1",
+    "depth": 1,
+    "parent": "Masters",
+    "name": "Cat\u00e9gorie:M1"
+  },
+  {
+    "title": "M2",
+    "depth": 1,
+    "parent": "Masters",
+    "name": "Cat\u00e9gorie:M2"
+  },
+  {
+    "title": "Masters sp\u00e9cialis\u00e9s",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Masters sp\u00e9cialis\u00e9s"
+  },
+  {
+    "title": "Orientations",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Orientations"
+  },
+  {
+    "title": "Outils collectifs",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Outils collectifs"
+  },
+  {
+    "title": "Pages avec des erreurs de coloration syntaxique",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Pages avec des erreurs de coloration syntaxique"
+  },
+  {
+    "title": "Pages avec des liens de fichiers bris\u00e9s",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Pages avec des liens de fichiers bris\u00e9s"
+  },
+  {
+    "title": "Page web",
+    "depth": 1,
+    "parent": "Pages avec des liens de fichiers bris\u00e9s",
+    "name": "Cat\u00e9gorie:Page web"
+  },
+  {
+    "title": "Pages d\u00e9passant la profondeur d'expansion maximale",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Pages d\u00e9passant la profondeur d'expansion maximale"
+  },
+  {
+    "title": "Provenance web",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Provenance web"
+  },
+  {
+    "title": "Selection",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Selection"
+  },
+  {
+    "title": "Sites satellites",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Sites satellites"
+  },
+  {
+    "title": "Sites sattelites",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Sites sattelites"
+  },
+  {
+    "title": "Stages",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Stages"
+  },
+  {
+    "title": "Wiki only",
+    "depth": 0,
+    "name": "Cat\u00e9gorie:Wiki only"
+  }
+]

dist/custom_scroller_menu.js

@@ -0,0 +1,101 @@
+function custom_scroller_menu (selt, menuelt, debug) {
+    function log () {
+        if (!debug) return;
+        console.log.apply(null, arguments);
+        var msg = "";
+        for (var i=0, l=arguments.length; i<l; i++) {
+            msg += arguments[i] + " ";
+        }
+        debug.innerHTML += "\n"+ msg;
+    }
+    // console.log("selt", selt);
+    // document.addEventListener("scroll", function (e) {
+    //     var sm = selt.scrollHeight - selt.clientHeight;
+    //     console.log("scroll", selt.scrollTop, sm, selt.scrollHeight);
+    // })
+    var dragging = false,
+        drag_ref_y = 0,
+        scroll_ref_y = 0,
+        last_y = 0,
+        starttime = null;
+
+    var hc = menuelt;
+
+    function touchstart (e) {
+        if (dragging) { return; }
+        var nn = e.target.nodeName.toLowerCase(),
+            touch = e;
+        if (e.touches) {
+            if (e.touches.length != 1) { return; }
+            touch = e.touches[0];
+        }
+        log("touchstart", nn);
+        if (nn == "img" || nn == "input") {
+            return;
+        }
+        if (nn !== "a") {
+            e.preventDefault();
+            e.stopPropagation();
+            drag_ref_y = touch.screenY;
+            last_y = touch.screenY;
+            scroll_ref_y = selt.scrollTop;
+            dragging = true;
+            starttime = new Date().getTime();
+            log("start drag", drag_ref_y, starttime);
+        } else {
+            log("headtouch", nn);
+        }        
+    }
+    function touchmove (e) {
+        if (dragging) {
+            var touch = e;
+            if (e.touches) {
+                touch = e.touches[0];
+            }
+            last_y = touch.screenY;
+            var dy = touch.screenY - drag_ref_y;
+            selt.scrollTop = scroll_ref_y - dy;
+        }
+    }
+    function touchend (e) {
+        if (dragging) {
+            log("touchend");
+            dragging = false;
+            var elapsed_time = new Date().getTime() - starttime;
+            // log("end of drag", elapsed_time);
+            if (elapsed_time <= 500) {
+                var open = false,
+                    scrollMax = selt.scrollHeight - selt.clientHeight;
+                // do a snap / throw ... direction ??
+                if (last_y == drag_ref_y) {
+                    // console.log("no change, guessing state");
+                    // toggle current state
+                    var sp = selt.scrollTop;
+                    log("guess", sp/scrollMax);
+                    open = ((sp / scrollMax) < 0.5);
+                } else {
+                    log("end/drag", last_y, drag_ref_y);
+                    open = (last_y < drag_ref_y);
+                }
+                log("THROW", open ? "open" : "closed");
+                if (open) {
+                    selt.scrollTop = scrollMax;
+                } else {
+                    selt.scrollTop = 0;
+                }
+            } else {
+                log("long", elapsed_time);
+            }            
+        }
+    }
+
+    menuelt.addEventListener("touchstart", touchstart);
+    menuelt.addEventListener("touchmove", touchmove);
+    menuelt.addEventListener("touchend", touchend);
+    menuelt.addEventListener("touchcancel", touchend);
+    menuelt.addEventListener("mousedown", touchstart);
+    menuelt.addEventListener("mousemove", touchmove);
+    menuelt.addEventListener("mouseup", touchend);
+    menuelt.addEventListener("mouseleave", touchend);
+
+}

dist/index.00.js

@@ -0,0 +1,127 @@
+// custom_scroller_menu(
+//     document.scrollingElement,
+//     document.getElementById("menubar"),
+//     document.getElementById("debug"));
+
+var svg = document.querySelector("#svg"),
+    iframe = document.querySelector("iframe#wikiframe"),
+    cats = document.querySelector("#cats"),
+    cats_contents = document.querySelector("#cats .body"),
+    cats_thumb = document.querySelector("#cats .thumb"),
+    allcatscb = document.querySelector("input#allcats"),
+    historycb = document.querySelector("input#history"),
+    current_title = null,
+    loaded = false,
+    wikibaseurl,
+    wikibasepat;
+
+
+window.addEventListener("resize", resize);
+function resize() {
+    var w = window,
+    d = document,
+    e = d.documentElement,
+    g = d.getElementsByTagName('body')[0],
+    x = w.innerWidth || e.clientWidth || g.clientWidth,
+    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
+    svg.setAttribute("width", x);
+    svg.setAttribute("height", y);
+    //console.log("resize", x, y);
+}
+resize();
+
+// console.log("mediawikiapi", mediawikiapi);
+var symbols = {
+    "Orientations": "symbols.svg#Orientations",
+    "Ateliers pluridisciplinaires": "symbols.svg#Ateliers_pluridisciplinaires",
+    "Cours de soutien à l'orientation": "symbols.svg#Cours_de_soutien_a_l'orientation",
+    "Cours de soutien spécifique": "symbols.svg#Cours_de_soutien_specifique",
+    "Cours techniques": "symbols.svg#Cours_techniques",
+    "Cours théoriques": "symbols.svg#Cours_theoriques",
+    "Enseignants": "symbols.svg#Enseignants",
+    "default": "symbols.svg#Main"
+};
+var map = new app.Map(symbols);
+
+map.init_svg("#svg");
+async function doload () {
+    console.log("loading map");
+    await map.load_json("data/sitemap.json");
+    // console.log("loading categories");
+    // await map.load_cats("cats.json", cats_contents);
+    console.log("LOADED!");
+    loaded = true;
+    if (current_title) {
+        map.set_active_title(current_title);
+    }
+}
+
+map.on("page", function (title) {
+    console.log("map.page", title);
+    var url = wiki_title_to_url(title);
+    iframe.src = url;
+})
+// async function doload() {
+//     map.set_active_node(startpage.value);
+// }
+
+function strip_fragment (href) {
+    var spos = href.indexOf("#");
+    if (spos >= 0) {
+        return href.substr(0, href.indexOf("#"))
+    }
+    return href;
+}
+function url_to_wiki_title (href) {
+    href = strip_fragment(href);
+    var m = wikibasepat.exec(href);
+    if (m !== null) {
+        return decodeURI(m[1]).replace(/_/g, " ");
+    }
+    console.log("m", m);
+}
+function wiki_title_to_url (title) {
+    return wikibaseurl+encodeURI(title.replace(/ /g, "_"));
+}
+window.addEventListener("DOMContentLoaded", doload);
+function strip_title_from_wiki_url (url) {
+    return url.substr(0, url.lastIndexOf("/")+1);
+}
+iframe.addEventListener("load", function () {
+    var href = strip_fragment(iframe.contentWindow.location.href);
+    if (!wikibaseurl) {
+        wikibaseurl = strip_title_from_wiki_url(href);
+        wikibasepat = new RegExp(wikibaseurl+"(.+)");
+    }
+    console.log("iframe loaded", href);
+    var title = url_to_wiki_title(href);
+    console.log("title", title);
+    if (title) {
+        current_title = title;
+        if (loaded) {
+            map.set_active_title(title);
+        }
+    }
+    // attempt to map url to wiki page title and update the map if it is one
+
+});
+
+cats_thumb.addEventListener("click", function () {
+    cats.classList.toggle("expanded");
+});
+// allcats checkbox
+// match current state & respond to change events
+// console.log("setting checked to", cats.classList.contains("showall"))
+allcatscb.checked = cats.classList.contains("showall");
+allcatscb.addEventListener("change", function () {
+    // console.log("allcats", allcatscb);
+    if (allcatscb.checked) {
+        cats.classList.add("showall")
+    } else {
+        cats.classList.remove("showall")            
+    }
+})
+historycb.addEventListener("change", function () {
+    // console.log("history", historycb.checked);
+    map.set_show_history(historycb.checked);
+})

dist/index.js

@@ -0,0 +1,112 @@
+
+var svg = document.querySelector("#svg"),
+    iframe = document.querySelector("iframe#wikiframe"),
+    map = new app.Map({
+        apiurl: "/mw/api.php",
+        symbols: "src/legend.json",
+        svg: "#svg",
+        categorylabel: "Catégorie",
+        categorydiv: "#cats .body",
+	// permet de controler le niveau de zoom de la carte
+        zoom: 3,
+    }),
+    zoom_in = document.querySelector(".leaflet-control-zoom-in"),
+    zoom_out = document.querySelector(".leaflet-control-zoom-out"),
+    cats = document.querySelector("#cats");
+
+window.addEventListener("resize", resize);
+function resize() {
+    var w = window,
+    d = document,
+    e = d.documentElement,
+    g = d.getElementsByTagName('body')[0],
+    x = w.innerWidth || e.clientWidth || g.clientWidth,
+    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
+    // svg.setAttribute("width", x);
+    // svg.setAttribute("height", y);
+    //console.log("resize", x, y);
+
+    // Match size of parent
+    svg.setAttribute("width", page.clientWidth);
+    svg.setAttribute("height", page.clientHeight);
+
+    // Checks if narrow device
+    if (x>600){ g.querySelector("#cats").classList.add("expanded")}
+}
+
+async function doload () {
+    resize();
+    console.log("map.init");
+    await map.init();
+    console.log("map.init: done");
+
+    map.on("page", function (page) {
+        // console.log("map.page", page.title);
+        var url = page.url();
+        if (iframe.src !== url) {
+            // console.log("setting iframe src to", url);
+            iframe.src = url;
+        }
+    })
+    zoom_in.addEventListener("click", (e) => {
+        map.zoom_in();
+    })
+    zoom_out.addEventListener("click", (e) => {
+        map.zoom_out();
+    })
+}
+window.addEventListener("DOMContentLoaded", doload);
+iframe.addEventListener("load", function () {
+    map.set_active_url(iframe.contentWindow.location.href);
+});
+
+cats.addEventListener("click", e => {
+    cats.classList.toggle("expanded");
+});
+
+var specialselect = document.querySelector("select#special"),
+    // specialselectdiv = document.getElementById("specialselectdiv"),
+    specialiframediv = document.getElementById("specialiframediv"),
+    specialiframe = null,
+    specialsrc = null,
+    specialclosediv = document.getElementById("specialclosediv"),
+    specialclosebutton = document.getElementById("specialclosebutton");
+
+function set_special (v) {
+    if (specialsrc !== v) {
+        specialsrc = v;
+        specialselect.value = v;
+        if (specialsrc !== "") {
+            if (specialiframe == null) {
+        //  <iframe id="specialframe" name="specialframe" src="/m/special/recentfiles/recentfiles.html"></iframe>
+                specialiframe = document.createElement('iframe');
+                specialiframediv.appendChild(specialiframe);
+            }
+            // console.log("specialiframe.src", specialiframe.src)
+            if (specialiframe.getAttribute("src") != specialsrc) {
+                console.log("setAttribute iframe src", specialsrc);
+                specialiframe.setAttribute("src", specialsrc);
+            }
+            specialiframediv.style.display = "block";
+            specialclosediv.style.display = "block";
+        } else {
+            // show map
+            // if (specialiframe) {
+            //     specialiframe.src = "";
+            //     specialiframediv.removeChild(specialiframe);
+            //     specialiframe = null;
+            // }
+            specialiframediv.style.display = "none";
+            specialclosediv.style.display = "none";
+        }
+    }
+}
+set_special(specialselect.value);
+specialclosebutton.addEventListener("click", function (e) {
+    e.preventDefault();
+    set_special("");
+});
+specialselect.addEventListener("input", function (e) {
+    console.log("specialselect", specialselect.value);
+    set_special(specialselect.value);
+});

img/symbols.orig.svg

@@ -0,0 +1,198 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="symbols.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="216.47094"
+     inkscape:cy="1066.4499"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1366"
+     inkscape:window-height="704"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g4669"
+       inkscape:export-xdpi="101.24"
+       inkscape:export-ydpi="101.24">
+      <g
+         style="stroke:#606060;stroke-opacity:1"
+         transform="matrix(0.42450461,0,0,0.42450461,19.61278,7.9970163)"
+         id="g4600">
+        <path
+           style="fill:none;stroke:#606060;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 78.937409,12.378389 h 12.06565"
+           id="path4572"
+           inkscape:connector-curvature="0" />
+        <path
+           style="fill:none;stroke:#606060;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 78.937409,15.438998 h 12.06565"
+           id="path4572-6"
+           inkscape:connector-curvature="0" />
+        <path
+           style="fill:none;stroke:#606060;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 78.859443,18.646139 h 12.06565"
+           id="path4572-2"
+           inkscape:connector-curvature="0" />
+      </g>
+      <rect
+         y="10.81856"
+         x="51.903004"
+         height="7.5269685"
+         width="7.5269685"
+         id="rect4602"
+         style="fill:none;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+    <g
+       id="g4676"
+       inkscape:export-xdpi="101.24"
+       inkscape:export-ydpi="101.24">
+      <g
+         inkscape:transform-center-y="-1.5700831"
+         inkscape:transform-center-x="-1.6012813"
+         inkscape:export-ydpi="71.145638"
+         inkscape:export-xdpi="71.145638"
+         transform="matrix(0.43229192,0,0,0.43229192,17.802805,7.5991505)"
+         id="g4513-7">
+        <path
+           style="fill:none;stroke:#606060;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 98.928194,14.954166 6.198716,-3.578827 5.9449,3.432289"
+           id="path4487-5"
+           inkscape:connector-curvature="0"
+           inkscape:export-xdpi="71.145638"
+           inkscape:export-ydpi="71.145638" />
+        <path
+           style="fill:none;stroke:#606060;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 98.928194,18.014776 6.198716,-3.578828 5.9449,3.432289"
+           id="path4487-3-3"
+           inkscape:connector-curvature="0"
+           inkscape:export-xdpi="71.145638"
+           inkscape:export-ydpi="71.145638" />
+        <path
+           style="fill:none;stroke:#606060;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 98.928194,21.075378 6.198716,-3.578827 5.9449,3.432289"
+           id="path4487-6-5"
+           inkscape:connector-curvature="0"
+           inkscape:export-xdpi="71.145638"
+           inkscape:export-ydpi="71.145638" />
+      </g>
+      <rect
+         y="10.81856"
+         x="59.429974"
+         height="7.5269685"
+         width="7.5269685"
+         id="rect4602-9"
+         style="fill:none;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+    <g
+       id="g4689"
+       inkscape:export-xdpi="101.24"
+       inkscape:export-ydpi="101.24">
+      <g
+         transform="matrix(0.41838874,0,0,0.41838874,27.098315,8.7927188)"
+         id="g4547">
+        <circle
+           style="fill:none;fill-opacity:1;stroke:#606060;stroke-width:0.77449554;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="path4539"
+           cx="121.70833"
+           cy="13.366666"
+           r="4.6106687" />
+        <path
+           style="fill:none;stroke:#606060;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 124.78814,16.46054 2.66602,2.478925"
+           id="path4541"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cc" />
+      </g>
+      <rect
+         y="10.81856"
+         x="74.48391"
+         height="7.5269685"
+         width="7.5269685"
+         id="rect4602-1-2"
+         style="fill:none;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+    <g
+       id="g4683"
+       inkscape:export-xdpi="101.24"
+       inkscape:export-ydpi="101.24">
+      <rect
+         y="10.81856"
+         x="66.95694"
+         height="7.5269685"
+         width="7.5269685"
+         id="rect4602-1"
+         style="fill:none;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <g
+         inkscape:transform-center-y="1.5700833"
+         inkscape:transform-center-x="1.6012835"
+         inkscape:export-ydpi="71.145638"
+         inkscape:export-xdpi="71.145638"
+         transform="matrix(-0.43229191,0,0,-0.43229191,116.11108,21.564937)"
+         id="g4513-7-7">
+        <path
+           style="fill:none;stroke:#606060;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 98.928194,14.954166 6.198716,-3.578827 5.9449,3.432289"
+           id="path4487-5-0"
+           inkscape:connector-curvature="0"
+           inkscape:export-xdpi="71.145638"
+           inkscape:export-ydpi="71.145638" />
+        <path
+           style="fill:none;stroke:#606060;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 98.928194,18.014776 6.198716,-3.578828 5.9449,3.432289"
+           id="path4487-3-3-9"
+           inkscape:connector-curvature="0"
+           inkscape:export-xdpi="71.145638"
+           inkscape:export-ydpi="71.145638" />
+        <path
+           style="fill:none;stroke:#606060;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="m 98.928194,21.075378 6.198716,-3.578827 5.9449,3.432289"
+           id="path4487-6-5-3"
+           inkscape:connector-curvature="0"
+           inkscape:export-xdpi="71.145638"
+           inkscape:export-ydpi="71.145638" />
+      </g>
+    </g>
+  </g>
+</svg>

img/symbols.svg

@@ -0,0 +1,289 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="32.387501mm"
+   height="32.356251mm"
+   viewBox="0 0 32.3875 32.356251"
+   version="1.1"
+   id="svg5507"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   sodipodi:docname="symbols.svg"
+   enable-background="new"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs5501" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.968516"
+     inkscape:cx="16.674999"
+     inkscape:cy="41.434845"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer2"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1362"
+     inkscape:window-height="718"
+     inkscape:window-x="2"
+     inkscape:window-y="48"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-paths="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-center="true"
+     inkscape:snap-object-midpoints="true"
+     showguides="false"
+     inkscape:guide-bbox="true"
+     inkscape:showpageshadow="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1">
+    <sodipodi:guide
+       position="1.2695302,37.647915"
+       orientation="0,1"
+       id="guide994"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="4.0424514,24.568452"
+       orientation="0,1"
+       id="guide996"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5504">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Main"
+     style="display:inline">
+    <path
+       id="Main"
+       d="m 0.00702812,-2.920128 c -0.40161335,0 -0.78453276,0.088375 -1.13252892,0.2355662 -0.3479978,0.1471904 -0.660957,0.3619688 -0.9241446,0.6251563 -0.2631876,0.2631876 -0.4779659,0.576147 -0.6251569,0.9241442 -0.1471898,0.34799704 -0.2265059,0.73091595 -0.2265059,1.1325292 0,0.4016138 0.079315,0.7754723 0.2265059,1.1234696 0.147191,0.3479971 0.3619693,0.6700169 0.6251569,0.9332041 0.2631876,0.2631876 0.5761468,0.4689057 0.9241446,0.6160961 0.34799616,0.1471907 0.73091557,0.2355662 1.13252892,0.2355662 0.40161346,0 0.78453263,-0.088375 1.13252898,-0.2355662 C 1.487555,2.5228473 1.800514,2.3171292 2.0637016,2.0539416 2.3268892,1.7907544 2.5416675,1.4687346 2.6888586,1.1207375 2.8360483,0.7727402 2.9153647,0.3988817 2.9153647,-0.0027321 c 0,-0.40161325 -0.079316,-0.78453216 -0.2265061,-1.1325292 C 2.5416675,-1.4832585 2.3268892,-1.7962179 2.0637016,-2.0594055 1.800514,-2.322593 1.487555,-2.5373714 1.1395571,-2.6845618 0.79156075,-2.8317522 0.40864158,-2.920128 0.00702812,-2.920128 Z"
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.927768;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+       inkscape:connector-curvature="0"
+       inkscape:label="#path6386-5-5" />
+  </g>
+  <g
+     inkscape:label="Orientations"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:none">
+    <g
+       id="Orientations"
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:0.99615389"
+       transform="matrix(0.40423298,0,0,0.40423298,35.516699,-0.22522322)">
+      <path
+         id="Orientations-0"
+         d="m -87.8577,-14.01912 c -8.05454,0 -14.59375,6.50796 -14.59375,14.5625 0,8.05454 6.53921,14.59375 14.59375,14.59375 8.05454,0 14.59375,-6.53921 14.59375,-14.59375 0,-8.05454 -6.53921,-14.5625 -14.59375,-14.5625 z"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path6386"
+         d="m -87.7327,-7.2465492 c -1.058962,0 -2.068631,0.2330264 -2.986219,0.6211335 -0.917588,0.3881071 -1.742789,0.9544279 -2.436754,1.6483926 -0.693965,0.6939647 -1.260285,1.5191664 -1.648393,2.4367544 -0.388107,0.917588 -0.597243,1.92725673 -0.597243,2.98621857 0,1.05896183 0.209136,2.04474083 0.597243,2.96232883 0.388108,0.917588 0.954428,1.7666794 1.648393,2.4606441 0.693965,0.6939647 1.519166,1.2363958 2.436754,1.6245029 0.917588,0.3881071 1.927257,0.6211335 2.986219,0.6211335 1.058962,0 2.068631,-0.2330264 2.986219,-0.6211335 0.917588,-0.3881071 1.742789,-0.9305382 2.436754,-1.6245029 0.693965,-0.6939647 1.260285,-1.5430561 1.648393,-2.4606441 0.388107,-0.917588 0.597243,-1.903367 0.597243,-2.96232883 0,-1.05896184 -0.209136,-2.06863057 -0.597243,-2.98621857 -0.388108,-0.917588 -0.954428,-1.7427897 -1.648393,-2.4367544 -0.693965,-0.6939647 -1.519166,-1.2602855 -2.436754,-1.6483926 -0.917588,-0.3881071 -1.927257,-0.6211335 -2.986219,-0.6211335 z"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.44631028;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Ateliers_pluridisciplinaires"
+     style="display:none">
+    <g
+       transform="matrix(0.65256016,0,0,0.65256016,58.839197,-28.341992)"
+       id="Ateliers_pluridisciplinaires"
+       style="fill:none;stroke:#000000">
+      <circle
+         r="19.208878"
+         cy="40.264759"
+         cx="116.73087"
+         transform="matrix(0.36441483,0,0,0.36441483,-132.69908,28.796006)"
+         id="path6780"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:16.4647522;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none" />
+      <g
+         id="g8172"
+         transform="matrix(2.1333332,0,0,-2.1333332,13.499857,367.42774)"
+         style="fill:none;fill-opacity:0.99615389;stroke:#000000;stroke-opacity:0.98846154">
+        <path
+           transform="matrix(0.05856667,0,0,-0.05856667,-55.427399,154.21379)"
+           style="fill:none;fill-opacity:0.99615389;stroke:#000000;stroke-width:0;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.98846154;marker-start:none"
+           d="M 135.93975,40.264759 A 19.208878,19.208878 0 0 1 116.73087,59.473637 19.208878,19.208878 0 0 1 97.521996,40.264759 19.208878,19.208878 0 0 1 116.73087,21.055882 19.208878,19.208878 0 0 1 135.93975,40.264759 Z"
+           id="path8174"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer4"
+     inkscape:label="Cours_de_soutien_a_l_orientation"
+     style="display:none">
+    <g
+       id="Cours_de_soutien_a_l_orientation"
+       style="display:inline;fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:0.99615389"
+       transform="matrix(0.40423297,0,0,0.40423297,35.552134,-0.25339243)"
+       inkscape:label="#Cours_de_soutien_a_l'orientation">
+      <path
+         id="Orientations-0-7"
+         d="m -87.940348,-13.895148 c -8.05454,0 -14.593742,6.5079588 -14.593742,14.56249871 0,8.05454009 6.539202,14.59375129 14.593742,14.59375129 8.05454,0 14.59375,-6.5392112 14.59375,-14.59375129 0,-8.05453991 -6.53921,-14.56249871 -14.59375,-14.56249871 z"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path6386-5"
+         d="m -87.815348,-5.0851598 c -0.778051,0 -1.519886,0.1712117 -2.194064,0.4563657 -0.674181,0.285154 -1.280481,0.7012471 -1.790358,1.2111239 -0.509877,0.509877 -0.92597,1.1161775 -1.211125,1.7903572 -0.285153,0.67417963 -0.438813,1.41601363 -0.438813,2.19406488 0,0.77805152 0.15366,1.50233312 0.438813,2.17651272 0.285155,0.6741797 0.701248,1.2980328 1.211125,1.8079096 0.509877,0.5098769 1.116177,0.9084175 1.790358,1.1935714 0.674178,0.2851541 1.416013,0.4563658 2.194064,0.4563658 0.778051,0 1.519886,-0.1712117 2.194064,-0.4563658 0.674181,-0.2851539 1.280481,-0.6836945 1.790358,-1.1935714 0.509877,-0.5098768 0.92597,-1.1337299 1.211125,-1.8079096 0.285153,-0.6741796 0.438813,-1.3984612 0.438813,-2.17651272 0,-0.77805125 -0.15366,-1.51988525 -0.438813,-2.19406488 -0.285155,-0.6741797 -0.701248,-1.2804802 -1.211125,-1.7903572 -0.509877,-0.5098768 -1.116177,-0.9259699 -1.790358,-1.2111239 -0.674178,-0.285154 -1.416013,-0.4563657 -2.194064,-0.4563657 z"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.79737806;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer5"
+     inkscape:label="Cours_de_soutien_specifique"
+     style="display:none">
+    <g
+       id="Cours_de_soutien_specifique"
+       style="fill:none;fill-opacity:0.99615389;stroke:#000000;stroke-opacity:0.99615389"
+       transform="matrix(0.40361541,0,0,0.40361541,36.375644,34.076526)">
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6358"
+         d="m 356.1875,401.09375 c -8.05454,0 -14.59375,6.53921 -14.59375,14.59375 0,8.05454 6.53921,14.5625 14.59375,14.5625 8.05454,0 14.5625,-6.50796 14.5625,-14.5625 0,-8.05454 -6.50796,-14.59375 -14.5625,-14.59375 z"
+         style="fill:none;fill-opacity:0.99615389;stroke:#000000;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6329"
+         d="m 356.3125,413.9375 c -0.44744,0 -0.86303,0.17553 -1.15625,0.46875 -0.29322,0.29322 -0.46875,0.70881 -0.46875,1.15625 0,0.44744 0.17553,0.83178 0.46875,1.125 0.29322,0.29322 0.70881,0.46875 1.15625,0.46875 0.44744,0 0.83178,-0.17553 1.125,-0.46875 0.29322,-0.29322 0.46875,-0.67756 0.46875,-1.125 0,-0.44744 -0.17553,-0.86303 -0.46875,-1.15625 -0.29322,-0.29322 -0.67756,-0.46875 -1.125,-0.46875 z"
+         style="fill:none;fill-opacity:0.99615389;stroke:#000000;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6327"
+         d="m 356.3125,413.9375 c 0.44744,0 0.83178,0.17553 1.125,0.46875 0.29322,0.29322 0.46875,0.70881 0.46875,1.15625 0,0.44744 -0.17553,0.83178 -0.46875,1.125 -0.29322,0.29322 -0.67756,0.46875 -1.125,0.46875 -0.44744,0 -0.86303,-0.17553 -1.15625,-0.46875 -0.29322,-0.29322 -0.46875,-0.67756 -0.46875,-1.125 0,-0.44744 0.17553,-0.86303 0.46875,-1.15625 0.29322,-0.29322 0.70881,-0.46875 1.15625,-0.46875 z"
+         style="fill:none;fill-opacity:0.99615389;stroke:#000000;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6324"
+         d="m 356.3125,413.9375 c -0.44744,0 -0.86303,0.17553 -1.15625,0.46875 -0.29322,0.29322 -0.46875,0.70881 -0.46875,1.15625 0,0.44744 0.17553,0.83178 0.46875,1.125 0.29322,0.29322 0.70881,0.46875 1.15625,0.46875 0.44744,0 0.83178,-0.17553 1.125,-0.46875 0.29322,-0.29322 0.46875,-0.67756 0.46875,-1.125 0,-0.44744 -0.17553,-0.86303 -0.46875,-1.15625 -0.29322,-0.29322 -0.67756,-0.46875 -1.125,-0.46875 z"
+         style="fill:none;fill-opacity:0.99615389;stroke:#000000;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer6"
+     inkscape:label="Cours_techniques"
+     style="display:none">
+    <g
+       id="Cours_techniques"
+       transform="matrix(0.41014612,0,0,-0.41014612,-14.018646,81.774592)"
+       inkscape:label="#g3142"
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1">
+      <title
+         id="title3278">template</title>
+      <path
+         inkscape:connector-curvature="0"
+         id="path87"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.12598443;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:2.23606801;stroke-dasharray:none;stroke-opacity:1"
+         d="m 49.067296,199.32385 c 0,-8.21904 -6.662847,-14.88189 -14.881888,-14.88189 -8.219041,0 -14.881889,6.66285 -14.881889,14.88189 0,8.21904 6.662848,14.88189 14.881889,14.88189 8.219041,0 14.881888,-6.66285 14.881888,-14.88189 z" />
+      <g
+         id="g3119"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:1">
+        <path
+           d="m 44.815326,199.32385 c 0,-5.87075 -4.759174,-10.62992 -10.629918,-10.62992 -5.870744,0 -10.629921,4.75917 -10.629921,10.62992 0,5.87074 4.759177,10.62992 10.629921,10.62992 5.870744,0 10.629918,-4.75918 10.629918,-10.62992 z"
+           style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.12598443;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:2.23606801;stroke-dasharray:none;stroke-opacity:1"
+           id="path85"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer7"
+     inkscape:label="Actualites"
+     style="display:none">
+    <path
+       d="m 1.2870113,0.02268952 c 0,0.71080369 -0.57622035,1.28702328 -1.287023574708,1.28702328 C -0.71081588,1.3097128 -1.2870354,0.73349321 -1.2870354,0.02268952 c 0,-0.71080371 0.57621952,-1.28702332 1.287023125292,-1.28702332 C 0.71079095,-1.2643338 1.2870113,-0.68811419 1.2870113,0.02268952 Z"
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.162155;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2.23607;stroke-dasharray:0.486463, 0.486463;stroke-dashoffset:0;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:none"
+       id="Actualites"
+       inkscape:connector-curvature="0"
+       inkscape:label="#path87-1"
+       mask="none" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="Cours_theoriques"
+     style="display:none">
+    <g
+       id="Cours_theoriques"
+       style="display:inline;fill:none;fill-opacity:1;stroke:#000000;stroke-opacity:0.99615389"
+       transform="matrix(0.40423298,0,0,0.40423298,35.552135,-0.25339326)"
+       inkscape:label="#Cours_theoriques">
+      <path
+         id="Orientations-0-7-6"
+         d="m -87.940348,-13.895148 c -8.05454,0 -14.593742,6.5079588 -14.593742,14.56249871 0,8.05454009 6.539202,14.59375129 14.593742,14.59375129 8.05454,0 14.59375,-6.5392112 14.59375,-14.59375129 0,-8.05453991 -6.53921,-14.56249871 -14.59375,-14.56249871 z"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path6386-5-7"
+         d="m -87.815348,-5.0851598 c -0.778051,0 -1.519886,0.1712117 -2.194064,0.4563657 -0.674181,0.285154 -1.280481,0.7012471 -1.790358,1.2111239 -0.509877,0.509877 -0.92597,1.1161775 -1.211125,1.7903572 -0.285153,0.67417963 -0.438813,1.41601363 -0.438813,2.19406488 0,0.77805152 0.15366,1.50233312 0.438813,2.17651272 0.285155,0.6741797 0.701248,1.2980328 1.211125,1.8079096 0.509877,0.5098769 1.116177,0.9084175 1.790358,1.1935714 0.674178,0.2851541 1.416013,0.4563658 2.194064,0.4563658 0.778051,0 1.519886,-0.1712117 2.194064,-0.4563658 0.674181,-0.2851539 1.280481,-0.6836945 1.790358,-1.1935714 0.509877,-0.5098768 0.92597,-1.1337299 1.211125,-1.8079096 0.285153,-0.6741796 0.438813,-1.3984612 0.438813,-2.17651272 0,-0.77805125 -0.15366,-1.51988525 -0.438813,-2.19406488 -0.285155,-0.6741797 -0.701248,-1.2804802 -1.211125,-1.7903572 -0.509877,-0.5098768 -1.116177,-0.9259699 -1.790358,-1.2111239 -0.674178,-0.285154 -1.416013,-0.4563657 -2.194064,-0.4563657 z"
+         style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.79737806;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer8"
+     inkscape:label="Enseignants"
+     style="display:none">
+    <path
+       sodipodi:type="star"
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.973914;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="Enseignants"
+       sodipodi:sides="3"
+       sodipodi:cx="0.0018145076"
+       sodipodi:cy="0.13116495"
+       sodipodi:r1="6.7946506"
+       sodipodi:r2="3.397325"
+       sodipodi:arg1="0.52606642"
+       sodipodi:arg2="1.573264"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="M 5.8777532,3.5430003 -5.8908909,3.5139594 0.01858127,-6.6634649 Z"
+       inkscape:transform-center-x="-0.0012016352"
+       inkscape:transform-center-y="0.24243705"
+       inkscape:label="#path3225-6-7-7" />
+  </g>
+</svg>

index.00.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>école de recherche graphique</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div id="page">
+        <svg id="svg"></svg>
+        <pre id="debug"></pre>
+        <div id="bottompane">
+            <div id="bottompage">
+                <div id="menubar">
+                    <span id="menu"><img src="img/symhamburger.png"></span>
+                    <input id="searchinput" type="input" placeholder="école de recherche graphique" />
+                    <label for="searchinput" id="search"><img src="img/symsearch.png"></label>
+                    <img src="img/symup.png" />
+                </div>
+                <div id="wikiframediv">
+                    <iframe id="wikiframe" src="/mw"></iframe>
+                </div>
+        </div>
+    </div>
+    <div id="cats" class="expanded">
+        <div class="ocontents">
+        <div class="contents">
+            <div class="head">Liste des catégories</div>
+            <div class="body"></div>
+            <div class="foot"><input id="allcats" type="checkbox"><label for="allcats">Afficher tous</label></div>
+            <hr>
+            <div class="history"><input id="history" type="checkbox"><label for="history">Histoire</div>
+        </div>
+        </div>
+        <div class="botright"><div class="thumb"></div></div>
+    </div>
+</body>
+<script src="dist/custom_scroller_menu.js"></script>
+<script type="text/javascript" src="dist/app.js"></script>
+<script src="dist/index.js"></script>
+</html>

index.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>école de recherche graphique</title>
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
+		 <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=no;"/>
+		<meta charset="utf-8">
+		<link rel="stylesheet" type="text/css" href="style.css">
+		<link rel="stylesheet" type="text/css" href="custom_delo.css">A
+		<style type="text/css">
+#quit {
+	position:fixed;
+	top:15px;
+	right:15px;
+	visibility:visible;
+}
+	@media (max-width: 800px) and (-webkit-min-device-pixel-ratio: 1) { 
+		script {
+			display:none !important;
+		}
+		#page {
+			display:none !important;
+		}
+		#wikiframediv {
+			right:0;
+		}
+	}
+
+		</style>
+		<link rel="icon" type="image/x-icon" href="/Favicon_V1.png">
+	</head>
+	<body>
+		<div id="vbody">
+			<div id="page">
+				<div id="handle"></div>
+				<svg id="svg"></svg>
+				<div id="cats">
+					<div class="body"></div>
+					<div class="placeholder"></div>
+				</div>
+				<div class="zoom-controls">
+					<div class="leaflet-control-zoom leaflet-bar leaflet-control">
+						<a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a>
+						<a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">&ndash;</a>
+					</div>  
+				</div>
+				<div id="specialclosediv">
+					<a id="specialclosebutton" href="#" title="Zoom in" role="button" aria-label="Zoom in">&times;</a>
+				</div>
+				<div id="specialselectdiv">
+					<select id="special">
+						<!--<option value="/m/special/recentnews">news</option>-->
+						<!--<option value="/m/special/ergtv/">erg tv !</option>-->
+						<option value="">Carte</option>
+						<option value="/m/special/recentfiles/">Nouveaux fichiers</option>
+						<option value="/m/special/recentchanges/">Modifications récentes</option>
+						<!--<option value="/m/special/jpo2021-live/">JPO 2021</option>-->
+					</select>
+					<a href="#" id="quit" class="button-style">fermer [x]</a>
+				</div>
+				<div id="specialiframediv"></div>
+			</div>
+			<div id="wikiframediv">
+				<iframe id="wikiframe" name="wikiframe" src="/mw"></iframe>
+			</div>
+
+		</div>
+	</body>
+	<script type="text/javascript">
+		var map = document.getElementById("page");
+document.getElementById("quit").addEventListener("click", function() {
+	if(document.getElementById("quit").textContent === "fermer [x]") {
+
+		console.log("quit map");
+		document.getElementById("page").style.visibility = "hidden";
+		document.getElementById("wikiframediv").style.right = "0";
+
+		document.getElementById("quit").textContent = "🌐 carte";
+		document.getElementById("quit").style.setProperty('top', 'initial');
+		document.getElementById("quit").style.bottom = "15px";
+	}
+	else {
+		document.getElementById("page").style.visibility = "visible";
+		document.getElementById("wikiframediv").style.right = "60%";
+
+		document.getElementById("page").style.visibility = "visible";
+		document.getElementById("wikiframediv").style.right = "60%";
+		document.getElementById("quit").textContent = "fermer [x]";
+		document.getElementById("quit").style.setProperty('bottom', 'initial');
+		document.getElementById("quit").style.top = "15px";
+	}
+
+});
+	</script>
+	<script type="text/javascript" src="dist/app.js"></script>
+	<script src="dist/index.js"></script>
+</html>

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "plum",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "d3-fetch": "^1.1.2",
+    "d3-force": "^2.0.1",
+    "d3-zoom": "^1.7.3",
+    "eventemitter3": "^3.1.2",
+    "fetch-jsonp": "^1.1.3",
+    "jsonp": "^0.2.1",
+    "jsonp-p": "^2.0.0",
+    "rollup": "^1.12.3",
+    "webpack": "^4.32.0"
+  },
+  "devDependencies": {
+    "d3-collection": "^1.0.7",
+    "d3-drag": "^1.2.3",
+    "d3-selection": "^1.4.0",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-node-resolve": "^5.0.0",
+    "webpack-cli": "^3.3.2"
+  }
+}

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/app.js',
+  output: {
+    file: 'dist/app.js',
+    format: 'iife',
+    name: 'app'
+  },
+  plugins: [
+    resolve(), 
+    commonjs()
+  ]
+}];

scripts/build_html_with_svg.py

@@ -0,0 +1,33 @@
+#!/usr/bin/env python3
+
+from __future__ import print_function
+import argparse, sys, json, time, os
+from jinja2 import Template, DictLoader, Environment, FileSystemLoader
+
+ap = argparse.ArgumentParser("template + svg = interface")
+ap.add_argument("template")
+ap.add_argument("svg")
+ap.add_argument("--output", type=argparse.FileType('w'), default=sys.stdout)
+args = ap.parse_args()
+
+tpath, tname = os.path.split(args.template)
+env = Environment(loader=FileSystemLoader(tpath))
+import jinjafilters
+for name, fn in jinjafilters.all.items():
+    env.filters[name] = fn
+
+from xml.etree import ElementTree as ET  
+
+ET.register_namespace("","http://www.w3.org/2000/svg")
+ET.register_namespace("xlink","http://www.w3.org/1999/xlink")
+with open(args.svg) as f:
+    svgt = ET.parse(f)
+    # print ("svgt", svgt)
+    svg_root = svgt.getroot()
+    svg_root.attrib['xmlns:xlink'] = 'http://www.w3.org/1999/xlink'
+    del svg_root.attrib['viewBox']
+    svg = ET.tostring(svgt.getroot(), method="xml")
+
+tvars = {'svg': svg}
+template = env.get_template(tname)
+print (template.render(**tvars).encode("utf-8"), file=args.output)

scripts/buildsitemap.py

@@ -0,0 +1,105 @@
+from mwclient import Site, APIError
+from mwclient.page import Page
+import argparse, json, sys
+
+ap = argparse.ArgumentParser("")
+ap.add_argument("--wikiprotocol", default="http")
+ap.add_argument("--wikihost", default="localhost")
+ap.add_argument("--wikipath", default="/mw/")
+ap.add_argument("--limit", default=None)
+ap.add_argument("--output", default=sys.stdout, type=argparse.FileType('w'))
+# ap.add_argument("--user", default=None)
+# ap.add_argument("--password", default=None)
+args = ap.parse_args()
+
+site = Site((args.wikiprotocol, args.wikihost), path=args.wikipath)
+ 
+
+def category_subcats (site, cattitle, objects=True):
+    cmcontinue = None
+    ret = []
+    while True:
+        if cmcontinue == None:
+            resp = site.api("query", list="categorymembers", cmtitle=cattitle, cmtype="subcat", cmlimit=50)
+        else:
+            resp = site.api("query", list="categorymembers", cmtitle=cattitle, cmtype="subcat", cmlimit=50, cmcontinue=cmcontinue)
+        ret.extend([x['title'] for x in resp['query']['categorymembers']])
+        if 'continue' in resp:
+            cmcontinue = resp['continue']['cmcontinue']
+        else:
+            break
+    if objects:
+        # print "converting to page objects ({0})".format(len(ret))
+        ret = [site.pages[x] for x in ret]
+    return ret
+
+"""
+>>> c.page_title
+'Équipes'
+>>> c.name
+'Catégorie:Équipes'
+"""
+"""
+graph = {
+    nodes: [
+        {name: "Bienvenue"}
+    ]
+    links: [
+        {source: "name", target: "name2"}
+    ]
+}
+"""
+redirects = {}
+pages = []
+count = 0
+all_links = set()
+page_exists = {}
+
+def resolve (x):
+    while x in redirects:
+        x = redirects[x]
+    return x
+
+print ("Pass 1")
+for p in site.allpages():
+    r = p.redirects_to()
+    if (r):
+        redirects[p.name] = r.name
+    else:
+        page_exists[p.name] = True
+
+print ("Pass 2")
+# pages_by_title = {}
+for p in site.allpages():
+    if (p.name in redirects):
+        continue
+    pd = {}
+    pd['title'] = p.page_title
+    pd['ns'] = 0
+    print ("Page {0}".format(p.name), file=sys.stderr)
+
+    # categories
+    cats = [c.page_title for c in p.categories()]
+    pd['cats'] = cats
+
+    # links
+    links = [x for x in p.links() if x.namespace == 0]
+    links = [resolve(x.name) for x in links]
+    links = [x for x in links if x in page_exists]
+    for l in links:
+        if p.name < l:
+            link = (p.name, l)
+        else:
+            link = (l, p.name)
+        all_links.add(link)
+
+    pages.append(pd)
+    count += 1
+    if args.limit and count >= args.limit:
+        break
+
+graph = {}
+graph['nodes'] = pages
+graph['links'] = [{'source': a, 'target': b} for a, b in all_links]
+graph['redirects'] = redirects
+print (json.dumps(graph, indent=2), file=args.output)

scripts/categories.py

@@ -0,0 +1,91 @@
+from mwclient import Site, APIError
+from mwclient.page import Page
+import argparse, json, sys
+
+import unidecode
+# unaccented_string = unidecode.unidecode(accented_string)
+
+ap = argparse.ArgumentParser("")
+ap.add_argument("--wikiprotocol", default="http")
+ap.add_argument("--wikihost", default="localhost")
+ap.add_argument("--wikipath", default="/mw/")
+ap.add_argument("--limit", default=None)
+ap.add_argument("--output", default=sys.stdout, type=argparse.FileType('w'))
+# ap.add_argument("--user", default=None)
+# ap.add_argument("--password", default=None)
+args = ap.parse_args()
+
+site = Site((args.wikiprotocol, args.wikihost), path=args.wikipath)
+ 
+def category_subcats (site, cattitle, objects=True):
+    cmcontinue = None
+    ret = []
+    while True:
+        if cmcontinue == None:
+            resp = site.api("query", list="categorymembers", cmtitle=cattitle, cmtype="subcat", cmlimit=50)
+        else:
+            resp = site.api("query", list="categorymembers", cmtitle=cattitle, cmtype="subcat", cmlimit=50, cmcontinue=cmcontinue)
+        ret.extend([x['title'] for x in resp['query']['categorymembers']])
+        if 'continue' in resp:
+            cmcontinue = resp['continue']['cmcontinue']
+        else:
+            break
+    if objects:
+        # print "converting to page objects ({0})".format(len(ret))
+        ret = [site.pages[x] for x in ret]
+    return ret
+
+def strip_namespace (x):
+    if ":" in x:
+       return x.split(":", 1)[1]
+    return x
+
+cats = list(site.allcategories())
+cats.sort(key=lambda x: unidecode.unidecode(x.name))
+# cats_by_name = {}
+cats = [{ 'title': cat.page_title, 'name': cat.name } for cat in cats]
+index = {}
+for c in cats:
+    index[c['title']] = c
+
+for c in cats:
+    sc = category_subcats(site, c['name'], objects=False)
+    sc = [strip_namespace(x) for x in sc]
+    if sc:
+        for subcat in sc:
+            subcat = index[subcat]
+            if 'parent' not in subcat:
+                subcat['parent'] = c
+
+def make_hierarchy (items):
+    root = {'children': []}
+    for item in items:
+        if 'parent' in item:
+            if 'children' not in item['parent']:
+                item['parent']['children'] = []
+            item['parent']['children'].append(item)
+            item['parent'] = item['parent']['title']
+            # del item['parent']
+        else:
+            root['children'].append(item)
+    return root
+
+def flatten (root, depth=0):
+    for x in root['children']:
+        r = {'title': x['title'], 'name': x['name'], 'depth': depth}
+        if 'parent' in x:
+            r['parent'] = x['parent']
+        yield(r)
+        if 'children' in x:
+            for item in flatten(x, depth+1):
+                yield item
+
+import json
+root = make_hierarchy(cats)
+#print (json.dumps(root, indent=2), file=args.output)
+
+flat = list(flatten(root))
+print (json.dumps(flat, indent=2), file=args.output)
+
+
+

special/ergtv/index.html

@@ -0,0 +1,80 @@
+<!doctype>
+<html>
+	<head>
+		<title>erg ~ Portes ouvertes 2021</title>
+		<style>
+		/* F O N T E S */
+		@font-face {
+		    font-family: "Combined";
+		    src: url('/mw/skins/foreground/assets/fonts/combined.otf');
+		    font-style:   normal;
+		    font-weight:  normal;
+		}
+		@font-face {
+		    font-family: "Vega";
+		    src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.otf');
+		    src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.ttf') format("truetype");
+		    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular-Webfont.svg") format("svg");
+		    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular.woff") format("woff");
+		    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular.woff2") format("woff2");
+		    font-style:   normal;
+		    font-weight:  normal;
+		}
+
+			body {
+				background-color: thistle;
+				height: 100%;
+				font-family: Vega;
+				display: flex;
+				flex-direction: column;
+				box-sizing: border-box;
+				overflow: hidden;
+			}
+			h1, h2 {
+				font-family: Combined;
+				font-weight: normal;
+				margin-bottom: 0;
+				display: contents;
+			}
+			h2 {
+				margin-bottom: 1em;
+			}
+			iframe {
+				width: 100%;
+				height: 100%;
+				border: 0;
+				flex-grow: 1;
+				box-sizing: border-box;
+			}
+			ul {
+				display: flex;
+				margin: 1.2em 0;
+				padding: 0;
+				justify-content: space-between;
+			}
+			li {
+				list-style-type: none;
+				padding: 0;
+				margin: 0;
+				border: 1px solid black;
+				border-radius: 10px;
+				padding: 0.25em 0.5em;
+				flex-basis: 10%;
+			}
+			a {
+				text-decoration: none;
+				color: inherit;
+			}
+			iframe {
+				width:100%;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>erg tv</h1>
+		<h2>winterschool 2024</h2>
+
+		<iframe src="https://www.youtube.com/embed/3sThYW6bhEQ?si=DkvK7zpCHKEza81f" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+	</body>
+</html>

special/ergtv/welcome.html

@@ -0,0 +1,49 @@
+<!doctype>
+<html>
+	<head>
+		<title>erg ~ Portes ouvertes 2021</title>
+		<style>
+		/* F O N T E S */
+		@font-face {
+		    font-family: "Combined";
+		    src: url('/mw/skins/foreground/assets/fonts/combined.otf');
+		    font-style:   normal;
+		    font-weight:  normal;
+		}
+		@font-face {
+		    font-family: "Vega";
+		    src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.otf');
+		    src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.ttf') format("truetype");
+		    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular-Webfont.svg") format("svg");
+		    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular.woff") format("woff");
+		    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular.woff2") format("woff2");
+		    font-style:   normal;
+		    font-weight:  normal;
+		}
+
+			body {
+				width: 100%;
+				height: 100%;
+				background-color: thistle;
+				font-family: Vega;
+				display: flex;
+				flex-direction: column;
+				line-height: 1.2em;
+			}
+			h1, h2 {
+				font-family: Combined;
+				font-weight: normal;
+			}
+			iframe {
+				width: 100%;
+				border: 0;
+				flex-grow: 1;
+				box-sizing: border-box;
+				
+			}
+		</style>
+	</head>
+	<body>
+		<img src="https://wiki.erg.be/mw/images/c/cb/Affiche_Jury_2021_%2B_PO_FINAL.jpg">
+	</body>
+</html>

special/jpo2020-live/pad.html

@@ -0,0 +1,783 @@
+<html lang="en"><head><style type="text/css">.disclaimer{text-align:right;font-size:x-small}.banner{background-color:#fff;text-align:left}.cacheContent{position:relative}.b_vPanel>div{padding-bottom:10px}.b_vPanel>div:last-child{padding:0}.banner a{color:#000080}</style><!-- base href="http://wiki.erg.be/m/special/jpo2020-live/pad.html" --><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- Banner:Start --><!--LocalizedDate:12/10/2020--><!--InvariantDate:10/12/2020--></head><body><div class="banner"><div class="b_vPanel"><div><!-- Title:Start -->You have reached the cached page for <strong><a target="_blank" href="http://wiki.erg.be/m/special/jpo2020-live/pad.html" h="ID=SERP,5003.1">http://wiki.erg.be/m/special/jpo2020-live/pad.html</a></strong><!-- Title:End --></div><div><!-- Content:Start -->Below is a snapshot of the Web page as it appeared on <strong>12/10/2020</strong>
+ (the last time our crawler visited it). This is the version of the page
+ that was used for ranking your search results. The page may have 
+changed since we last cached it. To see what might have changed (without
+ the highlights), <a target="_blank" href="http://wiki.erg.be/m/special/jpo2020-live/pad.html" h="ID=SERP,5003.2">go to the current page</a>.<!-- Content:End --></div><div><!-- Disclaimer:Start --><div class="disclaimer">Bing is not responsible for the content of this page.</div><!-- Disclaimer:End --></div><!-- Banner:End --></div></div><div class="cacheContent">
+
+
+<title>erg-jpo-2020-vos-questions-9hd0</title>
+<meta name="generator" content="Etherpad">
+<meta name="author" content="Etherpad">
+<meta name="changedby" content="Etherpad">
+<meta charset="utf-8">
+<style>
+ul.indent {
+  list-style-type: none;
+}
+ol {
+  list-style-type: none;
+  padding-left: 0;
+}
+body > ol {
+  counter-reset: first second third fourth fifth sixth seventh eighth ninth tenth eleventh twelfth thirteenth fourteenth fifteenth sixteenth;
+}
+ol > li:before {
+  content: counter(first) ". ";
+  counter-increment: first;
+}
+ol > ol > li:before {
+  content: counter(first) "." counter(second) ". ";
+  counter-increment: second;
+}
+ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) ". ";
+  counter-increment: third;
+}
+ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) ". ";
+  counter-increment: fourth;
+}
+ol > ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) ". ";
+  counter-increment: fifth;
+}
+ol > ol > ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) ". ";
+  counter-increment: sixth;
+}
+ol > ol > ol > ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) "." counter(seventh) ". ";
+  counter-increment: seventh;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) "." counter(seventh) "." counter(eighth) ". ";
+  counter-increment: eighth;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) "." counter(seventh) "." counter(eighth) "." counter(ninth) ". ";
+  counter-increment: ninth;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) "." counter(seventh) "." counter(eighth) "." counter(ninth) "." counter(tenth) ". ";
+  counter-increment: tenth;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) "." counter(seventh) "." counter(eighth) "." counter(ninth) "." counter(tenth) "." counter(eleventh) ". ";
+  counter-increment: eleventh;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) "." counter(seventh) "." counter(eighth) "." counter(ninth) "." counter(tenth) "." counter(eleventh) "." counter(twelfth) ". ";
+  counter-increment: twelfth;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) "." counter(seventh) "." counter(eighth) "." counter(ninth) "." counter(tenth) "." counter(eleventh) "." counter(twelfth) "." counter(thirteenth) ". ";
+  counter-increment: thirteenth;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) "." counter(seventh) "." counter(eighth) "." counter(ninth) "." counter(tenth) "." counter(eleventh) "." counter(twelfth) "." counter(thirteenth) "." counter(fourteenth) ". ";
+  counter-increment: fourteenth;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) "." counter(seventh) "." counter(eighth) "." counter(ninth) "." counter(tenth) "." counter(eleventh) "." counter(twelfth) "." counter(thirteenth) "." counter(fourteenth) "." counter(fifteenth) ". ";
+  counter-increment: fifteenth;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) "." counter(seventh) "." counter(eighth) "." counter(ninth) "." counter(tenth) "." counter(eleventh) "." counter(twelfth) "." counter(thirteenth) "." counter(fourteenth) "." counter(fifteenth) "." counter(sixteenth) ". ";
+  counter-increment: sixteenth;
+}
+ol {
+  text-indent: 0px;
+}
+ol > ol {
+  text-indent: 10px;
+}
+ol > ol > ol {
+  text-indent: 20px;
+}
+ol > ol > ol > ol {
+  text-indent: 30px;
+}
+ol > ol > ol > ol > ol {
+  text-indent: 40px;
+}
+ol > ol > ol > ol > ol > ol {
+  text-indent: 50px;
+}
+ol > ol > ol > ol > ol > ol > ol {
+  text-indent: 60px;
+}
+ol > ol > ol > ol > ol > ol > ol > ol {
+  text-indent: 70px;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol {
+  text-indent: 80px;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol {
+  text-indent: 90px;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol {
+  text-indent: 100px;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol {
+  text-indent: 110px;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol {
+  text-indent: 120px;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol {
+  text-indent: 130px;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol {
+  text-indent: 140px;
+}
+ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol > ol {
+  text-indent: 150px;
+}
+sub{vertical-align:sub;font-size:smaller}sub{vertical-align:sup;font-size:smaller}h1{font-size: 2.0em;line-height: 120%;}   h2{font-size: 1.5em;line-height: 120%;}   h3{font-size: 1.17em;line-height: 120%;}   h4{line-height: 120%;}   h5{font-size: 0.83em;line-height: 120%;}   h6{font-size: 0.75em;line-height: 120%;}   code{font-family: monospace;}[data-color="black"], .color\:black  { color:black; }
+[data-color="red"], .color\:red    { color:red; }
+[data-color="green"], .color\:green  { color:green; }
+[data-color="blue"], .color\:blue   { color:blue; }
+[data-color="yellow"], .color\:yellow { color:yellow; }
+[data-color="orange"], .color\:orange { color:orange; }
+</style>
+
+
+    <style type="text/css" media="screen">
+	@font-face {
+	    font-family: "Combined";
+	    src: url('/mw/skins/foreground/assets/fonts/combined.otf');  
+	    font-style:   normal;
+	    font-weight:  normal;
+	}
+	@font-face {
+	    font-family: "Vega";
+	    src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.otf');  
+	    src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.ttf') format("truetype");  
+	    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular-Webfont.svg") format("svg");
+	    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular.woff") format("woff");
+	    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular.woff2") format("woff2");
+	    font-style:   normal;
+	    font-weight:  normal;
+	}
+
+
+        body {
+            font-family: Vega;
+            font-size: 17px;
+            line-height: 1.5em;
+            background-color: white;
+        }
+        h1, h2, h3 {
+            /*color: #a700ff;*/
+            font-family: Combined;
+            font-size: 1em;
+            line-height: 1.5em;
+	    margin-bottom: 0;
+        }
+	h1 {
+		margin: 2em 0;
+	}
+	
+	h2 {
+		padding-top: 1em;
+		border-top: 2px solid white;
+		color: #A700FF;
+	}
+	strong {
+		color: #A700FF;
+	}
+
+        a {
+            text-decoration: none;
+            border-image: linear-gradient(to right, #A700FF, #00ab6b);
+            border-bottom-width: 2px;
+            border-image-slice: 1;
+            color: inherit;
+            border-bottom-style: solid;
+            padding: 3px 5px 1px;
+        }
+        video {
+            width: 100%;
+            height: 100%;
+        }
+        
+	hr {
+		border: 0;
+		margin: 0;
+		height: 1em;
+	}
+	sup {
+		font-size: 0.55em;
+		line-height: 0;
+		vertical-align: 0.55em;
+	}
+	iframe {
+		width: 100%;
+		height: 500px;
+		border: 0;
+		overflow-x: hidden;
+	}
+    </style>
+
+
+
+
+	<a href="http://wiki.erg.be/w/Bienvenue_%C3%A0_l%E2%80%99erg">Retour au site de l'erg.</a>
+
+
+	<h1>
+Organisation du pad
+	</h1>
+	<ul>
+		<li><a href="#questions-profs">Questions pour les profs</a></li>
+		<li><a href="#questions-admin">Questions pour l'administration</a></li>
+	</ul>
+
+	<h1 id="questions-profs">Questions pour les enseignant·e·s</h1>
+
+<strong>1/ Pour le dossier d'inscription (Cas 4) je ne comprends pas 
+précisement quel est le papier "composition de famille recente et 
+originale"&nbsp;&nbsp;</strong><br><ul class="indent"><li>=&gt;voir <strong>questions admin ci-dessous</strong></li></ul><strong><br><strong>2/A
+ quoi faut il s'attendre pour l'éxamen d'entrée, quels types d'atelier 
+il pourrait y avoir, sur quoi s'entrainer en amont&nbsp;</strong><br><ul class="indent"><li>surtout ne pas se préparer :) s'attendre à désapprendre</li><li>Ne rien préparer surtout ! Venez l'esprit ouvert.&nbsp;</li></ul><br><strong>3/
+ Bonjour, est-ce que quelqu’un qui n’a pas fait d’études en arts 
+appliqués et qui vient de l’Université a ses chances pour entrer à 
+l’Erg? Ou la MANAA (et/ou autre) est obligatoire?</strong><br><strong>En
+ fait, j’ai validé un M1 en cinéma dans une université française, et 
+maintenant je suis intéressé par ce que vous proposez en terme de 
+narration spéculative.</strong><br><strong>Du coup, je me demande s’il 
+est possible pour moi de proposer un dossier pour une demande 
+d’admission en master, ou même une admission en cours étude?&nbsp;</strong><br><ul class="indent"><li>oui
+ tout à fait du point de vue professoral. Pour l'entrée en M1 ou M2 tout
+ dépendra de votre dossier et de l'entretien. Difficile de vous dire 
+exactement ce qui sera possible, c'est vraiment lors de l'entretien que 
+l'on voit si votre attente et ce que nous proposons se rencontrent. 
+Tentez votre chance, je dirais. Pour les questions administratives, voir
+ ci-dessous.</li><li>Oui, pas de soucis, je comprends que tout se fait au cas par cas. Merci pour votre réponse!</li><li>Pour nous, il est surtout important qu'on ait on va dir</li><li>Administrativement
+ parlant: pas du tout de nécessité de MANAA, mais pour la valorisation 
+des crédits d'un bachelier à l'université, c'est vraiment sur base des 
+correspondances de cours, etc. Voir plus bas.</li><li>ça marche, je vais poser une dernière question sur la partie dédiée à l'administration alors, merci à vous</li></ul><br><strong>4/ Bonjour, en quoi consistent les rencontres d'admission ? Es-ce qu'il faut amener des choses sur lesquelles on travaille ?</strong><br><ul class="indent"><li>vous
+ serez amenés à travailler avec d'autres, à échanger en groupe etc... 
+pour les détails, je pense que vous pourrez avoir plus d'infos lors de 
+la videoconférence tout à l'heure.</li><li>D'accord merci !</li><li></li></ul><strong>5/&nbsp;
+ Ce que j'aime particulièrement ce sont les expérimentations graphiques,
+ l'exploration plastique, mêler différents mediums et support. Je suis 
+perdue concernant le choix de l'orientation. En fonction de cela, quel 
+orientation dans le pôle art me conseillez-vous ? Merci !</strong><br>Ces 3 points peuvent être arpentés en dessin, peinture, sculpture ou photographie, voir vidéo.<br>Et dans les trois pôles...! Oui!<br>Si
+ par exemple je choisis le dessin, puis-je venir peindre, dessiner sur 
+une photographie ? Cela est-il plutôt libre au final ? Ou au contraire, 
+si je choisis photographie, puis-je mêler différentes expérimentations 
+graphiques (que ce soit avec de la peinture/encres/bombes ou encore par 
+photoshop) dans mes projets photographiques ? Oui :&gt;&nbsp;<br>Super, je suis rassuré, merci !<br><ul class="indent"><li></li></ul><strong>6/&nbsp;
+ Bonjour, j'aime particulièrement l'image imprimée, et je ne sais pas 
+vraiment quelle orientation serait la plus adéquate pour pratiquer ? 
+Dessin, peinture, illu ?&nbsp;</strong><br>Il y a un cours appelé “Image imprimée” en Bac 1 (sur 4h semaine) qui est ouvert à toutes les orientations.&nbsp;<br>Merci beaucoup !<br>Oui
+ c'est difficile de répondre à ta question parce qu'en fonction de ce 
+que tu imagines ou de ta définition d'“image imprimée” tu pourrait 
+trouver matière à ta recherche en graphisme, photo, dessin ou peinture 
+en effet.<br>Je pensais surtout au printmaking, gravure, sérigraphie, litho, etc<br>D'accord. Il n'y a pas d'orientation dédiée à ces techniques mais des ateliers et stages lié.e.s.<br>Je vois, merci ! Avec plaisir.<br>L'école
+ est pluridisciplinaire. En B1 vous pourrez essayer des techniques et 
+éventuellement changer d'orientation quand vous aurez trouvé vos mediums
+ de choix<br>Génial :)<br><h2></h2><br><strong>7/&nbsp; Bonjour, 
+j'aimerais revenir sur l'introduction où l'on disait qu'il ne fallait 
+venir avec aucun objectif, aucune attente et projet déjà définis, et 
+j'entends bien à travers ça un discours d'ouverture et d'attitude 
+d'écoute des possibilités qui nous entourent, mais faut-il vraiment ne 
+rien attendre ? Pour une entrée en Master, il me semble difficile de 
+n'avoir aucune attente ou au-moins pré-projet, embryon de projet ?</strong><br>Bonjour,
+ pour le travail de master c'est un peu différent, c'est clair que le 
+travail d'atelier en master vient soutenir un projet personnel déjà 
+engagé, donc il faut effectivement avoir un projet personnel déjà 
+commencé, c'est à partir de là qu'on travaille. Arriver en master sans 
+aucun projet, sans idée perso et sans attente ne me semble pas vraiment 
+une bonne idée, même si on espère toujours qu'on vous aidera à 
+développer et à transformer ces projets de départ. Donc il faut 
+certainement faire preuve d'ouverture, ne pas arriver avec un projet 
+ficelé et sans rien attendre des profs.&nbsp;<br>Merci beaucoup pour la 
+réponse ! Bien sûr l'ouverture et une attitude poreuse sont requises à 
+tout moment du projet ! Merci à vous. Avec plaisir, le mieux je pense 
+pour l'arrivée en master est de se renseigner sur les différentes 
+orientation et de voir ce qui correspond au mieux à votre projet et vos 
+envies. Oui merci, je me renseignerai avec mes contacts étudiants !<br><br>8/&nbsp;<strong> <span class="color:blue">est-ce qu'il y a du matériel à prevoir pour les options bd et et illustration?</span></strong><br>L'erg est une école de la débrouille. À priori il n'est pas nécessaire de venir grandement équipé.e :&gt;<br>Je
+ confirme (Joanna enseignante en illu), les étudiant.e.s s'équipent en 
+fonction de leurs projets, en fonction de leurs moyens aussi. On se 
+débrouille dans tous les cas.génial!! merci beaucoup!<br><br><strong><span class="color:blue">9/ est ce que les diplomes sont reconnus hors belgique?&nbsp;</span></strong><br><ul class="indent"><li>Je remets ta question dans la section ci-dessous, ok?<span class="color:blue">d'accord merci!</span></li><li></li></ul><br><strong>10/
+ Bonjour, je suis intéressée par un master a finalité didactique, 
+j'aimerais savoir un peu en quoi consiste ce master, quels sont les 
+options conseillées , enfin tout ça ! Merci</strong><br><ul class="indent"><li>Le
+ master à finalité didactique est composé de 1 année commune à tous les 
+masters et une seconde année qui est composée de 30 crédits de cours à 
+l'erg et 30 crédits de cours communs avec l'agrégation ( en horaire 
+décalé).</li><li>est-ce que ça répond à ta question?</li><li>&nbsp;oui 
+très bien ! désolée la connexion est difficile, j'aimerais savoir juste 
+pour la rencontre si il y a besoin d'avoir déjà un dossier portée sur la
+ pédagogie ou s</li><li>si vous avez des problèmes de connexion, posez 
+vos questions ici et nous y répondrons dans le stream vidéo à gauche 
+après 16h très bien merci !&nbsp;</li><li></li></ul><strong>11/ Où pouvons-nous voir les travaux des étudiants B1 et B2 en arts numérique, photographie et vidéographie ?</strong><br><ul class="indent"><li>Voici
+ quelques liens pour voir des projets en ligne, mais il n'y a pas 
+forcément des productions qui représentent toutes les orientations.</li><li>- BAC 2 &amp; 3 - Programmation numérique: Écriture du code - <a href="http://curlybraces.be/" rel="noreferrer noopener">http://curlybraces.be/</a></li><li>- BAC 2 &amp; 3 - Vidéo - <a href="https://ergvideo.tumblr.com/" rel="noreferrer noopener">https://ergvideo.tumblr.com/</a></li><li>- Les photographies de Marc Wathieu (qui a enseigné en BAC 1/2/3 en arts numériques) dont des albums consacrés à l'erg - <a href="https://www.flickr.com/photos/marcwathieu/albums" rel="noreferrer noopener">https://www.flickr.com/photos/marcwathieu/albums</a></li></ul><br><strong>12/ Est- ce que le master didactique nécessite une formation/licence, portée sur la pédagogie ? merci</strong><br><ul class="indent"><li>non,
+ il faut être inscrit.e dans un des masters de l'erg, le master 
+didactique est une spécialisation du master 2, d'accord merci, et il 
+n'est pas lié au master agreg ? l'agrégation est une année 
+supplémentaire mais les cours sont communs avec lae master didactique 
+Merci !</li><li></li></ul><br><strong>13/<span class="color:blue"> pour le matériel lors du rdv d'admission; on ramène ce qu'on veut, ou est-ce qu'on travaille avec des outils imposés?</span></strong><br><ul class="indent"><li><span class="color:blue">&nbsp;Les
+ conditions de l'examen d'entrée restent encore à imaginer (peut-être 
+différent des dernières années vu le contexte) mais on part du principe 
+que les étudiant.e.s viennent avec la base (feuilles, outils, trousse, 
+clé usb...) on se débrouille, on se prête...génial! merci beaucoup!!</span></li></ul><br><strong>14/
+ Aux entretiens pour entrer en B2, j'ai vu que nous devons présenter des
+ travaux récents. Pouvons-nous présenter des travaux que vous aurez vu 
+auparavant dans notre portfolio que nous devons envoyer avec le dossier 
+d'inscription, ou alors vous attendez-vous à ce qu'on vous présente des 
+travaux différents de ceux de notre portfolio ?</strong><br><ul class="indent"><li>→ réponse donnée dans la 2e partie du pad, question 37</li></ul><br><strong>15/ À la fin des Portes Ouvertes, est-ce qu'il y aura ce document avec les questions encore disponible ?</strong><br><ul class="indent"><li>Oui, nous mettrons à disposition une archive de ce document, ainsi que du live.</li><li>Super merci !</li></ul><br>16/
+ Bonjour, je cherche à commencer un bachelier en graphisme. J'ai déjà 
+fait Bachelier + Master dans le domaine de la com', ensuite j'ai 
+travaillé un an en agence créative et une autre année en agence 
+média/créa. Je me suis rendu compte que la com' n'était pas pour moi car
+ j'ai davantage envie d'être du côté de la création plutôt que le 
+management. Est-ce que mon parcours reste légitime (25 ans - reprise 
+d'études) en sachant que j'ai toujours été intéressé par le 
+graphisme?&nbsp;<br><ul class="indent"><li>J'imagine que oui car j'ai 
+déjà eu des étudiants d'un certain âge, qui étaient déjà dans la vie 
+professionnelle et qui souhaitaient se réorienter. Je remets ta question
+ dans la partie administrative en bas pour voir s'il y a une démarche 
+différente ou non.</li><li>Ok merci beaucoup ! J'ai déjà pas mal utilisé
+ des programmes comme photoshop, je me suis mis récemment à Illustrator 
+et j'aimerais développer des compétences sur Spark, est-ce que je dois 
+venir pour les examens d'entrée avec des exemples de ce que j'ai déjà 
+fait en tant que "loisir"?</li><li>En Bac 1, pas de pré-requis mais un 
+portfolio est le bienvenu. Pour les années suivantes, il faut en effet 
+un portfolio. L'erg ne se focalise pas tellement sur les compétences et 
+l'apprentissage de logiciels à proprement parler. Nous mettons l'accent 
+sur les projets, et une bonne partie de l'équipe enseignante est plus 
+orientée logiciels libres que la suite Adobe. Est-ce que ça répond à ta 
+question? Oui c'est parfait, je me suis déjà renseigné sur les 
+différentes écoles à Bruxelles et j'aime l'idée que l'ERG n'est pas 
+forcément focalisée logiciels et davantage sur une approche artistique. 
+Je ne souhaite pas devenir graphic designer mais plutôt ouvrir mes 
+horizons sur le plan artistique et voir ce qui me convient le mieux et 
+ce que je pourrai en faire pour mes attentes vers le futur. J'ai 
+l'impression que l'ERG pousse vers ça?</li><li>En fait, tu peux tout 
+autant devenir graphic designer qu'artiste en faisant l'erg, c'est 
+vraiment à toi de choisir ta pratique. Mais dans toutes les orientations
+ de l'école, l'accent est mis sur l'expérimentation, la recherche, la 
+pratique personnelle et transdisciplinaire.C'est tout ce que je veux :).
+ Alors welcome pour t'inscrire :)Merci (y) ! L'équipe administrative t'a
+ répondue aussi tout en bas du pad.</li><li></li><li>Avec un parcours 
+comme celui-ci peut etre qu'entrer en master est plus pertinent ?&nbsp; 
+L'équipe administrative a répondu à cette question en bas, elle 
+préconise plutôt une entrée en B1...</li><li></li></ul><strong>17/&nbsp;
+ Est-ce que choisir l'orientation dessin dans le pôle art implique 
+uniquement la pratique du dessin ou est-ce beaucoup plus large ?&nbsp;</strong><br><ul class="indent"><li>Désolée,
+ les enseignants concernés n'ont pas dû voir ta question, tu peux la 
+reposer à information@erg.be, quelqu'un te répondra!</li></ul><br><br><strong>Nous allons maintenant archiver ce pad! Nous espérons que vous avons pu répondre à vos questions!</strong><br><br><br><strong>*******************************************************************************</strong><br><br>
+															
+															
+	<h1 id="questions-admin">Questions administratives</h1>
+														<strong>1/ Bonjour, je souhaiterai m'inscrire au Master en
+ Communication visuelle et graphique. J'ai un diplôme de Bachelier en 
+Arts Graphiques. Quelles sont les conditions d'admission pour accéder 
+directement à un Master? Merci.</strong><br><ul class="indent"><li>Bonjour,
+ pour accéder directement au master, nous te demanderons une copie de 
+ton diplôme de bachelier, tes relevés de notes de bachelier ainsi qu'un 
+descriptif des cours de bachelier que tu as suivi (normalement tu as ça 
+dans ton école). Sur cette base, l'administration et les profs du jury 
+d'admission regardent si cela correspond aux attendus pour rentrer en 
+master. Tu peux nous envoyer ton dossier (toutes les infos sont ici:<a href="http://wiki.erg.be/m/#Pr%C3%A9-inscription_en_cours_d%E2%80%99etudes_-_2e_cycle_master_120_ects_%E2%80%93_2020-2021" rel="noreferrer noopener">http://wiki.erg.be/m/#Pr%C3%A9-inscription_en_cours_d%E2%80%99etudes_-_2e_cycle_master_120_ects_%E2%80%93_2020-2021</a> ) sur aec-vae@erg.be, on l'analyse (il nous faut un peu de temps pour ça) avec Patrizia Tripoli et on revient vers toi.&nbsp;</li><li>Est-ce que ça répond à ta question? (Maryline)</li><li>Oui
+ merci beaucoup, dans le cas où je serai admise quelles sont les dates 
+de présentation devant le jury (Master)? Le 9 septembre pour les 
+master.&nbsp;</li><li>Et le cas échéant y a t-il une année intermédiaire
+ pour y accéder? Oui, c'est tout à fait possible que le jury d'admission
+ décide que le master n'est pas accessible tout de suite mais qu'il faut
+ prendre des cours de B3.</li><li>Merci! Et est-ce qu'il est possible 
+d'être à cheval sur les deux années? : entrer en Master en repassant en 
+même temps quelques cours de Bac 3 que je n'aurais pas eu?</li></ul><br><strong>2/
+ Pour le dossier d'inscription (Cas 4) je ne comprends pas précisement 
+quel est le papier "composition de famille recente et originale"</strong><br><ul class="indent"><li>Bonjour, c'est un document qui ne doit être fourni que par des étudiant.e.s qui ne sont <u>pas</u>
+ de nationalité belge et qui résident en Belgique. C'est un document que
+ votre Administration communale (service population) peut vous fournir. 
+(Maryline)</li><li>Mais si je réside en France mais compte déménager en Belgique a la rentrée. Je donne deux justificatifs different ?</li><li>Si
+ tu résides en France au moment d'envoyer ton dossier, il ne faut pas 
+mettre la composition de ménage. Tu nous fourniras le document plus 
+tard, lorsque tu auras fait toutes les démarches auprès de la 
+commune.&nbsp;</li><li>Parfait merci !</li><li></li></ul><strong>3/ Comment pouvons nous participer aux rencontres&nbsp; d'admissions ? merci</strong><br><ul class="indent"><li>Pour rentrer en quelle année?&nbsp;</li><li>en 1ere année</li><li>Bonjour,
+ pour participer aux épreuves d'admission B1, il faut remettre un 
+dossier en ligne. Une fois que ton dossier est complet, tu seras 
+invité.e à présenter l'épreuve d'admission qui a lieu pour les B1 du 31 
+août au 3 septembre (journées d'atelier suivi d'un entretien avec les 
+enseignant.e.s). Toutes les infos pour les B1 sur erg.be &gt; Admission 
+20-21 &gt; Admission Bac 1.&nbsp;</li><li>Est-ce que ça répond à ta question?&nbsp;</li><li>Merci ! parfait.</li><li></li></ul><strong>4/
+ Faut-il pour la rentrée prochaine se procurer une traduction du bac 
+francais ou non? Je n'ai pas vu cette info sur le site alors que je 
+pensais que c'était nécessaire auparavant</strong><br><ul class="indent"><li>Bonjour, par "traduction", tu veux dire une équivalence au CESS (diplôme belge de secondaire)?</li><li>Si
+ oui, il est obligatoire d'en avoir une pour accéder au bachelier. C'est
+ auprès du Ministère qu'il faut s'adresser pour ce faire: <a href="http://www.equivalences.cfwb.be/index.php?id=524" rel="noreferrer noopener">http://www.equivalences.cfwb.be/index.php?id=524</a> .&nbsp;&nbsp;</li></ul><br><strong>5/
+ Re-bonjour, en termes administratifs, est-il possible de présenter à la
+ fois un dossier pour une demande d’admission en Master et un dossier 
+pour une demande d’admission en cours d’études? Et donc de passer les 
+entretiens, etc.. pour les deux niveaux?&nbsp;</strong><br><ul class="indent"><li>Bonjour,
+ Oui bien sur. Lorsque tu remets ton dossier, indique nous si tu 
+souhaites accéder au master. En fonction de l'analyse administrative, 
+nous te ferons passer l'entretien de bachelier en cours d'études (B2-B3)
+ ou l'entretien de master. Lors de l'entretien d'admission, les 
+enseignant.e.s pourraient décider que tu dois rentrer dans à un autre 
+niveau.&nbsp;</li><li>Pas d'inquiétude en tout cas, ce n'est pas "figé" 
+en fonction de la case que vous cochez sur un formulaire, avec les 
+enseignant.e.s nous faisons au mieux en fonction de votre profil et 
+parcours.&nbsp;</li><li>Est-ce que ça répond à ta question?</li><li>Oui,
+ très bien, merci! Donc si je comprends bien, je peux présenter un 
+dossier de pré-inscription en cours d’études - Master, et envoyer les 
+documents complémentaire pour l'entretien cours d'études - bachelier (B2
+ - B3) si vous les jugez nécessaire? Oui, pas d'inquiétude, nous te 
+dirons si il faut faire des démarches supplémentaires ;-)</li><li>Je 
+demande ça car je vois que les documents demandés pour les deux cycles 
+ne sont pas les mêmes (notamment les grilles comparatives bloc2 qui ne 
+sont pas demandées pour le dossier master) Pas de problème, nous 
+régulariserons ça.&nbsp;</li><li>Parfait, merci à vous et courage pour la suite :) ++</li></ul><br><strong>6/
+ Si je postule directement pour rentrer en bac 2, que je passe les 
+entretiens et que je ne suis pas retenue, devrais-je à nouveau passer 
+des épreuves pour rentrer en bac 1 ?&nbsp;</strong><br><ul class="indent"><li>Bonjour,
+ c'est peut-être possible mais cela dépend un peu de la situation. 
+Patrizia saura mieux te répondre que moi (elle sera là à partir de 16h).</li><li>Pour passer en Bac1 : tout dépendra de la décision des enseignants de B2.</li></ul><br><strong>7/
+ Est-ce que je peux raisonnablement envisager de prendre un kot pour 
+septembre ? Quel est le pourcentage de gens retenus ? en bac1 et en bac 2
+ ?</strong><br><ul class="indent"><li>On parle de +/- 5% de refus mais c'est difficile à dire comme ça</li><li>Merci pour votre réponse. Prenez-vous beaucoup de nouveaux élèves en bac2 ?&nbsp;</li><li>Je suis incapable de répondre. Nous n'avons pas de nombre limite, c'est au cas par cas</li><li>D'accord, merci beaucoup !</li><li></li></ul><br><strong>8/
+ Bonjour! Pour ce qui concerne l'équivalence du baccalauréat français, 
+est-il suffisant de mettre la lettre de demande de dérogation à la date 
+limite de dépôt ainsi qu'une preuve d'envoi?&nbsp; J'ai fais une demande
+ de dérogation et j'aurais donc l'équivalence dans les 5 jours qui 
+suivent la réussite des épreuves d'admission.</strong><br><ul class="indent"><li><s>Bonjour, une demande de dérogation à la date limite du 15 juillet?&nbsp;</s></li><li><s>Si
+ oui, tu devras absolument y mettre un document officiel de réussite de 
+l'épreuve d'admission (que tu peux demander à l'erg dès que tu reçois 
+les résultats de l'épreuve d'admission). Attention, à bien suivre les 
+consignes données par le Service des équivalences du Ministère, c'est 
+assez exigeant.&nbsp;</s></li><li><s>C'est ça! Merci! Mais du coup dans 
+les préinscriptions (sur le site web) là où je devrais mettre cette 
+équivalence, que dois-je mettre?</s></li><li><s>Tu peux alors juste 
+mettre un mot qui explique ceci ;-) Je suppose que c'est parce que tu 
+n'auras pas obtenu ton diplôme de baccalauréat avant la date du 15 
+juillet?&nbsp;</s></li><li>Plus au moins, en fait je suis à Barcelone 
+(Lycée Français à l'étranger), et les procès administratifs avec le 
+covid sont ralentis. On nous a dit qu'on aurait notre relevé de notes le
+ 26 juin, mais le diplôme de bac peut arriver bien plus tard (vers 
+octobre, voire novembre...)</li><li>Alors si tu as ton relevé de notes 
+et/ou une attestation provisoire de réussite avant la date du 15 
+juillet, il vaut mieux déjà introduire ton dossier auprès du Ministère. 
+Ils te demanderont de le compléter par la suite. Mieux vaut faire ça au 
+plus vite ;-)</li><li>Vous avez raison! Merci mille fois!</li></ul><br><strong>9/
+ bonjour ! y-a-t-il une présentation de travaux type portfolio ? 
+j'imagine que oui, mais comme cela semble être très libre comme école je
+ me demandais ! (j'ai le sentiment qu'il y a surtout beaucoup de papiers
+ administratifs haha)</strong><br><ul class="indent"><li>Pour BAC 1, il 
+n'y a pas de pré-requis mais beaucoup de candidat·e·s amènent en effet 
+un portfolio. Pour les autres années, un portfolio est demandé.</li><li>&nbsp;merci beaucoup ! Le bac3 c'est l'équivalence d'une licence en France ?&nbsp;</li><li>Oui.</li></ul><br><strong><s>10/ <span class="color:blue">est-ce qu'il y a du matériel à prevoir pour les options bd et et illustration?</span></s></strong><br><s>je transfère ta question plus haut, directement aux enseignants d'accord merci!</s><br><br><strong>11/ Bonjour,</strong><br><strong>est-ce possible de s'inscrire au Master (Narration Spéculative) quand j'ai déjà un master dans les arts (photographie).</strong><br><ul class="indent"><li>Bonjour,
+ si tu as réussi ce master oui vraiment aucun problème, sous réserve de 
+l'épreuve d'admission. Si tu étais en échec durant ce master, nous 
+devrons analyser ton dossier.</li><li>En plus je me demandais si les 
+cours sont tous présentés en français. Je suis néerlandophone et je veux
+ bien améliorer mon francais mais en tout cas ça pourrait être une 
+barrière. :) :)&nbsp;</li><li>Oui, les cours sont en français...</li><li>Mais il y a quelques enseignant·e·s néerlandophones dans l'école ;) ++</li><li>Ok merci, haha&nbsp;&nbsp;</li><li></li></ul><strong>12/
+ Bonjour, pour l'inscription en Master, faut-il joindre un portfolio en 
+plus du formulaire d'inscription ? Et si oui, est-ce qu'il y a des 
+critères précis ou est-ce qu'il est plutôt "libre" ? Merci</strong><br><ul class="indent"><li>Bonjour, oui et l'apporter à l'épreuve d'admission.&nbsp;</li><li>Aucun critère précis, tout ce que vous voulez ;-)&nbsp;</li><li>Ok merci ! :)&nbsp;</li><li></li></ul>13/ <strong><span class="color:blue">est ce que les diplomes sont reconnus hors belgique?&nbsp;</span></strong><br><ul class="indent"><li>Bonjour,
+ oui les diplômes sont reconnus par la Fédération Wallonie-Bruxelles et 
+le système des crédits européens (ECTS) est d'application à l'erg. Pour 
+une demande d'équivalence de diplômes, voir: <a href="http://www.equivalences.cfwb.be/index.php?id=524" rel="noreferrer noopener">http://www.equivalences.cfwb.be/index.php?id=524</a> .&nbsp;&nbsp;</li><li>&nbsp;Ca
+ dépend du contexte de ta question, de ce que tu veux en faire et dans 
+quel pays... Mais là, ça dépend des législations de ces différents pays.
+ d'accord merci!</li></ul><br>14/ <strong>Est-il aussi possible de postuler dans 2 Master différents (Graphisme et Arts Numériques par exemple) ?</strong><br><ul class="indent"><li>Bonjour,
+ il faut faire un choix d'orientation principale (cours de 6h/semaine, 
+ce sera le titre de ton diplôme de master). Cependant, tu pourras faire 
+un stage de 3h/semaine différent de ton orientation. Ça te permet donc 
+de faire les deux, mais une orientation principale doit tout de même 
+être choisie.&nbsp;</li><li>D'accord très bien, merci beaucoup pour la réponse !</li></ul><br><strong>15/
+ Re-bonjour! Avez vous une liste d'attente (dans le cas ou un.e élève 
+soit pris.e mais finalement ne veux pas intégrer le cursus)?&nbsp;</strong><br><ul class="indent"><li>Il n'y a pas de nombre maximum d'inscription. L'admission est uniquement basée sur votre dossier et votre motivation</li><li>D'accord,
+ merci! Et du coup, comment se passe l'annulation à l'inscription (être 
+pris.e mais ne pas pouvoir finalement intégrer le cursus)? si tu es 
+admis.e et que finalement tu ne peux /veux plus intégrer l'erg il suffit
+ de nous le signaler.&nbsp;</li><li>Noté! Merci beaucoup :)</li></ul><br><strong>17/
+ Bonjour, il est indiqué sur votre site que les résultats des rencontres
+ d'admission seront donnés le 7 septembre, pas possible plus tôt?&nbsp;</strong><br><ul class="indent"><li>ben non</li></ul><br>18/
+ Bonjour, je me demandais quel était le volume horaire des cours par 
+semaine, car je travaille déjà (en journée) et je voudrais savoir si 
+c’est compatible.<br><ul class="indent"><li>Cela dépend des années. Mais il faut prévoir aussi le temps de travail en dehors de la présence en cours.</li><li>Pour une entrée en master.</li><li>En
+ master, il faut prévoir qu'en dehors des cours c'est votre implication 
+personnelle qui va compter. Par ailleurs, comme il est aussi possible 
+d'étaler votre cursus, c'est difficile à dire, sachant aussi que tout 
+dépendra de vos options. Mais comptez un temps plein travail personnel 
+et présence en cours tout compris à répartir, bien ŝur. De nombreux 
+étudiants travaillent en semaine et/ou le w-e, mais un travail à temps 
+plein en plus de l'ERG ça parait difficile.</li><li>Sur les possibilités
+ d'allègement du cursus (c'est-à-dire avoir moins de cours/an, mais 
+avoir un master qui dure du coup plus longtemps que 2 ans), tu peux 
+écrire à maryline.ledoux@erg.be .</li><li>ok merci.</li><li></li></ul><strong>19
+ / Bonjour, avec la situation actuelle, Savez-vous si l’année débutera 
+en présentielle ou est-il question de démarrer par voie virtuelle ?</strong><br><ul class="indent"><li>Bonjour,
+ grande question pour nous aussi ! On espère vraiment pouvoir revenir au
+ présentiel (en mettant en place des mesures de sécurité) le plus 
+possible - c'est notre volonté en tout cas - mais on dépend un peu des 
+autorités sanitaires pour cela donc on ne peut pas vous faire de fausses
+ promesses ;-)</li><li></li></ul><strong>20/ Bonjour,&nbsp; je me pose 
+une question concernant le choix de parcours en Master. J'ai vu qu'il y 
+avait deux cas dans le dossier : choisir d'abord une entrée par le 
+secteur, ou par la pratique. Qu'est-ce que ça change en réalité ? Par 
+exemple, si je veux entrer en Master de narration spéculative et choisir
+ les pratiques vidéo et installation/performance, pourquoi choisir par 
+exemple la narration spéculative en "dominante" et pas la vidéo ? Merci 
+:-)&nbsp;</strong><br><ul class="indent"><li>Il&nbsp; faut que tu choisisses le Master . Le titre de ton diplôme: être diplômé en Narration spéculative ou en Vidéo.</li></ul>Lorsque tu as choisis ça, tu peux ensuite choisir les autres pratiques artistiques&nbsp;<br><br><strong>21/ Bonjour est ce que cela pose un problème&nbsp; de rentrer dans votre école à 17 ans ?</strong><br><ul class="indent"><li>Aucun
+ problème tant que tu as un CESS ou un Bac. SI tu as toujours 17 ans 
+lors de ton inscription, un membre de ta famille majeur devra signer 
+pour toi.</li><li>Merci!</li></ul><br><strong>22/ Bonjour ! Est-il possible d'effectuer des Erasmus en Master ? :^)</strong><br><ul class="indent"><li>Bonjour ! Pour ça, il faut prendre contact avec Sammy. Il y a déjà pas mal d'informations sur le site de l'erg <a href="http://wiki.erg.be/" rel="noreferrer noopener">http://wiki.erg.be/</a> - Menu "International".&nbsp; <strong><span class="color:red">NON&nbsp;
+ les étudiants qui s'inscrivent en Master ne peuvent pas faire 
+d'Erasmus. Ce sont uniquement&nbsp; les étudiants qui ont effectué un 
+bachelor à l'erg.</span></strong></li><li>Super, merci bcp !!!</li><li>Oui, sinon cela crée trop de "brisures" dans le cursus&nbsp;</li></ul><br><strong>23/
+ Bonjour, Est-il&nbsp; nécessaire d'obtenir les 60 crédits en bac 1 
+(dans une autre école) afin d'effectuer la passerelle en Bac 2 à l'erg?</strong><br><ul class="indent"><li>Bonjour,
+ pour rentrer directement en B2 à l'erg, il faut effectivement avoir 60 
+crédits dans une autre école et il faut que l'erg puisse valoriser ces 
+60 crédits sur base du cursus qu'on organise. Une autre possibilité est 
+la valorisation des acquis de l'expérience (VAE) qui peut se faire sur 
+base de 5 années de pratiques. Je ne sais pas dans quel cas tu te 
+trouves?&nbsp;</li><li>D'accord merci, Pour le moment je ne sais pas 
+encore si je vais obtenir les 60 crédits car mes examens sont encore en 
+cours.&nbsp; On croise les doigts pour toi alors ;-) Quoi qu'il en soit,
+ introduit une demande d'admission en cours d'études. Tu pourras nous 
+fournir les relevés de notes (de juin et/ou de septembre) dès que tu les
+ as.</li><li>Quels sont les démarches à effectuer pour la VAE dans le 
+cas où ce serait nécessaire? Fournir des documents prouvant ta pratique 
+durant 5 ans (travaux, factures, etc.), ce sera analysé par l'équipe 
+administrative et par le jury d'admission. N'hésite pas à écrire à 
+écrire à aec-vae@erg.be.</li><li>Parfait, un tout grand merci!</li></ul><br><strong>24/ Bonjour, le "concours" se déroule bien sur 3 jours? ce sont des ateliers sur toute la journée avec d'autres candidats?</strong><br><ul class="indent"><li>Si
+ tu parles des rencontres d'admission en BAC 1, il s'agit d'une journée 
+voire une journée et demie de workshop pour que tu puisses "tester" 
+l'erg. Ces workshops ne sont pas éliminatoires. Ensuite, il y a un 
+entretien avec des enseignant·e·s de l'orientation pour laquelle tu 
+postules. Il y a un horaire de passage par ordre alphabétique.</li><li>d'accord! merci. pensez_vous que ces rencontres puissent avoir lieu en distanciel si toutefois il y a un nouveau confinement.</li><li>S'il
+ y a un nouveau confinement, nous ne pourrons en effet pas nous voir 
+face à face, et dans ce cas-ci, nous communiqueront les nouvelles 
+modalités d'admission.</li><li>Il n' ya pas de problème pour que les étrangers européens se déplacent à Bruxelles en ce moment? pas de quatorzaine obligatoire?</li><li>J'imagine
+ que ça dépend du pays d'où tu viens. Il me semble que les frontières 
+belges sont ouvertes pour les pays de l'espace Shengen. Plus d'infos sur
+ le site du Centre de crise belge: <a href="https://centredecrise.be/fr/news/gestion-de-crise/questions-relatives-au-franchissement-de-nos-frontieres" rel="noreferrer noopener">https://centredecrise.be/fr/news/gestion-de-crise/questions-relatives-au-franchissement-de-nos-frontieres</a></li><li>ok. Merci beaucoup</li><li>ce n'est pas un concours</li><li></li></ul><strong>25/ En quoi consiste le master à finalité approfondie ?</strong><br><ul class="indent"><li>&nbsp;Il
+ est composé de deux années d'études: une année commune à tous les 
+Masters et une année composée de 45 crédits à l'erg et 15 crédits 
+théoriques à choisir dans une université partenaire.</li></ul><br><strong>26/
+ (Pour l'entrée en master dans les dossier de pré-inscription) À propos 
+des documents à fournir pour les justifications post bac, qu'est ce qui 
+est entendu par "• Les attestations ORIGINALES justifiant TOUTES les 
+activités après l’obtention du diplôme"&nbsp; ?&nbsp; Pas de photocopie 
+ou pas de duplicata ? Aussi, (pour les justificatifs d'etudes 
+supérieures) puisqu'on ne peut pas mettre de certificat de scolarité, 
+vaut-il mieux mettre le diplôme ?</strong><br><ul class="indent"><li><strong>Vous
+ devez nous fournir en pdf des copies de toutes vos activités après 
+votre bac. Contrat de travail ou études. Vous devez justifier les 5 
+dernières années. Les originaux vous seront demandées ultérieurement.</strong></li><li>D'accord merci !</li></ul><br><strong>27/ Pour le dossier de candidature, le projet principal doit il etre développer&nbsp;</strong><br><strong>... vous proposez un encart assez serré dans votre formulaire, ducoup je me demandais à quel point le détailler ?</strong><br><ul class="indent"><li>Bonjour, je suppose que tu parles du master.&nbsp;</li><li>oui</li><li>Tu
+ peux en parler brièvement selon la place qui est laissée. Cela permet 
+aux enseignant.e.s de voir brièvement vers quel projet tu te diriges, et
+ vous pourrez en parler ensemble lors de l'entretien d'admission.&nbsp;</li><li></li></ul><strong>28/ Pour le logement, y-a-t-il quelqu'un de l'école/une association d'étudiants qui puisse aider (je viens de Barcelone)?</strong><br><ul class="indent"><li>Bonjour, Il y a beaucoup d'annonces pour des logements sur le groupe facebook de l'erg: <a href="https://www.facebook.com/groups/)/" rel="noreferrer noopener">https://www.<strong><em><u>facebook</u></em></strong>.com/groups/)/</a>. Sinon, il y a aussi un site d'annonces pour logement étudiant: <a href="https://ple.mykot.be/" rel="noreferrer noopener">https://ple.mykot.be/</a>.</li><li>Merci bcp!</li></ul><br><strong>29/ <span class="color:black">Bonjour,
+ j'ai obtenu l'an dernier un Diplôme National d'Art à l'ESADSE 
+(saint-étienne France), nous disposions de beaucoup d'ateliers, grande 
+force de l'école. Quels sont les différents ateliers pratiques que vous 
+proposez? Merci beaucoup !</span></strong><br><ul class="indent"><li>C'est
+ sûr que l'ESADSE est super équipée! Nous ne sommes malheureusement pas 
+aussi bien lotis, mais ceci nous force à être inventif et à faire avec 
+les moyens du bord. Cela dit, nous avons de plus en plus d'outils à 
+disposition. Dans les locaux de l'erg, il y a un atelier bois, du 
+matériel photo, vidéo, super 8 et 16mm, le print lab (impression laser, 
+riso, plotter, découpeuse vynil), des ordinateurs portables et fixes. 
+Sur les sites partagés avec l'ESA Saint-Luc dont l'erg fait partie, il y
+ a un atelier de sérigraphie, gravure sur bois, gravure sur métal (il me
+ semble), lithographie, impression 3D. Il y a aussi un partenariat avec 
+le fablab d'iMal qui a découpeuse laser, imprimantes 3D...&nbsp;</li><li><span class="color:green">C'est
+ vrai que commencer à appréhender le design à st-etienne est plutôt une 
+chance! Merci de votre réponse, je pense aussi que les liens créés entre
+ les différentes écoles peut aussi favoriser la création. Faut il avoir 
+des projets validés par des profs ou équipes techniques avant d'avoir 
+accès aux ateliers, ou y a t il plutôt une liberté d'accès?&nbsp;</span></li><li>Cela dépend du type de matériel/atelier dont tu as besoin, difficile de répondre maintenant. Merci de votre réponse!!</li></ul><br><strong>30/
+ Pour entrer en master, il est demandé de faire le tour de ses 
+expériences professionnelles ultérieures, je travaille comme artiste 
+depuis 10 ans avec des tonnes de petits contrats, tout cela doit-il être
+ détaillé ? ou je peux fonctionner sous forme de bloc, par thème ?</strong><br><ul class="indent"><li>Bonjour,
+ en fait nous vous demandons ça d'une part pour en savoir plus sur votre
+ profil pour l'épreuve d'admission. Mais l'autre raison pour laquelle 
+nous vous demandons cela, c'est que nous devons prouver ce qu'un.e 
+étudiant.e a fait durant les 5 dernières années (des études, du travail,
+ des projets, etc.) auprès de notre inspection.&nbsp;</li><li>C'est donc
+ très important de documenter ce que vous avez fait durant les 5 
+dernières années académiques (pas forcément les 10). S'il manque des 
+choses ou si c'est difficile à comprendre vu toute votre expérience, on 
+revient vers vous ! Est-ce que je réponds bien à ta question?</li><li>oui merci !</li><li></li></ul><strong>31/
+ Bonjour, il n'y a pas, dans le formulaire d'inscription de champ pour 
+le prénom d'usage. Est-il possible de l'indiquer autrement ? Par mail ?</strong><br><ul class="indent"><li>Nom
+ d'usage ? Pour le formulaire, nous demandons toutes les coordonnées qui
+ se trouvent sur la carte d'identité et ou acte de naissance. Ce sont 
+des données qui seront remis au Ministère.</li><li>On rencontre pour 
+l'instant des difficultés administratives pour intégrer les prénoms 
+d'usage auprès des autorités qui contrôlent le travail de 
+l'administration. On est en train de chercher toutes les solutions 
+possibles que nous n'avons pas pour l'instant, on en parle? Mais oui tu 
+peux l'indiquer dans le mail comme ça on peut en faire...usage ;-)</li><li>D'accord. Merci !</li></ul><br><strong>32/ Bonjour, après un BTS en France, soit Bac+2, à quelle équivalence je peux pretendre ? Master ou Bachelor 1, 2 ?</strong><br><ul class="indent"><li>Tout
+ dépendra du BTS. En général les étudiants avec un BTS de graphisme 
+design peuvent faire une demande pour une éventuelle inscription en B2.</li><li>Merci !</li></ul><br><strong>33/
+ Pour rentrer en première année de bachelor, faut-il emmener un book 
+pour éventuellement présenter des projets persos pendant l'entretien ?</strong><br><ul class="indent"><li>Il n'y a pas de pré-réquis pour BAC 1, mais beaucoup de personnes amènent en effet un portfolio pendant l'entretien.</li><li>D'accord, merci bcp!</li></ul><br><strong>34/
+ Bonjour ! Je suis Suisse, et j'avoue que je suis perdue avec toutes ces
+ démarches administratives concernant les équivalences. Je ne comprends 
+pas comment je dois m'y prendre pour faire des demandes d'équivalences ?
+ Et si je comprends bien, avec un bac ( et un cfc, je ne sais pas si ce 
+terme parle à quelqu'un.e ), je peux prétendre à une entrée en bac1 
+?&nbsp;</strong><br>Bonjour, toutes les infos sont ici : <a href="http://wiki.erg.be/w/Admission_Bachelor_1" rel="noreferrer noopener">http://wiki.erg.be/w/Admission_Bachelor_1</a> Vous devez choisir le cas qui correspond à votre situation (par exemple : <a href="http://wiki.erg.be/w/J%E2%80%99ai_d%C3%A9j%C3%A0_obtenu_mon_Baccalaur%C3%A9at_(ou_dipl%C3%B4me_du_secondaire_national)_%C3%A0_l%E2%80%99%C3%A9tranger)" rel="noreferrer noopener">http://wiki.erg.be/w/J%E2%80%99ai_d%C3%A9j%C3%A0_obtenu_mon_Baccalaur%C3%A9at_(ou_dipl%C3%B4me_du_secondaire_national)_%C3%A0_l%E2%80%99%C3%A9tranger)</a>
+ dans cette page, vous trouverez un lien pour le service des 
+équivalences (ATTENTION le terme equivalences en Belgique signifie une 
+équivalence de diplôme) -&gt; <a href="http://www.equivalences.cfwb.be/" rel="noreferrer noopener">http://www.equivalences.cfwb.be/</a><br>super, merci beaucoup!! :-)<br><br><strong>35/
+ Bonjour, pour les grilles comparitives Bloc 1 et Bloc 2, est-ce qu'il 
+faut les équivalences très précises des cours ou est ce que c'est un peu
+ à nous de voir selon notre formation ? Je ne comprends pas vraiment 
+comment nous devons les remplir !</strong><br><ul class="indent"><li>Bonjour,
+ il faut faire au mieux mais on on bien conscient.e.s que ce n'est pas 
+évident et peu adapté parfois (c'est une obligation légale). Peut-être 
+mettre en vis-à-vis des cours artistiques des cours artistiques que tu 
+as suivi? Et idem pour les cours théoriques? Ca te semble faisable au 
+regard de ton parcours? Si ça ne correspond pas bien, nous trouverons 
+des solutions, c'est juste important de remettre ce document, quitte à 
+ce qu'il doive être adapté/complété par la suite. Ok pour toi?</li><li>Ok super merci beaucoup ! Ca devrais aller normalement ! :) :-)</li><li>Bonjour, et comment pouvons-nous calculez nos crédits au regard de nos notes ? pour entrer en B2 il faut 60 credits ?</li><li>Vous n'aviez pas de crédits?&nbsp;</li><li>Non je suis étudiante en France et nous n'avions pas ce système de crédit dans mon école, je suis donc perdue par rapport à ça</li><li>C'était une Manaa ou un BTS peut-être?</li><li>Une manaa et deux ans de bts design graphique</li><li>en tout cas de mon expérience (la même MANAA + BTS je suis entré en B2&nbsp;</li><li>voila le lien <a href="https://jitsi.erg.be/JPO-2020-questions-administratives" rel="noreferrer noopener">https://jitsi.erg.be/JPO-2020-questions-administratives</a></li><li>salut ! je vais t'envoyer un lien vers lejitsi de l'administration tu pourras leur poser la question ;)&nbsp;</li><li>Mettre en parallèle les cours, après il faut que nous analysions la situation.</li><li>D'accord merci pour vos réponses !</li><li></li></ul><strong>36/ Avez vous des contacts avec des associations de logements étudiants?</strong><br><ul class="indent"><li>Bonjour, voir la question 28 ;-)suuuper je vais voir :))</li><li></li></ul><strong>37/&nbsp;
+ Aux entretiens pour entrer en B2, j'ai vu que nous devons présenter des
+ travaux récents. Pouvons-nous présenter des travaux que vous aurez vu 
+auparavant dans notre portfolio que nous devons envoyer avec le dossier 
+d'inscription, ou alors vous attendez-vous à ce qu'on vous présente des 
+travaux différents de ceux de notre portfolio ?</strong><br><ul class="indent"><li>Salut ! tu peux présenter les travaux que tu veux à l'entretien :) qu'il soient dans ton dossier ou non !</li></ul><br><strong>40/ petite question d'un bac 3 peut on en savoir plus sur les différent</strong>s<strong> master possible ? quand on vient de média par exemple ! merci&nbsp;</strong><br><strong>par exemple politique du multiple&nbsp;</strong><br><ul class="indent"><li>&nbsp;Tous les Masters sont accessibles, ça va dépendre de ta pratique.</li><li>Les masters les plus "teintés" média sont les deux masters PEG Politique et expérimentations graphiques.&nbsp;</li><li>- Pratiques artistiques et complexité scientifique</li><li>- Design et politique du Multiple</li><li>Tu peux faire une recherche sur le site de l'Erg pour en savoir plus sur chacun de ces masters.</li><li>merci beaucoup !</li><li>on va vous répondre en live aussi</li><li></li></ul><strong>41/ En bac1, quel pourcentage du programme est consacré aux cours théoriques généraux (cours historiques, philosophiques...)?</strong><br><ul class="indent"><li>Salut !&nbsp; tu as 8h de cours théoriques hebdomadaires donc à peu près 30-40% :) Merci ! avec plaisir !</li></ul><br><strong>43/&nbsp;
+ Je ne recevrai pas mon equivalence de baccalaureat avant l'envoi de mon
+ dossier d'inscription, cela pose-t-il probleme ? puis-je la donner en 
+septembre ?</strong><br><ul class="indent"><li>il faut juste la preuve 
+que tu l'as bien faite. Tu dois envoyer ton dossier d'équivalence par 
+recommandé et nous apporter la preuve de l'envoi. La preuve de paiement 
+des 200 euros est à mettre dans le dossier d'équivalence (original). IL 
+faut impérativement que le dossier d'équivalence soit complet.&nbsp;</li></ul><br><strong>44/
+ Au moment des entretiens, pouvons-nous présenter notre portfolio sous 
+forme de pdf sur notre ordinateur, ou alors devons nous absolument le 
+presenter au format papier ?</strong><br><ul class="indent"><li>C'est possible mais c'est toujours plus parlant de voir les originaux...</li><li>&nbsp;Mais si les originaux sont numériques, alors...</li><li>oui&nbsp;</li><li>Nous pouvons apporter le portfolio papier et presenter les projets videos par exemple en apportant notre ordinateur ?</li><li>Bien sûr :)</li></ul><br><strong>45/
+ Sur la grille de cours comparative pour entrer en cours d’études, je 
+vois que nous devons rentrer des notes dans la colonne de droite. 
+N’ayant pas encore eu mes notes associées à l’obtention de mon diplôme 
+(que je recevrais dans l’été), puis-je mettre mes notes de bulletin de 
+deuxième semestre de cette année ?</strong><br><ul class="indent"><li>Vous pouvez simplement noter les noms des cours. L'administration de l'erg complétera le document par la suite.&nbsp;</li><li>Je
+ devrais donc dans l'été envoyer mes notes de dipl^me afin que l'equipe 
+administrative puisse completer par eux-même ma grille ?oui vous devez 
+nous envoyer par la suite un dossier complet.</li></ul><br><strong>46/ 
+Bonjour! Je suis vraiment attirée par la pluridisciplinarité de votre 
+école et je viens d’un background très sonore mais j’aimerais me diriger
+ vers la conception d’installations intéractifs/productions mêlant son 
+avec d’autres supports/médiums d’arts (plastiques et visuels). Je me 
+demandais vis à vis du cursus BA ou MA d’Arts Numériques s’il y avait 
+une place pour le son dans ces études ? ou si on parle « que » des 
+aspects visuels des Arts Numériques.&nbsp;</strong><br><ul class="indent"><li>Le
+ son est omniprésent à l'erg, il existe même un cours technique de son 
+en 2ème et 3 ème année . Les arts numériques sont envisagés comme un 
+"carrefour" entre l'installation du media, le code pur et la production 
+personnelle. Mais tout le monde fait du son à l'erg, il suffit 
+d'intégrer cette composante dans sa pratique, que ce soir en graphisme 
+ou AN.&nbsp;</li><li>Ok, merci beaucoup!</li><li>J'ai cru voir qu'il y 
+avait Lawrence Le Doux en tant que professeur de son, c'est bien 
+cela?oui :) en cours de son B3, on a fait un k7 sur dispo bandcamp je te
+ met le lien ici <a href="https://ergmelody.bandcamp.com/album/rpgiator-2" rel="noreferrer noopener">https://ergmelody.bandcamp.com/album/rpgiator-2</a> Enjoy :)</li><li>:D</li><li>on vient de le contacter il essaye de se connecter au live pour répondre à votre question</li><li>sinon
+ le son est très présent, avec donc les profs Laurent et Sylvie, mais 
+aussi à la radio ou dans la galerie ou dans d'autres cours.&nbsp;</li><li>En
+ cours de master narration spéculative on en parle beaucoup par exemple.
+ Qu'est-ce qu'une narration sonore ? Qu'est-ce que l'histoire de la 
+musique&nbsp; peut nous dire du monde, de comment depuis la musique on 
+peut spéculer le monde ?&nbsp;</li><li>Ok merci c'est super, je suis rassurée et contente de lire ça !</li><li>Laurent est connecté il va avoir la parole dans quelques secondes</li><li>Niquel</li><li>J'ai
+ déjà une formation assez poussée et technique en son donc c'était plus 
+pour savoir si on apprenait par exemple, Max MSP pour lier la video avec
+ le son pour créer des "ponts" entre justement video/son</li><li>Je 
+pense que tu trouveras d'office le moyen de donner vie à ton projet, si 
+tu veux créer des ponts entre tes productions en son avec de la vidéo ça
+ ne posera pas de pb&nbsp;</li><li>Ok ça marche ! merci</li></ul>L'approche
+ de Sylvie est différente de celle de Laurent. Complémentaire. Elle 
+vient de l'art sonore avec une formation à la fois plus technique et 
+orientée texture, musique concrète, création sonore, field recording 
+etc...&nbsp; Laurent a une approche en lien avec ses propres pratiques 
+musicales et sonores, djing, radio, bricolage, débrouille. Voilà.&nbsp;<br>Ok, merci et du coup là on parle plutôt de B2/B3 AN<br>pour les cours dédiés oui.&nbsp;<br>Mais
+ comme on disait ça n'empêche pas de travailler la question ailleurs, et
+ avoir des échanges ou un suivi par x ou y. L'école est vraiment 
+transdisciplinaire. J'interviens (peggy) dans le master narration et 
+plusieurs élèves présentent des travaux autour de la musique et du son, 
+que ça soit via leurs mémoires ou dans leurs pratiques.&nbsp;<br>Cette année au moins deux jurys de narration spéculative seront exclusivement sonores.&nbsp;<br>D'accord,
+ merci pour toutes ces réponses rassurantes, c'est justement cette 
+transdisciplinarité que je trouve chouette dans cette école. Merci 
+!&nbsp;<br>Si tu as d'autres questions envoies un mail à 
+information@erg.be on le fera suivre à Laurent et Sylvie ou autres 
+personnes.&nbsp;<br>Et puis bien sur, il y a la radio qui peut être investie par qui veut. (avec stream en ligne)<br>Super :)<br><a href="http://erg.be/ergoteradio/" rel="noreferrer noopener">http://erg.be/ergoteradio/</a><br><br><br>47/
+ Bonjour, je cherche à commencer un bachelier en graphisme. J'ai déjà 
+fait Bachelier + Master dans le domaine de la com', ensuite j'ai 
+travaillé un an en agence créative et une autre année en agence 
+média/créa. Je me suis rendu compte que la com' n'était pas pour moi car
+ j'ai davantage envie d'être du côté de la création plutôt que le 
+management. Est-ce que mon parcours reste légitime (25 ans - reprise 
+d'études) en sachant que j'ai toujours été intéressé par le 
+graphisme?&nbsp;<br><ul class="indent"><li>J'imagine que oui car j'ai 
+déjà eu des étudiants d'un certain âge, qui étaient déjà dans la vie 
+professionnelle et qui souhaitaient se réorienter. Je remets ta question
+ dans la partie administrative en bas pour voir s'il y a une démarche 
+différente ou non.</li><li>Bonjour, oui bien sur. Il n'y a aucun problème, beaucoup d'étudiant.e.s ont déjà eu un parcours avant d'arriver à l'erg.&nbsp;</li><li>Les
+ démarches sont semblables ;-) On doit juste te demander de nous 
+indiquer et prouver ce que tu as fait ces cinq dernières années: nous 
+devons montrer cela à notre inspection (ministère).&nbsp;</li><li>Souhaites-tu
+ entamer un bachelier en B1? Si tu souhaites tenter de valoriser ton 
+parcours académique antérieur, on peut y regarder ensemble lors de ta 
+demande d'admission pour voir si il y a des possibilités...Bonjour, j'ai
+ déjà rassemblé les documents de Bachelier/Master qui prouvent mon 
+inscription+relevés de notes. J'ai aussi commencé à rassembler les 
+autres documents pour pouvoir s'inscrire. J'aimerais entrer en BAC 1 
+mais je ne sais pas si c'est ce qui est le plus logique, je me dis que 
+ça serait logique car je n'ai pas eu de formation artistique du tout. Je
+ dois faire ma demande d'admission en ligne ou bien c'est préférable de 
+venir sur place du coup? Effectivement cela serait plus pertinent de 
+commencer en B1 vu votre parcours en Com.Quel serait la démarche la plus
+ simple ? Rassembler l'ensemble des documents et venir sur place avant 
+le 15 juillet pour faire un dossier d'inscription ? Ou bien tout envoyer
+ en ligne ? Je me sentirais mieux de pouvoir discuter et vérifier que 
+tout est en ordre.&nbsp;</li><li>Demande d'admission en ligne uniquement
+ ;-) Si des choses sont manquantes ou problème, on prend contact avec 
+vous, pas d'inquiétude. Ok pas de soucis Cela se passe comme ça cette 
+année vu les incertitudes sur les conditions sanitaires...</li><li></li></ul><strong>48/ Bonjour après un b3 quelle démarche pour rentrer en master ? Merci</strong>&nbsp;<br>Toutes les info sont sur le site de l'erg. Document à télécharger et à nous envoyer via mail.<br>Vous devez également nous envoyer certains documents.<br><br><br><s>49/
+ Est-ce que choisir l'orientation dessin dans le pôle art implique&nbsp;
+ uniquement la pratique du dessin ou est-ce beaucoup plus large ?&nbsp;</s><br><s>Je
+ remets ta question dans la 1re partie du pad, car je pense que les 
+enseignant·e·s de l'orientation dessin seront plus à même de te 
+répondre.</s><br><br><strong>50/Une petite question administrative, je 
+n'ai pas trouvé le coût de la formation exemple pour le Master en Arts 
+Numériques. J'ai vu 100€ de frais d'inscription mais je ne sais pas le 
+coût des cours.</strong><br><ul class="indent"><li>Bonjour, le minerval ne varie pas selon l'orientation, il varie en fonction de l'année d'études.</li><li>En master 1, le minerval est de 873€. En master 2 (car année diplômante), il est de 924€.&nbsp;</li><li>Plus d'infos et infos sur les aides sociales: erg.be - Menu - Mode d'emploi - Frais d'inscription.</li><li></li><li>Ok TOP, merci:)</li><li>Pour
+ les étudiant.e.s hors Union Européenne et qui ne peuvent pas être 
+assimilé.e.s, le montant est par contre plus important car il faut y 
+ajouter une part (voir le site web). Ce n'est pas ton cas?&nbsp;</li></ul>Non c'est bon je suis italienne&nbsp; Super ! Mais d'accord merci pour l'info !<br><br><br>51/
+ Afin d'être considéré comme "étudiant modeste" (statut), quels sont les
+ pré-recquis. Je compte travailler comme étudiant tout en faisant les 
+études et je ne vis plus chez mes parents depuis deux ans, est-ce que 
+cela me donne un statut particulier ?<br><ul class="indent"><li>Bonjour, en fait la définition d'un.e "étudiant.e modeste" est imposée par la Fédération Wallonie-Bruxelles.&nbsp;</li><li>Quelle
+ que soit ta situation, le Service social de l'école est là pour vous 
+aider (il faut prouver vos revenus et rendre un dossier, on vous 
+explique tout en début d'année). Il peut vous aider soit en vous 
+attribuant ce statut d' "étudiant.e modeste", soit en vous octroyant des
+ aides de l'école en fonction de vos situations.&nbsp;</li><li>Il y a 
+également les bourses d'études de la Fédération Wallonie-Bruxelles 
+(attention, là, il y a des conditions de nationalité et/ou résidence). 
+Plus d'infos ici: <a href="https://allocations-etudes.cfwb.be/" rel="noreferrer noopener">https://allocations-etudes.cfwb.be/</a>
+ Ok, merci beaucoup. Est-ce que je dois contacter le service social de 
+moi-même ou bien attendre le début d'année académique ?&nbsp;</li><li>Si
+ cela te rassurerait d'avoir plus d'informations maintenant, tu peux 
+écrire à Thérèse Groulard (servicesocial@stluc-bruxelles.be) pour 
+obtenir la brochure d'informations 2020-21 (elle n'est pas encore 
+disponible sur le site web). Pour l'introduction d'une demande, ce sera 
+en début d'année académique.Ok je contacterai donc, est-ce que c'est 
+cette adresse: Marie Alui – Service comptabilité - 
+secretariatfinancestluc@gmail.com ? Plutôt Thérèse Groulard (voir 
+ci-dessus) dans un premier temps. Le service compta c'est plutôt pour le
+ paiement du minerval par la suite.&nbsp;</li><li>NB: un acompte de 50€ 
+sur le minerval doit être payé avant le 31 octobre 2020. Mais pour le 
+solde du minerval, vous avez jusqu'au 31 janvier 2021. Ok parfait, merci
+ pour les précisions/informations</li><li></li><li></li><li></li></ul><br><br><strong>Nous allons maintenant archiver ce pad! Nous espérons que vous avons pu répondre à vos questions!</strong><br><br><br><br>
+
+
+</strong></div></body></html>

special/jpo2021-live/index.html

@@ -0,0 +1,83 @@
+<!doctype>
+<html>
+	<head>
+		<title>erg ~ Portes ouvertes 2021</title>
+		<style>
+		/* F O N T E S */
+		@font-face {
+		    font-family: "Combined";
+		    src: url('/mw/skins/foreground/assets/fonts/combined.otf');
+		    font-style:   normal;
+		    font-weight:  normal;
+		}
+		@font-face {
+		    font-family: "Vega";
+		    src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.otf');
+		    src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.ttf') format("truetype");
+		    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular-Webfont.svg") format("svg");
+		    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular.woff") format("woff");
+		    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular.woff2") format("woff2");
+		    font-style:   normal;
+		    font-weight:  normal;
+		}
+
+			body {
+				background-color: thistle;
+				height: 100%;
+				font-family: Vega;
+				display: flex;
+				flex-direction: column;
+				box-sizing: border-box;
+				overflow: hidden;
+			}
+			h1, h2 {
+				font-family: Combined;
+				font-weight: normal;
+				margin-bottom: 0;
+				display: contents;
+			}
+			h2 {
+				margin-bottom: 1em;
+			}
+			iframe {
+				width: 100%;
+				height: 100%;
+				border: 0;
+				flex-grow: 1;
+				box-sizing: border-box;
+			}
+			ul {
+				display: flex;
+				margin: 1.2em 0;
+				padding: 0;
+				justify-content: space-between;
+			}
+			li {
+				list-style-type: none;
+				padding: 0;
+				margin: 0;
+				border: 1px solid black;
+				border-radius: 10px;
+				padding: 0.25em 0.5em;
+				flex-basis: 10%;
+			}
+			a {
+				text-decoration: none;
+				color: inherit;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>erg</h1>
+		<h2>journées portes ouvertes 2021</h2>
+		<ul>
+			<li><a href="https://annuel.framapad.org/p/erg-jpo2021-admin" target="porte">Questions à l’administration</a></li>
+		    	<li><a href="https://annuel.framapad.org/p/erg-jpo2021-profs" target="porte">Questions aux enseignant·e·s</a></li>
+			<li><a href="https://www.mixcloud.com/Ergote_Radio/" target="_blank">Ergote Radio</a></li>
+			<li><a href="https://vimeo.com/showcase/8533632" target="_blank">Vidéos JPO 2021</a></li>
+		</ul>
+
+		<iframe name="porte" src="welcome.html"></iframe>
+
+	</body>
+</html>

special/jpo2021-live/welcome.html

@@ -0,0 +1,49 @@
+<!doctype>
+<html>
+	<head>
+		<title>erg ~ Portes ouvertes 2021</title>
+		<style>
+		/* F O N T E S */
+		@font-face {
+		    font-family: "Combined";
+		    src: url('/mw/skins/foreground/assets/fonts/combined.otf');
+		    font-style:   normal;
+		    font-weight:  normal;
+		}
+		@font-face {
+		    font-family: "Vega";
+		    src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.otf');
+		    src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.ttf') format("truetype");
+		    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular-Webfont.svg") format("svg");
+		    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular.woff") format("woff");
+		    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular.woff2") format("woff2");
+		    font-style:   normal;
+		    font-weight:  normal;
+		}
+
+			body {
+				width: 100%;
+				height: 100%;
+				background-color: thistle;
+				font-family: Vega;
+				display: flex;
+				flex-direction: column;
+				line-height: 1.2em;
+			}
+			h1, h2 {
+				font-family: Combined;
+				font-weight: normal;
+			}
+			iframe {
+				width: 100%;
+				border: 0;
+				flex-grow: 1;
+				box-sizing: border-box;
+				
+			}
+		</style>
+	</head>
+	<body>
+		<img src="https://wiki.erg.be/mw/images/c/cb/Affiche_Jury_2021_%2B_PO_FINAL.jpg">
+	</body>
+</html>

special/recentchanges/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/recentchanges/dist/recentchanges.js

@@ -0,0 +1,915 @@
+(function () {
+  'use strict';
+
+  var xhtml = "http://www.w3.org/1999/xhtml";
+
+  var namespaces = {
+    svg: "http://www.w3.org/2000/svg",
+    xhtml: xhtml,
+    xlink: "http://www.w3.org/1999/xlink",
+    xml: "http://www.w3.org/XML/1998/namespace",
+    xmlns: "http://www.w3.org/2000/xmlns/"
+  };
+
+  function namespace(name) {
+    var prefix = name += "", i = prefix.indexOf(":");
+    if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
+    return namespaces.hasOwnProperty(prefix) ? {space: namespaces[prefix], local: name} : name;
+  }
+
+  function creatorInherit(name) {
+    return function() {
+      var document = this.ownerDocument,
+          uri = this.namespaceURI;
+      return uri === xhtml && document.documentElement.namespaceURI === xhtml
+          ? document.createElement(name)
+          : document.createElementNS(uri, name);
+    };
+  }
+
+  function creatorFixed(fullname) {
+    return function() {
+      return this.ownerDocument.createElementNS(fullname.space, fullname.local);
+    };
+  }
+
+  function creator(name) {
+    var fullname = namespace(name);
+    return (fullname.local
+        ? creatorFixed
+        : creatorInherit)(fullname);
+  }
+
+  function none() {}
+
+  function selector(selector) {
+    return selector == null ? none : function() {
+      return this.querySelector(selector);
+    };
+  }
+
+  function selection_select(select) {
+    if (typeof select !== "function") select = selector(select);
+
+    for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+      for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
+        if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
+          if ("__data__" in node) subnode.__data__ = node.__data__;
+          subgroup[i] = subnode;
+        }
+      }
+    }
+
+    return new Selection(subgroups, this._parents);
+  }
+
+  function empty() {
+    return [];
+  }
+
+  function selectorAll(selector) {
+    return selector == null ? empty : function() {
+      return this.querySelectorAll(selector);
+    };
+  }
+
+  function selection_selectAll(select) {
+    if (typeof select !== "function") select = selectorAll(select);
+
+    for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
+      for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
+        if (node = group[i]) {
+          subgroups.push(select.call(node, node.__data__, i, group));
+          parents.push(node);
+        }
+      }
+    }
+
+    return new Selection(subgroups, parents);
+  }
+
+  function matcher(selector) {
+    return function() {
+      return this.matches(selector);
+    };
+  }
+
+  function selection_filter(match) {
+    if (typeof match !== "function") match = matcher(match);
+
+    for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+      for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
+        if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
+          subgroup.push(node);
+        }
+      }
+    }
+
+    return new Selection(subgroups, this._parents);
+  }
+
+  function sparse(update) {
+    return new Array(update.length);
+  }
+
+  function selection_enter() {
+    return new Selection(this._enter || this._groups.map(sparse), this._parents);
+  }
+
+  function EnterNode(parent, datum) {
+    this.ownerDocument = parent.ownerDocument;
+    this.namespaceURI = parent.namespaceURI;
+    this._next = null;
+    this._parent = parent;
+    this.__data__ = datum;
+  }
+
+  EnterNode.prototype = {
+    constructor: EnterNode,
+    appendChild: function(child) { return this._parent.insertBefore(child, this._next); },
+    insertBefore: function(child, next) { return this._parent.insertBefore(child, next); },
+    querySelector: function(selector) { return this._parent.querySelector(selector); },
+    querySelectorAll: function(selector) { return this._parent.querySelectorAll(selector); }
+  };
+
+  function constant(x) {
+    return function() {
+      return x;
+    };
+  }
+
+  var keyPrefix = "$"; // Protect against keys like “__proto__”.
+
+  function bindIndex(parent, group, enter, update, exit, data) {
+    var i = 0,
+        node,
+        groupLength = group.length,
+        dataLength = data.length;
+
+    // Put any non-null nodes that fit into update.
+    // Put any null nodes into enter.
+    // Put any remaining data into enter.
+    for (; i < dataLength; ++i) {
+      if (node = group[i]) {
+        node.__data__ = data[i];
+        update[i] = node;
+      } else {
+        enter[i] = new EnterNode(parent, data[i]);
+      }
+    }
+
+    // Put any non-null nodes that don’t fit into exit.
+    for (; i < groupLength; ++i) {
+      if (node = group[i]) {
+        exit[i] = node;
+      }
+    }
+  }
+
+  function bindKey(parent, group, enter, update, exit, data, key) {
+    var i,
+        node,
+        nodeByKeyValue = {},
+        groupLength = group.length,
+        dataLength = data.length,
+        keyValues = new Array(groupLength),
+        keyValue;
+
+    // Compute the key for each node.
+    // If multiple nodes have the same key, the duplicates are added to exit.
+    for (i = 0; i < groupLength; ++i) {
+      if (node = group[i]) {
+        keyValues[i] = keyValue = keyPrefix + key.call(node, node.__data__, i, group);
+        if (keyValue in nodeByKeyValue) {
+          exit[i] = node;
+        } else {
+          nodeByKeyValue[keyValue] = node;
+        }
+      }
+    }
+
+    // Compute the key for each datum.
+    // If there a node associated with this key, join and add it to update.
+    // If there is not (or the key is a duplicate), add it to enter.
+    for (i = 0; i < dataLength; ++i) {
+      keyValue = keyPrefix + key.call(parent, data[i], i, data);
+      if (node = nodeByKeyValue[keyValue]) {
+        update[i] = node;
+        node.__data__ = data[i];
+        nodeByKeyValue[keyValue] = null;
+      } else {
+        enter[i] = new EnterNode(parent, data[i]);
+      }
+    }
+
+    // Add any remaining nodes that were not bound to data to exit.
+    for (i = 0; i < groupLength; ++i) {
+      if ((node = group[i]) && (nodeByKeyValue[keyValues[i]] === node)) {
+        exit[i] = node;
+      }
+    }
+  }
+
+  function selection_data(value, key) {
+    if (!value) {
+      data = new Array(this.size()), j = -1;
+      this.each(function(d) { data[++j] = d; });
+      return data;
+    }
+
+    var bind = key ? bindKey : bindIndex,
+        parents = this._parents,
+        groups = this._groups;
+
+    if (typeof value !== "function") value = constant(value);
+
+    for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
+      var parent = parents[j],
+          group = groups[j],
+          groupLength = group.length,
+          data = value.call(parent, parent && parent.__data__, j, parents),
+          dataLength = data.length,
+          enterGroup = enter[j] = new Array(dataLength),
+          updateGroup = update[j] = new Array(dataLength),
+          exitGroup = exit[j] = new Array(groupLength);
+
+      bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
+
+      // Now connect the enter nodes to their following update node, such that
+      // appendChild can insert the materialized enter node before this node,
+      // rather than at the end of the parent node.
+      for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
+        if (previous = enterGroup[i0]) {
+          if (i0 >= i1) i1 = i0 + 1;
+          while (!(next = updateGroup[i1]) && ++i1 < dataLength);
+          previous._next = next || null;
+        }
+      }
+    }
+
+    update = new Selection(update, parents);
+    update._enter = enter;
+    update._exit = exit;
+    return update;
+  }
+
+  function selection_exit() {
+    return new Selection(this._exit || this._groups.map(sparse), this._parents);
+  }
+
+  function selection_join(onenter, onupdate, onexit) {
+    var enter = this.enter(), update = this, exit = this.exit();
+    enter = typeof onenter === "function" ? onenter(enter) : enter.append(onenter + "");
+    if (onupdate != null) update = onupdate(update);
+    if (onexit == null) exit.remove(); else onexit(exit);
+    return enter && update ? enter.merge(update).order() : update;
+  }
+
+  function selection_merge(selection) {
+
+    for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
+      for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
+        if (node = group0[i] || group1[i]) {
+          merge[i] = node;
+        }
+      }
+    }
+
+    for (; j < m0; ++j) {
+      merges[j] = groups0[j];
+    }
+
+    return new Selection(merges, this._parents);
+  }
+
+  function selection_order() {
+
+    for (var groups = this._groups, j = -1, m = groups.length; ++j < m;) {
+      for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0;) {
+        if (node = group[i]) {
+          if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
+          next = node;
+        }
+      }
+    }
+
+    return this;
+  }
+
+  function selection_sort(compare) {
+    if (!compare) compare = ascending;
+
+    function compareNode(a, b) {
+      return a && b ? compare(a.__data__, b.__data__) : !a - !b;
+    }
+
+    for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
+      for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {
+        if (node = group[i]) {
+          sortgroup[i] = node;
+        }
+      }
+      sortgroup.sort(compareNode);
+    }
+
+    return new Selection(sortgroups, this._parents).order();
+  }
+
+  function ascending(a, b) {
+    return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+  }
+
+  function selection_call() {
+    var callback = arguments[0];
+    arguments[0] = this;
+    callback.apply(null, arguments);
+    return this;
+  }
+
+  function selection_nodes() {
+    var nodes = new Array(this.size()), i = -1;
+    this.each(function() { nodes[++i] = this; });
+    return nodes;
+  }
+
+  function selection_node() {
+
+    for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+      for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
+        var node = group[i];
+        if (node) return node;
+      }
+    }
+
+    return null;
+  }
+
+  function selection_size() {
+    var size = 0;
+    this.each(function() { ++size; });
+    return size;
+  }
+
+  function selection_empty() {
+    return !this.node();
+  }
+
+  function selection_each(callback) {
+
+    for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+      for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+        if (node = group[i]) callback.call(node, node.__data__, i, group);
+      }
+    }
+
+    return this;
+  }
+
+  function attrRemove(name) {
+    return function() {
+      this.removeAttribute(name);
+    };
+  }
+
+  function attrRemoveNS(fullname) {
+    return function() {
+      this.removeAttributeNS(fullname.space, fullname.local);
+    };
+  }
+
+  function attrConstant(name, value) {
+    return function() {
+      this.setAttribute(name, value);
+    };
+  }
+
+  function attrConstantNS(fullname, value) {
+    return function() {
+      this.setAttributeNS(fullname.space, fullname.local, value);
+    };
+  }
+
+  function attrFunction(name, value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      if (v == null) this.removeAttribute(name);
+      else this.setAttribute(name, v);
+    };
+  }
+
+  function attrFunctionNS(fullname, value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
+      else this.setAttributeNS(fullname.space, fullname.local, v);
+    };
+  }
+
+  function selection_attr(name, value) {
+    var fullname = namespace(name);
+
+    if (arguments.length < 2) {
+      var node = this.node();
+      return fullname.local
+          ? node.getAttributeNS(fullname.space, fullname.local)
+          : node.getAttribute(fullname);
+    }
+
+    return this.each((value == null
+        ? (fullname.local ? attrRemoveNS : attrRemove) : (typeof value === "function"
+        ? (fullname.local ? attrFunctionNS : attrFunction)
+        : (fullname.local ? attrConstantNS : attrConstant)))(fullname, value));
+  }
+
+  function defaultView(node) {
+    return (node.ownerDocument && node.ownerDocument.defaultView) // node is a Node
+        || (node.document && node) // node is a Window
+        || node.defaultView; // node is a Document
+  }
+
+  function styleRemove(name) {
+    return function() {
+      this.style.removeProperty(name);
+    };
+  }
+
+  function styleConstant(name, value, priority) {
+    return function() {
+      this.style.setProperty(name, value, priority);
+    };
+  }
+
+  function styleFunction(name, value, priority) {
+    return function() {
+      var v = value.apply(this, arguments);
+      if (v == null) this.style.removeProperty(name);
+      else this.style.setProperty(name, v, priority);
+    };
+  }
+
+  function selection_style(name, value, priority) {
+    return arguments.length > 1
+        ? this.each((value == null
+              ? styleRemove : typeof value === "function"
+              ? styleFunction
+              : styleConstant)(name, value, priority == null ? "" : priority))
+        : styleValue(this.node(), name);
+  }
+
+  function styleValue(node, name) {
+    return node.style.getPropertyValue(name)
+        || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);
+  }
+
+  function propertyRemove(name) {
+    return function() {
+      delete this[name];
+    };
+  }
+
+  function propertyConstant(name, value) {
+    return function() {
+      this[name] = value;
+    };
+  }
+
+  function propertyFunction(name, value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      if (v == null) delete this[name];
+      else this[name] = v;
+    };
+  }
+
+  function selection_property(name, value) {
+    return arguments.length > 1
+        ? this.each((value == null
+            ? propertyRemove : typeof value === "function"
+            ? propertyFunction
+            : propertyConstant)(name, value))
+        : this.node()[name];
+  }
+
+  function classArray(string) {
+    return string.trim().split(/^|\s+/);
+  }
+
+  function classList(node) {
+    return node.classList || new ClassList(node);
+  }
+
+  function ClassList(node) {
+    this._node = node;
+    this._names = classArray(node.getAttribute("class") || "");
+  }
+
+  ClassList.prototype = {
+    add: function(name) {
+      var i = this._names.indexOf(name);
+      if (i < 0) {
+        this._names.push(name);
+        this._node.setAttribute("class", this._names.join(" "));
+      }
+    },
+    remove: function(name) {
+      var i = this._names.indexOf(name);
+      if (i >= 0) {
+        this._names.splice(i, 1);
+        this._node.setAttribute("class", this._names.join(" "));
+      }
+    },
+    contains: function(name) {
+      return this._names.indexOf(name) >= 0;
+    }
+  };
+
+  function classedAdd(node, names) {
+    var list = classList(node), i = -1, n = names.length;
+    while (++i < n) list.add(names[i]);
+  }
+
+  function classedRemove(node, names) {
+    var list = classList(node), i = -1, n = names.length;
+    while (++i < n) list.remove(names[i]);
+  }
+
+  function classedTrue(names) {
+    return function() {
+      classedAdd(this, names);
+    };
+  }
+
+  function classedFalse(names) {
+    return function() {
+      classedRemove(this, names);
+    };
+  }
+
+  function classedFunction(names, value) {
+    return function() {
+      (value.apply(this, arguments) ? classedAdd : classedRemove)(this, names);
+    };
+  }
+
+  function selection_classed(name, value) {
+    var names = classArray(name + "");
+
+    if (arguments.length < 2) {
+      var list = classList(this.node()), i = -1, n = names.length;
+      while (++i < n) if (!list.contains(names[i])) return false;
+      return true;
+    }
+
+    return this.each((typeof value === "function"
+        ? classedFunction : value
+        ? classedTrue
+        : classedFalse)(names, value));
+  }
+
+  function textRemove() {
+    this.textContent = "";
+  }
+
+  function textConstant(value) {
+    return function() {
+      this.textContent = value;
+    };
+  }
+
+  function textFunction(value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      this.textContent = v == null ? "" : v;
+    };
+  }
+
+  function selection_text(value) {
+    return arguments.length
+        ? this.each(value == null
+            ? textRemove : (typeof value === "function"
+            ? textFunction
+            : textConstant)(value))
+        : this.node().textContent;
+  }
+
+  function htmlRemove() {
+    this.innerHTML = "";
+  }
+
+  function htmlConstant(value) {
+    return function() {
+      this.innerHTML = value;
+    };
+  }
+
+  function htmlFunction(value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      this.innerHTML = v == null ? "" : v;
+    };
+  }
+
+  function selection_html(value) {
+    return arguments.length
+        ? this.each(value == null
+            ? htmlRemove : (typeof value === "function"
+            ? htmlFunction
+            : htmlConstant)(value))
+        : this.node().innerHTML;
+  }
+
+  function raise() {
+    if (this.nextSibling) this.parentNode.appendChild(this);
+  }
+
+  function selection_raise() {
+    return this.each(raise);
+  }
+
+  function lower() {
+    if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
+  }
+
+  function selection_lower() {
+    return this.each(lower);
+  }
+
+  function selection_append(name) {
+    var create = typeof name === "function" ? name : creator(name);
+    return this.select(function() {
+      return this.appendChild(create.apply(this, arguments));
+    });
+  }
+
+  function constantNull() {
+    return null;
+  }
+
+  function selection_insert(name, before) {
+    var create = typeof name === "function" ? name : creator(name),
+        select = before == null ? constantNull : typeof before === "function" ? before : selector(before);
+    return this.select(function() {
+      return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
+    });
+  }
+
+  function remove() {
+    var parent = this.parentNode;
+    if (parent) parent.removeChild(this);
+  }
+
+  function selection_remove() {
+    return this.each(remove);
+  }
+
+  function selection_cloneShallow() {
+    return this.parentNode.insertBefore(this.cloneNode(false), this.nextSibling);
+  }
+
+  function selection_cloneDeep() {
+    return this.parentNode.insertBefore(this.cloneNode(true), this.nextSibling);
+  }
+
+  function selection_clone(deep) {
+    return this.select(deep ? selection_cloneDeep : selection_cloneShallow);
+  }
+
+  function selection_datum(value) {
+    return arguments.length
+        ? this.property("__data__", value)
+        : this.node().__data__;
+  }
+
+  var filterEvents = {};
+
+  if (typeof document !== "undefined") {
+    var element = document.documentElement;
+    if (!("onmouseenter" in element)) {
+      filterEvents = {mouseenter: "mouseover", mouseleave: "mouseout"};
+    }
+  }
+
+  function filterContextListener(listener, index, group) {
+    listener = contextListener(listener, index, group);
+    return function(event) {
+      var related = event.relatedTarget;
+      if (!related || (related !== this && !(related.compareDocumentPosition(this) & 8))) {
+        listener.call(this, event);
+      }
+    };
+  }
+
+  function contextListener(listener, index, group) {
+    return function(event1) {
+      try {
+        listener.call(this, this.__data__, index, group);
+      } finally {
+      }
+    };
+  }
+
+  function parseTypenames(typenames) {
+    return typenames.trim().split(/^|\s+/).map(function(t) {
+      var name = "", i = t.indexOf(".");
+      if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
+      return {type: t, name: name};
+    });
+  }
+
+  function onRemove(typename) {
+    return function() {
+      var on = this.__on;
+      if (!on) return;
+      for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
+        if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
+          this.removeEventListener(o.type, o.listener, o.capture);
+        } else {
+          on[++i] = o;
+        }
+      }
+      if (++i) on.length = i;
+      else delete this.__on;
+    };
+  }
+
+  function onAdd(typename, value, capture) {
+    var wrap = filterEvents.hasOwnProperty(typename.type) ? filterContextListener : contextListener;
+    return function(d, i, group) {
+      var on = this.__on, o, listener = wrap(value, i, group);
+      if (on) for (var j = 0, m = on.length; j < m; ++j) {
+        if ((o = on[j]).type === typename.type && o.name === typename.name) {
+          this.removeEventListener(o.type, o.listener, o.capture);
+          this.addEventListener(o.type, o.listener = listener, o.capture = capture);
+          o.value = value;
+          return;
+        }
+      }
+      this.addEventListener(typename.type, listener, capture);
+      o = {type: typename.type, name: typename.name, value: value, listener: listener, capture: capture};
+      if (!on) this.__on = [o];
+      else on.push(o);
+    };
+  }
+
+  function selection_on(typename, value, capture) {
+    var typenames = parseTypenames(typename + ""), i, n = typenames.length, t;
+
+    if (arguments.length < 2) {
+      var on = this.node().__on;
+      if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
+        for (i = 0, o = on[j]; i < n; ++i) {
+          if ((t = typenames[i]).type === o.type && t.name === o.name) {
+            return o.value;
+          }
+        }
+      }
+      return;
+    }
+
+    on = value ? onAdd : onRemove;
+    if (capture == null) capture = false;
+    for (i = 0; i < n; ++i) this.each(on(typenames[i], value, capture));
+    return this;
+  }
+
+  function dispatchEvent(node, type, params) {
+    var window = defaultView(node),
+        event = window.CustomEvent;
+
+    if (typeof event === "function") {
+      event = new event(type, params);
+    } else {
+      event = window.document.createEvent("Event");
+      if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
+      else event.initEvent(type, false, false);
+    }
+
+    node.dispatchEvent(event);
+  }
+
+  function dispatchConstant(type, params) {
+    return function() {
+      return dispatchEvent(this, type, params);
+    };
+  }
+
+  function dispatchFunction(type, params) {
+    return function() {
+      return dispatchEvent(this, type, params.apply(this, arguments));
+    };
+  }
+
+  function selection_dispatch(type, params) {
+    return this.each((typeof params === "function"
+        ? dispatchFunction
+        : dispatchConstant)(type, params));
+  }
+
+  var root = [null];
+
+  function Selection(groups, parents) {
+    this._groups = groups;
+    this._parents = parents;
+  }
+
+  function selection() {
+    return new Selection([[document.documentElement]], root);
+  }
+
+  Selection.prototype = selection.prototype = {
+    constructor: Selection,
+    select: selection_select,
+    selectAll: selection_selectAll,
+    filter: selection_filter,
+    data: selection_data,
+    enter: selection_enter,
+    exit: selection_exit,
+    join: selection_join,
+    merge: selection_merge,
+    order: selection_order,
+    sort: selection_sort,
+    call: selection_call,
+    nodes: selection_nodes,
+    node: selection_node,
+    size: selection_size,
+    empty: selection_empty,
+    each: selection_each,
+    attr: selection_attr,
+    style: selection_style,
+    property: selection_property,
+    classed: selection_classed,
+    text: selection_text,
+    html: selection_html,
+    raise: selection_raise,
+    lower: selection_lower,
+    append: selection_append,
+    insert: selection_insert,
+    remove: selection_remove,
+    clone: selection_clone,
+    datum: selection_datum,
+    on: selection_on,
+    dispatch: selection_dispatch
+  };
+
+  function select(selector) {
+    return typeof selector === "string"
+        ? new Selection([[document.querySelector(selector)]], [document.documentElement])
+        : new Selection([[selector]], root);
+  }
+
+  /*
+  Uses the Mediawiki API to display a list of recent images and a link to
+  the page where the image has been used/placed.
+
+  Makes use of the following API calls:
+
+  * https://www.mediawiki.org/wiki/API:Allimages
+  * https://www.mediawiki.org/wiki/API:Imageinfo
+  * https://www.mediawiki.org/wiki/API:Imageusage
+  */
+  var PAGE_COUNT = 25; /* how many edits to show per load*/
+  var main = select("#content"),
+      baseurl = "/mw/api.php?action=query&list=recentchanges&rclimit=25&rcnamespace=0&rctoponly=1&format=json&formatversion=2&rcshow=!minor|!bot|!redirect|!anon",
+      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;
+      while (count < PAGE_COUNT) {
+          // console.log("starting loop", "count", count, "url", url);
+          let data = await get_json(url),
+              recentchanges = data.query.recentchanges;
+          console.log("recentchanges", recentchanges);
+          let items = main.selectAll("div.edit")
+              .data(recentchanges, d=>d.title)
+              .enter()
+              .append("div")
+              .attr("class", "edit")
+              .append("a")
+              .attr("href", d=>url_for_title(d.title))
+              .attr("target", "wikiframe")
+              .text(d=>d.title);
+
+          if (data.continue) {
+              url = baseurl+"&rccontinue="+data.continue.rccontinue;
+          } else {
+              return;
+          }
+          count += recentchanges.length;
+      }
+  }
+  document.addEventListener("DOMContentLoaded", load);
+  document.querySelector("a#more").addEventListener("click", function (e) {
+      e.preventDefault();
+      load();
+  });
+
+}());

special/recentchanges/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>erg: modifications récentes</title>
+<meta charset="utf-8">
+<link rel="stylesheet" type="text/css" href="/m/style.css">
+<style>
+    body {
+        margin: 1.5em;
+        margin-left: 40px;
+        margin-top: 2.5em;
+        background: #333;
+        color: white;
+        overflow: auto;
+	font-family: Vega;
+	font-size: 17px;
+    }
+    h1 {
+        margin: 0;
+        font-family: Combined;
+        font-size: 1.5em;
+    }
+    #content {
+        margin-top: 1em;
+    }
+    div#footer {
+        clear: both;
+        text-align: center;
+        margin-top: 1em;
+    }
+    a {
+        color: white;
+        text-decoration: none;
+    }
+    a:hover {
+        text-decoration: underline;
+    }
+    a#more {
+        color: black;
+        text-decoration: none;
+        background: white;
+        padding: 5px;
+    }
+    div.edit {
+        margin-bottom: 1em;
+    }
+</style>
+</head>
+<body>
+    <h1>Modifications récentes</h1>
+<div id="content"></div>
+<div id="footer"><a href="#" id="more">en plus&hellip;</a></div>
+<script src="dist/recentchanges.js"></script>
+</body>
+</html>

special/recentchanges/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/recentchanges/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/recentchanges.js',
+  output: {
+    file: 'dist/recentchanges.js',
+    format: 'iife',
+    name: 'app'
+  },
+  plugins: [
+    resolve(), 
+    commonjs()
+  ]
+}];

special/recentchanges/src/recentchanges.js

@@ -0,0 +1,55 @@
+import { selectAll, select } from 'd3-selection';
+/*
+Uses the Mediawiki API to display a list of recent images and a link to
+the page where the image has been used/placed.
+
+Makes use of the following API calls:
+
+* https://www.mediawiki.org/wiki/API:Allimages
+* https://www.mediawiki.org/wiki/API:Imageinfo
+* https://www.mediawiki.org/wiki/API:Imageusage
+*/
+var PAGE_COUNT = 25; /* how many edits to show per load*/
+var main = select("#content"),
+    baseurl = "/mw/api.php?action=query&list=recentchanges&rclimit=25&rcnamespace=0&rctoponly=1&format=json&formatversion=2&rcshow=!minor|!bot|!redirect|!anon",
+    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;
+    while (count < PAGE_COUNT) {
+        // console.log("starting loop", "count", count, "url", url);
+        let data = await get_json(url),
+            recentchanges = data.query.recentchanges;
+        console.log("recentchanges", recentchanges);
+        let items = main.selectAll("div.edit")
+            .data(recentchanges, d=>d.title)
+            .enter()
+            .append("div")
+            .attr("class", "edit")
+            .append("a")
+            .attr("href", d=>url_for_title(d.title))
+            .attr("target", "wikiframe")
+            .text(d=>d.title);
+
+        if (data.continue) {
+            url = baseurl+"&rccontinue="+data.continue.rccontinue;
+        } else {
+            return;
+        }
+        count += recentchanges.length;
+    }
+}
+document.addEventListener("DOMContentLoaded", load);
+document.querySelector("a#more").addEventListener("click", function (e) {
+    e.preventDefault();
+    load();
+});

special/recentfiles/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/recentfiles/dist/recentfiles.js

@@ -0,0 +1,932 @@
+(function () {
+  'use strict';
+
+  var xhtml = "http://www.w3.org/1999/xhtml";
+
+  var namespaces = {
+    svg: "http://www.w3.org/2000/svg",
+    xhtml: xhtml,
+    xlink: "http://www.w3.org/1999/xlink",
+    xml: "http://www.w3.org/XML/1998/namespace",
+    xmlns: "http://www.w3.org/2000/xmlns/"
+  };
+
+  function namespace(name) {
+    var prefix = name += "", i = prefix.indexOf(":");
+    if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
+    return namespaces.hasOwnProperty(prefix) ? {space: namespaces[prefix], local: name} : name;
+  }
+
+  function creatorInherit(name) {
+    return function() {
+      var document = this.ownerDocument,
+          uri = this.namespaceURI;
+      return uri === xhtml && document.documentElement.namespaceURI === xhtml
+          ? document.createElement(name)
+          : document.createElementNS(uri, name);
+    };
+  }
+
+  function creatorFixed(fullname) {
+    return function() {
+      return this.ownerDocument.createElementNS(fullname.space, fullname.local);
+    };
+  }
+
+  function creator(name) {
+    var fullname = namespace(name);
+    return (fullname.local
+        ? creatorFixed
+        : creatorInherit)(fullname);
+  }
+
+  function none() {}
+
+  function selector(selector) {
+    return selector == null ? none : function() {
+      return this.querySelector(selector);
+    };
+  }
+
+  function selection_select(select) {
+    if (typeof select !== "function") select = selector(select);
+
+    for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+      for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
+        if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
+          if ("__data__" in node) subnode.__data__ = node.__data__;
+          subgroup[i] = subnode;
+        }
+      }
+    }
+
+    return new Selection(subgroups, this._parents);
+  }
+
+  function empty() {
+    return [];
+  }
+
+  function selectorAll(selector) {
+    return selector == null ? empty : function() {
+      return this.querySelectorAll(selector);
+    };
+  }
+
+  function selection_selectAll(select) {
+    if (typeof select !== "function") select = selectorAll(select);
+
+    for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
+      for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
+        if (node = group[i]) {
+          subgroups.push(select.call(node, node.__data__, i, group));
+          parents.push(node);
+        }
+      }
+    }
+
+    return new Selection(subgroups, parents);
+  }
+
+  function matcher(selector) {
+    return function() {
+      return this.matches(selector);
+    };
+  }
+
+  function selection_filter(match) {
+    if (typeof match !== "function") match = matcher(match);
+
+    for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+      for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
+        if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
+          subgroup.push(node);
+        }
+      }
+    }
+
+    return new Selection(subgroups, this._parents);
+  }
+
+  function sparse(update) {
+    return new Array(update.length);
+  }
+
+  function selection_enter() {
+    return new Selection(this._enter || this._groups.map(sparse), this._parents);
+  }
+
+  function EnterNode(parent, datum) {
+    this.ownerDocument = parent.ownerDocument;
+    this.namespaceURI = parent.namespaceURI;
+    this._next = null;
+    this._parent = parent;
+    this.__data__ = datum;
+  }
+
+  EnterNode.prototype = {
+    constructor: EnterNode,
+    appendChild: function(child) { return this._parent.insertBefore(child, this._next); },
+    insertBefore: function(child, next) { return this._parent.insertBefore(child, next); },
+    querySelector: function(selector) { return this._parent.querySelector(selector); },
+    querySelectorAll: function(selector) { return this._parent.querySelectorAll(selector); }
+  };
+
+  function constant(x) {
+    return function() {
+      return x;
+    };
+  }
+
+  var keyPrefix = "$"; // Protect against keys like “__proto__”.
+
+  function bindIndex(parent, group, enter, update, exit, data) {
+    var i = 0,
+        node,
+        groupLength = group.length,
+        dataLength = data.length;
+
+    // Put any non-null nodes that fit into update.
+    // Put any null nodes into enter.
+    // Put any remaining data into enter.
+    for (; i < dataLength; ++i) {
+      if (node = group[i]) {
+        node.__data__ = data[i];
+        update[i] = node;
+      } else {
+        enter[i] = new EnterNode(parent, data[i]);
+      }
+    }
+
+    // Put any non-null nodes that don’t fit into exit.
+    for (; i < groupLength; ++i) {
+      if (node = group[i]) {
+        exit[i] = node;
+      }
+    }
+  }
+
+  function bindKey(parent, group, enter, update, exit, data, key) {
+    var i,
+        node,
+        nodeByKeyValue = {},
+        groupLength = group.length,
+        dataLength = data.length,
+        keyValues = new Array(groupLength),
+        keyValue;
+
+    // Compute the key for each node.
+    // If multiple nodes have the same key, the duplicates are added to exit.
+    for (i = 0; i < groupLength; ++i) {
+      if (node = group[i]) {
+        keyValues[i] = keyValue = keyPrefix + key.call(node, node.__data__, i, group);
+        if (keyValue in nodeByKeyValue) {
+          exit[i] = node;
+        } else {
+          nodeByKeyValue[keyValue] = node;
+        }
+      }
+    }
+
+    // Compute the key for each datum.
+    // If there a node associated with this key, join and add it to update.
+    // If there is not (or the key is a duplicate), add it to enter.
+    for (i = 0; i < dataLength; ++i) {
+      keyValue = keyPrefix + key.call(parent, data[i], i, data);
+      if (node = nodeByKeyValue[keyValue]) {
+        update[i] = node;
+        node.__data__ = data[i];
+        nodeByKeyValue[keyValue] = null;
+      } else {
+        enter[i] = new EnterNode(parent, data[i]);
+      }
+    }
+
+    // Add any remaining nodes that were not bound to data to exit.
+    for (i = 0; i < groupLength; ++i) {
+      if ((node = group[i]) && (nodeByKeyValue[keyValues[i]] === node)) {
+        exit[i] = node;
+      }
+    }
+  }
+
+  function selection_data(value, key) {
+    if (!value) {
+      data = new Array(this.size()), j = -1;
+      this.each(function(d) { data[++j] = d; });
+      return data;
+    }
+
+    var bind = key ? bindKey : bindIndex,
+        parents = this._parents,
+        groups = this._groups;
+
+    if (typeof value !== "function") value = constant(value);
+
+    for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
+      var parent = parents[j],
+          group = groups[j],
+          groupLength = group.length,
+          data = value.call(parent, parent && parent.__data__, j, parents),
+          dataLength = data.length,
+          enterGroup = enter[j] = new Array(dataLength),
+          updateGroup = update[j] = new Array(dataLength),
+          exitGroup = exit[j] = new Array(groupLength);
+
+      bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
+
+      // Now connect the enter nodes to their following update node, such that
+      // appendChild can insert the materialized enter node before this node,
+      // rather than at the end of the parent node.
+      for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
+        if (previous = enterGroup[i0]) {
+          if (i0 >= i1) i1 = i0 + 1;
+          while (!(next = updateGroup[i1]) && ++i1 < dataLength);
+          previous._next = next || null;
+        }
+      }
+    }
+
+    update = new Selection(update, parents);
+    update._enter = enter;
+    update._exit = exit;
+    return update;
+  }
+
+  function selection_exit() {
+    return new Selection(this._exit || this._groups.map(sparse), this._parents);
+  }
+
+  function selection_join(onenter, onupdate, onexit) {
+    var enter = this.enter(), update = this, exit = this.exit();
+    enter = typeof onenter === "function" ? onenter(enter) : enter.append(onenter + "");
+    if (onupdate != null) update = onupdate(update);
+    if (onexit == null) exit.remove(); else onexit(exit);
+    return enter && update ? enter.merge(update).order() : update;
+  }
+
+  function selection_merge(selection) {
+
+    for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
+      for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
+        if (node = group0[i] || group1[i]) {
+          merge[i] = node;
+        }
+      }
+    }
+
+    for (; j < m0; ++j) {
+      merges[j] = groups0[j];
+    }
+
+    return new Selection(merges, this._parents);
+  }
+
+  function selection_order() {
+
+    for (var groups = this._groups, j = -1, m = groups.length; ++j < m;) {
+      for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0;) {
+        if (node = group[i]) {
+          if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
+          next = node;
+        }
+      }
+    }
+
+    return this;
+  }
+
+  function selection_sort(compare) {
+    if (!compare) compare = ascending;
+
+    function compareNode(a, b) {
+      return a && b ? compare(a.__data__, b.__data__) : !a - !b;
+    }
+
+    for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
+      for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {
+        if (node = group[i]) {
+          sortgroup[i] = node;
+        }
+      }
+      sortgroup.sort(compareNode);
+    }
+
+    return new Selection(sortgroups, this._parents).order();
+  }
+
+  function ascending(a, b) {
+    return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+  }
+
+  function selection_call() {
+    var callback = arguments[0];
+    arguments[0] = this;
+    callback.apply(null, arguments);
+    return this;
+  }
+
+  function selection_nodes() {
+    var nodes = new Array(this.size()), i = -1;
+    this.each(function() { nodes[++i] = this; });
+    return nodes;
+  }
+
+  function selection_node() {
+
+    for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+      for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
+        var node = group[i];
+        if (node) return node;
+      }
+    }
+
+    return null;
+  }
+
+  function selection_size() {
+    var size = 0;
+    this.each(function() { ++size; });
+    return size;
+  }
+
+  function selection_empty() {
+    return !this.node();
+  }
+
+  function selection_each(callback) {
+
+    for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+      for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+        if (node = group[i]) callback.call(node, node.__data__, i, group);
+      }
+    }
+
+    return this;
+  }
+
+  function attrRemove(name) {
+    return function() {
+      this.removeAttribute(name);
+    };
+  }
+
+  function attrRemoveNS(fullname) {
+    return function() {
+      this.removeAttributeNS(fullname.space, fullname.local);
+    };
+  }
+
+  function attrConstant(name, value) {
+    return function() {
+      this.setAttribute(name, value);
+    };
+  }
+
+  function attrConstantNS(fullname, value) {
+    return function() {
+      this.setAttributeNS(fullname.space, fullname.local, value);
+    };
+  }
+
+  function attrFunction(name, value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      if (v == null) this.removeAttribute(name);
+      else this.setAttribute(name, v);
+    };
+  }
+
+  function attrFunctionNS(fullname, value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
+      else this.setAttributeNS(fullname.space, fullname.local, v);
+    };
+  }
+
+  function selection_attr(name, value) {
+    var fullname = namespace(name);
+
+    if (arguments.length < 2) {
+      var node = this.node();
+      return fullname.local
+          ? node.getAttributeNS(fullname.space, fullname.local)
+          : node.getAttribute(fullname);
+    }
+
+    return this.each((value == null
+        ? (fullname.local ? attrRemoveNS : attrRemove) : (typeof value === "function"
+        ? (fullname.local ? attrFunctionNS : attrFunction)
+        : (fullname.local ? attrConstantNS : attrConstant)))(fullname, value));
+  }
+
+  function defaultView(node) {
+    return (node.ownerDocument && node.ownerDocument.defaultView) // node is a Node
+        || (node.document && node) // node is a Window
+        || node.defaultView; // node is a Document
+  }
+
+  function styleRemove(name) {
+    return function() {
+      this.style.removeProperty(name);
+    };
+  }
+
+  function styleConstant(name, value, priority) {
+    return function() {
+      this.style.setProperty(name, value, priority);
+    };
+  }
+
+  function styleFunction(name, value, priority) {
+    return function() {
+      var v = value.apply(this, arguments);
+      if (v == null) this.style.removeProperty(name);
+      else this.style.setProperty(name, v, priority);
+    };
+  }
+
+  function selection_style(name, value, priority) {
+    return arguments.length > 1
+        ? this.each((value == null
+              ? styleRemove : typeof value === "function"
+              ? styleFunction
+              : styleConstant)(name, value, priority == null ? "" : priority))
+        : styleValue(this.node(), name);
+  }
+
+  function styleValue(node, name) {
+    return node.style.getPropertyValue(name)
+        || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);
+  }
+
+  function propertyRemove(name) {
+    return function() {
+      delete this[name];
+    };
+  }
+
+  function propertyConstant(name, value) {
+    return function() {
+      this[name] = value;
+    };
+  }
+
+  function propertyFunction(name, value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      if (v == null) delete this[name];
+      else this[name] = v;
+    };
+  }
+
+  function selection_property(name, value) {
+    return arguments.length > 1
+        ? this.each((value == null
+            ? propertyRemove : typeof value === "function"
+            ? propertyFunction
+            : propertyConstant)(name, value))
+        : this.node()[name];
+  }
+
+  function classArray(string) {
+    return string.trim().split(/^|\s+/);
+  }
+
+  function classList(node) {
+    return node.classList || new ClassList(node);
+  }
+
+  function ClassList(node) {
+    this._node = node;
+    this._names = classArray(node.getAttribute("class") || "");
+  }
+
+  ClassList.prototype = {
+    add: function(name) {
+      var i = this._names.indexOf(name);
+      if (i < 0) {
+        this._names.push(name);
+        this._node.setAttribute("class", this._names.join(" "));
+      }
+    },
+    remove: function(name) {
+      var i = this._names.indexOf(name);
+      if (i >= 0) {
+        this._names.splice(i, 1);
+        this._node.setAttribute("class", this._names.join(" "));
+      }
+    },
+    contains: function(name) {
+      return this._names.indexOf(name) >= 0;
+    }
+  };
+
+  function classedAdd(node, names) {
+    var list = classList(node), i = -1, n = names.length;
+    while (++i < n) list.add(names[i]);
+  }
+
+  function classedRemove(node, names) {
+    var list = classList(node), i = -1, n = names.length;
+    while (++i < n) list.remove(names[i]);
+  }
+
+  function classedTrue(names) {
+    return function() {
+      classedAdd(this, names);
+    };
+  }
+
+  function classedFalse(names) {
+    return function() {
+      classedRemove(this, names);
+    };
+  }
+
+  function classedFunction(names, value) {
+    return function() {
+      (value.apply(this, arguments) ? classedAdd : classedRemove)(this, names);
+    };
+  }
+
+  function selection_classed(name, value) {
+    var names = classArray(name + "");
+
+    if (arguments.length < 2) {
+      var list = classList(this.node()), i = -1, n = names.length;
+      while (++i < n) if (!list.contains(names[i])) return false;
+      return true;
+    }
+
+    return this.each((typeof value === "function"
+        ? classedFunction : value
+        ? classedTrue
+        : classedFalse)(names, value));
+  }
+
+  function textRemove() {
+    this.textContent = "";
+  }
+
+  function textConstant(value) {
+    return function() {
+      this.textContent = value;
+    };
+  }
+
+  function textFunction(value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      this.textContent = v == null ? "" : v;
+    };
+  }
+
+  function selection_text(value) {
+    return arguments.length
+        ? this.each(value == null
+            ? textRemove : (typeof value === "function"
+            ? textFunction
+            : textConstant)(value))
+        : this.node().textContent;
+  }
+
+  function htmlRemove() {
+    this.innerHTML = "";
+  }
+
+  function htmlConstant(value) {
+    return function() {
+      this.innerHTML = value;
+    };
+  }
+
+  function htmlFunction(value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      this.innerHTML = v == null ? "" : v;
+    };
+  }
+
+  function selection_html(value) {
+    return arguments.length
+        ? this.each(value == null
+            ? htmlRemove : (typeof value === "function"
+            ? htmlFunction
+            : htmlConstant)(value))
+        : this.node().innerHTML;
+  }
+
+  function raise() {
+    if (this.nextSibling) this.parentNode.appendChild(this);
+  }
+
+  function selection_raise() {
+    return this.each(raise);
+  }
+
+  function lower() {
+    if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
+  }
+
+  function selection_lower() {
+    return this.each(lower);
+  }
+
+  function selection_append(name) {
+    var create = typeof name === "function" ? name : creator(name);
+    return this.select(function() {
+      return this.appendChild(create.apply(this, arguments));
+    });
+  }
+
+  function constantNull() {
+    return null;
+  }
+
+  function selection_insert(name, before) {
+    var create = typeof name === "function" ? name : creator(name),
+        select = before == null ? constantNull : typeof before === "function" ? before : selector(before);
+    return this.select(function() {
+      return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
+    });
+  }
+
+  function remove() {
+    var parent = this.parentNode;
+    if (parent) parent.removeChild(this);
+  }
+
+  function selection_remove() {
+    return this.each(remove);
+  }
+
+  function selection_cloneShallow() {
+    return this.parentNode.insertBefore(this.cloneNode(false), this.nextSibling);
+  }
+
+  function selection_cloneDeep() {
+    return this.parentNode.insertBefore(this.cloneNode(true), this.nextSibling);
+  }
+
+  function selection_clone(deep) {
+    return this.select(deep ? selection_cloneDeep : selection_cloneShallow);
+  }
+
+  function selection_datum(value) {
+    return arguments.length
+        ? this.property("__data__", value)
+        : this.node().__data__;
+  }
+
+  var filterEvents = {};
+
+  if (typeof document !== "undefined") {
+    var element = document.documentElement;
+    if (!("onmouseenter" in element)) {
+      filterEvents = {mouseenter: "mouseover", mouseleave: "mouseout"};
+    }
+  }
+
+  function filterContextListener(listener, index, group) {
+    listener = contextListener(listener, index, group);
+    return function(event) {
+      var related = event.relatedTarget;
+      if (!related || (related !== this && !(related.compareDocumentPosition(this) & 8))) {
+        listener.call(this, event);
+      }
+    };
+  }
+
+  function contextListener(listener, index, group) {
+    return function(event1) {
+      try {
+        listener.call(this, this.__data__, index, group);
+      } finally {
+      }
+    };
+  }
+
+  function parseTypenames(typenames) {
+    return typenames.trim().split(/^|\s+/).map(function(t) {
+      var name = "", i = t.indexOf(".");
+      if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
+      return {type: t, name: name};
+    });
+  }
+
+  function onRemove(typename) {
+    return function() {
+      var on = this.__on;
+      if (!on) return;
+      for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
+        if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
+          this.removeEventListener(o.type, o.listener, o.capture);
+        } else {
+          on[++i] = o;
+        }
+      }
+      if (++i) on.length = i;
+      else delete this.__on;
+    };
+  }
+
+  function onAdd(typename, value, capture) {
+    var wrap = filterEvents.hasOwnProperty(typename.type) ? filterContextListener : contextListener;
+    return function(d, i, group) {
+      var on = this.__on, o, listener = wrap(value, i, group);
+      if (on) for (var j = 0, m = on.length; j < m; ++j) {
+        if ((o = on[j]).type === typename.type && o.name === typename.name) {
+          this.removeEventListener(o.type, o.listener, o.capture);
+          this.addEventListener(o.type, o.listener = listener, o.capture = capture);
+          o.value = value;
+          return;
+        }
+      }
+      this.addEventListener(typename.type, listener, capture);
+      o = {type: typename.type, name: typename.name, value: value, listener: listener, capture: capture};
+      if (!on) this.__on = [o];
+      else on.push(o);
+    };
+  }
+
+  function selection_on(typename, value, capture) {
+    var typenames = parseTypenames(typename + ""), i, n = typenames.length, t;
+
+    if (arguments.length < 2) {
+      var on = this.node().__on;
+      if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
+        for (i = 0, o = on[j]; i < n; ++i) {
+          if ((t = typenames[i]).type === o.type && t.name === o.name) {
+            return o.value;
+          }
+        }
+      }
+      return;
+    }
+
+    on = value ? onAdd : onRemove;
+    if (capture == null) capture = false;
+    for (i = 0; i < n; ++i) this.each(on(typenames[i], value, capture));
+    return this;
+  }
+
+  function dispatchEvent(node, type, params) {
+    var window = defaultView(node),
+        event = window.CustomEvent;
+
+    if (typeof event === "function") {
+      event = new event(type, params);
+    } else {
+      event = window.document.createEvent("Event");
+      if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
+      else event.initEvent(type, false, false);
+    }
+
+    node.dispatchEvent(event);
+  }
+
+  function dispatchConstant(type, params) {
+    return function() {
+      return dispatchEvent(this, type, params);
+    };
+  }
+
+  function dispatchFunction(type, params) {
+    return function() {
+      return dispatchEvent(this, type, params.apply(this, arguments));
+    };
+  }
+
+  function selection_dispatch(type, params) {
+    return this.each((typeof params === "function"
+        ? dispatchFunction
+        : dispatchConstant)(type, params));
+  }
+
+  var root = [null];
+
+  function Selection(groups, parents) {
+    this._groups = groups;
+    this._parents = parents;
+  }
+
+  function selection() {
+    return new Selection([[document.documentElement]], root);
+  }
+
+  Selection.prototype = selection.prototype = {
+    constructor: Selection,
+    select: selection_select,
+    selectAll: selection_selectAll,
+    filter: selection_filter,
+    data: selection_data,
+    enter: selection_enter,
+    exit: selection_exit,
+    join: selection_join,
+    merge: selection_merge,
+    order: selection_order,
+    sort: selection_sort,
+    call: selection_call,
+    nodes: selection_nodes,
+    node: selection_node,
+    size: selection_size,
+    empty: selection_empty,
+    each: selection_each,
+    attr: selection_attr,
+    style: selection_style,
+    property: selection_property,
+    classed: selection_classed,
+    text: selection_text,
+    html: selection_html,
+    raise: selection_raise,
+    lower: selection_lower,
+    append: selection_append,
+    insert: selection_insert,
+    remove: selection_remove,
+    clone: selection_clone,
+    datum: selection_datum,
+    on: selection_on,
+    dispatch: selection_dispatch
+  };
+
+  function select(selector) {
+    return typeof selector === "string"
+        ? new Selection([[document.querySelector(selector)]], [document.documentElement])
+        : new Selection([[selector]], root);
+  }
+
+  /*
+  Uses the Mediawiki API to display a list of recent images and a link to
+  the page where the image has been used/placed.
+
+  Makes use of the following API calls:
+
+  * https://www.mediawiki.org/wiki/API:Allimages
+  * https://www.mediawiki.org/wiki/API:Imageinfo
+  * https://www.mediawiki.org/wiki/API:Imageusage
+  */
+  var NUM_FILES = 30; /* how many files to show */
+      //baseurl = "/mw/api.php?action=query&list=allimages&ailimit=1&format=json&formatversion=2&aisort=timestamp&aidir=older&aiprop=timestamp|user|url|mime|size",
+  var main = select("#content"),
+      baseurl = "/mw/api.php?action=query&list=allimages&aimime=image/png|image/gif|image/jpg&ailimit=1&format=json&formatversion=2&aisort=timestamp&aidir=older&aiprop=timestamp|user|url|mime|size",
+      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;
+      while (count < NUM_FILES) {
+          // console.log("starting loop", "count", count, "url", url);
+          let data = await get_json(url),
+              allimages = data.query.allimages,
+              useimages = [];
+
+          // console.log("got data", data.query.allimages.length);
+          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);
+          }
+          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;
+      }
+  }
+  document.addEventListener("DOMContentLoaded", load);
+  document.querySelector("a#more").addEventListener("click", function (e) {
+      e.preventDefault();
+      load();
+  });
+
+}());

special/recentfiles/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>recent files</title>
+<meta charset="utf-8">
+<style>
+	:root {
+		--font-title: Combined;
+		--font-body: Vega;
+		--color-a: #a700ff;
+		--color-b: #00ab6b;
+	}
+    body {
+        background: #eee;
+        background-image: linear-gradient(45deg, rgba(0,0,100,.25) 25%, transparent 0, transparent 75%, rgba(0,0,100,.25) 0), linear-gradient(45deg, rgba(0,0,100,.25) 25%, transparent 0, transparent 75%, rgba(0,0,100,.25) 0);
+        background-position: 0 0, 10px 10px;
+        background-size: 20px 20px;
+    }
+    div.file {
+        float: left;
+        margin: 8px;
+	max-width: 30%;
+    }
+    div.file img {
+	max-width: 100%;
+	display: block;
+    }
+    div.file a {
+    	border-style: solid;
+	border-width: 2px;
+	border-color: transparent;
+	display: block;
+    }
+    div.file a:hover {
+	border-image: linear-gradient(to right, var(--color-a), var(--color-b));
+        border-image-slice: 1;
+    	border-width: 10px;
+	border-color: initial;
+box-sizing: border-box;
+    }
+    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>

special/recentfiles/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/recentfiles/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/recentfiles.js',
+  output: {
+    file: 'dist/recentfiles.js',
+    format: 'iife',
+    name: 'app'
+  },
+  plugins: [
+    resolve(), 
+    commonjs()
+  ]
+}];

special/recentfiles/src/recentfiles.js

@@ -0,0 +1,71 @@
+import { selectAll, select } from 'd3-selection';
+/*
+Uses the Mediawiki API to display a list of recent images and a link to
+the page where the image has been used/placed.
+
+Makes use of the following API calls:
+
+* https://www.mediawiki.org/wiki/API:Allimages
+* https://www.mediawiki.org/wiki/API:Imageinfo
+* https://www.mediawiki.org/wiki/API:Imageusage
+*/
+var NUM_FILES = 10; /* how many files to show */
+var main = select("#content"),
+    baseurl = "/mw/api.php?action=query&list=allimages&ailimit=1&format=json&formatversion=2&aisort=timestamp&aidir=older&aiprop=timestamp|user|url|mime|size",
+    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;
+    while (count < NUM_FILES) {
+        // console.log("starting loop", "count", count, "url", url);
+        let data = await get_json(url),
+            allimages = data.query.allimages,
+            useimages = [];
+
+        // console.log("got data", data.query.allimages.length);
+        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);
+        }
+        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;
+    }
+}
+document.addEventListener("DOMContentLoaded", load);
+document.querySelector("a#more").addEventListener("click", function (e) {
+    e.preventDefault();
+    load();
+});

special/recentnews/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/recentnews/dist/recentchanges.js

@@ -0,0 +1,917 @@
+(function () {
+  'use strict';
+
+  var xhtml = "http://www.w3.org/1999/xhtml";
+
+  var namespaces = {
+    svg: "http://www.w3.org/2000/svg",
+    xhtml: xhtml,
+    xlink: "http://www.w3.org/1999/xlink",
+    xml: "http://www.w3.org/XML/1998/namespace",
+    xmlns: "http://www.w3.org/2000/xmlns/"
+  };
+
+  function namespace(name) {
+    var prefix = name += "", i = prefix.indexOf(":");
+    if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
+    return namespaces.hasOwnProperty(prefix) ? {space: namespaces[prefix], local: name} : name;
+  }
+
+  function creatorInherit(name) {
+    return function() {
+      var document = this.ownerDocument,
+          uri = this.namespaceURI;
+      return uri === xhtml && document.documentElement.namespaceURI === xhtml
+          ? document.createElement(name)
+          : document.createElementNS(uri, name);
+    };
+  }
+
+  function creatorFixed(fullname) {
+    return function() {
+      return this.ownerDocument.createElementNS(fullname.space, fullname.local);
+    };
+  }
+
+  function creator(name) {
+    var fullname = namespace(name);
+    return (fullname.local
+        ? creatorFixed
+        : creatorInherit)(fullname);
+  }
+
+  function none() {}
+
+  function selector(selector) {
+    return selector == null ? none : function() {
+      return this.querySelector(selector);
+    };
+  }
+
+  function selection_select(select) {
+    if (typeof select !== "function") select = selector(select);
+
+    for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+      for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
+        if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
+          if ("__data__" in node) subnode.__data__ = node.__data__;
+          subgroup[i] = subnode;
+        }
+      }
+    }
+
+    return new Selection(subgroups, this._parents);
+  }
+
+  function empty() {
+    return [];
+  }
+
+  function selectorAll(selector) {
+    return selector == null ? empty : function() {
+      return this.querySelectorAll(selector);
+    };
+  }
+
+  function selection_selectAll(select) {
+    if (typeof select !== "function") select = selectorAll(select);
+
+    for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
+      for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
+        if (node = group[i]) {
+          subgroups.push(select.call(node, node.__data__, i, group));
+          parents.push(node);
+        }
+      }
+    }
+
+    return new Selection(subgroups, parents);
+  }
+
+  function matcher(selector) {
+    return function() {
+      return this.matches(selector);
+    };
+  }
+
+  function selection_filter(match) {
+    if (typeof match !== "function") match = matcher(match);
+
+    for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+      for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
+        if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
+          subgroup.push(node);
+        }
+      }
+    }
+
+    return new Selection(subgroups, this._parents);
+  }
+
+  function sparse(update) {
+    return new Array(update.length);
+  }
+
+  function selection_enter() {
+    return new Selection(this._enter || this._groups.map(sparse), this._parents);
+  }
+
+  function EnterNode(parent, datum) {
+    this.ownerDocument = parent.ownerDocument;
+    this.namespaceURI = parent.namespaceURI;
+    this._next = null;
+    this._parent = parent;
+    this.__data__ = datum;
+  }
+
+  EnterNode.prototype = {
+    constructor: EnterNode,
+    appendChild: function(child) { return this._parent.insertBefore(child, this._next); },
+    insertBefore: function(child, next) { return this._parent.insertBefore(child, next); },
+    querySelector: function(selector) { return this._parent.querySelector(selector); },
+    querySelectorAll: function(selector) { return this._parent.querySelectorAll(selector); }
+  };
+
+  function constant(x) {
+    return function() {
+      return x;
+    };
+  }
+
+  var keyPrefix = "$"; // Protect against keys like “__proto__”.
+
+  function bindIndex(parent, group, enter, update, exit, data) {
+    var i = 0,
+        node,
+        groupLength = group.length,
+        dataLength = data.length;
+
+    // Put any non-null nodes that fit into update.
+    // Put any null nodes into enter.
+    // Put any remaining data into enter.
+    for (; i < dataLength; ++i) {
+      if (node = group[i]) {
+        node.__data__ = data[i];
+        update[i] = node;
+      } else {
+        enter[i] = new EnterNode(parent, data[i]);
+      }
+    }
+
+    // Put any non-null nodes that don’t fit into exit.
+    for (; i < groupLength; ++i) {
+      if (node = group[i]) {
+        exit[i] = node;
+      }
+    }
+  }
+
+  function bindKey(parent, group, enter, update, exit, data, key) {
+    var i,
+        node,
+        nodeByKeyValue = {},
+        groupLength = group.length,
+        dataLength = data.length,
+        keyValues = new Array(groupLength),
+        keyValue;
+
+    // Compute the key for each node.
+    // If multiple nodes have the same key, the duplicates are added to exit.
+    for (i = 0; i < groupLength; ++i) {
+      if (node = group[i]) {
+        keyValues[i] = keyValue = keyPrefix + key.call(node, node.__data__, i, group);
+        if (keyValue in nodeByKeyValue) {
+          exit[i] = node;
+        } else {
+          nodeByKeyValue[keyValue] = node;
+        }
+      }
+    }
+
+    // Compute the key for each datum.
+    // If there a node associated with this key, join and add it to update.
+    // If there is not (or the key is a duplicate), add it to enter.
+    for (i = 0; i < dataLength; ++i) {
+      keyValue = keyPrefix + key.call(parent, data[i], i, data);
+      if (node = nodeByKeyValue[keyValue]) {
+        update[i] = node;
+        node.__data__ = data[i];
+        nodeByKeyValue[keyValue] = null;
+      } else {
+        enter[i] = new EnterNode(parent, data[i]);
+      }
+    }
+
+    // Add any remaining nodes that were not bound to data to exit.
+    for (i = 0; i < groupLength; ++i) {
+      if ((node = group[i]) && (nodeByKeyValue[keyValues[i]] === node)) {
+        exit[i] = node;
+      }
+    }
+  }
+
+  function selection_data(value, key) {
+    if (!value) {
+      data = new Array(this.size()), j = -1;
+      this.each(function(d) { data[++j] = d; });
+      return data;
+    }
+
+    var bind = key ? bindKey : bindIndex,
+        parents = this._parents,
+        groups = this._groups;
+
+    if (typeof value !== "function") value = constant(value);
+
+    for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
+      var parent = parents[j],
+          group = groups[j],
+          groupLength = group.length,
+          data = value.call(parent, parent && parent.__data__, j, parents),
+          dataLength = data.length,
+          enterGroup = enter[j] = new Array(dataLength),
+          updateGroup = update[j] = new Array(dataLength),
+          exitGroup = exit[j] = new Array(groupLength);
+
+      bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
+
+      // Now connect the enter nodes to their following update node, such that
+      // appendChild can insert the materialized enter node before this node,
+      // rather than at the end of the parent node.
+      for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
+        if (previous = enterGroup[i0]) {
+          if (i0 >= i1) i1 = i0 + 1;
+          while (!(next = updateGroup[i1]) && ++i1 < dataLength);
+          previous._next = next || null;
+        }
+      }
+    }
+
+    update = new Selection(update, parents);
+    update._enter = enter;
+    update._exit = exit;
+    return update;
+  }
+
+  function selection_exit() {
+    return new Selection(this._exit || this._groups.map(sparse), this._parents);
+  }
+
+  function selection_join(onenter, onupdate, onexit) {
+    var enter = this.enter(), update = this, exit = this.exit();
+    enter = typeof onenter === "function" ? onenter(enter) : enter.append(onenter + "");
+    if (onupdate != null) update = onupdate(update);
+    if (onexit == null) exit.remove(); else onexit(exit);
+    return enter && update ? enter.merge(update).order() : update;
+  }
+
+  function selection_merge(selection) {
+
+    for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
+      for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
+        if (node = group0[i] || group1[i]) {
+          merge[i] = node;
+        }
+      }
+    }
+
+    for (; j < m0; ++j) {
+      merges[j] = groups0[j];
+    }
+
+    return new Selection(merges, this._parents);
+  }
+
+  function selection_order() {
+
+    for (var groups = this._groups, j = -1, m = groups.length; ++j < m;) {
+      for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0;) {
+        if (node = group[i]) {
+          if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
+          next = node;
+        }
+      }
+    }
+
+    return this;
+  }
+
+  function selection_sort(compare) {
+    if (!compare) compare = ascending;
+
+    function compareNode(a, b) {
+      return a && b ? compare(a.__data__, b.__data__) : !a - !b;
+    }
+
+    for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
+      for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {
+        if (node = group[i]) {
+          sortgroup[i] = node;
+        }
+      }
+      sortgroup.sort(compareNode);
+    }
+
+    return new Selection(sortgroups, this._parents).order();
+  }
+
+  function ascending(a, b) {
+    return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+  }
+
+  function selection_call() {
+    var callback = arguments[0];
+    arguments[0] = this;
+    callback.apply(null, arguments);
+    return this;
+  }
+
+  function selection_nodes() {
+    var nodes = new Array(this.size()), i = -1;
+    this.each(function() { nodes[++i] = this; });
+    return nodes;
+  }
+
+  function selection_node() {
+
+    for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+      for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
+        var node = group[i];
+        if (node) return node;
+      }
+    }
+
+    return null;
+  }
+
+  function selection_size() {
+    var size = 0;
+    this.each(function() { ++size; });
+    return size;
+  }
+
+  function selection_empty() {
+    return !this.node();
+  }
+
+  function selection_each(callback) {
+
+    for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+      for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+        if (node = group[i]) callback.call(node, node.__data__, i, group);
+      }
+    }
+
+    return this;
+  }
+
+  function attrRemove(name) {
+    return function() {
+      this.removeAttribute(name);
+    };
+  }
+
+  function attrRemoveNS(fullname) {
+    return function() {
+      this.removeAttributeNS(fullname.space, fullname.local);
+    };
+  }
+
+  function attrConstant(name, value) {
+    return function() {
+      this.setAttribute(name, value);
+    };
+  }
+
+  function attrConstantNS(fullname, value) {
+    return function() {
+      this.setAttributeNS(fullname.space, fullname.local, value);
+    };
+  }
+
+  function attrFunction(name, value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      if (v == null) this.removeAttribute(name);
+      else this.setAttribute(name, v);
+    };
+  }
+
+  function attrFunctionNS(fullname, value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
+      else this.setAttributeNS(fullname.space, fullname.local, v);
+    };
+  }
+
+  function selection_attr(name, value) {
+    var fullname = namespace(name);
+
+    if (arguments.length < 2) {
+      var node = this.node();
+      return fullname.local
+          ? node.getAttributeNS(fullname.space, fullname.local)
+          : node.getAttribute(fullname);
+    }
+
+    return this.each((value == null
+        ? (fullname.local ? attrRemoveNS : attrRemove) : (typeof value === "function"
+        ? (fullname.local ? attrFunctionNS : attrFunction)
+        : (fullname.local ? attrConstantNS : attrConstant)))(fullname, value));
+  }
+
+  function defaultView(node) {
+    return (node.ownerDocument && node.ownerDocument.defaultView) // node is a Node
+        || (node.document && node) // node is a Window
+        || node.defaultView; // node is a Document
+  }
+
+  function styleRemove(name) {
+    return function() {
+      this.style.removeProperty(name);
+    };
+  }
+
+  function styleConstant(name, value, priority) {
+    return function() {
+      this.style.setProperty(name, value, priority);
+    };
+  }
+
+  function styleFunction(name, value, priority) {
+    return function() {
+      var v = value.apply(this, arguments);
+      if (v == null) this.style.removeProperty(name);
+      else this.style.setProperty(name, v, priority);
+    };
+  }
+
+  function selection_style(name, value, priority) {
+    return arguments.length > 1
+        ? this.each((value == null
+              ? styleRemove : typeof value === "function"
+              ? styleFunction
+              : styleConstant)(name, value, priority == null ? "" : priority))
+        : styleValue(this.node(), name);
+  }
+
+  function styleValue(node, name) {
+    return node.style.getPropertyValue(name)
+        || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);
+  }
+
+  function propertyRemove(name) {
+    return function() {
+      delete this[name];
+    };
+  }
+
+  function propertyConstant(name, value) {
+    return function() {
+      this[name] = value;
+    };
+  }
+
+  function propertyFunction(name, value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      if (v == null) delete this[name];
+      else this[name] = v;
+    };
+  }
+
+  function selection_property(name, value) {
+    return arguments.length > 1
+        ? this.each((value == null
+            ? propertyRemove : typeof value === "function"
+            ? propertyFunction
+            : propertyConstant)(name, value))
+        : this.node()[name];
+  }
+
+  function classArray(string) {
+    return string.trim().split(/^|\s+/);
+  }
+
+  function classList(node) {
+    return node.classList || new ClassList(node);
+  }
+
+  function ClassList(node) {
+    this._node = node;
+    this._names = classArray(node.getAttribute("class") || "");
+  }
+
+  ClassList.prototype = {
+    add: function(name) {
+      var i = this._names.indexOf(name);
+      if (i < 0) {
+        this._names.push(name);
+        this._node.setAttribute("class", this._names.join(" "));
+      }
+    },
+    remove: function(name) {
+      var i = this._names.indexOf(name);
+      if (i >= 0) {
+        this._names.splice(i, 1);
+        this._node.setAttribute("class", this._names.join(" "));
+      }
+    },
+    contains: function(name) {
+      return this._names.indexOf(name) >= 0;
+    }
+  };
+
+  function classedAdd(node, names) {
+    var list = classList(node), i = -1, n = names.length;
+    while (++i < n) list.add(names[i]);
+  }
+
+  function classedRemove(node, names) {
+    var list = classList(node), i = -1, n = names.length;
+    while (++i < n) list.remove(names[i]);
+  }
+
+  function classedTrue(names) {
+    return function() {
+      classedAdd(this, names);
+    };
+  }
+
+  function classedFalse(names) {
+    return function() {
+      classedRemove(this, names);
+    };
+  }
+
+  function classedFunction(names, value) {
+    return function() {
+      (value.apply(this, arguments) ? classedAdd : classedRemove)(this, names);
+    };
+  }
+
+  function selection_classed(name, value) {
+    var names = classArray(name + "");
+
+    if (arguments.length < 2) {
+      var list = classList(this.node()), i = -1, n = names.length;
+      while (++i < n) if (!list.contains(names[i])) return false;
+      return true;
+    }
+
+    return this.each((typeof value === "function"
+        ? classedFunction : value
+        ? classedTrue
+        : classedFalse)(names, value));
+  }
+
+  function textRemove() {
+    this.textContent = "";
+  }
+
+  function textConstant(value) {
+    return function() {
+      this.textContent = value;
+    };
+  }
+
+  function textFunction(value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      this.textContent = v == null ? "" : v;
+    };
+  }
+
+  function selection_text(value) {
+    return arguments.length
+        ? this.each(value == null
+            ? textRemove : (typeof value === "function"
+            ? textFunction
+            : textConstant)(value))
+        : this.node().textContent;
+  }
+
+  function htmlRemove() {
+    this.innerHTML = "";
+  }
+
+  function htmlConstant(value) {
+    return function() {
+      this.innerHTML = value;
+    };
+  }
+
+  function htmlFunction(value) {
+    return function() {
+      var v = value.apply(this, arguments);
+      this.innerHTML = v == null ? "" : v;
+    };
+  }
+
+  function selection_html(value) {
+    return arguments.length
+        ? this.each(value == null
+            ? htmlRemove : (typeof value === "function"
+            ? htmlFunction
+            : htmlConstant)(value))
+        : this.node().innerHTML;
+  }
+
+  function raise() {
+    if (this.nextSibling) this.parentNode.appendChild(this);
+  }
+
+  function selection_raise() {
+    return this.each(raise);
+  }
+
+  function lower() {
+    if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
+  }
+
+  function selection_lower() {
+    return this.each(lower);
+  }
+
+  function selection_append(name) {
+    var create = typeof name === "function" ? name : creator(name);
+    return this.select(function() {
+      return this.appendChild(create.apply(this, arguments));
+    });
+  }
+
+  function constantNull() {
+    return null;
+  }
+
+  function selection_insert(name, before) {
+    var create = typeof name === "function" ? name : creator(name),
+        select = before == null ? constantNull : typeof before === "function" ? before : selector(before);
+    return this.select(function() {
+      return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
+    });
+  }
+
+  function remove() {
+    var parent = this.parentNode;
+    if (parent) parent.removeChild(this);
+  }
+
+  function selection_remove() {
+    return this.each(remove);
+  }
+
+  function selection_cloneShallow() {
+    return this.parentNode.insertBefore(this.cloneNode(false), this.nextSibling);
+  }
+
+  function selection_cloneDeep() {
+    return this.parentNode.insertBefore(this.cloneNode(true), this.nextSibling);
+  }
+
+  function selection_clone(deep) {
+    return this.select(deep ? selection_cloneDeep : selection_cloneShallow);
+  }
+
+  function selection_datum(value) {
+    return arguments.length
+        ? this.property("__data__", value)
+        : this.node().__data__;
+  }
+
+  var filterEvents = {};
+
+  if (typeof document !== "undefined") {
+    var element = document.documentElement;
+    if (!("onmouseenter" in element)) {
+      filterEvents = {mouseenter: "mouseover", mouseleave: "mouseout"};
+    }
+  }
+
+  function filterContextListener(listener, index, group) {
+    listener = contextListener(listener, index, group);
+    return function(event) {
+      var related = event.relatedTarget;
+      if (!related || (related !== this && !(related.compareDocumentPosition(this) & 8))) {
+        listener.call(this, event);
+      }
+    };
+  }
+
+  function contextListener(listener, index, group) {
+    return function(event1) {
+      try {
+        listener.call(this, this.__data__, index, group);
+      } finally {
+      }
+    };
+  }
+
+  function parseTypenames(typenames) {
+    return typenames.trim().split(/^|\s+/).map(function(t) {
+      var name = "", i = t.indexOf(".");
+      if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
+      return {type: t, name: name};
+    });
+  }
+
+  function onRemove(typename) {
+    return function() {
+      var on = this.__on;
+      if (!on) return;
+      for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
+        if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
+          this.removeEventListener(o.type, o.listener, o.capture);
+        } else {
+          on[++i] = o;
+        }
+      }
+      if (++i) on.length = i;
+      else delete this.__on;
+    };
+  }
+
+  function onAdd(typename, value, capture) {
+    var wrap = filterEvents.hasOwnProperty(typename.type) ? filterContextListener : contextListener;
+    return function(d, i, group) {
+      var on = this.__on, o, listener = wrap(value, i, group);
+      if (on) for (var j = 0, m = on.length; j < m; ++j) {
+        if ((o = on[j]).type === typename.type && o.name === typename.name) {
+          this.removeEventListener(o.type, o.listener, o.capture);
+          this.addEventListener(o.type, o.listener = listener, o.capture = capture);
+          o.value = value;
+          return;
+        }
+      }
+      this.addEventListener(typename.type, listener, capture);
+      o = {type: typename.type, name: typename.name, value: value, listener: listener, capture: capture};
+      if (!on) this.__on = [o];
+      else on.push(o);
+    };
+  }
+
+  function selection_on(typename, value, capture) {
+    var typenames = parseTypenames(typename + ""), i, n = typenames.length, t;
+
+    if (arguments.length < 2) {
+      var on = this.node().__on;
+      if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
+        for (i = 0, o = on[j]; i < n; ++i) {
+          if ((t = typenames[i]).type === o.type && t.name === o.name) {
+            return o.value;
+          }
+        }
+      }
+      return;
+    }
+
+    on = value ? onAdd : onRemove;
+    if (capture == null) capture = false;
+    for (i = 0; i < n; ++i) this.each(on(typenames[i], value, capture));
+    return this;
+  }
+
+  function dispatchEvent(node, type, params) {
+    var window = defaultView(node),
+        event = window.CustomEvent;
+
+    if (typeof event === "function") {
+      event = new event(type, params);
+    } else {
+      event = window.document.createEvent("Event");
+      if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
+      else event.initEvent(type, false, false);
+    }
+
+    node.dispatchEvent(event);
+  }
+
+  function dispatchConstant(type, params) {
+    return function() {
+      return dispatchEvent(this, type, params);
+    };
+  }
+
+  function dispatchFunction(type, params) {
+    return function() {
+      return dispatchEvent(this, type, params.apply(this, arguments));
+    };
+  }
+
+  function selection_dispatch(type, params) {
+    return this.each((typeof params === "function"
+        ? dispatchFunction
+        : dispatchConstant)(type, params));
+  }
+
+  var root = [null];
+
+  function Selection(groups, parents) {
+    this._groups = groups;
+    this._parents = parents;
+  }
+
+  function selection() {
+    return new Selection([[document.documentElement]], root);
+  }
+
+  Selection.prototype = selection.prototype = {
+    constructor: Selection,
+    select: selection_select,
+    selectAll: selection_selectAll,
+    filter: selection_filter,
+    data: selection_data,
+    enter: selection_enter,
+    exit: selection_exit,
+    join: selection_join,
+    merge: selection_merge,
+    order: selection_order,
+    sort: selection_sort,
+    call: selection_call,
+    nodes: selection_nodes,
+    node: selection_node,
+    size: selection_size,
+    empty: selection_empty,
+    each: selection_each,
+    attr: selection_attr,
+    style: selection_style,
+    property: selection_property,
+    classed: selection_classed,
+    text: selection_text,
+    html: selection_html,
+    raise: selection_raise,
+    lower: selection_lower,
+    append: selection_append,
+    insert: selection_insert,
+    remove: selection_remove,
+    clone: selection_clone,
+    datum: selection_datum,
+    on: selection_on,
+    dispatch: selection_dispatch
+  };
+
+  function select(selector) {
+    return typeof selector === "string"
+        ? new Selection([[document.querySelector(selector)]], [document.documentElement])
+        : new Selection([[selector]], root);
+  }
+
+  /*
+  Uses the Mediawiki API to display a list of recent images and a link to
+  the page where the image has been used/placed.
+
+  Makes use of the following API calls:
+
+  * https://www.mediawiki.org/wiki/API:Allimages
+  * https://www.mediawiki.org/wiki/API:Imageinfo
+  * https://www.mediawiki.org/wiki/API:Imageusage
+  */
+  var PAGE_COUNT = 25; /* how many edits to show per load*/
+  var main = select("#content"),
+      //baseurl = "/mw/api.php?action=query&list=allpages&rclimit=25&rcnamespace=0&rctoponly=1&format=json&formatversion=2&rcshow=!minor|!bot|!redirect|!anon",
+      //baseurl = "/mw/api.php?action=query&generator=categorymembers&gcmtitle=Category:B1&prop=categories&cllimit=max&gcmlimit=max|!bot|!redirect|!anon",
+	baseurl="/mw/api.php?action=query&generator=categorymembers&gcmtitle=Cat%E9gorie:Actualit%E9s&prop=categories&cllimit=max&gcmlimit=max",
+      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;
+      while (count < PAGE_COUNT) {
+           console.log("starting loop", "count", count, "url", url);
+          let data = await get_json(url),
+              recentchanges = data.query.recentchanges;
+          console.log("recentchanges", recentchanges);
+          let items = main.selectAll("div.edit")
+              .data(recentchanges, d=>d.title)
+              .enter()
+              .append("div")
+              .attr("class", "edit")
+              .append("a")
+              .attr("href", d=>url_for_title(d.title))
+              .attr("target", "wikiframe")
+              .text(d=>d.title);
+
+          if (data.continue) {
+              url = baseurl+"&rccontinue="+data.continue.rccontinue;
+          } else {
+              return;
+          }
+          count += recentchanges.length;
+      }
+  }
+  document.addEventListener("DOMContentLoaded", load);
+  document.querySelector("a#more").addEventListener("click", function (e) {
+      e.preventDefault();
+      load();
+  });
+
+}());

special/recentnews/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>erg: modifications récentes</title>
+<meta charset="utf-8">
+<link rel="stylesheet" type="text/css" href="/m/style.css">
+<style>
+    body {
+        margin: 1.5em;
+        margin-left: 40px;
+        margin-top: 2.5em;
+        background: #333;
+        color: white;
+        overflow: auto;
+	font-family: Vega;
+	font-size: 17px;
+    }
+    h1 {
+        margin: 0;
+        font-family: Combined;
+        font-size: 1.5em;
+    }
+    #content {
+        margin-top: 1em;
+    }
+    div#footer {
+        clear: both;
+        text-align: center;
+        margin-top: 1em;
+    }
+    a {
+        color: white;
+        text-decoration: none;
+    }
+    a:hover {
+        text-decoration: underline;
+    }
+    a#more {
+        color: black;
+        text-decoration: none;
+        background: white;
+        padding: 5px;
+    }
+    div.edit {
+        margin-bottom: 1em;
+    }
+</style>
+</head>
+<body>
+    <h1>Modifications récentes</h1>
+<div id="content"></div>
+<div id="footer"><a href="#" id="more">en plus&hellip;</a></div>
+<script src="dist/recentchanges.js"></script>
+</body>
+</html>

special/recentnews/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/recentnews/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/recentchanges.js',
+  output: {
+    file: 'dist/recentchanges.js',
+    format: 'iife',
+    name: 'app'
+  },
+  plugins: [
+    resolve(), 
+    commonjs()
+  ]
+}];

special/recentnews/src/recentchanges.js

@@ -0,0 +1,55 @@
+import { selectAll, select } from 'd3-selection';
+/*
+Uses the Mediawiki API to display a list of recent images and a link to
+the page where the image has been used/placed.
+
+Makes use of the following API calls:
+
+* https://www.mediawiki.org/wiki/API:Allimages
+* https://www.mediawiki.org/wiki/API:Imageinfo
+* https://www.mediawiki.org/wiki/API:Imageusage
+*/
+var PAGE_COUNT = 25; /* how many edits to show per load*/
+var main = select("#content"),
+    baseurl = "/mw/api.php?action=query&list=recentchanges&rclimit=25&rcnamespace=0&rctoponly=1&format=json&formatversion=2&rcshow=!minor|!bot|!redirect|!anon",
+    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;
+    while (count < PAGE_COUNT) {
+        // console.log("starting loop", "count", count, "url", url);
+        let data = await get_json(url),
+            recentchanges = data.query.recentchanges;
+        console.log("recentchanges", recentchanges);
+        let items = main.selectAll("div.edit")
+            .data(recentchanges, d=>d.title)
+            .enter()
+            .append("div")
+            .attr("class", "edit")
+            .append("a")
+            .attr("href", d=>url_for_title(d.title))
+            .attr("target", "wikiframe")
+            .text(d=>d.title);
+
+        if (data.continue) {
+            url = baseurl+"&rccontinue="+data.continue.rccontinue;
+        } else {
+            return;
+        }
+        count += recentchanges.length;
+    }
+}
+document.addEventListener("DOMContentLoaded", load);
+document.querySelector("a#more").addEventListener("click", function (e) {
+    e.preventDefault();
+    load();
+});

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>

splitscreen.css

@@ -0,0 +1,312 @@
+/* F O N T E S */
+@font-face {
+    font-family: "Combined";
+    src: url('/typo/Combined/combined.otf');  
+    font-style:   normal;
+    font-weight:  normal;
+}
+
+@font-face {
+    font-family: 'combinedregular';
+    src: url('/typo/Combined/web/combined.eot');
+    src: url('/typo/Combined/web/combined.eot?#iefix') format('embedded-opentype'),
+         url('/typo/Combined/web/combined.woff2') format('woff2'),
+         url('/typo/Combined/web/combined.woff') format('woff'),
+         url('/typo/Combined/web/combined.ttf') format('truetype'),
+         url('/typo/Combined/web/combined.svg#combinedregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+body {
+    margin: 0;
+    padding: 0;
+    background: #f1f2f3;
+    overflow: hidden;
+}
+
+
+.links line {
+  stroke: #aaa;
+  /*stroke: none;*/
+}
+
+.links line.active2 {
+    stroke: magenta;
+}
+
+.links line.history {
+    stroke: purple;
+}
+
+.active {
+    stroke: magenta;
+}
+
+.category circle {
+    fill: cyan;
+}
+
+.web circle {
+    fill: purple;
+}
+
+.news circle {
+    fill: lightgray;
+}
+
+.template circle {
+    fill: lightgreen;
+}
+
+.discussion circle {
+    fill: aqua;
+}
+
+
+
+svg {
+    position: absolute;
+    left: 0; top: 0; right: 0; bottom: 0;
+    font: 10px sans-serif;
+}
+
+svg g.page {
+    cursor: pointer;
+}
+
+svg g.page text {
+    visibility: hidden;
+    fill: #222;
+    font: 9px sans-serif;
+}
+
+svg g.active text {
+    /*visibility: visible;*/
+}
+
+svg g.mouse text {
+    visibility: visible;
+}
+
+use {
+    fill: #EEE;
+    stroke: black;
+}
+
+.highlight use {
+    fill: #FFF;
+    stroke: cyan;
+}
+
+.active use {
+/*  animation-transform: 2;*/
+  animation-duration: 2s;
+  animation-name: pulse;
+  animation-iteration-count: infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1, 1);
+  }
+  50% {
+    transform: scale(1.5, 1.5);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+.active use {
+    fill: #FFF;
+    stroke: magenta;
+}
+
+.active text {
+    stroke: none;
+}
+
+.active2 use {
+    fill: #FFF;
+    stroke: magenta;
+}
+
+
+
+/* Categories */
+
+#cats .body {
+  display: none;
+}
+
+#cats .placeholder {
+  min-width: 100%;
+  text-align: center;
+  color: gray;
+  font-weight: bold;
+  font-size: 12px;
+}
+#cats.expanded .body {
+  display: block;
+}
+
+#cats.expanded .placeholder {
+  display: none;
+}
+
+#cats {
+    /*display: none;*/
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    background: #FFFFFFFF;
+    border-radius: 24px;
+    padding: 10px;
+    font-size: 12px;
+    min-width: 16px;
+    min-height: 16px;
+    box-shadow: 0 3px 3px 3px rgba(255, 0, 255, 0.44);
+}
+
+#cats div.cat span.icon {
+    position: relative;
+    top: 4px;
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    background-repeat: no-repeat;
+    margin-right: 4px;
+    background-position: center center;
+}
+#cats div.cat span.count {
+  display: none;
+    padding: 0px 3px;
+    background: #DDD;
+    color: #444;
+    font-size: 10px;
+    margin-left: 4px;
+}
+#cats div.cat a {
+    color: black;
+    text-decoration: none;
+}
+#cats div.cat.highlight a {
+    color: cyan;
+}
+#cats hr {
+  color: white;
+}
+
+
+#page {
+  position: absolute;
+  left: 0; right: 50%;
+  top: 0;
+  bottom: 0;
+}
+
+#wikiframediv {
+    position: absolute;
+    left: 50%; top: 0;
+    right: 0; bottom: 0;
+}
+#wikiframediv iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* MEDIAWIKI PAGE */
+.header-container {
+  display: none !important;
+}
+
+iframe form.header {
+  display: none;
+}
+/*ul#page-actions {
+  display: none;
+}
+*/
+a.talk {
+  display:none;
+}
+
+
+
+
+
+
+/* control positioning */
+
+.leaflet-control {
+  position: relative;
+  z-index: 800;
+  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+  pointer-events: auto;
+  font-size: 12px;
+}
+.leaflet-control {
+  float: left;
+  clear: both;
+  }
+
+/* general toolbar styles */
+
+.leaflet-bar {
+  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+}
+.leaflet-bar a,
+.leaflet-bar a:hover {
+  background-color: #fff;
+  border-bottom: 1px solid #ccc;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: black;
+  }
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  display: block;
+}
+.leaflet-bar a:hover {
+  background-color: #f4f4f4;
+  }
+.leaflet-bar a:first-child {
+  }
+.leaflet-bar a:last-child {
+  border-bottom: none;
+  }
+.leaflet-bar a.leaflet-disabled {
+  cursor: default;
+  background-color: #f4f4f4;
+  color: #bbb;
+  }
+
+
+/* zoom controls */
+
+.zoom-controls {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  z-index: 10000;
+}
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+  font: Combined;
+  font-size: 24px;
+  line-height: 20px;
+  text-indent: 1px;
+  box-shadow: 0 3px 3px 3px rgba(255, 0, 255, 0.44);
+  background-color: #ffffff;
+}
+

splitscreen.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>école de recherche graphique</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="splitscreen.css">
+</head>
+<body>
+    <div id="page">
+        <svg id="svg"></svg>
+        <div id="cats">
+            <div class="body"></div>
+            <div class="placeholder">?</div>
+        </div>
+    </div>
+    <div id="wikiframediv">
+        <iframe id="wikiframe" src="/mw"></iframe>
+    </div>
+
+<div class="zoom-controls">
+    <div class="leaflet-control-zoom leaflet-bar leaflet-control">
+        <a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a>
+        <a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">-</a>
+    </div>  
+</div>
+
+</body>
+<script type="text/javascript" src="dist/app.js"></script>
+<script src="dist/index.js"></script>
+</html>

src/app.js

@@ -0,0 +1,2 @@
+import { Map } from './wikimap.js';
+export { Map };

src/forcenet.js

@@ -0,0 +1,267 @@
+import { event, select, selectAll} from 'd3-selection';
+import { values, set, map } from 'd3-collection';
+import { drag } from 'd3-drag';
+import { zoom } from 'd3-zoom';
+import { forceSimulation, forceLink, forceManyBody, forceCenter, forceX, forceY, forceRadial } from 'd3-force';
+// import { Wiki, Page } from './wiki.js';
+import EventEmitter from 'eventemitter3';
+// import { json } from 'd3-fetch';
+
+export class ForceNet {
+
+    constructor (symbols) {
+        var width = 600,
+            height = 600;
+
+        this.symbols = symbols || {};
+        this.events = new EventEmitter();
+        this.active_page = null;
+        // this.nodes = {};
+        this.simulation = forceSimulation()
+            //.velocityDecay(0.1)
+		    .force("link", forceLink().id(d => d.title).distance(800))
+            .force("charge", forceManyBody().distanceMin(800))
+            .force("radial", forceRadial(180, width/2, height/2));
+            // .force("center", forceCenter(width / 2, height / 2));
+        this.svg = null;
+        // this.historylinks = {};
+    }
+
+    on (message, callback, context) {
+        this.events.on(message, callback, context);
+    }
+
+    init_svg (svg) {
+        this.svg = select(svg || "svg");
+        this.zoom = zoom()
+            .scaleExtent([1 / 16, 16])
+            .on("zoom", () => {
+              this.content.attr("transform", event.transform);
+              // console.log("transform", event.transform, this.content.attr("transform"));
+            });
+        this.rect = this.svg.append("rect")
+            .attr("width", 1000)
+            .attr("height", 1000)
+            .style("fill", "none")
+            .style("pointer-events", "all")
+            .call(this.zoom);
+        this.content = this.svg.append("g")
+            .attr("id", "content"),
+        this.linksg = this.content.append("g")
+            .attr("class", "links");
+        this.nodesg = this.content.append("g")
+            .attr("class", "nodes");
+    }
+
+    dragstarted (d) {
+        if (!event.active) this.simulation.alphaTarget(0.3).restart();
+        d.fx = d.x;
+        d.fy = d.y;
+    }
+
+    dragged (d) {
+        d.fx = event.x;
+        d.fy = event.y;
+    }
+
+    dragended(d) {
+        if (!event.active) this.simulation.alphaTarget(0);
+        d.fx = null;
+        d.fy = null;
+    }
+
+    link_key (a, b) {
+        return (a < b) ? ("link_"+a+"_"+b) : ("link_"+b+"_"+a);
+    }
+
+    /*
+    link_key (p1, p2) {
+        return (p1.title < p2.title) ?
+            ("link_"+p1.title+"_"+p2.title) :
+            ("link_"+p2.title+"_"+p1.title);
+    }
+    */
+    make_link (p1, p2) {
+        return (p1.title < p2.title) ?
+            {source: p1, target: p2 } :
+            {source: p2, target: p1 };        
+    }
+
+    register_link (from_page, to_page) {
+        var lkey = this.link_key(from_page, to_page);
+        if (this.links[lkey] === undefined) {
+            this.links[lkey] = this.make_link(from_page, to_page);
+        }
+    }
+
+
+
+    get_symbol (d, def) {
+        return "symbols.svg#Main";
+        /*
+        for (var i=0, l=d.cats.length; i<l; i++) {
+            if (this.symbols[d.cats[i]]) {
+                return this.symbols[d.cats[i]];
+            }
+        }
+        return this.symbols.default || def;
+        */
+    }
+
+    update_graph (graph) {
+        console.log("UPDATE GRAPH", graph.nodes.length, graph.links.length);
+        var link = this.linksg.selectAll("line")
+                .data(graph.links, d => { return this.link_key(d.source.title, d.target.title) });
+        var link_enter = link.enter()
+            .append("line");
+
+        link.exit().each(d => {
+            d.source.linked = false;
+            d.target.linked = false;
+        }).remove();
+        
+        link_enter.merge(link).each(d => {
+                d.source.linked = true;
+                d.target.linked = true;
+            });
+
+        var node = this.nodesg
+            .selectAll("g.page")
+            .data(graph.nodes, function (d) { return d.title });
+        
+        node.exit().remove();
+
+        var that = this;
+        var node_enter = node.enter().append("g")
+            .attr("class", "page")
+            // .attr("class", d=>"page "+this.wiki.get_ns_classname(d.ns))
+            .on("click", function(d) {
+                that.events.emit("nodeclick", d, this);
+                // this.set_active_node(d.title);
+            })
+            .on("mouseover", function (d) {
+                // console.log("mouseover", this);
+                select(this).classed("mouse", true);
+            })
+            .on("mouseout", function (d) {
+                // console.log("mouseout", this);
+                select(this).classed("mouse", false);
+            })
+            .call(drag()
+                .on("start", this.dragstarted.bind(this))
+                .on("drag", this.dragged.bind(this))
+                .on("end", this.dragended.bind(this)));
+
+        node_enter.append("use")
+            .attr("xlink:href", d => this.get_symbol(d, "default"))
+            .attr("class", "testcolor");
+
+            // {
+            //     for (var i=0, l=d.cats.length; i<l; i++) {
+            //         if (this.symbols[d.cats[i]]) {
+            //             return this.symbols[d.cats[i]];
+            //         }
+            //     }
+            //     return this.symbols.default || "default";
+            // });
+
+        // node_enter.append("circle")
+        //     .attr("r", 6);
+
+        node_enter.append("text")
+            .text(d => d.title)
+            .attr("x", 10);
+
+        //node_enter.append("title")
+        //   .text(function(d) { return d.title; });
+
+        node = node_enter.merge(node);
+        link = link_enter.merge(link);
+
+        node.classed("active", d=>d.active);
+
+
+        this.simulation
+            .nodes(graph.nodes)
+            .on("tick", ticked);
+
+        this.simulation.force("link")
+            .links(graph.links);
+
+        this.simulation.force("radial").radius(d => d.linked ? null : 200);
+
+        function ticked() {
+            link
+                .attr("x1", function(d) { return d.source.x; })
+                .attr("y1", function(d) { return d.source.y; })
+                .attr("x2", function(d) { return d.target.x; })
+                .attr("y2", function(d) { return d.target.y; });
+
+            // node
+            //     .attr("cx", function(d) { return d.x; })
+            //     .attr("cy", function(d) { return d.y; });
+            node
+                .attr("transform", d => `translate(${d.x},${d.y})`);
+        }
+
+        // document.querySelector("#page").style.background = "purple";
+        // return;
+
+        this.update_nodes();
+        this.update_forces();
+        // this.simulation.alphaTarget(0.3).restart();
+    }
+
+    update_nodes () {
+        var nodes = this.nodesg.selectAll("g.page");
+        console.log("update_nodes", nodes.size());
+        nodes.classed("active", d=>d.active);
+        nodes.classed("active2", d=>d.active2);
+        nodes.classed("highlight", d=>d.highlight);
+        nodes.sort((a, b) => {
+            // console.log("sort", a, b);
+            var x = a.active ? 10 : (a.active2 ? 5 : 0),
+                y = b.active ? 10 : (b.active2 ? 5 : 0);
+            return x - y; 
+        });
+        var links = this.linksg.selectAll("line");
+        links.classed("active2", d=>d.active2);        
+        links.classed("history", d=>d.type == "history");        
+        links.sort((a, b) => {
+            // console.log("sort", a, b);
+            var x = a.active2 ? 10 : (a.history ? 5 : 0),
+                y = b.active2 ? 10 : (b.history ? 5 : 0);
+            return x - y; 
+        });
+    }
+
+    update_forces () {
+        var force = this.simulation.force("link");
+        console.log("update_forces:force", force);
+        this.simulation.force("link").strength(d => {
+            if (d.source.active || d.target.active) {
+                return 1;
+            } else {
+                return 1;
+                // same as d3.force's defaultStrength
+                // return 0.5 * (1 / Math.min(d.source.count, d.target.count)); 
+            }
+        });
+        this.simulation.alphaTarget(0.3).restart();
+    }
+
+    activate_linked_nodes (page, active) {
+        // deactivate linked links/nodes
+        for (let i=0, l=this.links.length; i<l; i++) {
+            let link = this.links[i];
+            if (link.source == page || link.target == page) {
+                link.active2 = active;
+                link.source.active2 = active;
+                link.target.active2 = active;
+            }
+        }        
+    }
+
+
+}
+

src/legend.json

@@ -0,0 +1,42 @@
+[
+   {
+      "key" : "Orientations",
+      "symbol" : "symbols.svg#Orientations",
+      "icon": "img/Orientations.png"
+   },
+   {
+      "key" : "Ateliers pluridisciplinaires",
+      "symbol" : "symbols.svg#Ateliers_pluridisciplinaires",
+      "icon" : "img/Ateliers_pluridisciplinaires.png"
+   },
+   {
+      "key" : "Cours de soutien spécifique",
+      "symbol" : "symbols.svg#Cours_de_soutien_specifique",
+      "icon" : "img/Cours_de_soutien_specifique.png"
+   },
+   {
+      "key" : "Cours techniques",
+      "symbol" : "symbols.svg#Cours_techniques",
+      "icon" : "img/Cours_techniques.png"
+   },
+   {
+      "key" : "Cours théoriques",
+      "symbol" : "symbols.svg#Cours_theoriques",
+      "icon" : "img/Cours_theoriques.png"
+   },
+   {
+      "key" : "Enseignant·e·s",
+      "symbol" : "symbols.svg#Enseignant__e__s",
+      "icon" : "img/Enseignants.png"
+   },
+   {
+      "key" : "Actualités",
+      "symbol" : "symbols.svg#Actualites",
+      "icon" : "img/Actualites.png"
+   },
+   {
+      "key" : "default",
+      "symbol" : "symbols.svg#Main",
+      "icon" : "img/Main.png"
+   }
+]

src/mobilecheck.js

@@ -0,0 +1,7 @@
+// https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
+export function mobilecheck () {
+  var check = false;
+  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+  return check;
+};
+

src/symbols.original.svg

@@ -0,0 +1,240 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32.387501mm"
+   height="32.356251mm"
+   viewBox="0 0 32.3875 32.356251"
+   version="1.1"
+   id="svg5507"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="symbols.01.svg"
+   enable-background="new">
+  <defs
+     id="defs5501" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="-9.4575528"
+     inkscape:cy="99.623528"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer3"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1366"
+     inkscape:window-height="704"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5504">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Main"
+     style="display:none">
+    <circle
+       r="5.0396824"
+       cy="1.4819558"
+       cx="0.43864226"
+       style="fill:#ffffff;fill-opacity:1;stroke:#020202;stroke-width:2.01587296;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none"
+       id="Main"
+       inkscape:label="#path8162" />
+  </g>
+  <g
+     inkscape:label="Orientations"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:none">
+    <g
+       id="Orientations"
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:0.99615389"
+       transform="matrix(0.404233,0,0,0.404233,36.032029,1.0220986)">
+      <path
+         id="Orientations-0"
+         d="m -87.8577,-14.01912 c -8.05454,0 -14.59375,6.50796 -14.59375,14.5625 0,8.05454 6.53921,14.59375 14.59375,14.59375 8.05454,0 14.59375,-6.53921 14.59375,-14.59375 0,-8.05454 -6.53921,-14.5625 -14.59375,-14.5625 z"
+         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path6386"
+         d="m -87.7327,-7.603495 c -1.108176,0 -2.164768,0.243856 -3.125,0.65 -0.960232,0.406144 -1.823784,0.998784 -2.55,1.725 -0.726216,0.726216 -1.318856,1.589768 -1.725,2.55 -0.406144,0.960232 -0.625,2.016824 -0.625,3.125 0,1.108176 0.218856,2.139768 0.625,3.1 0.406144,0.960232 0.998784,1.848784 1.725,2.575 0.726216,0.726216 1.589768,1.293856 2.55,1.7 0.960232,0.406144 2.016824,0.65 3.125,0.65 1.108176,0 2.164768,-0.243856 3.125,-0.65 0.960232,-0.406144 1.823784,-0.973784 2.55,-1.7 0.726216,-0.726216 1.318856,-1.614768 1.725,-2.575 0.406144,-0.960232 0.625,-1.991824 0.625,-3.1 0,-1.108176 -0.218856,-2.164768 -0.625,-3.125 -0.406144,-0.960232 -0.998784,-1.823784 -1.725,-2.55 -0.726216,-0.726216 -1.589768,-1.318856 -2.55,-1.725 -0.960232,-0.406144 -2.016824,-0.65 -3.125,-0.65 z"
+         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.55999994;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Ateliers_pluridisciplinaires"
+     style="display:inline">
+    <g
+       transform="matrix(0.71815477,0,0,0.71815477,65.187921,-29.508788)"
+       id="Ateliers_pluridisciplinaires">
+      <circle
+         r="19.208878"
+         cy="40.264759"
+         cx="116.73087"
+         transform="matrix(0.36441483,0,0,0.36441483,-132.69908,28.796006)"
+         id="path6780"
+         style="fill:#ffffff;fill-opacity:1;stroke:#010001;stroke-width:16.4647522;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none" />
+      <g
+         id="g8172"
+         transform="matrix(2.1333332,0,0,-2.1333332,13.499857,367.42774)"
+         style="fill:#020002;fill-opacity:0.99615389;stroke:#030003;stroke-opacity:0.98846154">
+        <path
+           transform="matrix(0.05856667,0,0,-0.05856667,-55.427399,154.21379)"
+           style="fill:#020002;fill-opacity:0.99615389;stroke:#030003;stroke-width:0;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.98846154;marker-start:none"
+           d="M 135.93975,40.264759 A 19.208878,19.208878 0 0 1 116.73087,59.473637 19.208878,19.208878 0 0 1 97.521996,40.264759 19.208878,19.208878 0 0 1 116.73087,21.055882 19.208878,19.208878 0 0 1 135.93975,40.264759 Z"
+           id="path8174" />
+      </g>
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer4"
+     inkscape:label="Cours_de_soutien_a_l'orientation"
+     style="display:none">
+    <g
+       id="Cours_de_soutien_a_l'orientation"
+       style="stroke:#000000;stroke-opacity:0.99615389"
+       transform="matrix(0.37928334,0,0,0.37928334,34.100402,17.553674)">
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path8166"
+         d="m 357.75,444.40625 c -7.15954,0 -12.96875,5.77796 -12.96875,12.9375 0,7.15954 5.80921,12.96875 12.96875,12.96875 7.15954,0 12.9375,-5.80921 12.9375,-12.96875 0,-7.15954 -5.77796,-12.9375 -12.9375,-12.9375 z"
+         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:6.48174286;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6363"
+         d="m 357.75,454.125 c 0.44747,0 0.86227,0.086 1.25,0.25 0.38773,0.164 0.73801,0.39426 1.03125,0.6875 0.29324,0.29324 0.5235,0.64352 0.6875,1.03125 0.164,0.38773 0.25,0.80253 0.25,1.25 0,0.44747 -0.086,0.89352 -0.25,1.28125 -0.164,0.38773 -0.39426,0.73801 -0.6875,1.03125 -0.29324,0.29324 -0.64352,0.5235 -1.03125,0.6875 -0.38773,0.164 -0.80253,0.25 -1.25,0.25 -0.44747,0 -0.89352,-0.086 -1.28125,-0.25 -0.38773,-0.164 -0.73801,-0.39426 -1.03125,-0.6875 -0.29324,-0.29324 -0.5235,-0.64352 -0.6875,-1.03125 -0.164,-0.38773 -0.25,-0.83378 -0.25,-1.28125 0,-0.44747 0.086,-0.86227 0.25,-1.25 0.164,-0.38773 0.39426,-0.73801 0.6875,-1.03125 0.29324,-0.29324 0.64352,-0.5235 1.03125,-0.6875 0.38773,-0.164 0.83378,-0.25 1.28125,-0.25 z"
+         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:6.48174286;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer5"
+     inkscape:label="Cours_de_soutien_specifique"
+     style="display:none">
+    <g
+       id="Cours_de_soutien_specifique"
+       style="fill:#ffffff;fill-opacity:0.99615389;stroke:#020002;stroke-opacity:0.99615389"
+       transform="matrix(0.41178012,0,0,0.41178012,37.56977,36.122666)">
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6358"
+         d="m 356.1875,401.09375 c -8.05454,0 -14.59375,6.53921 -14.59375,14.59375 0,8.05454 6.53921,14.5625 14.59375,14.5625 8.05454,0 14.5625,-6.50796 14.5625,-14.5625 0,-8.05454 -6.50796,-14.59375 -14.5625,-14.59375 z"
+         style="fill:#ffffff;fill-opacity:0.99615389;stroke:#020002;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6329"
+         d="m 356.3125,413.9375 c -0.44744,0 -0.86303,0.17553 -1.15625,0.46875 -0.29322,0.29322 -0.46875,0.70881 -0.46875,1.15625 0,0.44744 0.17553,0.83178 0.46875,1.125 0.29322,0.29322 0.70881,0.46875 1.15625,0.46875 0.44744,0 0.83178,-0.17553 1.125,-0.46875 0.29322,-0.29322 0.46875,-0.67756 0.46875,-1.125 0,-0.44744 -0.17553,-0.86303 -0.46875,-1.15625 -0.29322,-0.29322 -0.67756,-0.46875 -1.125,-0.46875 z"
+         style="fill:#ffffff;fill-opacity:0.99615389;stroke:#020002;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6327"
+         d="m 356.3125,413.9375 c 0.44744,0 0.83178,0.17553 1.125,0.46875 0.29322,0.29322 0.46875,0.70881 0.46875,1.15625 0,0.44744 -0.17553,0.83178 -0.46875,1.125 -0.29322,0.29322 -0.67756,0.46875 -1.125,0.46875 -0.44744,0 -0.86303,-0.17553 -1.15625,-0.46875 -0.29322,-0.29322 -0.46875,-0.67756 -0.46875,-1.125 0,-0.44744 0.17553,-0.86303 0.46875,-1.15625 0.29322,-0.29322 0.70881,-0.46875 1.15625,-0.46875 z"
+         style="fill:#ffffff;fill-opacity:0.99615389;stroke:#020002;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6324"
+         d="m 356.3125,413.9375 c -0.44744,0 -0.86303,0.17553 -1.15625,0.46875 -0.29322,0.29322 -0.46875,0.70881 -0.46875,1.15625 0,0.44744 0.17553,0.83178 0.46875,1.125 0.29322,0.29322 0.70881,0.46875 1.15625,0.46875 0.44744,0 0.83178,-0.17553 1.125,-0.46875 0.29322,-0.29322 0.46875,-0.67756 0.46875,-1.125 0,-0.44744 -0.17553,-0.86303 -0.46875,-1.15625 -0.29322,-0.29322 -0.67756,-0.46875 -1.125,-0.46875 z"
+         style="fill:#ffffff;fill-opacity:0.99615389;stroke:#020002;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer6"
+     inkscape:label="Cours_techniques"
+     style="display:none">
+    <g
+       id="Cours_techniques"
+       transform="matrix(0.42076685,0,0,-0.42076685,-14.006109,85.183824)"
+       inkscape:label="#g3142"
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1">
+      <title
+         id="title3278">template</title>
+      <path
+         inkscape:connector-curvature="0"
+         id="path87"
+         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.12598443;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:2.23606801;stroke-dasharray:none;stroke-opacity:1"
+         d="m 49.067296,199.32385 c 0,-8.21904 -6.662847,-14.88189 -14.881888,-14.88189 -8.219041,0 -14.881889,6.66285 -14.881889,14.88189 0,8.21904 6.662848,14.88189 14.881889,14.88189 8.219041,0 14.881888,-6.66285 14.881888,-14.88189 z" />
+      <g
+         id="g3119"
+         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1">
+        <path
+           d="m 44.815326,199.32385 c 0,-5.87075 -4.759174,-10.62992 -10.629918,-10.62992 -5.870744,0 -10.629921,4.75917 -10.629921,10.62992 0,5.87074 4.759177,10.62992 10.629921,10.62992 5.870744,0 10.629918,-4.75918 10.629918,-10.62992 z"
+           style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.12598443;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:2.23606801;stroke-dasharray:none;stroke-opacity:1"
+           id="path85"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer7"
+     inkscape:label="Cours_theoriques"
+     style="display:none">
+    <path
+       d="m 6.7797495,1.3385787 c 0,3.5225563 -2.8555966,6.378149 -6.37815062,6.378149 -3.52255578,0 -6.37814838,-2.8555927 -6.37814838,-6.378149 0,-3.5225563 2.8555926,-6.3781491 6.37814838,-6.3781491 3.52255402,0 6.37815062,2.8555928 6.37815062,6.3781491 z"
+       style="fill:#ffffff;fill-opacity:1;stroke:#010001;stroke-width:0.80359638;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2.23606801;stroke-dasharray:2.41078917, 2.41078917;stroke-dashoffset:0;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:none"
+       id="Cours_theoriques"
+       inkscape:connector-curvature="0"
+       inkscape:label="#path87-1"
+       mask="none" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer8"
+     inkscape:label="Enseignants"
+     style="display:none">
+    <path
+       sodipodi:type="star"
+       style="fill:#ffffff;fill-opacity:1;stroke:#020202;stroke-width:0.97391373;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="Enseignants"
+       sodipodi:sides="3"
+       sodipodi:cx="0.36393768"
+       sodipodi:cy="2.2478313"
+       sodipodi:r1="6.7946506"
+       sodipodi:r2="3.397325"
+       sodipodi:arg1="0.52606642"
+       sodipodi:arg2="1.573264"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="M 6.2398764,5.6596667 -5.5287678,5.6306258 0.38070444,-4.5467985 Z"
+       inkscape:transform-center-x="0.013378058"
+       inkscape:transform-center-y="2.6969222"
+       inkscape:label="#path3225-6-7-7" />
+  </g>
+</svg>

src/wiki.js

@@ -0,0 +1,217 @@
+
+// import fetchJsonp from 'fetch-jsonp';
+import { json } from 'd3-fetch';
+import { values, map } from 'd3-collection';
+
+var NS = {
+    main: 0,
+    discussion: 1,
+    template: 10,
+    category: 14,
+    news: 3106,
+    web: 3116
+}
+
+function strip_fragment (href) {
+    return href.replace(/#.?$/, '');
+}
+
+export class Wiki {
+    constructor (apiurl) {
+        this.apiurl = apiurl;
+        this.pages_by_title = {};
+        this.ns_names = {};
+        for (var key in NS) {
+            var nsid = NS[key];
+            this.ns_names[nsid] = key;
+        }
+        this.siteinfo = null;
+    }
+
+    get_nodes () {
+        var ret = values(this.pages_by_title);
+        ret = ret.filter(p => (!p.redirect && p.ns === 0));
+        return ret;
+    }
+
+    get_links () {
+        return values(this.links);
+    }
+
+    async init () {
+        await this.get_site_info();
+    }
+
+    async get_site_info () {
+        // https://en.wikipedia.org/w/api.php
+        var url = this.apiurl + "?action=query&meta=siteinfo&siprop=general&format=json&formatversion=2";
+        var data = await json(url);
+        // this.siteinfo = data.query.general;
+
+        this.server = data.query.general.server; // e.g. "http://activearchives.org"
+        this.articlepath = data.query.general.articlepath; // e.g. "/wiki/$1"
+        this.base = data.query.general.base; // e.g. "http://activearchives.org/wiki/Main_Page"
+        // this.sitename = data.query.general.sitename;
+        this.mainpage = data.query.general.mainpage;
+        this.wikibasepat = new RegExp(this.server+this.articlepath.replace(/\$1$/, "(.+)"));
+
+        url = this.apiurl + "?action=query&meta=siteinfo&siprop=namespaces&format=json&formatversion=2";
+        data = await json(url);
+        this.namespaces_by_id = data.query.namespaces;
+        this.namespaces_by_name = {};
+        values(this.namespaces_by_id).forEach(n => {
+            this.namespaces_by_name[n.name] = n;
+        });
+        // create special special entry
+        var special = { name: "Special", id: -17 };
+        this.namespaces_by_name["Special"] = special;
+        this.namespaces_by_id[-17] = special;
+
+    }
+
+    escapeTitle (title) {
+        return encodeURI(title.replace(/ /g, "_"));
+    }
+
+    unescapeTitle (title) {
+        return decodeURI(title.replace(/_/g, " "));
+    }
+
+    wiki_title_to_url (title) {
+        return this.server + this.articlepath.replace(/\$1$/, this.escapeTitle(title));
+    }
+
+    url_to_wiki_title (href) {
+        var m = this.wikibasepat.exec(strip_fragment(href));
+        if (m !== null) {
+            return this.unescapeTitle(m[1]);
+        }
+    }
+
+    /* sample siteinfo, see: http://activearchives.org/mw/api.php?action=query&meta=siteinfo&formatversion=2&format=json */
+
+    get_page (url) {
+        var title = this.url_to_wiki_title(url);
+        if (title) {
+            return this.get_page_by_title(title);
+        }
+    }
+
+    get_page_by_title (title) {
+        var p = this.pages_by_title[title];
+        if (p) {
+            return p;
+        } else {
+            var cpos = title.indexOf(":"),
+                name = title,
+                namespace = "";
+            if (cpos >= 0) {
+                namespace = title.substring(0, cpos);
+                name = title.substring(cpos+1);
+            }
+            p = new Page(this, {title: title, name: name, ns: this.namespaces_by_name[namespace].id});
+            this.pages_by_title[title] = p;
+            return p; 
+        }
+    }
+    page_for_object (n, merge_data) {
+        if (merge_data === undefined) { merge_data = true; }
+        var title = n.title,
+            p = this.pages_by_title[title];
+        if (p) {
+            if (merge_data) { p.merge_data(n); }
+            return p;
+        } else {
+            p = new Page(this, n);
+            this.pages_by_title[title] = p;
+            return p; 
+        }
+    }
+    get_ns_classname (nsid) {
+        // console.log("get_ns_classname", nsid, this.ns_names[nsid]);
+        var ret = this.ns_names[nsid];
+        console.log("classname", ret);
+        if (ret === undefined) { console.log("warning classname undefined for ns", nsid); }
+        return ret;
+    }
+    union (p1, p2) {
+        var union = map(p1, d=>d.title);
+        for (var i=0, l=p2.length; i<l; i++) {
+            var x = p2[i];
+            union.set(x.title, x);
+        }
+        return union.values();
+    }
+}
+
+export class Page {
+    constructor (wiki, node) {
+        this.wiki = wiki;
+        this.merge_data(node);
+    }
+    url () {
+        // return this.wiki.apiurl.replace("api.php", "index.php")+"/"+encodeURIComponent(this.title);
+        // return this.wiki.apiurl.replace("api.php", "index.php")+"/"+encodeURIComponent(this.title);
+        return this.wiki.wiki_title_to_url(this.title);
+    }
+    merge_data (node) {
+        for (var key in node) {
+            if (node.hasOwnProperty(key)) {
+                this[key] = node[key];
+            }
+        }        
+    }
+
+    // api.php?action=query&prop=categories&titles=Albert%20Einstein
+    async get_prop (pname, prefix) {
+        var ret = [];
+        var url = this.wiki.apiurl+"?action=query&format=json&formatversion=2&prop="+pname+"&titles="+encodeURIComponent(this.title);
+        while (true) {
+            var data = await json(url);
+            // var json = await data.json();
+            if (data.query.pages[0]) {
+                var p = data.query.pages[0];
+                // extract any missing page info
+                if (p.ns && !this.ns) { this.ns = p.ns; }
+                if (p.pageid && !this.pageid) { this.pageid = p.pageid; }
+            }
+            if (data.query.pages[0][pname]) {
+                ret.push.apply(ret, data.query.pages[0][pname]);
+            }
+            if (!data.continue) { break; }
+            url = this.wiki.apiurl+"?action=query&format=json&formatversion=2&prop="+pname+"&"+prefix+"continue="+data.continue[prefix+"continue"]+"&titles="+encodeURIComponent(this.title);
+        }
+        ret = ret.map(x => this.wiki.page_for_object(x));
+        // console.log("get_prop", pname, prefix, ret);
+        return ret;
+    }
+
+    async get_list (lname, prefix, appendstr) {
+        var ret = [];
+        var baseurl = this.wiki.apiurl+"?action=query&list="+lname+"&format=json&formatversion=2&"+prefix+"title="+encodeURIComponent(this.title)+(appendstr || "");
+        var url = baseurl;
+        while (true) {
+            var data = await json(url);
+            if (data.query[lname]) {
+                ret.push.apply(ret, data.query[lname]);
+            }
+            if (!data.continue) { break; }
+            url = baseurl+"&"+prefix+"continue="+data.continue[prefix+"continue"];
+        }
+        ret = ret.map(x => this.wiki.page_for_object(x));
+        // console.log("get_prop", pname, prefix, ret);
+        return ret;
+    }
+
+    async get_links () {
+        return await this.get_prop("links", "pl");
+    }
+
+    async get_linkshere () {
+        return await this.get_prop("linkshere", "lh");
+    }
+
+    async get_categorymembers () {
+        return await this.get_list("categorymembers", "cm", "&cmtype=page");
+    }
+}

src/wikimap.js

@@ -0,0 +1,596 @@
+import { event, select, selectAll} from 'd3-selection';
+import { values, set, map } from 'd3-collection';
+import { drag } from 'd3-drag';
+import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom';
+import { forceSimulation, forceLink, forceManyBody, forceCenter, forceX, forceY, forceRadial } from 'd3-force';
+import { Wiki, Page } from './wiki.js';
+import EventEmitter from 'eventemitter3';
+import { json } from 'd3-fetch';
+import { mobilecheck } from './mobilecheck.js';
+
+// import { ForceNet } from './forcenet.js';
+
+export class Map {
+
+    constructor (opts) {
+        var width = 600,
+            height = 600;
+        this.width = width;
+        this.height = height;
+        this.zoom_level = opts.zoom || 1.5;
+        this.apiurl = opts.apiurl;
+        this.categorylabel = opts.categorylabel || "Category";
+        this.symbols_src = opts.symbols;
+        this.categorydiv = select(opts.categorydiv);
+
+        this.wiki = new Wiki(this.apiurl);
+
+        this.events = new EventEmitter();
+        this.active_page = null;
+        // this.symbols = symbols;
+        // this.net = new ForceNet({});
+        // this.net.on("nodeclick", this.nodeclick.bind(this));
+        this.svg = null;
+        this.init_svg(opts.svg);
+        this.historylinks = {};
+        this.links = null;
+        this.highlight_category = null;
+        this.show_history = true;
+        this.loaded = false;
+        this.active_url = null;
+        this.active_page = null;
+
+        this.simulation = forceSimulation()
+            //.velocityDecay(0.1)
+            .force("link", forceLink().id(d => d.title))
+            .force("charge", forceManyBody())
+            .force("radial", forceRadial(180, width/2, height/2));
+            // .force("center", forceCenter(width / 2, height / 2));
+
+        this.all_links_by_key = {};
+    }
+
+    async init () {
+        this.symbols = await json(this.symbols_src);
+        await this.wiki.init();
+
+        // load categories & set their page symbols
+        for (let i=0, l=this.symbols.length; i<l; i++) {
+            let sym = this.symbols[i];
+            if (sym.key === "default") {
+                let page = this.wiki.get_page_by_title("Special:AllPages");
+                sym.page = page;
+            } else {
+                let cat = this.wiki.get_page_by_title(this.categorylabel+":"+sym.key);
+                sym.page = cat;
+                cat.pages = await cat.get_categorymembers();
+                // console.log("got cat pages", cat);
+                for (let j=0, jlen=cat.pages.length; j<jlen; j++) {
+                    let cp = cat.pages[j];
+                    cp.symbol = sym.symbol;
+                }
+            }
+        }
+
+        // create the categories
+        let cat = this.categorydiv
+            .selectAll("div.cat")
+            .data(this.symbols)
+            .enter()
+            .append("div")
+            .attr("class", "cat icon");
+        cat.append("span")
+            .attr("class", "icon")
+            .style("background-image", d => "url("+d.icon+")");
+        cat.append("a")
+            .attr("class", "label")
+            .html(d => d.key === "default" ? "Page" : d.key)
+            .attr("href", "#").on("click", d => {
+                event.preventDefault();
+                this.category_click(d);
+            })
+        cat.append("span").attr("class", "count").html(d => d.tcount)
+
+        var set_active_url_from_window = () => {
+            var title = this.wiki.unescapeTitle(window.location.hash.substring(1)),
+                page = this.wiki.get_page_by_title(title),
+                url = page.url();
+            console.log("wikimap init", page.title, url);
+            this.set_active_url(url);            
+        };
+        
+        this.loaded = true;
+        if (window.location.hash) {
+            set_active_url_from_window();
+        } else if (this.active_url) {
+            this.set_active_url(this.active_url);
+        }
+
+        window.addEventListener("hashchange", e => {
+            console.log("hashchange");
+            set_active_url_from_window()
+        });
+        /*
+        window.addEventListener("popstate", e => {
+            // console.log("popstate", e);
+            console.log("popstate: " + document.location + ", state: " + JSON.stringify(e.state));
+        })
+        */
+    }
+
+    on (message, callback, context) {
+        this.events.on(message, callback, context);
+    }
+
+    async json (src) {
+        // expose d3's json method
+        return await json(src);
+    }
+
+    init_svg (svg) {
+        this.svg = select(svg || "svg");
+        this.zoom = zoom()
+            .scaleExtent([1 / 16, 16])
+            .on("zoom", () => {
+              this.content.attr("transform", event.transform);
+              // console.log("transform", event.transform, this.content.attr("transform"));
+            })
+            .filter(function () {
+                // console.log("filter", event);
+                if (event.touches && event.touches.length == 1) {
+                    return false;
+                }
+                return true;
+            });
+
+        this.rect = this.svg.append("rect")
+            .attr("width", 1000)
+            .attr("height", 1000)
+            .style("fill", "none");
+        if (!mobilecheck()) {
+            this.rect.style("pointer-events", "all")
+                .call(this.zoom);            
+        }
+            
+        this.content = this.svg.append("g")
+            .attr("id", "content"),
+        this.linksg = this.content.append("g")
+            .attr("class", "links");
+        this.nodesg = this.content.append("g")
+            .attr("class", "nodes");
+
+            // DEBUGGING
+            this.svg.on("click", x => {
+                // console.log("svg click", event.target);
+                if (event.target == this.svg.node()) {
+                    console.log("(debug) BACKGROUND CLICK", this.active_page.x, this.active_page.y);
+                    this.centerOnItem(this.active_page);
+                }
+            })
+    }
+
+    dragstarted (d) {
+        if (!event.active) this.simulation.alphaTarget(0.3).restart();
+        // this.simulation.restart();
+        d.fx = d.x;
+        d.fy = d.y;
+    }
+
+    dragged (d) {
+        d.fx = event.x;
+        d.fy = event.y;
+    }
+
+    dragended(d) {
+        if (!event.active) this.simulation.alphaTarget(0);
+        d.fx = null;
+        d.fy = null;
+    }
+
+    /* Links */
+
+    link_key (p1, p2) {
+        return (p1.title < p2.title) ?
+            ("link_"+p1.title+"_"+p2.title) :
+            ("link_"+p2.title+"_"+p1.title);
+    }
+
+    make_link (p1, p2) {
+        return (p1.title < p2.title) ?
+            {source: p1, target: p2 } :
+            {source: p2, target: p1 };        
+    }
+
+    ensure_link (from_page, to_page) {
+        var lkey = this.link_key(from_page, to_page),
+            ret = this.all_links_by_key[lkey];
+        if (ret === undefined) {
+            ret = this.make_link(from_page, to_page);
+            this.all_links_by_key[lkey] = ret;
+        }
+        return ret;
+    }
+
+    // function called on iframe load
+    async set_active_url (url) {
+        console.log("wikimap.set_active_url", url);
+        this.active_url = url;        
+        if (this.loaded) {
+            var page = this.wiki.get_page(this.active_url);
+            if (page) {
+                // console.log("calling replaceState", page.title);
+                window.history.replaceState (null, null, "#"+this.wiki.escapeTitle(page.title));
+                // window.location.hash = this.wiki.escapeTitle(page.title);
+                this.set_active_page(page);
+            } else {
+                console.log("wikimap: set_active_url: NO PAGE FOR", url);
+            }
+        }
+    }
+
+    linked_nodes_set_active (page, active) {
+        // deactivate linked links/nodes
+        for (var key in this.all_links_by_key) {
+            if (this.all_links_by_key.hasOwnProperty(key)) {
+                var link = this.all_links_by_key[key];
+                if (link.source == page || link.target == page) {
+                    link.active2 = active;
+                    link.source.active2 = active;
+                    link.target.active2 = active;
+                }
+            }
+        }
+    }
+
+    clear_highlight_category () {
+        if (this.highlight_category) {
+            // cleanup old pages
+            this.highlight_category.highlight = false;
+            this.highlight_category.pages.forEach(d => d.highlight = false);
+        }
+        if (this.active_page == this.highlight_category) {
+            this.active_page = null;
+        }
+        this.highlight_category = null;
+        this.categorydiv
+            .selectAll("div.cat")
+            .classed("highlight", d=> d.page ? d.page.highlight : false);
+        var data = {nodes: this.get_nodes(), links: values(this.all_links_by_key)};
+        this.update_node_counts()
+        this.update_graph(data);
+    }
+
+    get_nodes () {
+        var nodes = this.wiki.get_nodes();
+        nodes = nodes.filter(d => d.linked || d.active || d.active2 || d.highlight);
+        return nodes;
+    }
+
+    async set_active_page (page) {
+        console.log("wikimap: set_active_page:", page);
+        if (page === this.active_page) {
+            // console.log("page is already the active page", page, this.active_page);
+            return;
+        }
+        // window.location.hash = this.wiki.escapeTitle(page.title);
+        // window.history.pushState ({pagetitle: page.title}, page.title, "/m/"+this.wiki.escapeTitle(page.title));
+        // cleanup old
+        if (this.active_page) {
+            this.active_page.fx = undefined;
+            this.active_page.fy = undefined;
+            this.active_page.active = false;
+            // deactivate linked links/nodes
+            this.linked_nodes_set_active(this.active_page, false);
+            // ENSURE (HISTORY) LINK TO PREVIOUS NODE AND CURRENT
+            //var link = this.ensure_link(this.active_page, page);
+            // link.visited = true;
+        }
+
+        if (page.ns == 14) {
+            this.active_page = page;
+            if (!page.pages) {
+                page.pages = await page.get_categorymembers();
+            }
+            if (this.highlight_category) {
+                // cleanup old pages
+                this.highlight_category.highlight = false;
+                this.highlight_category.pages.forEach(d => d.highlight = false);
+            }
+            this.highlight_category = page;
+            this.highlight_category.highlight = true;
+            this.highlight_category.pages.forEach(d => d.highlight = true);
+            // this.update_nodes();
+
+            this.categorydiv
+                .selectAll("div.cat")
+                .classed("highlight", d=> d.page ? d.page.highlight : false);
+            // repetition of below... (could be improved)
+            // this.events.emit("page", this.active_page);
+            // var data = {nodes: this.wiki.get_nodes(), links: values(this.all_links_by_key)};
+            // this.update_node_counts()
+            // this.update_graph(data);
+
+            // return;
+        } else if (page.ns !== 0) {
+            console.log("SPECIAL PAGE", page);
+
+        } else {
+            // LOAD/ENSURE PAGE LINKS
+            var links_out = await page.get_links();
+            links_out = links_out.filter(p => (!p.redirect && p.ns == 0));
+            // console.log("links_out", links_out);
+            var links_in = await page.get_linkshere();
+            links_in = links_in.filter(p => (!p.redirect && p.ns == 0));
+            // console.log("links_in", links_in);
+            links_out.forEach(p => {
+                this.ensure_link(page, p).wiki = true;
+            });
+            links_in.forEach(p => {
+                this.ensure_link(p, page).wiki = true;
+            });
+
+        }
+
+        this.active_page = page;
+        // console.log("fixing active page", this.active_page);
+        if (this.active_page.x === undefined) {
+            this.active_page.x = this.width/2;
+            this.active_page.y = this.height/2;
+        } 
+        this.active_page.fx = this.active_page.x;
+        this.active_page.fy = this.active_page.y;
+        this.active_page.active = true;
+        this.linked_nodes_set_active(this.active_page, true);
+        
+        //setTimeout(() => {
+        this.centerOnItem(page, 1000);
+        //}, 1000);
+
+        this.events.emit("page", this.active_page);
+        var data = {nodes: this.get_nodes(), links: values(this.all_links_by_key)};
+        this.update_node_counts()
+        this.update_graph(data);
+        // this.update_nodes();
+        // this.update_forces();
+    }
+
+    update_node_counts () {
+        var nodes = this.wiki.get_nodes();
+        for (let i=0, len=nodes.length; i<len; i++) {
+            nodes[i].count = 0;
+        }
+        for (var key in this.all_links_by_key) {
+            if (this.all_links_by_key.hasOwnProperty(key)) {
+                var link = this.all_links_by_key[key];
+                link.source.count += 1;
+                link.target.count += 1;
+            }
+        }
+    }
+
+    category_click (d) {
+        console.log("category click", d);
+        if (d.page) {
+            if (this.highlight_category == d.page) {
+                this.clear_highlight_category();
+            } else {
+                this.set_active_page(d.page);
+            }
+        }
+    }
+
+    set_show_history (value) {
+        console.log("wikimap.show_history", value);
+        if (this.show_history !== value) {
+            this.show_history = value;
+            if (this.show_history) {
+                let graph = {};
+                graph.nodes = this.nodes;
+                graph.links = this.links.slice();
+                for (var key in this.historylinks) {
+                    graph.links.push(this.historylinks[key])
+                }
+                this.update_graph(graph);
+            } else {
+                let graph = {};
+                graph.nodes = this.nodes;
+                graph.links = this.links;
+                this.update_graph(graph);
+            }
+        }
+    }
+
+    update_graph (graph) {
+        // console.log("UPDATE GRAPH", graph.nodes.length, graph.links.length);
+        var link = this.linksg.selectAll("line")
+                .data(graph.links, d => { return this.link_key(d.source.title, d.target.title) });
+        var link_enter = link.enter()
+            .append("line");
+
+        link.exit().each(d => {
+            d.source.linked = false;
+            d.target.linked = false;
+        }).remove();
+        
+        link_enter.merge(link).each(d => {
+                d.source.linked = true;
+                d.target.linked = true;
+            });
+
+        var node = this.nodesg
+            .selectAll("g.page")
+            .data(graph.nodes, function (d) { return d.title });
+        
+        node.exit().remove();
+
+        var that = this;
+        var node_enter = node.enter().append("g")
+            .attr("class", "page")
+            // .attr("class", d=>"page "+this.wiki.get_ns_classname(d.ns))
+            .on("click", d => {
+                // that.events.emit("nodeclick", d, this);
+                this.set_active_page(d);
+                // this.set_active_node(d.title);
+            })
+            .on("mouseover", function (d) {
+                // console.log("mouseover", this);
+                // d.mouse = true;
+                select(this).classed("mouse", true);
+                // that.update_nodes();
+            })
+            .on("mouseout", function (d) {
+                // console.log("mouseout", this);
+                // d.mouse = false;
+                select(this).classed("mouse", false);
+                // that.update_nodes();
+            })
+            .call(drag()
+                .on("start", this.dragstarted.bind(this))
+                .on("drag", this.dragged.bind(this))
+                .on("end", this.dragended.bind(this)));
+
+
+        node_enter.append("use")
+            .attr("xlink:href", d => d.symbol || "symbols.svg#Main")
+            .attr("class", "testcolor");
+
+            // {
+            //     for (var i=0, l=d.cats.length; i<l; i++) {
+            //         if (this.symbols[d.cats[i]]) {
+            //             return this.symbols[d.cats[i]];
+            //         }
+            //     }
+            //     return this.symbols.default || "default";
+            // });
+
+        // node_enter.append("circle")
+        //     .attr("r", 6);
+
+        node_enter.append("text")
+            .text(d => d.title)
+            .attr("x", 10);
+
+        //node_enter.append("title")
+        //   .text(function(d) { return d.title; });
+
+        node = node_enter.merge(node);
+        link = link_enter.merge(link);
+
+        node.classed("active", d=>d.active);
+
+
+        this.simulation
+            .nodes(graph.nodes)
+            .on("tick", ticked);
+
+        this.simulation.force("link")
+            .links(graph.links);
+
+        this.simulation.force("radial").radius(d => (d.linked || d.highlight) ? null : 200);
+
+        function ticked() {
+            link
+                .attr("x1", function(d) { return d.source.x; })
+                .attr("y1", function(d) { return d.source.y; })
+                .attr("x2", function(d) { return d.target.x; })
+                .attr("y2", function(d) { return d.target.y; });
+
+            // node
+            //     .attr("cx", function(d) { return d.x; })
+            //     .attr("cy", function(d) { return d.y; });
+            node
+                .attr("transform", d => `translate(${d.x},${d.y})`);
+        }
+
+        // document.querySelector("#page").style.background = "purple";
+        // return;
+
+        this.update_nodes();
+        this.update_forces();
+        // this.simulation.alphaTarget(0.3).restart();
+    }
+
+    update_nodes () {
+        var nodes = this.nodesg.selectAll("g.page");
+        // console.log("update_nodes", nodes.size());
+        nodes.classed("mouse", d=>d.mouse);
+        nodes.classed("active", d=>d.active);
+        nodes.classed("active2", d=>d.active2);
+        nodes.classed("highlight", d=>d.highlight);
+        nodes.sort((a, b) => {
+            // console.log("sort", a, b);
+            var x = a.mouse ? 10 : (a.active ? 8 : (a.active2 ? 5 : 0)),
+                y = b.mouse ? 10 : (b.active ? 8 : (b.active2 ? 5 : 0));
+            return x - y; 
+        });
+        var links = this.linksg.selectAll("line");
+        links.classed("active2", d=>d.active2);        
+        links.classed("history", d=>d.type == "history");        
+        links.sort((a, b) => {
+            // console.log("sort", a, b);
+            var x = a.active2 ? 10 : (a.history ? 5 : 0),
+                y = b.active2 ? 10 : (b.history ? 5 : 0);
+            return x - y; 
+        });
+    }
+
+    update_forces () {
+        var force = this.simulation.force("link");
+        // console.log("update_forces:force", force);
+        this.simulation.force("link").strength(d => {
+            if (d.source.active || d.target.active) {
+                return 1;
+            } else {
+                // same as d3.force's defaultStrength
+                return 0.5 * (1 / Math.min(d.source.count, d.target.count)); 
+            }
+        });
+        // this.simulation.alphaTarget(0.3).restart();
+        this.simulation.alpha(0.5).restart();
+    }
+
+    centerOnItem(item, duration) {
+        var bounds = this.svg.node().getBoundingClientRect();
+        var curt = zoomTransform(this.rect.node());
+        // console.log("centerOnItem", this.zoom_level, "item", item);
+        var zoom_level = this.zoom_level ? this.zoom_level : curt.k;
+        var ITEM_SIZE = 36;
+        if (item && item.x !== undefined) {
+            this.zoom.translateTo(duration ? this.rect.transition().duration(duration) : this.rect, item.x, item.y);
+            // this.zoom.translateTo(this.rect, item.x, item.y);
+            /*
+            var transform = function () {
+                return zoomIdentity
+                    .translate(bounds.width / 2, bounds.height / 2)
+                    .scale(zoom_level)
+                    .translate(-item.x, -item.y);
+            };
+            if (duration) {
+                this.rect.transition().duration(duration).call(this.zoom.transform, transform);
+            } else {    
+                this.rect.call(this.zoom.transform, transform);
+            }
+            */
+        } else {
+            console.log("NO ITEM");
+            var transform = function () {
+                return zoomIdentity
+                    .scale(1);
+            };
+            this.rect.call(this.zoom.transform, transform);
+        }
+    }
+
+    do_zoom (f, transition) {
+        this.rect.call(this.zoom.scaleBy, f);
+    }
+
+    zoom_in () {
+        this.do_zoom(1.25);
+    }
+
+    zoom_out () {
+        this.do_zoom(1/1.25);
+    }
+}
+

style.00.css

@@ -0,0 +1,315 @@
+/* F O N T E S */
+@font-face {
+    font-family: "Combined";
+    src: url('/typo/Combined/combined.otf');  
+    font-style:   normal;
+    font-weight:  normal;
+}
+
+@font-face {
+    font-family: 'combinedregular';
+    src: url('/typo/Combined/web/combined.eot');
+    src: url('/typo/Combined/web/combined.eot?#iefix') format('embedded-opentype'),
+         url('/typo/Combined/web/combined.woff2') format('woff2'),
+         url('/typo/Combined/web/combined.woff') format('woff'),
+         url('/typo/Combined/web/combined.ttf') format('truetype'),
+         url('/typo/Combined/web/combined.svg#combinedregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'wremena';
+    src: url('typo/Wremema/webfont/wremena_bold-webfont.woff2') format('woff2'),
+         url('typo/Wremema/webfont/wremena_bold-webfont.woff') format('woff'),
+         url('typo/Wremema/webfont/wremena_bold-webfont.ttf') format('truetype'),
+         url('typo/Wremema/webfont/wremena_bold-webfont.svg#wremenabold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'wremena';
+    src: url('typo/Wremema/webfont/wremena_regular-webfont.woff2') format('woff2'),
+         url('typo/Wremema/webfont/wremena_regular-webfont.woff') format('woff'),
+         url('typo/Wremema/webfont/wremena_regular-webfont.ttf') format('truetype'),
+         url('typo/Wremema/webfont/wremena_regular-webfont.svg#wremenaregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'wremena';
+    src: url('typo/Wremema/webfont/wremena_light-webfont.woff2') format('woff2'),
+         url('typo/Wremema/webfont/wremena_light-webfont.woff') format('woff'),
+         url('typo/Wremema/webfont/wremena_light-webfont.ttf') format('truetype'),
+         url('typo/Wremema/webfont/wremena_light-webfont.svg#wremenalight') format('svg');
+    font-weight: normal;
+    font-style: 200;
+}
+
+@font-face {
+  font-family: 'Coupeur Monospace Bold';
+  src: url('/typo/Coupeur/webfont/CoupeurMonospace-Bold.eot'); /* IE9 Compat Modes */
+  src: url('/typo/Coupeur/webfont/CoupeurMonospace-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/typo/Coupeur/webfont/CoupeurMonospace-Bold.woff') format('woff'), /* Modern Browsers */
+       url('/typo/Coupeur/webfont/CoupeurMonospace-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('/typo/Coupeur/webfont/CoupeurMonospace-Bold.svg#fcf36b8f65c0f0737cd36a2be6922659') format('svg'); /* Legacy iOS */
+       
+  font-style:   normal;
+  font-weight:  700;
+}
+
+@font-face {
+  font-family: 'Coupeur Monospace Normal';
+  src: url('/typo/Coupeur/webfont/CoupeurMonospace-Normal.eot'); /* IE9 Compat Modes */
+  src: url('/typo/Coupeur/webfont/CoupeurMonospace-Normal.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/typo/Coupeur/webfont/CoupeurMonospace-Normal.woff') format('woff'), /* Modern Browsers */
+       url('/typo/Coupeur/webfont/CoupeurMonospace-Normal.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('/typo/Coupeur/webfont/CoupeurMonospace-Normal.svg#4b219f539d302a6ffd9fd41e2da16172') format('svg'); /* Legacy iOS */
+       
+  font-style:   normal;
+  font-weight:  400;
+}
+
+
+
+body {
+    margin: 0;
+    padding: 0;
+    background: #f1f2f3;
+    overflow: hidden;
+}
+
+
+.links line {
+  /*stroke: #aaa;*/
+  stroke: none;
+}
+
+.links line.active2 {
+    stroke: red;
+}
+
+.links line.history {
+    stroke: purple;
+}
+
+.active {
+    stroke: red;
+}
+
+.category circle {
+    fill: yellow;
+}
+
+.web circle {
+    fill: purple;
+}
+
+.news circle {
+    fill: lightgray;
+}
+
+.template circle {
+    fill: lightgreen;
+}
+
+.discussion circle {
+    fill: aqua;
+}
+
+
+
+svg {
+    position: absolute;
+    left: 0; top: 0; right: 0; bottom: 0;
+    font: 10px sans-serif;
+}
+
+svg g.page {
+    cursor: pointer;
+}
+
+svg g.page text {
+    visibility: hidden;
+    fill: #222;
+    font: 10px sans-serif;
+}
+
+svg g.active text {
+    visibility: visible;
+}
+
+svg g.mouse text {
+    visibility: visible;
+}
+
+use {
+    fill: #EEE;
+    stroke: black;
+}
+
+.active use {
+    fill: #FFF;
+    stroke: red;
+}
+
+.active text {
+    stroke: black;
+}
+
+.active2 use {
+    fill: #FFF;
+    stroke: red;
+}
+
+.highlight use {
+    fill: #FFF;
+    stroke: orange;
+}
+
+
+/* Categories */
+
+#cats {
+    display: none;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+#cats .ocontents {
+    background: #FFFFFFDD;
+    display: none;
+    /*padding: 5px;*/
+    /*box-sizing: border-box;*/
+}
+#cats.expanded .ocontents {
+    display: block;
+}
+
+/* showall class */
+#cats div.cat {
+    display: none;
+}
+#cats div.cat span.spacing {
+    display: none;
+}
+#cats div.cat.icon {
+    display: block;
+}
+#cats.showall div.cat {
+    display: block;
+}
+#cats.showall div.cat span.spacing {
+    display: inline;
+}
+
+#cats .contents {
+    overflow: auto;
+    height: 50vh;
+    min-width: 300px;
+}
+#cats .contents .scroll {}
+
+#cats .botright {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+
+#cats .botright .thumb {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 32px;
+    height: 32px;
+    background: #FFFFFFDD;
+}
+#cats div.cat span.icon {
+    position: relative;
+    top: 4px;
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    background-repeat: no-repeat;
+    margin-right: 4px;
+}
+#cats div.cat span.count {
+    padding: 0px 3px;
+    background: #DDD;
+    color: #444;
+    font-size: 10px;
+    margin-left: 4px;
+}
+#cats div.cat a {
+    color: black;
+    text-decoration: none;
+}
+
+
+
+
+#page {
+    position: absolute;
+    left: 0; right: 0; top: 0;
+    height: 160vh;
+    text-align: center;
+}
+#page.touched {
+    background: #444;
+}
+#bottompane {
+    position: absolute;
+    top: 60vh;
+    left: 0; right: 0;
+    height: 100vh;
+    z-index: 2;
+}
+#bottompane #bottompage {
+    position: absolute;
+    left: 0; right: 0;
+    margin: 0 auto;
+    max-width: 800px;
+    background: white;
+    border: 1px solid #E6E6E6;
+    border-radius: 10px;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+}
+#bottompane #menubar {
+    height: 48px;
+    width: 100%;
+
+}
+#wikiframediv {
+    position: absolute;
+    left: 0; top: 48px;
+    right: 0; bottom: 0;
+}
+#bottompane iframe {
+    border: none;
+    width: 100%;
+    height: 100%;
+}
+#debug {
+    width: 300px;
+    font-size: 10px;
+    height: 8em;
+    overflow: auto;
+    position: absolute; left: 10px; top: 10px; z-index:23
+}
+
+#searchinput { 
+    min-width: 220px;
+    font-family: "combinedregular";
+    font-size: 11px;
+}
+#menubar {
+    text-align: center;
+}
+#menubar img {
+    position: relative;
+    top: 10px;
+}

style.css

@@ -0,0 +1,588 @@
+/* ------- F O N T E S ------- */
+@font-face {
+    font-family: "Combined";
+    src: url('/mw/skins/foreground/assets/fonts/combined.otf');  
+    font-style:   normal;
+    font-weight:  normal;
+}
+
+@font-face {
+    font-family: "Vega";
+    src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.otf');  
+    src: url('/mw/skins/foreground/assets/fonts/Vega-Regular.ttf') format("truetype");  
+    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular-Webfont.svg") format("svg");
+    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular.woff") format("woff");
+    src: url("/mw/skins/foreground/assets/fonts/Vega-Regular.woff2") format("woff2");
+    font-style:   normal;
+    font-weight:  normal;
+}
+
+@font-face {
+font-family: Lucette;
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/otf/Lucette-Regular.otf");
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/ttf/Lucette-Regular.ttf");
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff/Lucette-Regular.woff");
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff2/Lucette-Regular.woff2");
+}
+
+@font-face {
+font-family: Lucette;
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/otf/Lucette-Regularitalic.otf");
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/ttf/Lucette-Regularitalic.ttf");
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff/Lucette-Regularitalic.woff");
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff2/Lucette-Regularitalic.woff2");
+font-style: italic;
+}
+
+@font-face {
+ font-family:'FontAwesome';
+ src:url(/mw/skins/foreground/assets/fonts/fontawesome-webfont.eot?32400);
+ src:url(/mw/skins/foreground/assets/fonts/fontawesome-webfont.eot?32400) format('embedded-opentype'),url(/mw/skins/foreground/assets/fonts/fontawesome-webfont.woff2?db812) format('woff2'),url(/mw/skins/foreground/assets/fonts/fontawesome-webfont.woff?a3572) format('woff'),url(/mw/skins/foreground/assets/fonts/fontawesome-webfont.ttf?a3de2) format('truetype'),url(/mw/skins/foreground/assets/fonts/fontawesome-webfont.svg?f775f) format('svg');
+ font-weight:normal;
+ font-style:normal
+}
+
+/* Global variables. */
+:root,
+::backdrop {
+  /* Set sans-serif & mono fonts */
+  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
+    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
+    "Helvetica Neue", sans-serif;
+  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  --standard-border-radius: 5px;
+
+  /* Default (light) theme */
+  --bg: #fff;
+  --accent-bg: #f5f7ff;
+  --text: #212121;
+  --text-light: #585858;
+  --border: #898EA4;
+  --accent: #0d47a1;
+  --accent-hover: #1266e2;
+  --accent-text: var(--bg);
+  --code: #d81b60;
+  --preformatted: #444;
+  --marked: #ffdd33;
+  --disabled: #efefef;
+
+    --font-title: Giskith;
+    --font-body: Lucette;
+    --color-a: #a700ff; /* purple */
+    --color-b: #00ab6b; /* green */
+    --font-size: 23px;
+    --line-height: 1.3em;
+    --color-a-shadow: rgba(166, 0, 255, 0.44);
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+  :root,
+  ::backdrop {
+    color-scheme: dark;
+    --bg: #222;
+    --accent-bg: #2b2b2b;
+    --text: #dcdcdc;
+    --text-light: #ababab;
+    --accent: #ffb300;
+    --accent-hover: #ffe099;
+    --accent-text: var(--bg);
+    --code: #f06292;
+    --preformatted: #ccc;
+    --disabled: #111;
+
+--font-title: Giskith;
+--font-body: Lucette;
+--color-a: #9557b5; /* washed-off purple */
+--color-b: #3c856b; /* washed-off green */
+--font-size: 23px;
+--line-height: 1.3em;
+  }
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background: var(--bg);
+    overflow: hidden;
+    font-family: Vega;
+}
+
+div#handle {
+    position: absolute;
+    bottom: -3em;
+    width: 70%;
+    height: 5em;
+    background-color: transparent;
+    left: 5em;
+}
+/* change la taille des cercle dans le svg */
+/*circle {
+transform: scale(0.8);
+}
+
+path {
+transform: scale(0.8);
+} */
+
+circle.active{
+transform: scale(0.5);
+}
+
+.links line {
+  stroke: #aaa;
+  /*stroke: none;*/
+}
+
+.links line.active2 {
+    stroke: var(--color-a);
+}
+
+.links line.history {
+    stroke: purple;
+}
+
+.active {
+    stroke: var(--color-a);
+}
+
+.category circle {
+    fill: var(--color-b);
+}
+
+.web circle {
+    fill: purple;
+}
+
+.news circle {
+    fill: lightgray;
+}
+
+.template circle {
+    fill: lightgreen;
+}
+
+.discussion circle {
+    fill: aqua;
+}
+
+/* ------- param<61>tre de la carte ------- */
+
+svg {
+    position: absolute;
+    left: 0; top: 0; right: 0; bottom: 0;
+    font: 10px sans-serif;
+    /* C'est bon j'ai trouve, c'est ce tranform qui change la taille de l'affichage de la carte*/
+    transform: scale(1.5);
+}
+
+@media only screen and (max-width: 320px) {
+#cats,
+svg {
+    zoom: 0.5;
+    transform: scale(1);
+}
+}
+
+svg g.page {
+    cursor: pointer;
+}
+
+ /* texte des noeud */
+svg g.page text {
+    visibility: hidden;
+    fill: var(--color-a);
+    font: 10px Combined;
+    max-width: 20%;
+}
+
+svg g.active text {
+    /*visibility: visible;*/
+}
+
+svg g.mouse use {
+    fill: var(--color-a);
+    stroke: var(--color-a);
+}
+svg g.mouse text {
+    visibility: visible;
+    stroke-width: 1.5px;
+    stroke: white;
+    paint-order: stroke;
+
+}
+
+use {
+    fill: #EEE;
+    stroke: black;
+}
+
+.highlight use {
+    fill: #FFF;
+    stroke: var(--color-b);
+}
+
+.active use {
+/*  animation-transform: 2;*/
+  animation-duration: 2s;
+  animation-name: pulse;
+  animation-iteration-count: infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1, 1);
+  }
+  50% {
+    transform: scale(1.5, 1.5);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+.active use {
+    fill: #FFF;
+    stroke: var(--color-b) !important;
+}
+
+.active text {
+    stroke: var(--bg);
+    stroke-width: 1px;
+    paint-order: stroke;
+    fill: var(--color-b) !important;
+    visibility: visible !important;
+    transform: translate(-20px, 20px);
+}
+
+.active2 use {
+    fill: #FFF;
+    stroke: var(--color-a);
+}
+
+
+
+/* --------- Categories ------- */
+
+@media only screen and (max-width: 600px) {
+	#page {
+		display:none;
+	}
+	#wikiframediv {
+		right:0;
+		top:0;
+	}
+
+		#cats .body {
+		  display: none;
+		}
+		#cats.expanded .placeholder {
+		  display: block;
+		}
+}
+
+#cats .placeholder {
+  min-width: 100%;
+  text-align: center;
+  position: relative;
+  top: 3px;
+}
+#cats.expanded .body {
+  display: block;
+}
+
+#cats.expanded .placeholder {
+  display: none;
+}
+#cats.expanded .placeholder:hover {
+	color: var(--color-b);
+}
+#cats.expanded .placeholder:before {
+    content: "×";
+    font-size: 17px;
+    cursor: pointer;
+}
+#cats .placeholder:before {
+    content: "?";
+    font-size: 12px;
+    cursor: pointer;
+}
+
+#cats {
+    /*display: none;*/
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    background: white; 
+    color: black;
+    border-radius: 24px;
+    padding: 10px;
+    font-size: 12px;
+    min-width: 16px;
+    min-height: 16px;
+    box-shadow: 0 3px 3px 3px var(--color-a-shadow);
+}
+
+#cats div.cat span.icon {
+    position: relative;
+    top: 4px;
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    background-repeat: no-repeat;
+    margin-right: 4px;
+    background-position: center center;
+    background-size: contain;
+}
+#cats div.cat:last-child span.icon {
+    background-size: 50%;
+}
+#cats div.cat span.count {
+  display: none;
+    padding: 0px 3px;
+    background: #DDD;
+    color: #444;
+    font-size: 12px;
+    margin-left: 4px;
+}
+#cats div.cat a {
+    color: black;
+    text-decoration: none;
+}
+#cats div.cat.highlight span.icon {
+    background-color: var(--color-b);
+    background-blend-mode: screen;
+}
+#cats div.cat a:hover,
+#cats div.cat.highlight a {
+    color: var(--color-b);
+}
+#cats hr {
+  color: white;
+}
+
+
+#page {
+  position: absolute;
+  left: 65%; 
+  right:0;
+  top: 0;
+  bottom: 0;
+}
+
+#wikiframediv {
+    position: absolute;
+    left: 0; top: 0;
+    right: 35%; bottom: 0;
+}
+#wikiframediv iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* ------- MEDIAWIKI PAGE ------- */
+
+.header-container {
+  display: none !important;
+}
+
+iframe form.header {
+  display: none;
+}
+/*ul#page-actions {
+  display: none;
+}
+*/
+a.talk {
+  display:none;
+}
+
+
+/* ------- control positioning ------- */
+
+.leaflet-control {
+  position: relative;
+  z-index: 800;
+  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+  pointer-events: auto;
+  font-size: 12px;
+}
+.leaflet-control {
+  float: left;
+  clear: both;
+  }
+
+/* ------- general toolbar styles ------- */
+
+.leaflet-bar {
+  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+}
+.leaflet-bar a,
+.leaflet-bar a:hover {
+  background-color: #fff;
+  border-bottom: 1px solid #ccc;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: black;
+  }
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  display: block;
+}
+.leaflet-bar a:hover {
+  background-color: #f4f4f4;
+  }
+.leaflet-bar a:first-child:before {
+      content: " ";
+      height: 2px;
+      display: block;
+      }
+.leaflet-bar a:last-child {
+  border-bottom: none;
+  }
+.leaflet-bar a.leaflet-disabled {
+  cursor: default;
+  background-color: #f4f4f4;
+  color: #bbb;
+  }
+
+
+/* ------- zoom controls -------- */
+
+.zoom-controls {
+  position: absolute;
+  /* changed from left top to bottom right */
+  right: 10px;
+  bottom: 10px;
+  z-index: 10;
+}
+
+#specialclosediv {
+  position: absolute;
+  left: 25px;
+  top: 10px;
+  z-index: 10000;
+  box-shadow: 0 3px 3px 3px var(--color-a-shadow);
+  background-color: #ffffff;
+  display: none;
+}
+#specialclosediv a, #specialclosediv a:hover {
+  font-size: 24px;
+  background-color: #fff;
+  border-bottom: 1px solid #ccc;
+  width: 26px;
+  height: 26px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: black;
+}
+
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+  font: Combined;
+  font-size: 17px;
+  line-height: 20px;
+  text-indent: 1px;
+  box-shadow: 0 3px 3px 3px var(--color-a-shadow);
+  background-color: #ffffff;
+}
+
+@media only screen and (max-width: 600px) {
+#cats,
+svg {
+    zoom: 0.5;
+    transform: scale(1);
+}
+  body {
+    overflow: auto;
+  }
+
+  #container {
+    position: absolute;
+    left: 0; top: 0;
+    right: 0;
+    height: 150vh;
+  }
+
+  #page {
+	  display:none;
+    position: absolute;
+    left: 0; top: 0;
+    height: 50vh;
+      width: 100vw;
+      z-index: 10000;
+  }
+
+  #wikiframediv {
+      position: absolute;
+      left: 0; top: 0;
+      height: 100vh;
+      width: 100vw;
+  }
+
+}
+
+/* ------- Menu d<>pliant ------- */
+.button-style {
+  box-shadow: 0 3px 3px 3px var(--color-a-shadow);
+  background-color: white;
+  font-family: Vega;
+  font-size: 12px;
+  padding: 6px 2px;
+  cursor: pointer;
+  color: black;
+
+    border-radius: 24px;
+}
+
+a.button-style {
+	padding:8px;
+	text-decoration:none;
+}
+
+
+
+#specialselectdiv {
+  position: absolute;
+  /* changement des valeur sde bottom right a top left*/
+  top: 8px;
+  left: 25px;
+  z-index: 10000;
+  background: white;
+  }
+  
+#specialselectdiv select {
+  box-shadow: 0 3px 3px 3px var(--color-a-shadow);
+  background-color: white;
+  font-family: Vega;
+  font-size: 12px;
+  padding: 6px 2px;
+  text-transform: uppercase;
+  cursor: pointer;
+  color: black;
+}
+
+
+#specialiframediv {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+  z-index: 100;
+}
+#specialiframediv iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}

symbols.orig.svg

@@ -0,0 +1,239 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32.387501mm"
+   height="32.356251mm"
+   viewBox="0 0 32.3875 32.356251"
+   version="1.1"
+   id="svg5507"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="symbols.svg"
+   enable-background="new">
+  <defs
+     id="defs5501" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="-9.2789814"
+     inkscape:cy="99.623528"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer8"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1366"
+     inkscape:window-height="704"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5504">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Main"
+     style="display:none">
+    <circle
+       r="5.0396824"
+       cy="1.4819558"
+       cx="0.43864226"
+       style="fill-opacity:1;stroke-width:2.01587296;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none"
+       id="Main"
+       inkscape:label="#path8162" />
+  </g>
+  <g
+     inkscape:label="Orientations"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:none">
+    <g
+       id="Orientations"
+       style="fill-opacity:1;stroke-opacity:0.99615389"
+       transform="matrix(0.404233,0,0,0.404233,36.032029,1.0220986)">
+      <path
+         id="Orientations-0"
+         d="m -87.8577,-14.01912 c -8.05454,0 -14.59375,6.50796 -14.59375,14.5625 0,8.05454 6.53921,14.59375 14.59375,14.59375 8.05454,0 14.59375,-6.53921 14.59375,-14.59375 0,-8.05454 -6.53921,-14.5625 -14.59375,-14.5625 z"
+         style="fill-opacity:1;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path6386"
+         d="m -87.7327,-7.603495 c -1.108176,0 -2.164768,0.243856 -3.125,0.65 -0.960232,0.406144 -1.823784,0.998784 -2.55,1.725 -0.726216,0.726216 -1.318856,1.589768 -1.725,2.55 -0.406144,0.960232 -0.625,2.016824 -0.625,3.125 0,1.108176 0.218856,2.139768 0.625,3.1 0.406144,0.960232 0.998784,1.848784 1.725,2.575 0.726216,0.726216 1.589768,1.293856 2.55,1.7 0.960232,0.406144 2.016824,0.65 3.125,0.65 1.108176,0 2.164768,-0.243856 3.125,-0.65 0.960232,-0.406144 1.823784,-0.973784 2.55,-1.7 0.726216,-0.726216 1.318856,-1.614768 1.725,-2.575 0.406144,-0.960232 0.625,-1.991824 0.625,-3.1 0,-1.108176 -0.218856,-2.164768 -0.625,-3.125 -0.406144,-0.960232 -0.998784,-1.823784 -1.725,-2.55 -0.726216,-0.726216 -1.589768,-1.318856 -2.55,-1.725 -0.960232,-0.406144 -2.016824,-0.65 -3.125,-0.65 z"
+         style="fill-opacity:1;stroke-width:2.55999994;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Ateliers_pluridisciplinaires"
+     style="display:none;">
+    <g
+       transform="matrix(0.71815477,0,0,0.71815477,65.187921,-29.508788)"
+       id="Ateliers_pluridisciplinaires">
+      <circle
+         r="19.208878"
+         cy="40.264759"
+         cx="116.73087"
+         transform="matrix(0.36441483,0,0,0.36441483,-132.69908,28.796006)"
+         id="path6780"
+         style="fill-opacity:1;stroke-width:16.4647522;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none" />
+      <g
+         id="g8172"
+         transform="matrix(2.1333332,0,0,-2.1333332,13.499857,367.42774)"
+         style="fill-opacity:0.99615389;stroke-opacity:0.98846154">
+        <path
+           transform="matrix(0.05856667,0,0,-0.05856667,-55.427399,154.21379)"
+           style="fill-opacity:0.99615389;stroke-width:0;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.98846154;marker-start:none"
+           d="M 135.93975,40.264759 A 19.208878,19.208878 0 0 1 116.73087,59.473637 19.208878,19.208878 0 0 1 97.521996,40.264759 19.208878,19.208878 0 0 1 116.73087,21.055882 19.208878,19.208878 0 0 1 135.93975,40.264759 Z"
+           id="path8174" />
+      </g>
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer4"
+     inkscape:label="Cours_de_soutien_a_l'orientation"
+     style="display:none">
+    <g
+       id="Cours_de_soutien_a_l'orientation"
+       style="stroke-opacity:0.99615389"
+       transform="matrix(0.37928334,0,0,0.37928334,34.100402,17.553674)">
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path8166"
+         d="m 357.75,444.40625 c -7.15954,0 -12.96875,5.77796 -12.96875,12.9375 0,7.15954 5.80921,12.96875 12.96875,12.96875 7.15954,0 12.9375,-5.80921 12.9375,-12.96875 0,-7.15954 -5.77796,-12.9375 -12.9375,-12.9375 z"
+         style="fill-opacity:1;stroke-width:6.48174286;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6363"
+         d="m 357.75,454.125 c 0.44747,0 0.86227,0.086 1.25,0.25 0.38773,0.164 0.73801,0.39426 1.03125,0.6875 0.29324,0.29324 0.5235,0.64352 0.6875,1.03125 0.164,0.38773 0.25,0.80253 0.25,1.25 0,0.44747 -0.086,0.89352 -0.25,1.28125 -0.164,0.38773 -0.39426,0.73801 -0.6875,1.03125 -0.29324,0.29324 -0.64352,0.5235 -1.03125,0.6875 -0.38773,0.164 -0.80253,0.25 -1.25,0.25 -0.44747,0 -0.89352,-0.086 -1.28125,-0.25 -0.38773,-0.164 -0.73801,-0.39426 -1.03125,-0.6875 -0.29324,-0.29324 -0.5235,-0.64352 -0.6875,-1.03125 -0.164,-0.38773 -0.25,-0.83378 -0.25,-1.28125 0,-0.44747 0.086,-0.86227 0.25,-1.25 0.164,-0.38773 0.39426,-0.73801 0.6875,-1.03125 0.29324,-0.29324 0.64352,-0.5235 1.03125,-0.6875 0.38773,-0.164 0.83378,-0.25 1.28125,-0.25 z"
+         style="fill-opacity:1;stroke-width:6.48174286;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer5"
+     inkscape:label="Cours_de_soutien_specifique"
+     style="display:none">
+    <g
+       id="Cours_de_soutien_specifique"
+       style="fill-opacity:0.99615389;stroke-opacity:0.99615389"
+       transform="matrix(0.41178012,0,0,0.41178012,37.56977,36.122666)">
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6358"
+         d="m 356.1875,401.09375 c -8.05454,0 -14.59375,6.53921 -14.59375,14.59375 0,8.05454 6.53921,14.5625 14.59375,14.5625 8.05454,0 14.5625,-6.50796 14.5625,-14.5625 0,-8.05454 -6.50796,-14.59375 -14.5625,-14.59375 z"
+         style="fill-opacity:0.99615389;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6329"
+         d="m 356.3125,413.9375 c -0.44744,0 -0.86303,0.17553 -1.15625,0.46875 -0.29322,0.29322 -0.46875,0.70881 -0.46875,1.15625 0,0.44744 0.17553,0.83178 0.46875,1.125 0.29322,0.29322 0.70881,0.46875 1.15625,0.46875 0.44744,0 0.83178,-0.17553 1.125,-0.46875 0.29322,-0.29322 0.46875,-0.67756 0.46875,-1.125 0,-0.44744 -0.17553,-0.86303 -0.46875,-1.15625 -0.29322,-0.29322 -0.67756,-0.46875 -1.125,-0.46875 z"
+         style="fill-opacity:0.99615389;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6327"
+         d="m 356.3125,413.9375 c 0.44744,0 0.83178,0.17553 1.125,0.46875 0.29322,0.29322 0.46875,0.70881 0.46875,1.15625 0,0.44744 -0.17553,0.83178 -0.46875,1.125 -0.29322,0.29322 -0.67756,0.46875 -1.125,0.46875 -0.44744,0 -0.86303,-0.17553 -1.15625,-0.46875 -0.29322,-0.29322 -0.46875,-0.67756 -0.46875,-1.125 0,-0.44744 0.17553,-0.86303 0.46875,-1.15625 0.29322,-0.29322 0.70881,-0.46875 1.15625,-0.46875 z"
+         style="fill-opacity:0.99615389;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6324"
+         d="m 356.3125,413.9375 c -0.44744,0 -0.86303,0.17553 -1.15625,0.46875 -0.29322,0.29322 -0.46875,0.70881 -0.46875,1.15625 0,0.44744 0.17553,0.83178 0.46875,1.125 0.29322,0.29322 0.70881,0.46875 1.15625,0.46875 0.44744,0 0.83178,-0.17553 1.125,-0.46875 0.29322,-0.29322 0.46875,-0.67756 0.46875,-1.125 0,-0.44744 -0.17553,-0.86303 -0.46875,-1.15625 -0.29322,-0.29322 -0.67756,-0.46875 -1.125,-0.46875 z"
+         style="fill-opacity:0.99615389;stroke-width:3.19999981;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99615389;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer6"
+     inkscape:label="Cours_techniques"
+     style="display:none">
+    <g
+       id="Cours_techniques"
+       transform="matrix(0.42076685,0,0,-0.42076685,-14.006109,85.183824)"
+       inkscape:label="#g3142"
+       style="fill-opacity:1;stroke-opacity:1">
+      <title
+         id="title3278">template</title>
+      <path
+         inkscape:connector-curvature="0"
+         id="path87"
+         style="fill-opacity:1;stroke-width:2.12598443;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:2.23606801;stroke-dasharray:none;stroke-opacity:1"
+         d="m 49.067296,199.32385 c 0,-8.21904 -6.662847,-14.88189 -14.881888,-14.88189 -8.219041,0 -14.881889,6.66285 -14.881889,14.88189 0,8.21904 6.662848,14.88189 14.881889,14.88189 8.219041,0 14.881888,-6.66285 14.881888,-14.88189 z" />
+      <g
+         id="g3119"
+         style="fill-opacity:1;stroke-opacity:1">
+        <path
+           d="m 44.815326,199.32385 c 0,-5.87075 -4.759174,-10.62992 -10.629918,-10.62992 -5.870744,0 -10.629921,4.75917 -10.629921,10.62992 0,5.87074 4.759177,10.62992 10.629921,10.62992 5.870744,0 10.629918,-4.75918 10.629918,-10.62992 z"
+           style="fill-opacity:1;stroke-width:2.12598443;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:2.23606801;stroke-dasharray:none;stroke-opacity:1"
+           id="path85"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer7"
+     inkscape:label="Cours_theoriques">
+    <path
+       d="m 6.7797495,1.3385787 c 0,3.5225563 -2.8555966,6.378149 -6.37815062,6.378149 -3.52255578,0 -6.37814838,-2.8555927 -6.37814838,-6.378149 0,-3.5225563 2.8555926,-6.3781491 6.37814838,-6.3781491 3.52255402,0 6.37815062,2.8555928 6.37815062,6.3781491 z"
+       style="fill-opacity:1;stroke-width:0.80359638;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2.23606801;stroke-dasharray:2.41078917, 2.41078917;stroke-dashoffset:0;stroke-opacity:1;marker-start:none;marker-mid:none;marker-end:none"
+       id="Cours_theoriques"
+       inkscape:connector-curvature="0"
+       inkscape:label="#path87-1"
+       mask="none" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer8"
+     inkscape:label="Enseignants"
+     style="display:none">
+    <path
+       sodipodi:type="star"
+       style="fill-opacity:1;stroke-width:0.97391373;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="Enseignants"
+       sodipodi:sides="3"
+       sodipodi:cx="0.36393768"
+       sodipodi:cy="2.2478313"
+       sodipodi:r1="6.7946506"
+       sodipodi:r2="3.397325"
+       sodipodi:arg1="0.52606642"
+       sodipodi:arg2="1.573264"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="M 6.2398764,5.6596667 -5.5287678,5.6306258 0.38070444,-4.5467985 Z"
+       inkscape:transform-center-x="0.013378058"
+       inkscape:transform-center-y="2.6969222"
+       inkscape:label="#path3225-6-7-7" />
+  </g>
+</svg>

symbols.svg

@@ -0,0 +1,273 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="32.387501mm"
+   height="32.356251mm"
+   viewBox="0 0 32.3875 32.356251"
+   version="1.1"
+   id="svg5507"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="symbols.svg"
+   enable-background="new"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs5501" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.938267"
+     inkscape:cx="21.991098"
+     inkscape:cy="16.187456"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer7"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1366"
+     inkscape:window-height="704"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:showpageshadow="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <metadata
+     id="metadata5504">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Main"
+     style="display:none">
+    <circle
+       r="5.0396824"
+       cy="1.4819558"
+       cx="0.43864226"
+       style="fill-opacity:1;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none"
+       id="Main"
+       inkscape:label="#path8162" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="Actualites"
+     style="display:none">
+    <circle
+       r="3.5"
+       cy="1.4819558"
+       cx="0.43864226"
+       style="fill-opacity:1;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:2, 1;stroke-opacity:1;marker-start:none;stroke-dashoffset:0"
+       id="Actualites"
+       inkscape:label="#path8163" />
+  </g>
+  <g
+     inkscape:label="Orientations"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:none">
+    <g
+       id="Orientations"
+       style="display:inline;fill-opacity:1;stroke-width:1.30906;stroke-dasharray:none;stroke-opacity:0.996154"
+       transform="matrix(0.404233,0,0,0.404233,36.425594,0.81191722)">
+      <path
+         id="Orientations-0"
+         d="m -87.8577,-14.01912 c -8.05454,0 -14.59375,6.50796 -14.59375,14.5625 0,8.05454 6.53921,14.59375 14.59375,14.59375 8.05454,0 14.59375,-6.53921 14.59375,-14.59375 0,-8.05454 -6.53921,-14.5625 -14.59375,-14.5625 z"
+         style="fill-opacity:1;stroke-width:3.27266;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path6386"
+         d="m -87.7327,-7.603495 c -1.108176,0 -2.164768,0.243856 -3.125,0.65 -0.960232,0.406144 -1.823784,0.998784 -2.55,1.725 -0.726216,0.726216 -1.318856,1.589768 -1.725,2.55 -0.406144,0.960232 -0.625,2.016824 -0.625,3.125 0,1.108176 0.218856,2.139768 0.625,3.1 0.406144,0.960232 0.998784,1.848784 1.725,2.575 0.726216,0.726216 1.589768,1.293856 2.55,1.7 0.960232,0.406144 2.016824,0.65 3.125,0.65 1.108176,0 2.164768,-0.243856 3.125,-0.65 0.960232,-0.406144 1.823784,-0.973784 2.55,-1.7 0.726216,-0.726216 1.318856,-1.614768 1.725,-2.575 0.406144,-0.960232 0.625,-1.991824 0.625,-3.1 0,-1.108176 -0.218856,-2.164768 -0.625,-3.125 -0.406144,-0.960232 -0.998784,-1.823784 -1.725,-2.55 -0.726216,-0.726216 -1.589768,-1.318856 -2.55,-1.725 -0.960232,-0.406144 -2.016824,-0.65 -3.125,-0.65 z"
+         style="fill-opacity:1;stroke-width:1.30906;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Ateliers_pluridisciplinaires"
+     style="display:none">
+    <g
+       transform="matrix(0.71815477,0,0,0.71815477,65.187921,-29.508788)"
+       id="Ateliers_pluridisciplinaires">
+      <circle
+         r="19.208878"
+         cy="40.264759"
+         cx="116.73087"
+         transform="matrix(0.36441483,0,0,0.36441483,-132.69908,28.796006)"
+         id="path6780"
+         style="fill-opacity:1;stroke-width:16.4648;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none" />
+      <g
+         id="g8172"
+         transform="matrix(2.1333332,0,0,-2.1333332,13.499857,367.42774)"
+         style="fill-opacity:0.996154;stroke-opacity:0.988462">
+        <path
+           transform="matrix(0.05856667,0,0,-0.05856667,-55.427399,154.21379)"
+           style="fill-opacity:0.996154;stroke-width:0;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.988462;marker-start:none"
+           d="M 135.93975,40.264759 A 19.208878,19.208878 0 0 1 116.73087,59.473637 19.208878,19.208878 0 0 1 97.521996,40.264759 19.208878,19.208878 0 0 1 116.73087,21.055882 19.208878,19.208878 0 0 1 135.93975,40.264759 Z"
+           id="path8174" />
+      </g>
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer4"
+     inkscape:label="Cours_de_soutien_a_l'orientation"
+     style="display:none">
+    <g
+       id="Cours_de_soutien_a_l'orientation"
+       style="display:none;stroke-opacity:0.996154"
+       transform="matrix(0.37928334,0,0,0.37928334,34.100402,17.553674)">
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path8166"
+         d="m 357.75,444.40625 c -7.15954,0 -12.96875,5.77796 -12.96875,12.9375 0,7.15954 5.80921,12.96875 12.96875,12.96875 7.15954,0 12.9375,-5.80921 12.9375,-12.96875 0,-7.15954 -5.77796,-12.9375 -12.9375,-12.9375 z"
+         style="fill-opacity:1;stroke-width:6.48174;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6363"
+         d="m 357.75,454.125 c 0.44747,0 0.86227,0.086 1.25,0.25 0.38773,0.164 0.73801,0.39426 1.03125,0.6875 0.29324,0.29324 0.5235,0.64352 0.6875,1.03125 0.164,0.38773 0.25,0.80253 0.25,1.25 0,0.44747 -0.086,0.89352 -0.25,1.28125 -0.164,0.38773 -0.39426,0.73801 -0.6875,1.03125 -0.29324,0.29324 -0.64352,0.5235 -1.03125,0.6875 -0.38773,0.164 -0.80253,0.25 -1.25,0.25 -0.44747,0 -0.89352,-0.086 -1.28125,-0.25 -0.38773,-0.164 -0.73801,-0.39426 -1.03125,-0.6875 -0.29324,-0.29324 -0.5235,-0.64352 -0.6875,-1.03125 -0.164,-0.38773 -0.25,-0.83378 -0.25,-1.28125 0,-0.44747 0.086,-0.86227 0.25,-1.25 0.164,-0.38773 0.39426,-0.73801 0.6875,-1.03125 0.29324,-0.29324 0.64352,-0.5235 1.03125,-0.6875 0.38773,-0.164 0.83378,-0.25 1.28125,-0.25 z"
+         style="fill-opacity:1;stroke-width:6.48174;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer5"
+     inkscape:label="Cours_de_soutien_specifique"
+     style="display:none">
+    <g
+       id="Cours_de_soutien_specifique"
+       style="display:inline;fill-opacity:0.996154;stroke-opacity:0.996154"
+       transform="matrix(0.41178012,0,0,0.41178012,37.56977,36.122666)">
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6358"
+         d="m 356.1875,401.09375 c -8.05454,0 -14.59375,6.53921 -14.59375,14.59375 0,8.05454 6.53921,14.5625 14.59375,14.5625 8.05454,0 14.5625,-6.50796 14.5625,-14.5625 0,-8.05454 -6.50796,-14.59375 -14.5625,-14.59375 z"
+         style="fill-opacity:0.996154;stroke-width:3.2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6329"
+         d="m 356.3125,413.9375 c -0.44744,0 -0.86303,0.17553 -1.15625,0.46875 -0.29322,0.29322 -0.46875,0.70881 -0.46875,1.15625 0,0.44744 0.17553,0.83178 0.46875,1.125 0.29322,0.29322 0.70881,0.46875 1.15625,0.46875 0.44744,0 0.83178,-0.17553 1.125,-0.46875 0.29322,-0.29322 0.46875,-0.67756 0.46875,-1.125 0,-0.44744 -0.17553,-0.86303 -0.46875,-1.15625 -0.29322,-0.29322 -0.67756,-0.46875 -1.125,-0.46875 z"
+         style="fill-opacity:0.996154;stroke-width:3.2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6327"
+         d="m 356.3125,413.9375 c 0.44744,0 0.83178,0.17553 1.125,0.46875 0.29322,0.29322 0.46875,0.70881 0.46875,1.15625 0,0.44744 -0.17553,0.83178 -0.46875,1.125 -0.29322,0.29322 -0.67756,0.46875 -1.125,0.46875 -0.44744,0 -0.86303,-0.17553 -1.15625,-0.46875 -0.29322,-0.29322 -0.46875,-0.67756 -0.46875,-1.125 0,-0.44744 0.17553,-0.86303 0.46875,-1.15625 0.29322,-0.29322 0.70881,-0.46875 1.15625,-0.46875 z"
+         style="fill-opacity:0.996154;stroke-width:3.2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         transform="translate(-446.2952,-500.01912)"
+         id="path6324"
+         d="m 356.3125,413.9375 c -0.44744,0 -0.86303,0.17553 -1.15625,0.46875 -0.29322,0.29322 -0.46875,0.70881 -0.46875,1.15625 0,0.44744 0.17553,0.83178 0.46875,1.125 0.29322,0.29322 0.70881,0.46875 1.15625,0.46875 0.44744,0 0.83178,-0.17553 1.125,-0.46875 0.29322,-0.29322 0.46875,-0.67756 0.46875,-1.125 0,-0.44744 -0.17553,-0.86303 -0.46875,-1.15625 -0.29322,-0.29322 -0.67756,-0.46875 -1.125,-0.46875 z"
+         style="fill-opacity:0.996154;stroke-width:3.2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer6"
+     inkscape:label="Cours_techniques"
+     style="display:none">
+    <g
+       id="Cours_techniques"
+       transform="matrix(0.4019761,0,0,-0.4019761,-13.363739,81.438379)"
+       inkscape:label="#g3142"
+       style="fill-opacity:1;stroke-opacity:1">
+      <title
+         id="title3278">template</title>
+      <path
+         inkscape:connector-curvature="0"
+         id="path87"
+         style="fill-opacity:1;stroke-width:2.12598;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:2.23607;stroke-dasharray:none;stroke-opacity:1"
+         d="m 49.067296,199.32385 c 0,-8.21904 -6.662847,-14.88189 -14.881888,-14.88189 -8.219041,0 -14.881889,6.66285 -14.881889,14.88189 0,8.21904 6.662848,14.88189 14.881889,14.88189 8.219041,0 14.881888,-6.66285 14.881888,-14.88189 z" />
+      <g
+         id="g3119"
+         style="fill-opacity:1;stroke-opacity:1">
+        <path
+           d="m 44.815326,199.32385 c 0,-5.87075 -4.759174,-10.62992 -10.629918,-10.62992 -5.870744,0 -10.629921,4.75917 -10.629921,10.62992 0,5.87074 4.759177,10.62992 10.629921,10.62992 5.870744,0 10.629918,-4.75918 10.629918,-10.62992 z"
+           style="fill-opacity:1;stroke-width:2.12598;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:2.23607;stroke-dasharray:none;stroke-opacity:1"
+           id="path85"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer7"
+     inkscape:label="Cours_theoriques"
+     style="display:none">
+    <g
+       id="Cours_theoriques"
+       transform="matrix(0.99529384,0,0,0.99529384,-0.44695171,-1.3774619)">
+      <path
+         id="path6358-3"
+         d="m 0.46521149,-4.6128375 c -3.31669949,0 -6.00941609,2.6927167 -6.00941609,6.0094161 0,3.3166995 2.6927166,5.996548 6.00941609,5.996548 3.31669941,0 5.99654801,-2.6798485 5.99654801,-5.996548 0,-3.3166994 -2.6798486,-6.0094161 -5.99654801,-6.0094161 z"
+         style="fill-opacity:0.996154;stroke-width:1.3177;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path6329-6"
+         d="m 0.51668401,0.67596342 c -0.1842469,0 -0.3553786,0.0722798 -0.47612077,0.19302193 -0.12074216,0.12074217 -0.19302193,0.29187385 -0.19302193,0.47612075 0,0.1842469 0.07227977,0.3425105 0.19302193,0.4632527 0.12074217,0.1207421 0.29187387,0.1930219 0.47612077,0.1930219 0.18424689,0 0.34251047,-0.07228 0.46325263,-0.1930219 C 1.1006788,1.6876166 1.1729586,1.529353 1.1729586,1.3451061 c 0,-0.1842469 -0.07228,-0.35537858 -0.19302196,-0.47612075 C 0.85919448,0.74824319 0.7009309,0.67596342 0.51668401,0.67596342 Z"
+         style="fill-opacity:0.996154;stroke-width:1.3177;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path6327-7"
+         d="m 0.51668401,0.67596342 c 0.18424689,0 0.34251047,0.0722798 0.46325263,0.19302193 C 1.1006788,0.98972752 1.1729586,1.1608592 1.1729586,1.3451061 c 0,0.1842469 -0.07228,0.3425105 -0.19302196,0.4632527 -0.12074216,0.1207421 -0.27900574,0.1930219 -0.46325263,0.1930219 -0.1842469,0 -0.3553786,-0.07228 -0.47612077,-0.1930219 -0.12074216,-0.1207422 -0.19302193,-0.2790058 -0.19302193,-0.4632527 0,-0.1842469 0.07227977,-0.35537858 0.19302193,-0.47612075 C 0.16130541,0.74824319 0.33243711,0.67596342 0.51668401,0.67596342 Z"
+         style="fill-opacity:0.996154;stroke-width:1.3177;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path6324-5"
+         d="m 0.52751086,-0.43920397 c -0.49428682,0 -0.95338895,0.19390802 -1.27730899,0.51782796 C -1.0737181,0.40254403 -1.2676261,0.8616461 -1.2676261,1.3559329 c 0,0.4942868 0.193908,0.9188672 0.51782797,1.2427873 0.32392004,0.3239199 0.78302217,0.5178279 1.27730899,0.5178279 0.49428684,0 0.91886704,-0.1939086 1.24278714,-0.5178279 C 2.094218,2.2748001 2.288126,1.8502197 2.288126,1.3559329 2.288126,0.8616461 2.0942174,0.40254403 1.770298,0.07862399 1.4463779,-0.24529603 1.0217977,-0.43920397 0.52751086,-0.43920397 Z"
+         style="fill-opacity:0.996154;stroke-width:3.53505;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.996154;marker-start:none"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer8"
+     inkscape:label="Enseignant__e__s"
+     style="display:none">
+    <path
+       sodipodi:type="star"
+       style="fill-opacity:1;stroke-width:0.973914;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="Enseignant__e__s"
+       sodipodi:sides="3"
+       sodipodi:cx="0.36393768"
+       sodipodi:cy="2.2478313"
+       sodipodi:r1="6.7946506"
+       sodipodi:r2="3.397325"
+       sodipodi:arg1="0.52606642"
+       sodipodi:arg2="1.573264"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="M 6.2398764,5.6596667 -5.5287678,5.6306258 0.38070444,-4.5467985 Z"
+       inkscape:transform-center-x="0.013378058"
+       inkscape:transform-center-y="2.6969222"
+       inkscape:label="#path3225-6-7-7" />
+  </g>
+</svg>

test/index.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>wikiframe test 3</title>
+    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8">
+    <style type="text/css">
+        body {
+            overflow: hidden;
+            background: pink;
+        }
+        #map {
+            position: absolute;
+            left: 0; top: 0;
+            bottom: 40vh; right: 0;
+            z-index: 0;
+            background: black;
+        }
+        #map #radio {
+            position: absolute;
+            left: 10px;
+            bottom: 10px;
+            width: 360px;
+            height: 60px;
+        }
+        #map a {
+            position: relative;
+            left: 200px;
+            top: 200px;
+        }
+        #pagediv {
+            position: absolute;
+            left: 0; top: 0;
+            bottom: 0; right: 0;
+            z-index: 0;
+            overflow: auto;            
+        }
+        #page {
+            position: absolute;
+            left: 0; right: 0;
+            top: 60vh;
+            height: 100vh;
+        }
+        #page iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+    <div id="pagediv">
+        <div id="map"><a href="#">map</a>
+
+            <div id="radio"><iframe width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&mini=1&feed=%2FErgote_Radio%2Fmagma-reclaim-the-climax-publication-exposition-documentation%2F" frameborder="0" ></iframe></div>
+        </div>
+        <div id="page">
+            <iframe src="/mw"></iframe>
+        </div>
+    </div>
+</body>
+<script>
+(function () {
+
+var pagediv = document.querySelector("#pagediv"),
+    page = document.querySelector("#page"),
+    iframe = document.querySelector("iframe"),
+    scroll_elt = pagediv;
+
+pagediv.scrollTop = 0;
+
+pagediv.addEventListener("scroll", function () {
+    var sh = pagediv.scrollHeight,
+        sp = pagediv.scrollTop;
+    console.log("scroll", sp, sh);
+    if (pagediv.scrollHeight - pagediv.scrollTop === pagediv.clientHeight) {
+        console.log("END OF SCROLL");
+        set_scroll_elt(iframe);
+    }
+});
+
+function set_scroll_elt (elt) {
+    if (scroll_elt === elt) { return; }
+    scroll_elt = elt;
+    if (scroll_elt === pagediv) {
+        pagediv.scrollTop = pagediv.scrollHeight - pagediv.clientHeight - 10;
+        pagediv.style.overflow = "auto";
+        iframe.contentWindow.document.body.style.overflow = "hidden";        
+    } else {
+        pagediv.style.overflow = "hidden";
+        iframe.contentWindow.document.body.style.overflow = "auto";        
+    }
+}
+
+iframe.addEventListener("load", function () {
+    // var ifh = iframe.contentWindow.document.body.scrollHeight;
+    var ifbody = iframe.contentWindow.document.body;
+    var sd = iframe.contentDocument.scrollingElement
+    console.log("scrolling element", sd);
+    ifbody.style.overflow = "hidden";
+    iframe.contentWindow.addEventListener("scroll", function () {
+        var stm = sd.scrollHeight - sd.clientHeight;
+        console.log("pagescroll", sd.scrollTop, stm);
+        if (sd.scrollTop == 0) {
+            set_scroll_elt(pagediv);
+        }
+    })
+    // console.log("load", ifh);
+    // page.style.height = ifh+"px";
+});
+
+})
+
+</script>
+</html>

test/index2.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>mobile map test</title>
+    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8">
+    <style type="text/css">
+       #content {
+        position: absolute; 
+        left: 0;top: 0;
+        bottom: 0; right: 0;
+        box-sizing: border-box;
+        border: 5px solid gray;
+       }
+       #page {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        background: gray;
+
+       }
+       #page .expand {
+        position: absolute;
+        right: 5%;
+        top: 5%;
+        font-size: 32px;
+        color: white;
+        font-weight: bold;
+       }
+    </style>
+</head>
+<body>
+    <div id="content">
+        <div id="search">header/search bar</div>
+        <div id="map">map</div>
+        <div id="page">
+            <h2>This is a compact page</h2>
+            <p>Swipe up to read more. Using <a href="https://css-tricks.com/simple-swipe-with-vanilla-javascript/">this site</a> for simple swipe inspiration. Also <a href="https://css-tricks.com/snippets/html/responsive-meta-tag/">meta tags</a>.</p>
+            <div class="expand">&uarr;</div>
+        </div>
+    </div>
+</body>
+</html>

test/index3.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>wikiframe test</title>
+    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8">
+    <style type="text/css">
+        body {
+            overflow: hidden;
+            background: pink;
+        }
+        #content {
+            position: absolute;
+            left: 0; top: 0;
+            bottom: 0; right: 0;
+            z-index: 1;
+        }
+        #map {
+            position: absolute;
+            left: 0; top: 0;
+            bottom: 0; right: 0;
+            z-index: 0;
+        }
+        #map a {
+            position: relative;
+            left: 200px;
+            top: 200px;
+        }
+    #content iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+
+    </style>
+</head>
+<body>
+    <div id="map"><a href="#">map</a></div>
+    <div id="content">
+        <iframe src="/mw"></iframe>
+    </div>
+</body>
+</html>

test/index4.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>wikiframe test 3</title>
+    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8">
+    <style type="text/css">
+        body {
+            overflow: auto;
+            background: pink;
+        }
+        #map {
+            position: absolute;
+            left: 0; top: 0;
+            bottom: 0; right: 0;
+            z-index: 0;
+        }
+        #map a {
+            position: relative;
+            left: 200px;
+            top: 200px;
+        }
+        #page {
+            position: absolute;
+            left: 0; right: 0;
+            top: 60vh;
+            height: 40vh;
+        }
+        #page iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"><a href="#">map</a></div>
+    <div id="page">
+        <iframe src="/mw"></iframe>
+    </div>
+</body>
+<script>
+var page = document.querySelector("#page"),
+    iframe = document.querySelector("iframe");
+
+iframe.addEventListener("load", function () {
+    var ifh = iframe.contentWindow.document.body.scrollHeight;
+    console.log("load", ifh);
+    page.style.height = ifh+"px";
+});
+window.addEventListener("resize", function () {
+    var ifh = iframe.contentWindow.document.body.scrollHeight;
+    console.log("load", ifh);
+    page.style.height = ifh+"px";    
+})
+</script>
+</html>

test/index5.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>wikiframe test 3</title>
+    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8">
+    <style type="text/css">
+        body {
+            overflow: auto;
+            background: pink;
+        }
+        #map {
+            position: absolute;
+            left: 0; top: 0;
+            bottom: 0; right: 0;
+            z-index: 0;
+        }
+        #map a {
+            position: relative;
+            left: 200px;
+            top: 200px;
+        }
+        #page {
+            position: absolute;
+            left: 0; right: 0;
+            top: 60vh;
+            height: 100vh;
+        }
+        #page iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"><a href="#">map</a></div>
+    <div id="page">
+        <iframe src="/mw"></iframe>
+    </div>
+</body>
+<script>
+</script>
+</html>

wiki/Common.js

@@ -0,0 +1,171 @@
+/* Le CSS placé ici sera appliqué à tous les habillages. */
+.rssicon {
+display: inline-block;
+width: 32px;
+height: 32px;
+background-image: url(/mw/resources/assets/Feed-icon.png);
+}
+
+.hidden {
+    display: none;
+}
+
+table.infobox {
+  width: 30em;
+  font-size: 90%;
+  border: 1px solid #aaaaaa;
+  background-color: #f9f9f9;
+  color: black;
+  margin-bottom: 0.5em;
+  margin-left: 1em;
+  padding: 0.2em;
+  float: right;
+  clear: right;
+  text-align:left;
+}
+
+table.infobox th.head {
+  text-align: center;
+  background-color:#ccccff;
+}
+
+/* Flexgal */
+div.flexgal {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+div.flexgal div.item {
+  display: flexbox;
+}
+div.flexgal div.item p {
+  margin: 0;
+  padding: 0; /* padding + margin seem to conflict with the grid layout */
+}
+a img {
+  border: none;
+  vertical-align: top; /* magically this cancels the containing anchor's bottom border */
+}
+
+div.pubdate {
+  clear: both;
+}
+
+.Media {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 1em;
+}
+
+.Media-figure {
+  margin-right: 1em;
+}
+
+.Media-body {
+  flex: 1;
+}
+
+
+/* F O N T E S */
+@font-face {
+    font-family: "Combined";
+    src: url('/typo/Combined/combined.otf');  
+    font-style:   normal;
+    font-weight:  normal;
+}
+
+@font-face {
+    font-family: 'combinedregular';
+    src: url('/typo/Combined/web/combined.eot');
+    src: url('/typo/Combined/web/combined.eot?#iefix') format('embedded-opentype'),
+         url('/typo/Combined/web/combined.woff2') format('woff2'),
+         url('/typo/Combined/web/combined.woff') format('woff'),
+         url('/typo/Combined/web/combined.ttf') format('truetype'),
+         url('/typo/Combined/web/combined.svg#combinedregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'wremena';
+    src: url('typo/Wremema/webfont/wremena_bold-webfont.woff2') format('woff2'),
+         url('typo/Wremema/webfont/wremena_bold-webfont.woff') format('woff'),
+         url('typo/Wremema/webfont/wremena_bold-webfont.ttf') format('truetype'),
+         url('typo/Wremema/webfont/wremena_bold-webfont.svg#wremenabold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'wremena';
+    src: url('typo/Wremema/webfont/wremena_regular-webfont.woff2') format('woff2'),
+         url('typo/Wremema/webfont/wremena_regular-webfont.woff') format('woff'),
+         url('typo/Wremema/webfont/wremena_regular-webfont.ttf') format('truetype'),
+         url('typo/Wremema/webfont/wremena_regular-webfont.svg#wremenaregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'wremena';
+    src: url('typo/Wremema/webfont/wremena_light-webfont.woff2') format('woff2'),
+         url('typo/Wremema/webfont/wremena_light-webfont.woff') format('woff'),
+         url('typo/Wremema/webfont/wremena_light-webfont.ttf') format('truetype'),
+         url('typo/Wremema/webfont/wremena_light-webfont.svg#wremenalight') format('svg');
+    font-weight: normal;
+    font-style: 200;
+}
+
+@font-face {
+  font-family: 'Coupeur Monospace Bold';
+  src: url('/typo/Coupeur/webfont/CoupeurMonospace-Bold.eot'); /* IE9 Compat Modes */
+  src: url('/typo/Coupeur/webfont/CoupeurMonospace-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/typo/Coupeur/webfont/CoupeurMonospace-Bold.woff') format('woff'), /* Modern Browsers */
+       url('/typo/Coupeur/webfont/CoupeurMonospace-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('/typo/Coupeur/webfont/CoupeurMonospace-Bold.svg#fcf36b8f65c0f0737cd36a2be6922659') format('svg'); /* Legacy iOS */
+       
+  font-style:   normal;
+  font-weight:  700;
+}
+
+@font-face {
+  font-family: 'Coupeur Monospace Normal';
+  src: url('/typo/Coupeur/webfont/CoupeurMonospace-Normal.eot'); /* IE9 Compat Modes */
+  src: url('/typo/Coupeur/webfont/CoupeurMonospace-Normal.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/typo/Coupeur/webfont/CoupeurMonospace-Normal.woff') format('woff'), /* Modern Browsers */
+       url('/typo/Coupeur/webfont/CoupeurMonospace-Normal.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('/typo/Coupeur/webfont/CoupeurMonospace-Normal.svg#4b219f539d302a6ffd9fd41e2da16172') format('svg'); /* Legacy iOS */
+       
+  font-style:   normal;
+  font-weight:  400;
+}
+
+
+/* NEW RULES (MICHAEL ) */
+
+body, body p {
+    font-family: "Coupeur Monospace Normal", monospace;
+}
+h1, h2, h3, h4 {
+        font-family: 'combinedregular','Combined', monospace !important;
+        padding-right: 10%;
+        padding-top: 0.5em;
+        margin: 0;
+        border-color: black;
+        line-height: 1.5em;
+        font-weight: normal;
+font-size: 100%;
+}
+div.header-container {
+  /* display: none; */
+}
+form.header {
+  display: none;
+}
+ul#page-actions {
+  display: none;
+}
+a.talk {
+  display:none;
+}