create-riebeckite 0.0.22 → 0.0.24

package/dist/src/index.js

@@ -297,7 +297,6 @@ var seo = np("@riebeckite/plugin-seo", "seo", {
 });
 var toc = np("@riebeckite/plugin-toc", "tocPlugin");
 var properties = np("@riebeckite/plugin-properties", "properties", {
-  render: { depth: 1, value: '"slot"' },
   include: { depth: 2, value: '["created", "modified", "tags", "status"]' },
   order: { depth: 2, value: '["created", "modified", "tags", "status"]' }
 });
@@ -330,7 +329,6 @@ var relatedPosts = np("@riebeckite/plugin-related-posts", "relatedPosts", {
   className: { depth: 3, value: '"rb-related-posts"' }
 });
 var share = np("@riebeckite/plugin-share", "share", {
-  placement: { depth: 2, value: '"bottom"' },
   services: {
     depth: 3,
     value: '["x", "bluesky", "mastodon", "facebook", "linkedin", "hatena", "copy"]'
@@ -2593,7 +2591,7 @@ function referenceThemesContent(preset) {
 }
 
 // src/scaffold/version.ts
-var RIEBECKITE_VERSION = "^0.0.22";
+var RIEBECKITE_VERSION = "^0.0.24";
 
 // src/scaffold/templates.ts
 function siteTemplateFiles(preset, variables, options = {}) {
@@ -3510,8 +3508,17 @@ async function scaffoldRiebeckiteSite(options) {
     await fs2.mkdir(path3.dirname(filePath), { recursive: true });
     await fs2.writeFile(filePath, file.content);
   }
+  await ensureContentDirectory(targetDirectory, files);
   return { targetDirectory, files: files.map((file) => file.path) };
 }
+async function ensureContentDirectory(targetDirectory, files) {
+  if (files.some(
+    (file) => file.path === "content" || file.path.startsWith("content/")
+  )) {
+    return;
+  }
+  await fs2.mkdir(path3.join(targetDirectory, "content"), { recursive: true });
+}
 function externalContentSource(deployment) {
   if (deployment.type !== "github-actions") return void 0;
   return deployment.content.type === "external" ? deployment.content : void 0;

package/dist/src/scaffold/index.js

@@ -297,7 +297,6 @@ var seo = np("@riebeckite/plugin-seo", "seo", {
 });
 var toc = np("@riebeckite/plugin-toc", "tocPlugin");
 var properties = np("@riebeckite/plugin-properties", "properties", {
-  render: { depth: 1, value: '"slot"' },
   include: { depth: 2, value: '["created", "modified", "tags", "status"]' },
   order: { depth: 2, value: '["created", "modified", "tags", "status"]' }
 });
@@ -330,7 +329,6 @@ var relatedPosts = np("@riebeckite/plugin-related-posts", "relatedPosts", {
   className: { depth: 3, value: '"rb-related-posts"' }
 });
 var share = np("@riebeckite/plugin-share", "share", {
-  placement: { depth: 2, value: '"bottom"' },
   services: {
     depth: 3,
     value: '["x", "bluesky", "mastodon", "facebook", "linkedin", "hatena", "copy"]'
@@ -2263,7 +2261,7 @@ function utilityTemplateFiles(utilities) {
 }
 
 // src/scaffold/version.ts
-var RIEBECKITE_VERSION = "^0.0.22";
+var RIEBECKITE_VERSION = "^0.0.24";
 
 // src/scaffold/templates.ts
 function siteTemplateFiles(preset, variables, options = {}) {
@@ -3180,8 +3178,17 @@ async function scaffoldRiebeckiteSite(options) {
     await fs2.mkdir(path3.dirname(filePath), { recursive: true });
     await fs2.writeFile(filePath, file.content);
   }
+  await ensureContentDirectory(targetDirectory, files);
   return { targetDirectory, files: files.map((file) => file.path) };
 }
+async function ensureContentDirectory(targetDirectory, files) {
+  if (files.some(
+    (file) => file.path === "content" || file.path.startsWith("content/")
+  )) {
+    return;
+  }
+  await fs2.mkdir(path3.join(targetDirectory, "content"), { recursive: true });
+}
 function externalContentSource(deployment) {
   if (deployment.type !== "github-actions") return void 0;
   return deployment.content.type === "external" ? deployment.content : void 0;

package/dist/src/scaffold/version.d.ts

@@ -1 +1 @@
-export declare const RIEBECKITE_VERSION = "^0.0.22";
+export declare const RIEBECKITE_VERSION = "^0.0.24";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-riebeckite",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/src/index.js",
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "esbuild": "^0.28.2",
-    "@riebeckite/test": "0.0.22"
+    "@riebeckite/test": "0.0.24"
   },
   "repository": {
     "type": "git",
@@ -63,6 +63,7 @@
   "sideEffects": false,
   "scripts": {
     "build": "node ../../scripts/build_package.mjs",
-    "test": "node --import tsx --test \"test/*.test.ts\""
+    "test": "node --import tsx --test \"test/*.test.ts\"",
+    "test:golden": "node --import tsx --test test/scaffold_golden.test.ts"
   }
 }

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

@@ -1,48 +1,12 @@
-import type { ContentBodySlots, PostContent } from "@riebeckite/core";
-import {
-  Article,
-  ArticleBody,
-  ArticleContent,
-  ArticleLayout,
-  ContentSlot,
-} from "@riebeckite/honox/ui";
+import type { PostContent } from "@riebeckite/core";
+import { Article, ArticleBody, ArticleContent } from "@riebeckite/honox/ui";
 
-export function SiteArticle({
-  post,
-  bodySlots,
-  asideContent,
-}: {
-  post: PostContent;
-  bodySlots?: ContentBodySlots;
-  asideContent?: unknown;
-}) {
+export function SiteArticle({ post }: { post: PostContent }) {
   return (
     <Article class="site-article">
-      <ArticleLayout>
-        {asideContent}
-
-        <ContentSlot
-          slots={bodySlots}
-          name="article.aside"
-          class="site-article__aside"
-        />
-
-        <ArticleContent>
-          <ContentSlot slots={bodySlots} name="article.header" />
-          <ContentSlot slots={bodySlots} name="article.metadata" />
-          <ContentSlot slots={bodySlots} name="article.before-content" />
-
-          <ArticleBody html={post.html ?? ""} />
-
-          <ContentSlot slots={bodySlots} name="article.after-content" />
-        </ArticleContent>
-
-        <ContentSlot
-          slots={bodySlots}
-          name="article.footer"
-          class="site-article__footer"
-        />
-      </ArticleLayout>
+      <ArticleContent>
+        <ArticleBody html={post.html ?? ""} />
+      </ArticleContent>
     </Article>
   );
 }

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

@@ -20,10 +20,7 @@ export default createRoute(
     }
 
     return c.render(
-      <SiteArticle
-        post={resolved.post}
-        bodySlots={resolved.entry.bodySlots}
-      />,
+      <SiteArticle post={resolved.post} />,
     );
   },
 );

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

@@ -14,6 +14,6 @@ export default createRoute(async (c) => {
   }
 
   return c.render(
-    <SiteArticle post={home.post} bodySlots={home.entry.bodySlots} />,
+    <SiteArticle post={home.post} />,
   );
 });

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

@@ -29,45 +29,11 @@ body {
   margin: 0 auto;
 }
 
-.rb-article-body,
-.site-article__footer {
+.rb-article-body {
   min-width: 0;
   padding-inline: var(--rb-space-2, 1rem);
 }
 
-.site-article__aside {
-  display: none;
-}
-
-@media (min-width: 48rem) {
-  .site-article__aside {
-    display: block;
-    min-width: 0;
-    margin-block: var(--rb-space-4, 2rem);
-  }
-}
-
-@media (min-width: 88rem) {
-  :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;
-    align-self: start;
-    width: var(--rb-layout-sidebar, 14rem);
-    margin-inline-start: calc(
-      -1 * var(--rb-layout-sidebar, 14rem) -
-      var(--rb-layout-gap, 2rem)
-    );
-    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;

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

@@ -1,57 +1,32 @@
-import type { ContentBodySlots, PostContent } from "@riebeckite/core";
-import {
-  Article,
-  ArticleBody,
-  ArticleContent,
-  ArticleFooter,
-  ArticleLayout,
-  ContentSlot,
-  hasSlot,
-} from "@riebeckite/honox/ui";
+import type { PostContent } from "@riebeckite/core";
+import { Article, ArticleBody, ArticleContent, ArticleFooter } from "@riebeckite/honox/ui";
 
-export function SiteArticle({
-  post,
-  bodySlots,
-  asideContent,
-  afterContent,
-  footerContent,
-}: {
+type SiteArticleProps = {
   post: PostContent;
-  bodySlots?: ContentBodySlots;
-  asideContent?: unknown;
+  header?: unknown;
+  metadata?: unknown;
+  aside?: unknown;
   afterContent?: unknown;
-  footerContent?: unknown;
-}) {
+  footer?: unknown;
+};
+
+export function SiteArticle(props: SiteArticleProps) {
   return (
     <Article class="site-article">
-      <ArticleLayout>
-        {asideContent}
-
-        <ContentSlot
-          slots={bodySlots}
-          name="article.aside"
-          class="site-article__aside"
-        />
-
+      <div class="site-article__layout">
         <ArticleContent>
-          <ContentSlot slots={bodySlots} name="article.header" />
-          <ContentSlot slots={bodySlots} name="article.metadata" />
-          <ContentSlot slots={bodySlots} name="article.before-content" />
-
-          <ArticleBody html={post.html ?? ""} />
-
-          {afterContent}
-
-          <ContentSlot slots={bodySlots} name="article.after-content" />
+          {props.header}
+          {props.metadata}
+          <ArticleBody html={props.post.html ?? ""} />
+          {props.afterContent}
+          {props.footer ? (
+            <ArticleFooter class="site-article__footer">
+              {props.footer}
+            </ArticleFooter>
+          ) : null}
         </ArticleContent>
-
-        {hasSlot(bodySlots, "article.footer") || footerContent ? (
-          <ArticleFooter class="site-article__footer">
-            <ContentSlot slots={bodySlots} name="article.footer" />
-            {footerContent}
-          </ArticleFooter>
-        ) : null}
-      </ArticleLayout>
+        {props.aside ? <aside class="site-article__aside">{props.aside}</aside> : null}
+      </div>
     </Article>
   );
 }

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

@@ -4,9 +4,16 @@ import {
   riebeckiteSsgParams,
 } from "@riebeckite/honox/server";
 import { PageBody } from "@riebeckite/honox/ui";
+import { createPublicContentView } from "@riebeckite/core";
+import { Backlinks, getBacklinks } from "@riebeckite/plugin-backlinks";
+import { Breadcrumbs, getBreadcrumbs } from "@riebeckite/plugin-breadcrumbs";
+import { Properties, getProperties } from "@riebeckite/plugin-properties";
+import { getRelatedPosts, RelatedPosts, resolveRelatedPostsOptions } from "@riebeckite/plugin-related-posts";
+import { getShareLinks, ShareControls } from "@riebeckite/plugin-share";
 import { extractTableOfContents, TableOfContents } from "@riebeckite/plugin-toc";
 import { createRoute } from "honox/factory";
 import { SiteArticle } from "../components/article";
+import { config } from "virtual:riebeckite/config";
 import { content } from "virtual:riebeckite/content";
 
 export default createRoute(
@@ -21,12 +28,19 @@ export default createRoute(
     }
 
     const tableOfContents = extractTableOfContents(resolved.post.html ?? "");
+    const manifest = await content.getManifest();
+    const view = createPublicContentView(manifest);
+    const entry = view.findRoutableBySlug(resolved.entry.slug);
+    if (!entry) return c.notFound();
+    const relatedOptions = resolveRelatedPostsOptions({});
 
     return c.render(
       <SiteArticle
         post={resolved.post}
-        bodySlots={resolved.entry.bodySlots}
-        asideContent={<TableOfContents className="rr-table-of-contents--desktop" items={tableOfContents} />}
+        header={<Breadcrumbs items={getBreadcrumbs({ view, entry, homeLabel: config.site.title })} />}
+        metadata={<Properties data={getProperties({ view, frontmatter: resolved.post.frontmatter, options: { include: ["created", "modified", "tags", "status"], order: ["created", "modified", "tags", "status"] } })} />}
+        aside={<TableOfContents className="rr-table-of-contents--desktop" items={tableOfContents} />}
+        footer={<><ShareControls {...getShareLinks({ entry, site: config })} /><Backlinks backlinks={getBacklinks({ view, slug: entry.slug })} /><RelatedPosts entries={getRelatedPosts({ view, entry, options: relatedOptions })} options={relatedOptions} /></>}
       />,
     );
   },

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

@@ -1,7 +1,13 @@
 import { resolveRiebeckiteHomeRequest } from "@riebeckite/honox/server";
 import { PageBody } from "@riebeckite/honox/ui";
+import { createPublicContentView } from "@riebeckite/core";
+import { Backlinks, getBacklinks } from "@riebeckite/plugin-backlinks";
+import { Breadcrumbs, getBreadcrumbs } from "@riebeckite/plugin-breadcrumbs";
+import { Properties, getProperties } from "@riebeckite/plugin-properties";
+import { getRelatedPosts, RelatedPosts, resolveRelatedPostsOptions } from "@riebeckite/plugin-related-posts";
 import { DailyNotes, getDailyNotes } from "@riebeckite/plugin-daily-notes";
 import { getRecentPosts, RecentPosts } from "@riebeckite/plugin-recent-posts";
+import { getShareLinks, ShareControls } from "@riebeckite/plugin-share";
 import { extractTableOfContents, TableOfContents } from "@riebeckite/plugin-toc";
 import { createRoute } from "honox/factory";
 import { SiteArticle } from "../components/article";
@@ -21,13 +27,19 @@ export default createRoute(async (c) => {
   const recentPosts = getRecentPosts({ manifest });
   const dailyNotes = getDailyNotes({ manifest, config });
   const tableOfContents = extractTableOfContents(home.post.html ?? "");
+  const view = createPublicContentView(manifest);
+  const entry = view.findRoutableBySlug(home.entry.slug);
+  if (!entry) return c.notFound();
+  const relatedOptions = resolveRelatedPostsOptions({});
 
   return c.render(
     <SiteArticle
       post={home.post}
-      bodySlots={home.entry.bodySlots}
-      asideContent={<TableOfContents className="rr-table-of-contents--desktop" items={tableOfContents} />}
+      header={<Breadcrumbs items={getBreadcrumbs({ view, entry, homeLabel: config.site.title })} />}
+      metadata={<Properties data={getProperties({ view, frontmatter: home.post.frontmatter, options: { include: ["created", "modified", "tags", "status"], order: ["created", "modified", "tags", "status"] } })} />}
+      aside={<TableOfContents className="rr-table-of-contents--desktop" items={tableOfContents} />}
       afterContent={<><RecentPosts posts={recentPosts} /><DailyNotes notes={dailyNotes} /></>}
+      footer={<><ShareControls {...getShareLinks({ entry, site: config })} /><Backlinks backlinks={getBacklinks({ view, slug: entry.slug })} /><RelatedPosts entries={getRelatedPosts({ view, entry, options: relatedOptions })} options={relatedOptions} /></>}
     />,
   );
 });

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

@@ -14,6 +14,7 @@ body {
 }
 
 .riebeckite-page {
+  --site-toc-sticky-top: var(--rb-space-3, 1.5rem);
   display: flex;
   min-height: 100vh;
   width: 100%;
@@ -95,7 +96,6 @@ body {
 
 .rb-site-footer {
   margin-top: 1rem;
-  padding-block: var(--rb-space-4, 2rem);
   border-top: 1px solid var(--rb-color-border);
 }
 
@@ -165,9 +165,12 @@ body {
 }
 
 .site-article {
-  display: block;
-  width: min(100% - 2rem, var(--rb-layout-article-max, 48rem));
+  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;
 }
 
@@ -181,32 +184,29 @@ body {
   display: none;
 }
 
-@media (min-width: 48rem) {
+@media (min-width: 64rem) {
+  .site-article__layout {
+    display: grid;
+    width: 100%;
+    grid-template-columns: minmax(0, var(--rb-layout-article-max, 48rem)) minmax(0, var(--rb-layout-sidebar, 14rem));
+    gap: var(--rb-layout-gap, 2rem);
+    align-items: start;
+  }
+
   .site-article__aside {
     display: block;
     min-width: 0;
-    margin-block: var(--rb-space-4, 2rem);
+    align-self: stretch;
   }
-}
 
-@media (min-width: 88rem) {
-  :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;
-    align-self: start;
-    width: var(--rb-layout-sidebar, 14rem);
-    margin-inline-start: calc(
-      -1 * var(--rb-layout-sidebar, 14rem) -
-      var(--rb-layout-gap, 2rem)
-    );
-    padding-inline-end: 1rem;
-    border-inline-end: 1px solid
-      color-mix(in oklab, currentColor 18%, transparent);
+  .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;
   }
 }
 

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

@@ -1,57 +1,32 @@
-import type { ContentBodySlots, PostContent } from "@riebeckite/core";
-import {
-  Article,
-  ArticleBody,
-  ArticleContent,
-  ArticleFooter,
-  ArticleLayout,
-  ContentSlot,
-  hasSlot,
-} from "@riebeckite/honox/ui";
+import type { PostContent } from "@riebeckite/core";
+import { Article, ArticleBody, ArticleContent, ArticleFooter } from "@riebeckite/honox/ui";
 
-export function SiteArticle({
-  post,
-  bodySlots,
-  asideContent,
-  afterContent,
-  footerContent,
-}: {
+type SiteArticleProps = {
   post: PostContent;
-  bodySlots?: ContentBodySlots;
-  asideContent?: unknown;
+  header?: unknown;
+  metadata?: unknown;
+  aside?: unknown;
   afterContent?: unknown;
-  footerContent?: unknown;
-}) {
+  footer?: unknown;
+};
+
+export function SiteArticle(props: SiteArticleProps) {
   return (
     <Article class="site-article">
-      <ArticleLayout>
-        {asideContent}
-
-        <ContentSlot
-          slots={bodySlots}
-          name="article.aside"
-          class="site-article__aside"
-        />
-
+      <div class="site-article__layout">
         <ArticleContent>
-          <ContentSlot slots={bodySlots} name="article.header" />
-          <ContentSlot slots={bodySlots} name="article.metadata" />
-          <ContentSlot slots={bodySlots} name="article.before-content" />
-
-          <ArticleBody html={post.html ?? ""} />
-
-          {afterContent}
-
-          <ContentSlot slots={bodySlots} name="article.after-content" />
+          {props.header}
+          {props.metadata}
+          <ArticleBody html={props.post.html ?? ""} />
+          {props.afterContent}
+          {props.footer ? (
+            <ArticleFooter class="site-article__footer">
+              {props.footer}
+            </ArticleFooter>
+          ) : null}
         </ArticleContent>
-
-        {hasSlot(bodySlots, "article.footer") || footerContent ? (
-          <ArticleFooter class="site-article__footer">
-            <ContentSlot slots={bodySlots} name="article.footer" />
-            {footerContent}
-          </ArticleFooter>
-        ) : null}
-      </ArticleLayout>
+        {props.aside ? <aside class="site-article__aside">{props.aside}</aside> : null}
+      </div>
     </Article>
   );
 }

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

@@ -4,9 +4,15 @@ import {
   riebeckiteSsgParams,
 } from "@riebeckite/honox/server";
 import { PageBody } from "@riebeckite/honox/ui";
+import { createPublicContentView } from "@riebeckite/core";
+import { Backlinks, getBacklinks } from "@riebeckite/plugin-backlinks";
+import { Breadcrumbs, getBreadcrumbs } from "@riebeckite/plugin-breadcrumbs";
+import { Properties, getProperties } from "@riebeckite/plugin-properties";
+import { getRelatedPosts, RelatedPosts, resolveRelatedPostsOptions } from "@riebeckite/plugin-related-posts";
 import { extractTableOfContents, TableOfContents } from "@riebeckite/plugin-toc";
 import { createRoute } from "honox/factory";
 import { SiteArticle } from "../components/article";
+import { config } from "virtual:riebeckite/config";
 import { content } from "virtual:riebeckite/content";
 
 export default createRoute(
@@ -21,12 +27,19 @@ export default createRoute(
     }
 
     const tableOfContents = extractTableOfContents(resolved.post.html ?? "");
+    const manifest = await content.getManifest();
+    const view = createPublicContentView(manifest);
+    const entry = view.findRoutableBySlug(resolved.entry.slug);
+    if (!entry) return c.notFound();
+    const relatedOptions = resolveRelatedPostsOptions({});
 
     return c.render(
       <SiteArticle
         post={resolved.post}
-        bodySlots={resolved.entry.bodySlots}
-        asideContent={<TableOfContents className="rr-table-of-contents--desktop" items={tableOfContents} />}
+        header={<Breadcrumbs items={getBreadcrumbs({ view, entry, homeLabel: config.site.title })} />}
+        metadata={<Properties data={getProperties({ view, frontmatter: resolved.post.frontmatter, options: { include: ["created", "modified", "tags", "status"], order: ["created", "modified", "tags", "status"] } })} />}
+        aside={<TableOfContents className="rr-table-of-contents--desktop" items={tableOfContents} />}
+        footer={<><Backlinks backlinks={getBacklinks({ view, slug: entry.slug })} /><RelatedPosts entries={getRelatedPosts({ view, entry, options: relatedOptions })} options={relatedOptions} /></>}
       />,
     );
   },

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

@@ -1,9 +1,15 @@
 import { resolveRiebeckiteHomeRequest } from "@riebeckite/honox/server";
 import { PageBody } from "@riebeckite/honox/ui";
+import { createPublicContentView } from "@riebeckite/core";
+import { Backlinks, getBacklinks } from "@riebeckite/plugin-backlinks";
+import { Breadcrumbs, getBreadcrumbs } from "@riebeckite/plugin-breadcrumbs";
+import { Properties, getProperties } from "@riebeckite/plugin-properties";
+import { getRelatedPosts, RelatedPosts, resolveRelatedPostsOptions } from "@riebeckite/plugin-related-posts";
 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 "virtual:riebeckite/config";
 import { content } from "virtual:riebeckite/content";
 
 export default createRoute(async (c) => {
@@ -15,15 +21,22 @@ export default createRoute(async (c) => {
     return c.render(<PageBody html={home.page.body} />);
   }
 
-  const recentPosts = getRecentPosts({ manifest: await content.getManifest() });
+  const manifest = await content.getManifest();
+  const recentPosts = getRecentPosts({ manifest });
   const tableOfContents = extractTableOfContents(home.post.html ?? "");
+  const view = createPublicContentView(manifest);
+  const entry = view.findRoutableBySlug(home.entry.slug);
+  if (!entry) return c.notFound();
+  const relatedOptions = resolveRelatedPostsOptions({});
 
   return c.render(
     <SiteArticle
       post={home.post}
-      bodySlots={home.entry.bodySlots}
-      asideContent={<TableOfContents className="rr-table-of-contents--desktop" items={tableOfContents} />}
-      afterContent={<><RecentPosts posts={recentPosts} /></>}
+      header={<Breadcrumbs items={getBreadcrumbs({ view, entry, homeLabel: config.site.title })} />}
+      metadata={<Properties data={getProperties({ view, frontmatter: home.post.frontmatter, options: { include: ["created", "modified", "tags", "status"], order: ["created", "modified", "tags", "status"] } })} />}
+      aside={<TableOfContents className="rr-table-of-contents--desktop" items={tableOfContents} />}
+      afterContent={<RecentPosts posts={recentPosts} />}
+      footer={<><Backlinks backlinks={getBacklinks({ view, slug: entry.slug })} /><RelatedPosts entries={getRelatedPosts({ view, entry, options: relatedOptions })} options={relatedOptions} /></>}
     />,
   );
 });

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

@@ -14,6 +14,7 @@ body {
 }
 
 .riebeckite-page {
+  --site-toc-sticky-top: var(--rb-space-3, 1.5rem);
   display: flex;
   min-height: 100vh;
   width: 100%;
@@ -95,7 +96,6 @@ body {
 
 .rb-site-footer {
   margin-top: 1rem;
-  padding-block: var(--rb-space-4, 2rem);
   border-top: 1px solid var(--rb-color-border);
 }
 
@@ -165,9 +165,12 @@ body {
 }
 
 .site-article {
-  display: block;
-  width: min(100% - 2rem, var(--rb-layout-article-max, 48rem));
+  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;
 }
 
@@ -181,32 +184,29 @@ body {
   display: none;
 }
 
-@media (min-width: 48rem) {
+@media (min-width: 64rem) {
+  .site-article__layout {
+    display: grid;
+    width: 100%;
+    grid-template-columns: minmax(0, var(--rb-layout-article-max, 48rem)) minmax(0, var(--rb-layout-sidebar, 14rem));
+    gap: var(--rb-layout-gap, 2rem);
+    align-items: start;
+  }
+
   .site-article__aside {
     display: block;
     min-width: 0;
-    margin-block: var(--rb-space-4, 2rem);
+    align-self: stretch;
   }
-}
 
-@media (min-width: 88rem) {
-  :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;
-    align-self: start;
-    width: var(--rb-layout-sidebar, 14rem);
-    margin-inline-start: calc(
-      -1 * var(--rb-layout-sidebar, 14rem) -
-      var(--rb-layout-gap, 2rem)
-    );
-    padding-inline-end: 1rem;
-    border-inline-end: 1px solid
-      color-mix(in oklab, currentColor 18%, transparent);
+  .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;
   }
 }