feat: optimizes category og images

app/routes/_frontend.$category.$slug.details/route.tsx

@@ -21,6 +21,8 @@ import { getBaseUrl } from "~/utils/get-base-url.server";
 import { getModel } from "./query";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  const name = `${data?.currentWorkflow.title} - getactions.dev`;
+
   return [
     {
       title: `GitHub Actions Starter Workflows: ${data?.currentWorkflow.title} - getactions.dev`,
@@ -39,7 +41,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
     },
     {
       property: "og:title",
-      content: data?.currentWorkflow.title,
+      content: name,
     },
     {
       property: "og:description",
@@ -59,7 +61,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
     },
     {
       property: "twitter:title",
-      content: data?.currentWorkflow.title,
+      content: name,
     },
     {
       property: "twitter:description",

app/routes/_frontend.$category._index/query.ts

@@ -9,7 +9,7 @@ export async function getWorkflows(request: Request, category: string) {
     daos.map((dao) => ({
       id: dao.id,
       name: dao.name,
-      category: dao.category,
+      category: category,
       title: dao.title,
       description: dao.description,
     })),

app/routes/_frontend.$category._index/route.tsx

@@ -3,17 +3,65 @@ import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Link, json, redirect, useLoaderData } from "@remix-run/react";
 import { WorkflowCard } from "~/components/workflow-card";
 import { WorkflowSwitcher } from "~/components/workflow-switcher";
+import { getBaseUrl } from "~/utils/get-base-url.server";
 import { getWorkflows } from "./query";
 
 export const meta: MetaFunction<typeof loader> = ({ params, data }) => {
+  const name = `${data?.category?.name} Workflows - getactions.dev`;
+
   return [
     {
       title: `GitHub Actions Starter Workflows: ${data?.category?.name} Workflows - getactions.dev`,
     },
+    {
+      name: "description",
+      content: data?.category?.description,
+    },
+    {
+      property: "og:site_name",
+      content: "getactions.dev",
+    },
+    {
+      property: "og:type",
+      content: "article",
+    },
+    {
+      property: "og:title",
+      content: name,
+    },
+    {
+      property: "og:description",
+      content: data?.category?.description,
+    },
+    {
+      property: "og:url",
+      content: `${data?.baseUrl}/${data?.category?.id}`,
+    },
+    {
+      property: "og:image",
+      content: `${data?.baseUrl}/api/${data?.category?.id}.png`,
+    },
+    {
+      property: "twitter:card",
+      content: "summary_large_image",
+    },
+    {
+      property: "twitter:title",
+      content: name,
+    },
+    {
+      property: "twitter:description",
+      content: data?.category?.description,
+    },
+    {
+      property: "twitter:image",
+      content: `${data?.baseUrl}/api/${data?.category?.id}.png`,
+    },
   ];
 };
 
 export async function loader({ request, params }: LoaderFunctionArgs) {
+  const baseUrl = getBaseUrl(request);
   const requestedCategory = String(params.category);
 
   if (!requestedCategory) {
@@ -42,7 +90,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     (category) => category.id === requestedCategory,
   );
 
-  return json({ category, categories, workflows });
+  return json({ baseUrl, category, categories, workflows });
 }
 
 export default function Index() {

app/routes/api.$category[.png]/model.ts

@@ -3,4 +3,5 @@ import { z } from "zod";
 export const Model = z.object({
   id: z.string(),
   name: z.string(),
+  description: z.string(),
 });

app/routes/api.$category[.png]/query.ts

@@ -8,6 +8,7 @@ export async function getModel(category: string) {
   const model = Model.safeParse({
     id: dao?.id,
     name: dao?.name,
+    description: dao?.description,
   });
 
   if (!model.success) {

app/routes/api.$category[.png]/route.ts

@@ -28,8 +28,7 @@ export async function loader(args: LoaderFunctionArgs) {
 
   const resultOfGeneratingImage = await createOgImage({
     title: `${model.name} Workflows`,
-    subtitle:
-      "Jumpstart your next project effortlessly without the hassle of constructing complex GitHub Actions workflows.",
+    subtitle: model.description,
   });
 
   if (resultOfGeneratingImage.isErr()) {

app/utils/create-og-image.server.tsx

@@ -98,7 +98,7 @@ export function makeGenerateOgImage() {
         >
           <div tw="flex items-start justify-start h-full">
             <div tw="flex flex-col justify-between w-full h-full p-4">
-              <div tw="flex flex-col bg-white/70 h-full rounded-3xl justify-center">
+              <div tw="flex flex-col bg-white/90 h-full rounded-3xl justify-center">
                 <h2 tw="flex justify-center text-7xl font-extrabold opacity-90 tracking-tight leading-tight text-center px-10">
                   {request.title}
                 </h2>

workflows/ci/category.json

@@ -1,4 +1,5 @@
 {
   "id": "ci",
-  "name": "Continuous Integration"
+  "name": "Continuous Integration",
+  "description": "Easy to use continuous integration workflows for GitHub Actions."
 }

workflows/deployment/category.json

@@ -1,4 +1,5 @@
 {
   "id": "deployment",
-  "name": "Deployment"
+  "name": "Deployment",
+  "description": "Easy to use deployment workflows for GitHub Actions."
 }

workflows/index.ts

@@ -56,6 +56,7 @@ const categories = categoryDirectories.map((categoryDirectory) => {
   const category = JSON.parse(contents) as Readonly<{
     id: string;
     name: string;
+    description: string;
   }>;
 
   return category;