fix: appearance setting not correctly set at first time & something else
This commit is contained in:
saicaca
parent
ea4a453e25
commit
377ff3a4cc
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
|
||||
import {getConfig} from "../utils/config-utils";
|
||||
|
||||
---
|
||||
|
||||
<div id="config-carrier" data-hue={getConfig().appearance.hue}>
|
||||
</div>
|
||||
|
|
@ -7,20 +7,17 @@ cover:
|
|||
alt:
|
||||
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.
|
||||
|
||||
2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
|
||||
|
||||
3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
|
||||
|
||||
## What's next
|
||||
|
||||
I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
|
||||
```markdown
|
||||
---
|
||||
title: "Your Article Title"
|
||||
published: 2023-10-05
|
||||
cover: "/images/my-cover-image.jpg"
|
||||
---
|
||||
```
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import ImageBox from "../components/misc/ImageBox.astro";
|
|||
import { fade } from 'astro:transitions';
|
||||
import {getConfig} from "../utils/config-utils";
|
||||
import {pathsEqual} from "../utils/url-utils";
|
||||
import ConfigCarrier from "../components/ConfigCarrier.astro";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
|
|
@ -87,6 +88,7 @@ if (title) {
|
|||
|
||||
</head>
|
||||
<body class=" min-h-screen transition ">
|
||||
<ConfigCarrier></ConfigCarrier>
|
||||
<GlobalStyles>
|
||||
<div id="banner-wrapper" class="absolute w-full transition-all"
|
||||
class:list={{'banner-home': isHomePage, 'banner-else': !isHomePage}}
|
||||
|
|
@ -153,7 +155,7 @@ html::view-transition-new(banner-ani) {
|
|||
object-fit: none;
|
||||
}
|
||||
</style>
|
||||
<script is:inline>
|
||||
<script>
|
||||
/* Preload fonts */
|
||||
// (async function() {
|
||||
// try {
|
||||
|
|
@ -198,9 +200,9 @@ function disableAnimation() {
|
|||
|
||||
|
||||
function activateDisplaySettings() {
|
||||
let presetList = document.getElementById("preset-list");
|
||||
let output = document.getElementById("hueValue");
|
||||
let slider = document.getElementById("colorSlider");
|
||||
let configCarrier = document.getElementById("config-carrier");
|
||||
output.innerHTML = slider.value; // Display the default slider value
|
||||
|
||||
let r = document.querySelector(':root');
|
||||
|
|
@ -215,13 +217,8 @@ function activateDisplaySettings() {
|
|||
let storedHue = localStorage.getItem('hue');
|
||||
if (storedHue) {
|
||||
setHue(storedHue);
|
||||
}
|
||||
|
||||
presetList.onclick = function(event) {
|
||||
let hue = event.target.dataset.hue;
|
||||
if (hue) {
|
||||
setHue(hue);
|
||||
}
|
||||
} else {
|
||||
setHue(configCarrier.dataset.hue);
|
||||
}
|
||||
|
||||
slider.oninput = function() {
|
||||
|
|
@ -245,8 +242,10 @@ function loadTheme() {
|
|||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.theme = 'dark';
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.theme = 'light';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -156,6 +156,7 @@ const { remarkPluginFrontmatter } = await entry.render();
|
|||
position: absolute
|
||||
left: -0.25rem
|
||||
display: block
|
||||
transition: background 0.15s ease-in-out;
|
||||
background: var(--btn-regular-bg)
|
||||
height: 100%
|
||||
width: 0.25rem
|
||||
|
|
@ -167,5 +168,8 @@ const { remarkPluginFrontmatter } = await entry.render();
|
|||
content: none
|
||||
img
|
||||
border-radius: 8px
|
||||
hr
|
||||
border-color: var(--line-divider)
|
||||
border-style: dashed
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue