rober/blog-robertops-v2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: code cleanup

Browse Source
This commit is contained in:
saicaca 2024-10-27 18:16:10 +08:00
parent ec179a2127
commit 2c716931f8
4 changed files with 44 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/GlobalStyles.astro
View File

@ -49,9 +49,6 @@ rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30)
:root :root
--radius-large 1rem --radius-large 1rem
--banner-height-home 65vh
--banner-height 35vh
--content-delay 150ms --content-delay 150ms
color_set({ color_set({

12
src/constants/constants.ts
View File

@ -3,6 +3,14 @@ export const UNCATEGORIZED = '__uncategorized__'
export const PAGE_SIZE = 8 export const PAGE_SIZE = 8
export const LIGHT_MODE = 'light', export const LIGHT_MODE = 'light',
DARK_MODE = 'dark', DARK_MODE = 'dark',
AUTO_MODE = 'auto' AUTO_MODE = 'auto'
export const DEFAULT_THEME = AUTO_MODE export const DEFAULT_THEME = AUTO_MODE
// Banner height unit: vh
export const BANNER_HEIGHT = 35
export const BANNER_HEIGHT_EXTEND = 30
export const BANNER_HEIGHT_HOME = BANNER_HEIGHT + BANNER_HEIGHT_EXTEND
// The height the main panel overlaps the banner, unit: rem
export const MAIN_PANEL_OVERLAPS_BANNER_HEIGHT = 3.5

40
src/layouts/Layout.astro
View File

@ -12,6 +12,9 @@ import {
DARK_MODE, DARK_MODE,
DEFAULT_THEME, DEFAULT_THEME,
LIGHT_MODE, LIGHT_MODE,
BANNER_HEIGHT,
BANNER_HEIGHT_EXTEND,
BANNER_HEIGHT_HOME,
} from '../constants/constants' } from '../constants/constants'
import { defaultFavicons } from '../constants/icon' import { defaultFavicons } from '../constants/icon'
import type { Favicon } from '../types/config' import type { Favicon } from '../types/config'
@ -61,8 +64,8 @@ if (!lang) {
const siteLang = lang.replace('_', '-') const siteLang = lang.replace('_', '-')
const bannerOffsetByPosition = { const bannerOffsetByPosition = {
top: '30vh', top: `${BANNER_HEIGHT_EXTEND}vh`,
center: '15vh', center: `${BANNER_HEIGHT_EXTEND / 2}vh`,
bottom: '0', bottom: '0',
} }
const bannerOffset = const bannerOffset =
@ -153,11 +156,16 @@ const bannerOffset =
} }
</style> </style>
<style is:global define:vars={{ bannerOffset }}> <style is:global define:vars={{
bannerOffset,
'banner-height-home': `${BANNER_HEIGHT_HOME}vh`,
'banner-height': `${BANNER_HEIGHT}vh`,
'banner-height-extend': `${BANNER_HEIGHT_EXTEND}vh`
}}>
@tailwind components; @tailwind components;
@layer components { @layer components {
.enable-banner.is-home #banner-wrapper { .enable-banner.is-home #banner-wrapper {
@apply h-[var(--banner-height-home)] translate-y-[30vh] @apply h-[var(--banner-height-home)] translate-y-[var(--banner-height-extend)]
} }
.enable-banner #banner-wrapper { .enable-banner #banner-wrapper {
@apply h-[var(--banner-height-home)] @apply h-[var(--banner-height-home)]
@ -170,13 +178,13 @@ const bannerOffset =
@apply h-[var(--banner-height-home)] translate-y-[var(--bannerOffset)] @apply h-[var(--banner-height-home)] translate-y-[var(--bannerOffset)]
} }
.enable-banner.is-home #main-grid { .enable-banner.is-home #main-grid {
@apply translate-y-[30vh]; @apply translate-y-[var(--banner-height-extend)];
} }
.enable-banner #top-row { .enable-banner #top-row {
@apply h-[calc(var(--banner-height-home)_-_4.5rem)] transition-all duration-300 @apply h-[calc(var(--banner-height-home)_-_4.5rem)] transition-all duration-300
} }
.enable-banner.is-home #sidebar-sticky { .enable-banner.is-home #sidebar-sticky {
@apply top-[calc(-30vh_+_1rem)] @apply top-[calc(1rem_-_var(--banner-height-extend))]
} }
.navbar-hidden { .navbar-hidden {
@apply opacity-0 -translate-y-16 @apply opacity-0 -translate-y-16
@ -194,8 +202,14 @@ import {
} from 'overlayscrollbars'; } from 'overlayscrollbars';
import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils"; import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils";
import {pathsEqual, url} from "../utils/url-utils"; import {pathsEqual, url} from "../utils/url-utils";
import {
BANNER_HEIGHT,
BANNER_HEIGHT_HOME,
BANNER_HEIGHT_EXTEND,
MAIN_PANEL_OVERLAPS_BANNER_HEIGHT
} from "../constants/constants";
/* Preload fonts */ /* Preload fonts */
// (async function() { // (async function() {
// try { // try {
// await Promise.all([ // await Promise.all([
@ -345,7 +359,7 @@ const setup = () => {
if (!bannerEnabled) { if (!bannerEnabled) {
return return
} }
let threshold = window.innerHeight * 0.30 - 72 - 16 let threshold = window.innerHeight * (BANNER_HEIGHT / 100) - 72 - 16
let navbar = document.getElementById('navbar-wrapper') let navbar = document.getElementById('navbar-wrapper')
if (!navbar || !document.body.classList.contains('lg:is-home')) { if (!navbar || !document.body.classList.contains('lg:is-home')) {
return return
@ -408,7 +422,7 @@ let backToTopBtn = document.getElementById('back-to-top-btn');
let toc = document.getElementById('toc-wrapper'); let toc = document.getElementById('toc-wrapper');
let navbar = document.getElementById('navbar-wrapper') let navbar = document.getElementById('navbar-wrapper')
function scrollFunction() { function scrollFunction() {
let bannerHeight = window.innerHeight * 0.30 let bannerHeight = window.innerHeight * (BANNER_HEIGHT / 100)
if (backToTopBtn) { if (backToTopBtn) {
if (document.body.scrollTop > bannerHeight || document.documentElement.scrollTop > bannerHeight) { if (document.body.scrollTop > bannerHeight || document.documentElement.scrollTop > bannerHeight) {
@ -428,10 +442,14 @@ function scrollFunction() {
if (!bannerEnabled) return if (!bannerEnabled) return
if (navbar) { if (navbar) {
let threshold = window.innerHeight * 0.30 - 72 - 16 const NAVBAR_HEIGHT = 72
const MAIN_PANEL_EXCESS_HEIGHT = MAIN_PANEL_OVERLAPS_BANNER_HEIGHT * 16 // The height the main panel overlaps the banner
let bannerHeight = BANNER_HEIGHT
if (document.body.classList.contains('lg:is-home') && window.innerWidth >= 1024) { if (document.body.classList.contains('lg:is-home') && window.innerWidth >= 1024) {
threshold = window.innerHeight * 0.60 - 72 - 16 bannerHeight = BANNER_HEIGHT_HOME
} }
let threshold = window.innerHeight * (bannerHeight / 100) - NAVBAR_HEIGHT - MAIN_PANEL_EXCESS_HEIGHT - 16
if (document.body.scrollTop >= threshold || document.documentElement.scrollTop >= threshold) { if (document.body.scrollTop >= threshold || document.documentElement.scrollTop >= threshold) {
navbar.classList.add('navbar-hidden') navbar.classList.add('navbar-hidden')
} else { } else {

7
src/layouts/MainGridLayout.astro
View File

@ -9,6 +9,7 @@ import { siteConfig } from '../config'
import type { MarkdownHeading } from 'astro' import type { MarkdownHeading } from 'astro'
import TOC from "../components/widget/TOC.astro"; import TOC from "../components/widget/TOC.astro";
import ImageWrapper from "../components/misc/ImageWrapper.astro"; import ImageWrapper from "../components/misc/ImageWrapper.astro";
import {BANNER_HEIGHT, BANNER_HEIGHT_EXTEND, MAIN_PANEL_OVERLAPS_BANNER_HEIGHT} from "../constants/constants";
interface Props { interface Props {
title?: string title?: string
@ -23,6 +24,8 @@ const { title, banner, description, lang, setOGTypeArticle, headings = [] } = As
const hasBannerCredit = const hasBannerCredit =
siteConfig.banner.enable && siteConfig.banner.credit.enable siteConfig.banner.enable && siteConfig.banner.credit.enable
const hasBannerLink = !!siteConfig.banner.credit.url const hasBannerLink = !!siteConfig.banner.credit.url
const mainPanelTop = siteConfig.banner.enable ? `calc(${BANNER_HEIGHT}vh - ${MAIN_PANEL_OVERLAPS_BANNER_HEIGHT}rem)` : "5.5rem"
--- ---
<Layout title={title} banner={banner} description={description} lang={lang} setOGTypeArticle={setOGTypeArticle}> <Layout title={title} banner={banner} description={description} lang={lang} setOGTypeArticle={setOGTypeArticle}>
@ -36,7 +39,7 @@ const hasBannerLink = !!siteConfig.banner.credit.url
</div> </div>
<!-- Banner --> <!-- Banner -->
{siteConfig.banner.enable && <div id="banner-wrapper" class="absolute z-10 -top-[30vh] w-full transition duration-700 overflow-hidden"> {siteConfig.banner.enable && <div id="banner-wrapper" class=`absolute z-10 w-full transition duration-700 overflow-hidden` style=`top: -${BANNER_HEIGHT_EXTEND}vh`>
<ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]} <ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
src={siteConfig.banner.src} position={siteConfig.banner.position} src={siteConfig.banner.src} position={siteConfig.banner.position}
> >
@ -44,7 +47,7 @@ const hasBannerLink = !!siteConfig.banner.credit.url
</div>} </div>}
<!-- Main content --> <!-- Main content -->
<div class="absolute w-full z-30 pointer-events-none" class:list={[{"top-[30vh]": siteConfig.banner.enable, "top-[5.5rem]": !siteConfig.banner.enable}]}> <div class="absolute w-full z-30 pointer-events-none" style=`top: ${mainPanelTop}`>
<!-- The pointer-events-none here prevent blocking the click event of the TOC --> <!-- The pointer-events-none here prevent blocking the click event of the TOC -->
<div class="relative max-w-[var(--page-width)] mx-auto pointer-events-auto"> <div class="relative max-w-[var(--page-width)] mx-auto pointer-events-auto">
<div id="main-grid" class="transition duration-700 w-full left-0 right-0 grid grid-cols-[17.5rem_auto] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto] <div id="main-grid" class="transition duration-700 w-full left-0 right-0 grid grid-cols-[17.5rem_auto] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto]