on master help sign in
docs: working docs slug pages
26796bfMatilde Park
lib/lib.js+18−4
@@ -210,8 +210,22 @@ export function buildPageTree(path) {
210 };
210 };
211}
211}
212
212
213−export const getIndexPage = (path) => {
213+export const getPage = (path) => {
214+ try {
214− const fileContents = fs.readFileSync(path, "utf8");
215+ let fileContents = fs.readFileSync(`${path}.md`, "utf8");
216+ if (fileContents) {
215− const { data, content } = matter(fileContents, options);
217+ const { data, content } = matter(fileContents, options);
218+ return { data, content };
219+ }
220+ } catch {
221+ try {
222+ let fileContents = fs.readFileSync(`${path}/_index.md`, "utf8");
223+ if (fileContents) {
224+ const { data, content } = matter(fileContents, options);
216− return { data, content };
225+ return { data, content };
226+ }
227+ } catch {
228+ console.error("no md file for slug");
229+ }
230+ }
217};
231};
pages/docs.js+2−4
@@ -1,7 +1,7 @@
1import Link from "next/link";
1import Link from "next/link";
2import { useRouter } from "next/router";
2import { useRouter } from "next/router";
3import { join } from "path";
3import { join } from "path";
4−import { getDocs, formatDate, buildPageTree, getIndexPage } from "../lib/lib";
4+import { getDocs, formatDate, buildPageTree, getPage } from "../lib/lib";
5import Markdown from "../components/Markdown";
5import Markdown from "../components/Markdown";
6
6
7const breadcrumbs = (posts, paths) => {
7const breadcrumbs = (posts, paths) => {
@@ -93,8 +93,6 @@ export default function DocsLayout({ posts, data, content }) {
93
93
94export async function getStaticProps() {
94export async function getStaticProps() {
95 const posts = buildPageTree(join(process.cwd(), "content/docs"));
95 const posts = buildPageTree(join(process.cwd(), "content/docs"));
96− const { data, content } = getIndexPage(
97− join(process.cwd(), "content/docs", "_index.md")
96+ const { data, content } = getPage(join(process.cwd(), "content/docs"));
98− );
99 return { props: { posts, data, content } };
97 return { props: { posts, data, content } };
100}
98}
pages/docs/[...slug].js+10−13
@@ -1,12 +1,7 @@
1import Link from "next/link";
1import Link from "next/link";
2import { useRouter } from "next/router";
2import { useRouter } from "next/router";
3import { join } from "path";
3import { join } from "path";
4−import {
4+import { getDocs, formatDate, buildPageTree, getPage } from "../../lib/lib";
5− getDocs,
6− formatDate,
7− buildPageTree,
8− getIndexPage,
9−} from "../../lib/lib";
10import Markdown from "../../components/Markdown";
5import Markdown from "../../components/Markdown";
11
6
12const breadcrumbs = (posts, paths) => {
7const breadcrumbs = (posts, paths) => {
@@ -85,23 +80,26 @@ function ContentArea(props) {
85 );
80 );
86}
81}
87
82
88−export default function DocsLayout({ posts, data, content }) {
83+export default function DocsLayout({ posts, data, content, params }) {
89 return (
84 return (
90 <div className="flex w-screen h-screen min-h-screen w-screen overflow-hidden">
85 <div className="flex w-screen h-screen min-h-screen w-screen overflow-hidden">
91 <Sidebar>{childPages("/docs", posts.children)}</Sidebar>
86 <Sidebar>{childPages("/docs", posts.children)}</Sidebar>
87+ <ContentArea
92− <ContentArea breadcrumbs={breadcrumbs(posts, [])} title={data.title}>
88+ breadcrumbs={breadcrumbs(posts, params.slug.slice(0, -1))}
89+ title={data.title}
90+ >
93 <Markdown post={{ content: content }} />
91 <Markdown post={{ content: content }} />
94 </ContentArea>
92 </ContentArea>
95 </div>
93 </div>
96 );
94 );
97}
95}
98
96
99−export async function getStaticProps() {
97+export async function getStaticProps({ params }) {
100 const posts = buildPageTree(join(process.cwd(), "content/docs"));
98 const posts = buildPageTree(join(process.cwd(), "content/docs"));
101− const { data, content } = getIndexPage(
99+ const { data, content } = getPage(
102− join(process.cwd(), "content/docs", "_index.md")
100+ join(process.cwd(), "content/docs", params.slug.join("/"))
103 );
101 );
104− return { props: { posts, data, content } };
102+ return { props: { posts, data, content, params } };
105}
103}
106
104
107export async function getStaticPaths() {
105export async function getStaticPaths() {
@@ -118,7 +116,6 @@ export async function getStaticPaths() {
118 });
116 });
119 };
117 };
120 allHrefs("/docs", posts);
118 allHrefs("/docs", posts);
121− console.log(slugs);
122 return {
119 return {
123 paths: slugs.filter((e) => e !== "/docs"),
120 paths: slugs.filter((e) => e !== "/docs"),
124 fallback: false,
121 fallback: false,