Skip to content

Commit 3b1908b

Browse files
pheralbpheralb
committed
feat: initial content-collections config + integration to Nextjs
1 parent b113b48 commit 3b1908b

File tree

8 files changed

+104
-127
lines changed

8 files changed

+104
-127
lines changed

‎website/content-collections.ts

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { defineCollection, defineConfig } from "@content-collections/core";
2+
import { compileMDX } from "@content-collections/mdx";
3+
4+
// MDX Plugins:
5+
import {
6+
remarkGfm,
7+
remarkHeading,
8+
remarkStructure,
9+
} from "fumadocs-core/mdx-plugins";
10+
import GithubSlugger from "github-slugger";
11+
import rehypePrettyCode from "rehype-pretty-code";
12+
import { rehypePrettyOptions } from "./src/mdx/rehypePrettyOptions";
13+
14+
const docs = defineCollection({
15+
name: "docs",
16+
directory: "src/docs",
17+
include: "**/*.mdx",
18+
schema: (z) => ({
19+
title: z.string(),
20+
description: z.string(),
21+
category: z.string(),
22+
}),
23+
transform: async (document, context) => {
24+
const mdx = await compileMDX(context, document, {
25+
remarkPlugins: [remarkGfm, remarkHeading, remarkStructure],
26+
rehypePlugins: [[rehypePrettyCode, rehypePrettyOptions]],
27+
});
28+
const slugger = new GithubSlugger();
29+
const regXHeader = /\n(?<flag>#+)\s+(?<content>.+)/g;
30+
const tableOfContents = Array.from(
31+
document.content.matchAll(regXHeader),
32+
).map(({ groups }) => {
33+
const flag = groups?.flag;
34+
const content = groups?.content;
35+
return {
36+
level: flag?.length,
37+
text: content,
38+
slug: content ? slugger.slug(content) : undefined,
39+
};
40+
});
41+
return {
42+
...document,
43+
mdx,
44+
slug: document._meta.path,
45+
url: `/${document._meta.path}`,
46+
tableOfContents,
47+
};
48+
},
49+
});
50+
51+
export default defineConfig({
52+
collections: [docs],
53+
});

‎website/next.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import type { NextConfig } from "next";
2+
import { withContentCollections } from "@content-collections/next";
23

34
const nextConfig: NextConfig = {
45
/* config options here */
56
};
67

7-
export default nextConfig;
8+
export default withContentCollections(nextConfig);

‎website/src/app/layout.tsx

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
1-
import type { Metadata } from "next";
2-
import { Geist, Geist_Mono } from "next/font/google";
3-
import "./globals.css";
1+
import type { Metadata } from 'next';
2+
import type { ReactNode } from 'react';
3+
4+
// Styles:
5+
import '@/styles/globals.css';
6+
7+
// Fonts:
8+
import { Geist, Geist_Mono } from 'next/font/google';
49

510
const geistSans = Geist({
6-
variable: "--font-geist-sans",
7-
subsets: ["latin"],
11+
variable: '--font-geist-sans',
12+
subsets: ['latin'],
813
});
914

1015
const geistMono = Geist_Mono({
11-
variable: "--font-geist-mono",
12-
subsets: ["latin"],
16+
variable: '--font-geist-mono',
17+
subsets: ['latin'],
1318
});
1419

1520
export const metadata: Metadata = {
16-
title: "Create Next App",
17-
description: "Generated by create next app",
21+
title: 'Create Next App',
22+
description: 'Generated by create next app',
1823
};
1924

2025
export default function RootLayout({
2126
children,
2227
}: Readonly<{
23-
children: React.ReactNode;
28+
children: ReactNode;
2429
}>) {
2530
return (
2631
<html lang="en">

‎website/src/app/page.tsx

Lines changed: 1 addition & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,3 @@
1-
import Image from "next/image";
2-
31
export default function Home() {
4-
return (
5-
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
6-
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
7-
<Image
8-
className="dark:invert"
9-
src="/next.svg"
10-
alt="Next.js logo"
11-
width={180}
12-
height={38}
13-
priority
14-
/>
15-
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
16-
<li className="mb-2">
17-
Get started by editing{" "}
18-
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
19-
src/app/page.tsx
20-
</code>
21-
.
22-
</li>
23-
<li>Save and see your changes instantly.</li>
24-
</ol>
25-
26-
<div className="flex gap-4 items-center flex-col sm:flex-row">
27-
<a
28-
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
29-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
30-
target="_blank"
31-
rel="noopener noreferrer"
32-
>
33-
<Image
34-
className="dark:invert"
35-
src="/vercel.svg"
36-
alt="Vercel logomark"
37-
width={20}
38-
height={20}
39-
/>
40-
Deploy now
41-
</a>
42-
<a
43-
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
44-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
45-
target="_blank"
46-
rel="noopener noreferrer"
47-
>
48-
Read our docs
49-
</a>
50-
</div>
51-
</main>
52-
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
53-
<a
54-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
55-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
56-
target="_blank"
57-
rel="noopener noreferrer"
58-
>
59-
<Image
60-
aria-hidden
61-
src="/file.svg"
62-
alt="File icon"
63-
width={16}
64-
height={16}
65-
/>
66-
Learn
67-
</a>
68-
<a
69-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
70-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
71-
target="_blank"
72-
rel="noopener noreferrer"
73-
>
74-
<Image
75-
aria-hidden
76-
src="/window.svg"
77-
alt="Window icon"
78-
width={16}
79-
height={16}
80-
/>
81-
Examples
82-
</a>
83-
<a
84-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
85-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
86-
target="_blank"
87-
rel="noopener noreferrer"
88-
>
89-
<Image
90-
aria-hidden
91-
src="/globe.svg"
92-
alt="Globe icon"
93-
width={16}
94-
height={16}
95-
/>
96-
Go to nextjs.org →
97-
</a>
98-
</footer>
99-
</div>
100-
);
2+
return <h2>hello</h2>;
1013
}

‎website/src/mdx/components.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { useMDXComponent } from "@content-collections/mdx/react";
2+
3+
interface MDXComponentsProps {
4+
code: string;
5+
className?: string;
6+
}
7+
8+
export function MDX(props: MDXComponentsProps) {
9+
const Component = useMDXComponent(props.code);
10+
return <Component components={{}} />;
11+
}

‎website/src/mdx/rehypePrettyOptions.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import type { Options } from "rehype-pretty-code";
2+
3+
export const rehypePrettyOptions: Options = {
4+
keepBackground: false,
5+
theme: {
6+
dark: "github-dark-dimmed",
7+
light: "github-light",
8+
},
9+
};

‎website/src/styles/globals.css

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,14 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--background: #ffffff;
7-
--foreground: #171717;
8-
}
9-
10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #0a0a0a;
13-
--foreground: #ededed;
14-
}
15-
}
5+
/* Light/Dark mode for Shiki */
6+
/* https://shiki.style/guide/dual-themes#light-dark-dual-themes */
167

17-
body {
18-
color: var(--foreground);
19-
background: var(--background);
20-
font-family: Arial, Helvetica, sans-serif;
8+
html.dark .shiki,
9+
html.dark .shiki span {
10+
color: var(--shiki-dark) !important;
11+
background-color: var(--shiki-dark-bg) !important;
12+
font-style: var(--shiki-dark-font-style) !important;
13+
font-weight: var(--shiki-dark-font-weight) !important;
14+
text-decoration: var(--shiki-dark-text-decoration) !important;
2115
}

‎website/tsconfig.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"compilerOptions": {
3-
"target": "ES2017",
3+
"target": "ES2018",
44
"lib": ["dom", "dom.iterable", "esnext"],
55
"allowJs": true,
66
"skipLibCheck": true,
@@ -19,7 +19,9 @@
1919
}
2020
],
2121
"paths": {
22-
"@/*": ["./src/*"]
22+
"@/*": ["./src/*"],
23+
"content-collections": ["./.content-collections/generated"],
24+
"@pheralb/toast": ["../library/src/main.tsx"]
2325
}
2426
},
2527
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

0 commit comments

Comments
 (0)