From f1ea4478bda22ec04ea0bcb72ca3cc2a545b6ad0 Mon Sep 17 00:00:00 2001 From: bryantgillespie Date: Mon, 1 Jun 2026 13:48:47 -0400 Subject: [PATCH 1/2] Use OG image worker for docs --- .env.example | 4 + CLAUDE.md | 2 +- app/app.vue | 4 +- app/components/OgImage/Default.takumi.vue | 92 -- app/composables/useDocsOgImage.ts | 50 + app/composables/useOgImageUrl.ts | 37 + app/pages/[...slug].vue | 2 +- app/pages/frameworks/index.vue | 2 +- app/pages/tutorials/[category]/[...slug].vue | 5 +- app/utils/og-sign.ts | 59 + lib/og-signing.d.mts | 17 + lib/og-signing.mjs | 22 + nuxt.config.ts | 15 +- package.json | 4 +- pnpm-lock.yaml | 1145 +----------------- tests/lib/og-signing.test.ts | 31 + 16 files changed, 250 insertions(+), 1241 deletions(-) delete mode 100644 app/components/OgImage/Default.takumi.vue create mode 100644 app/composables/useDocsOgImage.ts create mode 100644 app/composables/useOgImageUrl.ts create mode 100644 app/utils/og-sign.ts create mode 100644 lib/og-signing.d.mts create mode 100644 lib/og-signing.mjs create mode 100644 tests/lib/og-signing.test.ts diff --git a/.env.example b/.env.example index 14572c678..791d8e1d7 100644 --- a/.env.example +++ b/.env.example @@ -8,5 +8,9 @@ GOOGLE_TAG_MANAGER_ID=GTM-PTLT3GH POSTHOG_API_HOST=https://directus.io/ingest POSTHOG_API_KEY=phc_secret_key_here NUXT_PUBLIC_SITE_URL=https://directus.com +NUXT_PUBLIC_OG_BASE_URL=https://og.directus.com +# Required outside local OG worker dev. +# NUXT_OG_SIGNING_SECRET=shared_secret_from_website_og_worker +# OG_SIGNING_SECRET=shared_secret_from_website_og_worker # Optional. Fine-grained PAT, public repos read-only. Required for code search and raises GitHub raw rate limits. # GITHUB_TOKEN=github_pat_... diff --git a/CLAUDE.md b/CLAUDE.md index 660bfc680..e7f014c75 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -62,7 +62,7 @@ Reusable content fragments live in `/content/_partials/` and are included via th ### Modules & Integrations -Nuxt modules: `@nuxt/ui-pro`, `@nuxt/content`, `@nuxtjs/seo`, `@nuxtjs/algolia` (conditional on env vars), `@vueuse/nuxt`, `@nuxt/scripts`. Custom PostHog module in `/modules/posthog/`. +Nuxt modules: `@nuxt/ui-pro`, `@nuxt/content`, `@nuxtjs/robots`, `@nuxtjs/sitemap`, `@nuxtjs/algolia` (conditional on env vars), `@vueuse/nuxt`, `@nuxt/scripts`. Custom PostHog module in `/modules/posthog/`. ## Code Style diff --git a/app/app.vue b/app/app.vue index 38430ad3a..3251d5d5e 100644 --- a/app/app.vue +++ b/app/app.vue @@ -5,9 +5,7 @@ const { data: navigation } = await useAsyncData('content-navigation', () => quer provide('navigation', navigation as Ref); -defineOgImage('Default', { - title: 'Directus Docs', -}); +await useDocsOgImage();