im lazy writing commit messagesm please take a look by yourself thx

.env.example

@@ -1,6 +1,7 @@
 NUXT_PUBLIC_SITE_URL=example.com
 NUXT_PUBLIC_BASE_URL=https://example.com
 NUXT_PUBLIC_AUTHOR=John Doe
-NUXT_PUBLIC_SITE_NAME=John's Blog
+NUXT_PUBLIC_SITE_NAME="John's Blog"
+NUXT_PUBLIC_BUILD_BASE_URL=/
 # Fonts, please preserve last slash
 NUXT_PUBLIC_FONTS_URL=https://fonts.example.com/

.github/workflows/deploy.yml

@@ -22,7 +22,8 @@ jobs:
           NUXT_PUBLIC_SITE_URL: ${{ vars.NUXT_PUBLIC_SITE_URL }}
           NUXT_PUBLIC_SITE_NAME: ${{ vars.NUXT_PUBLIC_SITE_NAME }}
           NUXT_PUBLIC_BASE_URL: ${{ vars.NUXT_PUBLIC_BASE_URL }}
-          NUXT_PUBLIC_AUTHOR: ${{ vars.NUXT_PUBLIC_AUTHOR }}
+          NUXT_PUBLIC_SITE_AUTHOR: ${{ vars.NUXT_PUBLIC_SITE_AUTHOR }}
+          NUXT_PUBLIC_BUILD_BASE_URL: ${{ vars.NUXT_PUBLIC_BUILD_BASE_URL }}
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

assets/css/main.css

@@ -70,7 +70,7 @@
     --font-sans: Inter, Sarabun, sans-serif;
     --font-sans--font-feature-settings: "liga", "calt", "ss01", "cv05", "cv06", "cv11";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --font-serif: "Noto Serif", "Noto Serif Thai", Georgia, Garamond, "Times New Roman", Times, serif;
+    --font-serif: "NotoSerif", "NotoSerifThai", Georgia, Garamond, "Times New Roman", Times, serif;
     --font-math: CMUSerif, "Cambria Math", "LatinModern Math", "STIXGeneral", math;
 
     --ease-fluid: 0.2, 0, 0, 1;
@@ -132,6 +132,9 @@ body,main {
     background-color: var(--ui-bg);
     line-height: 1.35;
 }
+img {
+    @apply rounded-lg;
+}
 .web-header {
     display: flex;
     flex-direction: row;
@@ -139,7 +142,7 @@ body,main {
     top: 0;
     height: calc(var(--spacing)*14);
     z-index: 1000;
-    @apply bg-(--ui-bg) shadow-xs shadow-[rgb(0,0,0,0.1)] transition-shadow;
+    @apply duration-200 transition-all;
 }
 .web-header.web-header-bg {
     .web-nav-title {
@@ -150,6 +153,9 @@ body,main {
 .web-header-emit-shadow-when-top.shadow-active {
     @apply shadow-lg;
 }
+.web-header-autohide.web-header-hidden {
+    @apply scale-95 blur opacity-0 invisible;
+}
 .web-nav, .web-footer-content, .article {
     width: 100%;
 }
@@ -240,29 +246,29 @@ p {
 .project-card-container, .font-card-container, .post-card-container {
 @apply flex flex-col gap-1 ml-0 list-none;
 }
-/* .project-card-container > li:not(:last-child):not(:first-child):not(:only-child) > .project-card,
+.project-card-container > li:not(:last-child):not(:first-child):not(:only-child) > .project-card,
-.project-card-container > a.project-card:not(:last-child):not(:first-child):not(:only-child),
+.post-card-container > a.post-card:not(:last-child):not(:first-child):not(:only-child),
 .font-card-container > li:not(:last-child):not(:first-child):not(:only-child) > .font-card {
     @apply rounded-md;
 }
 .project-card-container > li:last-child:not(:only-child) > .project-card,
-.project-card-container > a.project-card:last-child:not(:only-child),
+.post-card-container > a.post-card:last-child:not(:only-child),
 .font-card-container > li:last-child:not(:only-child) > .font-card {
     @apply rounded-t-md;
 }
 .project-card-container > li:first-child:not(:only-child) > .project-card,
-.project-card-container > a.project-card:first-child:not(:only-child),
+.post-card-container > a.post-card:first-child:not(:only-child),
 .font-card-container > li:first-child:not(:only-child) > .font-card {
     @apply rounded-b-md;
-} */
+}
-.project-card-container > li, .font-card-container > li { @apply ml-0; }
+.project-card-container > li, .post-card-container > li, .font-card-container > li { @apply ml-0; }
 .project-card, .font-card, .post-card {
     height: 100%;
     padding: 0.5rem 1rem 0.5rem 0.5rem;
-    @apply flex flex-col items-center sm:flex-row sm:gap-4 bg-(--ui-bg-muted) hover:bg-(--ui-bg-elevated) transition-colors duration-100 ease-fluid ml-0;
+    @apply flex flex-col items-center rounded-2xl sm:flex-row sm:gap-4 bg-(--ui-bg-muted) hover:bg-(--ui-bg-elevated) transition-colors duration-100 ease-fluid ml-0;
-    h3 { @apply text-2xl font-bold; }
+    h3 { @apply text-2xl font-bold line-clamp-1; }
     h3,p { z-index: 1; }
-    img { @apply mb-2 sm:mb-0 aspect-video object-cover w-full sm:max-w-56; }
+    img { @apply mb-2 sm:mb-0 aspect-video object-cover w-full sm:max-w-56 rounded-lg; }
     p {
         @apply line-clamp-2;
         margin: 0;
@@ -290,27 +296,30 @@ p {
     @apply flex md:hidden h-14 w-9 cursor-pointer items-center justify-center hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid;
 }
 .hamburger-menu {
-    @apply flex flex-col fixed left-0 top-14 w-full bg-(--color-deep-semidark) text-(--color-cloud-medium) h-full z-[1000];
+    @apply flex flex-col sticky h-fit left-0 top-14 w-full max-w-(--ui-container) mx-auto z-[1000];
     .nav-wrapper {
         list-style-type: none;
         display: flex;
         flex-direction: column;
         margin: 0;
         padding: 0 calc(var(--spacing)*4);
+        padding-top: 1rem;
         width: 100%;
+        gap: 6px;
+        align-items: end;
         .nav-link {
-            height: calc(var(--spacing)*14);
+            font-size: 15px;
             width: 100%;
+            max-width: 24rem;
             @apply ml-0;
             a {
                 display: flex;
                 align-items: center;
-                height: calc(var(--spacing)*14);
                 width: 100%;
-                @apply pl-3 cursor-pointer hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid;
+                @apply px-4 h-14 shadow-lg rounded-[28px] bg-(--ui-bg)/75 backdrop-blur border border-(--ui-text)/5 cursor-pointer hover:text-primary active:scale-[.975] transition-colors transition-transform duration-100 ease-fluid;
             }
             a.router-link-exact-active {
-                @apply border-l-2 border-primary box-border pl-2.5 text-primary;
+                @apply text-primary;
             }
         }
     }
@@ -323,14 +332,16 @@ p {
         display: flex;
         flex-direction: row;
         height: 100%;
+        gap: 6px;
         .nav-link {
+            font-size: 15px;
+            align-content: center;
             height: 100%;
-            @apply ml-0;
+            @apply m-0;
             a {
                 display: flex;
                 align-items: center;
-                height: 100%;
+                @apply px-3 h-10 rounded-[20px] bg-(--ui-bg)/75 backdrop-blur border border-(--ui-text)/5 cursor-pointer hover:text-primary active:opacity-80 transition-colors duration-100 ease-fluid;
-                @apply px-3 cursor-pointer hover:text-primary active:opacity-80 transition-colors duration-100 ease-fluid;
             }
             a.router-link-exact-active {
                 @apply text-primary;
@@ -365,7 +376,7 @@ button.btn, a.btn {
     @apply cursor-pointer;
 }
 .btn {
-    @apply h-10 bg-primary text-primary-content px-4;
+    @apply h-10 bg-primary text-primary-content px-4 rounded-[20px];
 }
 .btn.btn-sm {
     @apply h-9;
@@ -407,5 +418,8 @@ button.btn, a.btn {
 .post-cover {
     gap: 1.5rem;
     display: flex;
-    flex-direction: row-reverse;
+    @apply flex-col md:flex-row-reverse
+}
+.post-cover > .img-cover {
+@apply w-full aspect-[4/3] max-w-full md:max-w-[55%] object-cover;
 }

components/web-header.vue

@@ -1,60 +1,62 @@
 <template>
-    <header class="web-header web-header-bg web-header-emit-shadow-when-top">
+    <div class="sticky top-0 w-full h-14 overflow-visible">
-        <section class="web-heading">
+        <header :class="`web-header ${mobileHamburger ? '' : 'web-header-autohide'}`">
-            <NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary">
+            <section class="web-heading">
-                <div class="flex items-center h-full bg-[#0066FF]">
+                <NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary">
-                    <img width="36" height="36"src="/favicon.ico">
+                    <div class="flex items-center h-full bg-[#0066FF]">
+                        <img width="36" height="36"src="/favicon.ico">
+                    </div>
+                    <p title="thawia.ng, Go home" class="web-nav-title mx-2" aria-hidden="true">TechitWinner</p>
+                </NuxtLink>
+                <div class="web-heading-right-section">
+                    <nav class="nav-links">
+                        <ul class="nav-wrapper">
+                            <li class="nav-link">
+                                <NuxtLink href="/posts">Posts</NuxtLink>
+                            </li>
+                            <!-- <li class="nav-link">
+                                <NuxtLink href="/projects">Projects</NuxtLink>
+                            </li> 
+                            <li class="nav-link">
+                                <NuxtLink href="/about">About</NuxtLink>
+                            </li> -->
+                            <li class="nav-link">
+                                <NuxtLink title="Contact" href="/contact">Contact</NuxtLink>
+                            </li>
+                            <li class="nav-link">
+                                <NuxtLink title="Fonts" href="/fonts">Fonts</NuxtLink>
+                            </li>
+                            <li class="nav-link">
+                                <NuxtLink title="Collection" href="/collections">Collections</NuxtLink>
+                            </li>
+                        </ul>
+                    </nav>
+                    <button class="hamburger-toggle" @click="toggleMobileHamburger">
+                        <Icon name="oundr:menu"/>
+                    </button>
                 </div>
-                <p title="thawia.ng, Go home" class="web-nav-title mx-2">thawia.ng/</p>
+            </section>
-            </NuxtLink>
+        </header>
-            <div class="web-heading-right-section">
-                <nav class="nav-links">
-                    <ul class="nav-wrapper">
-                        <li class="nav-link">
-                            <NuxtLink href="/posts">/posts</NuxtLink>
-                        </li>
-                        <!-- <li class="nav-link">
-                            <NuxtLink href="/projects">Projects</NuxtLink>
-                        </li> 
-                        <li class="nav-link">
-                            <NuxtLink href="/about">About</NuxtLink>
-                        </li> -->
-                        <li class="nav-link">
-                            <NuxtLink title="Contact" href="/contact">/contact</NuxtLink>
-                        </li>
-                        <li class="nav-link">
-                            <NuxtLink title="Fonts" href="/fonts">/fonts</NuxtLink>
-                        </li>
-                        <li class="nav-link">
-                            <NuxtLink title="Collection" href="/collections">/collections</NuxtLink>
-                        </li>
-                    </ul>
-                </nav>
-                <button class="hamburger-toggle" @click="toggleMobileHamburger">
-                    <Icon name="oundr:menu"/>
-                </button>
-            </div>
-        </section>
         <nav v-if="mobileHamburger" class="hamburger-menu">
             <ul class="nav-wrapper">
                 <li class="nav-link">
-                    <NuxtLink aria-label="Go home" @click="closeMobileHamburger" href="/">/</NuxtLink>
+                    <NuxtLink aria-label="Go home" @click="closeMobileHamburger" href="/">Home</NuxtLink>
                 </li>
                 <li class="nav-link">
-                    <NuxtLink aria-label="Go to posts" @click="closeMobileHamburger" href="/posts">/posts</NuxtLink>
+                    <NuxtLink aria-label="Go to posts" @click="closeMobileHamburger" href="/posts">Posts</NuxtLink>
                 </li>
                 <li class="nav-link">
-                    <NuxtLink aria-label="Go to contact" @click="closeMobileHamburger" href="/contact">/contact</NuxtLink>
+                    <NuxtLink aria-label="Go to contact" @click="closeMobileHamburger" href="/contact">Contact</NuxtLink>
                 </li>
                 <li class="nav-link">
-                    <NuxtLink aria-label="Go to fonts" @click="closeMobileHamburger" href="/fonts">/fonts</NuxtLink>
+                    <NuxtLink aria-label="Go to fonts" @click="closeMobileHamburger" href="/fonts">Fonts</NuxtLink>
                 </li>
                 <li class="nav-link">
-                    <NuxtLink aria-label="Go to collections" @click="closeMobileHamburger" href="/collections">/collections</NuxtLink>
+                    <NuxtLink aria-label="Go to collections" @click="closeMobileHamburger" href="/collections">Collections</NuxtLink>
                 </li>
             </ul>
         </nav>
-    </header>
+    </div>
 </template>
 
 <script setup>
@@ -63,7 +65,4 @@ const mobileHamburger = ref(false);
 function toggleMobileHamburger() {
     mobileHamburger.value = !mobileHamburger.value
 }
-function closeMobileHamburger() {
-    mobileHamburger.value = false
-}
 </script>

nuxt.config.ts

@@ -22,23 +22,23 @@ export default defineNuxtConfig({
   },
   modules: ['@nuxt/content', '@nuxtjs/sitemap', '@nuxt/image', '@nuxt/eslint', '@nuxtjs/color-mode', '@nuxt/icon'],
   app: {
-    pageTransition: { name: 'page', mode: 'out-in' },
+    baseURL: process.env.NUXT_PUBLIC_BUILD_BASE_URL,
+    // pageTransition: { name: 'page', mode: 'out-in' },
     head: {
-      titleTemplate: `%s / ${process.env.NUXT_PUBLIC_SITE_NAME || 'thawia.ng'}`,
+      titleTemplate: `%s / ${process.env.NUXT_PUBLIC_SITE_NAME}`,
       meta: [
         { name: 'description', content: `Just another personal website, Created by ${process.env.NUXT_PUBLIC_AUTHOR}` },
         { name: 'referrer', content: 'strict-origin-when-cross-origin' },
-        { name: 'canonical', content: process.env.NUXT_PUBLIC_BASE_URL },
         { name: 'robots', content: 'index,follow' },
         { name: 'author', content: process.env.NUXT_PUBLIC_AUTHOR },
         { name: 'application-name', content: process.env.NUXT_PUBLIC_SITE_NAME },
-        { name: 'keywords', content: 'techit, techit thawiang, techit, techitwinner, thawiang, dailitation, dtt, dailitation.xyz' },
+        { name: 'keywords', content: 'techit, techit thawiang, techit, techitwinner, thawiang' },
         { name: 'theme-color', content: '#0066FF' },
         // Open Graph
         { property: 'og:title', content: `${process.env.NUXT_PUBLIC_SITE_NAME} by ${process.env.NUXT_PUBLIC_AUTHOR}` },
         { property: 'og:description', content: `Just another personal website, Created by ${process.env.NUXT_PUBLIC_AUTHOR}` },
         { property: 'og:url', content: process.env.NUXT_PUBLIC_BASE_URL },
-        { property: 'og:site_name', content: process.env.NUXT_PUBLIC_BASE_URL },
+        { property: 'og:site_name', content: process.env.NUXT_PUBLIC_SITE_NAME },
         { property: 'og:type', content: 'website' },
         { property: 'og:locale', content: 'en_US' },
         // Twitter
@@ -59,18 +59,27 @@ export default defineNuxtConfig({
       charset: 'utf-8',
       viewport: 'width=device-width, initial-scale=1',
       link: [
+        { rel: 'canonical', href: process.env.NUXT_PUBLIC_BASE_URL },
         { rel: 'icon', type: 'image/vnd.microsoft.icon', href: '/favicon.ico' },
-        // { rel: 'stylesheet', href: '/style.css' },
         // TYPEFACES
-        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
-        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
         { rel: 'preconnect', href: 'https://fonts.thawiang.com/' },
         { rel: 'stylesheet', href: 'https://fonts.thawiang.com/inter/inter.css' },
-        { rel: 'stylesheet', href: 'https://fonts.thawiang.com/sarabun/sarabun.css' }
+        { rel: 'stylesheet', href: 'https://fonts.thawiang.com/sarabun/sarabun.css' },
+        { rel: 'stylesheet', href: 'https://fonts.thawiang.com/noto-serif/noto-serif-less.css' },
+        { rel: 'stylesheet', href: 'https://fonts.thawiang.com/noto-serif-thai/noto-serif-thai.css' }
       ],
       script: [
         // { src: '/js/ripple.js', type: 'text/javascript', defer: true },
-        { src: '/js/nav.js', type: 'text/javascript', defer: true }
+        { src: '/js/nav.js', type: 'text/javascript', defer: true },
+        {
+          type: 'application/ld+json',
+          innerHTML: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "WebSite",
+            "name": process.env.NUXT_PUBLIC_SITE_NAME,
+            "url": process.env.NUXT_PUBLIC_BASE_URL
+          })
+        }
       ]
     },
   },
@@ -91,5 +100,12 @@ export default defineNuxtConfig({
         }
       }
     }
+  },
+  experimental: {
+    // inlineSSRStyles: false,
+  },
+  routeRules: {
+    "*": { experimentalNoScripts: true }, // one level deep, render all pages statically
+    "posts/*": { experimentalNoScripts: true }, // one level deep, render all post pages statically
   }
 })

package.json

@@ -1,5 +1,6 @@
 {
-  "name": "nuxt-app",
+  "name": "@techitwinner/web",
+  "version": "16.0.9",
   "private": true,
   "type": "module",
   "scripts": {

pages/index.vue

@@ -57,7 +57,7 @@
 const config = useRuntimeConfig();
 const baseUrl = config.public.baseUrl
 const TITLE = "Home"
-const DESC = "Welcome to thawia.ng, a Techit's website."
+const DESC = "Techit Thawiang, "
 
 useHead({
   title: TITLE,

pages/posts/[...slug].vue

@@ -8,7 +8,7 @@
                     <section class="w-full">
                       <p id="hero-desc" class="font-hero-desc">{{ post?.description }}</p>
                     </section>
-                    <img :width="512" class="max-w-[55%] aspect-[4/3] w-full object-cover" :src="post?.coverImage" />
+                    <img :width="512" class="img-cover" :src="post?.coverImage" />
                   </div>
                 </section>
             </section>

public/js/nav.js

@@ -11,3 +11,26 @@ function applyHeaderShadow() {
   });
 }
 document.addEventListener("DOMContentLoaded", applyHeaderShadow);
+
+function applyHeaderAutoHide() {
+  const header = document.querySelector(".web-header-autohide");
+  if (!header) return;
+
+  let lastScrollY = window.scrollY;
+
+  window.addEventListener("scroll", () => {
+    const currentScrollY = window.scrollY;
+
+    if (currentScrollY > lastScrollY && currentScrollY > 0) {
+      // Scrolling down -> hide header
+      header.classList.add("web-header-hidden");
+    } else {
+      // Scrolling up -> show header
+      header.classList.remove("web-header-hidden");
+    }
+
+    lastScrollY = currentScrollY;
+  });
+}
+
+document.addEventListener("DOMContentLoaded", applyHeaderAutoHide);