chore: format files with prettier

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;
----
-
-
-<div class={`social-icons ${centered ? "flex" : ""}`}>
-    {
-      SOCIALS.filter((social) => social.active).map((social) => (
-        <LinkButton
-          href={social.href}
-          className="link-button"
-          title={social.name}
-        >
-          <Fragment set:html={socialIcons[social.name]} />
-        </LinkButton>
-      ))
-    }
-</div>
-
-<style>
-  .social-icons {
-    @apply flex-wrap justify-center gap-1;
-  }
-  .link-button {
-    @apply p-2 sm:p-1 hover:rotate-6;
-  }
-</style>
+---
+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;
+---
+
+<div class={`social-icons ${centered ? "flex" : ""}`}>
+  {
+    SOCIALS.filter(social => social.active).map(social => (
+      <LinkButton
+        href={social.href}
+        className="link-button"
+        title={social.name}
+      >
+        <Fragment set:html={socialIcons[social.name]} />
+      </LinkButton>
+    ))
+  }
+</div>
+
+<style>
+  .social-icons {
+    @apply flex-wrap justify-center gap-1;
+  }
+  .link-button {
+    @apply p-2 sm:p-1 hover:rotate-6;
+  }
+</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"`. 
-- `"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.
 
 <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. 
+> 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,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;

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;