feat: add og image to tip and article

apps/course-builder-web/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

apps/course-builder-web/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "Course Builder",
+  "short_name": "Course Builder",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#040308",
+  "display": "standalone"
+}

apps/course-builder-web/src/app/[article]/page.tsx

@@ -6,6 +6,35 @@ import {getAbility} from '@/lib/ability'
 import ReactMarkdown from 'react-markdown'
 import {getArticle} from '@/lib/articles'
 import {notFound} from 'next/navigation'
+import {type Metadata, type ResolvingMetadata} from 'next'
+import {getOGImageUrlForTitle} from '@/utils/get-og-image-for-title'
+
+type Props = {
+  params: {article: string}
+  searchParams: {[key: string]: string | string[] | undefined}
+}
+
+export async function generateMetadata(
+  {params, searchParams}: Props,
+  parent: ResolvingMetadata,
+): Promise<Metadata> {
+  const article = await getArticle(params.article)
+
+  if (!article) {
+    return parent as Metadata
+  }
+
+  const previousImages = (await parent).openGraph?.images || []
+
+  const ogImage = getOGImageUrlForTitle(article.title)
+
+  return {
+    title: article.title,
+    openGraph: {
+      images: [ogImage, ...previousImages],
+    },
+  }
+}
 
 export default async function ArticlePage({
   params,

apps/course-builder-web/src/app/tips/[slug]/page.tsx

@@ -1,18 +1,41 @@
 import Link from 'next/link'
-import {
-  CardTitle,
-  CardHeader,
-  CardContent,
-  Card,
-  Button,
-} from '@coursebuilder/ui'
+import {Button} from '@coursebuilder/ui'
 import {TipPlayer} from '@/app/tips/_components/tip-player'
 import * as React from 'react'
 import {getServerAuthSession} from '@/server/auth'
 import {getAbility} from '@/lib/ability'
 import {getTip} from '@/lib/tips'
 import ReactMarkdown from 'react-markdown'
 import {notFound} from 'next/navigation'
+import type {Metadata, ResolvingMetadata} from 'next'
+import {getOGImageUrlForTitle} from '@/utils/get-og-image-for-title'
+
+type Props = {
+  params: {slug: string}
+  searchParams: {[key: string]: string | string[] | undefined}
+}
+
+export async function generateMetadata(
+  {params, searchParams}: Props,
+  parent: ResolvingMetadata,
+): Promise<Metadata> {
+  const tip = await getTip(params.slug)
+
+  if (!tip) {
+    return parent as Metadata
+  }
+
+  const previousImages = (await parent).openGraph?.images || []
+
+  const ogImage = getOGImageUrlForTitle(tip.title)
+
+  return {
+    title: tip.title,
+    openGraph: {
+      images: [ogImage, ...previousImages],
+    },
+  }
+}
 
 export default async function TipPage({params}: {params: {slug: string}}) {
   const session = await getServerAuthSession()

apps/course-builder-web/src/utils/get-og-image-for-title.ts

@@ -0,0 +1,7 @@
+export const getOGImageUrlForTitle = (title: string) => {
+  return (
+    `https://res.cloudinary.com/badass-courses/image/upload/w_1200,h_630,c_fill,f_auto/w_630,h_450,c_fit,co_rgb:FFFFFF,g_west,x_45,y_-40,l_text:arial_60_bold:` +
+    encodeURIComponent(title) +
+    `/course-builder-og-image-template_qfarun.png`
+  )
+}