Merge remote-tracking branch 'upstream/main' into 10-json-schema-C

obsidianmd · Mar 15, 2024 · a1689eb · a1689eb
2 parents 9262b5c + 49c1ca7
commit a1689eb
Show file tree

Hide file tree

Showing 17 changed files with 182 additions and 110 deletions.
diff --git a/.layouts/default.html → .layouts/canvas.html b/.layouts/default.html → .layouts/canvas.html
@@ -21,7 +21,7 @@
       <div id="canvas-nodes">
         <node id="logo" class="node node-file" data-node-type="file" data-node-file="logo.svg" style="left: 36px; top: 48px;">
             <div class="node-name">logo.svg</div>
-            <img width="160" height="60" src="logo.svg" alt="JSON Feed" />
+            <img width="160" height="60" src="/logo.svg" alt="JSON Feed" />
         </node>
 
         <node id="readme" class="node node-link" data-node-type="file" data-node-file="readme.md" style="left: 36px; top: 240px;">
@@ -34,7 +34,7 @@
           <iframe
             width="100%"
             height="100%"
-            src="/spec/1.0">
+            src="/spec/1.0?hidenav=true">
           </iframe>
         </node>
 
@@ -43,7 +43,7 @@
           <div class="node-text-content">
             <p>Learn more:</p>
             <ul>
-              <li><a href="/">Readme</a></li>
+              <li><a href="/docs/apps">Apps</a></li>
               <li><a href="/spec/1.0">Spec</a></li>
               <li><a href="https://github.com/obsidianmd/jsoncanvas">GitHub</a></li>
             </ul>

diff --git a/.layouts/docs.html b/.layouts/docs.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+{% include head.html %}
+  <body>
+
+    {% include nav.html %}
+
+    <div class="page">
+        {{ content }}
+    </div>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", function() {
+          const urlParams = new URLSearchParams(window.location.search);
+          const hideNav = urlParams.get('hidenav');
+          if(hideNav === 'true') {
+              document.body.classList.add('hidenav');
+          }
+      });
+      document.addEventListener('DOMContentLoaded', function() {
+        const links = document.querySelectorAll('a');
+        links.forEach(link => {
+          const url = new URL(link.href);
+          if (url.hostname !== window.location.hostname) {
+            link.target = '_blank';
+            link.rel = 'noopener noreferrer';
+          }
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/.layouts/head.html b/.layouts/head.html
@@ -3,24 +3,24 @@
     <title>{{ site.title }} — {{ page.title }}</title>
 
     <meta name="viewport"            content="width=device-width, initial-scale=1.0">
-    <meta name="description"         content="{% if page.description -%}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else -%}{{ site.description }}{% endif -%}">
+    <meta name="description"         content="{% if page.content -%}{{ page.content | markdownify | strip_html | strip_newlines | truncate: 160 }}{% else -%}{{ site.description }}{% endif -%}">
     <meta name="author"              content="{{ site.name }}">
 
     <link rel="canonical"            href="{{ site.url }}{{ page.url }}">
     <link rel="icon"                 href="{{ site.url }}/favicon.ico" sizes="32x32">
-    <link rel="icon"                 href="{{ site.url }}/icon.svg"    type="image/svg+xml">
-    <link rel="apple-touch-icon"     href="{{ site.url }}/apple-touch-icon.png">
+    <link rel="icon"                 href="{{ site.url }}/assets/icon.svg"    type="image/svg+xml">
+    <link rel="apple-touch-icon"     href="{{ site.url }}/assets/apple-touch-icon.png">
     <link rel="stylesheet"           href="{{ site.url }}/assets/style.css"  type="text/css">
 
     <meta property="og:site_name"    content="{{ site.title }}">
     <meta property="og:url"          content="{{ site.url }}{{ page.url }}">
     <meta property="og:title"        content="{{ site.title }}">
-    <meta property="og:description"  content="{% if page.description -%}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else -%}{{ site.description }}{% endif -%}">
+    <meta property="og:description"  content="{% if page.content -%}{{ page.content | markdownify | strip_html | strip_newlines | truncate: 160 }}{% else -%}{{ site.description }}{% endif -%}">
     <meta property="og:type"         content="{% if page.title -%}article{% else -%}website{% endif -%}">
     <meta property="og:image"        content="{{ site.url }}/assets/card.png">
 
     <meta name="twitter:card"        content="summary_large_image">
     <meta name="twitter:image"       content="{{ site.url }}/assets/card.png">
     <meta name="twitter:title"       content="{{ site.title }}">
-    <meta name="twitter:description" content="{% if page.description -%}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else -%}{{ site.description }}{% endif -%}">
+    <meta name="twitter:description" content="{% if page.content -%}{{ page.content | markdownify | strip_html | strip_newlines | truncate: 160 }}{% else -%}{{ site.description }}{% endif -%}">
   </head>
diff --git a/.layouts/nav.html b/.layouts/nav.html
@@ -0,0 +1,10 @@
+<div id="navbar">
+      <nav>
+        <a href="/" id="logo"><img width="120" height="44" src="/logo.svg" alt="JSON Feed" /></a>
+        <a href="/spec/1.0" class="link">Spec</a>
+        <a href="/docs/apps" class="link">Apps</a>
+        <a href="https://github.com/obsidianmd/jsoncanvas" class="link">GitHub</a>
+      </nav>
+
+      <hr>
+    </div>
diff --git a/.layouts/node.html b/.layouts/node.html
diff --git a/404.html b/404.html
diff --git a/404.md b/404.md
@@ -0,0 +1,17 @@
+---
+title: Not found
+permalink: /404.html
+layout: default
+---
+
+<div class="container">
+  <svg width="96" height="96" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M-4.36441e-06 102.115C-1.95401e-06 88.3294 11.1757 77.1537 24.9615 77.1538V77.1538C38.7474 77.1538 49.9231 88.3294 49.9231 102.115V102.115C49.9231 115.901 38.7474 127.077 24.9615 127.077V127.077C11.1757 127.077 -6.77481e-06 115.901 -4.36441e-06 102.115V102.115Z" fill="var(--color-ax-1)"/>
+  <path d="M77.1538 24.9615C77.1538 11.1757 88.3295 1.95401e-06 102.115 4.36441e-06V4.36441e-06C115.901 6.77481e-06 127.077 11.1757 127.077 24.9615V24.9615C127.077 38.7474 115.901 49.9231 102.115 49.9231V49.9231C88.3295 49.9231 77.1538 38.7474 77.1538 24.9615V24.9615Z" fill="var(--color-ax-1)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M63.5386 104.102C63.5385 81.6995 81.699 63.539 104.101 63.539H113.462V82.2601H104.101C92.0384 82.2601 82.2597 92.0389 82.2597 104.102L82.2598 113.462L63.5386 113.462L63.5386 104.102Z" fill="var(--color-ax-1)"/>
+  </svg>
+
+  <h1>404</h1>
+
+  <p>Whoops. You've found an unknown part of this infinite canvas. <a href="/">Head back home</a>.</p>
+</div>
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -295,11 +295,7 @@ PLATFORMS
 
 DEPENDENCIES
   github-pages
-  http_parser.rb (~> 0.6.0)
   jekyll-feed (~> 0.12)
-  tzinfo (>= 1, < 3)
-  tzinfo-data
-  wdm (~> 0.1.1)
   webrick (~> 1.8)
 
 BUNDLED WITH

diff --git a/_config.yml b/_config.yml
@@ -20,8 +20,12 @@ defaults:
   - scope:
       path: "**/*"
     values:
-      layout: "default"
+      layout: "canvas"
   - scope:
       path: "spec/**/*.md"
     values:
-      layout: "node"
+      layout: "docs"
+  - scope:
+      path: "docs/**/*.md"
+    values:
+      layout: "docs"
diff --git a/apple-touch-icon.png → assets/apple-touch-icon.png b/apple-touch-icon.png → assets/apple-touch-icon.png
diff --git a/assets/canvas.js b/assets/canvas.js
@@ -9,9 +9,9 @@ const container = document.getElementById('canvas-nodes');
 let isDragging = false;
 let isSpacePressed = false;
 let isPanning = false;
+
 let startX = 0;
 let startY = 0;
-
 let lastTouchX = 0;
 let lastTouchY = 0;
 let touchStartPanX = 0;
@@ -68,7 +68,7 @@ window.addEventListener('wheel', (e) => {
     }
 }, {passive: false});
 
-
+// Buttons
 document.getElementById('zoom-in').addEventListener('click', function() {
     scale = Math.min(scale + ZOOM_SPEED, maxScale);
     document.body.style.setProperty('--scale', scale);
@@ -235,6 +235,7 @@ function drawEdges() {
   });
 }
 
+// Drag nodes
 document.querySelectorAll('.node .node-name').forEach(nodeName => {
   nodeName.addEventListener('mousedown', function(e) {
     if (isSpacePressed) return;
@@ -272,7 +273,7 @@ window.addEventListener('mouseup', function() {
   }
 });
 
-//Panning
+// Panning
 window.addEventListener('keydown', function(e) {
   if (e.code === 'Space') {
     e.preventDefault();

diff --git a/icon.svg → assets/icon.svg b/icon.svg → assets/icon.svg
diff --git a/assets/style.css b/assets/style.css
@@ -14,6 +14,7 @@
   --color-ui-1: #ddd;
   --color-ui-2: #bbb;
   --color-ui-3: #5E0641;
+  --color-ax-1: #8B0A5F;
 
   --color-selection: rgba(139,10,95,0.15);
 }
@@ -26,6 +27,8 @@
   --color-ui-1: #3F062D;
   --color-ui-2: #68154C;
   --color-ui-3: #b40e7a;
+  --color-ax-1: #8B0A5F;
+
   --color-selection: rgba(139,10,95,0.5);
 }
 
@@ -64,10 +67,10 @@ body {
   color: var(--color-tx-1);
 }
 
+/* Canvas area */
 #home {
   overflow: hidden;
 }
-
 #container {
   touch-action: none;
   display: flex;
@@ -115,20 +118,11 @@ body {
 #arrowhead {
   fill: var(--color-ui-3);
 }
-
 .will-pan {
   cursor: grab;
 }
 
-#logo-lockup {
-  display: flex;
-  gap: 8px;
-  font-size: 1.5em;
-  font-weight: 800;
-  text-decoration: none;
-  align-items: center;
-}
-
+/* Canvas output pane */
 #output.hidden {
   transform: translateX(120%);
 }
@@ -204,6 +198,37 @@ body {
   color: var(--color-tx-1);
 }
 
+/* Pages */
+.page {
+  padding: 36px;
+  max-width: 48em;
+  margin: 0 auto;
+}
+nav {
+  padding: 24px 36px;
+  max-width: 48em;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+nav #logo {
+  flex-grow: 1;
+}
+nav .link {
+  color: var(--color-ax-1);
+  text-decoration: none;
+  padding: 0.25em 0.5em;
+  border-radius: 6px;
+}
+nav .link:hover {
+  color: var(--color-bg-1);
+  background-color: var(--color-ax-1);
+}
+.hidenav #navbar {
+ display: none;
+}
+
 /* Specific nodes */
 #logo {
   border-radius: 8px;
@@ -224,13 +249,9 @@ body {
   width: 480px;
   height: 480px;
 }
-#nav {
-  padding-right: 36px;
-}
-.iframe {
-  padding: 36px;
-  max-width: 48em;
-  margin: 0 auto;
+#nav .node-text-content {
+  white-space: nowrap;
+  padding-right: 72px;
 }
 
 /* General node styling */
@@ -340,6 +361,12 @@ a {
 small {
   color: var(--color-tx-2);
 }
+hr {
+  margin: 0;
+  border: 0;
+  height: 1px;
+  background-color: var(--color-ui-1);
+}
 iframe {
   -webkit-appearance: none;
   border: none;
@@ -348,6 +375,9 @@ iframe {
   vertical-align: bottom;
   border-radius: 8px;
 }
+img {
+  vertical-align: bottom;
+}
 code {
   -webkit-appearance: none;
   font-family: var(--font-mono);
@@ -389,6 +419,31 @@ li::marker {
   color: var(--color-tx-2);
 }
 
+table {
+  margin-top: 1.5em;
+  margin-bottom: 2.5em;
+  border-collapse:collapse;
+  border-spacing:0;
+}
+tr {
+  border-bottom: 1px solid var(--color-ui-1);
+}
+td {
+  padding: 0.5em 1em 0.5em 0;
+  line-height: 1.3;
+}
+th:not(:last-child) {
+  padding-right: 1em;
+}
+td:last-child {
+  padding-right: 0;
+}
+th {
+  text-align: left;
+  font-weight: 600;
+  padding: 0 1em 0.5em 0;
+}
+
 button {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -ms-user-select: none;

diff --git a/docs/apps.md b/docs/apps.md
@@ -0,0 +1,21 @@
+# Apps and tools
+
+JSON Canvas is supported by the following apps and tools. If you would like to add an app or tool to this list, please submit a pull request on [GitHub](https://github.com/obsidianmd/jsoncanvas).
+
+## Apps
+
+| Name                                            | Storage | Import | Export |
+| ----------------------------------------------- | :-----: | :----: | :----: |
+| [Obsidian](https://obsidian.md/)                |    ✓    |   ✓    |   ✓    |
+| [Kinopio](https://kinopio.club/)                |         |   ✓    |   ✓    |
+| [Flowchart Fun](https://flowchart.fun/)         |         |   ✓    |   ✓    |
+| [hi-canvas](https://hi-canvas.marknoteapp.com/) |         |   ✓    |   ✓    |
+
+## Tools
+
+- [Heptabase Export](https://github.com/link-ding/Heptabase-Export)
+
+## Libraries
+
+- [Rust crate](https://crates.io/crates/jsoncanvas)
+- [TypeScript Library](https://npmjs.com/package/@trbn/jsoncanvas)