Feat/guide/working with data

.cspell/template-words.txt

@@ -1,5 +1,7 @@
 # Words found in our template code
 brower
+# Silly thing that pops up in Mermaid diagrams
+CAID
 coreconcepts
 elif
 endfor
@@ -8,6 +10,8 @@ endlink
 endmacro
 endrenderlayoutblock
 gtag
+# Silly thing that pops up in Mermaid diagrams
+kafe
 katex
 layoutblock
 MSIE

src/client-side/index.ts

@@ -148,3 +148,6 @@ const openDetailsOnFragmentIdNavigation = () => {
 openDetailsOnFragmentIdNavigation();
 window.addEventListener("hashchange", openDetailsOnFragmentIdNavigation);
 
+// Load MyFonts counter for URW Form fonts asynchronously, not in JS.
+// This is a workaround for a weird error thrown by netlify-plugin-checklinks.
+fetch("//hello.myfonts.net/count/3e423c");

src/pages/_data/navigation/mainNav.json5

@@ -26,7 +26,7 @@
       ]
     },
     { title: "Build", url: "/build/", children: [
-        { title: "Working with Data", url: "/build/#working-with-data", children: [
+        { title: "Working with Data", url: "/build/working-with-data/", children: [
           { title: "Entries", url: "/build/entries/" },
         ]},
       ]

src/pages/build/index.md

@@ -12,15 +12,9 @@ This Build Guide organizes everything you need to know about developing Holochai
 
 ## Working with data
 
-Shared data in a Holochain application is stored as a graph database of **bases** connected by **links**. A base is identified by a 32-byte identifier such as a hash or public key, and may have data and metadata associated with it. There are four types of bases:
-
-* An **entry** is an arbitrary blob of bytes that your application code gives meaning to.
-    * An **agent ID** is a special type of entry that contains the public key of a participant in an application.
-* An **action** records the act of manipulating the graph and contains metadata about the act, such as authorship and timestamp.
-* An **external reference** is the ID of a resource that exists outside the database, such as the hash of an IPFS resource or the public key of an Ethereum address.
-
 ::: topic-list
 ### Topics {data-no-toc}
 
+* [Overview](/build/working-with-data/) --- general concepts related to working with data in Holochain
 * [Entries](/build/entries/) --- creating, reading, updating, and deleting
 :::

src/scss/_fonts.scss

@@ -1,6 +1,3 @@
-/* Imports */
-
-@import url("//hello.myfonts.net/count/3e423c");
 @font-face {
   font-family: "URW Form";
   font-weight: 700;

src/scss/_mermaid-diagrams.scss

@@ -0,0 +1,181 @@
+.mermaid-flowchart {
+  font-size: 14px;
+  fill: #333;
+  margin-left: auto;
+  margin-right: auto;
+
+  .error-icon {
+    fill: #552222;
+  }
+
+  .error-text {
+    fill: #552222;
+    stroke: #552222;
+  }
+
+  .edge-thickness-normal {
+    stroke-width: 2px;
+  }
+
+  .edge-thickness-thick {
+    stroke-width: 3.5px;
+  }
+
+  .edge-pattern-solid {
+    stroke-dasharray: 0;
+  }
+
+  .edge-pattern-dashed {
+    stroke-dasharray: 3;
+  }
+
+  .edge-pattern-dotted {
+    stroke-dasharray: 2;
+  }
+
+  .marker {
+    fill: #333333;
+    stroke: #333333;
+  }
+
+  .marker.cross {
+    stroke: #333333;
+  }
+
+  svg {
+    font-size: 16px;
+  }
+
+  .label {
+    color: #333;
+  }
+
+  .cluster-label text {
+    fill: #333;
+  }
+
+  .cluster-label span, p {
+    color: #333;
+  }
+
+  .label text, span, p {
+    fill: #333;
+    color: #333;
+  }
+
+  .node {
+    rect, circle, ellipse, polygon, path {
+      fill: #ececff;
+      stroke: #9370db;
+      stroke-width: 1px;
+    }
+
+    .katex path {
+      fill: #000;
+      stroke: #000;
+      stroke-width: 1px;
+    }
+
+    .label {
+      text-align: center;
+    }
+
+    &.clickable {
+      cursor: pointer;
+    }
+  }
+
+  .flowchart-label text {
+    text-anchor: middle;
+  }
+
+  .arrowheadPath {
+    fill: #333333;
+  }
+
+  .edgePath .path {
+    stroke: #333333;
+    stroke-width: 2px;
+  }
+
+  .flowchart-link {
+    stroke: #333333;
+    fill: none;
+  }
+
+  .edgeLabel {
+    background-color: #e8e8e8;
+    text-align: center;
+
+    rect {
+      opacity: 0.5;
+      background-color: #e8e8e8;
+      fill: #e8e8e8;
+    }
+  }
+
+  .labelBkg {
+    background-color: rgba(232, 232, 232, 0.85);
+  }
+
+  .cluster {
+    rect {
+      fill: #ffffde;
+      stroke: #aaaa33;
+      stroke-width: 1px;
+    }
+
+    text {
+      fill: #333;
+    }
+  }
+
+  .cluster span, p {
+    color: #333;
+  }
+
+  div.mermaidTooltip {
+    position: absolute;
+    text-align: center;
+    max-width: 200px;
+    padding: 2px;
+    font-size: 12px;
+    background: hsl(80, 100%, 96.2745098039%);
+    border: 1px solid #aaaa33;
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 100;
+  }
+
+  .flowchartTitleText {
+    text-anchor: middle;
+    font-size: 18px;
+    fill: #333;
+  }
+
+  .nodeLabel * {
+    margin: 0;
+  }
+
+  /* External references, used on the working with data page and others */
+  .external > * {
+    stroke-dasharray: 3 3 !important;
+    fill: transparent !important;
+
+    span {
+      stroke-dasharray: 3 3 !important;
+      fill: transparent !important;
+    }
+  }
+
+  /* Original actions, for diagrams showing the relationships of CRUD actions */
+  .original > * {
+    fill: #F2F2F2 !important;
+    stroke: #AAA !important;
+
+    span {
+      fill: #F2F2F2 !important;
+      stroke: #AAA !important;
+    }
+  }
+}

src/scss/site.scss

@@ -2,6 +2,7 @@
 @import 'fonts';
 @import 'svg-icons';
 @import 'base-element-styles';
+@import 'mermaid-diagrams';
 
 // @import 'debug';