JSON Canvas

docs/features/Canvas.canvas

@@ -0,0 +1,13 @@
+{
+	"nodes":[
+		{"id":"a85fff7a7493ef52","type":"group","x":-600,"y":-240,"width":1340,"height":980,"color":"4","label":"Canvas Group"},
+		{"id":"05e0c45c85417543","type":"link","url":"https://jsoncanvas.org/spec/1.0/","x":300,"y":300,"width":401,"height":400,"color":"3"},
+		{"id":"5997bc7558e18f0b","type":"text","text":"Plain text note","x":-560,"y":470,"width":250,"height":60,"color":"5"},
+		{"id":"f583da2f9411eca1","x":-200,"y":-200,"width":400,"height":400,"color":"1","type":"file","file":"features/popover previews.md"}
+	],
+	"edges":[
+		{"id":"185431e9b6c045dc","fromNode":"5997bc7558e18f0b","fromSide":"right","toNode":"05e0c45c85417543","toSide":"left","fromEnd":"arrow"},
+		{"id":"be55c44ecde61a30","fromNode":"f583da2f9411eca1","fromSide":"right","toNode":"05e0c45c85417543","toSide":"top","color":"2","label":"Specifications"},
+		{"id":"1ff7941319ca11b8","fromNode":"f583da2f9411eca1","fromSide":"left","toNode":"5997bc7558e18f0b","toSide":"top","color":"6"}
+	]
+}

quartz.config.ts

@@ -81,6 +81,7 @@ const config: QuartzConfig = {
       Plugin.ContentPage(),
       Plugin.FolderPage(),
       Plugin.TagPage(),
+      Plugin.CanvasPage(),
       Plugin.ContentIndex({
         enableSiteMap: true,
         enableRSS: true,

quartz.layout.ts

@@ -1,4 +1,4 @@
-import { PageLayout, SharedLayout } from "./quartz/cfg"
+import { PageLayout, SharedLayout, CanvasLayout } from "./quartz/cfg"
 import * as Component from "./quartz/components"
 
 // components shared across all pages
@@ -48,3 +48,8 @@ export const defaultListPageLayout: PageLayout = {
   ],
   right: [],
 }
+
+// components for canvas pages
+export const defaultCanvasPageLayout: CanvasLayout = {
+  left: [Component.PageTitle(), Component.Search(), Component.Darkmode(), Component.Explorer()],
+}

quartz/build.ts

@@ -70,7 +70,7 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
 
   perf.addEvent("glob")
   const allFiles = await glob("**/*.*", argv.directory, cfg.configuration.ignorePatterns)
-  const fps = allFiles.filter((fp) => fp.endsWith(".md")).sort()
+  const fps = allFiles.filter((fp) => fp.endsWith(".md") || fp.endsWith(".canvas")).sort()
   console.log(
     `Found ${fps.length} input files from \`${argv.directory}\` in ${perf.timeSince("glob")}`,
   )

quartz/cfg.ts

@@ -95,3 +95,4 @@ export interface FullPageLayout {
 
 export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right">
 export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer" | "afterBody">
+export type CanvasLayout = Pick<FullPageLayout, "left">

quartz/components/index.ts

@@ -1,6 +1,7 @@
 import Content from "./pages/Content"
 import TagContent from "./pages/TagContent"
 import FolderContent from "./pages/FolderContent"
+import CanvasContent from "./pages/CanvasContent"
 import NotFound from "./pages/404"
 import ArticleTitle from "./ArticleTitle"
 import Darkmode from "./Darkmode"
@@ -26,6 +27,7 @@ export {
   Content,
   TagContent,
   FolderContent,
+  CanvasContent,
   Darkmode,
   Head,
   PageTitle,

quartz/components/pages/CanvasContent.tsx

@@ -0,0 +1,105 @@
+import { ComponentChildren } from "preact"
+import { htmlToJsx } from "../../util/jsx"
+import d3 from "d3"
+import {
+  QuartzComponent,
+  QuartzComponentConstructor,
+  QuartzComponentProps,
+  QuartzCanvasComponent,
+  CanvasNode,
+  CanvasEdge,
+  CanvasTextNode,
+  CanvasFileNode,
+  CanvasLinkNode,
+  CanvasGroupNode,
+} from "../types"
+import { type FilePath, slugifyFilePath } from "../../util/path"
+import fs from "fs"
+
+function loadCanvas(file: FilePath): QuartzCanvasComponent {
+  const data = fs.readFileSync(file, "utf8") ?? "{}"
+  console.log(data)
+  return JSON.parse(data) as QuartzCanvasComponent
+}
+
+function renderTextNodes(nodes: CanvasTextNode[]): ComponentChildren {
+  return nodes.map((node) => (
+    <div
+      class="canvas canvas-node canvas-text-node"
+      style={{
+        position: "fixed",
+        width: node.width,
+        height: node.height,
+        left: node.x,
+        top: node.y,
+      }}
+    >
+      {node["text"]}
+    </div>
+  ))
+}
+
+function renderFileNodes(nodes: CanvasFileNode[]): ComponentChildren {
+  return nodes.map((node) => (
+    <div
+      class="internal alias internal-canvas"
+      data-slug={slugifyFilePath(node.file as FilePath)}
+      data-x={node.x}
+      data-y={node.y}
+      style={{
+        position: "fixed",
+        width: node.width,
+        height: node.height,
+        left: node.x,
+        top: node.y,
+      }}
+    ></div>
+  ))
+}
+
+function renderLinkNodes(nodes: CanvasLinkNode[]): ComponentChildren {
+  return nodes.map((node) => (
+    <iframe
+      src={node["url"]}
+      style={{
+        position: "fixed",
+        width: node.width,
+        height: node.height,
+        left: node.x,
+        top: node.y,
+      }}
+    />
+  ))
+}
+
+const CanvasContent: QuartzComponent = ({ fileData, tree }: QuartzComponentProps) => {
+  //const content = htmlToJsx(fileData.filePath!, tree) as ComponentChildren
+  const canvas = loadCanvas(fileData.filePath!)
+  const canvasNodes = (canvas["nodes"] ?? []) as CanvasNode[]
+  const canvasEdges = (canvas["edges"] ?? []) as CanvasEdge[]
+  const classes: string[] = fileData.frontmatter?.cssclasses ?? []
+  const classString = ["popover-hint", ...classes].join(" ")
+
+  // Canvas parts
+  const textNodes = (canvasNodes.filter((node) => node["type"] === "text") ??
+    []) as CanvasTextNode[]
+  const fileNodes = (canvasNodes.filter((node) => node["type"] === "file") ??
+    []) as CanvasFileNode[]
+  const linkNodes = (canvasNodes.filter((node) => node["type"] === "link") ??
+    []) as CanvasLinkNode[]
+  const groupNodes = (canvasNodes.filter((node) => node["type"] === "group") ??
+    []) as CanvasGroupNode[]
+
+  const result = (
+    <article class={classString}>
+      {renderTextNodes(textNodes)}
+      {renderFileNodes(fileNodes)}
+      {renderLinkNodes(linkNodes)}
+    </article>
+  )
+
+  //TODO: Implement canvas rendering
+  return <article class={classString}>{result}</article>
+}
+
+export default (() => CanvasContent) satisfies QuartzComponentConstructor