Blog

src/components/MarkdownRenderer.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkBreaks from "remark-breaks";
+import remarkMath from "remark-math";
+import rehypeRaw from "rehype-raw";
+import rehypeKatex from "rehype-katex";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { gruvboxDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import "katex/dist/katex.min.css";
+
+type MarkdownRendererProps = {
+  children: string;
+};
+
+export default function MarkdownRenderer({
+  children: markdown,
+}: MarkdownRendererProps) {
+  return (
+    <Markdown
+      remarkPlugins={[remarkGfm, remarkMath, remarkBreaks]}
+      rehypePlugins={[rehypeRaw, rehypeKatex]}
+      components={{
+        code({ node, inline, className, children, ...props }: any) {
+          const match = /language-(\w+)/.exec(className || "");
+          return !inline && match ? (
+            <SyntaxHighlighter
+              style={gruvboxDark}
+              PreTag="div"
+              language={match[1]}
+              {...props}
+            >
+              {String(children).replace(/\n$/, "")}
+            </SyntaxHighlighter>
+          ) : (
+            <code className={className} {...props}>
+              {children}
+            </code>
+          );
+        },
+        ul({ children, ...props }) {
+          return (
+            <ul
+              style={{ listStyleType: "disc", listStylePosition: "inside" }}
+              {...props}
+            >
+              {children}
+            </ul>
+          );
+        },
+        ol({ children, ...props }) {
+          return (
+            <ol
+              style={{ listStyleType: "decimal", listStylePosition: "inside" }}
+              {...props}
+            >
+              {children}
+            </ol>
+          );
+        },
+        li({ children, ...props }) {
+          return (
+            <li style={{ marginBottom: "4px" }} {...props}>
+              {children}
+            </li>
+          );
+        },
+      }}
+    >
+      {markdown}
+    </Markdown>
+  );
+}

src/components/PinnedRepos.tsx

@@ -1,3 +1,5 @@
+import { stringify } from "querystring";
+
 type PinnedRepo = {
   author: string;
   name: string;
@@ -133,24 +135,30 @@ export function Repo({
 }
 
 export default async function PinnedRepos() {
-  const pinned: PinnedRepo[] = await (
-    await fetch("https://pinned.berrysauce.dev/get/kleo-dev")
-  ).json();
+  try {
+    const pinned: PinnedRepo[] = await (
+      await fetch("https://pinned.berrysauce.dev/get/kleo-dev")
+    ).json();
 
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent">
-      {pinned.map((repo, i) => (
-        <Repo
-          key={i}
-          author={repo.author}
-          name={repo.name}
-          description={repo.description}
-          language={repo.language}
-          stars={repo.stars}
-          forks={repo.forks}
-          href={`https://github.com/${repo.author}/${repo.name}`}
-        />
-      ))}
-    </div>
-  );
+    return (
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 bg-transparent">
+        {pinned.map((repo, i) => (
+          <Repo
+            key={i}
+            author={repo.author}
+            name={repo.name}
+            description={repo.description}
+            language={repo.language}
+            stars={repo.stars}
+            forks={repo.forks}
+            href={`https://github.com/${repo.author}/${repo.name}`}
+          />
+        ))}
+      </div>
+    );
+  } catch (e: any) {
+    return (
+      <p>{e.toString()}</p>
+    );
+  }
 }