chore: format files with prettier

src/components/Socials.astro

@@ -10,19 +10,18 @@ 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
+      <LinkButton
-          href={social.href}
+        href={social.href}
-          className="link-button"
+        className="link-button"
-          title={social.name}
+        title={social.name}
-        >
+      >
-          <Fragment set:html={socialIcons[social.name]} />
+        <Fragment set:html={socialIcons[social.name]} />
-        </LinkButton>
+      </LinkButton>
-      ))
+    ))
-    }
+  }
 </div>
 
 <style>

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
 </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) 
+
+- `"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.
 
 <details><summary>Why 'primaryColorScheme' is not inside config.ts?</summary>
 
 > 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
@@ -113,11 +115,12 @@ 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 */

src/layouts/PostDetails.astro

@@ -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 />

src/pages/index.astro

@@ -48,7 +48,7 @@ const sortedPosts = getSortedPosts(posts);
       </p>
       <div class="social-wrapper">
         <div class="social-links">Social Links:</div>
-          <Socials />
+        <Socials />
       </div>
     </section>
 

src/pages/posts/[slug].astro

@@ -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) },
   }));
 

src/pages/search.astro

@@ -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,
   }));
 ---

src/pages/tags/[tag].astro

@@ -23,7 +23,7 @@ export async function getStaticPaths() {
 
   const tags = getUniqueTags(posts);
 
-  return tags.map((tag) => {
+  return tags.map(tag => {
     return {
       params: {
         tag,

src/pages/tags/index.astro

@@ -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 />

src/utils/getPostsByTag.ts

@@ -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;

src/utils/getUniqueTags.ts

@@ -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

src/utils/slugify.ts

@@ -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;