update

.gitignore

@@ -15,4 +15,11 @@ pnpm-debug.log*
 .env.production
 
 # macOS-specific files
-.DS_Store
+.DS_Store
+
+# translates (not needed)
+/src/pages/ru/*
+/src/pages/en/*
+/src/pages/es/*
+/src/pages/fr/*
+/src/pages/jp/*

astro-i18next.config.mjs

@@ -1,5 +1,4 @@
 /** @type {import('astro-i18next').AstroI18nextConfig} */
 export default {
-    defaultLocale: "en",
     locales: ["en", "jp"],
 };

astro.config.mjs

@@ -1,29 +1,28 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig, envField } from 'astro/config';
 import node from "@astrojs/node";
 import partytown from "@astrojs/partytown";
 import sitemap from "@astrojs/sitemap";
 import robotsTxt from "astro-robots-txt";
 import vue from "@astrojs/vue";
 import matomo from "astro-matomo";
-
 import astroI18next from "astro-i18next";
 
 export default defineConfig({
+  // Use Server-Side Rendering
   output: "server",
   adapter: node({
     mode: "standalone"
   }),
+  // Security
   security: {
     checkOrigin: true
   },
+  // Server Options
   server: {
     port: 6003,
     host: true
   },
-  devToolbar: {enabled: false},
+  // Integrations and Plugins
-  experimental: {
-    actions: true,
-  },
   integrations: [
     astroI18next(),
     partytown(),
@@ -41,5 +40,11 @@ export default defineConfig({
       disableCookies: true,
       debug: false,
     })
-  ]
+  ],
+  // Others
+  devToolbar: {enabled: false},
+  experimental: {
+    actions: true,
+    directRenderScript: true,
+  },
 });

package.json

@@ -22,6 +22,7 @@
     "@astrojs/react": "^3.6.0",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/vue": "^4.5.0",
+    "@fontsource-variable/roboto-flex": "^5.0.15",
     "@iconoir/vue": "^7.7.0",
     "@innologica/vue-dropdown-menu": "^0.1.4",
     "@shoelace-style/shoelace": "^2.15.1",

src/components/Dropdown.astro

@@ -44,27 +44,30 @@ if (Astro.url.pathname.startsWith('/watch')) {
   <a href=""><List/> {t('dropdown.Instances')}</a>
 
   <p>{t('dropdown.Hub')}</p>
-  <a href=""><ViewGrid/> {t('dropdown.Apps')}</a>
+  <a data-astro-prefetch href=""><ViewGrid/> {t('dropdown.Apps')}</a>
-  <a href=""><Arcade/> {t('dropdown.Games')}</a>
+  <a data-astro-prefetch href=""><Arcade/> {t('dropdown.Games')}</a>
 
-  <p>{t('dropdown.Openin')}</p>
+  <!-- Only show this if the end-user is watching a video -->
-  <a href=""><CircleSpark/> {t('dropdown.LiteMode')}</a>
+  {WatchPage ?
-  <a href=""><Youtube/> {t('dropdown.YouTube')}</a>
+    <p>{t('dropdown.Openin')}</p>
-  <a href=""><OpenNewWindow/> {t('dropdown.Invidious')}</a>
+    <a href=""><CircleSpark/> {t('dropdown.LiteMode')}</a>
-  <a href=""><OpenNewWindow/> {t('dropdown.Pipe')}</a>
+    <a href=""><Youtube/> {t('dropdown.YouTube')}</a>
+    <a href=""><OpenNewWindow/> {t('dropdown.Invidious')}</a>
+    <a href=""><OpenNewWindow/> {t('dropdown.Pipe')}</a>
+    :
+    null
+  }
 
   <p>{t('dropdown.Other')}</p>
-  <a href=""><InfoCircle/> {t('dropdown.About')}</a>
+  <a data-astro-prefetch href="/about/"><InfoCircle/> {t('dropdown.About')}</a>
-  <a href=""><PrivacyPolicy/> {t('dropdown.Privacy')}</a>
+  <a data-astro-prefetch href=""><PrivacyPolicy/> {t('dropdown.Privacy')}</a>
-  <a href=""><Code/> {t('dropdown.SourceCode')}</a>
+  <a data-astro-prefetch href=""><Code/> {t('dropdown.SourceCode')}</a>
 </div>
 <div id="language" class="header-dropdown">
-  <p>Language</p>
+  <p>{t('dropdown.Language')}</p>
-  <a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()"><NavArrowLeft/> Go Back</a>
+  <a onclick="ToggleHeaderDropdown(); ToggleHeaderLanguageDropdown()"><NavArrowLeft/> {t("dropdown.GoBack")}</a>
   <a href="/api/language/en/">English</a>
-  <a href="">Spanish</a>
+  <a href="/api/language/jp/">日本語</a>
-  <a href="">Russian</a>
-  <a href="/api/language/jp/">Japanese</a>
 </div>
 
 <script is:inline>

src/components/global/Header.astro

@@ -13,7 +13,7 @@ import Poke from '@assets/poke-text.svg'
 
 // Icons
 import {
-    Server,
+    LogIn,
     Gamepad,
     Settings,
     Search,
@@ -24,7 +24,7 @@ import {
 <header>
     <div class="header-content">
         <div class="header-start">
-            <a href={'/' + i18next.language + '/'}><Image src={Poke} alt="Poke Logo" height={24} /></a>
+            <a href={'/'}><Image src={Poke} alt="Poke Logo" height={24} /></a>
         </div>
         <div class="header-center">
             <form>
@@ -62,9 +62,22 @@ header {
                     color: white;
                     background: black;
                     border: 2px #333 solid;
-                    border-right: 0px;
+                    border-right-color: transparent;
+                    border-right-width: 0px;
                     border-radius: 3rem 0px 0px 3rem;
                     padding: 6px 12px;
+                    width: 160px;
+                    transition: width 0.6s, border 0.3s, transform 0.2s;
+                    &:focus {
+                        border-radius: 4px;
+                        transform: scale(1.2);
+                        width: 260px;
+                        border-width: 1px;
+                        border-right-color: #333;
+                        border-right-width: 1px;
+                        font-size: 12px;
+                        transition: width 0.6s, border 0.3s, transform 0.2s;
+                    }
                 }
                 button {
                     color: white;
@@ -84,19 +97,6 @@ header {
         .header-end {
             display: flex;
             gap: 6px;
-            a {
-                color: white;
-                border-radius: 6px;
-                aspect-ratio: 1;
-                padding: 4px 6px;
-                &:hover {
-                    background: rgba(255,255,255,0.1);
-                }
-                svg {
-                    width: 18px;
-                    pointer-events: none;
-                }
-            }
         }
     }
 }

src/pages/about.astro

@@ -0,0 +1,6 @@
+---
+// Layout
+import Layout from "@layouts/Default.astro";
+---
+
+<Layout Title="Poke" Description="▶▶ Poke - The privacy app of your dreams!"></Layout>

src/pages/api/language/en.astro

@@ -1,11 +1,7 @@
 ---
-import { changeLanguage } from "i18next";
-
-changeLanguage("en");
-
 Astro.cookies.set("Language", "EN", {
     path: "/",
-    sameSite: 'strict'
+    sameSite: "strict"
 });
 return Astro.redirect("/");
 ---

src/pages/api/language/jp.astro

@@ -1,11 +1,7 @@
 ---
-import { changeLanguage } from "i18next";
-
-changeLanguage("jp");
-
 Astro.cookies.set("Language", "JP", {
     path: "/",
-    sameSite: 'strict'
+    sameSite: "strict"
 });
 return Astro.redirect("/");
 ---

src/pages/index.astro

@@ -1,5 +1,5 @@
 ---
-import Layout from '@layouts/Default.astro'
+import Layout from "@layouts/Default.astro";
 ---
 
 <Layout Title="Poke" Description="▶▶ Poke - The privacy app of your dreams!"></Layout>