reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 03:32:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: adjust layout spacing and add comment toggle configuration

Browse source
This commit is contained in:
radishzzz 2025-03-22 04:30:25 +00:00
parent 51ae238192
commit 783fb958d5
5 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/Comments/index.astro
View file

@ -5,21 +5,23 @@
import Waline from '@/components/Comments/Waline.astro' import Waline from '@/components/Comments/Waline.astro'
import { themeConfig } from '@/config' import { themeConfig } from '@/config'
const enableComments = themeConfig.comment?.enabled ?? false
// Disqus // Disqus
// const disqusShortname = themeConfig.comment?.disqus?.shortname || '' // const disqusShortname = themeConfig.comment?.disqus?.shortname || ''
// const showDisqus = disqusShortname.trim() !== '' // const showDisqus = enableComments && disqusShortname.trim() !== ''
// Giscus // Giscus
// const giscusRepo = themeConfig.comment?.giscus?.repo || '' // const giscusRepo = themeConfig.comment?.giscus?.repo || ''
// const showGiscus = giscusRepo.trim() !== '' // const showGiscus = enableComments && giscusRepo.trim() !== ''
// Twikoo // Twikoo
// const twikooEnvId = themeConfig.comment?.twikoo?.envId || '' // const twikooEnvId = themeConfig.comment?.twikoo?.envId || ''
// const showTwikoo = twikooEnvId.trim() !== '' // const showTwikoo = enableComments && twikooEnvId.trim() !== ''
// Waline // Waline
const walineURL = themeConfig.comment?.waline?.serverURL || '' const walineURL = themeConfig.comment?.waline?.serverURL || ''
const showWaline = walineURL.trim() !== '' const showWaline = enableComments && walineURL.trim() !== ''
--- ---
<!-- {showDisqus && <Disqus />} --> <!-- {showDisqus && <Disqus />} -->
<!-- {showGiscus && <Giscus />} --> <!-- {showGiscus && <Giscus />} -->

2
src/config.ts
View file

@ -68,6 +68,8 @@ export const themeConfig: ThemeConfig = {
// COMMENT SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START // COMMENT SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
comment: { comment: {
// enable comment system
enabled: true, // true, false
// waline comment system // waline comment system
// https://waline.js.org/en/ // https://waline.js.org/en/
waline: { waline: {

9
src/layouts/Layout.astro
View file

@ -22,6 +22,9 @@ const { getLocalizedPath, isPost } = getPageInfo(Astro.url.pathname)
const localizedHome = getLocalizedPath('/') const localizedHome = getLocalizedPath('/')
const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans' const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
const MarginBottom = isPost && themeConfig.comment?.enabled
? 'mb-10' // Post page with comment system
: 'mb-12' // Other pages
--- ---
<html <html
@ -39,7 +42,7 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
> >
<Header /> <Header />
<Navbar /> <Navbar />
<main class="mb-10.5"> <main class={MarginBottom}>
<slot /> <slot />
</main> </main>
<Button supportedLangs={supportedLangs} /> <Button supportedLangs={supportedLangs} />
@ -55,7 +58,6 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
// Get current theme // Get current theme
const isDark = document.documentElement.classList.contains('dark') const isDark = document.documentElement.classList.contains('dark')
// Update meta theme color // Update meta theme color
const metaThemeColor = document.querySelector('meta[name="theme-color"]') const metaThemeColor = document.querySelector('meta[name="theme-color"]')
if (metaThemeColor) { if (metaThemeColor) {
@ -71,7 +73,6 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
function setupThemeToggle() { function setupThemeToggle() {
// Locate theme toggle button // Locate theme toggle button
const themeToggleButtons = document.querySelectorAll('.button-theme-toggle') const themeToggleButtons = document.querySelectorAll('.button-theme-toggle')
// Add click listener to each button // Add click listener to each button
themeToggleButtons.forEach((button) => { themeToggleButtons.forEach((button) => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
@ -87,7 +88,6 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
// If browser supports View Transitions API, use it to update theme // If browser supports View Transitions API, use it to update theme
const themeTransition = document.startViewTransition(updateTheme) const themeTransition = document.startViewTransition(updateTheme)
// Remove markers after animation // Remove markers after animation
themeTransition.finished.then(() => { themeTransition.finished.then(() => {
document.documentElement.style.removeProperty('view-transition-name') document.documentElement.style.removeProperty('view-transition-name')
@ -121,6 +121,5 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
setupBackButton() setupBackButton()
document.addEventListener('astro:after-swap', setupBackButton) document.addEventListener('astro:after-swap', setupBackButton)
</script> </script>
</body> </body>
</html> </html>

4
src/pages/[...index].astro
View file

@ -37,14 +37,14 @@ const postsByYear = await getPostsByYear(lang)
<Layout> <Layout>
<!-- Pinned Posts --> <!-- Pinned Posts -->
{pinnedPosts.length > 0 && ( {pinnedPosts.length > 0 && (
<section class="mb-7.5 lg:mb-10"> <section class="mb-7.5">
<div class="uno-decorative-line"></div> <div class="uno-decorative-line"></div>
<PostList posts={pinnedPosts} lang={lang} /> <PostList posts={pinnedPosts} lang={lang} />
</section> </section>
)} )}
<!-- Regular Posts --> <!-- Regular Posts -->
{[...postsByYear.entries()].map(([_year, posts]) => ( {[...postsByYear.entries()].map(([_year, posts]) => (
<section class="mb-7.5 lg:mb-10"> <section class="mb-7.5">
<div class="uno-decorative-line"></div> <div class="uno-decorative-line"></div>
<PostList posts={posts} lang={lang} /> <PostList posts={posts} lang={lang} />
</section> </section>

3
src/types/index.d.ts vendored
View file

@ -36,7 +36,8 @@ export interface ThemeConfig {
titleGap: 1 | 2 | 3 titleGap: 1 | 2 | 3
} }
comment?: { comment: {
enabled: boolean
waline?: { waline?: {
serverURL?: string serverURL?: string
emoji?: string[] emoji?: string[]