Updates

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
             )}
         >

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
-    );
-}

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(
+            localStorage.setItem(defSbsName, "true");
-                LocalStorageDict["MarkdownEditorDefaultSideBySide"],
-                "true"
-            );
         } else {
-            localStorage.removeItem(
+            localStorage.removeItem(defSbsName);
-                LocalStorageDict["MarkdownEditorDefaultSideBySide"]
-            );
         }
 
         if (preview) {
-            localStorage.setItem(
+            localStorage.setItem(defPrevName, "true");
-                LocalStorageDict["MarkdownEditorDefaultPreview"],
-                "true"
-            );
         } else {
-            localStorage.removeItem(
+            localStorage.removeItem(defPrevName);
-                LocalStorageDict["MarkdownEditorDefaultPreview"]
-            );
         }
     }, [sideBySide, preview, ready]);
 
     React.useEffect(() => {
-        if (
+        if (localStorage.getItem(defPrevName)) {
-            localStorage.getItem(
-                LocalStorageDict["MarkdownEditorDefaultPreview"]
-            )
-        ) {
             setPreview(true);
         }
-        if (
+        if (!localStorage.getItem(defSbsName)) {
-            !localStorage.getItem(
-                LocalStorageDict["MarkdownEditorDefaultSideBySide"]
-            )
-        ) {
             setSideBySide(false);
         }
 

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" />
                         }

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

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">
+        <a href={link.url} className="text-white hover:text-gray-300">
-            {link.name}
+            {link.title}
         </a>
     );
 }

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",
+                "fixed top-0 w-full h-full overflow-y-auto",
-                "z-[100] p-10",
+                "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) => {
+                    <LinkList
-                        return (
+                        links={HeaderLinks}
-                            <React.Fragment key={index}>
+                        className="flex-col items-stretch"
-                                <HeaderLink key={index} link={link} />
+                    />
-                                {index < HeaderLinks.length - 1 && <Divider />}
-                            </React.Fragment>
-                        );
-                    })}
                 </Stack>
-                <Divider />
+                <Divider dashed className="border-[2px] my-4" />
-                <Row className="items-center w-full py-6 mt-auto gap-10 mt-auto">
+                <Row className="items-center w-full py-6 gap-10 mt-auto">
                     {SocialLinks.map((link, index) => {
                         return <SocialLink key={index} link={link} />;
                     })}

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) => {
+                <LinkList links={HeaderLinks} />
-                    return <HeaderLink key={index} link={link} />;
-                })}
             </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>

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 & {};

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",

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={{

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;
+}