From 0660137321e78a0ca0075ecc4227cd054893aab6 Mon Sep 17 00:00:00 2001
From: Garry Ing <garry.ing@gmail.com>
Date: Mon, 15 Mar 2021 18:22:28 -0400
Subject: [PATCH] previewer up

---
 .gitignore                    |  1 +
 _includes/link-previews.html  |  8 +++++---
 _includes/notes_graph.html    |  7 +++++--
 _includes/notes_graph.json    |  1 -
 _layouts/note.html            | 28 ++++++++++++----------------
 _notes/rss.md                 |  2 +-
 _notes/statement-of-intent.md |  2 +-
 _sass/_digital-garden.scss    | 19 +++++++------------
 assets/js/scripts.js          | 34 +++++++++++++++++++++-------------
 9 files changed, 53 insertions(+), 49 deletions(-)
 delete mode 100644 _includes/notes_graph.json

diff --git a/.gitignore b/.gitignore
index fdda7be..1c58041 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ _site
 .jekyll-metadata
 vendor
 .DS_Store
+notes_graph.json
diff --git a/_includes/link-previews.html b/_includes/link-previews.html
index 31f42b1..0cd073f 100644
--- a/_includes/link-previews.html
+++ b/_includes/link-previews.html
@@ -1,8 +1,10 @@
 <!-- That file is not particularly elegant. This will need a refactor at some point. -->
-<div style="opacity: 0; display: none;" id='tooltip-wrapper' class="bg-white lh-copy">
-  <div id='tooltip-content'>
+<div class="hide-child">
+  <div id='tooltip-wrapper' class="bg-white lh-copy dn o-0 pa2 w5 f6 overflow-hidden absolute child">
+    <div id='tooltip-content'>
+    </div>
   </div>
 </div>
 
-<iframe style="display: none; height: 0; width: 0;" id='link-preview-iframe' src="">
+<iframe class="dn" id="link-preview-iframe">
 </iframe>
diff --git a/_includes/notes_graph.html b/_includes/notes_graph.html
index 1ad017f..2408ec9 100644
--- a/_includes/notes_graph.html
+++ b/_includes/notes_graph.html
@@ -1,5 +1,8 @@
-<div id="zoom"></div>
-<div id="graph-wrapper">
+<div class="absolute bottom-1">
+  <p class="ma0 f7 measure-narrow lh-copy">Here are all the notes in this garden, along with their links, visualized as a graph.</p>
+</div>
+<div id="zoom" class="absolute code f7 bottom-1 right-1"></div>
+<div id="graph-wrapper" class="code f6">
   <script>
     const graphData = {% include notes_graph.json %}
   </script>
diff --git a/_includes/notes_graph.json b/_includes/notes_graph.json
deleted file mode 100644
index 35edd67..0000000
--- a/_includes/notes_graph.json
+++ /dev/null
@@ -1 +0,0 @@
-{"edges":[{"source":"229320080329284392969231993","target":"139376232583985260057851086495"},{"source":"50678562032474","target":"50678562032474"},{"source":"2579652121850163","target":"50678562032474"},{"source":"403333506966985812956264495103083930421","target":"50678562812897"},{"source":"229320080329284392969231993","target":"50678562812897"},{"source":"229320080329284392969231993","target":"30172798"},{"source":"229320080329284392969231993","target":"3181528016773134152954"},{"source":"2579652121850163","target":"872776"},{"source":"229320080329284392969231993","target":"2579652121850163"},{"source":"50678562032474","target":"2019378258741"},{"source":"403333506966985812956264495103083930421","target":"2019378258741"},{"source":"872776","target":"2019378258741"},{"source":"24831158218","target":"1562583972"},{"source":"229320080329284392969231993","target":"1562583972"},{"source":"36028","target":"2624541068405932"},{"source":"229320080329284392969231993","target":"2624541068405932"},{"source":"229320080329284392969231993","target":"36028"},{"source":"403333506966985812956264495103083930421","target":"4302444777154252931"},{"source":"50678562812897","target":"4302444777154252931"}],"nodes":[{"id":"24831158218","path":"/bentway","label":"Bentway"},{"id":"139376232583985260057851086495","path":"/digital-public-garden","label":"Digital Public Garden"},{"id":"50678562032474","path":"/hypercore","label":"Hypercore"},{"id":"403333506966985812956264495103083930421","path":"/hypertext-transfer-protocol","label":"Hypertext Transfer Protocol"},{"id":"50678562812897","path":"/hypertext","label":"Hypertext"},{"id":"30172798","path":"/hypha","label":"Hypha"},{"id":"3181528016773134152954","path":"/infrastructure","label":"Infrastructure"},{"id":"872776","path":"/ipfs","label":"IPFS"},{"id":"2579652121850163","path":"/peer-to-peer","label":"peer-to-peer"},{"id":"2019378258741","path":"/protocol","label":"Protocol"},{"id":"1562583972","path":"/public","label":"Public"},{"id":"2624541068405932","path":"/publishing","label":"Publishing"},{"id":"36028","path":"/rss","label":"RSS"},{"id":"229320080329284392969231993","path":"/statement-of-intent","label":"Statement of Intent"},{"id":"4302444777154252931","path":"/world-wide-web","label":"World Wide Web"}]}
\ No newline at end of file
diff --git a/_layouts/note.html b/_layouts/note.html
index d19122d..3f150b8 100644
--- a/_layouts/note.html
+++ b/_layouts/note.html
@@ -3,46 +3,42 @@ layout: default
 ---
 <div class="flex">
   <article class="w-50">
-    <div>
+    <header class="mb2">
       <h1>{{ page.title }}</h1>
-      <time datetime="{{ page.last_modified_at | date_to_xmlschema }}">{% if page.type != 'pages' %}
+      <time class="code dib f7 ph3 pv2 ba br-pill" datetime="{{ page.last_modified_at | date_to_xmlschema }}">{% if page.type != 'pages' %}
         Last updated on {{ page.last_modified_at | date: "%B %-d, %Y" }}
         {% endif %}
       </time>
-    </div>
+    </header>
 
     <div id="notes-entry-container">
       <div class="note-contents lh-copy">
         {{ content }}
       </div>
 
-      <side>
-        <h3>Notes mentioning this note</h3>
+      <aside class="bt b--dark-green">
+        <h3 class="mb3">Notes mentioning this note</h3>
         {% if page.backlinks.size > 0 %}
-        <div>
+        <div class="flex">
         {% for backlink in page.backlinks %}
-          <div class="backlink-box">
-          <a class="internal-link b" href="{{ backlink.url | relative_url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a><br>
-          <div class="lh-copy">{{ backlink.excerpt | strip_html | truncatewords: 20 }}</div>
+          <div class="w-50 mr2 pa2 ba b--dark-green br3">
+            <h4 class="mt0 mb2"><a class="internal-link" href="{{ backlink.url | relative_url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a></h4>
+            <div class="f7 lh-copy">{{ backlink.excerpt | strip_html | truncatewords: 20 | remove: '[[' | remove: ']]' }}</div>
           </div>
         {% endfor %}
         </div>
         {% else %}
-
         <div>
-          <p>
+          <p class="f7">
             There are no notes linking to this note.
           </p>
         </div>
         {% endif %}
-      </side>
+      </aside>
     </div>
   </article>
 
   <div class="w-50">
-
-  <p>Here are all the notes in this garden, along with their links, visualized as a graph.</p>
-
-  {% include notes_graph.html %}
+    {% include notes_graph.html %}
   </div>
 </div>
\ No newline at end of file
diff --git a/_notes/rss.md b/_notes/rss.md
index e2ceee9..c8899ea 100644
--- a/_notes/rss.md
+++ b/_notes/rss.md
@@ -4,4 +4,4 @@ title: RSS
 
 RSS (RDF Site Summary or Really Simple Syndication) is a web feed that allows users and applications to access updates to websites in a standardized, computer-readable format. These feeds can, for example, allow a user to keep track of many different websites in a single news aggregator. The news aggregator will automatically check the RSS feed for new content, allowing the list to be automatically passed from website to website or from website to user. This passing of content is called web syndication. Websites usually use RSS feeds to publish frequently updated information, such as blog entries, news headlines, or episodes of audio and video series. RSS is also used to distribute podcasts. An RSS document (called "feed", "web feed", or "channel") includes full or summarized text, and metadata, like [[publishing]] date and author's name.
 
-https://en.wikipedia.org/wiki/RSS
\ No newline at end of file
+<https://en.wikipedia.org/wiki/RSS>
\ No newline at end of file
diff --git a/_notes/statement-of-intent.md b/_notes/statement-of-intent.md
index dbb67bd..8ff0366 100644
--- a/_notes/statement-of-intent.md
+++ b/_notes/statement-of-intent.md
@@ -2,4 +2,4 @@
 title: Statement of Intent
 ---
 
-[[Hypha]]’s practice is situated across many topics that are present in the theme of _Adaptive Reuse & Creative Misuse_. Drawing from our collective experiences, histories, and methodologies, our goal for the micro-residency to investigate how notions of digital [[infrastructure]] can be reused, reinterpreted, and reconfigured, to realize a kind of public space. Our approach to this theme will be composed of a few, very preliminary, subjects that will ground the residency: the situated histories of digital infrastructure, the implications of protocols for [[publishing]] ([[Hypertext]], [[RSS]], [[Peer-to-peer]]) in defining public spaces, and the possibilities of cooperative approaches to maintenance and repair. Our intent is to make the process of this investigation [[public]] through online tools mapping our thinking about the theme (Open channels in Are.na as one example) and cultivating a [[Digital Public Garden]] as part of Hypha’s contributions to the initiative (a [[RSS|resyndicatable]] adaptive online notebook). The outputs from the micro-residency will be a written contribution to the [_Field Guide to the Digital Real_](https://www.are.na/from-later/field-guide-to-the-digital-real) and a micro-website containing the synthesis of our investigations and our evolving practice. The outputs will be textual and visual, and draw from our collaborative practices as a cooperative. They will explore ways to represent relationships with existing and emergent technologies within our communities. Through our micro-residency we will capture a poetic interpretation of the theme and provide prompts for institutions in the city on how they could reconfigure technology to create radically creative platforms.
\ No newline at end of file
+[[Hypha]]’s practice is situated across many topics that are present in the theme of _Adaptive Reuse & Creative Misuse_. Drawing from our collective experiences, histories, and methodologies, our goal for the micro-residency to investigate how notions of digital [[infrastructure]] can be reused, reinterpreted, and reconfigured, to realize a kind of public space. Our approach to this theme will be composed of a few, very preliminary, subjects that will ground the residency: the situated histories of digital infrastructure, the implications of protocols for [[publishing]] ([[Hypertext]], [[RSS]], [[Peer-to-peer]]) in defining public spaces, and the possibilities of cooperative approaches to maintenance and repair. Our intent is to make the process of this investigation [[public]] through online tools mapping our thinking about the theme (Open channels in Are.na as one example) and cultivating a [[Digital Public Garden]] as part of Hypha’s contributions to the initiative (a [[RSS|resyndicatable]] adaptive online notebook). The outputs from the [[bentway|micro-residency]] will be a written contribution to the [_Field Guide to the Digital Real_](https://www.are.na/from-later/field-guide-to-the-digital-real) and a micro-website containing the synthesis of our investigations and our evolving practice. The outputs will be textual and visual, and draw from our collaborative practices as a cooperative. They will explore ways to represent relationships with existing and emergent technologies within our communities. Through our micro-residency we will capture a poetic interpretation of the theme and provide prompts for institutions in the city on how they could reconfigure technology to create radically creative platforms.
\ No newline at end of file
diff --git a/_sass/_digital-garden.scss b/_sass/_digital-garden.scss
index 096f464..fc806da 100644
--- a/_sass/_digital-garden.scss
+++ b/_sass/_digital-garden.scss
@@ -15,8 +15,9 @@
 
 // Notes Graph
 
-.links line {
+.links path {
   stroke: $accent-color;
+  fill: transparent;
 }
 
 .nodes circle {
@@ -37,6 +38,11 @@
   fill: $accent-color;
 }
 
+.inactive {
+  opacity: 0.25;
+  transition: opacity 0.15s ease-out;
+}
+
 // Notes inline styles
 
 .internal-link {
@@ -57,19 +63,8 @@
 
 // Link previews
 
-content a.internal-link {
-  background-color: rgba($accent-color, 0.1);
-}
-
 #tooltip-wrapper {
-  padding: 1em;
-  overflow: hidden;
-  position: absolute;
-  width: 400px;
   max-height: 250px;
-  font-size: 0.8em;
-  opacity: 0;
-  transition: opacity 100ms;
 }
 
 #tooltip-wrapper:after {
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index 1437df3..36e9ec2 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -85,7 +85,7 @@ if (typeof graphData !== 'undefined') {
   const MAX_NODE_SIZE = 12
   const ACTIVE_RADIUS_FACTOR = 1.5
   const STROKE = 1
-  const FONT_SIZE = 16
+  const FONT_SIZE = 12
   const TICKS = 200
   const FONT_BASELINE = 40
   const MAX_LABEL_LENGTH = 50
@@ -120,35 +120,35 @@ if (typeof graphData !== 'undefined') {
 
   const onMouseover = function (d) {
     const relatedNodesSet = new Set()
+    const destinationID = d3.select(d.target).data()[0].id
     linksData
-      .filter((n) => n.target.id === d.id || n.source.id === d.id)
+      .filter((n) => n.target.id === destinationID || n.source.id === destinationID)
       .forEach((n) => {
         relatedNodesSet.add(n.target.id)
         relatedNodesSet.add(n.source.id)
       })
-
     node.attr('class', (nodeD) => {
-      if (nodeD.id !== d.id && !relatedNodesSet.has(nodeD.id)) {
+      if (nodeD.id !== destinationID && !relatedNodesSet.has(nodeD.id)) {
         return 'inactive'
       }
       return ''
     })
 
     link.attr('class', (linkD) => {
-      if (linkD.source.id !== d.id && linkD.target.id !== d.id) {
+      if (linkD.source.id !== destinationID && linkD.target.id !== destinationID) {
         return 'inactive'
       }
       return ''
     })
 
     link.attr('stroke-width', (linkD) => {
-      if (linkD.source.id === d.id || linkD.target.id === d.id) {
+      if (linkD.source.id === destinationID || linkD.target.id === destinationID) {
         return STROKE * 2
       }
       return STROKE
     })
     text.attr('class', (textD) => {
-      if (textD.id !== d.id && !relatedNodesSet.has(textD.id)) {
+      if (textD.id !== destinationID && !relatedNodesSet.has(textD.id)) {
         return 'inactive'
       }
       return ''
@@ -166,6 +166,7 @@ if (typeof graphData !== 'undefined') {
   const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
   element.setAttribute('width', graphWrapper.getBoundingClientRect().width)
   element.setAttribute('height', window.innerHeight * 0.8)
+  element.classList.add('absolute', 'vh-100')
   graphWrapper.appendChild(element)
 
   const reportWindowSize = () => {
@@ -190,7 +191,7 @@ if (typeof graphData !== 'undefined') {
       d3
         .forceLink(linksData)
         .id((d) => d.id)
-        .distance(70)
+        .distance(100)
     )
     .force('center', d3.forceCenter(width / 2, height / 2))
     .force('collision', d3.forceCollide().radius(80))
@@ -231,10 +232,17 @@ if (typeof graphData !== 'undefined') {
       .attr('x', (d) => d.x)
       .attr('y', (d) => d.y - (FONT_BASELINE - nodeSize[d.id]) / zoomLevel)
     link
-      .attr('x1', (d) => d.source.x)
-      .attr('y1', (d) => d.source.y)
-      .attr('x2', (d) => d.target.x)
-      .attr('y2', (d) => d.target.y)
+      .attr('d', (d) => {
+        const dx = d.target.x - d.source.x
+        const dy = d.target.y - d.source.y
+        const dr = Math.sqrt(dx * dx + dy * dy)
+        return 'M' +
+            d.source.x + ',' +
+            d.source.y + 'A' +
+            dr + ',' + dr + ' 0 0,1 ' +
+            d.target.x + ',' +
+            d.target.y
+      })
   }
 
   const restart = () => {
@@ -254,7 +262,7 @@ if (typeof graphData !== 'undefined') {
 
     link = link.data(linksData, (d) => `${d.source.id}-${d.target.id}`)
     link.exit().remove()
-    link = link.enter().append('line').attr('stroke-width', STROKE).merge(link)
+    link = link.enter().append('path').attr('stroke-width', STROKE).merge(link)
 
     text = text.data(nodesData, (d) => d.label)
     text.exit().remove()