techit/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Techit Thawiang
2025-10-05 14:08:03 +07:00
parent a454f82cc5
commit c0ba4e534f
10 changed files with 138 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.example
+2 -1
View File
@@ -1,6 +1,7 @@
NUXT_PUBLIC_SITE_URL=example.com NUXT_PUBLIC_SITE_URL=example.com
NUXT_PUBLIC_BASE_URL=https://example.com NUXT_PUBLIC_BASE_URL=https://example.com
NUXT_PUBLIC_AUTHOR=John Doe 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 # Fonts, please preserve last slash
NUXT_PUBLIC_FONTS_URL=https://fonts.example.com/ NUXT_PUBLIC_FONTS_URL=https://fonts.example.com/
.github/workflows/deploy.yml
+2 -1
View File
@@ -22,7 +22,8 @@ jobs:
NUXT_PUBLIC_SITE_URL: ${{ vars.NUXT_PUBLIC_SITE_URL }} NUXT_PUBLIC_SITE_URL: ${{ vars.NUXT_PUBLIC_SITE_URL }}
NUXT_PUBLIC_SITE_NAME: ${{ vars.NUXT_PUBLIC_SITE_NAME }} NUXT_PUBLIC_SITE_NAME: ${{ vars.NUXT_PUBLIC_SITE_NAME }}
NUXT_PUBLIC_BASE_URL: ${{ vars.NUXT_PUBLIC_BASE_URL }} 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 - name: Upload artifact
uses: actions/upload-pages-artifact@v3 uses: actions/upload-pages-artifact@v3
with: with:
assets/css/main.css
+34 -20
View File
@@ -132,6 +132,9 @@ body,main {
background-color: var(--ui-bg); background-color: var(--ui-bg);
line-height: 1.35; line-height: 1.35;
} }
img {
@apply rounded-lg;
}
.web-header { .web-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -139,7 +142,7 @@ body,main {
top: 0; top: 0;
height: calc(var(--spacing)*14); height: calc(var(--spacing)*14);
z-index: 1000; 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-header.web-header-bg {
.web-nav-title { .web-nav-title {
@@ -150,6 +153,9 @@ body,main {
.web-header-emit-shadow-when-top.shadow-active { .web-header-emit-shadow-when-top.shadow-active {
@apply shadow-lg; @apply shadow-lg;
} }
.web-header-autohide.web-header-hidden {
@apply scale-95 blur opacity-0 invisible;
}
.web-nav, .web-footer-content, .article { .web-nav, .web-footer-content, .article {
width: 100%; width: 100%;
} }
@@ -240,29 +246,29 @@ p {
.project-card-container, .font-card-container, .post-card-container { .project-card-container, .font-card-container, .post-card-container {
@apply flex flex-col gap-1 ml-0 list-none; @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 { .font-card-container > li:not(:last-child):not(:first-child):not(:only-child) > .font-card {
@apply rounded-md; @apply rounded-md;
} }
.project-card-container > li:last-child:not(:only-child) > .project-card, .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 { .font-card-container > li:last-child:not(:only-child) > .font-card {
@apply rounded-t-md; @apply rounded-t-md;
} }
.project-card-container > li:first-child:not(:only-child) > .project-card, .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 { .font-card-container > li:first-child:not(:only-child) > .font-card {
@apply rounded-b-md; @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 { .project-card, .font-card, .post-card {
height: 100%; height: 100%;
padding: 0.5rem 1rem 0.5rem 0.5rem; 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; } 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 { p {
@apply line-clamp-2; @apply line-clamp-2;
margin: 0; 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; @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 { .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 { .nav-wrapper {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0; margin: 0;
padding: 0 calc(var(--spacing)*4); padding: 0 calc(var(--spacing)*4);
padding-top: 1rem;
width: 100%; width: 100%;
gap: 6px;
align-items: end;
.nav-link { .nav-link {
height: calc(var(--spacing)*14); font-size: 15px;
width: 100%; width: 100%;
max-width: 24rem;
@apply ml-0; @apply ml-0;
a { a {
display: flex; display: flex;
align-items: center; align-items: center;
height: calc(var(--spacing)*14);
width: 100%; 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 { 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; display: flex;
flex-direction: row; flex-direction: row;
height: 100%; height: 100%;
gap: 6px;
.nav-link { .nav-link {
font-size: 15px;
align-content: center;
height: 100%; height: 100%;
@apply ml-0; @apply m-0;
a { a {
display: flex; display: flex;
align-items: center; 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 { a.router-link-exact-active {
@apply text-primary; @apply text-primary;
@@ -365,7 +376,7 @@ button.btn, a.btn {
@apply cursor-pointer; @apply cursor-pointer;
} }
.btn { .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 { .btn.btn-sm {
@apply h-9; @apply h-9;
@@ -407,5 +418,8 @@ button.btn, a.btn {
.post-cover { .post-cover {
gap: 1.5rem; gap: 1.5rem;
display: flex; 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
+14 -15
View File
@@ -1,17 +1,18 @@
<template> <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">
<header :class="`web-header ${mobileHamburger ? '' : 'web-header-autohide'}`">
<section class="web-heading"> <section class="web-heading">
<NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary"> <NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary">
<div class="flex items-center h-full bg-[#0066FF]"> <div class="flex items-center h-full bg-[#0066FF]">
<img width="36" height="36"src="/favicon.ico"> <img width="36" height="36"src="/favicon.ico">
</div> </div>
<p title="thawia.ng, Go home" class="web-nav-title mx-2">thawia.ng/</p> <p title="thawia.ng, Go home" class="web-nav-title mx-2" aria-hidden="true">TechitWinner</p>
</NuxtLink> </NuxtLink>
<div class="web-heading-right-section"> <div class="web-heading-right-section">
<nav class="nav-links"> <nav class="nav-links">
<ul class="nav-wrapper"> <ul class="nav-wrapper">
<li class="nav-link"> <li class="nav-link">
<NuxtLink href="/posts">/posts</NuxtLink> <NuxtLink href="/posts">Posts</NuxtLink>
</li> </li>
<!-- <li class="nav-link"> <!-- <li class="nav-link">
<NuxtLink href="/projects">Projects</NuxtLink> <NuxtLink href="/projects">Projects</NuxtLink>
@@ -20,13 +21,13 @@
<NuxtLink href="/about">About</NuxtLink> <NuxtLink href="/about">About</NuxtLink>
</li> --> </li> -->
<li class="nav-link"> <li class="nav-link">
<NuxtLink title="Contact" href="/contact">/contact</NuxtLink> <NuxtLink title="Contact" href="/contact">Contact</NuxtLink>
</li> </li>
<li class="nav-link"> <li class="nav-link">
<NuxtLink title="Fonts" href="/fonts">/fonts</NuxtLink> <NuxtLink title="Fonts" href="/fonts">Fonts</NuxtLink>
</li> </li>
<li class="nav-link"> <li class="nav-link">
<NuxtLink title="Collection" href="/collections">/collections</NuxtLink> <NuxtLink title="Collection" href="/collections">Collections</NuxtLink>
</li> </li>
</ul> </ul>
</nav> </nav>
@@ -35,26 +36,27 @@
</button> </button>
</div> </div>
</section> </section>
</header>
<nav v-if="mobileHamburger" class="hamburger-menu"> <nav v-if="mobileHamburger" class="hamburger-menu">
<ul class="nav-wrapper"> <ul class="nav-wrapper">
<li class="nav-link"> <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>
<li class="nav-link"> <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>
<li class="nav-link"> <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>
<li class="nav-link"> <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>
<li class="nav-link"> <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> </li>
</ul> </ul>
</nav> </nav>
</header> </div>
</template> </template>
<script setup> <script setup>
@@ -63,7 +65,4 @@ const mobileHamburger = ref(false);
function toggleMobileHamburger() { function toggleMobileHamburger() {
mobileHamburger.value = !mobileHamburger.value mobileHamburger.value = !mobileHamburger.value
} }
function closeMobileHamburger() {
mobileHamburger.value = false
}
</script> </script>
content
+1 -1
Submodule content updated: 5da0d9b3b9...4476c41067
nuxt.config.ts
+26 -10
View File
@@ -22,23 +22,23 @@ export default defineNuxtConfig({
}, },
modules: ['@nuxt/content', '@nuxtjs/sitemap', '@nuxt/image', '@nuxt/eslint', '@nuxtjs/color-mode', '@nuxt/icon'], modules: ['@nuxt/content', '@nuxtjs/sitemap', '@nuxt/image', '@nuxt/eslint', '@nuxtjs/color-mode', '@nuxt/icon'],
app: { app: {
pageTransition: { name: 'page', mode: 'out-in' }, baseURL: process.env.NUXT_PUBLIC_BUILD_BASE_URL,
// pageTransition: { name: 'page', mode: 'out-in' },
head: { head: {
titleTemplate: `%s / ${process.env.NUXT_PUBLIC_SITE_NAME || 'thawia.ng'}`, titleTemplate: `%s / ${process.env.NUXT_PUBLIC_SITE_NAME}`,
meta: [ meta: [
{ name: 'description', content: `Just another personal website, Created by ${process.env.NUXT_PUBLIC_AUTHOR}` }, { name: 'description', content: `Just another personal website, Created by ${process.env.NUXT_PUBLIC_AUTHOR}` },
{ name: 'referrer', content: 'strict-origin-when-cross-origin' }, { name: 'referrer', content: 'strict-origin-when-cross-origin' },
{ name: 'canonical', content: process.env.NUXT_PUBLIC_BASE_URL },
{ name: 'robots', content: 'index,follow' }, { name: 'robots', content: 'index,follow' },
{ name: 'author', content: process.env.NUXT_PUBLIC_AUTHOR }, { name: 'author', content: process.env.NUXT_PUBLIC_AUTHOR },
{ name: 'application-name', content: process.env.NUXT_PUBLIC_SITE_NAME }, { 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' }, { name: 'theme-color', content: '#0066FF' },
// Open Graph // Open Graph
{ property: 'og:title', content: `${process.env.NUXT_PUBLIC_SITE_NAME} by ${process.env.NUXT_PUBLIC_AUTHOR}` }, { 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: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: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:type', content: 'website' },
{ property: 'og:locale', content: 'en_US' }, { property: 'og:locale', content: 'en_US' },
// Twitter // Twitter
@@ -59,18 +59,27 @@ export default defineNuxtConfig({
charset: 'utf-8', charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1', viewport: 'width=device-width, initial-scale=1',
link: [ link: [
{ rel: 'canonical', href: process.env.NUXT_PUBLIC_BASE_URL },
{ rel: 'icon', type: 'image/vnd.microsoft.icon', href: '/favicon.ico' }, { rel: 'icon', type: 'image/vnd.microsoft.icon', href: '/favicon.ico' },
// { rel: 'stylesheet', href: '/style.css' },
// TYPEFACES // TYPEFACES
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
{ rel: 'preconnect', href: 'https://fonts.thawiang.com/' }, { rel: 'preconnect', href: 'https://fonts.thawiang.com/' },
{ rel: 'stylesheet', href: 'https://fonts.thawiang.com/inter/inter.css' }, { 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: [ script: [
// { src: '/js/ripple.js', type: 'text/javascript', defer: true }, // { 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
+2 -1
View File
@@ -1,5 +1,6 @@
{ {
"name": "nuxt-app", "name": "@techitwinner/web",
"version": "16.0.9",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
pages/index.vue
+1 -1
View File
@@ -57,7 +57,7 @@
const config = useRuntimeConfig(); const config = useRuntimeConfig();
const baseUrl = config.public.baseUrl const baseUrl = config.public.baseUrl
const TITLE = "Home" const TITLE = "Home"
const DESC = "Welcome to thawia.ng, a Techit's website." const DESC = "Techit Thawiang, "
useHead({ useHead({
title: TITLE, title: TITLE,
pages/posts/[...slug].vue
+1 -1
View File
@@ -8,7 +8,7 @@
<section class="w-full"> <section class="w-full">
<p id="hero-desc" class="font-hero-desc">{{ post?.description }}</p> <p id="hero-desc" class="font-hero-desc">{{ post?.description }}</p>
</section> </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> </div>
</section> </section>
</section> </section>
public/js/nav.js
+23
View File
@@ -11,3 +11,26 @@ function applyHeaderShadow() {
}); });
} }
document.addEventListener("DOMContentLoaded", 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);