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

update home page

This commit is contained in:
“chrisshank” 2024-12-02 01:15:38 -08:00
parent 7fe62caf9e
commit 4e0d24b881
3 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -2,13 +2,12 @@
## Explorations ## Explorations
- How do we make the web feel more alive and soft?
- How can we more easily connect web pages and their data?
- How easily can we turn a HTML document into a spatial canvas and visa versa?
- What would it look like if the browser had primitives for building spatial canvases? - What would it look like if the browser had primitives for building spatial canvases?
- How easily can we turn a document into a canvas? - How can someone annotate, re-layout, and program web pages they did not make or distribute?
- Can we incrementally change ownership and control of the web from single-origin server to the user? - How can we compose visual programming interfaces, hypermedia, and LLMs that work on any web page?
- How can someone more easily annotate and re-layout web pages they did not make?
- How can we more easily compose and connect web pages and their data?
- How can we compose together live and visual programming notations?
- Can we have lightweight visual and live scripting for web pages?
## Development ## Development

23
demo/index.html
View File

@ -30,6 +30,7 @@
color: #2c3e50; color: #2c3e50;
margin: 0; margin: 0;
margin-bottom: 1em; margin-bottom: 1em;
text-align: center;
} }
h2 { h2 {
@ -38,6 +39,17 @@
margin: 1em 0 0; margin: 1em 0 0;
} }
#questions {
font-size: 0.75rem;
font-style: italic;
margin-bottom: 2rem;
text-align: center;
li::before {
display: none;
}
}
ul { ul {
list-style-type: none; list-style-type: none;
line-height: 1.8; line-height: 1.8;
@ -63,7 +75,16 @@
</head> </head>
<body> <body>
<main> <main>
<h1>Folk Canvas Demos</h1> <h1>Folk Canvas Demos <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 soft?</li>
<li>How can we more easily connect web pages and their data?</li>
<li>How easily can we turn a 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 someone annotate, re-layout, and program web pages they did not make or distribute?</li>
<li>How can we compose visual programming interfaces, hypermedia, and LLMs that work on any web page?</li>
</ul>
<ul> <ul>
{{ LINKS }} {{ LINKS }}
</ul> </ul>

7
src/folk-rope.ts
View File

@ -56,16 +56,19 @@ export class FolkRope extends AbstractArrow {
super(); super();
this.#svg.style.height = '100%'; this.#svg.style.height = '100%';
this.#svg.style.width = '100%'; this.#svg.style.width = '100%';
this.#svg.style.pointerEvents = 'none';
this.#svg.appendChild(this.#path); this.#svg.appendChild(this.#path);
this.#svg.appendChild(this.#path2); this.#svg.appendChild(this.#path2);
this.#shadow.appendChild(this.#svg); this.#shadow.appendChild(this.#svg);
this.#path.setAttribute('stroke-width', '2'); this.#path.setAttribute('stroke-width', '3');
this.#path.setAttribute('fill', 'none'); this.#path.setAttribute('fill', 'none');
this.#path.style.pointerEvents = 'auto';
this.#path2.setAttribute('stroke-width', '2'); this.#path2.setAttribute('stroke-width', '3');
this.#path2.setAttribute('fill', 'none'); this.#path2.setAttribute('fill', 'none');
this.#path2.style.pointerEvents = 'auto';
this.stroke = this.getAttribute('stroke') || 'black'; this.stroke = this.getAttribute('stroke') || 'black';
} }