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: post styles, next/prev post btn, display-settings, etc.

Browse Source 
(cherry picked from commit b7ddd92729d52a8c43d72010b743f7e3477f1001)
This commit is contained in:
saicaca
2023-10-02 01:52:08 +08:00
parent 8ed0aa071f
commit 26408b0b7e
19 changed files with 258 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/layouts/Layout.astro
View File

@@ -46,11 +46,14 @@ const myFade = {
// defines global css variables
// why doing this in Layout instead of GlobalStyles: https://github.com/withastro/astro/issues/6728#issuecomment-1502203757
const viConf = getConfig();
const hue = viConf.appearance.hue;
const configHue = viConf.appearance.hue;
if (!banner || typeof banner !== 'string' || banner.trim() === '') {
banner = viConf.banner.url;
}
// TODO don't use post cover as banner for now
banner = viConf.banner.url;
---
<!DOCTYPE html>
@@ -71,7 +74,7 @@ if (!banner || typeof banner !== 'string' || banner.trim() === '') {
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon/favicon-dark-180.png" sizes="180x180">
<link rel="icon" media="(prefers-color-scheme: dark)" href="/favicon/favicon-dark-192.png" sizes="192x192">
<style define:vars={{ hue }}></style> <!-- defines global css variables -->
<style define:vars={{ configHue }}></style> <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
<title>{title}</title>
</head>
@@ -82,7 +85,7 @@ if (!banner || typeof banner !== 'string' || banner.trim() === '') {
id="banner-wrapper"
>
<!-- TODO the transition here is not correct -->
<ImageBox id="boxtest" class="object-center object-cover h-full"
<ImageBox id="boxtest" class:list={["object-center object-cover h-full", {"hidden": !viConf.banner.enable}]}
src={banner} transition:animate="fade"
>
</ImageBox>
@@ -93,6 +96,7 @@ if (!banner || typeof banner !== 'string' || banner.trim() === '') {
</html>
<style is:global>
:root {
--hue: var(--configHue);
--accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101;
@@ -169,7 +173,13 @@ function loadTheme() {
document.documentElement.classList.remove('dark');
}
}
loadTheme();
function loadHue() {
const hue = localStorage.hue;
if (hue) {
document.documentElement.style.setProperty('--hue', hue);
}
}
function setBannerHeight() {
const banner = document.getElementById('banner-wrapper');
@@ -182,10 +192,15 @@ function setBannerHeight() {
}
}
/* Load light/dark mode setting */
/* Load settings when entering the site */
loadTheme();
loadHue();
/* Load settings before swapping */
/* astro:after-swap event happened before swap animation */
document.addEventListener('astro:after-swap', () => {
setBannerHeight();
loadTheme();
loadHue();
}, { once: false });
</script>

16
src/layouts/MainGridLayout.astro
View File

@@ -5,10 +5,12 @@ import SideBar from "../components/widget/SideBar.astro";
import {pathsEqual} from "../utils/url-utils";
import Footer from "../components/Footer.astro";
import BackToTop from "../components/control/BackToTop.astro";
import DisplaySetting from "../components/widget/DisplaySetting.astro";
import {getConfig} from "../utils/config-utils";
interface Props {
title: string;
banner: string;
banner?: string;
}
const { title, banner } = Astro.props;
@@ -18,14 +20,16 @@ const isHomePage = pathsEqual(Astro.url.pathname, '/') || pathsEqual(Astro.url.p
const pageWidth = "1200px";
const sidebarWidth = "280px";
const enableBanner = getConfig().banner.enable;
---
<Layout title={title} banner={banner}>
<div class=`max-w-[1200px] min-h-screen grid grid-cols-[280px_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto] mx-auto gap-4 relative overflow-hidden `
transition:animate="none"
>
<div id="top-row" class="col-span-2 grid-rows-1" class:list={{
'min-h-[calc(var(--banner-height-home)_-_72px)]': isHomePage,
'min-h-[calc(var(--banner-height)_-_72px)]': !isHomePage}}
<div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={{
'min-h-[calc(var(--banner-height-home)_-_72px)]': enableBanner && isHomePage,
'min-h-[calc(var(--banner-height)_-_72px)]': enableBanner && !isHomePage,}}
>
<Navbar transition:animate="fade" transition:persist></Navbar>
</div>
@@ -37,8 +41,8 @@ const sidebarWidth = "280px";
</div>
<div class="grid-rows-3 col-span-2 mt-4" transition:persist>
<Footer></Footer>
<div class="grid-rows-3 col-span-2 mt-4" transition:persist transition:animate="fade">
<Footer transition:persist></Footer>
</div>
<BackToTop></BackToTop>
</div>