diff --git a/vite.config.ts b/vite.config.ts index 90285ff..5307805 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,18 +2,18 @@ import { resolve } from 'node:path'; import { readdirSync } from 'node:fs'; import { defineConfig, IndexHtmlTransformContext, Plugin } from 'vite'; -const websiteDir = resolve(__dirname, 'website'); +const canvasWebsiteDir = resolve(__dirname, 'website/canvas'); -function getFiles() { - return readdirSync(websiteDir).filter((file) => file.endsWith('.html')); +function getCanvasFiles() { + return readdirSync(canvasWebsiteDir).filter((file) => file.endsWith('.html')); } const linkGenerator = (): Plugin => { return { name: 'link-generator', transformIndexHtml(html: string, ctx: IndexHtmlTransformContext) { - if (!ctx.filename.endsWith('index.html')) return; - const files = getFiles(); + if (!ctx.filename.endsWith('canvas/index.html')) return; + const files = getCanvasFiles(); // First, handle ungrouped files const ungroupedFiles = files.filter( (file) => !file.includes('index') && !file.startsWith('_') && !file.match(/^\[([^\]]+)\]/) @@ -69,10 +69,13 @@ export default defineConfig({ build: { target: 'esnext', rollupOptions: { - input: getFiles().reduce((acc, file) => { - acc[file.replace('.html', '')] = resolve(websiteDir, file); - return acc; - }, {} as Record), + input: { + index: resolve(__dirname, 'website/index.html'), + ...getCanvasFiles().reduce((acc, file) => { + acc[`canvas/${file.replace('.html', '')}`] = resolve(canvasWebsiteDir, file); + return acc; + }, {} as Record), + }, }, modulePreload: { polyfill: false, diff --git a/web-extension/injected.ts b/web-extension/injected.ts index 80c1e2d..9a34b3c 100644 --- a/web-extension/injected.ts +++ b/web-extension/injected.ts @@ -14,7 +14,7 @@ if (typeof customElements !== 'undefined') { console.log('importing folk-shape'); // this also won't work // maybe just simply build and bundle it all up, this is probl easiest. - // import('../lib/folk-shape').then((m) => m.FolkShape.define()); + // import('../../lib/folk-shape').then((m) => m.FolkShape.define()); } else { console.warn('CUSTOM ELEMENTS NOT DEFINED'); } diff --git a/website/[shaders]distance-field.html b/website/canvas/[shaders]distance-field.html similarity index 92% rename from website/[shaders]distance-field.html rename to website/canvas/[shaders]distance-field.html index 4382fb4..d374207 100644 --- a/website/[shaders]distance-field.html +++ b/website/canvas/[shaders]distance-field.html @@ -45,8 +45,8 @@ diff --git a/website/[shaders]falling-sand.html b/website/canvas/[shaders]falling-sand.html similarity index 96% rename from website/[shaders]falling-sand.html rename to website/canvas/[shaders]falling-sand.html index d281159..8c76380 100644 --- a/website/[shaders]falling-sand.html +++ b/website/canvas/[shaders]falling-sand.html @@ -89,8 +89,8 @@ diff --git a/website/_xanadu-article.html b/website/canvas/_xanadu-article.html similarity index 99% rename from website/_xanadu-article.html rename to website/canvas/_xanadu-article.html index c183e18..8576211 100644 --- a/website/_xanadu-article.html +++ b/website/canvas/_xanadu-article.html @@ -133,7 +133,7 @@ diff --git a/website/animated-shapes-on-a-canvas.html b/website/canvas/animated-shapes-on-a-canvas.html similarity index 97% rename from website/animated-shapes-on-a-canvas.html rename to website/canvas/animated-shapes-on-a-canvas.html index 165bf91..fd1878c 100644 --- a/website/animated-shapes-on-a-canvas.html +++ b/website/canvas/animated-shapes-on-a-canvas.html @@ -64,7 +64,7 @@ diff --git a/website/canvasify-a-html-document.html b/website/canvas/canvasify-a-html-document.html similarity index 99% rename from website/canvasify-a-html-document.html rename to website/canvas/canvasify-a-html-document.html index 9ac3b9a..b439802 100644 --- a/website/canvasify-a-html-document.html +++ b/website/canvas/canvasify-a-html-document.html @@ -100,7 +100,7 @@ diff --git a/website/cross-iframe-xanadu-links.html b/website/canvas/cross-iframe-xanadu-links.html similarity index 97% rename from website/cross-iframe-xanadu-links.html rename to website/canvas/cross-iframe-xanadu-links.html index 77eaedc..3ae3ead 100644 --- a/website/cross-iframe-xanadu-links.html +++ b/website/canvas/cross-iframe-xanadu-links.html @@ -62,7 +62,7 @@ diff --git a/website/cutting-event-propagators.html b/website/canvas/cutting-event-propagators.html similarity index 96% rename from website/cutting-event-propagators.html rename to website/canvas/cutting-event-propagators.html index 7fbfb75..e14bc54 100644 --- a/website/cutting-event-propagators.html +++ b/website/canvas/cutting-event-propagators.html @@ -51,8 +51,8 @@ rotation: from.x/10" > diff --git a/website/embeddable-llm-with-propagators.html b/website/canvas/embeddable-llm-with-propagators.html similarity index 96% rename from website/embeddable-llm-with-propagators.html rename to website/canvas/embeddable-llm-with-propagators.html index b7d9df5..ae1e3a0 100644 --- a/website/embeddable-llm-with-propagators.html +++ b/website/canvas/embeddable-llm-with-propagators.html @@ -107,9 +107,9 @@ diff --git a/website/event-propagators-with-weather.html b/website/canvas/event-propagators-with-weather.html similarity index 95% rename from website/event-propagators-with-weather.html rename to website/canvas/event-propagators-with-weather.html index fd755de..a78d0f6 100644 --- a/website/event-propagators-with-weather.html +++ b/website/canvas/event-propagators-with-weather.html @@ -54,8 +54,8 @@ rotation: from.x" > diff --git a/website/folk-interface-for-qr-codes.html b/website/canvas/folk-interface-for-qr-codes.html similarity index 94% rename from website/folk-interface-for-qr-codes.html rename to website/canvas/folk-interface-for-qr-codes.html index 4c07b40..ac1758c 100644 --- a/website/folk-interface-for-qr-codes.html +++ b/website/canvas/folk-interface-for-qr-codes.html @@ -72,8 +72,8 @@ diff --git a/website/html-ink.html b/website/canvas/html-ink.html similarity index 94% rename from website/html-ink.html rename to website/canvas/html-ink.html index 60f4815..1e998e9 100644 --- a/website/html-ink.html +++ b/website/canvas/html-ink.html @@ -23,8 +23,8 @@ diff --git a/website/canvas/index.html b/website/canvas/index.html new file mode 100644 index 0000000..2793b5b --- /dev/null +++ b/website/canvas/index.html @@ -0,0 +1,110 @@ + + + + + + + + + Folk Canvas + + + +
+

+ Folk Canvas + (Github) +

+
    +
  • How do we make the web feel more alive and less rigid and closed off?
    • +
  • How can we more easily compose web pages and their data together?
    • +
  • How seamlessly can we turn an HTML document into a spatial canvas and visa versa?
    • +
  • What would it look like if the browser had primitives for building spatial canvases?
    • +
  • How can we annotate, re-layout, and program web pages we did not make or distribute?
    • +
  • How can we compose visual programming interfaces, hypermedia, and LLMs that can be embedded into on any web + page?
    • +
  • How can we use spatial qualities like proximity and connection as a communication channel for hypermedia and + websites to communicate with each other?
    • +
+ +

Demos

+

(Make sure to checkout the dev tools, all of the you see are just authored in HTML!)

+ + +
+ + diff --git a/website/moveBefore.html b/website/canvas/moveBefore.html similarity index 98% rename from website/moveBefore.html rename to website/canvas/moveBefore.html index 7a41d96..8be4fce 100644 --- a/website/moveBefore.html +++ b/website/canvas/moveBefore.html @@ -58,7 +58,7 @@ diff --git a/website/physics.html b/website/canvas/physics.html similarity index 90% rename from website/physics.html rename to website/canvas/physics.html index 368703d..0d8bc09 100644 --- a/website/physics.html +++ b/website/canvas/physics.html @@ -41,9 +41,9 @@ diff --git a/website/projector.html b/website/canvas/projector.html similarity index 96% rename from website/projector.html rename to website/canvas/projector.html index a7ebede..c53a8f3 100644 --- a/website/projector.html +++ b/website/canvas/projector.html @@ -54,8 +54,8 @@ diff --git a/website/responsive-canvas-shapes.html b/website/canvas/responsive-canvas-shapes.html similarity index 96% rename from website/responsive-canvas-shapes.html rename to website/canvas/responsive-canvas-shapes.html index fbdb26c..576bb7b 100644 --- a/website/responsive-canvas-shapes.html +++ b/website/canvas/responsive-canvas-shapes.html @@ -89,8 +89,8 @@ --> diff --git a/website/semantic-zoom-in-a-canvas.html b/website/canvas/semantic-zoom-in-a-canvas.html similarity index 97% rename from website/semantic-zoom-in-a-canvas.html rename to website/canvas/semantic-zoom-in-a-canvas.html index f16e107..93a8a10 100644 --- a/website/semantic-zoom-in-a-canvas.html +++ b/website/canvas/semantic-zoom-in-a-canvas.html @@ -144,8 +144,8 @@ diff --git a/website/space-morph.html b/website/canvas/space-morph.html similarity index 95% rename from website/space-morph.html rename to website/canvas/space-morph.html index d0afa41..ff2b81a 100644 --- a/website/space-morph.html +++ b/website/canvas/space-morph.html @@ -48,8 +48,8 @@ diff --git a/website/spreadsheet-graph-projection.html b/website/canvas/spreadsheet-graph-projection.html similarity index 98% rename from website/spreadsheet-graph-projection.html rename to website/canvas/spreadsheet-graph-projection.html index 270724f..c0b689a 100644 --- a/website/spreadsheet-graph-projection.html +++ b/website/canvas/spreadsheet-graph-projection.html @@ -163,9 +163,9 @@ diff --git a/website/spreadsheet-shape-projection.html b/website/canvas/spreadsheet-shape-projection.html similarity index 91% rename from website/spreadsheet-shape-projection.html rename to website/canvas/spreadsheet-shape-projection.html index d0770fb..41fec2b 100644 --- a/website/spreadsheet-shape-projection.html +++ b/website/canvas/spreadsheet-shape-projection.html @@ -41,8 +41,8 @@ diff --git a/website/src/file-system.ts b/website/canvas/src/file-system.ts similarity index 100% rename from website/src/file-system.ts rename to website/canvas/src/file-system.ts diff --git a/website/src/folk-metronome.ts b/website/canvas/src/folk-metronome.ts similarity index 95% rename from website/src/folk-metronome.ts rename to website/canvas/src/folk-metronome.ts index 98f1a9e..e1e2ca2 100644 --- a/website/src/folk-metronome.ts +++ b/website/canvas/src/folk-metronome.ts @@ -1,4 +1,4 @@ -import { FolkElement } from '../../lib/common/folk-element'; +import { FolkElement } from '../../../lib/common/folk-element'; declare global { interface HTMLElementTagNameMap { diff --git a/website/src/folk-timer.ts b/website/canvas/src/folk-timer.ts similarity index 92% rename from website/src/folk-timer.ts rename to website/canvas/src/folk-timer.ts index 32798da..8114a9c 100644 --- a/website/src/folk-timer.ts +++ b/website/canvas/src/folk-timer.ts @@ -1,4 +1,4 @@ -import { FolkElement } from '../../lib/common/folk-element'; +import { FolkElement } from '../../../lib/common/folk-element'; declare global { interface HTMLElementTagNameMap { diff --git a/website/src/folk-weather.ts b/website/canvas/src/folk-weather.ts similarity index 97% rename from website/src/folk-weather.ts rename to website/canvas/src/folk-weather.ts index 66ee4f6..57dee29 100644 --- a/website/src/folk-weather.ts +++ b/website/canvas/src/folk-weather.ts @@ -1,4 +1,4 @@ -import { html } from '../../lib/common/tags'; +import { html } from '../../../lib/common/tags'; interface Weather { temperature: string; diff --git a/website/src/geo-wiki.ts b/website/canvas/src/geo-wiki.ts similarity index 100% rename from website/src/geo-wiki.ts rename to website/canvas/src/geo-wiki.ts diff --git a/website/src/record-player.ts b/website/canvas/src/record-player.ts similarity index 99% rename from website/src/record-player.ts rename to website/canvas/src/record-player.ts index 18e99c8..1b46408 100644 --- a/website/src/record-player.ts +++ b/website/canvas/src/record-player.ts @@ -1,5 +1,5 @@ // Ported from https://github.com/bitu467/record-player -import { css, html } from '../../lib/common/tags'; +import { css, html } from '../../../lib/common/tags'; const styles = css` ::slotted(*) { diff --git a/website/sticky-html-arrow.html b/website/canvas/sticky-html-arrow.html similarity index 84% rename from website/sticky-html-arrow.html rename to website/canvas/sticky-html-arrow.html index 335957c..60bd089 100644 --- a/website/sticky-html-arrow.html +++ b/website/canvas/sticky-html-arrow.html @@ -29,9 +29,9 @@ diff --git a/website/sticky-html-rope.html b/website/canvas/sticky-html-rope.html similarity index 92% rename from website/sticky-html-rope.html rename to website/canvas/sticky-html-rope.html index 283225c..74f285e 100644 --- a/website/sticky-html-rope.html +++ b/website/canvas/sticky-html-rope.html @@ -43,8 +43,8 @@ diff --git a/website/toolset.html b/website/canvas/toolset.html similarity index 86% rename from website/toolset.html rename to website/canvas/toolset.html index 56724c4..b342cf8 100644 --- a/website/toolset.html +++ b/website/canvas/toolset.html @@ -52,11 +52,11 @@ diff --git a/website/visualizing-set-relations.html b/website/canvas/visualizing-set-relations.html similarity index 92% rename from website/visualizing-set-relations.html rename to website/canvas/visualizing-set-relations.html index 5b88410..0f75f05 100644 --- a/website/visualizing-set-relations.html +++ b/website/canvas/visualizing-set-relations.html @@ -45,8 +45,8 @@ diff --git a/website/xanadu-link.html b/website/canvas/xanadu-link.html similarity index 98% rename from website/xanadu-link.html rename to website/canvas/xanadu-link.html index be57d43..075c463 100644 --- a/website/xanadu-link.html +++ b/website/canvas/xanadu-link.html @@ -201,8 +201,8 @@ diff --git a/website/index.html b/website/index.html index 2793b5b..540275c 100644 --- a/website/index.html +++ b/website/index.html @@ -3,108 +3,31 @@ - - - - Folk Canvas + Shapes -
-

- Folk Canvas - (Github) -

-
    -
  • How do we make the web feel more alive and less rigid and closed off?
    • -
  • How can we more easily compose web pages and their data together?
    • -
  • How seamlessly can we turn an HTML document into a spatial canvas and visa versa?
    • -
  • What would it look like if the browser had primitives for building spatial canvases?
    • -
  • How can we annotate, re-layout, and program web pages we did not make or distribute?
    • -
  • How can we compose visual programming interfaces, hypermedia, and LLMs that can be embedded into on any web - page?
    • -
  • How can we use spatial qualities like proximity and connection as a communication channel for hypermedia and - websites to communicate with each other?
    • -
+ -

Demos

-

(Make sure to checkout the dev tools, all of the you see are just authored in HTML!)

- - -
+