feat: zoom and pipelines

.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 => {