@tinyvolt/pie 0.0.0-stage → 0.2.0

package/package.json

@@ -1,6 +1,65 @@
 {
   "name": "@tinyvolt/pie",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "A Markdown-based SSG for interactive science explainers. Create a site with: npx @tinyvolt/pie init my-site",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TinyVolt/pie-ssg.git"
+  },
+  "exports": {
+    "./vite": "./vite.ts"
+  },
+  "bin": {
+    "pie": "init/index.js"
+  },
+  "files": [
+    "src",
+    "vite.ts",
+    "init",
+    "pages",
+    "functions",
+    "nodes",
+    "styles",
+    "layouts",
+    "public",
+    "site.yml",
+    ".nvmrc"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node .output/server/index.mjs",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@codemirror/lang-python": "6.2.1",
+    "@codemirror/view": "6.43.14",
+    "@jax-js/jax": "0.1.25",
+    "@solidjs/meta": "0.29.4",
+    "@solidjs/router": "1.0.0",
+    "@solidjs/start": "2.0.6",
+    "codemirror": "6.0.2",
+    "katex": "0.19.0",
+    "marked": "18.1.1",
+    "nitro": "3.0.260610-beta"
+  },
+  "peerDependencies": {
+    "solid-js": "1.9.14",
+    "vite": "8.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@12.9.1",
+  "engines": {
+    "node": "^24"
+  },
+  "devDependencies": {
+    "@types/node": "24.19.2",
+    "solid-js": "1.9.14",
+    "typescript": "7.0.2",
+    "vite": "8.1.4"
+  },
+  "license": "MIT"
+}

package/pages/about.md

@@ -0,0 +1,5 @@
+---
+title: About
+---
+
+# About

package/pages/example.md

@@ -0,0 +1,7 @@
+---
+canvas: none
+---
+
+# Example
+
+Euler's identity: $e^{i\pi} + 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 collapsed
+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,387 @@
+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;
+  max-height: 20rem;
+  overflow: 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);
+}
+
+/* Default cap on the code's height. Dragging the resize bar replaces it with a fixed height. */
+.python-editor .cm-editor {
+  font-size: 0.875rem;
+  max-height: 20rem;
+}
+
+.python-editor .cm-scroller {
+  overflow-y: auto;
+}
+
+.python-editor-resize {
+  height: 6px;
+  cursor: row-resize;
+  touch-action: none;
+}
+
+.python-editor-resize:hover {
+  background: var(--color-border, #ddd);
+}
+
+.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 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  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;
+}
+
+.python-editor-result {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.python-editor-result-success {
+  color: var(--color-success, #1a7f37);
+}
+
+.python-editor-result-error {
+  color: var(--color-error, #c00);
+}
+
+.python-editor-result-stopped {
+  color: var(--color-warning, #9a6700);
+}
+
+.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-resize,
+.python-editor-collapsed .python-editor-output {
+  display: none;
+}
+
+.python-editor-collapsed .python-editor-toolbar {
+  border-top: none;
+}
+
+/* Right padding leaves room for the copy button so it doesn't cover the text. */
+.python-editor-output {
+  position: relative;
+  padding: 0.5rem 2.75rem 0.5rem 0.5rem;
+  border-top: 1px solid var(--color-border, #ddd);
+  font-size: 0.875rem;
+}
+
+.python-editor-copy {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.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/PageMeta.tsx

@@ -0,0 +1,40 @@
+import { Link, Meta } from "@solidjs/meta";
+import { useLocation } from "@solidjs/router";
+import { Show } from "solid-js";
+import site from "/site.yml";
+import { PageTitle } from "./PageTitle";
+
+/**
+ * The tab title plus the tags for search results and link previews. Each route renders it once:
+ * `@solidjs/meta` replaces a `<meta>` only when its content matches too, so a page's tag can't override a default.
+ * Empty `title` or `description` falls back to `site.yml`. The canonical link and `og:url` need `site.yml`'s `url`.
+ */
+export function PageMeta(props: { title?: string; description?: string }) {
+  const location = useLocation();
+  const ogTitle = () => props.title || site.title;
+  const description = () => props.description || site.description;
+  return (
+    <>
+      <PageTitle>{props.title}</PageTitle>
+      <Meta property="og:type" content="website" />
+      <Meta property="og:site_name" content={site.title} />
+      <Meta property="og:title" content={ogTitle()} />
+      <Show when={description()}>
+        {description => (
+          <>
+            <Meta name="description" content={description()} />
+            <Meta property="og:description" content={description()} />
+          </>
+        )}
+      </Show>
+      <Show when={site.url}>
+        {url => (
+          <>
+            <Link rel="canonical" href={url() + location.pathname} />
+            <Meta property="og:url" content={url() + location.pathname} />
+          </>
+        )}
+      </Show>
+    </>
+  );
+}

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>;
+}