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 { readdirSync } from 'node:fs';
import { defineConfig, IndexHtmlTransformContext, Plugin } from 'vite'; import { defineConfig, IndexHtmlTransformContext, Plugin } from 'vite';
const websiteDir = resolve(__dirname, 'website'); const canvasWebsiteDir = resolve(__dirname, 'website/canvas');
function getFiles() { function getCanvasFiles() {
return readdirSync(websiteDir).filter((file) => file.endsWith('.html')); return readdirSync(canvasWebsiteDir).filter((file) => file.endsWith('.html'));
} }
const linkGenerator = (): Plugin => { const linkGenerator = (): Plugin => {
return { return {
name: 'link-generator', name: 'link-generator',
transformIndexHtml(html: string, ctx: IndexHtmlTransformContext) { transformIndexHtml(html: string, ctx: IndexHtmlTransformContext) {
if (!ctx.filename.endsWith('index.html')) return; if (!ctx.filename.endsWith('canvas/index.html')) return;
const files = getFiles(); const files = getCanvasFiles();
// First, handle ungrouped files // First, handle ungrouped files
const ungroupedFiles = files.filter( const ungroupedFiles = files.filter(
(file) => !file.includes('index') && !file.startsWith('_') && !file.match(/^\[([^\]]+)\]/) (file) => !file.includes('index') && !file.startsWith('_') && !file.match(/^\[([^\]]+)\]/)
@ -69,10 +69,13 @@ export default defineConfig({
build: { build: {
target: 'esnext', target: 'esnext',
rollupOptions: { rollupOptions: {
input: getFiles().reduce((acc, file) => { input: {
acc[file.replace('.html', '')] = resolve(websiteDir, file); index: resolve(__dirname, 'website/index.html'),
return acc; ...getCanvasFiles().reduce((acc, file) => {
}, {} as Record<string, string>), acc[`canvas/${file.replace('.html', '')}`] = resolve(canvasWebsiteDir, file);
return acc;
}, {} as Record<string, string>),
},
}, },
modulePreload: { modulePreload: {
polyfill: false, polyfill: false,

2
web-extension/injected.ts
View File

@ -14,7 +14,7 @@ if (typeof customElements !== 'undefined') {
console.log('importing folk-shape'); console.log('importing folk-shape');
// this also won't work // this also won't work
// maybe just simply build and bundle it all up, this is probl easiest. // 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 { } else {
console.warn('CUSTOM ELEMENTS NOT DEFINED'); 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> </folk-distance-field>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-distance-field.ts'; import '../../lib/standalone/folk-distance-field.ts';
</script> </script>
</body> </body>
</html> </html>

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

@ -89,8 +89,8 @@
</folk-sand> </folk-sand>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-sand.ts'; import '../../lib/standalone/folk-sand.ts';
document.querySelector('folk-sand').onMaterialChange = (materialNumber) => { document.querySelector('folk-sand').onMaterialChange = (materialNumber) => {
document.querySelector('key-helper button[active]').removeAttribute('active'); 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> </head>
<body> <body>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-distance-field.ts'; import '../../lib/standalone/folk-distance-field.ts';
const d = document.createElement('folk-distance-field'); const d = document.createElement('folk-distance-field');
const geometries = []; const geometries = [];

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

@ -22,7 +22,7 @@
</head> </head>
<body> <body>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
const geometries = []; 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> <folk-rope source="#box1" target="#box2"></folk-rope>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-rope.ts'; import '../../lib/standalone/folk-rope.ts';
</script> </script>
</body> </body>
</html> </html>

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

@ -133,7 +133,7 @@
</main> </main>
<script type="module"> <script type="module">
import '../lib/common/iframe-script.ts'; import '../../lib/common/iframe-script.ts';
</script> </script>
</body> </body>
</html> </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> <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
const geos = document.querySelectorAll('folk-shape'); 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"> <script type="module">
import './src/folk-metronome.ts'; import './src/folk-metronome.ts';
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-event-propagator.ts'; import '../../lib/standalone/folk-event-propagator.ts';
</script> </script>
</body> </body>
</html> </html>

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

@ -100,7 +100,7 @@
</main> </main>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
function copyStyles(from, to) { function copyStyles(from, to) {
const styles = getComputedStyle(from); 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 { FolkShape } from '../../../lib/folk-shape.ts';
import { FolkArrow } from '../../lib/folk-arrow.ts'; import { FolkArrow } from '../../../lib/folk-arrow.ts';
import { FileSaver } from '../src/file-system.ts'; import { FileSaver } from '../src/file-system.ts';
declare global { 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> <folk-shape x="500" y="100" width="30" height="70"></folk-shape>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-sand.ts'; import '../../lib/standalone/folk-sand.ts';
document.querySelector('folk-sand').onMaterialChange = (materialNumber) => { document.querySelector('folk-sand').onMaterialChange = (materialNumber) => {
document.querySelector('key-helper button[active]').removeAttribute('active'); 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> <folk-rope source="iframe#frame1 #box1" target="iframe#frame2 #box2"></folk-rope>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-rope.ts'; import '../../lib/standalone/folk-rope.ts';
</script> </script>
</body> </body>
</html> </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> <folk-xanadu source="iframe#frame1 p:nth-child(6)" target="iframe#frame2 p:nth-child(4)"></folk-xanadu>
<script type="module"> <script type="module">
import '../lib/standalone/folk-xanadu.ts'; import '../../lib/standalone/folk-xanadu.ts';
</script> </script>
</body> </body>
</html> </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> ></folk-event-propagator>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import { FolkEventPropagator } from '../lib/standalone/folk-event-propagator.ts'; import { FolkEventPropagator } from '../../lib/standalone/folk-event-propagator.ts';
class CutTool { class CutTool {
entry() { 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> <folk-physics sources="#shape1, #shape2, #shape3, #shape4, #shape5, #shape6, #shape7, #shape8"></folk-physics>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-arrow.ts'; import '../../lib/standalone/folk-arrow.ts';
import '../lib/standalone/folk-rope.ts'; import '../../lib/standalone/folk-rope.ts';
import '../lib/standalone/folk-graph.ts'; import '../../lib/standalone/folk-graph.ts';
import '../lib/standalone/folk-physics.ts'; import '../../lib/standalone/folk-physics.ts';
</script> </script>
</body> </body>
</html> </html>

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

@ -107,9 +107,9 @@
<script type="module"> <script type="module">
import './src/folk-timer.ts'; import './src/folk-timer.ts';
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-llm.ts'; import '../../lib/standalone/folk-llm.ts';
import '../lib/standalone/folk-event-propagator.ts'; import '../../lib/standalone/folk-event-propagator.ts';
</script> </script>
</body> </body>
</html> </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> ></folk-event-propagator>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-event-propagator.ts'; import '../../lib/standalone/folk-event-propagator.ts';
let timeout = -1; let timeout = -1;
let isBlowing = false; 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> ></folk-event-propagator>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-event-propagator.ts'; import '../../lib/standalone/folk-event-propagator.ts';
</script> </script>
</body> </body>
</html> </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"> <script type="module">
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/qr-code/qr-code.js'; 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-shape.ts';
import '../lib/standalone/folk-event-propagator.ts'; import '../../lib/standalone/folk-event-propagator.ts';
const ropeMode = document.querySelector('input[type="checkbox"]'); 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> </folk-graph>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-arrow.ts'; import '../../lib/standalone/folk-arrow.ts';
import '../lib/standalone/folk-rope.ts'; import '../../lib/standalone/folk-rope.ts';
import '../lib/standalone/folk-graph.ts'; import '../../lib/standalone/folk-graph.ts';
</script> </script>
</body> </body>
</html> </html>

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

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

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

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

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

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

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

@ -41,9 +41,9 @@
</folk-physics> </folk-physics>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-physics.ts'; import '../../lib/standalone/folk-physics.ts';
import '../lib/standalone/folk-event-propagator.ts'; import '../../lib/standalone/folk-event-propagator.ts';
</script> </script>
</body> </body>
</html> </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> <folk-shape x="300" y="350" width="60" height="90" rotation="45"></folk-shape>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-projector.ts'; import '../../lib/standalone/folk-projector.ts';
const projector = document.querySelector('folk-projector'); 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"> <script type="module">
import { GeoWiki } from './src/geo-wiki.ts'; import { GeoWiki } from './src/geo-wiki.ts';
import { FolkWeather } from './src/folk-weather.ts'; import { FolkWeather } from './src/folk-weather.ts';
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import { FolkMap } from '../lib/standalone/folk-map.ts'; import { FolkMap } from '../../lib/standalone/folk-map.ts';
import { FolkCluster } from '../lib/standalone/folk-proximity.ts'; import { FolkCluster } from '../../lib/standalone/folk-proximity.ts';
import '../lib/standalone/folk-event-propagator.ts'; import '../../lib/standalone/folk-event-propagator.ts';
FolkCluster.registerElement({ FolkCluster.registerElement({
constructor: FolkMap, constructor: FolkMap,

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

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

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

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

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

@ -89,8 +89,8 @@
</folk-shape> --> </folk-shape> -->
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-arrow.ts'; import '../../lib/standalone/folk-arrow.ts';
</script> </script>
</body> </body>
</html> </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> <folk-arrow source="#box1" target="#box3"></folk-arrow>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-arrow.ts'; import '../../lib/standalone/folk-arrow.ts';
document.body.querySelectorAll('folk-shape').forEach((el, i) => (el.style.viewTransitionName = `g${i}`)); 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}`)); 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> <folk-shape x="400" y="275" width="50" height="50"></folk-shape>
<script type="module"> <script type="module">
import { FolkShape } from '../lib/standalone/folk-shape.ts'; import { FolkShape } from '../../lib/standalone/folk-shape.ts';
import { aabbHitDetection } from '../lib/common/collision.ts'; import { aabbHitDetection } from '../../lib/common/collision.ts';
const shapes = Array.from(document.querySelectorAll('folk-shape, p')); 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> <folk-shape x="100" y="300" width="50" height="50" rotation="45"></folk-shape>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
</script> </script>
</body> </body>
</html> </html>

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

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

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

@ -163,9 +163,9 @@
</folk-shape> </folk-shape>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-arrow.ts'; import '../../lib/standalone/folk-arrow.ts';
import '../lib/standalone/folk-spreadsheet.ts'; import '../../lib/standalone/folk-spreadsheet.ts';
let isProjected = false; let isProjected = false;
const button = document.querySelector('button'); 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> ></folk-event-propagator>
<script type="module"> <script type="module">
import '../lib/standalone/folk-map.ts'; import '../../lib/standalone/folk-map.ts';
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-event-propagator.ts'; import '../../lib/standalone/folk-event-propagator.ts';
import '../lib/standalone/folk-spreadsheet.ts'; import '../../lib/standalone/folk-spreadsheet.ts';
</script> </script>
</body> </body>
</html> </html>

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

@ -41,8 +41,8 @@
</folk-space-projector> </folk-space-projector>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-space-projector.ts'; import '../../lib/standalone/folk-space-projector.ts';
</script> </script>
</body> </body>
</html> </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 { declare global {
interface HTMLElementTagNameMap { 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 { declare global {
interface HTMLElementTagNameMap { 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 { interface Weather {
temperature: string; 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 // 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` const styles = css`
::slotted(*) { ::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> <folk-arrow source="#box1" target="#box2"></folk-arrow>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-arrow.ts'; import '../../lib/standalone/folk-arrow.ts';
import '../lib/common/iframe-script.ts'; import '../../lib/common/iframe-script.ts';
</script> </script>
</body> </body>
</html> </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> <folk-rope source="#box1" target="#box4"></folk-rope>
<script type="module"> <script type="module">
import '../lib/standalone/folk-shape.ts'; import '../../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-rope.ts'; import '../../lib/standalone/folk-rope.ts';
</script> </script>
</body> </body>
</html> </html>

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

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

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

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

103
website/index.html
View File

@ -3,108 +3,31 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <title>Shapes</title>
<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> <style>
html { html {
width: 100%;
height: 100%; height: 100%;
background: #f5f5f5; position: fixed;
overflow: hidden;
} }
main { body {
font-family: 'Courier Prime', Courier, monospace; min-height: 100%;
max-width: 800px; position: relative;
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; margin: 0;
} }
li::before { folk-shape {
content: '>'; background: rgb(187, 178, 178);
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> </style>
</head> </head>
<body> <body>
<main> <folk-shape x="100" y="100" width="50" height="50"></folk-shape>
<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> <script type="module">
<p id="disclaimer">(Make sure to checkout the dev tools, all of the you see are just authored in HTML!)</p> import '../lib/standalone/folk-shape.ts';
</script>
<ul id="links">
{{ LINKS }}
</ul>
</main>
</body> </body>
</html> </html>