Skip to content

Commit f053406

Browse files
mdroidianmdroidian
authored
ENG-1537 - install and wire Nextra for docs route skeleton (#895)
* Update pnpm-lock.yaml, add Pagefind integration, and refactor layout components - Updated package versions in pnpm-lock.yaml for improved stability and compatibility. - Added Pagefind search index generation to the build process in package.json. - Refactored layout components in the website app for better structure and readability, including changes to the Home and Docs layouts. - Updated global styles for consistent hover effects on links. - Added .gitignore entry for Pagefind search index files. * fixes * devin
1 parent 07bf56a commit f053406

15 files changed

Lines changed: 3254 additions & 170 deletions

File tree

‎apps/website/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
/.next/
1818
/out/
1919

20+
# Pagefind search index (generated at build time)
21+
/public/_pagefind
22+
2023
# production
2124
/build
2225

‎apps/website/app/(docs)/docs/page.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import Link from "next/link";
22
import Image from "next/image";
33

4-
export default function DocsPage() {
4+
const DocsPage = () => {
55
return (
6-
<main className="flex min-h-screen w-full items-center justify-center lg:pl-72">
6+
<main className="flex min-h-screen w-full items-center justify-center">
77
<div className="space-y-4 text-center">
88
<h1 className="text-4xl font-bold tracking-tight text-slate-900 dark:text-white">
99
Future Home of All the Docs
@@ -13,6 +13,10 @@ export default function DocsPage() {
1313
<Link href={"docs/roam"} className="underline">
1414
Roam Docs{" "}
1515
</Link>
16+
and the{" "}
17+
<Link href={"docs/obsidian"} className="underline">
18+
Obsidian Docs{" "}
19+
</Link>
1620
</p>
1721
<div className="mt-8 flex items-center justify-center gap-4">
1822
<button>
@@ -30,4 +34,6 @@ export default function DocsPage() {
3034
</div>
3135
</main>
3236
);
33-
}
37+
};
38+
39+
export default DocsPage;

‎apps/website/app/(docs)/layout.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,18 @@ export const metadata: Metadata = {
1919
description: DESCRIPTION,
2020
};
2121

22-
export default function RootLayout({
23-
children,
24-
}: {
25-
children: React.ReactNode;
26-
}) {
22+
const DocsLayout = ({ children }: { children: React.ReactNode }) => {
2723
return (
28-
<html
29-
lang="en"
30-
className={clsx("h-full antialiased", inter.variable, customScrollbar)}
31-
suppressHydrationWarning
24+
<div
25+
className={clsx(
26+
"flex min-h-screen w-full bg-white antialiased dark:bg-slate-900 [&::-webkit-scrollbar]:hidden",
27+
inter.variable,
28+
customScrollbar,
29+
)}
3230
>
33-
<body className="flex min-h-full bg-white dark:bg-slate-900 [&::-webkit-scrollbar]:hidden">
34-
<div className="w-full">{children}</div>
35-
</body>
36-
</html>
31+
{children}
32+
</div>
3733
);
38-
}
34+
};
35+
36+
export default DocsLayout;

‎apps/website/app/(home)/layout.tsx‎

Lines changed: 37 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -33,49 +33,45 @@ export const metadata: Metadata = {
3333

3434
const inter = Inter({ subsets: ["latin"] });
3535

36-
const RootLayout = async ({ children }: { children: React.ReactNode }) => {
36+
const HomeLayout = async ({ children }: { children: React.ReactNode }) => {
3737
const hasUpdates = !!(await getAllBlogs()).length;
3838
return (
39-
<html lang="en">
40-
<body className={`antialiased`}>
41-
<PostHogProvider>
42-
<div
43-
className={`flex min-h-screen flex-col bg-neutral-light ${inter.className}`}
44-
>
45-
<header className="flex flex-col items-center justify-between space-y-4 px-6 py-4 md:flex-row md:space-y-0">
46-
<Logo />
47-
<nav className="w-full md:w-auto">
48-
<ul className="flex flex-wrap justify-center space-x-4 md:flex-nowrap md:space-x-8">
49-
{[
50-
"About",
51-
"Resources",
52-
"Events",
53-
hasUpdates && "Updates",
54-
"Talks",
55-
"Team",
56-
"Supporters",
57-
"Contact",
58-
]
59-
.filter((item): item is string => Boolean(item))
60-
.map((item) => (
61-
<li key={item}>
62-
<Link
63-
href={`/#${item.toLowerCase()}`} // Ensures absolute path with root `/`
64-
className="text-neutral-dark hover:text-neutral-dark/60"
65-
>
66-
{item}
67-
</Link>
68-
</li>
69-
))}
70-
</ul>
71-
</nav>
72-
</header>
73-
{children}
74-
</div>
75-
</PostHogProvider>
76-
</body>
77-
</html>
39+
<PostHogProvider>
40+
<div
41+
className={`flex min-h-screen flex-col bg-neutral-light antialiased ${inter.className}`}
42+
>
43+
<header className="flex flex-col items-center justify-between space-y-4 px-6 py-4 md:flex-row md:space-y-0">
44+
<Logo />
45+
<nav className="w-full md:w-auto">
46+
<ul className="flex flex-wrap justify-center space-x-4 md:flex-nowrap md:space-x-8">
47+
{[
48+
"About",
49+
"Resources",
50+
"Events",
51+
hasUpdates && "Updates",
52+
"Talks",
53+
"Team",
54+
"Supporters",
55+
"Contact",
56+
]
57+
.filter((item): item is string => Boolean(item))
58+
.map((item) => (
59+
<li key={item}>
60+
<Link
61+
href={`/#${item.toLowerCase()}`} // Ensures absolute path with root `/`
62+
className="text-neutral-dark hover:text-neutral-dark/60"
63+
>
64+
{item}
65+
</Link>
66+
</li>
67+
))}
68+
</ul>
69+
</nav>
70+
</header>
71+
{children}
72+
</div>
73+
</PostHogProvider>
7874
);
7975
};
8076

81-
export default RootLayout;
77+
export default HomeLayout;

‎apps/website/app/(nextra)/layout.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { getPageMap } from "nextra/page-map";
2+
import type { PageMapItem } from "nextra";
3+
import { Footer, Layout, Navbar } from "nextra-theme-docs";
4+
import "./nextra-css.css";
5+
import "nextra-theme-docs/style-prefixed.css";
6+
7+
type DocsNextraLayoutProps = {
8+
children: React.ReactNode;
9+
};
10+
11+
const DOCS_ROUTES = new Set([
12+
"/nextra",
13+
"/nextra/getting-started",
14+
"/nextra/templates",
15+
]);
16+
17+
const filterDocsPageMap = (pageMap: PageMapItem[]): PageMapItem[] =>
18+
pageMap.flatMap((item) => {
19+
if ("children" in item) {
20+
const children = filterDocsPageMap(item.children);
21+
22+
if (!children.length && !DOCS_ROUTES.has(item.route)) {
23+
return [];
24+
}
25+
26+
return [{ ...item, children }];
27+
}
28+
29+
if ("route" in item && DOCS_ROUTES.has(item.route)) {
30+
return [item];
31+
}
32+
33+
return [];
34+
});
35+
36+
const DocsNextraLayout = async ({
37+
children,
38+
}: DocsNextraLayoutProps): Promise<React.ReactElement> => {
39+
const pageMap = filterDocsPageMap(await getPageMap("/nextra"));
40+
41+
return (
42+
<div className="nextra-reset">
43+
<Layout
44+
editLink={null}
45+
feedback={{ content: null }}
46+
footer={
47+
<Footer>
48+
Apache 2.0 {new Date().getFullYear()} (c) Discourse Graphs.
49+
</Footer>
50+
}
51+
navbar={
52+
<Navbar
53+
logo={
54+
<span className="font-semibold tracking-tight">
55+
Discourse Graphs docs
56+
</span>
57+
}
58+
projectLink="https://github.com/DiscourseGraphs/discourse-graph"
59+
/>
60+
}
61+
pageMap={pageMap}
62+
sidebar={{
63+
defaultMenuCollapseLevel: 1,
64+
}}
65+
toc={{
66+
backToTop: "Back to top",
67+
}}
68+
>
69+
{children}
70+
</Layout>
71+
</div>
72+
);
73+
};
74+
75+
export default DocsNextraLayout;

‎apps/website/app/(nextra)/nextra-css.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@tailwind utilities;

‎apps/website/app/(nextra)/nextra/getting-started/page.mdx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: Getting started
3+
description: What this initial Nextra setup already provides.
4+
---
5+
6+
import { Callout } from "nextra/components";
7+
8+
# Getting started
9+
10+
This first pass installs Nextra and wires the `/docs` route to the docs theme with App Router support.
11+
12+
## Included in this skeleton
13+
14+
- MDX-backed pages under the `/docs` route
15+
- A Nextra docs layout with navigation, dark mode, and search
16+
- A page map configured for the new placeholder docs pages
17+
- Legacy links back to the current Roam and Obsidian docs
18+
19+
## Intentionally deferred
20+
21+
- Migration of existing docs content into Nextra-managed pages
22+
- Redirects for any changed slugs
23+
- Blog migration and legacy markdown cleanup
24+
25+
<Callout type="default">
26+
The old docs pipeline is still active for `/docs/roam` and `/docs/obsidian`
27+
until the follow-up migration tickets land.
28+
</Callout>

‎apps/website/app/(nextra)/nextra/page.mdx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: Docs overview
3+
description: The first Nextra-backed docs pages for the website migration.
4+
---
5+
6+
import { Callout, Cards } from "nextra/components";
7+
8+
# Docs overview
9+
10+
This route now runs on Nextra 4. The current pages are a minimal skeleton while the existing documentation is migrated into the new structure.
11+
12+
<Callout type="info">
13+
The current Roam and Obsidian docs remain available during the migration.
14+
</Callout>
15+
16+
<Cards>
17+
<Cards.Card href="/nextra/getting-started" title="Getting started" />
18+
<Cards.Card href="/nextra/templates" title="Templates" />
19+
<Cards.Card href="/docs/roam" title="Roam docs" />
20+
<Cards.Card href="/docs/obsidian" title="Obsidian docs" />
21+
</Cards>

0 commit comments

Comments
 (0)