Fix/post excerpt (#72)

* fix: post excerpt

* chore: simplify component

* chore: rename function

Author: halivert

src/components/PostExcerpt.vue

@@ -1,62 +1,33 @@
 <script setup lang="ts">
 import { getRelativeLocaleUrl } from "astro:i18n"
+import type { CollectionEntry } from "astro:content"
 import { getLangFromUrl, useTranslations } from "@/i18n/utils"
 import { computed } from "vue"
+import { getPostUrlParts, postReadableDate } from "@/ts/functions"
 
 const props = defineProps<{
   url: URL
-  author?: {
-    data: {
-      firstName: string
-    }
-  }
-  post: {
-    id: string
-    data: {
-      title: string
-      date: Date
-      lastModification?: Date
-      author: {
-        id: string
-      }
-      image?: unknown
-    }
-    body?: string
-    rendered?: {
-      html: string
-    }
-  }
+  author?: CollectionEntry<"authors">
+  post: CollectionEntry<"posts">
 }>()
 
 const lang = getLangFromUrl(props.url)
 const t = useTranslations(lang)
+const KEEP_READING_FLAG = `<!-- ${t("Seguir leyendo")} -->`
 
-const excerpt = props.post.rendered?.html.split(
-  `<!-- ${t("Seguir leyendo")} -->`,
-)[0]
+const excerpt = props.post.rendered?.html.split(KEEP_READING_FLAG)[0]
+
+const hasExcerpt =
+  props.post.rendered?.html.includes(KEEP_READING_FLAG) ?? false
 
 const href = computed(() => {
-  const year = props.post.data.date.getFullYear()
-  const month = (props.post.data.date.getMonth() + 1)
-    .toString()
-    .padStart(2, "0")
-  const slug = props.post.id.split(/\d{4}-\d{2}-\d{2}-/)[1]
+  const [year, month, slug] = getPostUrlParts(props.post)
 
   return getRelativeLocaleUrl(lang, `/blog/${year}/${month}/${slug}`)
 })
 
 function formatDate(date: Date) {
-  const dateParts = new Intl.DateTimeFormat(lang, {
-    month: "long",
-    day: "2-digit",
-    year: "numeric",
-  }).formatToParts(date)
-
-  const month = dateParts.find(({ type }) => type === "month")?.value
-  const day = dateParts.find(({ type }) => type === "day")?.value
-  const year = dateParts.find(({ type }) => type === "year")?.value
-
-  return `${month} ${day}, ${year}`
+  return postReadableDate(lang, date)
 }
 </script>
 
@@ -71,7 +42,7 @@ function formatDate(date: Date) {
     <div class="flex gap-2 justify-between">
       <div class="flex-1 basis-3/4">
         <div class="flex-1 content" v-html="excerpt"></div>
-        <p>
+        <p v-if="hasExcerpt">
           ...
           <br />
           <a :href>{{ t("Seguir leyendo") }}</a>

src/components/PostTranslationLink.astro

@@ -2,7 +2,7 @@
 import { getEntry } from "astro:content"
 import type { CollectionEntry } from "astro:content"
 import { getAbsoluteLocaleUrl } from "astro:i18n"
-import { getPostUrl } from "@/ts/functions"
+import { getPostUrlParts } from "@/ts/functions"
 import { displayLanguages } from "@/i18n/ui"
 
 type Translation = NonNullable<
@@ -26,7 +26,7 @@ const translationLabel = displayLanguages[translation.short]
       class="capitalize"
       href={getAbsoluteLocaleUrl(
         translation.short,
-        "/blog/" + getPostUrl(post).join("/"),
+        "/blog/" + getPostUrlParts(post).join("/"),
       )}
     >
       {translationLabel}

src/pages/blog/[...slug].astro

@@ -4,27 +4,16 @@ import { getCollection, getEntry, render } from "astro:content"
 import { Image } from "astro:assets"
 import HtmlLayout from "@/layouts/html.astro"
 import { getLangFromUrl, useTranslations } from "@/i18n/utils"
-import { postReadableDate } from "@/ts/functions"
+import { getPostUrlParts, postReadableDate } from "@/ts/functions"
 import PostTag from "@/components/PostTag.vue"
 import PostReactions from "@/components/PostReactions.vue"
 import PostTranslationLink from "@/components/PostTranslationLink.astro"
 
 export const getStaticPaths = (async () => {
   const posts = await getCollection("posts", (post) => !post.id.includes("/"))
 
-  function getPostUrl(post: {
-    id: string
-    data: { date: Date }
-  }): [string, string, string] {
-    const year = post.data.date.getFullYear().toString()
-    const month = (post.data.date.getMonth() + 1).toString().padStart(2, "0")
-    const slug = post.id.replace(/\d{4}-\d{2}-\d{2}-/, "")
-
-    return [year, month, slug]
-  }
-
   return posts.map((post) => ({
-    params: { slug: getPostUrl(post).join("/") },
+    params: { slug: getPostUrlParts(post).join("/") },
     props: { post },
   }))
 }) satisfies GetStaticPaths

src/pages/en/blog/[...slug].astro

@@ -2,7 +2,7 @@
 import type { GetStaticPaths } from "astro"
 import { getCollection } from "astro:content"
 import BlogPost from "@/pages/blog/[...slug].astro"
-import { getPostUrl } from "@/ts/functions"
+import { getPostUrlParts } from "@/ts/functions"
 
 export const getStaticPaths = (async () => {
 	const posts = await getCollection(
@@ -11,7 +11,7 @@ export const getStaticPaths = (async () => {
 	)
 
 	return posts.map((post) => ({
-		params: { slug: getPostUrl(post).join("/") },
+		params: { slug: getPostUrlParts(post).join("/") },
 		props: { post },
 	}))
 }) satisfies GetStaticPaths

src/ts/functions.ts

@@ -36,7 +36,7 @@ export function postReadableDate(lang: typeof languages[number], date: Date) {
   return `${month} ${day}, ${year}`
 }
 
-export function getPostUrl(post: {
+export function getPostUrlParts(post: {
   id: string
   data: { date: Date }
 }): [string, string, string] {