V0.0.8

#50 #51

.prettierignore

@@ -11,4 +11,4 @@ pnpm-debug.log*
 .vercel
 .vscode
 .github
-astro_tmp_pages_*
+astro_tmp_pages_*

astro.config.mjs

@@ -15,12 +15,15 @@ export default defineConfig({
    site: 'https://prozekt-resovel.vercel.app/',
    experimental: {
       assets: true,
-      redirects: true,
+      viewTransitions: true,
    },
    image: {
       service: sharpImageService(),
    },
-
+   redirects: {
+      '/github': 'https://github.com/CDzungx/Prozekt-Resovel',
+      '/discord': 'https://discordapp.com/users/1088612635219599460',
+   },
    integrations: [
       prefetch(),
       tailwind(),

package.json

@@ -16,32 +16,35 @@
    "dependencies": {
       "@astrojs/prefetch": "^0.3.0",
       "@astrojs/react": "^2.2.1",
-      "@astrojs/sitemap": "^2.0.0",
+      "@astrojs/sitemap": "^2.0.1",
       "@astrojs/solid-js": "^2.2.0",
       "@astrojs/svelte": "^3.1.0",
       "@astrojs/tailwind": "^4.0.0",
-      "@astrojs/vercel": "^3.7.3",
+      "@astrojs/vercel": "^3.7.4",
+      "@fontsource/carter-one": "^5.0.5",
+      "@fontsource/ibm-plex-mono": "^5.0.5",
+      "@fontsource/lobster": "^5.0.5",
+      "@fontsource/paytone-one": "^5.0.5",
       "@motionone/solid": "^10.16.2",
       "@nanostores/i18n": "^0.10.0",
       "@nanostores/react": "^0.7.1",
       "@studio-freight/react-lenis": "^0.0.23",
       "@types/alpinejs": "^3.7.2",
-      "@types/react": "^18.2.15",
+      "@types/react": "^18.2.16",
       "@types/react-dom": "^18.2.7",
       "animate.css": "^4.1.1",
-      "astro": "^2.8.5",
+      "astro": "^2.9.3",
       "astro-compress": "^1.1.49",
-      "astro-google-fonts-optimizer": "^0.2.2",
       "astro-robots-txt": "^0.5.0",
-      "framer-motion": "^10.12.22",
+      "framer-motion": "^10.13.1",
       "nanostores": "^0.9.3",
-      "postcss-preset-env": "^9.0.0",
+      "postcss-preset-env": "^9.1.0",
       "react": "^18.2.0",
       "react-dom": "^18.2.0",
       "react-hydration-provider": "^1.0.2",
-      "sharp": "^0.32.3",
+      "sharp": "^0.32.4",
       "solid-js": "^1.7.8",
-      "svelte": "^4.0.5",
+      "svelte": "^4.1.1",
       "tailwindcss": "^3.3.3",
       "theme-change": "^2.5.0",
       "typed.js": "^2.0.16"
@@ -55,24 +58,24 @@
       "@nanostores/persistent": "^0.9.1",
       "@nanostores/solid": "^0.4.2",
       "@tailwindcss/typography": "^0.5.9",
-      "@typescript-eslint/eslint-plugin": "^6.1.0",
-      "@typescript-eslint/parser": "^6.1.0",
+      "@typescript-eslint/eslint-plugin": "^6.2.0",
+      "@typescript-eslint/parser": "^6.2.0",
       "astro-icon": "^1.0.0-next.2",
       "autoprefixer": "^10.4.14",
       "cssnano": "^6.0.1",
       "cssnano-preset-advanced": "^6.0.1",
-      "daisyui": "^3.2.1",
+      "daisyui": "^3.5.0",
       "eslint": "^8.45.0",
       "eslint-plugin-astro": "^0.27.2",
-      "eslint-plugin-react": "^7.32.2",
+      "eslint-plugin-react": "^7.33.0",
       "motion": "^10.16.2",
-      "postcss": "^8.4.26",
+      "postcss": "^8.4.27",
       "postcss-cli": "^10.1.0",
       "postcss-nested": "^6.0.1",
       "postcss-url": "^10.1.3",
       "prettier": "3.0.0",
       "prettier-plugin-astro": "^0.11.0",
-      "prettier-plugin-svelte": "github:sveltejs/prettier-plugin-svelte#master",
+      "prettier-plugin-svelte": "^3.0.0",
       "prettier-plugin-tailwindcss": "^0.4.1",
       "react-helmet-async": "^1.3.0",
       "svgo": "^3.0.2"

postcss.config.cjs

@@ -6,6 +6,7 @@ const postcssURL = require('postcss-url');
 
 module.exports = {
    plugins: [
+      tailwindcss(),
       postcssPresetEnv({
          features: {
             'nesting-rules': true,
@@ -15,7 +16,13 @@ module.exports = {
       }),
       postcssURL({ url: 'copy', useHash: true }),
       postcssNested(),
-      tailwindcss(),
-      cssnano({ preset: 'advanced' }),
+      cssnano({
+         preset: [
+            'advanced',
+            {
+               discardUnused: false,
+            },
+         ],
+      }),
    ],
 };

src/components/NavFoot/DarkSwitch.jsx

@@ -1,14 +1,14 @@
 /** @jsxImportSource solid-js */
 
 import { createSignal, onMount } from 'solid-js';
-import { $dataTheme } from '@store/DataStore';
+import { dataTheme } from '@store/DataStore';
 const DarkSwitch = () => {
    const [currentThemeValue, setCurrentTheme] = createSignal(localStorage.getItem('data-theme') || 'light');
    function handleCheckboxChange(event) {
       const newTheme = event.target.checked ? 'dark' : 'light';
       setCurrentTheme(newTheme);
       localStorage.setItem('data-theme', newTheme);
-      $dataTheme.set(currentThemeValue());
+      dataTheme.set(currentThemeValue());
    }
 
    onMount(() => {
@@ -25,11 +25,11 @@ const DarkSwitch = () => {
          document.getElementById('DarkmodeCheckbox').checked = true;
       }
       document.documentElement.setAttribute('data-theme', currentThemeValue());
-      $dataTheme.set(currentThemeValue());
+      dataTheme.set(currentThemeValue());
    });
 
    return (
-      <label aria-label="DarkSwitchLable" class="swap swap-rotate">
+      <label aria-label="DarkSwitchLable" class="swap-rotate swap">
          <input
             id="DarkmodeCheckbox"
             type="checkbox"

src/components/NavFoot/Footer.astro

@@ -2,20 +2,19 @@
 import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
 import { version } from '../../../package.json';
-import Debug from '@components/NavFoot/Debug';
 const link = `https://github.com/CDzungx/Prozekt-Resovel/wiki/v${version}`;
 import { LicenseTranslate } from '@components/NavFoot/AstroTranslate';
+import SvelteDebug from '@components/NavFoot/SvelteDebug.svelte';
 ---
 
 <footer
-   class="footer static bottom-0 items-center bg-base-300 p-3 px-5 text-base-content md:p-4 md:px-6"
-   style="row-gap: 0px;">
-   <div class="grid-flow-col items-center py-0">
+   class="footer static font-trebuchet gap-0 bottom-0 items-center bg-base-300 p-3 px-5 text-base-content md:p-4 md:px-6">
+   <div class="grid-flow-col items-center py-0 gap-5 whitespace-normal md:whitespace-nowrap">
       <span class="prose">
          <span
             ><a href={link}><label class="badge indicator-item badge-secondary cursor-pointer">v{version}</label></a>
-             2023 |&nbsp;</span
-         >
+             2023
+         </span><span class="hidden md:inline-block font-medium">© CDzungx&nbsp;</span>|
          <a
             class="font-semibold"
             property="dct:title"
@@ -60,25 +59,15 @@ import { LicenseTranslate } from '@components/NavFoot/AstroTranslate';
                <Icon name="ph:code-fill" class="h-8 w-8" />
             </div></button
          >
-         <Debug client:idle />
+         <SvelteDebug client:visible />
          <div class="divider divider-horizontal mx-0"></div>
-         <a
-            href="https://github.com/CDzungx/Prozekt-Resovel"
-            class="tooltip"
-            data-tip="Github"
-            target="_blank"
-            aria-label="Github">
+         <a href="/github" class="tooltip" data-tip="Github" target="_blank" aria-label="Github">
             <div class="box-border">
                <Icon name="mdi:github" class="h-8 w-8" />
             </div>
          </a>
          <div class="divider divider-horizontal mx-0"></div>
-         <a
-            href="https://discordapp.com/users/1088612635219599460"
-            class="tooltip"
-            data-tip="Discord"
-            target="_blank"
-            aria-label="Discord">
+         <a href="/discord" class="tooltip" data-tip="Discord" target="_blank" aria-label="Discord">
             <div class="box-border">
                <Icon name="ic:outline-discord" class="h-8 w-8" />
             </div>

src/components/NavFoot/LanguageSelectIcon.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <label class="swap swap-flip">
-   <input id="langCheck" type="checkbox" bind:checked on:change={handleChange} />
+   <input id="langCheck" aria-label="language" type="checkbox" bind:checked on:change={handleChange} />
    <div class="swap-on">
       <Icon icon="emojione:flag-for-vietnam" class="h-12 w-12" />
    </div>

src/components/NavFoot/LanguageSelectSwitch.svelte

@@ -0,0 +1,39 @@
+<script>
+   import { onMount } from 'svelte';
+   import { setting } from '@store/i18n';
+
+   let checked = setting === 'en';
+   function handleChange(event) {
+      setting.set(event.target.checked ? 'vi' : 'en');
+   }
+   let className;
+   export { className as class };
+
+   onMount(() => {
+      const lang = localStorage.getItem('locale') || 'en';
+      if (lang === 'vi') {
+         checked = true;
+      }
+   });
+</script>
+
+<div class="form-control grid-flow-col">
+   <label class="label cursor-pointer">
+      <input
+         id="langCheck"
+         aria-label="language"
+         type="checkbox"
+         class="toggle"
+         bind:checked
+         on:change={handleChange} />
+      <span class="label-text text-base font-medium" style="font-family: 'Trebuchet MS', sans-serif;">
+         {checked ? 'Tiếng Việt' : 'English'}
+      </span>
+   </label>
+</div>
+
+<style>
+   .label-text {
+      font-family: 'Trebuchet MS', sans-serif;
+   }
+</style>

src/components/NavFoot/Navbar.astro

@@ -1,9 +1,11 @@
 ---
 import DarkSwitch from '@components/NavFoot/DarkSwitch';
 import LanguageSelectDropdown from '@components/NavFoot/LanguageSelectDropdown.svelte';
+import LanguageSelectSwitch from '@components/NavFoot/LanguageSelectSwitch.svelte';
+import '@fontsource/carter-one';
 ---
 
-<div class="navbar my-3 rounded-lg p-3 pb-6 md:px-5 lg:px-6">
+<div class="navbar font-carter my-1 md:my-2 lg:my-3 rounded-lg p-3 pb-6 md:px-5 lg:px-6">
    <div class="navbar-start">
       <div class="dropdown">
          <label tabindex="0" class="btn btn-circle btn-ghost lg:hidden">
@@ -17,12 +19,19 @@ import LanguageSelectDropdown from '@components/NavFoot/LanguageSelectDropdown.s
                ></path></svg
             >
          </label>
-         <ul tabindex="0" class="menu drawer dropdown-content rounded-box menu-sm mt-3 w-52 bg-base-300 p-2 shadow">
-            <li><a class="py-2" href="https://thongnhat.tech/" target="_blank">Countdown</a></li>
-            <li><a class="py-2" href="/blog">Blog</a></li>
-            <li>
-               <a class="py-2" href="https://github.com/users/CDzungx/projects/2/views/2">Plans</a>
+         <ul
+            tabindex="0"
+            class="menu drawer dropdown-content rounded-box menu-sm w-40 border-t-2 border-gray-400 bg-base-300 align-middle shadow">
+            <li class="border-b-2 mb-2 pb-2 border-dotted border-black dark:border-white">
+               <a class="text-base" href="https://thongnhat.tech/" target="_blank">Countdown</a>
             </li>
+            <li class="border-b-2 mb-2 pb-2 border-dotted border-black dark:border-white">
+               <a class="text-base" href="/blog">Blog</a>
+            </li>
+            <li class="border-b-4 border-double mb-2 pb-2 border-black dark:border-white">
+               <a class="text-base" href="https://github.com/users/CDzungx/projects/2/views/2">Plans</a>
+            </li>
+            <LanguageSelectSwitch client:visible />
          </ul>
       </div>
       <a href="/" class="mainTitle prose-bold btn btn-ghost text-xl md:text-2xl lg:text-3xl">Prozekt Resovel</a>
@@ -39,7 +48,7 @@ import LanguageSelectDropdown from '@components/NavFoot/LanguageSelectDropdown.s
    <div class="navbar-end">
       <LanguageSelectDropdown client:load />
       <div class="divider divider-horizontal hidden md:flex lg:flex"></div>
-      <div class="btn btn-ghost mr-1 px-1 md:mr-2 lg:mr-3">
+      <div class="btn btn-ghost mr-1 px-1 md:mr-2">
          <DarkSwitch client:load />
       </div>
    </div>

src/components/NavFoot/RedSwitch.jsx

@@ -1,14 +1,14 @@
 /** @jsxImportSource solid-js */
 
 import { createSignal, onMount } from 'solid-js';
-import { $dataThemeVN } from '@store/DataStore';
+import { dataThemeVN } from '@store/DataStore';
 const DarkSwitch = () => {
    const [currentThemeValue, setCurrentTheme] = createSignal(localStorage.getItem('data-theme') || 'light');
    function handleCheckboxChange(event) {
       const newTheme = event.target.checked ? 'red' : 'darkred';
       setCurrentTheme(newTheme);
       localStorage.setItem('data-theme', newTheme);
-      $dataThemeVN.set(currentThemeValue());
+      dataThemeVN.set(currentThemeValue());
    }
 
    onMount(() => {
@@ -25,11 +25,11 @@ const DarkSwitch = () => {
          document.getElementById('DarkmodeCheckbox').checked = true;
       }
       document.documentElement.setAttribute('data-theme', currentThemeValue());
-      $dataThemeVN.set(currentThemeValue());
+      dataThemeVN.set(currentThemeValue());
    });
 
    return (
-      <label aria-label="DarkSwitchLable" class="swap-rotate swap">
+      <label aria-label="DarkSwitchLable" class="swap swap-rotate">
          <input
             id="DarkmodeCheckbox"
             type="checkbox"

src/components/NavFoot/SideBtns.astro

@@ -4,8 +4,8 @@ import DarkSwitch from '@components/NavFoot/DarkSwitch';
 import LanguageSelectIcon from '@components/NavFoot/LanguageSelectIcon.svelte';
 ---
 
-<div class="sideBtns btn-circle fixed ml-2 mt-2 md:ml-4 md:mt-4">
-   <div class="backdrop-blur-20 relative min-w-fit rounded-2xl p-3 backdrop-brightness-75 backdrop-opacity-50">
+<div class="sideBtns relative ml-2 mt-2 md:ml-4 md:mt-4">
+   <div class="backdrop-blur-20 z-[9999] fixed min-w-fit rounded-xl p-3 backdrop-brightness-75 backdrop-opacity-50">
       <a
          href="/"
          aria-label="Back link"