diff options
| -rw-r--r-- | components/chapters.tsx | 1 | ||||
| -rw-r--r-- | pages/post/[id].tsx | 23 |
2 files changed, 21 insertions, 3 deletions
diff --git a/components/chapters.tsx b/components/chapters.tsx index 9c6fa95..9f15b87 100644 --- a/components/chapters.tsx +++ b/components/chapters.tsx @@ -39,6 +39,7 @@ function NavbarChapter(props: { classList={classes} title={props.chapter.name} onIconClick={() => props.chapter.children?.length > 0 && setCollapsed(!collapsed)} + href={"#" + props.chapter.sectionLink} key={(() => Math.round(Math.random() * 1e12))()} style={{ marginLeft: 12 * props.level, diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx index 890fb4f..38c894c 100644 --- a/pages/post/[id].tsx +++ b/pages/post/[id].tsx @@ -1,3 +1,4 @@ +import { ReactNode } from 'react'; import ReactMarkdown from 'react-markdown'; import { readdirSync, readFileSync } from 'fs'; import { join } from 'path'; @@ -17,6 +18,21 @@ interface ArticleMeta { chapters?: Array<chapter>; } +var headingLevel = (input: string) => input?.match(/^[#]+/)[0]?.length || 0; + +var sectionID = (input: string) => input + .replace(/[()\[\]{}!@#$%^&*<>?,./\;':"\\|=+]/g, "") + .replace(/\s/g, "-") + .toLowerCase(); + +function Heading(props: { + children?: ReactNode; + level?: number; +}) { + var HeadingTag = "h" + props.level as keyof JSX.IntrinsicElements; + return <HeadingTag id={sectionID(props.children[0].props.children)} children={props.children}/> +} + export default function Post(props: { content: string, meta: ArticleMeta @@ -39,6 +55,7 @@ export default function Post(props: { renderers={{ image: Image, thematicBreak: Seperator, + heading: Heading, }}/> </div> </div> @@ -67,7 +84,6 @@ function parseMeta(file: Array<string>): ArticleMeta { return meta; } -var headingLevel = (input: string) => input?.match(/^[#]+/)[0]?.length || 0; function parseToCRecursive(headings: Array<string>): Array<chapter> { interface WIPchapter extends chapter { unparsedChildren?: Array<string>; @@ -79,8 +95,10 @@ function parseToCRecursive(headings: Array<string>): Array<chapter> { for (var i in headings) { var localLevel = headingLevel(headings[i]); if (localLevel == lowestLevel) { + var chapterName = headings[i].match(/^[#]+\s+(.+)/)[1]; children.push({ - name: headings[i].match(/^[#]+\s+(.+)/)[1], + name: chapterName, + sectionLink: sectionID(chapterName), unparsedChildren: [], }); currentChildIndex += 1; @@ -101,7 +119,6 @@ function parseToCRecursive(headings: Array<string>): Array<chapter> { function parseToC(file: Array<string>): Array<chapter> { var chapterStrings = file.filter(line => line.startsWith("#")); - console.log(parseToCRecursive(chapterStrings)) return parseToCRecursive(chapterStrings); } |