From c0ba4e534f958d5399826cc3b74a8583834c123b Mon Sep 17 00:00:00 2001 From: Techit Thawiang Date: Sun, 5 Oct 2025 14:08:03 +0700 Subject: [PATCH] im lazy writing commit messagesm please take a look by yourself thx --- .env.example | 3 +- .github/workflows/deploy.yml | 5 ++- assets/css/main.css | 56 ++++++++++++++--------- components/web-header.vue | 87 ++++++++++++++++++------------------ content | 2 +- nuxt.config.ts | 36 ++++++++++----- package.json | 3 +- pages/index.vue | 2 +- pages/posts/[...slug].vue | 2 +- public/js/nav.js | 25 ++++++++++- 10 files changed, 138 insertions(+), 83 deletions(-) diff --git a/.env.example b/.env.example index 579cba8..58088e4 100644 --- a/.env.example +++ b/.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/ \ No newline at end of file diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 463df3a..3b6c10b 100644 --- a/.github/workflows/deploy.yml +++ b/.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: @@ -44,4 +45,4 @@ jobs: steps: - name: Deploy to GitHub Pages id: deployment - uses: actions/deploy-pages@v4 + uses: actions/deploy-pages@v4 \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index 96555a8..da6cce1 100644 --- a/assets/css/main.css +++ b/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 > a.project-card:not(:last-child):not(:first-child):not(:only-child), +.project-card-container > li:not(:last-child):not(:first-child):not(:only-child) > .project-card, +.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; - h3 { @apply text-2xl font-bold; } + @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 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 cursor-pointer hover:text-primary active:opacity-80 transition-colors duration-100 ease-fluid; + @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; } 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; } \ No newline at end of file diff --git a/components/web-header.vue b/components/web-header.vue index 751d99e..1d8bb85 100644 --- a/components/web-header.vue +++ b/components/web-header.vue @@ -1,60 +1,62 @@ \ No newline at end of file diff --git a/content b/content index 5da0d9b..4476c41 160000 --- a/content +++ b/content @@ -1 +1 @@ -Subproject commit 5da0d9b3b9d682ebffd2e6836751638ef4ad55cd +Subproject commit 4476c4106720748f829bdc917dc2df71b5589474 diff --git a/nuxt.config.ts b/nuxt.config.ts index 9e021cc..49d7f1b 100644 --- a/nuxt.config.ts +++ b/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 } }) \ No newline at end of file diff --git a/package.json b/package.json index ea00c32..413a8f0 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { - "name": "nuxt-app", + "name": "@techitwinner/web", + "version": "16.0.9", "private": true, "type": "module", "scripts": { diff --git a/pages/index.vue b/pages/index.vue index 03dc2b2..a5b28fc 100644 --- a/pages/index.vue +++ b/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, diff --git a/pages/posts/[...slug].vue b/pages/posts/[...slug].vue index 3534276..21e6957 100644 --- a/pages/posts/[...slug].vue +++ b/pages/posts/[...slug].vue @@ -8,7 +8,7 @@

{{ post?.description }}

- + diff --git a/public/js/nav.js b/public/js/nav.js index 61df352..772618a 100644 --- a/public/js/nav.js +++ b/public/js/nav.js @@ -10,4 +10,27 @@ function applyHeaderShadow() { } }); } -document.addEventListener("DOMContentLoaded", applyHeaderShadow); \ No newline at end of file +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);