✨ redesign website

astro.config.mjs

@@ -1,7 +1,12 @@
 import { defineConfig } from 'astro/config';
 
+import react from "@astrojs/react";
+
 // https://astro.build/config
 export default defineConfig({
     site: "https://retrozinndev.github.io",
-    base: "."
+    base: ".",
+    integrations: [
+        react()
+    ],
 });

package.json

@@ -11,7 +11,15 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/react": "^4.2.7",
+    "@octokit/rest": "github:octokit/rest.js",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
     "astro": "^5.1.7",
+    "nanostores": "^1.0.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
     "typescript": "^5.4.5"
   },
   "devDependencies": {

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/LinkButton.astro

@@ -1,15 +1,26 @@
 ---
+import { FaArrowUpRightFromSquare } from 'react-icons/fa6';
+
 interface Props {
     href: string;
     external?: boolean;
+    showIcon?: boolean;
+    title?: string;
+    spacing?: boolean;
 }
 
-const { href, external } = Astro.props;
+const { href, external, title, showIcon = true, spacing = true } = Astro.props;
 ---
 
-<a class="link-button" href={ href }>
-    <slot /> <i style=`display: ${external ? "initial" : "none"}` 
-                class="nf nf-oct-arrow_up_right" />
+<a class=`link-button ${spacing ? "space" : ""}` {href} 
+    target={external ? "_blank" : "_self"} {title}>
+
+    <slot />
+    <FaArrowUpRightFromSquare className="external-icon" style={{
+        display: showIcon && external ? "initial" : "none",
+        marginLeft: 6,
+        marginTop: 3
+    }} />
 </a>
 
 <style lang="scss">
@@ -18,29 +29,40 @@ const { href, external } = Astro.props;
 
     a {
         display: inline-flex;
-        margin-inline: 8px;
-        font-size: normal;
+        font-size: 1.04em;
         font-weight: 600;
-        width: fit-content;
-        box-sizing: content-box;
         color: inherit;
 
-        border: solid 0.032em colors.$accent-color;
-        padding: 5px 8px;
+        box-shadow: inset 0 0 0 1px colors.$accent-color-dark;
         border-radius: 12px;
         text-decoration: none;
-        -webkit-tap-highlight-color: transparent;
         transition: 150ms linear;
 
-        &:hover {
-            color: white;
-            background-color: colors.$accent-color-dark;
+        &.space {
+            padding: 8px 10px;
+            margin-inline: 8px;
+
+            &:hover {
+                color: white;
+                border-width: 2px;
+                background-color: colors.$accent-color-dark;
+
+                body.light & {
+                    box-shadow: inset 0 0 0 1px colors.$accent-color-dark;
+                    background-color: colors.$accent-color-dark;
+                }
+            }
         }
-    }
 
-    body.light a:hover {
-        color: black;
-        background-color: colors.$accent-color;
+        &:not(.space) {
+            text-decoration: underline;
+            text-decoration-thickness: 1px;
+            box-shadow: none;
+
+            &:hover {
+                text-decoration-color: colors.$accent-color-dark;
+            }
+        }
     }
 </style>