create-riebeckite 0.0.31 → 0.0.33

package/templates/scaffold/presets/digital-garden/app/style.css

@@ -0,0 +1,152 @@
+@import "./.riebeckite/framework-styles.css";
+@import "./.riebeckite/plugin-styles.css";
+@import "./.riebeckite/theme-styles.css";
+
+.riebeckite-page {
+  --site-toc-sticky-top: var(--rb-space-3, 1.5rem);
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  padding-block: var(--rb-space-8, 4rem);
+}
+
+.riebeckite-main {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+}
+
+.riebeckite-main:has(> .not-found) {
+  flex: 1 1 auto;
+}
+
+.site-header {
+  display: flex;
+  align-items: center;
+  gap: var(--rb-space-3, 1.5rem);
+  padding-block: var(--rb-space-3, 1.5rem);
+  border-bottom: 1px solid var(--rb-color-border);
+}
+
+.site-header,
+.site-footer {
+  width: min(100% - 2rem, var(--rb-layout-page-max, 80rem));
+}
+
+.site-header__home {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-right: auto;
+  color: var(--rb-color-ink);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.site-header__mobile-navigation {
+  display: none;
+}
+
+.site-footer {
+  margin-top: 1rem;
+  border-top: 1px solid var(--rb-color-border);
+}
+
+@media (min-width: 30.001rem) and (max-width: 48rem) {
+  .site-header {
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 30rem) {
+  .riebeckite-page {
+    padding-block: var(--rb-space-3, 1.5rem);
+  }
+
+  .site-header {
+    flex-wrap: wrap;
+  }
+
+  .site-header__primary-navigation {
+    display: none;
+  }
+
+  .site-header__mobile-navigation {
+    display: block;
+  }
+}
+
+.site-header__logo {
+  width: 1.75rem;
+  height: 1.75rem;
+  object-fit: contain;
+}
+
+.site-article {
+  width: min(100% - 2rem, var(--rb-layout-page-max, 80rem));
+  padding-block: 2rem;
+}
+
+.site-article__layout {
+  width: min(100%, var(--rb-layout-article-max, 48rem));
+  margin: 0 auto;
+}
+
+.rb-article-body {
+  min-width: 0;
+  padding-inline: var(--rb-space-2, 1rem);
+}
+
+.site-article__footer {
+  min-width: 0;
+}
+
+.site-article__aside {
+  display: none;
+}
+
+@media (min-width: 80rem) {
+  .site-article__layout {
+    display: grid;
+    width: 100%;
+    grid-template-columns: minmax(0, 1fr) minmax(0, var(--rb-layout-article-max, 48rem)) minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .site-article__layout > .rb-article-body {
+    grid-column: 2;
+  }
+
+  .site-article__aside {
+    display: block;
+    min-width: 0;
+    align-self: stretch;
+    grid-column: 3;
+    padding-inline-start: var(--rb-layout-gap, 2rem);
+  }
+
+  .site-article__aside > .rr-table-of-contents--desktop {
+    position: sticky;
+    top: var(--site-toc-sticky-top);
+    max-height: calc(100dvh - var(--site-toc-sticky-top) - var(--rb-space-4, 2rem));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-inline-start: 1px solid color-mix(in oklab, currentColor 18%, transparent);
+    padding-inline-start: 1rem;
+  }
+}
+
+.not-found {
+  width: min(100% - 2rem, var(--rb-layout-article-max, 48rem));
+  margin-block: auto;
+  padding-block: 2rem;
+}
+
+.not-found__status {
+  margin: 0;
+  color: var(--rb-color-accent);
+  font-weight: 700;
+}

package/templates/scaffold/presets/digital-garden/content/index.md

@@ -0,0 +1,10 @@
+---
+title: Welcome to {{title}}
+tags: [garden, welcome]
+---
+
+# Welcome to {{title}}
+
+This is a small, connected set of notes. Start with [[notes/how-this-garden-works]] or [[notes/seed-idea]].
+
+![[notes/how-this-garden-works]]

package/templates/scaffold/presets/digital-garden/content/notes/how-this-garden-works.md

@@ -0,0 +1,11 @@
+---
+title: How this garden works
+aliases: [Garden guide]
+tags: [garden, notes]
+---
+
+# How this garden works
+
+Every Markdown file is a note. Link ideas with `[[wiki links]]`, then use backlinks and the local graph to find the connections.
+
+This note begins at [[Welcome to {{title}}]] and points to [[seed-idea]].

package/templates/scaffold/presets/digital-garden/content/notes/seed-idea.md

@@ -0,0 +1,9 @@
+---
+title: Seed idea
+created: 2026-10-25
+tags: [idea]
+---
+
+# Seed idea
+
+Small notes become useful when they are connected. See [[how-this-garden-works]].

package/templates/scaffold/presets/docs/app/components/article.tsx

@@ -0,0 +1,26 @@
+import { Article, ArticleBody, ArticleContent, ArticleFooter } from "@riebeckite/honox/ui";
+import { Breadcrumbs } from "@riebeckite/plugin-breadcrumbs";
+import { DocsPrevNext, DocsSidebar } from "@riebeckite/plugin-docs";
+import { TableOfContents } from "@riebeckite/plugin-toc";
+
+export function SiteArticle() {
+  return (
+    <Article class="site-article">
+      <div class="site-article__layout">
+        <aside class="site-article__sidebar">
+          <DocsSidebar />
+        </aside>
+        <ArticleContent>
+          <Breadcrumbs />
+          <ArticleBody />
+          <ArticleFooter class="site-article__footer">
+            <DocsPrevNext />
+          </ArticleFooter>
+        </ArticleContent>
+        <aside class="site-article__aside">
+          <TableOfContents className="rr-table-of-contents--desktop" />
+        </aside>
+      </div>
+    </Article>
+  );
+}

package/templates/scaffold/presets/docs/app/components/site-header.tsx

@@ -0,0 +1,37 @@
+import { MobileSiteNav, SiteNav } from "@riebeckite/plugin-navigation";
+import { ColorModeToggle } from "@riebeckite/plugin-color-mode";
+import { useSiteContext } from "@riebeckite/ui";
+
+export function SiteHeader() {
+  const site = useSiteContext();
+
+  return (
+    <header class="site-header rb-site-header">
+      <a href="/" class="site-header__home rb-site-header__home">
+        <img
+          src="/riebeckite-logo.png"
+          alt=""
+          class="site-header__logo"
+          width="28"
+          height="28"
+        />
+        {site?.config.site.title}
+      </a>
+      <div class="site-header__primary-navigation">
+        <SiteNav placement="primary" omitHome />
+      </div>
+      <div class="site-header__mobile-navigation">
+        <MobileSiteNav placement="primary" omitHome />
+      </div>
+      <ColorModeToggle />
+    </header>
+  );
+}
+
+export function SiteFooter() {
+  return (
+    <footer class="site-footer rb-site-footer">
+      <SiteNav placement="secondary" />
+    </footer>
+  );
+}

package/templates/scaffold/presets/docs/app/routes/[slug{.+}].tsx

@@ -0,0 +1,10 @@
+import { createContentRoute } from "@riebeckite/honox/server";
+import { SiteArticle } from "../components/article";
+import { config } from "virtual:riebeckite/config";
+import { content } from "virtual:riebeckite/content";
+
+export default createContentRoute({
+  content,
+  config,
+  render: () => <SiteArticle />,
+});

package/templates/scaffold/presets/docs/app/routes/_404.tsx

@@ -0,0 +1,18 @@
+import type { Context } from "hono";
+
+const handler = (c: Context) => {
+  c.status(404);
+
+  return c.render(
+    <div class="not-found">
+      <p class="not-found__status">404</p>
+      <h1>Page not found</h1>
+      <p>The page you requested does not exist or is not available.</p>
+      <p>
+        <a href="/">Back to home</a>
+      </p>
+    </div>,
+  );
+};
+
+export default handler;

package/templates/scaffold/presets/docs/app/routes/_renderer.tsx

@@ -0,0 +1,42 @@
+import { RiebeckiteHead, ThemeRoot } from "@riebeckite/honox/ui";
+import { createPublicContentView } from "@riebeckite/core";
+import { SiteProvider } from "@riebeckite/ui";
+import { jsxRenderer } from "hono/jsx-renderer";
+import { SearchBar } from "@riebeckite/plugin-search";
+import { SiteFooter, SiteHeader } from "../components/site-header";
+import { content } from "virtual:riebeckite/content";
+import { config } from "virtual:riebeckite/config";
+
+// Riebeckite plugin client entries need the HonoX client bundle even without
+// an island component.
+export const __importing_islands = true;
+
+export default jsxRenderer(async ({ children }, c) => {
+  const manifest = await content.getManifest();
+
+  return (
+    <SiteProvider
+      config={config}
+      manifest={manifest}
+      view={createPublicContentView(manifest)}
+      path={c.req.path}
+      language={c.get("htmlLanguage")}
+      headTags={c.get("headTags")}
+    >
+      <ThemeRoot>
+        <head>
+          <RiebeckiteHead />
+        </head>
+        <body class="riebeckite-page rb-site">
+          <a class="rb-skip-link" href="#main-content">Skip to main content</a>
+          <SiteHeader />
+          <SearchBar />
+          <main id="main-content" tabindex={-1} class="riebeckite-main">
+            {children}
+          </main>
+          <SiteFooter />
+        </body>
+      </ThemeRoot>
+    </SiteProvider>
+  );
+});

package/templates/scaffold/presets/docs/app/routes/index.tsx

@@ -0,0 +1,10 @@
+import { createHomeRoute } from "@riebeckite/honox/server";
+import { SiteArticle } from "../components/article";
+import { config } from "virtual:riebeckite/config";
+import { content } from "virtual:riebeckite/content";
+
+export default createHomeRoute({
+  content,
+  config,
+  render: () => <SiteArticle />,
+});

package/templates/scaffold/presets/docs/app/style.css

@@ -0,0 +1,169 @@
+@import "./.riebeckite/framework-styles.css";
+@import "./.riebeckite/plugin-styles.css";
+@import "./.riebeckite/theme-styles.css";
+
+.riebeckite-page {
+  --site-toc-sticky-top: var(--rb-space-3, 1.5rem);
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  padding-block: var(--rb-space-8, 4rem);
+}
+
+.riebeckite-main {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+}
+
+.riebeckite-main:has(> .not-found) {
+  flex: 1 1 auto;
+}
+
+.site-header {
+  display: flex;
+  align-items: center;
+  gap: var(--rb-space-3, 1.5rem);
+  padding-block: var(--rb-space-3, 1.5rem);
+  border-bottom: 1px solid var(--rb-color-border);
+}
+
+.site-header,
+.site-footer {
+  width: min(100% - 2rem, var(--rb-layout-page-max, 80rem));
+}
+
+.site-header__home {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-right: auto;
+  color: var(--rb-color-ink);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.site-header__mobile-navigation {
+  display: none;
+}
+
+.site-footer {
+  margin-top: 1rem;
+  border-top: 1px solid var(--rb-color-border);
+}
+
+@media (min-width: 30.001rem) and (max-width: 48rem) {
+  .site-header {
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 30rem) {
+  .riebeckite-page {
+    padding-block: var(--rb-space-3, 1.5rem);
+  }
+
+  .site-header {
+    flex-wrap: wrap;
+  }
+
+  .site-header__primary-navigation {
+    display: none;
+  }
+
+  .site-header__mobile-navigation {
+    display: block;
+  }
+}
+
+.site-header__logo {
+  width: 1.75rem;
+  height: 1.75rem;
+  object-fit: contain;
+}
+
+.site-article {
+  width: min(100% - 2rem, var(--rb-layout-page-max, 80rem));
+  padding-block: 2rem;
+}
+
+.site-article__layout {
+  width: min(100%, var(--rb-layout-article-max, 48rem));
+  margin: 0 auto;
+}
+
+.rb-article-body {
+  min-width: 0;
+  padding-inline: var(--rb-space-2, 1rem);
+}
+
+.site-article__footer {
+  min-width: 0;
+}
+
+.site-article__aside {
+  display: none;
+}
+
+.site-article__sidebar {
+  display: none;
+}
+
+@media (min-width: 80rem) {
+  .site-article__layout {
+    display: grid;
+    width: 100%;
+    grid-template-columns: minmax(14rem, 1fr) minmax(0, var(--rb-layout-article-max, 48rem)) minmax(14rem, 1fr);
+    align-items: start;
+  }
+
+  .site-article__layout > .rb-article-body {
+    grid-column: 2;
+  }
+
+  .site-article__sidebar {
+    display: block;
+    grid-column: 1;
+    grid-row: 1;
+    padding-inline-end: var(--rb-layout-gap, 2rem);
+  }
+
+  .site-article__sidebar > .rb-docs-sidebar-details {
+    position: sticky;
+    top: var(--site-toc-sticky-top);
+  }
+
+  .site-article__aside {
+    display: block;
+    min-width: 0;
+    align-self: stretch;
+    grid-column: 3;
+    padding-inline-start: var(--rb-layout-gap, 2rem);
+  }
+
+  .site-article__aside > .rr-table-of-contents--desktop {
+    position: sticky;
+    top: var(--site-toc-sticky-top);
+    max-height: calc(100dvh - var(--site-toc-sticky-top) - var(--rb-space-4, 2rem));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-inline-start: 1px solid color-mix(in oklab, currentColor 18%, transparent);
+    padding-inline-start: 1rem;
+  }
+
+}
+
+.not-found {
+  width: min(100% - 2rem, var(--rb-layout-article-max, 48rem));
+  margin-block: auto;
+  padding-block: 2rem;
+}
+
+.not-found__status {
+  margin: 0;
+  color: var(--rb-color-accent);
+  font-weight: 700;
+}

package/templates/scaffold/presets/docs/content/docs/configuration.md

@@ -0,0 +1,8 @@
+---
+title: Configuration
+order: 2
+---
+
+# Configuration
+
+Edit `riebeckite.config.ts` to set your site metadata and registered plugins.

package/templates/scaffold/presets/docs/content/docs/getting-started.md

@@ -0,0 +1,15 @@
+---
+title: Getting started
+order: 1
+---
+
+# Getting started
+
+Install dependencies and start the development server:
+
+```sh
+npm install
+npm exec riebeckite dev
+```
+
+Next: [[configuration]].

package/templates/scaffold/presets/docs/content/index.md

@@ -0,0 +1,7 @@
+---
+title: {{title}}
+---
+
+# {{title}}
+
+Clear documentation starts with a working example. Continue to [[docs/getting-started]].

package/templates/scaffold/presets/empty/app/routes/_404.tsx

@@ -4,14 +4,14 @@ const handler = (c: Context) => {
   c.status(404);
 
   return c.render(
-    <main class="not-found">
+    <div class="not-found">
       <p class="not-found__status">404</p>
       <h1>Page not found</h1>
       <p>The page you requested does not exist or is not available.</p>
       <p>
         <a href="/">Back to home</a>
       </p>
-    </main>,
+    </div>,
   );
 };
 

package/templates/scaffold/presets/empty/app/routes/_renderer.tsx

@@ -25,7 +25,11 @@ export default jsxRenderer(async ({ children }, c) => {
         <head>
           <RiebeckiteHead colorModeScript={false} />
         </head>
-        <body class="riebeckite-page rb-site">{children}</body>
+        <body class="riebeckite-page rb-site">
+          <main id="main-content" tabindex={-1} class="riebeckite-main">
+            {children}
+          </main>
+        </body>
       </ThemeRoot>
     </SiteProvider>
   );

package/templates/scaffold/presets/empty/app/routes/index.tsx

@@ -3,9 +3,9 @@ import { config } from "virtual:riebeckite/config";
 
 export default createRoute((c) =>
   c.render(
-    <main class="riebeckite-empty">
+    <div class="riebeckite-empty">
       <h1>{config.site.title}</h1>
       <p>This is a blank Riebeckite site. Add Markdown files under content/ to get started.</p>
-    </main>,
+    </div>,
   ),
 );

package/templates/scaffold/presets/minimal/app/routes/_404.tsx

@@ -4,14 +4,14 @@ const handler = (c: Context) => {
   c.status(404);
 
   return c.render(
-    <main class="not-found">
+    <div class="not-found">
       <p class="not-found__status">404</p>
       <h1>Page not found</h1>
       <p>The page you requested does not exist or is not available.</p>
       <p>
         <a href="/">Back to home</a>
       </p>
-    </main>,
+    </div>,
   );
 };
 

package/templates/scaffold/presets/minimal/app/routes/_renderer.tsx

@@ -25,7 +25,11 @@ export default jsxRenderer(async ({ children }, c) => {
         <head>
           <RiebeckiteHead colorModeScript={false} />
         </head>
-        <body class="riebeckite-page rb-site">{children}</body>
+        <body class="riebeckite-page rb-site">
+          <main id="main-content" tabindex={-1} class="riebeckite-main">
+            {children}
+          </main>
+        </body>
       </ThemeRoot>
     </SiteProvider>
   );

package/templates/scaffold/presets/portfolio/app/components/article.tsx

@@ -0,0 +1,29 @@
+import { Article, ArticleBody, ArticleContent, ArticleFooter } from "@riebeckite/honox/ui";
+import { Backlinks } from "@riebeckite/plugin-backlinks";
+import { Breadcrumbs } from "@riebeckite/plugin-breadcrumbs";
+import { Properties } from "@riebeckite/plugin-properties";
+import { RecentPosts } from "@riebeckite/plugin-recent-posts";
+import { RelatedPosts } from "@riebeckite/plugin-related-posts";
+import { TableOfContents } from "@riebeckite/plugin-toc";
+
+export function SiteArticle() {
+  return (
+    <Article class="site-article">
+      <div class="site-article__layout">
+        <ArticleContent>
+          <Breadcrumbs />
+          <Properties />
+          <ArticleBody />
+          <RecentPosts />
+          <ArticleFooter class="site-article__footer">
+            <Backlinks />
+            <RelatedPosts />
+          </ArticleFooter>
+        </ArticleContent>
+        <aside class="site-article__aside">
+          <TableOfContents className="rr-table-of-contents--desktop" />
+        </aside>
+      </div>
+    </Article>
+  );
+}

package/templates/scaffold/presets/portfolio/app/components/site-header.tsx

@@ -0,0 +1,37 @@
+import { MobileSiteNav, SiteNav } from "@riebeckite/plugin-navigation";
+import { ColorModeToggle } from "@riebeckite/plugin-color-mode";
+import { useSiteContext } from "@riebeckite/ui";
+
+export function SiteHeader() {
+  const site = useSiteContext();
+
+  return (
+    <header class="site-header rb-site-header">
+      <a href="/" class="site-header__home rb-site-header__home">
+        <img
+          src="/riebeckite-logo.png"
+          alt=""
+          class="site-header__logo"
+          width="28"
+          height="28"
+        />
+        {site?.config.site.title}
+      </a>
+      <div class="site-header__primary-navigation">
+        <SiteNav placement="primary" omitHome />
+      </div>
+      <div class="site-header__mobile-navigation">
+        <MobileSiteNav placement="primary" omitHome />
+      </div>
+      <ColorModeToggle />
+    </header>
+  );
+}
+
+export function SiteFooter() {
+  return (
+    <footer class="site-footer rb-site-footer">
+      <SiteNav placement="secondary" />
+    </footer>
+  );
+}