Add tailwind plugin and some small changes

itsjoeoui · Oct 15, 2023 · fe10a4f · fe10a4f
1 parent 1dbeda3
commit fe10a4f
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 19 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,5 +1,5 @@
 {
-  "plugins": ["prettier-plugin-astro"],
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
   "overrides": [
     {
       "files": "*.astro",

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "format": "prettier . --write"
+    "format": "prettier --plugin=prettier-plugin-astro --plugin=prettier-plugin-tailwindcss --write ."
   },
   "dependencies": {
     "@astrojs/mdx": "^1.1.2",

diff --git a/src/components/home/LatestPosts.astro b/src/components/home/LatestPosts.astro
@@ -3,7 +3,6 @@ import { getCollection } from "astro:content";
 import PostCard from "@/components/shared/PostCard.astro";
 
 const publishedPostEntries = await getCollection("posts", ({ data }) => {
-
   return data.isDraft !== true;
 });
 ---

diff --git a/src/components/shared/PostCard.astro b/src/components/shared/PostCard.astro
@@ -13,21 +13,22 @@ const { title, slug, date, isDraft } = Astro.props;
   href={`/posts/${slug}`}
   class="rounded-md border border-neutral-800 p-4 transition hover:bg-neutral-800"
 >
-  <div class="text-md flex items-center gap-1 text-neutral-300">
-    <div>
+  <div class="text-md flex flex-col gap-1 sm:flex-row sm:items-center">
+    <div class="text-neutral-300">
       {title}
     </div>
-    <div class="grow"></div>
-    {
-      isDraft && (
-        <>
-          <div class="text-sm text-neutral-500">Draft</div>
-          <div class="px-0.5" />
-        </>
-      )
-    }
-    <div>
-      {date.toLocaleDateString("en-US", { month: "short", day: "numeric" })}
+    <div class="sm:grow"></div>
+    <div class="flex">
+      {
+        isDraft && (
+          <div class="order-2 px-2 text-sm text-neutral-500 sm:order-1">
+            Draft
+          </div>
+        )
+      }
+      <div class="order-1 sm:order-2">
+        {date.toLocaleDateString("en-US", { month: "short", day: "numeric" })}
+      </div>
     </div>
   </div>
 </a>
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
@@ -44,7 +44,7 @@ const { Content } = await entry.render();
 
     <div class="py-6"></div>
 
-    <Contact/>
+    <Contact />
 
     <div class="py-2"></div>
   </div>

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -9,11 +9,11 @@
 }
 
 .post h3 {
-  @apply my-1 flex gap-1 text-xl text-neutral-300 font-semibold;
+  @apply my-1 flex gap-1 text-xl font-semibold text-neutral-300;
 }
 
 .post p {
-  @apply my-0.5 text-base leading-relaxed text-neutral-400 py-2;
+  @apply my-0.5 py-2 text-base leading-relaxed text-neutral-400;
 }
 
 .post li {