Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-11 23:02:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: redesign TOC

Browse Source
This commit is contained in:
saicaca
2024-10-26 15:48:54 +08:00
parent b5fddf2096
commit a336f34ea4
14 changed files with 102 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/layouts/Layout.astro
View File

@@ -342,8 +342,8 @@ const setup = () => {
}
})
*/
// Remove the delay for the first time page load
window.swup.hooks.on('link:click', () => {
// Remove the delay for the first time page load
document.documentElement.style.setProperty('--content-delay', '0ms')
// prevent elements from overlapping the navbar
@@ -374,6 +374,12 @@ const setup = () => {
if (heightExtend) {
heightExtend.classList.remove('hidden')
}
// Hide the TOC while scrolling back to top
let toc = document.getElementById('toc-wrapper');
if (toc) {
toc.classList.add('toc-not-ready')
}
});
window.swup.hooks.on('page:view', () => {
// hide the temp high element when the transition is done
@@ -384,9 +390,16 @@ const setup = () => {
});
window.swup.hooks.on('visit:end', (visit: {to: {url: string}}) => {
// execute 1s later
const heightExtend = document.getElementById('page-height-extend')
if (heightExtend) {
heightExtend.classList.add('hidden')
setTimeout(() => {
const heightExtend = document.getElementById('page-height-extend')
if (heightExtend) {
heightExtend.classList.add('hidden')
}
}, 200)
const toc = document.getElementById('toc-wrapper');
if (toc) {
toc.classList.remove('toc-not-ready')
}
});
}
@@ -397,6 +410,7 @@ if (window?.swup?.hooks) {
}
let backToTopBtn = document.getElementById('back-to-top-btn');
let toc = document.getElementById('toc-wrapper');
let navbar = document.getElementById('navbar-wrapper')
function scrollFunction() {
if (backToTopBtn) {
@@ -407,6 +421,14 @@ function scrollFunction() {
}
}
if (toc) {
if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
toc.classList.remove('toc-hide')
} else {
toc.classList.add('toc-hide')
}
}
if (!bannerEnabled) return
if (navbar) {
let threshold = window.innerHeight * 0.30 - 72 - 16

14
src/layouts/MainGridLayout.astro
View File

@@ -7,6 +7,7 @@ import Layout from './Layout.astro'
import { Icon } from 'astro-icon/components'
import { siteConfig } from '../config'
import type { MarkdownHeading } from 'astro'
import TOC from "../components/widget/TOC.astro";
interface Props {
title?: string
@@ -17,7 +18,7 @@ interface Props {
headings? : MarkdownHeading[]
}
const { title, banner, description, lang, setOGTypeArticle, headings } = Astro.props
const { title, banner, description, lang, setOGTypeArticle, headings = [] } = Astro.props
const hasBannerCredit =
siteConfig.banner.enable && siteConfig.banner.credit.enable
const hasBannerLink = !!siteConfig.banner.credit.url
@@ -67,6 +68,17 @@ const hasBannerLink = !!siteConfig.banner.credit.url
<Footer></Footer>
</div>
</div>
<!-- TOC component -->
<div id="toc-wrapper" class="transition absolute top-0 -right-[30rem] w-[30rem] flex items-center toc-hide">
<div id="toc-inner-wrapper" class="fixed top-14 w-96 h-[calc(100vh_-_20rem)] overflow-y-scroll overflow-x-hidden hide-scrollbar">
<div id="toc" class="w-full h-full transition-swup-fade">
<div class="h-8 w-full"></div>
<TOC headings={headings}></TOC>
<div class="h-8 w-full"></div>
</div>
</div>
</div>
<BackToTop></BackToTop>
</div>
</div>