Update styles

package.json

@@ -27,6 +27,7 @@
     "astro-emoji": "^1.2.0",
     "astro-icon": "^1.1.5",
     "astro-seo": "^0.8.4",
+    "moment": "^2.30.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "remark-code-titles": "^0.1.2",

src/components/ui/NoteItem.jsx

@@ -1,6 +1,8 @@
+import moment from 'moment'
+
 export default function NoteItem({ note }) {
   const title = note.data.title
-  const pubDate = new Date(note.data.pubDate).toDateString().slice(4, 15)
+  const pubDate = moment(note.data.pubDate).format('MMM D YYYY')
 
   return (
     <a href={`/notes/${note.id}`}>

src/layouts/Note.astro

@@ -1,8 +1,10 @@
 ---
 import Main from './Main.astro'
+import moment from 'moment'
 
 const { frontmatter } = Astro.props
 const { title, pubDate, tags, dek, url } = frontmatter
+const publishedDate = moment(pubDate).format('MMMM D YYYY')
 
 tags.sort()
 ---
@@ -42,9 +44,7 @@ tags.sort()
     <span class="text-5xl mb-4 font-bold">{title}</span>
     <div class="flex flex-wrap">
       <span class="text-[#7E8C9A] text-lg">
-        Published: {new Date(pubDate).toLocaleString(
-          'default', { month: 'long', day: '2-digit', year: 'numeric' }
-        ).replace(',', '')}
+        Published: {publishedDate}
       </span>
     </div>
   </div>

src/pages/index.astro

@@ -25,6 +25,6 @@ allNotes.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
   </div>
 
   {allNotes.slice(0, 5).map((note) =>
-    <NoteItem client:load note={note} />
+    <NoteItem note={note} />
   )}
 </Main>

src/pages/tags/[tag].astro

@@ -30,6 +30,6 @@ const title = `Tag: ${tag}`
 >
   <div class="mb-6 text-xl">{filteredNotes.length} notes tagged with <span class="font-bold">{tag}</span>:</div>
   {filteredNotes.map((note) =>
-    <NoteItem client:load note={note} />
+    <NoteItem note={note} />
   )}
 </Main>

src/pages/tags/index.astro

@@ -31,7 +31,7 @@ tags.sort()
 >
   <div class="flex flex-wrap gap-y-3">
     {tags.map(tag => (
-      <TagItem client:load tag={tag} />
+      <TagItem tag={tag} />
     ))}
   </div>
 </Main>