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_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
+2 -1
View File
@@ -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
+35 -21
View File
@@ -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;
}
components/web-header.vue
+43 -44
View File
@@ -1,60 +1,62 @@
<template>
<header class="web-header web-header-bg web-header-emit-shadow-when-top">
<section class="web-heading">
<NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary">
<div class="flex items-center h-full bg-[#0066FF]">
<img width="36" height="36"src="/favicon.ico">
<div class="sticky top-0 w-full h-14 overflow-visible">
<header :class="`web-header ${mobileHamburger ? '' : 'web-header-autohide'}`">
<section class="web-heading">
<NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary">
<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>
</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>
</section>
</section>
</header>
<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>
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'],
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
+2 -1
View File
@@ -1,5 +1,6 @@
{
"name": "nuxt-app",
"name": "@techitwinner/web",
"version": "16.0.9",
"private": true,
"type": "module",
"scripts": {
pages/index.vue
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+23
View File
@@ -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);