mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 19:22:52 +02:00
refactor: fix button positions and adjust component structure
This commit is contained in:
radishzzz
parent
e37d8ee34e
commit
7671309edf
10 changed files with 161 additions and 137 deletions
|
|
@ -21,7 +21,7 @@
|
|||
"@astrojs/rss": "^4.0.11",
|
||||
"@astrojs/sitemap": "^3.2.1",
|
||||
"@rehype-pretty/transformers": "^0.13.2",
|
||||
"astro": "^5.5.1",
|
||||
"astro": "^5.5.2",
|
||||
"astro-compress": "^2.3.6",
|
||||
"astro-og-canvas": "^0.7.0",
|
||||
"astro-robots-txt": "^1.0.0",
|
||||
|
|
|
|||
32
pnpm-lock.yaml
generated
32
pnpm-lock.yaml
generated
|
|
@ -13,7 +13,7 @@ importers:
|
|||
version: 0.9.4(typescript@5.8.2)
|
||||
'@astrojs/mdx':
|
||||
specifier: ^4.2.0
|
||||
version: 4.2.0(astro@5.5.1(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))
|
||||
version: 4.2.0(astro@5.5.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))
|
||||
'@astrojs/partytown':
|
||||
specifier: ^2.1.4
|
||||
version: 2.1.4
|
||||
|
|
@ -27,14 +27,14 @@ importers:
|
|||
specifier: ^0.13.2
|
||||
version: 0.13.2
|
||||
astro:
|
||||
specifier: ^5.5.1
|
||||
version: 5.5.1(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
specifier: ^5.5.2
|
||||
version: 5.5.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
astro-compress:
|
||||
specifier: ^2.3.6
|
||||
version: 2.3.6(@types/node@22.13.10)(jiti@2.4.2)(rollup@4.35.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
astro-og-canvas:
|
||||
specifier: ^0.7.0
|
||||
version: 0.7.0(astro@5.5.1(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))
|
||||
version: 0.7.0(astro@5.5.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))
|
||||
astro-robots-txt:
|
||||
specifier: ^1.0.0
|
||||
version: 1.0.0
|
||||
|
|
@ -1267,8 +1267,8 @@ packages:
|
|||
astro-robots-txt@1.0.0:
|
||||
resolution: {integrity: sha512-6JQSLid4gMhoWjOm85UHLkgrw0+hHIjnJVIUqxjU2D6feKlVyYukMNYjH44ZDZBK1P8hNxd33PgWlHzCASvedA==}
|
||||
|
||||
astro@5.5.1:
|
||||
resolution: {integrity: sha512-1bA4e7lbGKO0eXcuXy6GV8wjsypdrOO6EPLP3l1rNddMdkmj67VlMjWUp/3bti+kOe46ocXxJDh7Ux2L77YWjQ==}
|
||||
astro@5.5.2:
|
||||
resolution: {integrity: sha512-SOTJxB8mqxe/KEYEJiLIot0YULiCffyfTEclwmdeaASitDJ7eLM/KYrJ9sx3U5hq9GVI17Z4Y0P/1T2aQ0ZN3A==}
|
||||
engines: {node: ^18.17.1 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
|
||||
hasBin: true
|
||||
|
||||
|
|
@ -1623,8 +1623,8 @@ packages:
|
|||
duplexer@0.1.2:
|
||||
resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
|
||||
|
||||
electron-to-chromium@1.5.116:
|
||||
resolution: {integrity: sha512-mufxTCJzLBQVvSdZzX1s5YAuXsN1M4tTyYxOOL1TcSKtIzQ9rjIrm7yFK80rN5dwGTePgdoABDSHpuVtRQh0Zw==}
|
||||
electron-to-chromium@1.5.117:
|
||||
resolution: {integrity: sha512-G4+CYIJBiQ72N0gi868tmG4WsD8bwLE9XytBdfgXO5zdlTlvOP2ABzWYILYxCIHmsbm2HjBSgm/E/H/QfcnIyQ==}
|
||||
|
||||
emmet@2.4.11:
|
||||
resolution: {integrity: sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ==}
|
||||
|
|
@ -3895,12 +3895,12 @@ snapshots:
|
|||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@astrojs/mdx@4.2.0(astro@5.5.1(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))':
|
||||
'@astrojs/mdx@4.2.0(astro@5.5.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))':
|
||||
dependencies:
|
||||
'@astrojs/markdown-remark': 6.3.0
|
||||
'@mdx-js/mdx': 3.1.0(acorn@8.14.1)
|
||||
acorn: 8.14.1
|
||||
astro: 5.5.1(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
astro: 5.5.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
es-module-lexer: 1.6.0
|
||||
estree-util-visit: 2.0.0
|
||||
hast-util-to-html: 9.0.5
|
||||
|
|
@ -5007,7 +5007,7 @@ snapshots:
|
|||
'@playform/pipe': 0.1.2
|
||||
'@types/csso': 5.0.4
|
||||
'@types/html-minifier-terser': 7.0.2
|
||||
astro: 5.5.1(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
astro: 5.5.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
commander: 13.0.0
|
||||
csso: 5.0.5
|
||||
deepmerge-ts: 7.1.3
|
||||
|
|
@ -5067,9 +5067,9 @@ snapshots:
|
|||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
astro-og-canvas@0.7.0(astro@5.5.1(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)):
|
||||
astro-og-canvas@0.7.0(astro@5.5.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)):
|
||||
dependencies:
|
||||
astro: 5.5.1(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
astro: 5.5.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
canvaskit-wasm: 0.39.1
|
||||
deterministic-object-hash: 2.0.2
|
||||
entities: 4.5.0
|
||||
|
|
@ -5079,7 +5079,7 @@ snapshots:
|
|||
valid-filename: 4.0.0
|
||||
zod: 3.24.2
|
||||
|
||||
astro@5.5.1(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0):
|
||||
astro@5.5.2(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.35.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0):
|
||||
dependencies:
|
||||
'@astrojs/compiler': 2.11.0
|
||||
'@astrojs/internal-helpers': 0.6.1
|
||||
|
|
@ -5221,7 +5221,7 @@ snapshots:
|
|||
browserslist@4.24.4:
|
||||
dependencies:
|
||||
caniuse-lite: 1.0.30001704
|
||||
electron-to-chromium: 1.5.116
|
||||
electron-to-chromium: 1.5.117
|
||||
node-releases: 2.0.19
|
||||
update-browserslist-db: 1.1.3(browserslist@4.24.4)
|
||||
|
||||
|
|
@ -5480,7 +5480,7 @@ snapshots:
|
|||
|
||||
duplexer@0.1.2: {}
|
||||
|
||||
electron-to-chromium@1.5.116: {}
|
||||
electron-to-chromium@1.5.117: {}
|
||||
|
||||
emmet@2.4.11:
|
||||
dependencies:
|
||||
|
|
|
|||
|
|
@ -33,6 +33,8 @@ const {
|
|||
>
|
||||
</div>
|
||||
|
||||
<!-- Not use 'is:inline' or 'define:vars' -->
|
||||
<!-- 'define:vars' ≈ 'is:inline' -->
|
||||
<script>
|
||||
import { init } from '@waline/client'
|
||||
import '@waline/client/style'
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
---
|
||||
import LanguageSwitcher from '@/components/Widgets/LanguageSwitcher.astro'
|
||||
import ThemeToggle from '@/components/Widgets/ThemeToggle.astro'
|
||||
import themeConfig from '@/config'
|
||||
|
||||
interface Props {
|
||||
|
|
@ -21,6 +23,12 @@ const year = Number(startYear) === currentYear
|
|||
className,
|
||||
]}
|
||||
>
|
||||
<!-- only show on desktop -->
|
||||
<div class="mb-11.5 ml-1.5 hidden gap-7 lg:flex">
|
||||
<ThemeToggle />
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
|
||||
<p>
|
||||
{links.map((link, index) => (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const navItems = [
|
|||
|
||||
<nav
|
||||
class="mb-10.625 text-3.6 font-semibold leading-8.75 font-navbar"
|
||||
lg="fixed bottom-40 text-4 leading-9.72"
|
||||
lg="fixed bottom-50 text-4 leading-9.72"
|
||||
>
|
||||
<ul>
|
||||
{navItems.map(item => (
|
||||
|
|
|
|||
|
|
@ -1,73 +1,73 @@
|
|||
---
|
||||
import themeConfig from '@/config'
|
||||
import { getPagePath } from '@/utils/path'
|
||||
import { getCollection } from 'astro:content'
|
||||
// import themeConfig from '@/config'
|
||||
// import { getPagePath } from '@/utils/path'
|
||||
// import { getCollection } from 'astro:content'
|
||||
|
||||
// 获取当前页面路径信息
|
||||
const { isPost } = getPagePath(Astro.url.pathname)
|
||||
// // 获取当前页面路径信息
|
||||
// const { isPost } = getPagePath(Astro.url.pathname)
|
||||
|
||||
// 获取默认语言
|
||||
const defaultLocale = themeConfig.global.locale
|
||||
// // 获取默认语言
|
||||
// const defaultLocale = themeConfig.global.locale
|
||||
|
||||
// 定义固定的语言顺序（按照要求的顺序）
|
||||
const fixedLangOrder = [defaultLocale, ...themeConfig.global.moreLocale]
|
||||
// // 定义固定的语言顺序（按照要求的顺序）
|
||||
// const fixedLangOrder = [defaultLocale, ...themeConfig.global.moreLocale]
|
||||
|
||||
// 获取当前文章的可用语言
|
||||
let availableLangs: string[] = []
|
||||
let currentPostSlug = ''
|
||||
// // 获取当前文章的可用语言
|
||||
// let availableLangs: string[] = []
|
||||
// let currentPostSlug = ''
|
||||
|
||||
// 如果是文章页，获取当前文章对象
|
||||
if (isPost) {
|
||||
// 从URL中提取文章slug
|
||||
const pathParts = Astro.url.pathname.split('/')
|
||||
const slugIndex = pathParts.findIndex(part => part === 'posts') + 1
|
||||
if (slugIndex > 0 && pathParts.length > slugIndex) {
|
||||
currentPostSlug = pathParts[slugIndex]
|
||||
// // 如果是文章页，获取当前文章对象
|
||||
// if (isPost) {
|
||||
// // 从URL中提取文章slug
|
||||
// const pathParts = Astro.url.pathname.split('/')
|
||||
// const slugIndex = pathParts.findIndex(part => part === 'posts') + 1
|
||||
// if (slugIndex > 0 && pathParts.length > slugIndex) {
|
||||
// currentPostSlug = pathParts[slugIndex]
|
||||
|
||||
// 获取所有文章
|
||||
const posts = await getCollection('posts')
|
||||
// // 获取所有文章
|
||||
// const posts = await getCollection('posts')
|
||||
|
||||
// 找到所有具有相同abbrlink或slug的文章
|
||||
const relatedPosts = posts.filter(post =>
|
||||
post.data.abbrlink === currentPostSlug || post.slug === currentPostSlug,
|
||||
)
|
||||
// // 找到所有具有相同abbrlink或slug的文章
|
||||
// const relatedPosts = posts.filter(post =>
|
||||
// post.data.abbrlink === currentPostSlug || post.slug === currentPostSlug,
|
||||
// )
|
||||
|
||||
if (relatedPosts.length > 0) {
|
||||
// 收集所有相关文章支持的语言
|
||||
const supportedLangs = new Set()
|
||||
// if (relatedPosts.length > 0) {
|
||||
// // 收集所有相关文章支持的语言
|
||||
// const supportedLangs = new Set()
|
||||
|
||||
relatedPosts.forEach((post) => {
|
||||
// 处理lang属性
|
||||
if (typeof post.data.lang === 'string' && post.data.lang.trim() !== '') {
|
||||
supportedLangs.add(post.data.lang)
|
||||
}
|
||||
// 如果没有指定语言，则假定支持默认语言
|
||||
else {
|
||||
supportedLangs.add(defaultLocale)
|
||||
}
|
||||
})
|
||||
// relatedPosts.forEach((post) => {
|
||||
// // 处理lang属性
|
||||
// if (typeof post.data.lang === 'string' && post.data.lang.trim() !== '') {
|
||||
// supportedLangs.add(post.data.lang)
|
||||
// }
|
||||
// // 如果没有指定语言，则假定支持默认语言
|
||||
// else {
|
||||
// supportedLangs.add(defaultLocale)
|
||||
// }
|
||||
// })
|
||||
|
||||
// 按照固定顺序筛选出可用的语言
|
||||
availableLangs = fixedLangOrder.filter(lang => supportedLangs.has(lang))
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
// 非文章页面使用所有语言
|
||||
availableLangs = fixedLangOrder
|
||||
}
|
||||
// // 按照固定顺序筛选出可用的语言
|
||||
// availableLangs = fixedLangOrder.filter(lang => supportedLangs.has(lang))
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// else {
|
||||
// // 非文章页面使用所有语言
|
||||
// availableLangs = fixedLangOrder
|
||||
// }
|
||||
|
||||
// 当前语言
|
||||
function getLanguageDisplayName(code: string) {
|
||||
return new Intl.DisplayNames(['en'], { type: 'language' }).of(code) || code
|
||||
}
|
||||
// // 当前语言
|
||||
// function getLanguageDisplayName(code: string) {
|
||||
// return new Intl.DisplayNames(['en'], { type: 'language' }).of(code) || code
|
||||
// }
|
||||
---
|
||||
|
||||
<button
|
||||
type="button"
|
||||
id="language-switcher"
|
||||
class="aspect-square w-4 c-secondary active:scale-90"
|
||||
aria-label={`Current Language: ${getLanguageDisplayName(defaultLocale)}. Click to switch to next language.`}
|
||||
class="uno-button"
|
||||
aria-label="Click to switch to next language"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -79,7 +79,7 @@ function getLanguageDisplayName(code: string) {
|
|||
</svg>
|
||||
</button>
|
||||
|
||||
<script is:inline define:vars={{ availableLangs, currentPostSlug, isPost, defaultLocale }}>
|
||||
<!-- <script is:inline define:vars={{ availableLangs, currentPostSlug, isPost, defaultLocale }}>
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
const langSwitch = document.getElementById('language-switcher')
|
||||
|
||||
|
|
@ -137,4 +137,4 @@ function buildNewPath(currentLang, nextLang, segments) {
|
|||
}
|
||||
return `/${newSegments.join('/')}/`
|
||||
}
|
||||
</script>
|
||||
</script> -->
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
---
|
||||
import { themeConfig } from '@/config'
|
||||
|
||||
const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
|
||||
---
|
||||
<button
|
||||
id="theme-toggle"
|
||||
aria-label="Theme Toggle Button"
|
||||
class="aspect-square w-4.2 c-secondary active:scale-90"
|
||||
class="uno-button id-theme-toggle w-4.2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -16,49 +11,3 @@ const { light: { background: lightMode }, dark: { background: darkMode } } = the
|
|||
<path d="m12 1c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11m0 20c-5.8 0-10.5-4-10.5-9s4.7-9 10.5-9 10.5 4 10.5 9-4.7 9-10.5 9" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<script define:vars={{ lightMode, darkMode }}>
|
||||
// Update theme
|
||||
function updateTheme() {
|
||||
// Toggle website theme
|
||||
document.documentElement.classList.toggle('dark')
|
||||
// Get current theme
|
||||
const isDark = document.documentElement.classList.contains('dark')
|
||||
// Update meta theme color
|
||||
const metaThemeColor = document.querySelector('meta[name="theme-color"]')
|
||||
if (metaThemeColor) {
|
||||
metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
|
||||
}
|
||||
// Update theme configuration in local storage
|
||||
localStorage.setItem('theme', isDark ? 'dark' : 'light')
|
||||
document.dispatchEvent(new Event('theme-changed'))
|
||||
}
|
||||
|
||||
// Bind click event to the button
|
||||
function setupThemeToggle() {
|
||||
// Locate theme toggle button
|
||||
const themeToggleButton = document.getElementById('theme-toggle')
|
||||
// Add click listener
|
||||
themeToggleButton.addEventListener('click', () => {
|
||||
// If browser doesn't support View Transitions API, update theme directly
|
||||
if (!document.startViewTransition) {
|
||||
updateTheme()
|
||||
return
|
||||
}
|
||||
// Temporarily add markers during animation to implement view transition and disable CSS transitions
|
||||
document.documentElement.style.setProperty('view-transition-name', 'theme-transition')
|
||||
document.documentElement.setAttribute('data-theme-transition', '')
|
||||
// If browser supports View Transitions API, use it to update theme
|
||||
const themeTransition = document.startViewTransition(updateTheme)
|
||||
// Remove markers after animation
|
||||
themeTransition.finished.then(() => {
|
||||
document.documentElement.style.removeProperty('view-transition-name')
|
||||
document.documentElement.removeAttribute('data-theme-transition')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Initialize click event (on first load or page transition)
|
||||
setupThemeToggle()
|
||||
document.addEventListener('astro:after-swap', setupThemeToggle)
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export const themeConfig: ThemeConfig = {
|
|||
// font styles for text
|
||||
fontStyle: 'sans', // sans, serif
|
||||
// date format for posts
|
||||
dateFormat: 'MONTH DAY YYYY', // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
|
||||
dateFormat: 'YYYY-MM-DD', // YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
|
||||
// space between title and subtitle
|
||||
titleSpace: 3, // 1, 2, 3
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,13 +4,14 @@ import Footer from '@/components/Footer.astro'
|
|||
import MainHeader from '@/components/MainHeader.astro'
|
||||
import MobileHeader from '@/components/MobileHeader.astro'
|
||||
import Navigation from '@/components/Navbar.astro'
|
||||
// import LanguageSwitcher from '@/components/Widgets/LanguageSwitcher.astro'
|
||||
import LanguageSwitcher from '@/components/Widgets/LanguageSwitcher.astro'
|
||||
// import PhotoSwipe from '@/components/PhotoSwipe.astro'
|
||||
// import Scrollbar from '@/components/Scrollbar.astro'
|
||||
import ThemeToggle from '@/components/Widgets/ThemeToggle.astro'
|
||||
import themeConfig from '@/config'
|
||||
import Head from '@/layouts/Head.astro'
|
||||
import { getPagePath } from '@/utils/path'
|
||||
|
||||
import '@/styles/font.css'
|
||||
import '@/styles/global.css'
|
||||
import '@/styles/heti.css'
|
||||
|
|
@ -23,8 +24,8 @@ interface Props {
|
|||
|
||||
const { postTitle, postDescription, postSlug } = Astro.props
|
||||
const { isHome, isPost } = getPagePath(Astro.url.pathname)
|
||||
const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
|
||||
const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
|
||||
|
||||
const footerMarginClass = isPost && themeConfig.comment?.waline?.serverURL
|
||||
? 'mt-8'
|
||||
: 'mt-12'
|
||||
|
|
@ -45,31 +46,94 @@ const footerMarginClass = isPost && themeConfig.comment?.waline?.serverURL
|
|||
<!-- desktop max div width: 1100px+90px*2=1280px/4=320 / max words number: 42+2=44 / max content width: 44*16px=704px / title width: 14*16px=224px / max-gap: 1100px-704px-224px=172px/16=10.75rem -->
|
||||
<!-- content width: calc(32rem+(100vw-1024px)*(44rem-32rem)/(1280-1024))=calc(75vw-16rem) / gap width: calc(6.75rem+(100vw-1024px)*(10.75rem-6.75rem)/(1280-1024))=calc(25vw-9.25rem) -->
|
||||
<div
|
||||
class="mx-auto max-w-205.848 min-h-vh min-w-80 min-h-dvh w-full"
|
||||
class="mx-auto max-w-205.848 min-h-vh w-full min-h-dvh"
|
||||
p="x-[min(7.25vw,3.731rem)] y-8 lg:(x-22.5 y-20)"
|
||||
lg="max-w-320 grid cols-[min(calc(75vw-16rem),44rem)_14rem] gap-[min(calc(25vw-9.25rem),10.75rem)]"
|
||||
>
|
||||
<!-- hide header and navigation on mobile for post pages -->
|
||||
<div class={!isHome && isPost ? 'hidden lg:block' : ''}>
|
||||
<MainHeader />
|
||||
<Navigation />
|
||||
<!-- only show footer on desktop-->
|
||||
<Footer class="fixed hidden lg:block" />
|
||||
</div>
|
||||
|
||||
{!isHome && isPost && <MobileHeader /> }
|
||||
<!-- show simple header on mobile for post pages -->
|
||||
{!isHome && isPost && <MobileHeader />}
|
||||
|
||||
<!-- main content area -->
|
||||
<main class="col-start-1 row-start-1">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer class={`block lg:hidden ${footerMarginClass}`} />
|
||||
</div>
|
||||
|
||||
<!-- fix position issue on ios -->
|
||||
<div class="absolute right-[min(7.25vw,3.731rem)] top-13.5 flex gap-6 [@supports(-webkit-touch-callout:none)]:top-12.5">
|
||||
<!-- <LanguageSwitcher /> -->
|
||||
<ThemeToggle />
|
||||
<!-- show footer on mobile -->
|
||||
<Footer class={`block lg:hidden ${footerMarginClass}`} />
|
||||
</div>
|
||||
<!-- <Scrollbar /> -->
|
||||
<!-- <BackToTop /> -->
|
||||
<!-- <PhotoSwipe /> -->
|
||||
|
||||
<!-- only show on mobile (fix position issue on ios / fix right distance)-->
|
||||
<div class="absolute right-7.25vw top-13.5 flex gap-6 [@supports(-webkit-touch-callout:none)]:top-12.5 min-[823px]:right-[calc(50vw-22rem)] lg:hidden">
|
||||
<ThemeToggle />
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
|
||||
<!--=============================================== Theme Toggle ===============================================-->
|
||||
<script define:vars={{ lightMode, darkMode }}>
|
||||
// Update theme
|
||||
function updateTheme() {
|
||||
// Toggle website theme
|
||||
document.documentElement.classList.toggle('dark')
|
||||
|
||||
// Get current theme
|
||||
const isDark = document.documentElement.classList.contains('dark')
|
||||
|
||||
// Update meta theme color
|
||||
const metaThemeColor = document.querySelector('meta[name="theme-color"]')
|
||||
if (metaThemeColor) {
|
||||
metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
|
||||
}
|
||||
|
||||
// Update theme configuration in local storage
|
||||
localStorage.setItem('theme', isDark ? 'dark' : 'light')
|
||||
document.dispatchEvent(new Event('theme-changed'))
|
||||
}
|
||||
|
||||
// Bind click event to the button
|
||||
function setupThemeToggle() {
|
||||
// Locate theme toggle button
|
||||
const themeToggleButtons = document.querySelectorAll('.id-theme-toggle')
|
||||
|
||||
// Add click listener to each button
|
||||
themeToggleButtons.forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
// If browser doesn't support View Transitions API, update theme directly
|
||||
if (!document.startViewTransition) {
|
||||
updateTheme()
|
||||
return
|
||||
}
|
||||
|
||||
// Temporarily add markers during animation to implement view transition and disable CSS transitions
|
||||
document.documentElement.style.setProperty('view-transition-name', 'theme-transition')
|
||||
document.documentElement.setAttribute('data-theme-transition', '')
|
||||
|
||||
// If browser supports View Transitions API, use it to update theme
|
||||
const themeTransition = document.startViewTransition(updateTheme)
|
||||
|
||||
// Remove markers after animation
|
||||
themeTransition.finished.then(() => {
|
||||
document.documentElement.style.removeProperty('view-transition-name')
|
||||
document.documentElement.removeAttribute('data-theme-transition')
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Initialize click event (on first load or page transition)
|
||||
setupThemeToggle()
|
||||
document.addEventListener('astro:after-swap', setupThemeToggle)
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -33,13 +33,14 @@ export default defineConfig({
|
|||
},
|
||||
},
|
||||
shortcuts: {
|
||||
'uno-article-underline': 'underline mx-0.25em decoration-secondary/25 font-medium underline-0.075em underline-offset-0.2em hover:(c-primary decoration-primary/60 transition)',
|
||||
'uno-article-underline': 'underline mx-0.25em decoration-secondary/50 font-medium underline-0.075em underline-offset-0.2em hover:(c-primary decoration-primary/75 transition)',
|
||||
'uno-tags-style': 'inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary/75 text-primary)',
|
||||
'uno-tag-active': 'border-secondary/75 text-primary',
|
||||
'uno-decorative-line': 'h-0.25 w-10 bg-secondary opacity-25',
|
||||
'uno-mobile-time': 'mb-5.625 text-3.5 leading-6.875 font-time lg:(hidden)',
|
||||
'uno-desktop-time': 'mb-5.625 hidden text-3.65 leading-6.875 font-time lg:(ml-2.5 inline)',
|
||||
'uno-tags-wrapper': 'mt-4.375 w-95% flex flex-wrap gap-3',
|
||||
'uno-button': 'aspect-square w-4 c-secondary active:scale-90 hover:c-primary',
|
||||
},
|
||||
rules: [
|
||||
['scrollbar-hidden', {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue