First Commit

src/components/general/Logo.tsx

@@ -0,0 +1,22 @@
+type Props = {
+    size?: number;
+};
+export default function Logo({ size }: Props) {
+    const sizeRatio = 50 / 100;
+    const width = size || 50;
+    const height = width * sizeRatio;
+
+    return (
+        <a href="/">
+            <img
+                src="/images/logo-white.svg"
+                alt="Main Logo"
+                width={width}
+                height={height}
+                style={{
+                    minWidth: width + "px",
+                }}
+            />
+        </a>
+    );
+}

src/components/general/markdown-renderer-2.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import { Highlight, themes } from "prism-react-renderer";
+
+const MarkdownRenderer2 = ({ content }: { content: string }) => {
+    return (
+        <ReactMarkdown
+            components={{
+                code({ node, inline, className, children, ...props }: any) {
+                    const { key, ...cleanProps } = props;
+
+                    const match = /language-(\w+)/.exec(className || "");
+                    const language = match ? match[1] : "";
+
+                    if (!inline && match) {
+                        return (
+                            <Highlight
+                                key={key}
+                                theme={themes.vsDark}
+                                code={String(children).replace(/\n$/, "")}
+                                language={language}
+                            >
+                                {({
+                                    className,
+                                    style,
+                                    tokens,
+                                    getLineProps,
+                                    getTokenProps,
+                                }) => (
+                                    <pre
+                                        className={className}
+                                        style={{
+                                            ...style,
+                                            padding: "1.5rem",
+                                            borderRadius: "8px",
+                                            fontSize: "0.9rem",
+                                            overflowX: "auto",
+                                        }}
+                                    >
+                                        {tokens.map((line, i) => (
+                                            <div
+                                                key={i}
+                                                {...getLineProps({
+                                                    line,
+                                                    key: i,
+                                                })}
+                                            >
+                                                {line.map((token, key) => (
+                                                    <span
+                                                        key={key}
+                                                        {...getTokenProps({
+                                                            token,
+                                                            key,
+                                                        })}
+                                                    />
+                                                ))}
+                                            </div>
+                                        ))}
+                                    </pre>
+                                )}
+                            </Highlight>
+                        );
+                    }
+
+                    // Fallback for inline code or code without a language tag
+                    return (
+                        <code key={key} className={className} {...cleanProps}>
+                            {children}
+                        </code>
+                    );
+                },
+            }}
+        >
+            {content}
+        </ReactMarkdown>
+    );
+};
+
+export default MarkdownRenderer2;

src/components/general/markdown-renderer.tsx

@@ -0,0 +1,15 @@
+import sd from "showdown";
+
+const conv = new sd.Converter({});
+
+const MarkdownRenderer = ({ content }: { content: string }) => {
+    const html = conv.makeHtml(content);
+    return (
+        <div
+            className="markdown-rendered"
+            dangerouslySetInnerHTML={{ __html: html }}
+        />
+    );
+};
+
+export default MarkdownRenderer;