feat(craigory-dev): add og images for blog posts and presentations

.github/workflows/deploy.yml

@@ -40,6 +40,10 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      # We use playwright to generate open graph images
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
       - name: Setup Git User
         run: |
           git config --global user.name "${GITHUB_ACTOR}"

apps/craigory-dev/pages/blog/view/+desc.ts

@@ -3,8 +3,5 @@ import { PageContext } from 'vike/types';
 
 export default (pageContext: PageContext) => {
   const blogPost = slugMap[pageContext.routeParams?.slug];
-
-  console.log('Returning', blogPost.description);
-
   return blogPost.description;
 };

apps/craigory-dev/pages/blog/view/+title.ts

@@ -0,0 +1,7 @@
+import { slugMap } from '@new-personal-monorepo/blog-posts';
+import { PageContext } from 'vike/types';
+
+export default (pageContext: PageContext) => {
+  const blogPost = slugMap[pageContext.routeParams?.slug];
+  return blogPost.title;
+};

apps/craigory-dev/pages/presentations/view/+desc.ts

@@ -0,0 +1,7 @@
+import { PRESENTATIONS } from '@new-personal-monorepo/presentations';
+import { PageContext } from 'vike/types';
+
+export default (pageContext: PageContext) => {
+  const presentation = PRESENTATIONS[pageContext.routeParams?.presentation];
+  return presentation.description;
+};

apps/craigory-dev/pages/presentations/view/+title.ts

@@ -0,0 +1,7 @@
+import { PRESENTATIONS } from '@new-personal-monorepo/presentations';
+import { PageContext } from 'vike/types';
+
+export default (pageContext: PageContext) => {
+  const presentation = PRESENTATIONS[pageContext.routeParams?.presentation];
+  return presentation.title;
+};

apps/craigory-dev/project.json

@@ -20,7 +20,11 @@
     "prepare": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "sscli -b https://craigory.dev -r dist/apps/craigory-dev/client -c '**,weekly' 'blog/**,daily'"
+        "commands": [
+          "sscli -b https://craigory.dev -r dist/apps/craigory-dev/client -c '**,weekly' 'blog/**,daily'",
+          "npx vite-node -c tools/vite.config.js tools/generate-open-graph-images.ts"
+        ],
+        "parallel": true
       },
       "dependsOn": ["build"],
       "cache": true

apps/craigory-dev/renderer/+image.ts

@@ -0,0 +1,9 @@
+import { PageContext } from 'vike/types';
+
+export default (pageContext: PageContext) => {
+  let base = new URL('https://craigory.dev');
+  if (import.meta.env.PUBLIC_ENV__BASE_URL) {
+    base = new URL(import.meta.env.PUBLIC_ENV__BASE_URL, base);
+  }
+  return new URL(pageContext.urlOriginal + '/og.png', base).href;
+};