Skip to content

Commit 8f099f4

Browse files
DhairyaMajmudarDhairyaMajmudar
authored
Feat: Refactoring toc styles (#796)
* refactoring toc * updating es * adding heading * adding heading
1 parent 16369d3 commit 8f099f4

File tree

3 files changed

+144
-20
lines changed

3 files changed

+144
-20
lines changed

‎components/StyledMarkdown.tsx

+41-19
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useContext } from 'react';
1+
import React, { useContext, useEffect, useState } from 'react';
22
import Markdown from 'markdown-to-jsx';
33
import Link from 'next/link';
44
import slugifyMarkdownHeadline from '~/lib/slugifyMarkdownHeadline';
@@ -8,6 +8,7 @@ import Highlight from 'react-syntax-highlighter';
88
import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
99
import Code from '~/components/Code';
1010
import { FullMarkdownContext } from '~/context';
11+
import Image from 'next/image';
1112

1213
import {
1314
Headline1,
@@ -504,12 +505,24 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
504505
const fullMarkdown = useContext(FullMarkdownContext);
505506
if (!fullMarkdown) return null;
506507
return (
507-
<div className='mt-3 bg-slate-50 dark:bg-slate-900 pt-6 pb-3 pr-3 border-dotted border-l-blue-400 border-l-[3px]'>
508-
<TableOfContentMarkdown
509-
markdown={fullMarkdown}
510-
depth={depth}
511-
/>
512-
</div>
508+
<>
509+
<div className='flex flex-row gap-2 text-slate-600 dark:text-slate-300 text-h5 max-sm:text-[1rem] items-center'>
510+
<Image
511+
src={'/icons/toc-menu.svg'}
512+
height={15}
513+
width={15}
514+
alt='menu-icon'
515+
className='max-sm:w-3 max-sm:h-3'
516+
/>
517+
<span>Table of Contents</span>
518+
</div>
519+
<div className='mt-2 bg-slate-50 dark:bg-slate-900 pt-6 pb-3 pr-3 border border-r-0 border-y-0 border-l-blue-400/40 border-l-[2.5px]'>
520+
<TableOfContentMarkdown
521+
markdown={fullMarkdown}
522+
depth={depth}
523+
/>
524+
</div>
525+
</>
513526
);
514527
},
515528
},
@@ -541,7 +554,7 @@ export function TableOfContentMarkdown({
541554
href={`#${slug}`}
542555
className='block cursor-pointer mb-3 max-sm:text-sm text-slate-600 dark:text-slate-300 leading-4 ml-[-0.40rem] font-medium'
543556
>
544-
<span className='mr-1 text-blue-400 text-[1.5em]'>
557+
<span className='mr-1 text-blue-400/90 text-[1em] flex justify-center items-center'>
545558
&#9679;
546559
</span>
547560
{children}
@@ -570,12 +583,22 @@ export function TableOfContentMarkdown({
570583
? {
571584
component: ({ children }) => {
572585
const slug = slugifyMarkdownHeadline(children);
586+
const [isChrome, setIsChrome] = useState(false);
587+
588+
useEffect(() => {
589+
const chromeCheck =
590+
/Chrome/.test(navigator.userAgent) &&
591+
/Google Inc/.test(navigator.vendor);
592+
setIsChrome(chromeCheck);
593+
}, []);
594+
573595
return (
596+
// chromeClass
574597
<a
575598
href={`#${slug}`}
576-
className='block cursor-pointer mb-3 max-sm:text-sm text-slate-600 dark:text-slate-300 leading-4 -ml-[9px] max-sm:-ml-[7px] font-medium'
599+
className={`block cursor-pointer mb-3 max-sm:text-sm text-slate-600 dark:text-slate-300 leading-4 ] max-sm:-ml-[6px] font-medium ${isChrome ? '-ml-[4.8px]' : '-ml-[6.5px]'}`}
577600
>
578-
<span className='mr-1 text-blue-400 text-[1em]'>
601+
<span className='mr-1 text-blue-400 text-[0.7em]'>
579602
&#9679;
580603
</span>
581604
{children}
@@ -592,12 +615,12 @@ export function TableOfContentMarkdown({
592615
return (
593616
<a
594617
href={`#${slug}`}
595-
className='flex flex-row items-center cursor-pointer mb-3 max-sm:text-sm text-slate-600 dark:text-slate-300 leading-4 ml-[-0.15rem]'
618+
className='flex flex-row items-center cursor-pointer mb-3 max-sm:text-sm text-slate-600 dark:text-slate-300 leading-4 ml-[-0.25rem]'
596619
>
597-
<span className='text-blue-400 text-[0.28em] ml-1 max-sm:w-[18px]'>
598-
&#9679; &#9679; &#9679; &#9679;
620+
<span className='text-blue-400/40 font-extrabold text-[0.8em] max-sm:text-[1.2em] ml-1'>
621+
&mdash;&mdash;
599622
</span>
600-
<span className='mr-1 text-blue-400 text-[0.75em]'>
623+
<span className='mr-1 text-blue-400/90 text-[0.7em] flex justify-center items-center'>
601624
&#9679;
602625
</span>
603626

@@ -615,13 +638,12 @@ export function TableOfContentMarkdown({
615638
return (
616639
<a
617640
href={`#${slug}`}
618-
className='flex flex-row items-center cursor-pointer mb-3 max-sm:text-sm text-slate-600 dark:text-slate-300 leading-4 ml-[-0.15rem]'
641+
className='flex flex-row items-center cursor-pointer mb-3 max-sm:text-sm text-slate-600 dark:text-slate-300 leading-4 ml-[-0.25rem] '
619642
>
620-
<span className='text-blue-400 text-[0.28em] ml-1 max-sm:w-[48px]'>
621-
&#9679; &#9679; &#9679; &#9679; &#9679; &#9679;
622-
&#9679; &#9679; &#9679; &#9679; &#9679;
643+
<span className='text-blue-400/40 font-extrabold text-[0.8em] ml-1 max-sm:text-[1.2em]'>
644+
&mdash;&mdash;&mdash;&mdash;
623645
</span>
624-
<span className='mr-1 text-blue-400 text-[0.75em]'>
646+
<span className='mr-1 text-blue-400/90 text-[0.7em] flex justify-center items-center'>
625647
&#9679;
626648
</span>
627649

‎public/icons/toc-menu.svg

+102
Loading

‎tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"compilerOptions": {
3-
"target": "es2015",
3+
"target": "ES2018",
44
"lib": ["dom", "dom.iterable", "esnext"],
55
"allowJs": true,
66
"skipLibCheck": true,

0 commit comments

Comments
 (0)