jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

create folk.systems/canvas

This commit is contained in:
“chrisshank” 2024-12-18 00:12:38 -08:00
parent c0784f6277
commit 9325ba806e
55 changed files with 236 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
vite.config.ts
View File

@ -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<string, string>),
input: {
index: resolve(__dirname, 'website/index.html'),
...getCanvasFiles().reduce((acc, file) => {
acc[`canvas/${file.replace('.html', '')}`] = resolve(canvasWebsiteDir, file);
return acc;
}, {} as Record<string, string>),
},
},
modulePreload: {
polyfill: false,

2
web-extension/injected.ts
View File

@ -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');
}

4
website/[shaders]distance-field.html → website/canvas/[shaders]distance-field.html
View File

@ -45,8 +45,8 @@
</folk-distance-field>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-distance-field.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-distance-field.ts';
</script>
</body>
</html>

4
website/[shaders]falling-sand.html → website/canvas/[shaders]falling-sand.html
View File

@ -89,8 +89,8 @@
</folk-sand>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-sand.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-sand.ts';
document.querySelector('folk-sand').onMaterialChange = (materialNumber) => {
document.querySelector('key-helper button[active]').removeAttribute('active');

4
website/[tests]distance-field.html → website/canvas/[tests]distance-field.html
View File

@ -22,8 +22,8 @@
</head>
<body>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-distance-field.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-distance-field.ts';
const d = document.createElement('folk-distance-field');
const geometries = [];

2
website/[tests]many-shapes.html → website/canvas/[tests]many-shapes.html
View File

@ -22,7 +22,7 @@
</head>
<body>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-shape.ts';
const geometries = [];

4
website/[tests]rope.html → website/canvas/[tests]rope.html
View File

@ -84,8 +84,8 @@
<folk-rope source="#box1" target="#box2"></folk-rope>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-rope.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-rope.ts';
</script>
</body>
</html>

2
website/_xanadu-article.html → website/canvas/_xanadu-article.html
View File

@ -133,7 +133,7 @@
</main>
<script type="module">
import '../lib/common/iframe-script.ts';
import '../../lib/common/iframe-script.ts';
</script>
</body>
</html>

2
website/animated-shapes-on-a-canvas.html → website/canvas/animated-shapes-on-a-canvas.html
View File

@ -64,7 +64,7 @@
<folk-shape x="100" y="300" width="50" height="50"></folk-shape>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-shape.ts';
const geos = document.querySelectorAll('folk-shape');

4
website/audio-beats-with-event-propagators.html → website/canvas/audio-beats-with-event-propagators.html
View File

@ -54,8 +54,8 @@
<script type="module">
import './src/folk-metronome.ts';
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-event-propagator.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-event-propagator.ts';
</script>
</body>
</html>

2
website/canvasify-a-html-document.html → website/canvas/canvasify-a-html-document.html
View File

@ -100,7 +100,7 @@
</main>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-shape.ts';
function copyStyles(from, to) {
const styles = getComputedStyle(from);

0
website/chains-of-thought/chains-of-thought.json → website/canvas/chains-of-thought/chains-of-thought.json
View File

0
website/chains-of-thought/index.html → website/canvas/chains-of-thought/index.html
View File

4
website/chains-of-thought/main.ts → website/canvas/chains-of-thought/main.ts
View File

@ -1,5 +1,5 @@
import { FolkShape } from '../../lib/folk-shape.ts';
import { FolkArrow } from '../../lib/folk-arrow.ts';
import { FolkShape } from '../../../lib/folk-shape.ts';
import { FolkArrow } from '../../../lib/folk-arrow.ts';
import { FileSaver } from '../src/file-system.ts';
declare global {

4
website/cross-iframe-sand.html → website/canvas/cross-iframe-sand.html
View File

@ -105,8 +105,8 @@
<folk-shape x="500" y="100" width="30" height="70"></folk-shape>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-sand.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-sand.ts';
document.querySelector('folk-sand').onMaterialChange = (materialNumber) => {
document.querySelector('key-helper button[active]').removeAttribute('active');

4
website/cross-iframe-sticky-html-arrow.html → website/canvas/cross-iframe-sticky-html-arrow.html
View File

@ -39,8 +39,8 @@
<folk-rope source="iframe#frame1 #box1" target="iframe#frame2 #box2"></folk-rope>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-rope.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-rope.ts';
</script>
</body>
</html>

2
website/cross-iframe-xanadu-links.html → website/canvas/cross-iframe-xanadu-links.html
View File

@ -62,7 +62,7 @@
<folk-xanadu source="iframe#frame1 p:nth-child(6)" target="iframe#frame2 p:nth-child(4)"></folk-xanadu>
<script type="module">
import '../lib/standalone/folk-xanadu.ts';
import '../../lib/standalone/folk-xanadu.ts';
</script>
</body>
</html>

4
website/cutting-event-propagators.html → website/canvas/cutting-event-propagators.html
View File

@ -51,8 +51,8 @@ rotation: from.x/10"
></folk-event-propagator>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import { FolkEventPropagator } from '../lib/standalone/folk-event-propagator.ts';
import '../../lib/standalone/folk-shape.ts';
import { FolkEventPropagator } from '../../lib/standalone/folk-event-propagator.ts';
class CutTool {
entry() {

10
website/effect-integrator.html → website/canvas/effect-integrator.html
View File

@ -49,11 +49,11 @@
<folk-physics sources="#shape1, #shape2, #shape3, #shape4, #shape5, #shape6, #shape7, #shape8"></folk-physics>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-arrow.ts';
import '../lib/standalone/folk-rope.ts';
import '../lib/standalone/folk-graph.ts';
import '../lib/standalone/folk-physics.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-arrow.ts';
import '../../lib/standalone/folk-rope.ts';
import '../../lib/standalone/folk-graph.ts';
import '../../lib/standalone/folk-physics.ts';
</script>
</body>
</html>

6
website/embeddable-llm-with-propagators.html → website/canvas/embeddable-llm-with-propagators.html
View File

@ -107,9 +107,9 @@
<script type="module">
import './src/folk-timer.ts';
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-llm.ts';
import '../lib/standalone/folk-event-propagator.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-llm.ts';
import '../../lib/standalone/folk-event-propagator.ts';
</script>
</body>
</html>

4
website/event-propagators-with-weather.html → website/canvas/event-propagators-with-weather.html
View File

@ -54,8 +54,8 @@ rotation: from.x"
></folk-event-propagator>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-event-propagator.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-event-propagator.ts';
let timeout = -1;
let isBlowing = false;

4
website/event-propagators.html → website/canvas/event-propagators.html
View File

@ -45,8 +45,8 @@ rotation: from.x/10"
></folk-event-propagator>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-event-propagator.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-event-propagator.ts';
</script>
</body>
</html>

4
website/folk-interface-for-qr-codes.html → website/canvas/folk-interface-for-qr-codes.html
View File

@ -72,8 +72,8 @@
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/qr-code/qr-code.js';
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-event-propagator.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-event-propagator.ts';
const ropeMode = document.querySelector('input[type="checkbox"]');

8
website/graph-layout.html → website/canvas/graph-layout.html
View File

@ -47,10 +47,10 @@
</folk-graph>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-arrow.ts';
import '../lib/standalone/folk-rope.ts';
import '../lib/standalone/folk-graph.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-arrow.ts';
import '../../lib/standalone/folk-rope.ts';
import '../../lib/standalone/folk-graph.ts';
</script>
</body>
</html>

4
website/html-ink.html → website/canvas/html-ink.html
View File

@ -23,8 +23,8 @@
<body>
<button on:click="DRAW">Draw</button>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-ink.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-ink.ts';
const drawButton = document.querySelector('button');

4
website/html-spreadsheet.html → website/canvas/html-spreadsheet.html
View File

@ -123,8 +123,8 @@
</folk-shape>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-spreadsheet.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-spreadsheet.ts';
</script>
</body>
</html>

110
website/canvas/index.html Normal file
View File

@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Pixelify+Sans&display=swap"
rel="stylesheet"
/>
<title>Folk Canvas</title>
<style>
html {
height: 100%;
background: #f5f5f5;
}
main {
font-family: 'Courier Prime', Courier, monospace;
max-width: 800px;
margin: 20px auto;
padding: 20px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background: #fff;
}
h1 {
color: #2c3e50;
margin: 0;
margin-bottom: 1em;
text-align: center;
}
h2 {
color: #2c3e50;
font-size: 1.2em;
margin: 1em 0 0;
}
ul {
list-style-type: none;
line-height: 1.8;
padding-left: 0;
margin: 0;
}
li::before {
content: '>';
color: #666;
margin-right: 1em;
}
a {
color: #34495e;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#questions {
font-size: 0.9rem;
font-style: italic;
margin-bottom: 2rem;
li::before {
content: '-';
}
}
#disclaimer {
font-size: 0.75rem;
font-style: italic;
}
</style>
</head>
<body>
<main>
<h1>
Folk Canvas
<a href="https://github.com/folk-canvas/folk-canvas">(Github)</a>
</h1>
<ul id="questions">
<li>How do we make the web feel more alive and less rigid and closed off?</li>
<li>How can we more easily compose web pages and their data together?</li>
<li>How seamlessly can we turn an HTML document into a spatial canvas and visa versa?</li>
<li>What would it look like if the browser had primitives for building spatial canvases?</li>
<li>How can we annotate, re-layout, and program web pages we did not make or distribute?</li>
<li
>How can we compose visual programming interfaces, hypermedia, and LLMs that can be embedded into on any web
page?</li
>
<li
>How can we use spatial qualities like proximity and connection as a communication channel for hypermedia and
websites to communicate with each other?</li
>
</ul>
<h2>Demos</h2>
<p id="disclaimer">(Make sure to checkout the dev tools, all of the you see are just authored in HTML!)</p>
<ul id="links">
{{ LINKS }}
</ul>
</main>
</body>
</html>

2
website/moveBefore.html → website/canvas/moveBefore.html
View File

@ -58,7 +58,7 @@
<folk-shape x="100" y="300" width="50" height="50" rotation="45"></folk-shape>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-shape.ts';
// Check for moveBefore support
if (!Element.prototype.moveBefore) {

4
website/music-crossfader.html → website/canvas/music-crossfader.html
View File

@ -78,8 +78,8 @@
<script type="module">
import './src/record-player.ts';
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-event-propagator.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-event-propagator.ts';
</script>
</body>
</html>

6
website/physics.html → website/canvas/physics.html
View File

@ -41,9 +41,9 @@
</folk-physics>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-physics.ts';
import '../lib/standalone/folk-event-propagator.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-physics.ts';
import '../../lib/standalone/folk-event-propagator.ts';
</script>
</body>
</html>

4
website/projector.html → website/canvas/projector.html
View File

@ -54,8 +54,8 @@
<folk-shape x="300" y="350" width="60" height="90" rotation="45"></folk-shape>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-projector.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-projector.ts';
const projector = document.querySelector('folk-projector');

8
website/proximity-based-communication-and-event-propagators.html → website/canvas/proximity-based-communication-and-event-propagators.html
View File

@ -90,10 +90,10 @@
<script type="module">
import { GeoWiki } from './src/geo-wiki.ts';
import { FolkWeather } from './src/folk-weather.ts';
import '../lib/standalone/folk-shape.ts';
import { FolkMap } from '../lib/standalone/folk-map.ts';
import { FolkCluster } from '../lib/standalone/folk-proximity.ts';
import '../lib/standalone/folk-event-propagator.ts';
import '../../lib/standalone/folk-shape.ts';
import { FolkMap } from '../../lib/standalone/folk-map.ts';
import { FolkCluster } from '../../lib/standalone/folk-proximity.ts';
import '../../lib/standalone/folk-event-propagator.ts';
FolkCluster.registerElement({
constructor: FolkMap,

6
website/proximity-based-communication.html → website/canvas/proximity-based-communication.html
View File

@ -77,9 +77,9 @@
<script type="module">
import { GeoWiki } from './src/geo-wiki.ts';
import { FolkWeather } from './src/folk-weather.ts';
import '../lib/standalone/folk-shape.ts';
import { FolkMap } from '../lib/standalone/folk-map.ts';
import { FolkCluster } from '../lib/standalone/folk-proximity.ts';
import '../../lib/standalone/folk-shape.ts';
import { FolkMap } from '../../lib/standalone/folk-map.ts';
import { FolkCluster } from '../../lib/standalone/folk-proximity.ts';
FolkCluster.registerElement({
constructor: FolkMap,

4
website/proximity-based-music.html → website/canvas/proximity-based-music.html
View File

@ -61,8 +61,8 @@
<script type="module">
import './src/record-player.ts';
import '../lib/standalone/folk-shape.ts';
import { aabbIntersection } from '../lib/common/collision.ts';
import '../../lib/standalone/folk-shape.ts';
import { aabbIntersection } from '../../lib/common/collision.ts';
let proximityDistance = 150;
const proximitySet = new Set();

4
website/radial-space.html → website/canvas/radial-space.html
View File

@ -37,8 +37,8 @@
<folk-space-radial sources="folk-shape"> </folk-space-radial>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-space-radial.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-space-radial.ts';
</script>
</body>
</html>

4
website/responsive-canvas-shapes.html → website/canvas/responsive-canvas-shapes.html
View File

@ -89,8 +89,8 @@
</folk-shape> -->
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-arrow.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-arrow.ts';
</script>
</body>
</html>

4
website/semantic-zoom-in-a-canvas.html → website/canvas/semantic-zoom-in-a-canvas.html
View File

@ -144,8 +144,8 @@
<folk-arrow source="#box1" target="#box3"></folk-arrow>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-arrow.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-arrow.ts';
document.body.querySelectorAll('folk-shape').forEach((el, i) => (el.style.viewTransitionName = `g${i}`));
document.body.querySelectorAll('folk-arrow').forEach((el, i) => (el.style.viewTransitionName = `c${i}`));

4
website/shape-collision-detection.html → website/canvas/shape-collision-detection.html
View File

@ -49,8 +49,8 @@
<folk-shape x="400" y="275" width="50" height="50"></folk-shape>
<script type="module">
import { FolkShape } from '../lib/standalone/folk-shape.ts';
import { aabbHitDetection } from '../lib/common/collision.ts';
import { FolkShape } from '../../lib/standalone/folk-shape.ts';
import { aabbHitDetection } from '../../lib/common/collision.ts';
const shapes = Array.from(document.querySelectorAll('folk-shape, p'));

2
website/shapes-in-a-canvas.html → website/canvas/shapes-in-a-canvas.html
View File

@ -29,7 +29,7 @@
<folk-shape x="100" y="300" width="50" height="50" rotation="45"></folk-shape>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-shape.ts';
</script>
</body>
</html>

4
website/space-morph.html → website/canvas/space-morph.html
View File

@ -48,8 +48,8 @@
</folk-space>
<script type="module">
import '../lib/standalone/folk-space.ts';
import '../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-space.ts';
import '../../lib/standalone/folk-shape.ts';
document.addEventListener('click', () => window.space.transition());
</script>

6
website/spreadsheet-graph-projection.html → website/canvas/spreadsheet-graph-projection.html
View File

@ -163,9 +163,9 @@
</folk-shape>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-arrow.ts';
import '../lib/standalone/folk-spreadsheet.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-arrow.ts';
import '../../lib/standalone/folk-spreadsheet.ts';
let isProjected = false;
const button = document.querySelector('button');

8
website/spreadsheet-map-propagator.html → website/canvas/spreadsheet-map-propagator.html
View File

@ -162,10 +162,10 @@
></folk-event-propagator>
<script type="module">
import '../lib/standalone/folk-map.ts';
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-event-propagator.ts';
import '../lib/standalone/folk-spreadsheet.ts';
import '../../lib/standalone/folk-map.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-event-propagator.ts';
import '../../lib/standalone/folk-spreadsheet.ts';
</script>
</body>
</html>

4
website/spreadsheet-shape-projection.html → website/canvas/spreadsheet-shape-projection.html
View File

@ -41,8 +41,8 @@
</folk-space-projector>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-space-projector.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-space-projector.ts';
</script>
</body>
</html>

0
website/src/file-system.ts → website/canvas/src/file-system.ts
View File

2
website/src/folk-metronome.ts → website/canvas/src/folk-metronome.ts
View File

@ -1,4 +1,4 @@
import { FolkElement } from '../../lib/common/folk-element';
import { FolkElement } from '../../../lib/common/folk-element';
declare global {
interface HTMLElementTagNameMap {

2
website/src/folk-timer.ts → website/canvas/src/folk-timer.ts
View File

@ -1,4 +1,4 @@
import { FolkElement } from '../../lib/common/folk-element';
import { FolkElement } from '../../../lib/common/folk-element';
declare global {
interface HTMLElementTagNameMap {

2
website/src/folk-weather.ts → website/canvas/src/folk-weather.ts
View File

@ -1,4 +1,4 @@
import { html } from '../../lib/common/tags';
import { html } from '../../../lib/common/tags';
interface Weather {
temperature: string;

0
website/src/geo-wiki.ts → website/canvas/src/geo-wiki.ts
View File

2
website/src/record-player.ts → website/canvas/src/record-player.ts
View File

@ -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(*) {

6
website/sticky-html-arrow.html → website/canvas/sticky-html-arrow.html
View File

@ -29,9 +29,9 @@
<folk-arrow source="#box1" target="#box2"></folk-arrow>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-arrow.ts';
import '../lib/common/iframe-script.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-arrow.ts';
import '../../lib/common/iframe-script.ts';
</script>
</body>
</html>

4
website/sticky-html-rope.html → website/canvas/sticky-html-rope.html
View File

@ -43,8 +43,8 @@
<folk-rope source="#box1" target="#box4"></folk-rope>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-rope.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-rope.ts';
</script>
</body>
</html>

10
website/toolset.html → website/canvas/toolset.html
View File

@ -52,11 +52,11 @@
</folk-toolset>
<script type="module">
import '../lib/standalone/folk-event-propagator.ts';
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-distance-field.ts';
import '../lib/standalone/folk-sand.ts';
import '../lib/standalone/folk-toolset.ts';
import '../../lib/standalone/folk-event-propagator.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-distance-field.ts';
import '../../lib/standalone/folk-sand.ts';
import '../../lib/standalone/folk-toolset.ts';
</script>
</body>
</html>

4
website/visualizing-set-relations.html → website/canvas/visualizing-set-relations.html
View File

@ -45,8 +45,8 @@
</folk-hull>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-hull.ts';
import '../../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-hull.ts';
</script>
</body>
</html>

4
website/xanadu-link.html → website/canvas/xanadu-link.html
View File

@ -201,8 +201,8 @@
<folk-xanadu source="folk-shape[name='1'] [link='2']" target="folk-shape[name='2'] [link='2']"></folk-xanadu>
<script type="module">
import '../lib/standalone/folk-xanadu.ts';
import '../lib/standalone/folk-shape.ts';
import '../../lib/standalone/folk-xanadu.ts';
import '../../lib/standalone/folk-shape.ts';
</script>
</body>
</html>

103
website/index.html
View File

@ -3,108 +3,31 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Pixelify+Sans&display=swap"
rel="stylesheet"
/>
<title>Folk Canvas</title>
<title>Shapes</title>
<style>
html {
width: 100%;
height: 100%;
background: #f5f5f5;
position: fixed;
overflow: hidden;
}
main {
font-family: 'Courier Prime', Courier, monospace;
max-width: 800px;
margin: 20px auto;
padding: 20px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background: #fff;
}
h1 {
color: #2c3e50;
margin: 0;
margin-bottom: 1em;
text-align: center;
}
h2 {
color: #2c3e50;
font-size: 1.2em;
margin: 1em 0 0;
}
ul {
list-style-type: none;
line-height: 1.8;
padding-left: 0;
body {
min-height: 100%;
position: relative;
margin: 0;
}
li::before {
content: '>';
color: #666;
margin-right: 1em;
}
a {
color: #34495e;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#questions {
font-size: 0.9rem;
font-style: italic;
margin-bottom: 2rem;
li::before {
content: '-';
}
}
#disclaimer {
font-size: 0.75rem;
font-style: italic;
folk-shape {
background: rgb(187, 178, 178);
}
</style>
</head>
<body>
<main>
<h1>
Folk Canvas
<a href="https://github.com/folk-canvas/folk-canvas">(Github)</a>
</h1>
<ul id="questions">
<li>How do we make the web feel more alive and less rigid and closed off?</li>
<li>How can we more easily compose web pages and their data together?</li>
<li>How seamlessly can we turn an HTML document into a spatial canvas and visa versa?</li>
<li>What would it look like if the browser had primitives for building spatial canvases?</li>
<li>How can we annotate, re-layout, and program web pages we did not make or distribute?</li>
<li
>How can we compose visual programming interfaces, hypermedia, and LLMs that can be embedded into on any web
page?</li
>
<li
>How can we use spatial qualities like proximity and connection as a communication channel for hypermedia and
websites to communicate with each other?</li
>
</ul>
<folk-shape x="100" y="100" width="50" height="50"></folk-shape>
<h2>Demos</h2>
<p id="disclaimer">(Make sure to checkout the dev tools, all of the you see are just authored in HTML!)</p>
<ul id="links">
{{ LINKS }}
</ul>
</main>
<script type="module">
import '../lib/standalone/folk-shape.ts';
</script>
</body>
</html>