Skip to content

Optimize pretext demos #413

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pearmini merged 3 commits into from
Apr 4, 2026
Merged

Optimize pretext demos #413

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c93b850
Optimize pretext demos
pearmini Apr 4, 2026
badeffb
Update index.html
pearmini Apr 4, 2026
7f6c144
Increase top
pearmini Apr 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
node_modules
yarn.lock
package-lock.json
demo/pnpm-lock.yaml
demo/pretext/pnpm-lock.yaml
dist
cache
docs/.vitepress/lib
Expand Down
15 changes: 0 additions & 15 deletions demo/index.html
View file
Open in desktop

This file was deleted.

0 demo/air-text/content.js → demo/pretext/air-text/content.js
View file
Open in desktop
File renamed without changes.
0 demo/air-text/helpers.js → demo/pretext/air-text/helpers.js
View file
Open in desktop
File renamed without changes.
0 demo/air-text/index.css → demo/pretext/air-text/index.css
View file
Open in desktop
File renamed without changes.
0 demo/air-text/index.html → demo/pretext/air-text/index.html
View file
Open in desktop
File renamed without changes.
0 demo/air-text/index.js → demo/pretext/air-text/index.js
View file
Open in desktop
File renamed without changes.
181 changes: 181 additions & 0 deletions demo/pretext/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Charming Pretext Demos: prepare type once, then flow it along SVG paths or wrap to a width—map labels, yin–yang fills, and masked air-text."
/>
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="#0f1419" />
<title>Charming Pretext Demos</title>
<style>
:root {
color-scheme: light dark;
--bg: canvas;
--fg: canvastext;
--muted: color-mix(in oklab, canvastext 68%, canvas);
/* Match docs/.vitepress/theme/custom.css --vp-c-indigo-3 */
--docs-brand: #00adb5;
--focus: color-mix(in oklab, #2563eb 70%, canvastext);
--pad: clamp(1.25rem, 4vw, 2.5rem);
--max: 32rem;
font-family:
system-ui,
-apple-system,
"Segoe UI",
Roboto,
"Helvetica Neue",
sans-serif;
line-height: 1.5;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100dvh;
background: var(--bg);
color: var(--fg);
}
main {
margin-inline: auto;
padding: var(--pad);
max-width: var(--max);
}
.brand {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5em;
}
.brand__logo-link {
flex-shrink: 0;
line-height: 0;
border-radius: 4px;
text-decoration: none;
color: inherit;
}
.brand__logo-link:focus-visible {
outline: 2px solid var(--docs-brand);
outline-offset: 3px;
}
.brand__logo {
width: 2.25rem;
height: 2.25rem;
display: block;
}
.brand h1 {
margin: 0;
font-size: clamp(1.35rem, 3vw, 1.6rem);
font-weight: 650;
letter-spacing: -0.02em;
line-height: 1.2;
}
.brand__link {
color: var(--docs-brand);
text-decoration: underline;
text-underline-offset: 0.12em;
font-weight: inherit;
}
.brand__link:visited {
color: var(--docs-brand);
}
.brand__link:focus-visible {
outline: 2px solid var(--docs-brand);
outline-offset: 3px;
border-radius: 2px;
}
.intro {
margin: 0 0 1.25em;
max-width: 42em;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.55;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
.card {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.75rem 0.9rem;
border-radius: 0.5rem;
text-decoration: none;
color: inherit;
border: 1px solid color-mix(in oklab, canvastext 12%, transparent);
background: color-mix(in oklab, canvastext 4%, canvas);
transition:
background 0.12s ease,
border-color 0.12s ease;
}
.card:hover {
background: color-mix(in oklab, canvastext 8%, canvas);
border-color: color-mix(in oklab, canvastext 18%, transparent);
}
.card:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.card__title {
font-weight: 600;
font-size: 1rem;
line-height: 1.3;
}
.card__desc {
margin: 0;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.45;
color: var(--muted);
}
</style>
</head>
<body>
<main>
<div class="brand">
<a class="brand__logo-link" href="https://charmingjs.org/" aria-label="Charming home">
<img class="brand__logo" src="/logo.svg" width="36" height="36" alt="" decoding="async" />
</a>
<h1>Charming Pretext</h1>
</div>
<p class="intro">
Demos built with
<a class="brand__link" href="https://charmingjs.org/pretext">Charming Pretext</a>
— pure-arithmetic text measurement for text-based data visualization and generative art. A fast, intuitive, and
fixable API on top of
<a class="brand__link" href="https://github.com/chenglou/pretext">Pretext</a>.
</p>
<nav aria-label="Charming Pretext demos">
<ul>
<li>
<a class="card" href="./us-map-paper/">
<span class="card__title">U.S. Map Paper</span>
<p class="card__desc">An interactive U.S. map with notes for each state.</p>
</a>
</li>
<li>
<a class="card" href="./yinyang/">
<span class="card__title">Yin Yang</span>
<p class="card__desc">An animated yin–yang symbol filled with descriptions.</p>
</a>
</li>
<li>
<a class="card" href="./air-text/">
<span class="card__title">Air Text</span>
<p class="card__desc">Interact with a screen of text using your body.</p>
</a>
</li>
</ul>
</nav>
</main>
</body>
</html>
4 changes: 3 additions & 1 deletion demo/package.json → demo/pretext/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@
"us-atlas": "^3.0.1"
},
"scripts": {
"dev": "vite"
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"patch-package": "^8.0.1",
Expand Down
1 change: 1 addition & 0 deletions demo/pretext/public/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 demo/us-map-paper/index.css → demo/pretext/us-map-paper/index.css
View file
Open in desktop
File renamed without changes.
0 demo/us-map-paper/index.html → demo/pretext/us-map-paper/index.html
View file
Open in desktop
File renamed without changes.
0 demo/us-map-paper/index.js → demo/pretext/us-map-paper/index.js
View file
Open in desktop
File renamed without changes.
0 demo/us-map-paper/state-notes.js → demo/pretext/us-map-paper/state-notes.js
View file
Open in desktop
File renamed without changes.
21 changes: 21 additions & 0 deletions demo/pretext/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import {resolve} from "node:path";
import {fileURLToPath} from "node:url";
import {defineConfig} from "vite";

const __dirname = fileURLToPath(new URL(".", import.meta.url));

export default defineConfig({
optimizeDeps: {
include: ["ml5"],
},
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "index.html"),
"us-map-paper": resolve(__dirname, "us-map-paper/index.html"),
yinyang: resolve(__dirname, "yinyang/index.html"),
"air-text": resolve(__dirname, "air-text/index.html"),
},
},
},
});
0 demo/yinyang/index.css → demo/pretext/yinyang/index.css
View file
Open in desktop
File renamed without changes.
0 demo/yinyang/index.html → demo/pretext/yinyang/index.html
View file
Open in desktop
File renamed without changes.
0 demo/yinyang/index.js → demo/pretext/yinyang/index.js
View file
Open in desktop
File renamed without changes.
7 changes: 0 additions & 7 deletions demo/vite.config.js
View file
Open in desktop

This file was deleted.

6 changes: 4 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,10 @@
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs",
"demo:dev": "pnpm --filter ./demo dev",
"prepublishOnly": "rm -rf dist && rollup -c"
"prepublishOnly": "rm -rf dist && rollup -c",
"demo:pretext:dev": "pnpm --filter ./demo/pretext dev",
"demo:pretext:build": "pnpm --filter ./demo/pretext build",
"demo:pretext:preview": "pnpm --filter ./demo/pretext preview"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^15.3.1",
Expand Down
4 changes: 2 additions & 2 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion pnpm-workspace.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
packages:
- "."
- "demo"
- "demo/pretext"

Loading