Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: appearance setting not correctly set at first time & something else

This commit is contained in:
saicaca 2023-10-19 21:48:26 +08:00
parent ea4a453e25
commit 377ff3a4cc
4 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ConfigCarrier.astro Normal file
View File

@ -0,0 +1,8 @@
---
import {getConfig} from "../utils/config-utils";
---
<div id="config-carrier" data-hue={getConfig().appearance.hue}>
</div>

23
src/content/posts/cover.md
View File

@ -7,20 +7,17 @@ cover:
alt: alt:
tags: ["Fuwari", "Blogging", "Customization"] tags: ["Fuwari", "Blogging", "Customization"]
--- ---
# My First Blog Post
Published on: 2022-07-01 # How to set a cover image using the cover attribute
Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website. Select an Image: Before you start, make sure you have an image you want to use as a cover. Let's assume its filename is my-cover-image.jpg and it's located in an images directory at the root of your site.
## What I've accomplished Edit your article: At the top of your Markdown file, include the frontmatter section. Add a cover attribute and specify the path to your cover image.
1. **Installing Astro**: First, I created a new Astro project and set up my online accounts. ```markdown
---
2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder. title: "Your Article Title"
published: 2023-10-05
3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts! cover: "/images/my-cover-image.jpg"
---
## What's next ```
I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.

17
src/layouts/Layout.astro
View File

@ -9,6 +9,7 @@ import ImageBox from "../components/misc/ImageBox.astro";
import { fade } from 'astro:transitions'; import { fade } from 'astro:transitions';
import {getConfig} from "../utils/config-utils"; import {getConfig} from "../utils/config-utils";
import {pathsEqual} from "../utils/url-utils"; import {pathsEqual} from "../utils/url-utils";
import ConfigCarrier from "../components/ConfigCarrier.astro";
interface Props { interface Props {
title: string; title: string;
@ -87,6 +88,7 @@ if (title) {
</head> </head>
<body class=" min-h-screen transition "> <body class=" min-h-screen transition ">
<ConfigCarrier></ConfigCarrier>
<GlobalStyles> <GlobalStyles>
<div id="banner-wrapper" class="absolute w-full transition-all" <div id="banner-wrapper" class="absolute w-full transition-all"
class:list={{'banner-home': isHomePage, 'banner-else': !isHomePage}} class:list={{'banner-home': isHomePage, 'banner-else': !isHomePage}}
@ -153,7 +155,7 @@ html::view-transition-new(banner-ani) {
object-fit: none; object-fit: none;
} }
</style> </style>
<script is:inline> <script>
/* Preload fonts */ /* Preload fonts */
// (async function() { // (async function() {
// try { // try {
@ -198,9 +200,9 @@ function disableAnimation() {
function activateDisplaySettings() { function activateDisplaySettings() {
let presetList = document.getElementById("preset-list");
let output = document.getElementById("hueValue"); let output = document.getElementById("hueValue");
let slider = document.getElementById("colorSlider"); let slider = document.getElementById("colorSlider");
let configCarrier = document.getElementById("config-carrier");
output.innerHTML = slider.value; // Display the default slider value output.innerHTML = slider.value; // Display the default slider value
let r = document.querySelector(':root'); let r = document.querySelector(':root');
@ -215,13 +217,8 @@ function activateDisplaySettings() {
let storedHue = localStorage.getItem('hue'); let storedHue = localStorage.getItem('hue');
if (storedHue) { if (storedHue) {
setHue(storedHue); setHue(storedHue);
} } else {
setHue(configCarrier.dataset.hue);
presetList.onclick = function(event) {
let hue = event.target.dataset.hue;
if (hue) {
setHue(hue);
}
} }
slider.oninput = function() { slider.oninput = function() {
@ -245,8 +242,10 @@ function loadTheme() {
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && if (localStorage.theme === 'dark' || (!('theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)) { window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
} else { } else {
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
} }
} }

4
src/pages/posts/[slug].astro
View File

@ -156,6 +156,7 @@ const { remarkPluginFrontmatter } = await entry.render();
position: absolute position: absolute
left: -0.25rem left: -0.25rem
display: block display: block
transition: background 0.15s ease-in-out;
background: var(--btn-regular-bg) background: var(--btn-regular-bg)
height: 100% height: 100%
width: 0.25rem width: 0.25rem
@ -167,5 +168,8 @@ const { remarkPluginFrontmatter } = await entry.render();
content: none content: none
img img
border-radius: 8px border-radius: 8px
hr
border-color: var(--line-divider)
border-style: dashed
</style> </style>