chore: add Prettier configuration and plugins for code formatting

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-organize-imports"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

package-lock.json

@@ -15,7 +15,8 @@
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.19",
         "prettier": "^3.8.1",
-        "prettier-plugin-astro": "^0.14.1"
+        "prettier-plugin-astro": "^0.14.1",
+        "prettier-plugin-organize-imports": "^4.3.0"
       }
     },
     "node_modules/@astrojs/compiler": {
@@ -4446,6 +4447,7 @@
       "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -4471,6 +4473,23 @@
         "node": "^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/prettier-plugin-organize-imports": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-4.3.0.tgz",
+      "integrity": "sha512-FxFz0qFhyBsGdIsb697f/EkvHzi5SZOhWAjxcx2dLt+Q532bAlhswcXGYB1yzjZ69kW8UoadFBw7TyNwlq96Iw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "prettier": ">=2.0",
+        "typescript": ">=2.9",
+        "vue-tsc": "^2.1.0 || 3"
+      },
+      "peerDependenciesMeta": {
+        "vue-tsc": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.30.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",

package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",
     "prettier": "^3.8.1",
-    "prettier-plugin-astro": "^0.14.1"
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-organize-imports": "^4.3.0"
   }
 }

src/components/Welcome.astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from 'astro:assets';
+import { Image } from "astro:assets";
 import profileImage from "@/assets/images/profile.jpg";
 import socialEmail from "@/assets/images/social-email.svg";
 import socialFacebook from "@/assets/images/social-facebook.svg";
@@ -22,19 +22,39 @@ import socialX from "@/assets/images/social-x.svg";
       href="https://www.linkedin.com/in/dhemas-nurjaya-030890bb"
       aria-label="Linkedin"
     >
-      <Image src={socialLinkedIn} alt="LinkedIn" loading="eager" class="w-6 h-6 invert" />
+      <Image
+        src={socialLinkedIn}
+        alt="LinkedIn"
+        loading="eager"
+        class="w-6 h-6 invert"
+      />
     </a>
     <a href="https://github.com/dhemasnurjaya" aria-label="Github">
-      <Image src={socialGithub} alt="Github" loading="eager" class="w-6 h-6 invert" />
+      <Image
+        src={socialGithub}
+        alt="Github"
+        loading="eager"
+        class="w-6 h-6 invert"
+      />
     </a>
     <a href="https://x.com/dhemaseka" aria-label="X">
       <Image src={socialX} alt="X" loading="eager" class="w-6 h-6 invert" />
     </a>
     <a href="https://www.facebook.com/Dhemas" aria-label="Facebook">
-      <Image src={socialFacebook} alt="Facebook" loading="eager" class="w-6 h-6 invert" />
+      <Image
+        src={socialFacebook}
+        alt="Facebook"
+        loading="eager"
+        class="w-6 h-6 invert"
+      />
     </a>
     <a href="mailto:dhemasnurjaya@gmail.com" aria-label="Email">
-      <Image src={socialEmail} alt="Email" loading="eager" class="w-6 h-6 invert" />
+      <Image
+        src={socialEmail}
+        alt="Email"
+        loading="eager"
+        class="w-6 h-6 invert"
+      />
     </a>
   </div>
   <div class="mt-24"></div>

src/pages/index.astro

@@ -6,9 +6,6 @@ import Layout from "@/layouts/Layout.astro";
 // Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
 ---
 
-<Layout
+<Layout title="Dhemas Nurjaya" description="Welcome to my personal website">
-  title="Dhemas Nurjaya"
-  description="Welcome to my personal website"
->
   <Welcome />
 </Layout>

src/pages/posts/[id].astro

@@ -1,5 +1,10 @@
 ---
-import { getCollection, render, type CollectionEntry, type RenderResult } from "astro:content";
+import {
+  getCollection,
+  render,
+  type CollectionEntry,
+  type RenderResult,
+} from "astro:content";
 import Layout from "@/layouts/Layout.astro";
 import BlogPost from "@/components/BlogPost.astro";
 
@@ -13,7 +18,7 @@ export async function getStaticPaths() {
         params: { id },
         props: { post, content },
       };
-    })
+    }),
   );
   return paths;
 }