Updates

2025-07-20 10:56:17 +01:00 · 2025-07-20 10:56:17 +01:00 · 668b596402
commit 668b596402
parent b6a5982f02
13 changed files with 59 additions and 100 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/lib/elements/LinkList.tsx
+++ b/components/lib/elements/LinkList.tsx
@ -69,6 +69,7 @@ export default function LinkList({
            {...props}
            className={twMerge(
                "flex flex-row items-center gap-1",
+                "twui-link-list",
                props.className
            )}
        >
--- a/components/lib/mdx/markdown/MarkdownEditorDeprecated.tsx
+++ b/components/lib/mdx/markdown/MarkdownEditorDeprecated.tsx
@ -1,28 +0,0 @@
-import MDEditor from "@uiw/react-md-editor";
-import rehypeSanitize from "rehype-sanitize";
-import React from "react";
-import remarkGfm from "remark-gfm";
-import rehypePrismPlus from "rehype-prism-plus";
-import ReactDOM from "react-dom";
-
-export default function MarkdownEditor() {
-    const [value, setValue] = React.useState<any>(
-        `**Hello world!!!** <IFRAME SRC=\"javascript:javascript:alert(window.origin);\"></IFRAME>`
-    );
-
-    React.useEffect(() => {
-        console.log("value", value);
-    }, [value]);
-
-    return ReactDOM.createPortal(
-        <MDEditor
-            value={value}
-            onChange={setValue}
-            previewOptions={{
-                rehypePlugins: [rehypeSanitize, rehypePrismPlus],
-                remarkPlugins: [remarkGfm],
-            }}
-        />,
-        document.getElementById("markdown-modal-root") as HTMLElement
-    );
-}
--- a/components/lib/mdx/markdown/MarkdownEditorSelectorButtons.tsx
+++ b/components/lib/mdx/markdown/MarkdownEditorSelectorButtons.tsx
@ -1,7 +1,6 @@
 import React from "react";
 import Button from "../../layout/Button";
 import Border from "../../elements/Border";
-import { LocalStorageDict } from "@/package-shared/dict/local-storage-dict";

 type Props = {
    preview: boolean;
@ -18,45 +17,30 @@ export default function MarkdownEditorSelectorButtons({
 }: Props) {
    const [ready, setReady] = React.useState(false);

+    const defSbsName = "TWUIMarkdownEditorDefaultSideBySide";
+    const defPrevName = "TWUIMarkdownEditorDefaultPreview";
+
    React.useEffect(() => {
        if (!ready) return;

        if (sideBySide) {
-            localStorage.setItem(
-                LocalStorageDict["MarkdownEditorDefaultSideBySide"],
-                "true"
-            );
+            localStorage.setItem(defSbsName, "true");
        } else {
-            localStorage.removeItem(
-                LocalStorageDict["MarkdownEditorDefaultSideBySide"]
-            );
+            localStorage.removeItem(defSbsName);
        }

        if (preview) {
-            localStorage.setItem(
-                LocalStorageDict["MarkdownEditorDefaultPreview"],
-                "true"
-            );
+            localStorage.setItem(defPrevName, "true");
        } else {
-            localStorage.removeItem(
-                LocalStorageDict["MarkdownEditorDefaultPreview"]
-            );
+            localStorage.removeItem(defPrevName);
        }
    }, [sideBySide, preview, ready]);

    React.useEffect(() => {
-        if (
-            localStorage.getItem(
-                LocalStorageDict["MarkdownEditorDefaultPreview"]
-            )
-        ) {
+        if (localStorage.getItem(defPrevName)) {
            setPreview(true);
        }
-        if (
-            !localStorage.getItem(
-                LocalStorageDict["MarkdownEditorDefaultSideBySide"]
-            )
-        ) {
+        if (!localStorage.getItem(defSbsName)) {
            setSideBySide(false);
        }

--- a/components/pages/Home/index.tsx
+++ b/components/pages/Home/index.tsx
@ -17,6 +17,7 @@ export default function Main() {
                </H1>
                <Row className="items-stretch flex-col md:flex-row w-full md:w-auto">
                    <Button
+                        title="Contact Me"
                        beforeIcon={
                            <Contact size={17} className="font-normal" />
                        }
--- a/layouts/main/(data)/links.tsx
+++ b/layouts/main/(data)/links.tsx
@ -1,37 +1,32 @@
+import { TWUI_LINK_LIST_LINK_OBJECT } from "@/components/lib/elements/LinkList";
 import { GitBranch, Github, Linkedin, Mail, Users } from "lucide-react";
 import { ReactNode } from "react";

-export type HeaderLinkType = {
-    name: string;
-    href: string;
-    current?: boolean;
-};
-
-export const HeaderLinks: HeaderLinkType[] = [
+export const HeaderLinks: TWUI_LINK_LIST_LINK_OBJECT[] = [
    {
-        name: "Home",
-        href: "/",
-        current: true,
+        title: "Home",
+        url: "/",
+        strict: true,
    },
    {
-        name: "About",
-        href: "/about",
+        title: "About",
+        url: "/about",
    },
    {
-        name: "Skills",
-        href: "/skills",
+        title: "Skills",
+        url: "/skills",
    },
    {
-        name: "Work",
-        href: "/work",
+        title: "Work",
+        url: "/work",
    },
    {
-        name: "Blog",
-        href: "/blog",
+        title: "Blog",
+        url: "/blog",
    },
    {
-        name: "Contact",
-        href: "/contact",
+        title: "Contact",
+        url: "/contact",
    },
 ];

--- a/layouts/main/(partials)/HeaderLink.tsx
+++ b/layouts/main/(partials)/HeaderLink.tsx
@ -1,13 +1,13 @@
-import { HeaderLinkType } from "../(data)/links";
+import { TWUI_LINK_LIST_LINK_OBJECT } from "@/components/lib/elements/LinkList";

 type Props = {
-    link: HeaderLinkType;
+    link: TWUI_LINK_LIST_LINK_OBJECT;
 };

 export default function HeaderLink({ link }: Props) {
    return (
-        <a href={link.href} className="text-white hover:text-gray-300">
-            {link.name}
+        <a href={link.url} className="text-white hover:text-gray-300">
+            {link.title}
        </a>
    );
 }
--- a/layouts/main/(sections)/MobileMenu.tsx
+++ b/layouts/main/(sections)/MobileMenu.tsx
@ -2,13 +2,13 @@ import Logo from "@/components/general/Logo";
 import Stack from "@/components/lib/layout/Stack";
 import { twMerge } from "tailwind-merge";
 import { HeaderLinks, SocialLinks } from "../(data)/links";
-import HeaderLink from "../(partials)/HeaderLink";
 import React from "react";
 import Divider from "@/components/lib/layout/Divider";
 import Button from "@/components/lib/layout/Button";
 import { X } from "lucide-react";
 import SocialLink from "../(partials)/SocialLink";
 import Row from "@/components/lib/layout/Row";
+import LinkList from "@/components/lib/elements/LinkList";

 type Props = {
    menuOpen: boolean;
@ -19,12 +19,13 @@ export default function MobileMenu({ menuOpen, setMenuOpen }: Props) {
    return (
        <div
            className={twMerge(
-                "fixed top-0 bg-[var(--bg-color)] w-full h-full overflow-y-auto",
-                "z-[100] p-10",
+                "fixed top-0 w-full h-full overflow-y-auto",
+                "z-[100] p-10 bg-background dark:bg-background-dark",
                menuOpen ? "right-0" : "right-[100vw]"
            )}
        >
            <Button
+                title="Close Mobile Menu"
                variant="ghost"
                className="absolute top-10 right-10"
                onClick={() => setMenuOpen(false)}
@ -33,19 +34,15 @@ export default function MobileMenu({ menuOpen, setMenuOpen }: Props) {
            </Button>
            <Stack className="w-full h-full">
                <Logo size={40} />
-                <Divider />
+                <Divider dashed className="border-[2px] mt-4 mb-2" />
                <Stack className="w-full items-stretch">
-                    {HeaderLinks.map((link, index) => {
-                        return (
-                            <React.Fragment key={index}>
-                                <HeaderLink key={index} link={link} />
-                                {index < HeaderLinks.length - 1 && <Divider />}
-                            </React.Fragment>
-                        );
-                    })}
+                    <LinkList
+                        links={HeaderLinks}
+                        className="flex-col items-stretch"
+                    />
                </Stack>
-                <Divider />
-                <Row className="items-center w-full py-6 mt-auto gap-10 mt-auto">
+                <Divider dashed className="border-[2px] my-4" />
+                <Row className="items-center w-full py-6 gap-10 mt-auto">
                    {SocialLinks.map((link, index) => {
                        return <SocialLink key={index} link={link} />;
                    })}
--- a/layouts/main/Header.tsx
+++ b/layouts/main/Header.tsx
@ -1,11 +1,11 @@
 import { twMerge } from "tailwind-merge";
 import { HeaderLinks } from "./(data)/links";
-import HeaderLink from "./(partials)/HeaderLink";
 import Row from "@/components/lib/layout/Row";
 import Logo from "@/components/general/Logo";
 import { Menu } from "lucide-react";
 import Button from "@/components/lib/layout/Button";
 import React from "react";
+import LinkList from "@/components/lib/elements/LinkList";

 type Props = {
    menuOpen: boolean;
@ -22,13 +22,15 @@ export default function Header({ menuOpen, setMenuOpen }: Props) {
            )}
        >
            <Row className="gap-6 ml-auto hidden md:flex">
-                {HeaderLinks.map((link, index) => {
-                    return <HeaderLink key={index} link={link} />;
-                })}
+                <LinkList links={HeaderLinks} />
            </Row>
            <Row className="flex md:hidden w-full justify-between">
                <Logo size={25} />
-                <Button variant="ghost" onClick={() => setMenuOpen(!menuOpen)}>
+                <Button
+                    title="Mobile Menu"
+                    variant="ghost"
+                    onClick={() => setMenuOpen(!menuOpen)}
+                >
                    <Menu />
                </Button>
            </Row>
--- a/layouts/main/index.tsx
+++ b/layouts/main/index.tsx
@ -1,12 +1,8 @@
-import Main from "@/components/lib/layout/Main";
 import React, { PropsWithChildren } from "react";
 import Aside from "./Aside";
 import Header from "./Header";
 import Footer from "./Footer";
 import { twMerge } from "tailwind-merge";
-import Stack from "@/components/lib/layout/Stack";
-import { HeaderLinks } from "./(data)/links";
-import HeaderLink from "./(partials)/HeaderLink";
 import MobileMenu from "./(sections)/MobileMenu";

 type Props = PropsWithChildren & {};
--- a/package.json
+++ b/package.json
@ -13,6 +13,7 @@
        "@moduletrace/datasquirel": "^5.1.0",
        "@moduletrace/twui": "file:./components/lib",
        "gray-matter": "^4.0.3",
+        "html-to-react": "^1.7.0",
        "lodash": "^4.17.21",
        "lucide-react": "^0.462.0",
        "next": "15.0.3",
--- a/pages/404.tsx
+++ b/pages/404.tsx
@ -26,12 +26,14 @@ export default function Home() {
                            <Span>Page Not Found!</Span>
                            <Row className="gap-4 max-w-[400px] w-[400px]">
                                <Button
+                                    title="Go Back"
                                    onClick={() => window.history.back()}
                                    className="grow"
                                >
                                    Go Back
                                </Button>
                                <Button
+                                    title="Home Page"
                                    href="/"
                                    variant="outlined"
                                    linkProps={{
--- a/styles/globals.css
+++ b/styles/globals.css
@ -58,3 +58,11 @@
 .twui-card-link {
    @apply p-0 w-full border-none;
 }
+
+.twui-a {
+    @apply !text-foreground-light/70 dark:!text-foreground-dark/70 border-none;
+}
+
+.twui-a.active {
+    @apply !text-foreground-light dark:!text-foreground-dark font-bold;
+}