✨ feat: update components, add new react components, add store script, redesign

Author: retrozinndev

src/components/LanguageSelector.tsx

@@ -0,0 +1,25 @@
+import { i18n, languages } from "../i18n/ui";
+
+type Props = {
+    visible?: boolean;
+    defaultLanguage?: string;
+};
+
+export default function(props: Props) {
+    return <select name="Language" style={{
+        display: props.visible ? "initial" : "none"
+    }} value={props.defaultLanguage} onChange={(e) => {
+        const htmlSelect = e.target as HTMLSelectElement;
+        const splitPath: Array<string> = window.location.pathname.split('/');
+
+        window.location.pathname = `${htmlSelect.value}/${splitPath.splice(
+            2, splitPath.length-1
+        ).join('/')}`;
+    }}> {
+        languages.map((lang, i) => 
+            <option value={lang} key={i}>
+                { i18n[lang as keyof typeof i18n].language }
+            </option>
+        )
+    } </select>
+}

src/components/ProjectCard.astro

@@ -16,7 +16,8 @@ const { icon, developer, title, description, href } = Astro.props;
     <div class="developer">
         <Image class="icon" src={ icon ?? 
                 `https://github.com/${developer}.png?size=72`
-            }  alt="dev profile picture" width={32} height={32} />
+            }  alt="dev profile picture" width={32} height={32} loading={"lazy"}
+             />
 
         <span class="developer-name">{ developer }</span>
     </div>

src/components/ProjectsComponent.astro

@@ -1,48 +1,11 @@
 ---
-import { useTranslations } from "../i18n/utils";
 import ProjectCard, { type Project } from "./ProjectCard.astro";
 
-const tr = useTranslations(Astro.params.lang as never || "en");
-
-const projects: Array<Project> = [
-    {
-        title: "colorshell",
-        developer: "retrozinndev",
-        description: "Super cool desktop shell for Hyprland!",
-        href: "https://github.com/retrozinndev/colorshell"
-    },
-    {
-        title: "retrozinndev.github.io",
-        developer: "retrozinndev",
-        description: "My personal website",
-        href: "https://github.com/retrozinndev/retrozinndev.github.io"
-    },
-    {
-        title: "parceirtoti.github.io",
-        developer: "parceiroti",
-        description: "ParceiroTI's website redesign",
-        href: "https://github.com/parceiroti/parceiroti.github.io"
-    },
-    {
-        title: "UpDateN'Time",
-        developer: "retrozinndev",
-        description: "A Tool that synchronizes your date and time with the internet",
-        href: "https://github.com/retrozinndev/UpDateNTime"
-    },
-    {
-        title: "The Traveler",
-        developer: "notestudios",
-        description: "A two-dimensional shooter game",
-        href: "https://github.com/notestudios/TheTraveler"
-    },
-    {
-        title: "Space Shooter",
-        developer: "notestudios",
-        description: "Shoot meteors in Space!",
-        href: "https://github.com/notestudios/SpaceShooter"
-    }
-];
+interface Props {
+    projects: Array<Project>;
+}
 
+const { projects } = Astro.props;
 ---
 
 <div class="projects"> {

src/components/ToggleThemeButton.tsx

@@ -0,0 +1,32 @@
+import { useState, type ReactElement } from "react"
+import { getStoredTheme, getTheme, toggleTheme } from "../scripts/theme";
+import { RiMoonLine, RiSunLine } from "react-icons/ri";
+import { IconContext } from "react-icons";
+
+export default function(props: { initialTheme?: "dark" | "light" }): ReactElement {
+    const [stateTheme, setStateTheme] = useState(props.initialTheme ?? getStoredTheme()) as [
+        ("dark" | "light"), React.Dispatch<React.SetStateAction<"dark" | "light">>
+    ];
+
+    return (<div className="theme-toggle" onClick={() => {
+        toggleTheme();
+        setStateTheme(getTheme() as ("dark" | "light"));
+    }} onLoad={() => 
+        getStoredTheme() !== stateTheme &&
+            setStateTheme(getStoredTheme() as ("dark" | "light"))
+    } style={{
+        cursor: "pointer"
+    }}> 
+        <IconContext.Provider value={{
+            className: "icon",
+            size: "16",
+            style: {
+                marginTop: 2
+            }
+        }}> {
+            stateTheme === "dark" ? 
+                <RiMoonLine />
+            : <RiSunLine />
+        } </IconContext.Provider>
+    </div>);
+}

src/i18n/utils.ts

@@ -2,14 +2,12 @@
 import type { i18nStruct } from "./struct.ts";
 import { languages, i18n, defaultLang } from "./ui.ts";
 
-export function getLanguageFromURL(url: (URL|string)): (string) {
-    const splittedURL: string[] = (typeof url === "string") ? 
-        url.split('/')
-    : url.pathname.split("/");
-
-    return splittedURL[1].length !== 2 ?
-        defaultLang
-    : splittedURL[1];
+export function getLanguageFromURL(url: URL): (string|undefined) {
+    const splitPath = url.pathname.split('/', 2);
+
+    return (splitPath[1] ?? false) && splitPath[1].length <= 5 ?
+        splitPath[1]
+    : undefined;
 }
 
 export function useTranslations(lang: string): Function {

src/scripts/repositories.ts

@@ -0,0 +1,26 @@
+import { atom, type PreinitializedWritableAtom } from "nanostores";
+
+export type AtomStoreType<AtomType> = PreinitializedWritableAtom<AtomType> & object & {
+    key: string;
+};
+
+const stores: Record<string, AtomStoreType<any>> = {} as const;
+export function addStore<StoreType = any>(key: string, initialValue: StoreType): AtomStoreType<StoreType> {
+    if(Object.hasOwn(stores, key)) {
+        console.warn(`Stores: there's already a key named \`${key}\``);
+        return stores[key as keyof typeof stores];
+    }
+
+    stores[key] = atom(initialValue);
+    return stores[key];
+}
+
+export function removeStore(key: string): boolean {
+    if(Object.hasOwn(stores, key)) {
+        stores[key as keyof typeof stores].off();
+        delete stores[key as keyof typeof stores];
+        return true;
+    }
+
+    return false;
+}

src/scripts/stores.ts

@@ -11,7 +11,10 @@ export function getThemes(): Array<string> {
 }
 
 export function getStoredTheme(): (string|undefined) {
-    return localStorage.getItem("theme")?.toString();
+    if(typeof localStorage !== "undefined")
+        return localStorage.getItem("theme")?.toString() ?? getThemes()[0];
+
+    return getThemes()[0];
 }
 
 export function toggleTheme(): void {

src/scripts/theme.ts

@@ -10,6 +10,6 @@ $link-color: #2f82c2;
 $emphasis-color: #2c73a5;
 
 // General
-$accent-color: #e3cf62;
 $accent-color-dark: #a89b54;
+$accent-color: #e3cf62;
 

src/styles/_colors.scss

@@ -1,7 +1 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
-@import url("https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@latest/css/nerd-fonts-generated.min.css");
-
-@font-face {
-  font-family: "NerdFontsSymbols Nerd Font";
-  src: url("https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@latest/patched-fonts/NerdFontsSymbolsOnly/SymbolsNerdFontMono-Regular.ttf");
-}