Changes for better url and history support

.gitattributes

@@ -1 +1,3 @@
 *.jpg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

.htaccess

@@ -0,0 +1,70 @@
+# Don't edit: generated using gulpfile.js
+RewriteEngine On
+RewriteRule "^2018/data-flaneur$" "index.html"
+RewriteRule "^2018/digital-cultures$" "index.html"
+RewriteRule "^article/choose-how-you-feel-you-have-seven-options$" "index.html"
+RewriteRule "^assets/video/guerilla_project.mp4$" "index.html"
+RewriteRule "^assets/video/samawati.mp4$" "index.html"
+RewriteRule "^diede$" "index.html"
+RewriteRule "^diede/image/1$" "index.html"
+RewriteRule "^diede/image/2$" "index.html"
+RewriteRule "^emotionhero$" "index.html"
+RewriteRule "^event/cqrrelations$" "index.html"
+RewriteRule "^exhibition/codesandmodes$" "index.html"
+RewriteRule "^exhibition/hello-world$" "index.html"
+RewriteRule "^exhibition/kickstart$" "index.html"
+RewriteRule "^exhibition/mood_swings$" "index.html"
+RewriteRule "^exhibition/route-du-nord$" "index.html"
+RewriteRule "^exhibition/stateofemotion$" "index.html"
+RewriteRule "^exhibition/the-new-current$" "index.html"
+RewriteRule "^ghost-worker$" "index.html"
+RewriteRule "^ghost-worker/image/1$" "index.html"
+RewriteRule "^ghost-worker/image/2$" "index.html"
+RewriteRule "^ghost-worker/image/3$" "index.html"
+RewriteRule "^ghost-worker/image/4$" "index.html"
+RewriteRule "^ghost-worker/video/1$" "index.html"
+RewriteRule "^in4art-salon$" "index.html"
+RewriteRule "^mvp1$" "index.html"
+RewriteRule "^mvp1/image/1$" "index.html"
+RewriteRule "^mvp1/image/2$" "index.html"
+RewriteRule "^mvp1/image/3$" "index.html"
+RewriteRule "^mvp2$" "index.html"
+RewriteRule "^mvp2/image/1$" "index.html"
+RewriteRule "^mvp2/image/2$" "index.html"
+RewriteRule "^mvp2/image/3$" "index.html"
+RewriteRule "^mvp3$" "index.html"
+RewriteRule "^mvp3/image/1$" "index.html"
+RewriteRule "^mvps$" "index.html"
+RewriteRule "^organisation/constant$" "index.html"
+RewriteRule "^organisation/v2_$" "index.html"
+RewriteRule "^person/cristina-cochior$" "index.html"
+RewriteRule "^person/donald-schenkel$" "index.html"
+RewriteRule "^person/joseph-huot$" "index.html"
+RewriteRule "^person/merijn-van-moll$" "index.html"
+RewriteRule "^person/mikel-folgerts$" "index.html"
+RewriteRule "^person/ward-goes$" "index.html"
+RewriteRule "^place/in4art$" "index.html"
+RewriteRule "^place/q21$" "index.html"
+RewriteRule "^plottingdata$" "index.html"
+RewriteRule "^residency/q21$" "index.html"
+RewriteRule "^residency/summer-sessions$" "index.html"
+RewriteRule "^spectacular-spectator-mood-meter$" "index.html"
+RewriteRule "^sustaining-gazes$" "index.html"
+RewriteRule "^sustaining-gazes/image/1$" "index.html"
+RewriteRule "^sustaining-gazes/image/2$" "index.html"
+RewriteRule "^venue/cruise-terminal$" "index.html"
+RewriteRule "^venue/zoho$" "index.html"
+RewriteRule "@type/Event" "index.html"
+RewriteRule "@type/Report" "index.html"
+RewriteRule "@type/VideoObject" "index.html"
+RewriteRule "@type/MediaObject" "index.html"
+RewriteRule "@type/ImageObject" "index.html"
+RewriteRule "@type/ExhibitionEvent" "index.html"
+RewriteRule "@type/CreativeWorkSeries" "index.html"
+RewriteRule "@type/Organization" "index.html"
+RewriteRule "@type/Place" "index.html"
+RewriteRule "@type/Person" "index.html"
+RewriteRule "@type/EventVenue" "index.html"
+RewriteRule "@type/Museum" "index.html"
+RewriteRule "@type/PerformingGroup" "index.html"
+RewriteRule "@type/VisualArtsEvent" "index.html"

gulpfile.js

@@ -78,6 +78,34 @@ gulp.task('d3', function() {
       .pipe(gulp.dest(paths.scripts.d3destDir)) // save .min.js
 });
 
+function createHtaccessFromFlattenedJsonld(flattened) {
+  let contentLines = [
+    "# Don't edit: generated using gulpfile.js",
+    "RewriteEngine On"
+  ];
+
+  let typeLines = {}; // prevent duplicates
+
+  for(let el of flattened['@graph']) {
+      try{
+        let url = new URL(el['@id']);
+        if(url.origin != 'https://rubenvandeven.com') {
+          console.error("Invalid url in id", el['@id']);
+          continue;
+        }
+        if(url.pathname == '' || url.pathname == '/') continue;
+        let pathname = url.pathname.substr(1); // remove preceding slash ("/ruben" -> "ruben")
+        contentLines.push(`RewriteRule "^${pathname}$" "index.html"`);
+        let type = el['@type'].replace(/.*[#|\/]/, "");
+        typeLines[type] = `RewriteRule "^@type/${type}$" "index.html"`;
+      } catch(err) {
+        // not an url
+      }
+    }
+
+    require('fs').writeFileSync('.htaccess', contentLines.join("\n")+"\n"+Object.values(typeLines).join("\n") + "\n");
+}
+
 gulp.task('jsonld', function(){
   return gulp.src(paths.data.src)
     .pipe(through.obj(function (file, enc, callback) {
@@ -86,6 +114,7 @@ gulp.task('jsonld', function(){
       // console.log(data);
       jsonld.flatten(data, {}, (err, flattened)=> {
         transformedFile.contents = Buffer.from(JSON.stringify(flattened), enc);
+        createHtaccessFromFlattenedJsonld(flattened);
         callback(null, transformedFile)
       });
     }))

icon.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 77.863091 77.863091"
+   height="77.863091mm"
+   width="77.863091mm">
+  <defs
+     id="defs2" />
+  <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
+     transform="translate(-16.630955,-39.220242)"
+     id="layer1">
+    <circle
+       r="38.931545"
+       cy="78.151787"
+       cx="55.5625"
+       id="path815"
+       style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:0.40000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0.75590557;stroke-opacity:1" />
+  </g>
+</svg>

rubenvandeven.jsonld

@@ -159,9 +159,9 @@
               {
                   "@id": "r:/diede",
                   "@type": "MediaObject",
-                  "name": "Writing lesson",
+                  "name": "Exercises in overfitting",
                   "dateCreated": "2019",
-                  "description": "I taught a computer how to write the name of my son. This machine learning processes is visualised with a pen plotter.",
+                  "description": "I taught a computer how to write the name of my son. The progression of this machine learning processes is materialised with a pen plotter.",
                   "s:seeAlso": [ "https://gitlab.com/rubenvandeven/diede"],
                   "image": [
                       {

src/js/portfolio.js

@@ -159,7 +159,6 @@ function createLinkMap(graph) {
 var nodeSize = 40;
 var selectedNodeSize = 140;
 var firstNodeId = "https://rubenvandeven.com/";
-var startNodeId = location.search.startsWith("?id=") ? location.search.substr(4) : 'https://rubenvandeven.com'+location.pathname;
 
 function getSizeForNode(node) {
   if(node.hasOwnProperty('https://schema.org/thumbnailUrl'))
@@ -437,6 +436,8 @@ var centerByType = function(types, updateHistory) {
     // TODO: working
     console.log(types[0], getDisplayAttr(types[0]),types.map(getDisplayAttr));
     history.pushState({types: types}, "", "/@type/"+(types.map(getDisplayAttr).join("+")));
+  } else {
+    history.replaceState({types: types}, "", "/@type/"+(types.map(getDisplayAttr).join("+")));
   }
   positionNodesInCenter(idxs.length ? idxs : null);
 }
@@ -687,14 +688,19 @@ var selectNode = function(idx, updateHistory){
   }
 
 
-  if(updateHistory) {
+  if(true) { // always set history state, but replace instead of update on 'updatehistory'
     let id = null;
     if(nodeDatum['@id'].startsWith(/*location.origin*/'https://rubenvandeven.com/')){
       id = nodeDatum['@id'].substr(26);
     } else {
       id = '?id=' + nodeDatum['@id'];
     }
+
+    if(updateHistory) {
       history.pushState({node: idx}, getNodeLabel(nodeDatum), "/"+id);
+    } else {
+      history.replaceState({node: idx}, getNodeLabel(nodeDatum), "/"+id);
+    }
   }
 
   // set global var
@@ -1165,8 +1171,20 @@ function moveViewboxPx(dx, dy){
 // start by selecting the first node :-)
 // selectNode(currentNodeIdx+1);
 // positionNodesInCenter(currentNodeIdx);
-var firstNode = graph['nodes'].find(n => n['@id'] === startNodeId);
+
-selectNode(graph['nodes'].indexOf(firstNode), false);
+if(location.pathname.startsWith('/@type/')) {
+  for(let t in types) {
+    if(getDisplayAttr(t) == location.pathname.substr(7)) {
+      centerByType(t, false);
+    }
+  }
+} else{
+  let startNodeId = location.search.startsWith("?id=") ? location.search.substr(4) : 'https://rubenvandeven.com'+location.pathname;
+  let firstNode = graph['nodes'].find(n => n['@id'] === startNodeId);
+  selectNode(graph['nodes'].indexOf(firstNode), false);
+}
+
+
 
 // closeDetails(); // hide details at first
 // positionNodesInCenter(currentNodeIdx+1);