create-riebeckite 0.0.17 → 0.0.18

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

@@ -0,0 +1,66 @@
+import type { PostContent } from "@riebeckite/core";
+import { Article, ArticleContent, ArticleLayout } from "@riebeckite/honox/ui";
+
+export function SiteArticle({
+  post,
+  bodySlots,
+  asideContent,
+  afterContent,
+  footerContent,
+}: {
+  post: PostContent;
+  bodySlots?: Readonly<Record<string, string>>;
+  asideContent?: unknown;
+  afterContent?: unknown;
+  footerContent?: unknown;
+}) {
+  return (
+    <Article class="site-article">
+      <ArticleLayout>
+        {asideContent}
+        {bodySlots?.["article.aside"] ? (
+          <div
+            class="site-article__aside"
+            dangerouslySetInnerHTML={{ __html: bodySlots["article.aside"] }}
+          />
+        ) : null}
+        <ArticleContent>
+          {bodySlots?.["article.header"] ? (
+            <div
+              class="site-article__header"
+              dangerouslySetInnerHTML={{ __html: bodySlots["article.header"] }}
+            />
+          ) : null}
+          {bodySlots?.["article.metadata"] ? (
+            <div
+              class="site-article__metadata"
+              dangerouslySetInnerHTML={{ __html: bodySlots["article.metadata"] }}
+            />
+          ) : null}
+          {bodySlots?.["article.before-content"] ? (
+            <div
+              class="site-article__before-content"
+              dangerouslySetInnerHTML={{ __html: bodySlots["article.before-content"] }}
+            />
+          ) : null}
+          <div dangerouslySetInnerHTML={{ __html: post.html ?? "" }} />
+          {afterContent}
+          {bodySlots?.["article.after-content"] ? (
+            <div
+              class="site-article__after-content"
+              dangerouslySetInnerHTML={{ __html: bodySlots["article.after-content"] }}
+            />
+          ) : null}
+        </ArticleContent>
+        {bodySlots?.["article.footer"] || footerContent ? (
+          <div class="site-article__footer">
+            {bodySlots?.["article.footer"] ? (
+              <div dangerouslySetInnerHTML={{ __html: bodySlots["article.footer"] }} />
+            ) : null}
+            {footerContent}
+          </div>
+        ) : null}
+      </ArticleLayout>
+    </Article>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { getEntryLanguage } from "@riebeckite/core";
+import {
+  contentRouteSsgParams,
+  pluginPageSsgParams,
+  resolveRiebeckiteRoute,
+} from "@riebeckite/honox/server";
+import { createRoute } from "honox/factory";
+import { SiteArticle } from "../components/article";
+import { content } from "../content";
+
+export default createRoute(
+  contentRouteSsgParams("/:slug{.+}", async () => {
+    const manifest = await content.getManifest();
+    const contentPaths = manifest.publicEntries
+      .filter((entry) => entry.permalink !== "/")
+      .map((entry) => ({ slug: entry.permalink.replace(/^\/+/, "") }));
+    return [...contentPaths, ...(await pluginPageSsgParams(content))];
+  }),
+  async (c) => {
+    const requestedSlug = c.req.param("slug");
+    if (!requestedSlug) return c.notFound();
+    if (/\.[a-zA-Z0-9]+$/.test(requestedSlug)) return c.notFound();
+
+    const route = await resolveRiebeckiteRoute(content, c.req.path);
+    if (!route) return c.notFound();
+    if (route.kind === "redirect")
+      return c.redirect(route.location, route.status);
+    if (route.kind === "page") {
+      c.set("headTags", route.page.headTags ?? []);
+      c.set("htmlLanguage", route.page.language);
+      return c.render(
+        <div dangerouslySetInnerHTML={{ __html: route.page.body }} />,
+      );
+    }
+
+    const post = await content.getProcessedContent(route.entry.slug);
+
+    c.set("htmlLanguage", getEntryLanguage(route.entry));
+    c.set("headTags", route.entry.headTags ?? []);
+
+    return c.render(
+      <SiteArticle
+        post={post}
+        bodySlots={route.entry.bodySlots}
+      />,
+    );
+  },
+);

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

@@ -0,0 +1,59 @@
+import type { PluginHeadTag } from "@riebeckite/core";
+import { jsxRenderer } from "hono/jsx-renderer";
+import { Link, Script } from "honox/server";
+import { config } from "../config";
+
+function themeAttributes() {
+  const { theme } = config;
+
+  return {
+    ...theme.attributes,
+    "data-theme": theme.colorMode === "system" ? undefined : theme.colorMode,
+    "data-theme-name": theme.name,
+    "data-typography": theme.typography,
+    "data-article-layout": theme.articleLayout,
+  };
+}
+
+// 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 headTags: readonly PluginHeadTag[] = c.get("headTags") ?? [];
+
+  return (
+    <html
+      lang={c.get("htmlLanguage") ?? config.site.locale}
+      {...themeAttributes()}
+    >
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{config.site.title}</title>
+        <link rel="icon" href="/favicon.ico" />
+        <Link href="/app/style.css" rel="stylesheet" />
+        {headTags.map(renderHeadTag)}
+        <Script src="/app/client.ts" async />
+      </head>
+      <body class="riebeckite-page rb-site">
+         {children}
+      </body>
+    </html>
+  );
+});
+
+function renderHeadTag(tag: PluginHeadTag, index: number) {
+  const key = `${tag.tag}-${index}`;
+  if (tag.tag === "meta") return <meta {...tag.attrs} key={key} />;
+  if (tag.tag === "link") return <link {...tag.attrs} key={key} />;
+  return (
+    <script
+      {...tag.attrs}
+      key={key}
+      dangerouslySetInnerHTML={
+        tag.children ? { __html: tag.children } : undefined
+      }
+    />
+  );
+}

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

@@ -0,0 +1,29 @@
+import { getEntryLanguage } from "@riebeckite/core";
+import { createRoute } from "honox/factory";
+import { SiteArticle } from "../components/article";
+import { content } from "../content";
+
+export default createRoute(async (c) => {
+  const manifest = await content.getManifest();
+  const indexEntry = manifest.bySlug.get("index");
+  if (indexEntry && indexEntry.permalink !== "/") {
+    return c.redirect(indexEntry.permalink, 308);
+  }
+
+  const post = await content.getProcessedContent("index");
+  if (indexEntry?.publishing?.routable === false) {
+    return c.notFound();
+  }
+
+  if (indexEntry) {
+    c.set("htmlLanguage", getEntryLanguage(indexEntry));
+    c.set("headTags", indexEntry.headTags ?? []);
+  }
+
+  return c.render(
+    <SiteArticle
+      post={post}
+        bodySlots={indexEntry?.bodySlots}
+    />,
+  );
+});

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

@@ -0,0 +1,84 @@
+@import "./.riebeckite/plugin-styles.css";
+@import "./.riebeckite/theme-styles.css";
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, sans-serif;
+}
+
+.riebeckite-page {
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  padding-block: var(--rb-space-8, 4rem);
+}
+
+.site-article {
+  display: block;
+  width: min(100% - 2rem, var(--rb-layout-article-max, 48rem));
+  padding-block: 2rem;
+  margin: 0 auto;
+}
+
+.rb-article-layout {
+  display: grid;
+  grid-template-columns: minmax(0, var(--rb-layout-article-max, 48rem));
+  justify-content: center;
+  gap: var(--rb-layout-gap, 2rem);
+}
+
+.rb-article-body {
+  min-width: 0;
+  padding-inline: var(--rb-space-2, 1rem);
+}
+
+.site-article__aside {
+  display: none;
+}
+
+.site-article__footer {
+  min-width: 0;
+}
+
+@media (min-width: 88rem) {
+  :is(:root, .rb-theme-root)[data-article-layout="article"] .rb-article-layout {
+    grid-template-columns: minmax(0, var(--rb-layout-article-max, 48rem));
+    position: relative;
+  }
+
+  :is(:root, .rb-theme-root)[data-article-layout="article"] .rb-article-body {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  :is(:root, .rb-theme-root)[data-article-layout="article"] .site-article__footer {
+    grid-column: 1;
+  }
+
+  :is(:root, .rb-theme-root)[data-article-layout="article"] .site-article__aside {
+    display: block;
+    grid-column: 1;
+    grid-row: 1;
+    position: sticky;
+    top: 4rem;
+    align-self: start;
+    width: var(--rb-layout-sidebar, 14rem);
+    max-height: calc(100dvh - 8rem);
+    margin-inline-start: calc(
+      -1 * var(--rb-layout-sidebar, 14rem) -
+      var(--rb-layout-gap, 2rem)
+    );
+    overflow: auto;
+    padding-inline-end: 1rem;
+    border-inline-end: 1px solid
+      color-mix(in oklab, currentColor 18%, transparent);
+  }
+}

package/templates/scaffold/presets/minimal/content/index.en.md

@@ -0,0 +1,12 @@
+---
+publish: true
+---
+
+# {{title}}
+Welcome to your Riebeckite site.
+Every page of this starter is available in seven languages. Switch with the selector below the page title.
+## What is Riebeckite?
+Riebeckite is an extensible, content-first framework that builds fast static sites from plain Markdown — the same notes you keep in Obsidian. The ecosystem includes 50+ plugins and six themes, and this site demos both.
+## Edit this site
+Content lives in `content/` as plain Markdown. Add a file, give it `publish: true` in the frontmatter, and it appears in the built site.
+Localized pages use the `<base>.<lang>.md` convention next to the default file — for example `about.ja.md`. The l10n plugin serves them under `/lang/` paths and links them automatically.

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

@@ -0,0 +1,66 @@
+import type { PostContent } from "@riebeckite/core";
+import { Article, ArticleContent, ArticleLayout } from "@riebeckite/honox/ui";
+
+export function SiteArticle({
+  post,
+  bodySlots,
+  asideContent,
+  afterContent,
+  footerContent,
+}: {
+  post: PostContent;
+  bodySlots?: Readonly<Record<string, string>>;
+  asideContent?: unknown;
+  afterContent?: unknown;
+  footerContent?: unknown;
+}) {
+  return (
+    <Article class="site-article">
+      <ArticleLayout>
+        {asideContent}
+        {bodySlots?.["article.aside"] ? (
+          <div
+            class="site-article__aside"
+            dangerouslySetInnerHTML={{ __html: bodySlots["article.aside"] }}
+          />
+        ) : null}
+        <ArticleContent>
+          {bodySlots?.["article.header"] ? (
+            <div
+              class="site-article__header"
+              dangerouslySetInnerHTML={{ __html: bodySlots["article.header"] }}
+            />
+          ) : null}
+          {bodySlots?.["article.metadata"] ? (
+            <div
+              class="site-article__metadata"
+              dangerouslySetInnerHTML={{ __html: bodySlots["article.metadata"] }}
+            />
+          ) : null}
+          {bodySlots?.["article.before-content"] ? (
+            <div
+              class="site-article__before-content"
+              dangerouslySetInnerHTML={{ __html: bodySlots["article.before-content"] }}
+            />
+          ) : null}
+          <div dangerouslySetInnerHTML={{ __html: post.html ?? "" }} />
+          {afterContent}
+          {bodySlots?.["article.after-content"] ? (
+            <div
+              class="site-article__after-content"
+              dangerouslySetInnerHTML={{ __html: bodySlots["article.after-content"] }}
+            />
+          ) : null}
+        </ArticleContent>
+        {bodySlots?.["article.footer"] || footerContent ? (
+          <div class="site-article__footer">
+            {bodySlots?.["article.footer"] ? (
+              <div dangerouslySetInnerHTML={{ __html: bodySlots["article.footer"] }} />
+            ) : null}
+            {footerContent}
+          </div>
+        ) : null}
+      </ArticleLayout>
+    </Article>
+  );
+}

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

@@ -0,0 +1,113 @@
+import type { NavigationItem } from "@riebeckite/plugin-navigation";
+import { ColorModeToggle } from "@riebeckite/plugin-color-mode";
+import { config } from "../config";
+
+export function SiteHeader({
+  path,
+  items,
+}: {
+  path: string;
+  items: readonly NavigationItem[];
+}) {
+  const navigation = items.filter((item) => item.href !== "/");
+
+  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"
+        />
+        {config.site.title}
+      </a>
+      {navigation.length > 0 ? (
+        <>
+          <SiteNavigation items={navigation} path={path} />
+          <details class="site-navigation__mobile rb-nav__mobile">
+            <summary class="rb-nav__toggle">Menu</summary>
+            <SiteNavigation items={navigation} path={path} />
+          </details>
+        </>
+      ) : null}
+      <ColorModeToggle />
+    </header>
+  );
+}
+
+export function SiteFooter({
+  path,
+  items,
+}: {
+  path: string;
+  items: readonly NavigationItem[];
+}) {
+  if (items.length === 0) return null;
+
+  return (
+    <footer class="site-footer rb-site-footer">
+      <SiteNavigation items={items} path={path} />
+    </footer>
+  );
+}
+
+function SiteNavigation({
+  items,
+  path,
+}: {
+  items: readonly NavigationItem[];
+  path: string;
+}) {
+  return (
+    <nav class="site-navigation rb-nav" aria-label="Site navigation">
+      <NavigationItems items={items} path={path} />
+    </nav>
+  );
+}
+
+function NavigationItems({
+  items,
+  path,
+  isChildList = false,
+}: {
+  items: readonly NavigationItem[];
+  path: string;
+  isChildList?: boolean;
+}) {
+  return (
+    <ul class={isChildList ? "site-navigation__list rb-nav__list rb-nav__children" : "site-navigation__list rb-nav__list"}>
+      {items.map((item) => {
+        const active = item.href ? isActive(item.href, path) : false;
+        return (
+          <li class="site-navigation__item rb-nav__item">
+            {item.href ? (
+              <a
+                href={item.href}
+                class={active ? "site-navigation__link rb-nav__link rb-nav__link--active is-active" : "site-navigation__link rb-nav__link"}
+                aria-current={active ? "page" : undefined}
+                target={item.external ? "_blank" : undefined}
+                rel={item.external ? "noreferrer" : undefined}
+              >
+                {item.label}
+              </a>
+            ) : (
+              <span class="site-navigation__label rb-nav__label">{item.label}</span>
+            )}
+            {item.children && item.children.length > 0 ? (
+              <NavigationItems items={item.children} path={path} isChildList />
+            ) : null}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+function isActive(href: string, path: string): boolean {
+  if (!href.startsWith("/")) return false;
+  const target = href.replace(/\/+$/, "") || "/";
+  const current = path.replace(/^\/[a-z]{2}(?:-[A-Z]{2})?(?=\/|$)/, "").replace(/\/+$/, "") || "/";
+  return target === "/" ? current === target : current === target || current.startsWith(`${target}/`);
+}

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

@@ -0,0 +1,52 @@
+import { getEntryLanguage } from "@riebeckite/core";
+import {
+  contentRouteSsgParams,
+  pluginPageSsgParams,
+  resolveRiebeckiteRoute,
+} from "@riebeckite/honox/server";
+import { extractTableOfContents, TableOfContents } from "@riebeckite/plugin-toc";
+import { createRoute } from "honox/factory";
+import { SiteArticle } from "../components/article";
+import { content } from "../content";
+
+export default createRoute(
+  contentRouteSsgParams("/:slug{.+}", async () => {
+    const manifest = await content.getManifest();
+    const contentPaths = manifest.publicEntries
+      .filter((entry) => entry.permalink !== "/")
+      .map((entry) => ({ slug: entry.permalink.replace(/^\/+/, "") }));
+    return [...contentPaths, ...(await pluginPageSsgParams(content))];
+  }),
+  async (c) => {
+    const requestedSlug = c.req.param("slug");
+    if (!requestedSlug) return c.notFound();
+    if (/\.[a-zA-Z0-9]+$/.test(requestedSlug)) return c.notFound();
+
+    const route = await resolveRiebeckiteRoute(content, c.req.path);
+    if (!route) return c.notFound();
+    if (route.kind === "redirect")
+      return c.redirect(route.location, route.status);
+    if (route.kind === "page") {
+      c.set("headTags", route.page.headTags ?? []);
+      c.set("htmlLanguage", route.page.language);
+      return c.render(
+        <div dangerouslySetInnerHTML={{ __html: route.page.body }} />,
+      );
+    }
+
+    const post = await content.getProcessedContent(route.entry.slug);
+
+    const tableOfContents = extractTableOfContents(post.html ?? "");
+
+    c.set("htmlLanguage", getEntryLanguage(route.entry));
+    c.set("headTags", route.entry.headTags ?? []);
+
+    return c.render(
+      <SiteArticle
+        post={post}
+        bodySlots={route.entry.bodySlots}
+        asideContent={<TableOfContents className="table-of-contents--desktop" items={tableOfContents} />}
+      />,
+    );
+  },
+);

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

@@ -0,0 +1,69 @@
+import type { PluginHeadTag } from "@riebeckite/core";
+import { jsxRenderer } from "hono/jsx-renderer";
+import { Link, Script } from "honox/server";
+import { ColorModeScript } from "@riebeckite/plugin-color-mode";
+import { SearchBar } from "@riebeckite/plugin-search";
+import { resolveSiteNavigation } from "@riebeckite/plugin-navigation";
+import { SiteFooter, SiteHeader } from "../components/site-header";
+import { content } from "../content";
+import { config } from "../config";
+
+function themeAttributes() {
+  const { theme } = config;
+
+  return {
+    ...theme.attributes,
+    "data-theme": theme.colorMode === "system" ? undefined : theme.colorMode,
+    "data-theme-name": theme.name,
+    "data-typography": theme.typography,
+    "data-article-layout": theme.articleLayout,
+  };
+}
+
+// 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 headTags: readonly PluginHeadTag[] = c.get("headTags") ?? [];
+  const navigation = resolveSiteNavigation(config, await content.getManifest(), c.get("htmlLanguage")) ?? { primary: [], secondary: [] };
+
+  return (
+    <html
+      lang={c.get("htmlLanguage") ?? config.site.locale}
+      {...themeAttributes()}
+    >
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{config.site.title}</title>
+        <link rel="icon" href="/favicon.ico" />
+        <ColorModeScript />
+        <Link href="/app/style.css" rel="stylesheet" />
+        {headTags.map(renderHeadTag)}
+        <Script src="/app/client.ts" async />
+      </head>
+      <body class="riebeckite-page rb-site">
+         <SiteHeader path={c.req.path} items={navigation.primary} />
+        <SearchBar />
+        {children}
+        <SiteFooter path={c.req.path} items={navigation.secondary} />
+      </body>
+    </html>
+  );
+});
+
+function renderHeadTag(tag: PluginHeadTag, index: number) {
+  const key = `${tag.tag}-${index}`;
+  if (tag.tag === "meta") return <meta {...tag.attrs} key={key} />;
+  if (tag.tag === "link") return <link {...tag.attrs} key={key} />;
+  return (
+    <script
+      {...tag.attrs}
+      key={key}
+      dangerouslySetInnerHTML={
+        tag.children ? { __html: tag.children } : undefined
+      }
+    />
+  );
+}

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

@@ -0,0 +1,39 @@
+import { getEntryLanguage } from "@riebeckite/core";
+import { createRoute } from "honox/factory";
+import { DailyNotes, getDailyNotes } from "@riebeckite/plugin-daily-notes";
+import { RecentPosts, getRecentPosts } from "@riebeckite/plugin-recent-posts";
+import { extractTableOfContents, TableOfContents } from "@riebeckite/plugin-toc";
+import { SiteArticle } from "../components/article";
+import { config } from "../config";
+import { content } from "../content";
+
+export default createRoute(async (c) => {
+  const manifest = await content.getManifest();
+  const indexEntry = manifest.bySlug.get("index");
+  if (indexEntry && indexEntry.permalink !== "/") {
+    return c.redirect(indexEntry.permalink, 308);
+  }
+
+  const post = await content.getProcessedContent("index");
+  if (indexEntry?.publishing?.routable === false) {
+    return c.notFound();
+  }
+
+  const recentPosts = await getRecentPosts({ posts: manifest.discoverableEntries, config, getProcessedContent: (slug) => content.getProcessedContent(slug), resolveTitle: (slug, title) => typeof title === "string" && title.trim() ? title : slug.split("/").at(-1) ?? slug });
+  const dailyNotes = getDailyNotes({ manifest, config });
+  const tableOfContents = extractTableOfContents(post.html ?? "");
+
+  if (indexEntry) {
+    c.set("htmlLanguage", getEntryLanguage(indexEntry));
+    c.set("headTags", indexEntry.headTags ?? []);
+  }
+
+  return c.render(
+    <SiteArticle
+      post={post}
+        bodySlots={indexEntry?.bodySlots}
+        asideContent={<TableOfContents className="table-of-contents--desktop" items={tableOfContents} />}
+        afterContent={<><RecentPosts posts={recentPosts} /><DailyNotes notes={dailyNotes} /></>}
+    />,
+  );
+});