Skip to content

Commit

Permalink
format code
Browse files Browse the repository at this point in the history
  • Loading branch information
@techmannih
techmannih committed Jan 5, 2025
1 parent 979f570 commit 263d407
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 41 deletions.
3 changes: 1 addition & 2 deletions components/StyledMarkdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext } from 'react';
import Markdown from 'markdown-to-jsx';
import Link from 'next/link';
import JsonEditor from '~/components/JsonEditor';
Expand Down Expand Up @@ -545,7 +545,6 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
);
};


const checkHasContent = (reactNode: React.ReactChild) => {
if (!reactNode) return false;
if (typeof reactNode === 'string' || typeof reactNode === 'number')
Expand Down
117 changes: 95 additions & 22 deletions components/TOC.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@ const hiddenElements = (...elements: string[]) => {
};

// HeadingLink component to render each heading with a link
const HeadingLink: React.FC<{ children: React.ReactNode; level: number; isActive: boolean }> = ({ children, level, isActive }) => {
const HeadingLink: React.FC<{
level: number;
isActive: boolean;
children: React.ReactNode;
}> = ({ level, isActive, children }) => {
const text = getTextFromChildren(children); // Get the plain text for slug
const slug = slugifyMarkdownHeadline(text); // Generate slug from text
const paddingClass = `pl-${level * 2}`; // Adjust padding based on heading level
Expand All @@ -45,7 +49,10 @@ interface TableOfContentMarkdownProps {
depth?: number;
}

export const TableOfContentMarkdown: React.FC<TableOfContentMarkdownProps> = ({ markdown, depth = 2 }) => {
export const TableOfContentMarkdown: React.FC<TableOfContentMarkdownProps> = ({
markdown,
depth = 2,
}) => {
const [activeSlug, setActiveSlug] = useState<string | null>(null);

useEffect(() => {
Expand All @@ -69,34 +76,98 @@ export const TableOfContentMarkdown: React.FC<TableOfContentMarkdownProps> = ({
}, []);

return (
<div className="w-2/5 lg:block mt-10 hidden sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
<div className="h-full overflow-y-auto scrollbar-hidden pl-5">
<div className="uppercase text-xs text-slate-400 mb-4">On this page</div>
<div className='w-2/5 lg:block mt-10 hidden sticky top-24 h-[calc(100vh-6rem)] overflow-hidden'>
<div className='h-full overflow-y-auto scrollbar-hidden pl-5'>
<div className='uppercase text-xs text-slate-400 mb-4'>
On this page
</div>
<Markdown
options={{
overrides: {
h1: {
component: ({ children }) => (
<HeadingLink children={children} level={0} isActive={activeSlug === slugifyMarkdownHeadline(getTextFromChildren(children))} />
<HeadingLink
level={0}
isActive={
activeSlug ===
slugifyMarkdownHeadline(getTextFromChildren(children))
}
>
{children}
</HeadingLink>
),
},
h2: {
component: depth >= 3 ? ({ children }) => (
<HeadingLink children={children} level={0} isActive={activeSlug === slugifyMarkdownHeadline(getTextFromChildren(children))} />
) : () => null,
component:
depth >= 3
? ({ children }) => (
<HeadingLink

Check failure on line 104 in components/TOC.tsx

View workflow job for this annotation

GitHub Actions / Code Quality Checks 

Expected indentation of 22 spaces but found 24
level={0}

Check failure on line 105 in components/TOC.tsx

View workflow job for this annotation

GitHub Actions / Code Quality Checks 

Expected indentation of 24 spaces but found 26
isActive={

Check failure on line 106 in components/TOC.tsx

View workflow job for this annotation

GitHub Actions / Code Quality Checks 

Expected indentation of 24 spaces but found 26
activeSlug ===

Check failure on line 107 in components/TOC.tsx

View workflow job for this annotation

GitHub Actions / Code Quality Checks 

Expected indentation of 26 spaces but found 28
slugifyMarkdownHeadline(
getTextFromChildren(children),
)
}

Check failure on line 111 in components/TOC.tsx

View workflow job for this annotation

GitHub Actions / Code Quality Checks 

Expected indentation of 24 spaces but found 26
>

Check failure on line 112 in components/TOC.tsx

View workflow job for this annotation

GitHub Actions / Code Quality Checks 

Expected indentation of 22 spaces but found 24
{children}

Check failure on line 113 in components/TOC.tsx

View workflow job for this annotation

GitHub Actions / Code Quality Checks 

Expected indentation of 24 spaces but found 26
</HeadingLink>

Check failure on line 114 in components/TOC.tsx

View workflow job for this annotation

GitHub Actions / Code Quality Checks 

Expected indentation of 22 spaces but found 24
)

Check failure on line 115 in components/TOC.tsx

View workflow job for this annotation

GitHub Actions / Code Quality Checks 

Expected indentation of 20 spaces but found 22
: () => null,
},
h3: {
component: depth >= 3 ? ({ children }) => (
<HeadingLink children={children} level={1} isActive={activeSlug === slugifyMarkdownHeadline(getTextFromChildren(children))} />
) : () => null,
component:
depth >= 3
? ({ children }) => (
<HeadingLink

Check failure on line 122 in components/TOC.tsx

View workflow job for this annotation

GitHub Actions / Code Quality Checks 

Expected indentation of 22 spaces but found 24
level={1}
isActive={
activeSlug ===
slugifyMarkdownHeadline(
getTextFromChildren(children),
)
}
>
{children}
</HeadingLink>
)
: () => null,
},
h4: {
component: depth >= 3 ? ({ children }) => (
<HeadingLink children={children} level={2} isActive={activeSlug === slugifyMarkdownHeadline(getTextFromChildren(children))} />
) : () => null,
component:
depth >= 3
? ({ children }) => (
<HeadingLink
level={2}
isActive={
activeSlug ===
slugifyMarkdownHeadline(
getTextFromChildren(children),
)
}
>
{children}
</HeadingLink>
)
: () => null,
},

...hiddenElements('strong', 'p', 'a', 'ul', 'li', 'table', 'code', 'pre', 'blockquote', 'span', 'div', 'figure', 'Bigquote', 'Regularquote', 'specialBox'),
...hiddenElements(
'strong',
'p',
'a',
'ul',
'li',
'table',
'code',
'pre',
'blockquote',
'span',
'div',
'figure',
'Bigquote',
'Regularquote',
'specialBox',
),
},
}}
>
Expand All @@ -107,16 +178,18 @@ export const TableOfContentMarkdown: React.FC<TableOfContentMarkdownProps> = ({
);
};

export const TableOfContentLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
export const TableOfContentLayout: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
return (
<div className="max-w-[1400px] mx-auto flex flex-col items-center">
<section className="relative">
<div className='max-w-[1400px] mx-auto flex flex-col items-center'>
<section className='relative'>
{/* TOC on the left */}
<div className="w-2/5 lg:block mt-10 sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
<div className='w-2/5 lg:block mt-10 sticky top-24 h-[calc(100vh-6rem)] overflow-hidden'>
<TableOfContentMarkdown markdown={String(children)} depth={2} />
</div>
{/* Main content on the right */}
<div className="col-span-4 md:col-span-3 lg:mt-20 mx-4 md:mx-0">
<div className='col-span-4 md:col-span-3 lg:mt-20 mx-4 md:mx-0'>
{children}
</div>
</section>
Expand Down
8 changes: 3 additions & 5 deletions pages/blog/posts/[slug].page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ import readingTime from 'reading-time';
import { Headline1 } from '~/components/Headlines';
import { SectionContext } from '~/context';
import CarbonAds from '~/components/CarbonsAds';
import {
TableOfContentMarkdown,
} from '~/components/TOC';
import { TableOfContentMarkdown } from '~/components/TOC';
export async function getStaticPaths() {
return getStaticMarkdownPaths('pages/blog/posts');
}
Expand Down Expand Up @@ -92,8 +90,8 @@ export default function StaticMarkdownPage({
},
)}
</div>
<div className="">
<TableOfContentMarkdown markdown={content} depth={3} />
<div className=''>
<TableOfContentMarkdown markdown={content} depth={3} />
</div>
<CarbonAds variant='sidebar' />
</div>
Expand Down
11 changes: 5 additions & 6 deletions pages/learn/[slug].page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ export default function StaticMarkdownPage({
const newTitle = 'JSON Schema - ' + frontmatter.title;
return (
<SectionContext.Provider value={frontmatter.section || null}>

<div className='flex pt-4'>
<div className='w-full pr-5'>
<Head>
Expand All @@ -37,11 +36,11 @@ export default function StaticMarkdownPage({
<Headline1>{frontmatter.title}</Headline1>
<StyledMarkdown markdown={content} />
<NextPrevButton
prevLabel={frontmatter?.prev?.label}
prevURL={frontmatter?.prev?.url}
nextLabel={frontmatter?.next?.label}
nextURL={frontmatter?.next?.url}
/>
prevLabel={frontmatter?.prev?.label}
prevURL={frontmatter?.prev?.url}
nextLabel={frontmatter?.next?.label}
nextURL={frontmatter?.next?.url}
/>
<DocsHelp markdownFile={markdownFile} />
</div>
<TableOfContentMarkdown markdown={content} depth={3} />
Expand Down
11 changes: 5 additions & 6 deletions pages/overview/[slug].page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export default function StaticMarkdownPage({

return (
<SectionContext.Provider value={frontmatter.section || null}>

<div className='flex pt-4'>
<div className='w-full pr-5'>
<Head>
Expand All @@ -39,11 +38,11 @@ export default function StaticMarkdownPage({
<Headline1>{frontmatter.title}</Headline1>
<StyledMarkdown markdown={content} />
<NextPrevButton
prevLabel={frontmatter.prev?.label}
prevURL={frontmatter.prev?.url}
nextLabel={frontmatter.next.label}
nextURL={frontmatter.next.url}
/>
prevLabel={frontmatter.prev?.label}
prevURL={frontmatter.prev?.url}
nextLabel={frontmatter.next.label}
nextURL={frontmatter.next.url}
/>
<DocsHelp markdownFile={markdownFile} />
</div>
<TableOfContentMarkdown markdown={content} depth={0} />
Expand Down

0 comments on commit 263d407

Please sign in to comment.