feat: zoom and pipelines (#1093)

fix: improve pipelines watcher
feat: lightbox for images
feat: add watch
feat: fix links, support diagrams in images and pipelines
   Pipelines support mmd and dot Links now show .Page.Title in the link text
   if available Remove figure, h, svg shortcodes, we can just use ![]() now
fix: switch to d3 zoomable

closes #1087

Co-authored-by: Oli Evans <oli@tableflip.io>

.gitignore

@@ -4,4 +4,5 @@ public/
 .DS_Store
 yarn.lock
 node_modules
-resources
+resources
+static/_gen

README.md

@@ -29,7 +29,7 @@ brew install go bzr
 
 ### Serve with Live Reload
 ```sh
-yarn serve
+yarn start
 # open http://localhost:1313/ in the browser
 ```
 
@@ -84,56 +84,8 @@ or to a specific version with
 hugo mod get github.com/filecoin-project/specs-actors@v0.7.2
 ```
 
-## Shortcodes
-### `Mermaid` 
-Inline mermaid syntax rendering
-```html
-{{< mermaid >}}
-graph TD
-  A[Christmas] -->|Get money| B(Go shopping)
-  B --> C{Let me think}
-  C -->|One| D[Laptop]
-  C -->|Two| E[iPhone]
-  C -->|Three| F[fa:fa-car Car]
-
-{{</ mermaid >}}
-```
-
-### `svg`
-This shortcode includes zoom and pad features.
-```html
-<!-- Relative path -->
-{{< svg src="pull-flow.mmd.svg" title="Data Transfer - Pull Flow" >}}
-
-<!-- From hugo content folder -->
-{{< svg src="/systems/pull-flow.mmd.svg" title="Data Transfer - Pull Flow" >}}
-```
-
-### `hint`
-```md
-<!-- info|warning|danger -->
-{{< hint info >}}
-**Markdown content**  
-Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
-stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-{{< /hint >}}
-```
-### `figure`
-```md
-{{< figure src="diagrams/pieces.png" title="Pieces, Proving Trees, and Piece Data Structures" zoom="true">}}
-```
-
-### `embed`
-```md
-# src relative to the page
-{{<embed src="piece_store.id" lang="go">}}
-
-# src relative to content folder
-{{<embed src="/systems/piece_store.id" lang="go">}}
-```
-
 ## Page Header
-The first heading should be # Head with `---` like below and should refer to the overall title of the document.
+The first heading should be `# Page Title` with `---` like below and should refer to the overall title of the document.
 
 ```md
 ---
@@ -192,15 +144,30 @@ Random plain text context ...
 
 ```
 
+## Images, diagrams - Markdown images
+To add an image or diagram you just need to use normal markdown syntax. 
+For diagrams you can use the source files and the pipelines will handle converting that to `svg`, we support mermaid and dot source files.
+
+```md
+# relative to the markdown file
+![Alt text](picture.jpg)
+
+# relative to the content folder
+![Alt text](/content/intro/diagram1.mmd)
+
+![Alt text](graph.dot "Graph title")
+```
+> When there's no title we use the alt text as title   
+
 
 ## References - Markdown links
 These links use "portable links" just like `relref` so you can just give it the name of the file and it will fetch the correct relative link and title for the `<a href="/relative/path" title="page title">` automatically.
 You can override the `<a>` title by passing a second `string` in the link definition.
 
 > **Note**: When using anchors the title can't be fetched automatically.
 ```md
-[Storage Power](storage_power_consensus)
-# <a href="/systems/filecoin_blockchain/storage_power_consensus" title="Storage Power Consensus">Storage Power</a>
+[](storage_power_consensus)
+# <a href="/systems/filecoin_blockchain/storage_power_consensus" title="Storage Power Consensus">Storage Power Consensus</a>
 
 [Storage Power](storage_power_consensus "Title to override the page original title")
 # <a href="/systems/filecoin_blockchain/storage_power_consensus" title="Title to override the page original title">Storage Power</a>
@@ -210,6 +177,40 @@ You can override the `<a>` title by passing a second `string` in the link defini
 
 ```
 
+
+## Shortcodes
+### `Mermaid` 
+Inline mermaid syntax rendering
+```html
+{{< mermaid >}}
+graph TD
+  A[Christmas] -->|Get money| B(Go shopping)
+  B --> C{Let me think}
+  C -->|One| D[Laptop]
+  C -->|Two| E[iPhone]
+  C -->|Three| F[fa:fa-car Car]
+
+{{</ mermaid >}}
+```
+
+### `hint`
+```md
+<!-- info|warning|danger -->
+{{< hint info >}}
+**Markdown content**  
+Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
+stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+{{< /hint >}}
+```
+### `embed`
+```md
+# src relative to the page
+{{<embed src="piece_store.id" lang="go">}}
+
+# src relative to content folder
+{{<embed src="/systems/piece_store.id" lang="go">}}
+```
+
 ## Math mode
 For short snippets of math text you can just use the `{{<katex>}}` shortcode, but if you need to write lots of math in a page you can just use `math-mode` and avoid writting the katex shortcode everywhere.
 

assets/_custom.scss

@@ -12,6 +12,8 @@
 @import "katex";
 @import "icons";
 @import "code";
+@import "plugins/lightbox";
+
 
 .markdown {
     overflow-x: hidden;
@@ -48,21 +50,25 @@
     border-radius: $border-radius;
 }
 .diagrams {
-    width: auto;
-    overflow: hidden;
-    cursor: grab;
     height: 400px;
+    overflow: hidden;
+    outline: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.diagrams img {
+    max-height: 100%;
+    max-width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    will-change: transform;
-    outline: none;
 }
 .diagrams:active {
     cursor: grabbing;
 }
 .diagrams-caption {
-    // background-color: #e9ecef;
     border-top: 1px solid #e9ecef;
     padding: 0.5rem;
     font-size: 12px;
@@ -74,43 +80,6 @@
     }
 }
 
-.diagrams svg {
-    transform-origin: top left;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.diagrams.svg svg {
-    background-color: white;
-}
-
-// Figure zoom 
-.figure {
-    width: auto;
-    overflow: hidden;
-    cursor: grab;
-    justify-content: center;
-    align-items: center;
-    will-change: transform;
-    outline: none;
-}
-.figure:active {
-    cursor: grabbing;
-}
-.figure + figcaption {
-    text-align: center;
-}
-
-.figure img {
-    transform-origin: top left;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: auto;
-}
 // search
 #book-search-results {
     width: 100%;

assets/js/katex.js

@@ -1,7 +1,6 @@
 import renderMathInElement from 'katex/dist/contrib/auto-render.mjs'
 
 function renderKatex (target) {
-  console.log('init katex for ', target)
   renderMathInElement(target, {
     ignoredTags: ["script", "noscript", "style", "textarea"],
     throwOnError: false,

assets/js/lightbox.js

@@ -0,0 +1,71 @@
+import zoomable from 'd3-zoomable';
+
+function lightbox () {
+    const transitionSpeedInMilliseconds = 250;
+
+    // template
+    const fragment = new DocumentFragment()
+    const container = document.createElement('div')
+    container.classList.add('lightbox-container')
+
+    const zoom = document.createElement('div')
+    zoom.classList.add('lightbox-zoom')
+
+    const img = document.createElement('img')
+    img.src = ''
+    img.classList.add('lightbox-image')
+
+    container.appendChild(zoom)
+    zoom.appendChild(img)
+    fragment.appendChild(container)
+    document.body.appendChild(fragment)
+
+    // init zoomable in the template
+    const myZoom = zoomable()
+    myZoom(container).htmlEl(zoom)
+
+    // hook events
+    const elements = document.querySelectorAll('.zoomable img')
+    elements.forEach((element) => {
+      element.addEventListener('click', () => {
+          handleElementClick(element);
+      });
+    });
+    container.addEventListener('click', hideLightbox);
+    window.addEventListener('keyup', (event) => {
+        if (event.key === 'Escape') {
+            hideLightbox();
+        }
+    });
+
+    function handleElementClick(htmlElement) {
+      img.attributes['src'].value = htmlElement.attributes['src'].value;
+      if (!isVisible()) {
+        container.classList.remove('hidden');
+        container.classList.add('visible');
+        document.body.classList.add('lightbox-body-scroll-stop')
+      }
+    }
+
+    function hideLightbox() {
+      if (isVisible()) {
+          container.classList.add('hidden');
+
+          setTimeout(() => {
+              container.classList.remove('visible');
+              container.classList.remove('hidden');
+              document.body.classList.remove('lightbox-body-scroll-stop')
+              img.attributes['src'].value = '';
+              myZoom.zoomReset()
+          }, transitionSpeedInMilliseconds);
+      }
+    }
+
+    function isVisible() {
+      return container.classList.contains('visible');
+    }
+  }
+
+  export {
+      lightbox
+  }

assets/js/main.js

@@ -1,25 +1,15 @@
 import '@pwabuilder/pwaupdate'
 import { initToc } from './toc.js'
-import panzoom from 'panzoom'
 import tablesort from 'tablesort'
 import Gumshoe from 'gumshoejs'
 import { buildTocModel } from './content-model'
 import { buildDashboard } from './dashboard-spec'
-import { renderKatex } from "./katex";
+import { renderKatex } from './katex';
+import { lightbox } from './lightbox'
 // Note: the tablesort lib is not ESM friendly, and the sorts expect `Tablesort` to be available on the global
 window.Tablesort = tablesort
 require('tablesort/dist/sorts/tablesort.number.min.js')
 
-function initPanZoom () {
-  var elements = document.querySelectorAll(".zoomable")
-  elements.forEach(function (el) {
-    panzoom(el.querySelector('*:first-child'), {
-      maxZoom: 10,
-      minZoom: 0.5
-    })
-  })
-}
-
 function initTableSort () {
   var elements = document.querySelectorAll(".tablesort")
   elements.forEach(function (el) {
@@ -63,9 +53,8 @@ window.addEventListener('DOMContentLoaded', () => {
   buildDashboard('#dashboard-container', model)
   initTocDepthSlider()
   initTocScrollSpy()
-  initPanZoom()
   initTableSort()
-
+  lightbox()
   // load katex when math-mode page intersect with the viewport
   let observer = new IntersectionObserver((entries, observer) => { 
       entries.forEach(entry => {