From 20822c422aff32a7aa1f637b357a13caa498c589 Mon Sep 17 00:00:00 2001 From: Sat Naing Date: Sun, 16 Oct 2022 23:53:16 +0630 Subject: [PATCH] chore: format files with prettier --- src/components/Socials.astro | 69 +++++++++---------- ...tomizing-astropaper-theme-color-schemes.md | 15 ++-- src/layouts/PostDetails.astro | 2 +- src/pages/index.astro | 2 +- src/pages/posts/[slug].astro | 4 +- src/pages/search.astro | 4 +- src/pages/tags/[tag].astro | 2 +- src/pages/tags/index.astro | 2 +- src/utils/getPostsByTag.ts | 2 +- src/utils/getUniqueTags.ts | 4 +- src/utils/slugify.ts | 2 +- 11 files changed, 55 insertions(+), 53 deletions(-) diff --git a/src/components/Socials.astro b/src/components/Socials.astro index 6b5983c..70dd495 100755 --- a/src/components/Socials.astro +++ b/src/components/Socials.astro @@ -1,35 +1,34 @@ ---- -import { SOCIALS } from "src/config"; -import LinkButton from "./LinkButton.astro"; -import socialIcons from "@assets/socialIcons"; - -export interface Props { - centered?: boolean; -} - -const { centered = false } = Astro.props; ---- - - -
- { - SOCIALS.filter((social) => social.active).map((social) => ( - - - - )) - } -
- - \ No newline at end of file +--- +import { SOCIALS } from "src/config"; +import LinkButton from "./LinkButton.astro"; +import socialIcons from "@assets/socialIcons"; + +export interface Props { + centered?: boolean; +} + +const { centered = false } = Astro.props; +--- + +
+ { + SOCIALS.filter(social => social.active).map(social => ( + + + + )) + } +
+ + diff --git a/src/contents/customizing-astropaper-theme-color-schemes.md b/src/contents/customizing-astropaper-theme-color-schemes.md index ba57b2c..e942183 100644 --- a/src/contents/customizing-astropaper-theme-color-schemes.md +++ b/src/contents/customizing-astropaper-theme-color-schemes.md @@ -59,16 +59,18 @@ Thus, to choose primary color scheme instead of prefers-color-scheme, we have to ``` -The **primaryColorScheme** variable can hold three values_ `"light"`, `"dark"`, `"none"`. -- `"none"` - system's prefers-color-scheme. (default) +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. +- `"dark"` - use dark mode as primary color scheme.
Why 'primaryColorScheme' is not inside config.ts? -> 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. +> 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. +
## Customize color schemes @@ -113,18 +115,19 @@ Here is the detail explaination of color properties. | `--color-fill` | Primary color of the website. Usually the main background. | | `--color-text-base` | Secondary color of the website. Usually the text color. | | `--color-accent` | Accent color of the website. Link color, hover color etc. | -| `--color-card` | Card, scrollbar and code background color. | +| `--color-card` | Card, scrollbar and code background color. | | `--color-card-muted` | Card and scrollbar background color for hover state etc. | | `--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 */ :root { --color-fill: 246, 238, 225; --color-text-base: 1, 44, 86; - --color-accent: 225, 74, 57; + --color-accent: 225, 74, 57; --color-card: 220, 152, 145; --color-card-muted: 233, 119, 106; --color-border: 220, 152, 145; diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro index 5548cb0..bd0ab53 100644 --- a/src/layouts/PostDetails.astro +++ b/src/layouts/PostDetails.astro @@ -43,7 +43,7 @@ const { title, author, description, ogImage, datetime, tags } = frontmatter;