feat!: dynamic open graphs (#70)

.env.example

@@ -19,3 +19,7 @@ CLOUDINARY_API_SECRET=
 
 # SENTRY
 SENTRY_SUPPRESS_TURBOPACK_WARNING=1
+
+# PUBLICs
+# update port if needed
+NEXT_PUBLIC_APP_URL=http:localhost:3000

app/(routes)/(main)/blog/[slug]/page.tsx

@@ -1,8 +1,7 @@
 import { db } from '@/db';
 import { posts, PostSelect } from '@/db/schema';
-import { formatDate } from '@/lib/utils';
+import { extractParagraphs, formatDate, truncate } from '@/lib/utils';
 import { eq } from 'drizzle-orm';
-import removeMarkdown from 'markdown-to-text';
 import { marked, Tokens } from 'marked';
 import { Metadata } from 'next';
 import Image from 'next/image';
@@ -15,17 +14,30 @@ export async function generateMetadata({
 }: {
   params: { slug: string };
 }): Promise<Metadata> {
-  const { title, content } = (
+  const { title, content, cover, slug } = (
     await db
-      .select({ title: posts.title, content: posts.content })
+      .select({ title: posts.title, content: posts.content, cover: posts.cover, slug: posts.slug })
       .from(posts)
       .where(eq(posts.slug, params.slug))
   )[0];
-  const description = removeMarkdown(content).slice(0, 100) + '...';
+  const description = truncate(extractParagraphs(content), 160);
 
   return {
     title,
     description,
+    openGraph: {
+      title,
+      description,
+      ...(cover && {
+        images: {
+          url: cover,
+        },
+      }),
+      url: process.env.NEXT_PUBLIC_APP_URL + '/blog/' + slug,
+      siteName: 'Moonlitgrace',
+      locale: 'en_US',
+      type: 'article',
+    }
   };
 }
 
@@ -61,7 +73,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
         )}
       </div>
       <Markdown markdown={postData.content} />
-      {headings.length && <TableOfContents headings={headings} />}
+      {headings.length > 0 && <TableOfContents headings={headings} />}
     </>
   );
 }

app/(routes)/(main)/blog/page.tsx

@@ -11,6 +11,15 @@ export const metadata: Metadata = {
   title: 'Blog | Moonlitgrace',
   description:
     'Dive into the Blog at Moonlitgrace, where a passionate web developer and open-source contributor shares thoughts, tutorials, and insights—all under the alias Moonlitgrace.',
+  openGraph: {
+    title: 'Blog | Moonlitgrace',
+    description:
+      'Dive into the Blog at Moonlitgrace, where a passionate web developer and open-source contributor shares thoughts, tutorials, and insights—all under the alias Moonlitgrace.',
+    url: process.env.NEXT_PUBLIC_APP_URL,
+    siteName: 'Moonlitgrace',
+    locale: 'en_US',
+    type: 'website',
+  }
 };
 
 export default async function BlogPage() {

app/(routes)/(main)/page.tsx

@@ -5,6 +5,15 @@ export const metadata: Metadata = {
   title: 'Moonlitgrace',
   description:
     'Step into Moonlitgrace, where a passionate web developer and open-source contributor shares insights, projects, and creativity—all under the alias Moonlitgrace.',
+  openGraph: {
+    title: 'Moonlitgrace',
+    description:
+      'Step into Moonlitgrace, where a passionate web developer and open-source contributor shares insights, projects, and creativity—all under the alias Moonlitgrace.',
+    url: process.env.NEXT_PUBLIC_APP_URL,
+    siteName: 'Moonlitgrace',
+    locale: 'en_US',
+    type: 'website',
+  },
 };
 
 export default function Home() {

environment.d.ts

@@ -14,5 +14,7 @@ namespace NodeJS {
     CLOUDINARY_API_SECRET: string;
     // SENTRY CREDS
     SENTRY_DSN: string;
+    // PUBLICs
+    NEXT_PUBLIC_APP_URL: string;
   }
 }

lib/utils.ts

@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { marked, Tokens } from 'marked';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -21,3 +22,22 @@ export function escapeText(text: string) {
 export function validateFile(file: File) {
   return file instanceof File && file.name !== '' && file.size > 0;
 }
+
+export function stripHtmlTags(html: string) {
+  return html.replace(/<[^>]*>/g, '');
+}
+
+export function extractParagraphs(markdown: string) {
+  const tokens = marked.lexer(markdown);
+  const paragraphs = tokens
+    .filter((token) => token.type === 'paragraph')
+    .map((token) => {
+      const rawText = marked.parseInline((token as Tokens.Paragraph).text, { async: false });
+      return stripHtmlTags(rawText);
+    });
+  return paragraphs.join(' ');
+}
+
+export function truncate(str: string, n: number) {
+  return (str.length > n) ? str.slice(0, n - 3) + '...' : str;
+}

package.json

@@ -36,7 +36,6 @@
     "highlight.js": "^11.10.0",
     "isomorphic-dompurify": "^2.15.0",
     "jose": "^5.8.0",
-    "markdown-to-text": "^0.1.1",
     "marked": "^14.1.2",
     "marked-highlight": "^2.1.4",
     "next": "^14.2.11",