mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 11:29:33 +08:00
chore: format files with prettier
This commit is contained in:
@@ -10,10 +10,9 @@ export interface Props {
|
||||
const { centered = false } = Astro.props;
|
||||
---
|
||||
|
||||
|
||||
<div class={`social-icons ${centered ? "flex" : ""}`}>
|
||||
{
|
||||
SOCIALS.filter((social) => social.active).map((social) => (
|
||||
SOCIALS.filter(social => social.active).map(social => (
|
||||
<LinkButton
|
||||
href={social.href}
|
||||
className="link-button"
|
||||
|
||||
@@ -59,7 +59,8 @@ Thus, to choose primary color scheme instead of prefers-color-scheme, we have to
|
||||
</script>
|
||||
```
|
||||
|
||||
The **primaryColorScheme** variable can hold three values_ `"light"`, `"dark"`, `"none"`.
|
||||
The **primaryColorScheme** variable can hold three values\_ `"light"`, `"dark"`, `"none"`.
|
||||
|
||||
- `"none"` - system's prefers-color-scheme. (default)
|
||||
- `"light"` - use light mode as primary color scheme.
|
||||
- `"dark"` - use dark mode as primary color scheme.
|
||||
@@ -69,6 +70,7 @@ The **primaryColorScheme** variable can hold three values_ `"light"`, `"dark"`,
|
||||
> To avoid color flickering on page reload, we have to place some JavaScript codes in the inline script tag. It solves the problem of flickering, but as a trade-off, we cannot use ESM imports anymore.
|
||||
|
||||
[Click here](https://docs.astro.build/en/core-concepts/astro-components/#client-side-scripts) to know more about Astro's inline script.
|
||||
|
||||
</details>
|
||||
|
||||
## Customize color schemes
|
||||
@@ -118,6 +120,7 @@ Here is the detail explaination of color properties.
|
||||
| `--color-border` | Border color. Especially used in horizontal row (hr) |
|
||||
|
||||
Here is an example of changing the light color scheme.
|
||||
|
||||
```css
|
||||
@layer base {
|
||||
/* lobster color scheme */
|
||||
|
||||
@@ -43,7 +43,7 @@ const { title, author, description, ogImage, datetime, tags } = frontmatter;
|
||||
</article>
|
||||
|
||||
<ul class="tags-container">
|
||||
{tags.map((tag) => <Tag name={tag} />)}
|
||||
{tags.map(tag => <Tag name={tag} />)}
|
||||
</ul>
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@@ -30,7 +30,7 @@ type PagePaths = {
|
||||
export async function getStaticPaths() {
|
||||
const posts = await Astro.glob<Frontmatter>("../../contents/**/*.md");
|
||||
|
||||
let postResult: PostResult = posts.map((post) => {
|
||||
let postResult: PostResult = posts.map(post => {
|
||||
return {
|
||||
params: {
|
||||
slug: slugify(post.frontmatter),
|
||||
@@ -41,7 +41,7 @@ export async function getStaticPaths() {
|
||||
};
|
||||
});
|
||||
|
||||
const pagePaths: PagePaths = getPageNumbers(posts.length).map((pageNum) => ({
|
||||
const pagePaths: PagePaths = getPageNumbers(posts.length).map(pageNum => ({
|
||||
params: { slug: String(pageNum) },
|
||||
}));
|
||||
|
||||
|
||||
@@ -13,10 +13,10 @@ const posts = await Astro.glob<Frontmatter>("../contents/**/*.md");
|
||||
// List of items to search in
|
||||
const searchList = posts
|
||||
.filter(({ frontmatter }) => !frontmatter.draft)
|
||||
.map((post) => ({
|
||||
.map(post => ({
|
||||
title: post.frontmatter.title,
|
||||
description: post.frontmatter.description,
|
||||
headings: post.getHeadings().map((h) => h.text),
|
||||
headings: post.getHeadings().map(h => h.text),
|
||||
frontmatter: post.frontmatter,
|
||||
}));
|
||||
---
|
||||
|
||||
@@ -23,7 +23,7 @@ export async function getStaticPaths() {
|
||||
|
||||
const tags = getUniqueTags(posts);
|
||||
|
||||
return tags.map((tag) => {
|
||||
return tags.map(tag => {
|
||||
return {
|
||||
params: {
|
||||
tag,
|
||||
|
||||
@@ -17,7 +17,7 @@ let tags = getUniqueTags(posts);
|
||||
<Header activeNav="tags" />
|
||||
<Main pageTitle="Tags" pageDesc="All the tags used in posts.">
|
||||
<ul>
|
||||
{tags.map((tag) => <Tag name={tag} size="lg" />)}
|
||||
{tags.map(tag => <Tag name={tag} size="lg" />)}
|
||||
</ul>
|
||||
</Main>
|
||||
<Footer />
|
||||
|
||||
@@ -3,6 +3,6 @@ import type { MarkdownInstance } from "astro";
|
||||
import type { Frontmatter } from "../types";
|
||||
|
||||
const getPostsByTag = (posts: MarkdownInstance<Frontmatter>[], tag: string) =>
|
||||
posts.filter((post) => slufigyAll(post.frontmatter.tags).includes(tag));
|
||||
posts.filter(post => slufigyAll(post.frontmatter.tags).includes(tag));
|
||||
|
||||
export default getPostsByTag;
|
||||
|
||||
@@ -5,9 +5,9 @@ import type { Frontmatter } from "../types";
|
||||
const getUniqueTags = (posts: MarkdownInstance<Frontmatter>[]) => {
|
||||
let tags: string[] = [];
|
||||
const filteredPosts = posts.filter(({ frontmatter }) => !frontmatter.draft);
|
||||
filteredPosts.forEach((post) => {
|
||||
filteredPosts.forEach(post => {
|
||||
tags = [...tags, ...post.frontmatter.tags]
|
||||
.map((tag) => slugifyStr(tag))
|
||||
.map(tag => slugifyStr(tag))
|
||||
.filter(
|
||||
(value: string, index: number, self: string[]) =>
|
||||
self.indexOf(value) === index
|
||||
|
||||
@@ -8,6 +8,6 @@ export const slugifyStr = (str: string) => slugger(str);
|
||||
const slugify = (frontmatter: Frontmatter) =>
|
||||
frontmatter.slug ? slugger(frontmatter.slug) : slugger(frontmatter.title);
|
||||
|
||||
export const slufigyAll = (arr: string[]) => arr.map((str) => slugifyStr(str));
|
||||
export const slufigyAll = (arr: string[]) => arr.map(str => slugifyStr(str));
|
||||
|
||||
export default slugify;
|
||||
|
||||
Reference in New Issue
Block a user