@publish.os/nextjs 0.0.1-alpha.81 → 0.0.1-alpha.91

package/init/seed/minimal/publish.os/blog/content/hello-world.mdx

@@ -0,0 +1,48 @@
+---
+title: Hello, world.
+description: Publish your first post and make this blog your own.
+publishedAt: 2026-10-20
+authors: [Matthew B]
+tags: [Press]
+image:
+  src: /assets/blog/hello-world.svg
+  alt: A code symbol where several publishing paths meet.
+---
+
+Use this blog to share news, releases, and what you learn. Edit this post in `publish.os/blog/content/hello-world.mdx`.
+
+## Add a post
+
+Create another `.mdx` file in `publish.os/blog/content/`:
+
+```mdx
+---
+title: A small beginning
+description: Why this project exists.
+publishedAt: 2026-10-21
+authors: [Matthew B]
+---
+
+This project starts with one problem and one useful solution.
+```
+
+The blog index shows published posts, newest first. Set `publishedAt` to edit the publication date. 
+
+## Customize the blog
+
+Edit `index.tsx` to change the post list at `/blog`. Edit `page.tsx` to change individual posts. The shared [theme](/docs/themes) supplies colors and typography.
+
+```txt
+publish.os/blog/
+├── layout.tsx
+├── index.tsx
+├── page.tsx
+└── content/
+    ├── hello-world.mdx
+    └── series-a.mdx
+```
+
+
+Edit `layout.tsx` to change the blog layout.
+
+Add `tags` and an `image` with `src` and `alt` to a post's frontmatter to customize its header. Keep local images in `publish.os/assets/` and reference them with `/assets/` paths.

package/init/seed/minimal/publish.os/blog/content/series-a.mdx

@@ -0,0 +1,11 @@
+---
+title: Our $5M Series A
+description: A fictional funding announcement for your starter blog.
+publishedAt: 2026-10-18
+authors: [Matthew B]
+tags: [Company news]
+---
+
+Example Co. raised $5 million in Series A funding to help teams publish useful documentation. We will use the investment to grow the team and improve the product.
+
+This is a fictional announcement for the starter site. Replace it with your own news.

package/init/seed/minimal/publish.os/blog/index.tsx

@@ -0,0 +1,82 @@
+import type {
+  IndexPageProps,
+  PageNode,
+  TreeNode,
+} from "@publish.os/nextjs/types";
+import { prettyDate } from "@publish.os/nextjs/utils/pretty-date";
+import Link from "next/link";
+
+function pageNodes(nodes: TreeNode[]): PageNode[] {
+  return nodes.flatMap((node) => {
+    if (node.type === "page") return [node];
+    if (node.type === "section" || node.type === "folder") {
+      return pageNodes(node.children);
+    }
+    return [];
+  });
+}
+
+export default function BlogIndex({ node, tree }: IndexPageProps) {
+  const posts = pageNodes(tree)
+    .filter((page) => page.status === "published")
+    .sort(
+      (a, b) =>
+        (b.publishedAt ?? "").localeCompare(a.publishedAt ?? "") ||
+        a.path.localeCompare(b.path),
+    );
+
+  return (
+    <section className="w-full px-4 py-12 md:px-5 lg:px-6 lg:py-16">
+      <h1 className="mb-10 text-balance text-5xl font-medium leading-none tracking-tight text-foreground-1">
+        {node.title}
+      </h1>
+      {posts.length > 0 ? (
+        <ul>
+          {posts.map((post) => {
+            const authors = post.authors
+              .map((author) => author.name)
+              .join(", ");
+            const date = prettyDate(post.publishedAt);
+
+            return (
+              <li
+                className="border-b border-stroke-4 last:border-b-0"
+                key={post.path}
+              >
+                <Link
+                  className="-mx-4 flex min-h-12 items-center gap-6 rounded-card px-4 py-4 text-sm text-foreground-1 hover:bg-surface-hover active:bg-surface-active focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-stroke"
+                  href={post.path}
+                  title={post.title}
+                >
+                  <span className="min-w-0 flex-1 truncate">{post.title}</span>
+                  <span className="hidden min-w-0 max-w-[45%] items-baseline gap-1.5 text-foreground-3 md:flex">
+                    {authors ? (
+                      <span className="truncate">{authors}</span>
+                    ) : null}
+                    {authors && date ? <span aria-hidden="true">·</span> : null}
+                    {date ? (
+                      <time
+                        className="shrink-0 whitespace-nowrap"
+                        dateTime={post.publishedAt}
+                      >
+                        {date}
+                      </time>
+                    ) : null}
+                  </span>
+                  <span
+                    aria-hidden="true"
+                    className="shrink-0 text-foreground-2 md:hidden rtl:rotate-180"
+                  >
+                    →
+                  </span>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      ) : (
+        <p className="text-sm text-foreground-2">No posts yet.</p>
+      )}
+    </section>
+  );
+}

package/init/seed/minimal/publish.os/blog/layout.tsx

@@ -0,0 +1,13 @@
+import type { LayoutProps } from "@publish.os/nextjs/types";
+
+export default function BlogLayout({ children }: LayoutProps) {
+  return (
+    <main
+      className="mx-auto flex min-h-0 min-w-0 w-full max-w-(--layout-site-max-width) flex-1 flex-col border-x border-stroke-3 bg-surface-1"
+      id="main-content"
+      tabIndex={-1}
+    >
+      {children}
+    </main>
+  );
+}

package/init/seed/minimal/publish.os/blog/page.tsx

@@ -0,0 +1,76 @@
+import { CaretLeftIcon } from "@phosphor-icons/react/ssr";
+import { MDX } from "@publish.os/nextjs/mdx";
+import type { PageProps } from "@publish.os/nextjs/types";
+import { prettyDate } from "@publish.os/nextjs/utils/pretty-date";
+import Image from "next/image";
+import Link from "next/link";
+import { CopyLink } from "../components/blog/copy-link";
+
+type BlogMeta = {
+  image?: { src: string; alt: string };
+};
+
+export default function BlogLeaf({ page }: PageProps<BlogMeta>) {
+  const authors = page.authors.map((author) => author.name).join(", ");
+  const date = prettyDate(page.publishedAt);
+
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col px-4 pt-6 md:px-5 lg:px-6 lg:pt-8">
+      <nav aria-label="Blog" className="mb-8 lg:mb-12">
+        <Link
+          className="-ms-2 inline-flex min-h-11 items-center gap-1.5 rounded-button px-2 text-sm text-foreground-3 hover:text-foreground-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-stroke"
+          href="/blog"
+        >
+          <CaretLeftIcon
+            aria-hidden="true"
+            className="size-3.5 shrink-0 rtl:rotate-180"
+          />
+          Blog
+        </Link>
+      </nav>
+      <article className="mx-auto flex min-w-0 w-full max-w-4xl flex-1 flex-col wrap-anywhere">
+        <header>
+          <div className="mx-auto w-full max-w-2xl">
+            <h1 className="text-balance text-center text-4xl font-medium leading-tight tracking-tight text-foreground-1 md:text-5xl">
+              {page.title}
+            </h1>
+          </div>
+          {page.meta.image ? (
+            <Image
+              alt={page.meta.image.alt}
+              className="mt-10 aspect-2/1 w-full rounded-media border border-stroke-3 object-cover"
+              height={800}
+              priority
+              sizes="(max-width: 896px) 100vw, 896px"
+              src={page.meta.image.src}
+              width={1600}
+            />
+          ) : null}
+          <div className="mx-auto w-full max-w-2xl">
+            {page.description ? (
+              <p className="mt-12 text-pretty text-center text-base italic leading-7 text-foreground-2">
+                {page.description}
+              </p>
+            ) : null}
+            <hr className="my-10 border-stroke-3" />
+          </div>
+        </header>
+        <div className="mx-auto flex w-full max-w-2xl flex-1 flex-col">
+          <div className="markdown-prose min-w-0 flex-1">
+            <MDX page={page} />
+          </div>
+          <div className="mx-auto mt-12 mb-24 flex w-full max-w-2xl flex-wrap items-center justify-between gap-3 border-t border-stroke-3 pt-6">
+            {authors || date ? (
+              <p className="flex flex-wrap items-baseline gap-x-1.5 text-sm text-foreground-3">
+                {authors ? <span>{authors}</span> : null}
+                {authors && date ? <span aria-hidden="true">·</span> : null}
+                {date ? <time dateTime={page.publishedAt}>{date}</time> : null}
+              </p>
+            ) : null}
+            <CopyLink className="ms-auto" path={page.path} />
+          </div>
+        </div>
+      </article>
+    </div>
+  );
+}

package/init/seed/minimal/publish.os/components/blog/copy-link.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Link } from "@components/ui/link";
+import { LinkSimpleIcon } from "@phosphor-icons/react/ssr";
+import { useState } from "react";
+
+export function CopyLink({
+  className,
+  path,
+}: {
+  className?: string;
+  path: string;
+}) {
+  const [status, setStatus] = useState<"idle" | "pending" | "copied" | "error">(
+    "idle",
+  );
+
+  async function copyLink() {
+    setStatus("pending");
+    try {
+      await navigator.clipboard.writeText(
+        new URL(path, window.location.origin).href,
+      );
+      setStatus("copied");
+    } catch {
+      setStatus("error");
+    }
+  }
+
+  return (
+    <div className={className}>
+      <Link
+        aria-busy={status === "pending" || undefined}
+        className="inline-flex min-h-11 items-center text-foreground-3 hover:text-foreground-1 active:text-foreground-1 motion-safe:transition-[color,scale] motion-safe:duration-150 motion-safe:active:scale-[0.96] motion-reduce:transition-none"
+        href={path}
+        leftIcon={<LinkSimpleIcon aria-hidden="true" />}
+        onClick={(event) => {
+          if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+          event.preventDefault();
+          if (status !== "pending") void copyLink();
+        }}
+        prefetch={false}
+        size="xs"
+      >
+        Copy link
+      </Link>
+      <p
+        className={
+          status === "error"
+            ? "mt-2 max-w-60 text-sm text-foreground-2"
+            : "sr-only"
+        }
+        role="status"
+      >
+        {status === "copied"
+          ? "Link copied."
+          : status === "error"
+            ? "Could not copy. Try again, or copy the address from your browser."
+            : ""}
+      </p>
+    </div>
+  );
+}

package/init/seed/minimal/publish.os/docs/content/get-started.mdx

@@ -1,7 +1,6 @@
 ---
 title: Get started
 description: Preview your site and make your first change.
-order: 1
 ---
 
 A publishOS site starts with a folder. The `publish.os/` folder contains your content, theme, and configuration.
@@ -14,11 +13,11 @@ Local previews and builds do not require an account.
 
 From your project directory, run this command:
 
-```bash
-npx --package @publish.os/cli@latest publishos dev
+```bash title="Preview the site"
+npx @publish.os/cli@latest dev
 ```
 
-Open the address that the CLI shows. To stop the preview, press `Ctrl+C`.
+Open the address that the CLI shows. To stop the preview, press <kbd>Ctrl</kbd>+<kbd>C</kbd>.
 
 ## Make one change
 
@@ -30,13 +29,7 @@ Use Markdown for normal text. You can use **bold text**, _italic text_, and `cod
 
 You can also use MDX components to add interactive elements to your pages.
 
-<Callout title="A short note">
-  A short notice or piece of information.
-</Callout>
-
-```text
-Code blocks can show quick examples.
-```
+Use the [blog](/blog) to share updates alongside your documentation.
 
 You can show a keyboard shortcut such as <kbd>Ctrl</kbd>+<kbd>Enter</kbd>.
 
@@ -52,3 +45,5 @@ description: Add a page to your site.
 
 Each MDX file contains one page.
 ```
+
+Next, organize your [groups](/docs/groups) or customize your [theme](/docs/themes).

package/init/seed/minimal/publish.os/docs/content/groups.mdx

@@ -1,25 +1,24 @@
 ---
 title: Groups
 description: Give each group one purpose and each page a clear name.
-order: 2
 ---
 
-A content group keeps related pages together. This site has one group, `docs`.
+A content group keeps related pages together. This site has two groups: `docs` and `blog`.
 
 ## Add a group
 
-Create `publish.os/blog/content/first-post.mdx`:
+Create `publish.os/notes/content/first-note.mdx`:
 
 ```mdx
 ---
-title: A small beginning
-description: Why this project exists.
+title: Project notes
+description: What we learned while building this project.
 ---
 
 This project starts with one problem and one useful solution.
 ```
 
-The `blog` folder creates a separate content group. Its pages can share a layout and theme without changes to the docs group.
+The `notes` folder creates a separate content group. Its pages can share a layout and theme without changes to the other groups.
 
 ## Choose clear names
 
@@ -28,4 +27,4 @@ The `blog` folder creates a separate content group. Its pages can share a layout
 | `docs` | Explain how to use it  |
 | `blog` | Explain what you learn |
 
-Use short file names with hyphens between words. Link to the page that answers the next question, such as [how to change the theme](/docs/theme).
+Use short file names with hyphens between words. Link to the page that answers the next question, such as [how to change the theme](/docs/themes).

package/init/seed/minimal/publish.os/docs/content/{theme.mdx → themes.mdx}

@@ -27,21 +27,21 @@ You can use `xs`, `sm`, `md`, `lg`, `xl`, or `none`. You can also use a custom v
 
 The neutral color palette changes the complete design system. Define the palette with a neutral scale.
 
-Low values usually define surfaces. Higher values add contrast for borders, text, and emphasized elements.
+Keep every palette color opaque, including subtle surfaces. Hover, active, and stroke tokens use transparency so controls adapt to the surface beneath them.
 
 ```css
---gray-100: #ffffff;
---gray-200: #fafafa;
---gray-300: #f5f5f5;
---gray-400: #eeeeee;
---gray-500: #e5e5e5;
---gray-600: #d4d4d4;
---gray-700: #a3a3a3;
+--gray-100: #fcfcfc;
+--gray-200: #f9f9f9;
+--gray-300: #f3f3f3;
+--gray-400: #f0f0f0;
+--gray-500: #e0e0e0;
+--gray-600: #c6c6c6;
+--gray-700: #999999;
 --gray-800: #737373;
---gray-900: #525252;
---gray-1000: #404040;
---gray-1100: #262626;
---gray-1200: #000000;
+--gray-900: #5d5d5d;
+--gray-1000: #464646;
+--gray-1100: #2e2e2e;
+--gray-1200: #171717;
 
 --neutral-100: var(--gray-100);
 --neutral-200: var(--gray-200);
@@ -62,3 +62,5 @@ Set the accent to your brand color or a color from the palette:
 ```css
 --accent: #ed940f;
 ```
+
+For layered controls, keep page and popup surfaces opaque. Derive hover, pressed, and border colors from a foreground or accent with transparency. The default theme does this with `color-mix()`, so the same control works on both light and dark surfaces. Keep text and solid button fills opaque for contrast.

package/init/seed/minimal/publish.os/publish.os.config.json

@@ -1,21 +1,21 @@
 {
   "version": 1,
-  "runtime": "@publish.os/nextjs@0.0.1-alpha.81",
+  "runtime": "@publish.os/nextjs@0.0.1-alpha.91",
   "site": {
-    "name": "publishOS guides",
-    "description": "Write pages, organize content, and build your site."
+    "name": "publish.os guides",
+    "description": "Documentation and updates for your project."
   },
   "fonts": {
     "main": {
-      "family": "Work Sans",
-      "weight": "100 900"
+      "family": "Inter"
     },
     "mono": {
       "family": "DM Mono",
       "weight": ["300", "400", "500"]
     }
   },
-  "icons": {
-    "family": "phosphor"
+  "groups": {
+    "docs": { "title": "Docs" },
+    "blog": { "title": "Blog" }
   }
 }

package/init/seed/minimal/publish.os/theme.css

@@ -1,18 +1,18 @@
 /* Delete this file to use the same PublishOS fallback theme. */
 
 :root {
-  --gray-100: #ffffff;
-  --gray-200: #fafafa;
-  --gray-300: #f5f5f5;
-  --gray-400: #eeeeee;
-  --gray-500: #e5e5e5;
-  --gray-600: #d4d4d4;
-  --gray-700: #a3a3a3;
+  --gray-100: #fcfcfc;
+  --gray-200: #f9f9f9;
+  --gray-300: #f3f3f3;
+  --gray-400: #f0f0f0;
+  --gray-500: #e0e0e0;
+  --gray-600: #c6c6c6;
+  --gray-700: #999999;
   --gray-800: #737373;
-  --gray-900: #525252;
-  --gray-1000: #404040;
-  --gray-1100: #262626;
-  --gray-1200: #000000;
+  --gray-900: #5d5d5d;
+  --gray-1000: #464646;
+  --gray-1100: #2e2e2e;
+  --gray-1200: #171717;
 
   --neutral-100: var(--gray-100);
   --neutral-200: var(--gray-200);
@@ -27,21 +27,49 @@
   --neutral-1100: var(--gray-1100);
   --neutral-1200: var(--gray-1200);
 
-  --accent: var(--gray-1200);
-  --theme-radius: var(--theme-radius-md);
+  --blue-100: #f7fbff;
+  --blue-200: #edf6fe;
+  --blue-300: #e3f1fd;
+  --blue-400: #d8ecfc;
+  --blue-500: #b3dbfd;
+  --blue-600: #8ecaff;
+  --blue-700: #6ab7ff;
+  --blue-800: #42a3ff;
+  --blue-900: #018dff;
+  --blue-1000: #0071ce;
+  --blue-1100: #00569f;
+  --blue-1200: #003d73;
+
+  --accent: var(--blue-1000);
+  --theme-radius: var(--theme-radius-sm);
 }
 
 .dark {
-  --gray-100: #000000;
-  --gray-200: #0a0a0a;
-  --gray-300: #171717;
-  --gray-400: #262626;
-  --gray-500: #404040;
+  --gray-100: #131313;
+  --gray-200: #1a1a1a;
+  --gray-300: #212121;
+  --gray-400: #292929;
+  --gray-500: #383838;
   --gray-600: #525252;
-  --gray-700: #737373;
-  --gray-800: #a3a3a3;
-  --gray-900: #d4d4d4;
-  --gray-1000: #e5e5e5;
-  --gray-1100: #f5f5f5;
-  --gray-1200: #ffffff;
+  --gray-700: #767676;
+  --gray-800: #b3b3b3;
+  --gray-900: #c4c4c4;
+  --gray-1000: #d2d2d2;
+  --gray-1100: #e6e6e6;
+  --gray-1200: #f5f5f5;
+
+  --blue-100: #101d29;
+  --blue-200: #142739;
+  --blue-300: #173249;
+  --blue-400: #193d5a;
+  --blue-500: #235278;
+  --blue-600: #2d6898;
+  --blue-700: #377fb9;
+  --blue-800: #4297dc;
+  --blue-900: #4dafff;
+  --blue-1000: #84c8ff;
+  --blue-1100: #b6dfff;
+  --blue-1200: #e8f5ff;
+
+  --accent: var(--blue-800);
 }

package/init/seed/minimal/publish.os/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.publish.os/ide/tsconfig.json"
+}

package/init/seed/minimal/seed.json

@@ -1,13 +1,23 @@
 {
   "name": "Minimal",
-  "description": "A minimal docs theme with three short guides.",
+  "description": "Docs and a blog with a minimal theme.",
   "files": [
     "publish.os.config.json",
+    "tsconfig.json",
     "theme.css",
     "assets/logo/publish-dev-logo.dark.png",
     "assets/logo/publish-dev-logo.png",
+    "assets/favicon.svg",
+    "assets/favicon.dark.svg",
+    "assets/blog/hello-world.svg",
     "docs/content/get-started.mdx",
     "docs/content/groups.mdx",
-    "docs/content/theme.mdx"
+    "docs/content/themes.mdx",
+    "blog/index.tsx",
+    "blog/layout.tsx",
+    "blog/page.tsx",
+    "components/blog/copy-link.tsx",
+    "blog/content/hello-world.mdx",
+    "blog/content/series-a.mdx"
   ]
 }

package/init/seed/scratch/publish.os/docs/content/get-started.mdx

@@ -0,0 +1,6 @@
+---
+title: Get started
+description: Replace this page with your own content.
+---
+
+Replace this page with your own content. See [our docs](publish.dev/docs)

package/init/seed/scratch/publish.os/publish.os.config.json

@@ -0,0 +1,4 @@
+{
+  "version": 1,
+  "runtime": "@publish.os/nextjs@0.0.1-alpha.91"
+}

package/init/seed/scratch/seed.json

@@ -0,0 +1,5 @@
+{
+  "name": "Empty site shell",
+  "description": "One editable Get started page.",
+  "files": ["publish.os.config.json", "docs/content/get-started.mdx"]
+}