mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 11:12:54 +02:00
🚀 refactor: redesign the layout, reduce page size, and significantly improve build speed
This commit is contained in:
radishzzz
parent
89e1359bb5
commit
51ae238192
18 changed files with 390 additions and 486 deletions
10
package.json
10
package.json
|
|
@ -18,7 +18,7 @@
|
|||
"@astrojs/rss": "^4.0.11",
|
||||
"@astrojs/sitemap": "^3.3.0",
|
||||
"@waline/client": "^3.5.6",
|
||||
"astro": "^5.5.3",
|
||||
"astro": "^5.5.4",
|
||||
"astro-compress": "^2.3.6",
|
||||
"astro-og-canvas": "^0.7.0",
|
||||
"astro-robots-txt": "^1.0.0",
|
||||
|
|
@ -32,16 +32,16 @@
|
|||
"sanitize-html": "^2.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^4.10.1",
|
||||
"@antfu/eslint-config": "^4.10.2",
|
||||
"@astrojs/check": "^0.9.4",
|
||||
"@types/markdown-it": "^14.1.2",
|
||||
"@types/node": "^22.13.10",
|
||||
"@types/node": "^22.13.11",
|
||||
"@types/sanitize-html": "^2.13.0",
|
||||
"@unocss/eslint-plugin": "66.1.0-beta.6",
|
||||
"@unocss/preset-attributify": "66.1.0-beta.6",
|
||||
"@unocss/reset": "66.1.0-beta.6",
|
||||
"astro-eslint-parser": "^1.2.1",
|
||||
"eslint": "^9.22.0",
|
||||
"astro-eslint-parser": "^1.2.2",
|
||||
"eslint": "^9.23.0",
|
||||
"eslint-plugin-astro": "^1.3.1",
|
||||
"lint-staged": "^15.5.0",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
|
|
|
|||
432
pnpm-lock.yaml
generated
432
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
67
src/components/Button.astro
Normal file
67
src/components/Button.astro
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
import { moreLocales } from '@/config'
|
||||
import { getNextGlobalLangPath, getNextSupportedLangPath } from '@/i18n/path'
|
||||
import { isPostPage, isTagPage } from '@/utils/page'
|
||||
|
||||
interface Props {
|
||||
supportedLangs: string[]
|
||||
}
|
||||
|
||||
const { supportedLangs } = Astro.props
|
||||
const currentPath = Astro.url.pathname
|
||||
const isPost = isPostPage(currentPath)
|
||||
const isTag = isTagPage(currentPath)
|
||||
|
||||
// Check if there are other languages to switch
|
||||
const showLanguageSwitcher = moreLocales.length > 0
|
||||
|
||||
// Check if only the supported language switch list is used
|
||||
const useSupportedLangs = isPost || (isTag && supportedLangs.length > 0)
|
||||
|
||||
// Choose a language switch list according to the page type
|
||||
const nextUrl = useSupportedLangs
|
||||
? getNextSupportedLangPath(currentPath, supportedLangs) // Switch between supported languages
|
||||
: getNextGlobalLangPath(currentPath) // Switch between all languages
|
||||
---
|
||||
|
||||
<div
|
||||
class:list={[
|
||||
'absolute flex gap-6 top-14.6 right-7.25vw min-[823px]:max-[1024px]:right-[calc(50vw-22rem)]',
|
||||
'[@supports(-webkit-touch-callout:none)]:top-13.6', // fix position issue on ios
|
||||
'lg:(fixed w-14rem top-auto bottom-47 right-[max(5.625rem,calc(50vw-34.375rem))])'
|
||||
]}
|
||||
>
|
||||
<!-- Language switcher -->
|
||||
{showLanguageSwitcher && (
|
||||
<a
|
||||
href={nextUrl}
|
||||
class="aspect-square w-4 c-secondary active:scale-90 hover:c-primary"
|
||||
aria-label="Switch website language"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
class="h-full w-full"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M19 21 12.3 2h-1L4.7 21l-2.5.2v.8h6.3v-.8L5.7 21l2-5.9h7.5l2 5.9-3.3.2v.8h7.9v-.8zM8 14.3l3.4-10.1 3.5 10.1z" />
|
||||
</svg>
|
||||
</a>
|
||||
)}
|
||||
|
||||
<!-- Theme toggle -->
|
||||
<button
|
||||
aria-label="Switch light/dark theme"
|
||||
class="button-theme-toggle aspect-square w-4.2 c-secondary active:scale-90 hover:c-primary"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -1,21 +1,18 @@
|
|||
---
|
||||
import LanguageSwitcher from '@/components/Widgets/LanguageSwitcher.astro'
|
||||
import ThemeToggle from '@/components/Widgets/ThemeToggle.astro'
|
||||
import { defaultLocale, themeConfig } from '@/config'
|
||||
import { getLangFromPath } from '@/i18n/lang'
|
||||
|
||||
interface Props {
|
||||
class?: string
|
||||
supportedLangs: string[]
|
||||
}
|
||||
|
||||
const { class: className, supportedLangs = [] } = Astro.props
|
||||
const { author } = themeConfig.site
|
||||
const { links: configLinks, startYear } = themeConfig.footer
|
||||
const { links: socialLinks, startYear } = themeConfig.footer
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
const year = Number(startYear) === currentYear
|
||||
? startYear
|
||||
: `${startYear}-${currentYear}`
|
||||
|
||||
// i18n rss path
|
||||
const currentLang = getLangFromPath(Astro.url.pathname)
|
||||
const links = configLinks.map((link) => {
|
||||
const links = socialLinks.map((link) => {
|
||||
if (link.name === 'RSS') {
|
||||
return {
|
||||
...link,
|
||||
|
|
@ -24,25 +21,12 @@ const links = configLinks.map((link) => {
|
|||
}
|
||||
return link
|
||||
})
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
const year = Number(startYear) === currentYear
|
||||
? startYear
|
||||
: `${startYear}-${currentYear}`
|
||||
---
|
||||
|
||||
<footer
|
||||
class:list={[
|
||||
'bottom-22 text-3 lg:text-3.5 leading-4.75 font-navbar',
|
||||
className,
|
||||
]}
|
||||
class="text-3 leading-4.75 font-navbar lg:text-3.5"
|
||||
lg="uno-desktop-column bottom-20"
|
||||
>
|
||||
<!-- Desktop widget -->
|
||||
<div class="mb-11.5 ml-1.5 hidden gap-7 lg:flex">
|
||||
<ThemeToggle />
|
||||
<LanguageSwitcher supportedLangs={supportedLangs} />
|
||||
</div>
|
||||
|
||||
<p>
|
||||
{links.map((link, index) => (
|
||||
<>
|
||||
|
|
|
|||
64
src/components/Header.astro
Normal file
64
src/components/Header.astro
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
import themeConfig from '@/config'
|
||||
import { ui } from '@/i18n/ui'
|
||||
import { getPageInfo } from '@/utils/page'
|
||||
|
||||
const { currentLang, getLocalizedPath, isPost } = getPageInfo(Astro.url.pathname)
|
||||
const { title, subtitle, i18nTitle } = themeConfig.site
|
||||
const { titleGap } = themeConfig.global
|
||||
|
||||
const currentUI = ui[currentLang as keyof typeof ui]
|
||||
const headerTitle = i18nTitle ? currentUI.title : title
|
||||
const headerSubtitle = i18nTitle ? currentUI.subtitle : subtitle
|
||||
|
||||
const marginBottom = {
|
||||
1: 'mb-0.9',
|
||||
2: 'mb-1.8',
|
||||
3: 'mb-2.7',
|
||||
}[titleGap] || 'mb-1.8 '
|
||||
|
||||
const postMarginBottom = {
|
||||
1: 'mb-1.9 lg:mb-0.9',
|
||||
2: 'mb-2.8 lg:mb-1.8',
|
||||
3: 'mb-3.7 lg:mb-2.7',
|
||||
}[titleGap] || 'mb-2.8 lg:mb-1.8'
|
||||
|
||||
const TitleTag = isPost ? 'h2' : 'h1'
|
||||
const SubtitleTag = isPost ? 'div' : 'h2'
|
||||
---
|
||||
|
||||
<header
|
||||
class="mb-10.5"
|
||||
lg="uno-desktop-column top-20"
|
||||
>
|
||||
<TitleTag
|
||||
class:list={[
|
||||
isPost
|
||||
? `${postMarginBottom} mt-3.2 text-5.375 c-secondary lg:(mt-0 text-9 c-primary)`
|
||||
: `${marginBottom} text-8 w-75% c-primary lg:(text-9 w-full)`,
|
||||
'font-bold font-title',
|
||||
]}
|
||||
>
|
||||
<a
|
||||
href={getLocalizedPath('/')}
|
||||
transition:name={`site-title-${currentLang}`}
|
||||
data-disable-transition-on-theme
|
||||
>
|
||||
{headerTitle}
|
||||
</a>
|
||||
</TitleTag>
|
||||
|
||||
{headerSubtitle && (
|
||||
<SubtitleTag
|
||||
class:list={[
|
||||
isPost
|
||||
? `opacity-0 lg:opacity-100`
|
||||
: 'w-75% text-balance lg:w-full',
|
||||
'c-secondary font-navbar text-3.5 lg:text-4',
|
||||
]}
|
||||
aria-hidden={isPost}
|
||||
>
|
||||
{headerSubtitle}
|
||||
</SubtitleTag>
|
||||
)}
|
||||
</header>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
---
|
||||
import themeConfig from '@/config'
|
||||
import { ui } from '@/i18n/ui'
|
||||
import { getPageInfo } from '@/utils/page'
|
||||
|
||||
const { currentLang, getLocalizedPath } = getPageInfo(Astro.url.pathname)
|
||||
const currentUI = ui[currentLang as keyof typeof ui]
|
||||
|
||||
const { title, subtitle, i18nTitle } = themeConfig.site
|
||||
const headerTitle = i18nTitle ? currentUI.title : title
|
||||
const headerSubtitle = i18nTitle ? currentUI.subtitle : subtitle
|
||||
|
||||
const { titleGap } = themeConfig.global
|
||||
const marginBottom = {
|
||||
1: 'mb-0.625',
|
||||
2: 'mb-1.875',
|
||||
3: 'mb-3.125',
|
||||
}[titleGap] || 'mb-3.125'
|
||||
---
|
||||
|
||||
<header class="mb-10.5 lg:fixed">
|
||||
<h1 class={`${marginBottom} text-8 c-primary font-bold font-title lg:(text-9 w-full) w-75%`}>
|
||||
<!-- Fix text cropping issues during view transition on ios by adding a div tag -->
|
||||
<div
|
||||
class="box-content inline-block pr-1.25"
|
||||
transition:name={`site-title-${currentLang}`}
|
||||
data-disable-transition-on-theme
|
||||
>
|
||||
<a href={getLocalizedPath('/')}>
|
||||
{headerTitle}
|
||||
</a>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
{headerSubtitle && (
|
||||
<h2 class="w-75% text-balance text-3.5 c-secondary font-navbar lg:(w-full text-4)">
|
||||
{headerSubtitle}
|
||||
</h2>
|
||||
)}
|
||||
</header>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
---
|
||||
import themeConfig from '@/config'
|
||||
import { ui } from '@/i18n/ui'
|
||||
import { getPageInfo } from '@/utils/page'
|
||||
|
||||
const { currentLang, getLocalizedPath } = getPageInfo(Astro.url.pathname)
|
||||
const currentUI = ui[currentLang as keyof typeof ui]
|
||||
|
||||
const { title, subtitle, i18nTitle } = themeConfig.site
|
||||
const headerTitle = i18nTitle ? currentUI.title : title
|
||||
const headerSubtitle = i18nTitle ? currentUI.subtitle : subtitle
|
||||
|
||||
const { titleGap } = themeConfig.global
|
||||
const marginBottom = {
|
||||
1: 'mb-1.625',
|
||||
2: 'mb-2.875',
|
||||
3: 'mb-4.125',
|
||||
}[titleGap] || 'mb-2.875'
|
||||
---
|
||||
|
||||
<header class="mb-15 lg:hidden">
|
||||
<h2 class={`${marginBottom} mt-3 text-5.375 c-secondary font-bold font-title`}>
|
||||
<!-- Fix text cropping issues during view transition on ios by adding a div tag -->
|
||||
<div
|
||||
class="box-content inline-block pr-1.25"
|
||||
transition:name={`site-title-${currentLang}`}
|
||||
data-disable-transition-on-theme
|
||||
>
|
||||
<a href={getLocalizedPath('/')}>
|
||||
{headerTitle}
|
||||
</a>
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
{headerSubtitle && (
|
||||
<div
|
||||
class="text-3.5 opacity-0"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{headerSubtitle}
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
|
@ -33,8 +33,11 @@ const navItems = [
|
|||
---
|
||||
|
||||
<nav
|
||||
class="mb-10.5 text-3.6 font-semibold leading-8.75 font-navbar"
|
||||
lg="fixed bottom-50 text-4 leading-9.72"
|
||||
class:list={[
|
||||
isPost ? 'hidden lg:block' : '',
|
||||
'mb-10.5 text-3.6 font-semibold leading-8.75 font-navbar',
|
||||
'lg:(uno-desktop-column text-4 leading-9.72 bottom-50)',
|
||||
]}
|
||||
>
|
||||
<ul>
|
||||
{navItems.map(item => (
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
---
|
||||
import { moreLocales } from '@/config'
|
||||
import { getNextGlobalLangPath, getNextSupportedLangPath } from '@/i18n/path'
|
||||
import { isPostPage, isTagPage } from '@/utils/page'
|
||||
|
||||
interface Props {
|
||||
supportedLangs: string[]
|
||||
}
|
||||
|
||||
const { supportedLangs } = Astro.props
|
||||
const currentPath = Astro.url.pathname
|
||||
const isPost = isPostPage(currentPath)
|
||||
const isTag = isTagPage(currentPath)
|
||||
|
||||
// Check if there are other languages to switch
|
||||
const showLanguageSwitcher = moreLocales.length > 0
|
||||
|
||||
// Check if only the supported language switch list is used
|
||||
const useSupportedLangs = isPost || (isTag && supportedLangs.length > 0)
|
||||
|
||||
// Choose a language switch list according to the page type
|
||||
const nextUrl = useSupportedLangs
|
||||
? getNextSupportedLangPath(currentPath, supportedLangs) // Switch between supported languages
|
||||
: getNextGlobalLangPath(currentPath) // Switch between all languages
|
||||
---
|
||||
|
||||
{showLanguageSwitcher && (
|
||||
<a
|
||||
href={nextUrl}
|
||||
class="aspect-square w-4 c-secondary active:scale-90 hover:c-primary"
|
||||
aria-label="Switch website language"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
class="h-full w-full"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M19 21 12.3 2h-1L4.7 21l-2.5.2v.8h6.3v-.8L5.7 21l2-5.9h7.5l2 5.9-3.3.2v.8h7.9v-.8zM8 14.3l3.4-10.1 3.5 10.1z" />
|
||||
</svg>
|
||||
</a>
|
||||
)}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<button
|
||||
aria-label="Switch light/dark theme"
|
||||
class="button-theme-toggle aspect-square w-4.2 c-secondary active:scale-90 hover:c-primary"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
>
|
||||
<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>
|
||||
|
|
@ -1,17 +1,11 @@
|
|||
---
|
||||
// import BackToTop from '@/components/BackToTop.astro'
|
||||
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 PhotoSwipe from '@/components/PhotoSwipe.astro'
|
||||
// import Scrollbar from '@/components/Scrollbar.astro'
|
||||
import ThemeToggle from '@/components/Widgets/ThemeToggle.astro'
|
||||
import Header from '@/components/Header.astro'
|
||||
import Navbar from '@/components/Navbar.astro'
|
||||
import Button from '@/components/Button.astro'
|
||||
import themeConfig from '@/config'
|
||||
import Head from '@/layouts/Head.astro'
|
||||
import { getPageInfo } from '@/utils/page'
|
||||
|
||||
import '@/styles/font.css'
|
||||
import '@/styles/global.css'
|
||||
import '@/styles/heti.css'
|
||||
|
|
@ -24,74 +18,32 @@ interface Props {
|
|||
}
|
||||
|
||||
const { postTitle, postDescription, postSlug, supportedLangs = [] } = Astro.props
|
||||
const { isHome, isPost, getLocalizedPath } = getPageInfo(Astro.url.pathname)
|
||||
const { getLocalizedPath, isPost } = getPageInfo(Astro.url.pathname)
|
||||
const localizedHome = getLocalizedPath('/')
|
||||
const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
|
||||
const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
|
||||
const mobileFooterMargin = isPost && themeConfig.comment?.waline?.serverURL
|
||||
? 'mt-8'
|
||||
: 'mt-12'
|
||||
---
|
||||
|
||||
<html
|
||||
lang={Astro.currentLocale || 'en-US'}
|
||||
lang={Astro.currentLocale}
|
||||
class={fontStyle}
|
||||
data-overlayscrollbars-initialize
|
||||
>
|
||||
<Head {postTitle} {postDescription} {postSlug} />
|
||||
<body data-overlayscrollbars-initialize>
|
||||
|
||||
<!-- Layout Calculation -->
|
||||
<!-- Mobile -->
|
||||
<!-- mobile width: 393px / suitable words number: 21 / content width: 21*16px=336px / padding: (393px-336px)/2=28.5px=（28.5px/393px）=7.25vw -->
|
||||
<!-- max mobile width: 1024px / max word number: 42+2=44 / max content width: 44*16px=704px / max div width: 704px/(100vw-7.25vw*2)=823.3918px/4=205.848 / max padding: 823.3918px-704px=119.3918px/2=59.6959px/16=3.731rem -->
|
||||
<!-- Desktop -->
|
||||
<!-- desktop min div width: 1024px-90px*2=844px / min words number: 32 / min content width: 32*16px=512px/16=32rem / title width: 14*16px=224px/16=14rem / min-gap: 844px-512px-224px=108px -->
|
||||
<!-- 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 w-full min-h-dvh"
|
||||
p="x-[min(7.25vw,3.731rem)] y-9 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)]"
|
||||
p="x-[min(7.25vw,3.731rem)] y-9"
|
||||
lg="p-0 max-w-[min(calc(75vw-16rem),44rem)] mx-[max(5.625rem,calc(50vw-34.375rem))] my-20"
|
||||
>
|
||||
<!-- hide header and navigation on mobile for post pages -->
|
||||
<div class={!isHome && isPost ? 'hidden lg:block' : ''}>
|
||||
<MainHeader />
|
||||
<Navigation />
|
||||
<!-- Desktop footer -->
|
||||
<Footer
|
||||
class="fixed hidden lg:block"
|
||||
supportedLangs={supportedLangs}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- show simple header on mobile for post pages -->
|
||||
{!isHome && isPost && <MobileHeader />}
|
||||
|
||||
<!-- main content area -->
|
||||
<main class="col-start-1 row-start-1">
|
||||
<Header />
|
||||
<Navbar />
|
||||
<main class="mb-10.5">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<!-- Mobile footer -->
|
||||
<Footer
|
||||
class={`block lg:hidden ${mobileFooterMargin}`}
|
||||
supportedLangs={supportedLangs}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <Scrollbar /> -->
|
||||
<!-- <BackToTop /> -->
|
||||
<!-- <PhotoSwipe /> -->
|
||||
|
||||
<!-- Mobile widget (fix position issue on ios / fix right distance)-->
|
||||
<div
|
||||
class="absolute right-7.25vw top-14.5 flex gap-6 [@supports(-webkit-touch-callout:none)]:top-13.5 min-[823px]:right-[calc(50vw-22rem)]"
|
||||
lg="hidden"
|
||||
>
|
||||
<LanguageSwitcher supportedLangs={supportedLangs} />
|
||||
<ThemeToggle />
|
||||
<Button supportedLangs={supportedLangs} />
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<!-- Theme toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
|
||||
|
|
|
|||
|
|
@ -3,11 +3,8 @@ import Layout from '@/layouts/Layout.astro'
|
|||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
<!-- Decorative line -->
|
||||
<div class="uno-decorative-line"></div>
|
||||
|
||||
<!-- 404 -->
|
||||
<h1 class="mt-10 text-8 font-title">404</h1>
|
||||
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -38,13 +38,10 @@ const { Content } = aboutEntry ? await aboutEntry.render() : { Content: null }
|
|||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
<!-- Decorative line -->
|
||||
<div class="uno-decorative-line"></div>
|
||||
|
||||
<!-- About page content -->
|
||||
<div class="heti">
|
||||
{Content && <Content />}
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -35,23 +35,18 @@ const pinnedPosts = await getPinnedPosts(lang)
|
|||
const postsByYear = await getPostsByYear(lang)
|
||||
---
|
||||
<Layout>
|
||||
<main>
|
||||
|
||||
<!-- Pinned Posts -->
|
||||
{pinnedPosts.length > 0 && (
|
||||
<section class="mb-7.5 lg:mb-10">
|
||||
<div class="uno-decorative-line"></div>
|
||||
<PostList posts={pinnedPosts} lang={lang} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- Regular Posts -->
|
||||
{[...postsByYear.entries()].map(([_year, posts]) => (
|
||||
<section class="mb-7.5 lg:mb-10">
|
||||
<div class="uno-decorative-line"></div>
|
||||
<PostList posts={posts} lang={lang} />
|
||||
</section>
|
||||
))}
|
||||
|
||||
</main>
|
||||
<!-- Pinned Posts -->
|
||||
{pinnedPosts.length > 0 && (
|
||||
<section class="mb-7.5 lg:mb-10">
|
||||
<div class="uno-decorative-line"></div>
|
||||
<PostList posts={pinnedPosts} lang={lang} />
|
||||
</section>
|
||||
)}
|
||||
<!-- Regular Posts -->
|
||||
{[...postsByYear.entries()].map(([_year, posts]) => (
|
||||
<section class="mb-7.5 lg:mb-10">
|
||||
<div class="uno-decorative-line"></div>
|
||||
<PostList posts={posts} lang={lang} />
|
||||
</section>
|
||||
))}
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -107,10 +107,8 @@ const { Content, remarkPluginFrontmatter } = await post.render()
|
|||
>
|
||||
<article class="heti mb-12.6">
|
||||
<div class="relative">
|
||||
|
||||
<!-- Desktop back home button -->
|
||||
<BackHome />
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="post-title">
|
||||
<span
|
||||
|
|
@ -134,7 +132,6 @@ const { Content, remarkPluginFrontmatter } = await post.render()
|
|||
minutes={remarkPluginFrontmatter.minutes}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<Content />
|
||||
</article>
|
||||
|
|
@ -153,8 +150,6 @@ const { Content, remarkPluginFrontmatter } = await post.render()
|
|||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Comments -->
|
||||
<Comments />
|
||||
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -34,10 +34,8 @@ const allTags = await getAllTags(lang)
|
|||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
<!-- Decorative line -->
|
||||
<div class="uno-decorative-line"></div>
|
||||
|
||||
<!-- Tags list -->
|
||||
<div class="uno-tags-wrapper">
|
||||
{allTags.map(tag => (
|
||||
|
|
@ -49,5 +47,4 @@ const allTags = await getAllTags(lang)
|
|||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -53,10 +53,8 @@ const supportedLangs = tagSupportedLangs.filter(Boolean) as string[]
|
|||
---
|
||||
|
||||
<Layout supportedLangs={supportedLangs}>
|
||||
|
||||
<!-- Decorative line -->
|
||||
<div class="uno-decorative-line"></div>
|
||||
|
||||
<!-- Tags list -->
|
||||
<div class="uno-tags-wrapper">
|
||||
{allTags.map(tagName => (
|
||||
|
|
@ -77,5 +75,4 @@ const supportedLangs = tagSupportedLangs.filter(Boolean) as string[]
|
|||
<div class="mt-10.5">
|
||||
<PostList posts={posts} lang={lang} />
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ export default defineConfig({
|
|||
},
|
||||
},
|
||||
shortcuts: {
|
||||
'uno-desktop-column': 'fixed w-14rem right-[max(5.625rem,calc(50vw-34.375rem))]',
|
||||
'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-decorative-line': 'h-0.25 w-10 bg-secondary opacity-25 mb-4.5 lg:(w-11 mb-6)',
|
||||
'uno-tags-wrapper': 'w-95% flex flex-wrap gap-x-3 gap-y-3.2 lg:w-100%',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue