From 56b9963afd6024a75a19aed7d7d1ec882868f4fe Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 6 Dec 2022 21:04:09 +0100 Subject: [PATCH] Markdown header margin fix [Fixes #83] (#120) * expand parseHeadingId Will produce a kebab-case heading ID from string if none explicitly declared in the markdown. Always returns an object with the children, title and headingId. * remove redundant code from MDComponents.tsx parseHeadingIds now always returns an object with an ID, removing need for conditionals here * Use Box instead of flex Stack for MDX content Allows stacked vertical margins to properly collapse into each other * fix: h2 top margin to 3rem on mobile * remove unneeded line * extract and rename getKebabCaseFromName util fn * Update src/pages/[...slug].tsx * Update src/utils/parseHeadingId.ts Co-authored-by: Corwin Smith * move constant inside function make variable name all caps as a string constant * clean up utils/index.ts to abc order Co-authored-by: Corwin Smith --- src/components/UI/docs/MDComponents.tsx | 56 +++++++------------------ src/pages/[...slug].tsx | 11 +++-- src/utils/getKebabCaseFromName.ts | 7 ++++ src/utils/index.ts | 3 +- src/utils/parseHeadingId.ts | 26 +++++++----- 5 files changed, 47 insertions(+), 56 deletions(-) create mode 100644 src/utils/getKebabCaseFromName.ts diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx index 2e7f88122c..994809ca89 100644 --- a/src/components/UI/docs/MDComponents.tsx +++ b/src/components/UI/docs/MDComponents.tsx @@ -42,61 +42,37 @@ const MDComponents = { }, // headings h1: ({ children }: any) => { - const heading = parseHeadingId(children); + const { children: parsedChildren, headingId} = parseHeadingId(children); - return heading ? ( - - {heading.children} - - ) : ( - - {children} + return ( + + {parsedChildren} ); }, h2: ({ children }: any) => { - const heading = parseHeadingId(children); + const { children: parsedChildren, headingId} = parseHeadingId(children); - return heading ? ( - - {heading.children} - - ) : ( - - {children} + return ( + + {parsedChildren} ); }, h3: ({ children }: any) => { - const heading = parseHeadingId(children); - - return heading ? ( - - {heading.children} - - ) : ( - - {children} + const { children: parsedChildren, headingId} = parseHeadingId(children); + return ( + + {parsedChildren} ); }, h4: ({ children }: any) => { - const heading = parseHeadingId(children); + const { children: parsedChildren, headingId} = parseHeadingId(children); - return heading ? ( - - {heading.children} - - ) : ( - - {children} + return ( + + {parsedChildren} ); }, diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx index 1d24e72165..1d1eab5cd0 100644 --- a/src/pages/[...slug].tsx +++ b/src/pages/[...slug].tsx @@ -1,7 +1,7 @@ import fs from 'fs'; import matter from 'gray-matter'; import yaml from 'js-yaml'; -import { Flex, Stack, Heading, Text } from '@chakra-ui/react'; +import { Box, Flex, Stack, Heading, Text } from '@chakra-ui/react'; import ChakraUIRenderer from 'chakra-ui-markdown-renderer'; import ReactMarkdown from 'react-markdown'; import { useRouter } from 'next/router'; @@ -116,7 +116,7 @@ const DocPage: NextPage = ({ frontmatter, content, navLinks, lastModified - + = ({ frontmatter, content, navLinks, lastModified > {content} - + - + diff --git a/src/utils/getKebabCaseFromName.ts b/src/utils/getKebabCaseFromName.ts new file mode 100644 index 0000000000..10ce621144 --- /dev/null +++ b/src/utils/getKebabCaseFromName.ts @@ -0,0 +1,7 @@ +export const getKebabCaseFromName = (name: string): string => + name + .replace(/[#]/g, '') + .trim() + .toLowerCase() + .replace(/ /g, '-') + .replace(/[^a-z0-9-]/g, ''); diff --git a/src/utils/index.ts b/src/utils/index.ts index dcc6c5caa4..206b319fe8 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -2,8 +2,9 @@ export { compareReleasesFn } from './compareReleasesFn'; export { fetchLatestReleaseCommit } from './fetchLatestReleaseCommit'; export { fetchLatestReleaseVersionAndName } from './fetchLatestReleaseVersionAndName'; export { fetchXMLData } from './fetchXMLData'; -export { getLatestBinaryURL } from './getLatestBinaryURL'; export { getChecksum } from './getChecksum'; +export { getKebabCaseFromName } from './getKebabCaseFromName'; +export { getLatestBinaryURL } from './getLatestBinaryURL'; export { getParsedDate } from './getParsedDate'; export { getProgrammingLanguageName } from './getProgrammingLanguageName'; export { getReleaseArch } from './getReleaseArch'; diff --git a/src/utils/parseHeadingId.ts b/src/utils/parseHeadingId.ts index 75d56bf5de..1e0b93e0ec 100644 --- a/src/utils/parseHeadingId.ts +++ b/src/utils/parseHeadingId.ts @@ -1,18 +1,22 @@ -const check = '{#'; +import { getKebabCaseFromName } from './'; export const parseHeadingId = (children: string[]) => { - if (children[children.length - 1].includes(check)) { - const temp = children[children.length - 1].split(check); - const headingId = temp[temp.length - 1].split('}')[0]; - - children[children.length - 1] = temp[0]; - + const CHECK = '{#'; + const lastChild = children[children.length - 1]; + const split = lastChild.split(CHECK); + if (lastChild.includes(CHECK)) { + const headingId = split[split.length - 1].split('}')[0]; + const newChildren = [...children]; + newChildren[newChildren.length - 1] = split[0]; return { - children, - title: temp[0].replaceAll('#', ''), + children: newChildren, + title: split[0].replaceAll('#', ''), headingId }; } - - return null; + return { + children, + title: split[0].replaceAll('#', ''), + headingId: getKebabCaseFromName(split[0]) + }; };