OG Image + Video Thumbnail (#173)

apps/www/src/components/layout/BaseHead.astro

@@ -14,7 +14,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const {
   title,
   description = siteConfig.description,
-  image = "/og.jpg",
+  image = "/og.png",
 } = Astro.props;
 
 const calcFullTitle = (title: string | undefined) => {

apps/www/src/config/site.ts

@@ -4,7 +4,7 @@ export const siteConfig: SiteConfig = {
   name: "llm-ui",
   description: "LLM UI components for React",
   url: "https://llm-ui.com",
-  ogImage: "https://llm-ui.com/og.jpg",
+  ogImage: "https://llm-ui.com/og.png",
   links: {
     discord: "https://discord.gg/gSgpjMxyT9",
     github: "https://github.com/llm-ui-kit/llm-ui",

apps/www/src/pages/demo/presentation/og.astro

@@ -0,0 +1,21 @@
+---
+import Slide from "@/components/presentation/Slide.astro";
+import { siteConfig } from "@/config/site";
+import { Icon } from "astro-icon/components";
+---
+
+<Slide>
+  <span class="mt-40 flex items-center space-x-2 text-5xl">
+    <Icon name="mark" class="size-16" color="#6366f1" />
+    <span class="inline-block text-6xl font-bold">
+      {siteConfig.name}
+    </span>
+  </span>
+  <h1
+    class="font-heading mt-12 text-balance text-4xl font-bold !leading-[1.1] sm:text-5xl md:text-6xl lg:text-7xl"
+  >
+    The <span class="text-gradient_indigo-purple">React</span> library<br />
+    for
+    <span class="text-gradient_indigo-purple">LLMs</span>
+  </h1>
+</Slide>

apps/www/src/pages/demo/presentation/thumbnail.astro

@@ -0,0 +1,27 @@
+---
+import Slide from "@/components/presentation/Slide.astro";
+import { AvatarComponent } from "@/components/ui/custom/AvatarComponent";
+import { siteConfig } from "@/config/site";
+import { Icon } from "astro-icon/components";
+---
+
+<Slide>
+  <h1 class="font-heading mt-52 text-7xl">Improving the ChatGPT UI</h1>
+  <span class="flex items-center space-x-2 pt-6 text-5xl">
+    <span class="inline-block text-5xl">with</span>
+    <Icon name="mark" class="size-12" color="#6366f1" />
+    <span class="inline-block text-5xl font-bold">
+      {siteConfig.name}
+    </span>
+  </span>
+  <div class="flex flex-row items-center gap-4 pt-40">
+    <AvatarComponent
+      client:load
+      src="https://github.com/richardgill.png"
+      alt="Richard Gill"
+      fallbackText="RG"
+      className="size-18"
+    />
+    <span class="text-5xl">Richard Gill</span>
+  </div>
+</Slide>