From df7d8397aae3eb7fef9124a1518f92ab2ce85505 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Fri, 2 Feb 2024 01:13:39 +0100
Subject: [PATCH] Added support for settings without JS

---
 .vscode/extensions.json                       |  2 +-
 .../AppLayout/components/Html.astro           |  4 +
 .../components/LanguageSelector.astro         |  1 +
 .../AppLayout/components/Topbar.astro         | 43 ++++++---
 src/components/Collapsible.astro              | 62 +++++++++++++
 .../drakengard/_components/FolderCard.astro   |  2 +-
 src/pages/[locale]/index.astro                |  2 +-
 src/pages/[locale]/settings/index.astro       | 90 +++++++++++++++++++
 src/pages/_components/LinkCard.astro          |  2 +-
 9 files changed, 191 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Collapsible.astro
 create mode 100644 src/pages/[locale]/settings/index.astro

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 22a1505..7f051aa 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,4 +1,4 @@
 {
-  "recommendations": ["astro-build.astro-vscode"],
+  "recommendations": ["astro-build.astro-vscode", "antfu.iconify"],
   "unwantedRecommendations": []
 }
diff --git a/src/components/AppLayout/components/Html.astro b/src/components/AppLayout/components/Html.astro
index 6279d89..3dafcbe 100644
--- a/src/components/AppLayout/components/Html.astro
+++ b/src/components/AppLayout/components/Html.astro
@@ -372,6 +372,10 @@ const { currentTheme } = Astro.locals;
       display: none;
     }
   }
+
+  .when-no-js {
+    display: none;
+  }
 </style>
 
 <script>
diff --git a/src/components/AppLayout/components/LanguageSelector.astro b/src/components/AppLayout/components/LanguageSelector.astro
index d975f00..08e85e2 100644
--- a/src/components/AppLayout/components/LanguageSelector.astro
+++ b/src/components/AppLayout/components/LanguageSelector.astro
@@ -25,6 +25,7 @@ const { t } = await getI18n(currentLocale);
         <a
           class:list={{ current: locale === currentLocale }}
           href={`?action-lang=${locale}`}
+          data-astro-prefetch="tap"
         >
           {locale.toString().toUpperCase()}
         </a>
diff --git a/src/components/AppLayout/components/Topbar.astro b/src/components/AppLayout/components/Topbar.astro
index 2260143..47b1f71 100644
--- a/src/components/AppLayout/components/Topbar.astro
+++ b/src/components/AppLayout/components/Topbar.astro
@@ -43,19 +43,31 @@ const { t } = await getI18n(Astro.locals.currentLocale);
       </div>
     )
   }
-  <div id="toolbar" class="when-js">
+  <div id="toolbar">
     <Button
       icon="material-symbols:search"
       ariaLabel={t("header.topbar.search.tooltip")}
     />
     <div class="separator"></div>
-    <ThemeSelector />
 
-    <LanguageSelector class="m-not" withTitle />
-    <LanguageSelector class="m-only" />
+    <div class="when-no-js">
+      <a href="/settings">
+        <Button
+          icon="material-symbols:settings-outline"
+          ariaLabel={t("header.topbar.search.tooltip")}
+        />
+      </a>
+    </div>
 
-    <CurrencySelector class="m-not" withTitle />
-    <CurrencySelector class="m-only" />
+    <div class="when-js">
+      <ThemeSelector />
+
+      <LanguageSelector class="m-not" withTitle />
+      <LanguageSelector class="m-only" />
+
+      <CurrencySelector class="m-not" withTitle />
+      <CurrencySelector class="m-only" />
+    </div>
   </div>
 </nav>
 
@@ -130,17 +142,22 @@ const { t } = await getI18n(Astro.locals.currentLocale);
         }
       }
 
-      & > :global(.m-only) {
-        display: none;
-      }
+      & > div.when-js {
+        display: flex;
+        gap: 12px;
 
-      @media (max-width: 40rem) {
         & > :global(.m-only) {
-          display: flex;
+          display: none;
         }
 
-        & > :global(.m-not) {
-          display: none;
+        @media (max-width: 40rem) {
+          & > :global(.m-only) {
+            display: flex;
+          }
+
+          & > :global(.m-not) {
+            display: none;
+          }
         }
       }
     }
diff --git a/src/components/Collapsible.astro b/src/components/Collapsible.astro
new file mode 100644
index 0000000..0c841ad
--- /dev/null
+++ b/src/components/Collapsible.astro
@@ -0,0 +1,62 @@
+---
+
+---
+
+<details>
+  <summary><slot name="header" /></summary>
+  <div class="content">
+    <div class="content2">
+      <slot />
+    </div>
+  </div>
+</details>
+
+<style>
+  details {
+    --foreground-color: var(--color-base-650);
+    color: var(--foreground-color);
+    border: 0.1em solid var(--foreground-color);
+    background-color: var(--color-elevation-0);
+    border-radius: 1.25em;
+
+    transition: all 1s;
+
+    &[open] {
+      & > summary {
+        border-bottom: 1px solid #aaa;
+      }
+
+      & > .content {
+        animation: animate 0.5s forwards;
+      }
+    }
+
+    & > summary {
+      list-style: none;
+      height: 2.5em;
+      padding-left: 1em;
+      padding-right: 1em;
+      display: flex;
+      place-items: center;
+      gap: 1em;
+    }
+
+    & > .content {
+      padding: 1em;
+      display: grid;
+
+      & > .content2 {
+        overflow: hidden;
+      }
+    }
+  }
+
+  @keyframes animate {
+    from {
+      grid-template-rows: 0fr;
+    }
+    to {
+      grid-template-rows: 1fr;
+    }
+  }
+</style>
diff --git a/src/pages/[locale]/drakengard/_components/FolderCard.astro b/src/pages/[locale]/drakengard/_components/FolderCard.astro
index 59f84c3..b0bdd8d 100644
--- a/src/pages/[locale]/drakengard/_components/FolderCard.astro
+++ b/src/pages/[locale]/drakengard/_components/FolderCard.astro
@@ -39,7 +39,7 @@ const { icon, title, href } = Astro.props;
       gap: 2px;
 
       & > h3 {
-        font-size: 24px;
+        font-size: 1.25em;
       }
     }
   }
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index 85d848d..5491ad6 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -16,7 +16,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
 <AppLayout
   title="Accord’s Library"
   illustration="/img/bg-home.webp"
-  illustrationSize="100vh"
+  illustrationSize="60vw"
   illustrationPosition="20%"
 >
   <div id="title" slot="header-title">
diff --git a/src/pages/[locale]/settings/index.astro b/src/pages/[locale]/settings/index.astro
new file mode 100644
index 0000000..65d66c9
--- /dev/null
+++ b/src/pages/[locale]/settings/index.astro
@@ -0,0 +1,90 @@
+---
+import AppLayout from "components/AppLayout/AppLayout.astro";
+import { getI18n, locales } from "translations/translations";
+
+const { currentLocale, currentTheme, currentCurrency } = Astro.locals;
+const { t } = await getI18n(currentLocale);
+---
+
+<AppLayout
+  title="Settings"
+  breadcrumb={[{ name: "Settings", slug: "settings" }]}
+>
+  <div id="main" slot="main">
+    <div class="section">
+      <h2>Language</h2>
+      <p>{t("header.topbar.language.tooltip")}</p><br />
+      {
+        locales.map((locale) => (
+          <a
+            class:list={{ current: locale === currentLocale }}
+            href={`?action-lang=${locale}`}
+            data-astro-prefetch="tap"
+          >
+            {locale.toString().toUpperCase()}
+          </a>
+        ))
+      }
+    </div>
+
+    <div class="section">
+      <h2>Theme</h2>
+      <p>{t("header.topbar.theme.tooltip")}</p><br />
+      <a
+        class:list={{ current: currentTheme === "dark" }}
+        href="?action-theme=dark"
+        data-astro-prefetch="tap"
+      >
+        {t("header.topbar.theme.dark")}
+      </a>
+      <a
+        class:list={{ current: currentTheme === "auto" }}
+        href="?action-theme=auto"
+        data-astro-prefetch="tap"
+      >
+        {t("header.topbar.theme.auto")}
+      </a>
+      <a
+        class:list={{ current: currentTheme === "light" }}
+        href="?action-theme=light"
+        data-astro-prefetch="tap"
+      >
+        {t("header.topbar.theme.light")}
+      </a>
+    </div>
+
+    <div class="section">
+      <h2>Currency</h2>
+      <p>{t("header.topbar.currency.tooltip")}</p><br />
+      <a
+        class:list={{ current: currentCurrency === "usd" }}
+        href="?action-currency=usd"
+        data-astro-prefetch="tap">USD</a
+      >
+      <a
+        class:list={{ current: currentCurrency === "eur" }}
+        href="?action-currency=eur"
+        data-astro-prefetch="tap">EUR</a
+      >
+    </div>
+  </div>
+</AppLayout>
+
+<style>
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+
+    & > .current {
+      color: var(--color-base-750);
+      text-decoration: underline 0.08em var(--color-base-650);
+    }
+  }
+
+  #main {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 5em;
+  }
+</style>
diff --git a/src/pages/_components/LinkCard.astro b/src/pages/_components/LinkCard.astro
index 1ecae96..5418e9d 100644
--- a/src/pages/_components/LinkCard.astro
+++ b/src/pages/_components/LinkCard.astro
@@ -42,7 +42,7 @@ const { icon, subtitle, title, href } = Astro.props;
       gap: 0.15em;
 
       & > h3 {
-        font-size: 1.5em;
+        font-size: 1.25em;
       }
 
       & > p {