previewer up

.gitignore

@@ -4,3 +4,4 @@ _site
 .jekyll-metadata
 vendor
 .DS_Store
+notes_graph.json

_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 class="hide-child">
-  <div id='tooltip-content'>
+  <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>

_includes/notes_graph.html

@@ -1,5 +1,8 @@
-<div id="zoom"></div>
+<div class="absolute bottom-1">
-<div id="graph-wrapper">
+  <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>

_includes/notes_graph.json

@@ -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"}]}

_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>
+      <aside class="bt b--dark-green">
-        <h3>Notes mentioning this note</h3>
+        <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">
+          <div class="w-50 mr2 pa2 ba b--dark-green br3">
-          <a class="internal-link b" href="{{ backlink.url | relative_url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a><br>
+            <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="lh-copy">{{ backlink.excerpt | strip_html | truncatewords: 20 }}</div>
+            <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">
-
+    {% include notes_graph.html %}
-  <p>Here are all the notes in this garden, along with their links, visualized as a graph.</p>
-
-  {% include notes_graph.html %}
   </div>
 </div>

_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
+<https://en.wikipedia.org/wiki/RSS>

_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.
+[[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.

_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 {

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('d', (d) => {
-      .attr('y1', (d) => d.source.y)
+        const dx = d.target.x - d.source.x
-      .attr('x2', (d) => d.target.x)
+        const dy = d.target.y - d.source.y
-      .attr('y2', (d) => d.target.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()