dep ver bump; clean-up; minor updates

Signed-off-by: Paul W. <lambdapaul@protonmail.com>

pages/notes/[note].tsx

@@ -1,10 +1,15 @@
 import ReactMarkdown from 'react-markdown';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { monokaiSublime as hlTheme } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import { PluggableList } from 'unified';
+
 import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+
+import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
-import remarkDirective from 'remark-directive';
-import remarkGithubAdmonitionsToDirectives from 'remark-github-admonitions-to-directives';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeHighlightCodeLines, { type HighlightLinesOptions } from 'rehype-highlight-code-lines';
 
 import Layout from '../../components/layout';
 import readMarkdown from '../../lib/read-markdown';
@@ -12,86 +17,76 @@ import { toLocaleString } from '../../lib/date';
 import NotesInfo from '../../public/notes.json';
 
 import style from '../../styles/note.module.css';
+import 'highlight.js/styles/monokai-sublime.css';
+import 'katex/dist/katex.min.css';
 
 interface Note {
-    title: string,
-    mtime: string,
-    content?: string,
+	title: string,
+	mtime: string,
+	content?: string,
 }
 
 interface Notes {
-    [slug: string]: Note;
+	[slug: string]: Note;
 }
 
 function Markdown({ content }: any) {
-    return <ReactMarkdown
-        remarkPlugins={[remarkGithubAdmonitionsToDirectives, remarkDirective, remarkGfm]}
-        rehypePlugins={[rehypeRaw]}
-        components={{
-            code({ node, className, children, ...props }) {
-                const match = /language-(\w+)/.exec(className || '')
-                return match
-                    ? (
-                        <SyntaxHighlighter
-                            showLineNumbers={true}
-                            language={match[1]}
-                            //@ts-ignore
-                            style={hlTheme}
-                            PreTag='div'
-                            codeTagProps={{ style: { display: 'block' } }}
-                            customStyle={{ padding: '0', borderRadius: '1rem' }}
-                            {...props}
-                        >{String(children).replace(/\n$/, '')}</SyntaxHighlighter>
-                    )
-                    : <code className={className} {...props}>
-                        {children}
-                    </code>
-            }
-        }}
-    >{content}</ReactMarkdown>
+	const remarkPlugins: PluggableList = [
+		remarkGfm,
+		remarkMath,
+	];
+	const rehypePlugins: PluggableList = [
+		rehypeSlug,
+		rehypeAutolinkHeadings,
+		rehypeRaw,
+		rehypeHighlight,
+		rehypeKatex,
+	];
+	return <ReactMarkdown remarkPlugins={remarkPlugins} rehypePlugins={rehypePlugins}>
+		{content}
+	</ReactMarkdown>
 }
 
-function Note({ note }: { note: Note } ) {
-    return (<>
-        <Layout >
-            <span className={style['last-updated']}>
-                Last updated: {toLocaleString(note.mtime)}
-            </span>
-            <section className='block'>
-                <Markdown content={note.content} />
-            </section>
-        </Layout>
-    </>
-    );
+function Note({ note }: { note: Note }) {
+	return (<>
+		<Layout >
+			<span className={style['last-updated']}>
+				Last updated: {toLocaleString(note.mtime)}
+			</span>
+			<section className='block'>
+				<Markdown content={note.content} />
+			</section>
+		</Layout>
+	</>
+	);
 }
 
 export async function getStaticProps({ params }: { params: { note: string } }) {
-    const note: string = params.note;
-    const notesInfo: Notes = NotesInfo;
-    const noteInfo: Note = notesInfo[note];
+	const note: string = params.note;
+	const notesInfo: Notes = NotesInfo;
+	const noteInfo: Note = notesInfo[note];
 
-    return {
-        props: {
-            note: {
-                ...noteInfo,
-                content: await readMarkdown('notes', note, true)
-            }
-        }
-    }
+	return {
+		props: {
+			note: {
+				...noteInfo,
+				content: await readMarkdown('notes', note, true)
+			}
+		}
+	}
 }
 
 export async function getStaticPaths() {
-    return {
-        paths: Object.keys(NotesInfo).map((note: string) => {
-            return {
-                params: {
-                    note
-                }
-            }
-        }),
-        fallback: false
-    };
+	return {
+		paths: Object.keys(NotesInfo).map((note: string) => {
+			return {
+				params: {
+					note
+				}
+			}
+		}),
+		fallback: false
+	};
 }
 
-
 export default Note;

pages/notes/index.tsx

@@ -6,52 +6,52 @@ import { toRelativeDate } from '../../lib/date';
 import NotesInfo from '../../public/notes.json';
 
 function NoteEntry({ note }: { note: { title: string, mtime: string, slug: string } }) {
-    return (
-        <tr>
-            <td style={{ flex: '1 0 50%' }}>
-                <Link href={`/notes/${note.slug}`}>
-                    {note.title}
-                </Link>
-            </td>
-            <td style={{ fontStyle: 'italic' }}>
-                {note.mtime && toRelativeDate(note.mtime)}
-            </td>
-        </tr>
-    );
+	return (
+		<tr>
+			<td style={{ flex: '1 0 50%' }}>
+				<Link href={`/notes/${note.slug}`}>
+					{note.title}
+				</Link>
+			</td>
+			<td style={{ fontStyle: 'italic' }}>
+				{note.mtime && toRelativeDate(note.mtime)}
+			</td>
+		</tr>
+	);
 }
 
 function NotesPage() {
-    const notes = Object.entries(NotesInfo)
-        .map(([slug, note]) => {
-            return {
-                slug,
-                title: note.title,
-                mtime: new Date(note.mtime)
-            }
-        })
-        .sort(
-            (a, b) => {
-                return b.mtime.getTime() - a.mtime.getTime();
-            }
-        );
+	const notes = Object.entries(NotesInfo)
+		.map(([slug, note]) => {
+			return {
+				slug,
+				title: note.title,
+				mtime: new Date(note.mtime)
+			}
+		})
+		.sort(
+			(a, b) => {
+				return b.mtime.getTime() - a.mtime.getTime();
+			}
+		);
 
-    return (
-        <Layout>
-            {
-                !notes || notes.length === 0
-                && <>No notes found</>
-                || <table>
-                    <tbody>
-                        {notes.map(
-                            (note: any) => {
-                                return (<NoteEntry note={note} key={note.slug} />);
-                            }
-                        )}
-                    </tbody>
-                </table>
-            }
-        </Layout>
-    )
+	return (
+		<Layout>
+			{
+				!notes || notes.length === 0
+				&& <>No notes found</>
+				|| <table>
+					<tbody>
+						{notes.map(
+							(note: any) => {
+								return (<NoteEntry note={note} key={note.slug} />);
+							}
+						)}
+					</tbody>
+				</table>
+			}
+		</Layout>
+	)
 }