create-riebeckite 0.0.19 → 0.0.21

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

@@ -1,69 +1,51 @@
-import type { PluginHeadTag } from "@riebeckite/core";
+import { RiebeckiteHead, ThemeRoot } from "@riebeckite/honox/ui";
 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 { SearchBar } from "@riebeckite/plugin-search";
 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,
-  };
-}
+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 headTags: readonly PluginHeadTag[] = c.get("headTags") ?? [];
-  const navigation = resolveSiteNavigation(config, await content.getManifest(), c.get("htmlLanguage")) ?? { primary: [], secondary: [] };
+  const navigation =
+    resolveSiteNavigation(
+      config,
+      await content.getManifest(),
+      c.get("htmlLanguage"),
+    ) ?? { primary: [], secondary: [] };
 
   return (
-    <html
+    <ThemeRoot
+      theme={config.theme}
       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 />
+        <RiebeckiteHead
+          title={config.site.title}
+          headTags={c.get("headTags") ?? []}
+        />
       </head>
       <body class="riebeckite-page rb-site">
-         <SiteHeader path={c.req.path} items={navigation.primary} />
+        <a class="rb-skip-link" href="#main-content">Skip to main content</a>
+        <SiteHeader
+          path={c.req.path}
+          items={navigation.primary}
+          language={c.get("htmlLanguage")}
+        />
         <SearchBar />
-        {children}
-        <SiteFooter path={c.req.path} items={navigation.secondary} />
+        <main id="main-content" tabindex="-1" class="riebeckite-main">
+          {children}
+        </main>
+        <SiteFooter
+          path={c.req.path}
+          items={navigation.secondary}
+          language={c.get("htmlLanguage")}
+        />
       </body>
-    </html>
+    </ThemeRoot>
   );
 });
-
-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/starter/app/routes/index.tsx

@@ -1,37 +1,29 @@
-import { getEntryLanguage } from "@riebeckite/core";
-import { createRoute } from "honox/factory";
-import { RecentPosts, getRecentPosts } from "@riebeckite/plugin-recent-posts";
+import { resolveRiebeckiteHomeRequest } from "@riebeckite/honox/server";
+import { PageBody } from "@riebeckite/honox/ui";
+import { getRecentPosts, RecentPosts } from "@riebeckite/plugin-recent-posts";
 import { extractTableOfContents, TableOfContents } from "@riebeckite/plugin-toc";
+import { createRoute } from "honox/factory";
 import { SiteArticle } from "../components/article";
-import { config } from "../config";
-import { content } from "../content";
+import { content } from "virtual:riebeckite/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 home = await resolveRiebeckiteHomeRequest(c, content);
 
-  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 tableOfContents = extractTableOfContents(post.html ?? "");
+  if (home.kind === "response") return home.response;
 
-  if (indexEntry) {
-    c.set("htmlLanguage", getEntryLanguage(indexEntry));
-    c.set("headTags", indexEntry.headTags ?? []);
+  if (home.kind === "page") {
+    return c.render(<PageBody html={home.page.body} />);
   }
 
+  const recentPosts = getRecentPosts({ manifest: await content.getManifest() });
+  const tableOfContents = extractTableOfContents(home.post.html ?? "");
+
   return c.render(
     <SiteArticle
-      post={post}
-        bodySlots={indexEntry?.bodySlots}
-        asideContent={<TableOfContents className="table-of-contents--desktop" items={tableOfContents} />}
-        afterContent={<><RecentPosts posts={recentPosts} /></>}
+      post={home.post}
+      bodySlots={home.entry.bodySlots}
+      asideContent={<TableOfContents className="rr-table-of-contents--desktop" items={tableOfContents} />}
+      afterContent={<><RecentPosts posts={recentPosts} /></>}
     />,
   );
-});
+});

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

@@ -1,3 +1,4 @@
+@import "./.riebeckite/framework-styles.css";
 @import "./.riebeckite/plugin-styles.css";
 @import "./.riebeckite/theme-styles.css";
 
@@ -21,6 +22,17 @@ body {
   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;
@@ -31,7 +43,7 @@ body {
 
 .site-header,
 .rb-site-footer {
-  width: min(100% - 2rem, var(--rb-layout-article-max, 48rem));
+  width: min(100% - 2rem, var(--rb-layout-page-max, 80rem));
 }
 
 .site-header__home {
@@ -48,17 +60,10 @@ body {
   color: var(--rb-color-ink);
 }
 
-.rb-nav__list {
+.rb-nav > .rb-nav__list {
   display: flex;
   align-items: center;
   gap: var(--rb-space-3, 1.5rem);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.rb-nav__item {
-  position: relative;
 }
 
 .rb-nav__link {
@@ -79,23 +84,11 @@ body {
 }
 
 .rb-nav__children {
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  min-width: max-content;
   padding: var(--rb-space-2, 1rem);
   background: var(--rb-color-surface);
   border: 1px solid var(--rb-color-border);
 }
 
-.rb-nav__item:hover > .rb-nav__children,
-.rb-nav__item:focus-within > .rb-nav__children {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
 .rb-nav__mobile {
   display: none;
 }
@@ -171,13 +164,6 @@ body {
   margin: 0 auto;
 }
 
-.rb-article-layout {
-  display: grid;
-  grid-template-columns: minmax(0, var(--rb-layout-article-max, 48rem));
-  justify-content: center;
-  column-gap: var(--rb-layout-gap, 2rem);
-}
-
 .rb-article-body,
 .site-article__footer {
   min-width: 0;
@@ -189,16 +175,6 @@ body {
 }
 
 @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;
   }
@@ -207,18 +183,26 @@ body {
     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);
   }
 }
+
+.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/base/app/config.ts

@@ -1,18 +0,0 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { resolveConfigModule } from "@riebeckite/core";
-import * as rawConfigModule from "../riebeckite.config";
-
-const appRoot =
-  process.env.RIEBECKITE_APP_ROOT ??
-  fileURLToPath(new URL("../", import.meta.url));
-const resolvedConfig = resolveConfigModule(rawConfigModule);
-
-export const config = {
-  ...resolvedConfig,
-  buildDirectory: path.join(appRoot, ".riebeckite"),
-  content: {
-    ...resolvedConfig.content,
-    directory: path.resolve(appRoot, resolvedConfig.content.directory),
-  },
-};

package/templates/scaffold/base/app/constants/paths.ts

@@ -1,10 +0,0 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { config } from "../config";
-
-const appRoot =
-  process.env.RIEBECKITE_APP_ROOT ??
-  fileURLToPath(new URL("../../", import.meta.url));
-
-export const CONTENT_DIR = path.resolve(appRoot, config.content.directory);
-export const ASSETS_ROOT = "public/";

package/templates/scaffold/base/app/content.ts

@@ -1,12 +0,0 @@
-import { ContentManager } from "@riebeckite/core";
-import { config } from "./config";
-import { CONTENT_DIR } from "./constants/paths";
-
-export const content = new ContentManager(
-  CONTENT_DIR,
-  config.content.exclude,
-  {
-    config,
-    plugins: config.plugins,
-  },
-);