Fix meta tags

package.json

@@ -11,16 +11,18 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.2.0",
-    "@astrojs/sitemap": "^3.0.2",
-    "@astrojs/tailwind": "^5.0.0",
+    "@astrojs/sitemap": "^2.0.2",
+    "@astrojs/tailwind": "^4.0.0",
     "@fontsource/lato": "^5.0.15",
-    "astro": "^3.2.2",
+    "astro": "^3.4.0",
     "astro-icon": "^0.8.1",
     "astro-navbar": "^2.2.1",
     "astro-seo": "^0.8.0",
     "dayjs": "^1.11.10",
     "marked": "^9.0.3",
+    "remark": "^15.0.1",
     "sass": "^1.68.0",
+    "strip-markdown": "^6.0.0",
     "tailwindcss": "^3.0.24",
     "tw-elements": "^1.0.0",
     "typescript": "^5.2.2",

src/components/articles/Article.astro

@@ -1,43 +1,29 @@
 ---
 import { Image } from "astro:assets";
 import dayjs from "dayjs";
-import { marked } from "marked";
 import { getEntry, type CollectionEntry } from "astro:content";
+import { remark } from "remark";
+import strip from "strip-markdown";
 
 const { data, body, collection, slug } = Astro.props;
 
 const author = (await getEntry(data.author)) as CollectionEntry<"authors">;
 
 const dateObj = dayjs(data.date);
 const dateString = dateObj.format("dddd, MMMM D, YYYY");
-marked.use({
-  renderer: {
-    heading(text) {
-      return `<span>
-              ${text}
-            </span>`;
-    },
-    paragraph(text) {
-      return `
-            <span>
-              ${text}
-            </span>`;
-    },
-    link(href, title, text) {
-      return `
-            <span>
-              ${text}
-            </span>`;
-    },
-    strong(text) {
-      return `
-            <span>
-              ${text}
-            </span>`;
-    },
-  },
-});
-const content = marked.parse(body.split(" ").slice(0, 30).join(" ") + "...");
+
+const content =
+  String(
+    await remark()
+      .use(strip, {
+        remove: ["heading"],
+      })
+      .process(body)
+  )
+    .split(" ")
+    .slice(0, 30)
+    .join(" ")
+    .replace("\\", "") + "...";
 ---
 
 <a

src/components/articles/FirstItem.astro

@@ -1,43 +1,28 @@
 ---
 import { Image } from "astro:assets";
 import dayjs from "dayjs";
-import { marked } from "marked";
 import { getEntry, type CollectionEntry } from "astro:content";
+import { remark } from "remark";
+import strip from "strip-markdown";
 
 const { data, body, collection, slug } = Astro.props;
 
 const author = (await getEntry(data.author)) as CollectionEntry<"authors">;
 
 const dateObj = dayjs(data.date);
 const dateString = dateObj.format("dddd, MMMM D, YYYY");
-marked.use({
-  renderer: {
-    heading(text) {
-      return `<span>
-              ${text}
-            </span>`;
-    },
-    paragraph(text) {
-      return `
-            <span>
-              ${text}
-            </span>`;
-    },
-    link(href, title, text) {
-      return `
-            <span>
-              ${text}
-            </span>`;
-    },
-    strong(text) {
-      return `
-            <span>
-              ${text}
-            </span>`;
-    },
-  },
-});
-const content = marked.parse(body.split(" ").slice(0, 30).join(" ") + "...");
+const content =
+  String(
+    await remark()
+      .use(strip, {
+        remove: ["heading"],
+      })
+      .process(body)
+  )
+    .split(" ")
+    .slice(0, 30)
+    .join(" ")
+    .replace("\\", "") + "...";
 ---
 
 <div

src/components/articles/RecentPosts.astro

@@ -2,6 +2,9 @@
 import dayjs from "dayjs";
 import { Image } from "astro:assets";
 import { marked } from "marked";
+import { remark } from "remark";
+import strip from "strip-markdown";
+import { parseDescription } from "@/lib/parseDescription";
 
 const { posts, title } = Astro.props;
 
@@ -44,18 +47,7 @@ marked.use({
   <h2 class="my-12 font-bold text-3xl">{title}</h2>
   {
     posts.map(async (post: any) => {
-      const { headings } = await post.render();
-
-      const h1 = headings[0]?.text;
-      const firstBlock = post.body.split("\n").slice(0, 6).join(" ");
-
-      const parsedDescription = marked.parse(
-        post.data.description ||
-          (h1?.length > 15 && h1) ||
-          (firstBlock.split(" ").length > 50
-            ? firstBlock.split(" ").slice(0, 50).join(" ") + "..."
-            : firstBlock)
-      );
+      const parsedDescription = await parseDescription(post);
       return (
         <a
           href={`/${post.collection}/${post.slug}`}

src/components/head/BaseHead.astro

@@ -11,6 +11,9 @@ const {
   description = "Trusted Firmware provides a reference implementation of secure software for Armv8-A, Armv9-A and Armv8-M. It provides SoC developers and OEMs with a reference trusted code base complying with the relevant Arm specifications.",
   type = "website",
 } = Astro.props;
+
+const social_image =
+  "https://www.trustedfirmware.org/images/social-media-image.png";
 ---
 
 <head>
@@ -28,28 +31,37 @@ const {
       basic: {
         title: title,
         type: type,
-        image: "https://www.trustedfirmware.org/images/social-media-image.png",
+        image: social_image,
       },
     }}
+    ,
     twitter={{
+      title: title,
+      description: description.slice(0, 196) + "...",
+      card: "summary_large_image",
+      image: social_image,
       creator: "@LinaroOrg",
     }}
     extend={{
       link: [
-        { rel: "icon", href: "/favicon.ico" },
         {
           rel: "me",
           href: "https://mastodon.org.uk/@LinaroLtd@mastodon.social",
         },
       ],
       meta: [
         {
-          name: "twitter:image",
-          content:
-            "https://www.trustedfirmware.org/images/social-media-image.png",
+          property: "twitter:image",
+          content: social_image,
+        },
+        {
+          property: "og:image",
+          content: social_image,
+        },
+        {
+          property: "og:description",
+          content: description,
         },
-        { name: "twitter:title", content: title },
-        { name: "twitter:description", content: description },
       ],
     }}
   />

src/content/config.ts

@@ -123,6 +123,7 @@ const news = defineCollection({
   schema: ({ image }) =>
     z.object({
       author: reference("authors"),
+      description: z.string().optional(),
       title: z.string(),
       date: z.date(),
       image: image(),
@@ -134,6 +135,7 @@ const blog = defineCollection({
   schema: ({ image }) =>
     z.object({
       author: reference("authors"),
+      description: z.string().optional(),
       title: z.string(),
       date: z.date(),
       image: image(),
@@ -145,6 +147,7 @@ const meetings = defineCollection({
   schema: ({ image }) =>
     z.object({
       author: reference("authors"),
+      description: z.string().optional(),
       title: z.string(),
       date: z.date(),
       image: image(),

src/layouts/BlogLayout.astro

@@ -6,11 +6,18 @@ import PostDetails from "@/components/articles/PostDetails.astro";
 import RecentPosts from "@/components/articles/RecentPosts.astro";
 import { getCollection } from "astro:content";
 import dayjs from "dayjs";
+import { remark } from "remark";
+import strip from "strip-markdown";
+import { parseDescription } from "@/lib/parseDescription";
+
+const file = await remark()
+  .use(strip)
+  .process("Some *emphasis*, **importance**, and `code`.");
 
 const { post } = Astro.props;
 const { data, body } = post;
 const { title, description, author, date } = data;
-const { Content } = await post.render();
+const { Content, headings } = await post.render();
 
 const readTime = `${Math.ceil(body.split(" ").length / 183)} min read`;
 
@@ -20,9 +27,15 @@ const blogs = await getCollection("blog");
 const latestPosts = [...news, ...blogs]
   .sort((a, b) => dayjs(b.data.date).diff(a.data.date))
   .slice(0, 5);
+
+const parsedDescription = await parseDescription(post);
 ---
 
-<BaseLayout title={title} description={description} type="article">
+<BaseLayout
+  title={title}
+  description={description || parsedDescription}
+  type="article"
+>
   <main>
     <Hero title="" background_image={BackgroundImage} />
 
@@ -32,10 +45,9 @@ const latestPosts = [...news, ...blogs]
       class="px-5 md:px-16 prose:lg prose-p:mb-6 max-w-5xl mx-auto my-12 break-words
       prose-headings:text-3xl prose-headings:font-bold prose-headings:my-8
       prose-a:text-accent prose-a:no-underline hover:prose-a:underline
-      prose-li:list-item prose-ol:list-decimal prose-ul:list-disc 
+      prose-li:list-item prose-ol:list-decimal prose-ul:list-disc
       prose-li:prose-li:list-[circle] prose-ul:ml-8 prose-ol:ml-8 prose-ul:mb-4
-      prose-p:prose-li:mb-0
-      "
+      prose-p:prose-li:mb-0"
     >
       <Content />
     </article>

src/lib/parseDescription.ts

@@ -0,0 +1,29 @@
+import type { CollectionEntry } from "astro:content";
+import { remark } from "remark";
+import strip from "strip-markdown";
+
+export const parseDescription = async (
+  post:
+    | CollectionEntry<"blog">
+    | CollectionEntry<"news">
+    | CollectionEntry<"meetings">
+) => {
+  const { headings } = await post.render();
+
+  const h1 = headings[0]?.text;
+  const firstBlock = post.body.split("\n").slice(0, 6).join(" ");
+
+  return String(
+    await remark()
+      .use(strip, {
+        remove: h1?.length > 15 ? ["heading"] : [],
+      })
+      .process(
+        post.data.description ||
+          (h1?.length > 15 && h1) ||
+          (firstBlock.split(" ").length > 50
+            ? firstBlock.split(" ").slice(0, 50).join(" ") + "..."
+            : firstBlock)
+      )
+  );
+};