@tinyvolt/pie 0.0.0-stage → 0.1.0

package/pages/python-editor.md

@@ -0,0 +1,29 @@
+---
+title: Python editor
+canvas: left
+---
+# Python editor
+
+This is plain python code created using \`\`\`python ... \`\`\` code fence:
+```python
+A = pie.point(1, 2)
+print(A)
+```
+
+---
+
+Below are python editors created using \`\`\`python-editor ... \`\`\` code fence:
+
+```python-editor
+a = pie.point(1, 2, out='a')
+r = pie.scalar(1, out='r')
+c = pie.circle(a, r)
+```
+
+```python-editor
+a = pie.point(0, 0, out='a')
+```
+
+```python-editor
+pie.scalar(5, out='r')
+```

package/public/logo.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 10.5 64 64" width="256" height="256">
+  <path d="M32 29 L8 29 A24 24 0 0 0 20 49.78 Z" fill="#41DBC9"/>
+  <path d="M32 29 L44 49.78 A24 24 0 0 0 56 29 Z" fill="#41DBC9"/>
+  <path d="M32 34 L20 54.78 A24 24 0 0 0 44 54.78 Z" fill="#0B6B73"/>
+</svg>

package/site.yml

@@ -0,0 +1 @@
+title: pie-ssg

package/src/app.css

@@ -0,0 +1,343 @@
+body {
+  margin: 0;
+  color: var(--color-text, #1a1a1a);
+  background: var(--color-bg, #fff);
+  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+  line-height: var(--line-height, 1.6);
+}
+
+a {
+  color: inherit;
+  text-underline-offset: 0.15em;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+}
+
+.site-header {
+  display: flex;
+  align-items: baseline;
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid var(--color-border, #ddd);
+}
+
+.site-header-title {
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.site-header-nav {
+  display: flex;
+  gap: 1rem;
+}
+
+.site-header-nav a {
+  color: var(--color-muted, #555);
+  text-decoration: none;
+}
+
+.site-header-nav a:hover {
+  color: var(--color-hover, #000);
+  text-decoration: underline;
+}
+
+/* Page text: a centered column about 70 characters wide. */
+main {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--content-width, 40rem);
+  margin: 0 auto;
+  padding: 2rem 1.5rem 4rem;
+  font-family: var(--font-body, Georgia, "Times New Roman", serif);
+  font-size: var(--font-size-body, 1.125rem);
+}
+
+main h1,
+main h2,
+main h3,
+main h4 {
+  line-height: 1.25;
+}
+
+main h1 {
+  font-size: 2rem;
+  margin: 0 0 1rem;
+}
+
+main h2 {
+  font-size: 1.4rem;
+  margin: 2rem 0 0.75rem;
+}
+
+main h3 {
+  font-size: 1.15rem;
+  margin: 1.5rem 0 0.5rem;
+}
+
+main p,
+main ul,
+main ol,
+main blockquote,
+main table {
+  margin: 0 0 1rem;
+}
+
+main li + li {
+  margin-top: 0.25rem;
+}
+
+main hr {
+  margin: 2rem 0;
+  border: 0;
+  border-top: 1px solid var(--color-border, #ddd);
+}
+
+main blockquote {
+  padding-left: 1rem;
+  border-left: 3px solid var(--color-border, #ddd);
+  color: var(--color-muted, #555);
+}
+
+main img {
+  max-width: 100%;
+}
+
+main code {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.85em;
+  padding: 0.1em 0.3em;
+  background: var(--color-code-bg, #f4f4f4);
+  border-radius: 3px;
+}
+
+main > pre {
+  margin: 0 0 1rem;
+  padding: 0.75rem 1rem;
+  overflow-x: auto;
+  background: var(--color-code-bg, #f4f4f4);
+  border-radius: 4px;
+  line-height: 1.5;
+}
+
+main pre code {
+  padding: 0;
+  background: none;
+}
+
+main table {
+  border-collapse: collapse;
+}
+
+main th,
+main td {
+  padding: 0.3rem 0.75rem;
+  border-bottom: 1px solid var(--color-border, #ddd);
+  text-align: left;
+}
+
+main .katex-display {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.split-pane {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.split-pane--left {
+  flex-direction: row;
+}
+
+.split-pane--right {
+  flex-direction: row-reverse;
+}
+
+.split-pane--top {
+  flex-direction: column;
+}
+
+.split-pane--bottom {
+  flex-direction: column-reverse;
+}
+
+/* Each pane scrolls on its own. */
+.split-pane-pane {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* Draggable divider: a thin bar along whichever axis the split uses. */
+.split-pane-divider {
+  position: relative;
+  flex: 0 0 6px;
+  align-self: stretch;
+  background: var(--color-border, #ddd);
+  cursor: col-resize;
+  z-index: 5;
+  transition: background 0.15s ease;
+  touch-action: none;
+}
+
+.split-pane-divider:hover,
+.split-pane-divider:active {
+  background: var(--color-border-hover, #999);
+}
+
+.split-pane-divider--horizontal {
+  cursor: row-resize;
+}
+
+.split-pane-buttons {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.split-pane-divider--horizontal .split-pane-buttons {
+  flex-direction: row;
+}
+
+.split-pane-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  background: var(--color-bg, #fff);
+  border: 1px solid var(--color-border, #ddd);
+  border-radius: 50%;
+  color: var(--color-subtle, #666);
+  cursor: pointer;
+}
+
+.split-pane-button:hover {
+  color: var(--color-hover, #000);
+  border-color: var(--color-border-hover, #999);
+}
+
+/* A canvas page fills the screen below the header. */
+#app:has(.canvas-page) {
+  height: 100dvh;
+}
+
+.canvas-page {
+  flex: 1 1 0;
+}
+
+.canvas-page-canvas {
+  height: 100%;
+}
+
+/* NodeCanvas measures this box to size its grid. */
+.node-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.canvas-page-canvas svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Hidden until MarkdownBody swaps it for the editor; keeps its space so the text below doesn't jump. */
+pre:has(> code.language-python-editor) {
+  visibility: hidden;
+}
+
+.python-editor {
+  margin: 1rem 0;
+  border: 1px solid var(--color-border, #ddd);
+  border-radius: 4px;
+  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+}
+
+.python-editor .cm-editor {
+  font-size: 0.875rem;
+}
+
+.python-editor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  border-top: 1px solid var(--color-border, #ddd);
+}
+
+.python-editor-button {
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  background: var(--color-bg, #fff);
+  border: 1px solid var(--color-border, #ddd);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.python-editor-button:hover {
+  border-color: var(--color-border-hover, #999);
+}
+
+.python-editor-status {
+  color: var(--color-subtle, #666);
+  font-size: 0.875rem;
+}
+
+/* ↺ draws small in most fonts. */
+.python-editor-reset {
+  font-size: 1.125rem;
+}
+
+.python-editor-collapse {
+  margin-left: auto;
+}
+
+/* Collapsed: only the toolbar shows. Hidden with CSS so the editor keeps its code. */
+.python-editor-collapsed .python-editor-code,
+.python-editor-collapsed .python-editor-output {
+  display: none;
+}
+
+.python-editor-collapsed .python-editor-toolbar {
+  border-top: none;
+}
+
+.python-editor-output {
+  padding: 0.5rem;
+  border-top: 1px solid var(--color-border, #ddd);
+  font-size: 0.875rem;
+}
+
+.python-editor-text {
+  margin: 0;
+  max-height: 20rem;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+
+.python-editor-plot {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.python-editor-error {
+  color: var(--color-error, #c00);
+}
+
+.python-editor-note {
+  color: var(--color-subtle, #666);
+}

package/src/app.tsx

@@ -0,0 +1,30 @@
+import { MetaProvider } from "@solidjs/meta";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start/router";
+import { Suspense } from "solid-js";
+import { Header as BuiltInHeader } from "./components/Header";
+import { PageTitle } from "./components/PageTitle";
+import { layout, type LayoutModules } from "./lib/layouts/layout";
+import "./app.css";
+// Author styles load after `app.css`, so they override it.
+import "./authorStyles";
+
+// The site's own `layouts/header.tsx`, or the built-in header.
+const Header = layout(import.meta.glob<LayoutModules[string]>("/layouts/header.tsx", { eager: true }), BuiltInHeader);
+
+export default function App() {
+  return (
+    <Router
+      root={props => (
+        <MetaProvider>
+          {/* Default; a page's own PageTitle overrides it. */}
+          <PageTitle />
+          <Header />
+          <Suspense>{props.children}</Suspense>
+        </MetaProvider>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  );
+}

package/src/authorStyles.ts

@@ -0,0 +1,3 @@
+// Loads every `.css` file in `/styles`. Kept in its own module because Vite hoists
+// glob imports to the top of a file; `app.tsx` imports this after `app.css`.
+import.meta.glob('/styles/**/*.css', { eager: true });

package/src/components/Header.tsx

@@ -0,0 +1,16 @@
+import site from "/site.yml";
+
+/** The site name and nav links, shown at the top of every page when the site has no `layouts/header.tsx`. */
+export function Header() {
+  return (
+    <header class="site-header">
+      <a class="site-header-title" href="/">
+        {site.title}
+      </a>
+      <nav class="site-header-nav">
+        <a href="/about">About</a>
+        <a href="/pages">Pages</a>
+      </nav>
+    </header>
+  );
+}

package/src/components/PageTitle.tsx

@@ -0,0 +1,10 @@
+import { Title } from "@solidjs/meta";
+import site from "/site.yml";
+
+/** Sets the browser tab title to "<page> – <site title>", or the site title alone when no page title is given. */
+export function PageTitle(props: { children?: string }) {
+  // A ternary written inside the JSX gets wrapped in a memo, which `@solidjs/meta` reads
+  // outside any owner when it removes the tag, causing a "never be disposed" warning.
+  const title = () => (props.children ? `${props.children} – ${site.title}` : site.title);
+  return <Title>{title()}</Title>;
+}

package/src/components/SplitPane.tsx

@@ -0,0 +1,170 @@
+import { createSignal, Show, type JSX } from 'solid-js';
+import { Chevron, type Direction } from './icons';
+
+/** The edge the first pane sits against. */
+export type SplitSide = 'left' | 'right' | 'top' | 'bottom';
+type Collapsed = 'none' | 'first' | 'second';
+
+// Limits on the first pane's share, in %, while dragging.
+const MIN_PERCENT = 20;
+const MAX_PERCENT = 85;
+/** Dragging a pane below this share, in %, collapses it. */
+const SNAP_PERCENT = 8;
+
+const SIDE_DIRECTION: Record<SplitSide, Direction> = { left: 'left', right: 'right', top: 'up', bottom: 'down' };
+const OPPOSITE: Record<Direction, Direction> = { left: 'right', right: 'left', up: 'down', down: 'up' };
+const BUTTONS_TRANSFORM: Record<Direction | 'center', string> = {
+  center: 'translate(-50%, -50%)',
+  left: 'translate(-100%, -50%)',
+  right: 'translate(0, -50%)',
+  up: 'translate(-50%, -100%)',
+  down: 'translate(-50%, 0)',
+};
+
+const HIDDEN_PANE: JSX.CSSProperties = { flex: '0 0 0%', overflow: 'hidden', visibility: 'hidden' };
+
+/** The first pane's share of `rect`, in %, with the pointer at (`x`, `y`). */
+function firstPercentAt(side: SplitSide, rect: DOMRect, x: number, y: number): number {
+  const fraction = {
+    left: (x - rect.left) / rect.width,
+    right: (rect.right - x) / rect.width,
+    top: (y - rect.top) / rect.height,
+    bottom: (rect.bottom - y) / rect.height,
+  }[side];
+  return fraction * 100;
+}
+
+/**
+ * Calls `onMove` on every pointer move until the pointer is released.
+ * Listens on the window, so the drag goes on after the pointer leaves the divider.
+ * Text selection is off meanwhile, so dragging doesn't highlight page text.
+ */
+function trackDrag(onMove: (ev: PointerEvent) => void) {
+  document.body.style.userSelect = 'none';
+  const stop = () => {
+    document.body.style.userSelect = '';
+    window.removeEventListener('pointermove', onMove);
+    window.removeEventListener('pointerup', stop);
+  };
+  window.addEventListener('pointermove', onMove);
+  window.addEventListener('pointerup', stop);
+}
+
+/** The draggable bar between the panes, with a button to collapse each one. */
+function SplitDivider(props: {
+  side: SplitSide;
+  collapsed: Collapsed;
+  setCollapsed: (c: Collapsed) => void;
+  firstLabel: string;
+  secondLabel: string;
+  onPointerDown: (e: PointerEvent) => void;
+}) {
+  const isStacked = () => props.side === 'top' || props.side === 'bottom';
+  const firstDirection = () => SIDE_DIRECTION[props.side];
+  const secondDirection = () => OPPOSITE[firstDirection()];
+  // A collapsed pane's buttons sit beside the bar, on the open pane's side.
+  const buttonsTransform = () => {
+    const c = props.collapsed;
+    return BUTTONS_TRANSFORM[c === 'first' ? secondDirection() : c === 'second' ? firstDirection() : 'center'];
+  };
+  const firstButtonLabel = () => (props.collapsed === 'second' ? `Show ${props.secondLabel}` : `Hide ${props.firstLabel}`);
+  const secondButtonLabel = () => (props.collapsed === 'first' ? `Show ${props.firstLabel}` : `Hide ${props.secondLabel}`);
+
+  return (
+    <div
+      class="split-pane-divider"
+      classList={{ 'split-pane-divider--horizontal': isStacked() }}
+      onPointerDown={props.onPointerDown}
+      role="separator"
+      aria-orientation={isStacked() ? 'horizontal' : 'vertical'}
+    >
+      <div class="split-pane-buttons" style={{ transform: buttonsTransform() }}>
+        <Show when={props.collapsed !== 'first'}>
+          <button
+            class="split-pane-button"
+            onPointerDown={(e) => e.stopPropagation()}
+            onClick={() => props.setCollapsed(props.collapsed === 'second' ? 'none' : 'first')}
+            aria-label={firstButtonLabel()}
+            title={firstButtonLabel()}
+          >
+            <Chevron direction={firstDirection()} />
+          </button>
+        </Show>
+        <Show when={props.collapsed !== 'second'}>
+          <button
+            class="split-pane-button"
+            onPointerDown={(e) => e.stopPropagation()}
+            onClick={() => props.setCollapsed(props.collapsed === 'first' ? 'none' : 'second')}
+            aria-label={secondButtonLabel()}
+            title={secondButtonLabel()}
+          >
+            <Chevron direction={secondDirection()} />
+          </button>
+        </Show>
+      </div>
+    </div>
+  );
+}
+
+export interface SplitPaneProps {
+  side: SplitSide;
+  first: JSX.Element;
+  second: JSX.Element;
+  /** Names used on the collapse buttons, e.g. "Hide canvas". */
+  firstLabel: string;
+  secondLabel: string;
+  class?: string;
+}
+
+/**
+ * Two panes split by a draggable divider: `first` against `side`, `second` in the rest.
+ * Each pane can be collapsed with a button on the divider, or by dragging it nearly shut.
+ */
+export function SplitPane(props: SplitPaneProps) {
+  let ref: HTMLDivElement | undefined;
+  const [firstPercent, setFirstPercent] = createSignal(50);
+  const [collapsed, setCollapsed] = createSignal<Collapsed>('none');
+
+  const startResize = (e: PointerEvent) => {
+    e.preventDefault();
+    trackDrag((ev) => {
+      if (!ref) return;
+      const pct = firstPercentAt(props.side, ref.getBoundingClientRect(), ev.clientX, ev.clientY);
+      if (pct < SNAP_PERCENT) {
+        setCollapsed('first');
+      } else if (pct > 100 - SNAP_PERCENT) {
+        setCollapsed('second');
+      } else {
+        setCollapsed('none');
+        setFirstPercent(Math.min(MAX_PERCENT, Math.max(MIN_PERCENT, pct)));
+      }
+    });
+  };
+
+  const firstStyle = (): JSX.CSSProperties => {
+    const c = collapsed();
+    if (c === 'first') return HIDDEN_PANE;
+    if (c === 'second') return { flex: '1 1 0%' };
+    return { flex: `0 0 ${firstPercent()}%` };
+  };
+  const secondStyle = (): JSX.CSSProperties => (collapsed() === 'second' ? HIDDEN_PANE : { flex: '1 1 0%' });
+
+  return (
+    <div class={`split-pane split-pane--${props.side} ${props.class ?? ''}`} ref={ref}>
+      <div class="split-pane-pane" style={firstStyle()}>
+        {props.first}
+      </div>
+      <SplitDivider
+        side={props.side}
+        collapsed={collapsed()}
+        setCollapsed={setCollapsed}
+        firstLabel={props.firstLabel}
+        secondLabel={props.secondLabel}
+        onPointerDown={startResize}
+      />
+      <div class="split-pane-pane" style={secondStyle()}>
+        {props.second}
+      </div>
+    </div>
+  );
+}

package/src/components/icons.tsx

@@ -0,0 +1,22 @@
+export type Direction = 'left' | 'right' | 'up' | 'down';
+
+const CHEVRON_TURN: Record<Direction, number> = { left: 0, up: 90, right: 180, down: 270 };
+
+/** A small arrow pointing `direction`. */
+export function Chevron(props: { direction: Direction }) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      style={{ transform: `rotate(${CHEVRON_TURN[props.direction]}deg)` }}
+    >
+      <path d="M15 18l-6-6 6-6" />
+    </svg>
+  );
+}

package/src/entry-client.tsx

@@ -0,0 +1,4 @@
+// @refresh reload
+import { mount, StartClient } from "@solidjs/start/client";
+
+mount(() => <StartClient />, document.getElementById("app")!);

package/src/entry-server.tsx

@@ -0,0 +1,21 @@
+// @refresh reload
+import { createHandler, StartServer } from "@solidjs/start/server";
+
+export default createHandler(() => (
+  <StartServer
+    document={({ assets, children, scripts }) => (
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" href="/favicon.ico" />
+          {assets}
+        </head>
+        <body>
+          <div id="app">{children}</div>
+          {scripts}
+        </body>
+      </html>
+    )}
+  />
+));

package/src/global.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="@solidjs/start/env" />
+
+// The root `site.yml`, turned into a module by `src/lib/site/vitePlugin.ts`.
+declare module '*/site.yml' {
+  const site: import('./lib/site/vitePlugin').Site;
+  export default site;
+}

package/src/lib/appDir.ts

@@ -0,0 +1,4 @@
+import path from 'node:path';
+
+/** The app's `src/` folder: in this repo, or in `node_modules/@tinyvolt/pie` in a site. */
+export const APP_DIR = path.resolve(import.meta.dirname, '..');