@se-studio/skills 1.0.30 → 1.0.31

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @se-studio/skills
 
+## 1.0.31
+
+### Patch Changes
+
+- Version bump: patch for changed packages
+
 ## 1.0.30
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@se-studio/skills",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "SE Studio agent skills for marketing site development with Contentful CMS",
   "repository": {
     "type": "git",

package/skills/site-workflows-contentful-vercel-setup/SKILL.md

@@ -53,6 +53,8 @@ Store this as `SITE_URL` for use in subsequent steps.
 
 Write this file to the project. It handles secret generation, webhook creation, and Vercel env var updates in one run.
 
+The secret is passed as a **request header** (`REVALIDATION_SECRET`), not a query parameter. Optionally, a second preview webhook is created when `PREVIEW_SITE_URL` and `VERCEL_PROTECTION_BYPASS_TOKEN` are both set in `.env.local`.
+
 ```typescript
 /**
  * Set up Contentful revalidation webhook and Vercel env vars.
@@ -64,11 +66,17 @@ Write this file to the project. It handles secret generation, webhook creation,
  *   - CONTENTFUL_SPACE_ID and CONTENTFUL_MANAGEMENT_TOKEN set in .env.local
  *   - Vercel CLI authenticated (vercel whoami)
  *
+ * Optional env vars in .env.local:
+ *   PREVIEW_SITE_URL=https://your-preview.vercel.app
+ *   VERCEL_PROTECTION_BYPASS_TOKEN=<token from Vercel → Settings → Deployment Protection>
+ *   If both are set, a "Vercel Revalidation (Preview)" webhook is created for draft events.
+ *
  * What it does:
  *   1. Generates REVALIDATION_SECRET if not already set
- *   2. Creates (or replaces) the Contentful revalidation webhook
- *   3. Sets REVALIDATION_SECRET in Vercel (production + preview)
- *   4. Updates .env.local with the new secret
+ *   2. Creates (or replaces) the Contentful production revalidation webhook (header auth)
+ *   3. Optionally creates a preview webhook with x-vercel-protection-bypass header
+ *   4. Sets REVALIDATION_SECRET in Vercel (production + preview)
+ *   5. Updates .env.local with the new secret
  */
 
 import { createClient } from 'contentful-management';
@@ -87,6 +95,8 @@ if (!siteUrl || !siteUrl.startsWith('https://')) {
   process.exit(1);
 }
 
+const normalizedSiteUrl = siteUrl.replace(/\/$/, '');
+
 // ---------------------------------------------------------------------------
 // Load .env.local
 // ---------------------------------------------------------------------------
@@ -100,6 +110,10 @@ function getEnv(key: string): string {
   return value;
 }
 
+function tryGetEnv(key: string): string | undefined {
+  return envContent.match(new RegExp(`^${key}=(.+)`, 'm'))?.[1]?.trim() ?? process.env[key];
+}
+
 function setEnvLocal(key: string, value: string): void {
   if (new RegExp(`^${key}=`, 'm').test(envContent)) {
     envContent = envContent.replace(new RegExp(`^${key}=.*`, 'm'), `${key}=${value}`);
@@ -136,10 +150,23 @@ function vercelSetEnv(name: string, value: string, env: string): void {
 // ---------------------------------------------------------------------------
 
 const WEBHOOK_NAME = 'Vercel Revalidation';
+const ASSET_WEBHOOK_NAME = 'Vercel Revalidation (Assets)';
+const PREVIEW_WEBHOOK_NAME = 'Vercel Revalidation (Preview)';
+
+const ENTRY_CONTENT_TYPES = [
+  'article', 'articleType', 'banner', 'customType', 'location',
+  'navigation', 'page', 'pageVariant', 'person', 'tag', 'template',
+];
+
+const contentTypeFilter = {
+  in: [{ doc: 'sys.contentType.sys.id' }, ENTRY_CONTENT_TYPES],
+};
 
 async function main(): Promise<void> {
   const managementToken = getEnv('CONTENTFUL_MANAGEMENT_TOKEN');
   const spaceId = getEnv('CONTENTFUL_SPACE_ID');
+  const previewSiteUrl = tryGetEnv('PREVIEW_SITE_URL')?.replace(/\/$/, '');
+  const bypassToken = tryGetEnv('VERCEL_PROTECTION_BYPASS_TOKEN');
 
   // Generate secret if not already set
   let secret = envContent.match(/^REVALIDATION_SECRET=(.+)/m)?.[1]?.trim();
@@ -150,29 +177,33 @@ async function main(): Promise<void> {
     console.log('Using existing REVALIDATION_SECRET from .env.local');
   }
 
-  const webhookUrl = `${siteUrl}/api/revalidate?secret=${secret}`;
+  const webhookUrl = `${normalizedSiteUrl}/api/revalidate`;
 
   // -------------------------------------------------------------------------
-  // Create Contentful webhook
+  // Create Contentful production webhook
   // -------------------------------------------------------------------------
 
   console.log('Connecting to Contentful…');
   const client = createClient({ accessToken: managementToken });
 
-  // Delete existing webhook with the same name (idempotent)
+  // Delete existing webhooks with the same names (idempotent)
   const existing = await client.webhook.getMany({ spaceId, query: { limit: 100 } });
+
   const duplicate = existing.items.find((w) => w.name === WEBHOOK_NAME);
   if (duplicate) {
     console.log(`Removing existing webhook: ${duplicate.sys.id}`);
     await client.webhook.delete({ spaceId, webhookDefinitionId: duplicate.sys.id });
   }
 
-  const topics = [
+  const entryTopics = [
     'Entry.publish',
     'Entry.unpublish',
     'Entry.delete',
     'Entry.archive',
     'Entry.unarchive',
+  ];
+
+  const assetTopics = [
     'Asset.publish',
     'Asset.unpublish',
     'Asset.delete',
@@ -180,12 +211,83 @@ async function main(): Promise<void> {
     'Asset.unarchive',
   ];
 
-  console.log(`Creating webhook → ${webhookUrl}`);
+  console.log(`Creating production entry webhook → ${webhookUrl}`);
   const webhook = await client.webhook.create(
     { spaceId },
-    { name: WEBHOOK_NAME, url: webhookUrl, topics, active: true, headers: [] },
+    {
+      name: WEBHOOK_NAME,
+      url: webhookUrl,
+      topics: entryTopics,
+      filters: [contentTypeFilter],
+      active: true,
+      headers: [{ key: 'REVALIDATION_SECRET', value: secret }],
+    },
   );
-  console.log(`Webhook created: ${webhook.sys.id}`);
+  console.log(`Production entry webhook created: ${webhook.sys.id}`);
+
+  const duplicateAsset = existing.items.find((w) => w.name === ASSET_WEBHOOK_NAME);
+  if (duplicateAsset) {
+    console.log(`Removing existing asset webhook: ${duplicateAsset.sys.id}`);
+    await client.webhook.delete({ spaceId, webhookDefinitionId: duplicateAsset.sys.id });
+  }
+
+  console.log(`Creating production asset webhook → ${webhookUrl}`);
+  const assetWebhook = await client.webhook.create(
+    { spaceId },
+    {
+      name: ASSET_WEBHOOK_NAME,
+      url: webhookUrl,
+      topics: assetTopics,
+      active: true,
+      headers: [{ key: 'REVALIDATION_SECRET', value: secret }],
+    },
+  );
+  console.log(`Production asset webhook created: ${assetWebhook.sys.id}`);
+
+  // -------------------------------------------------------------------------
+  // Create optional preview webhook
+  // -------------------------------------------------------------------------
+
+  if (previewSiteUrl && bypassToken) {
+    const previewWebhookUrl = `${previewSiteUrl}/api/revalidate`;
+
+    const existingPreview = existing.items.find((w) => w.name === PREVIEW_WEBHOOK_NAME);
+    if (existingPreview) {
+      console.log(`Removing existing preview webhook: ${existingPreview.sys.id}`);
+      await client.webhook.delete({ spaceId, webhookDefinitionId: existingPreview.sys.id });
+    }
+
+    const draftTopics = [
+      'Entry.save',
+      'Entry.autosave',
+      'Entry.publish',
+      'Entry.unpublish',
+      'Entry.delete',
+      'Asset.publish',
+      'Asset.unpublish',
+      'Asset.delete',
+    ];
+
+    console.log(`Creating preview webhook → ${previewWebhookUrl}`);
+    const previewWebhook = await client.webhook.create(
+      { spaceId },
+      {
+        name: PREVIEW_WEBHOOK_NAME,
+        url: previewWebhookUrl,
+        topics: draftTopics,
+        active: true,
+        headers: [
+          { key: 'REVALIDATION_SECRET', value: secret },
+          { key: 'x-vercel-protection-bypass', value: bypassToken },
+        ],
+      },
+    );
+    console.log(`Preview webhook created: ${previewWebhook.sys.id}`);
+  } else if (previewSiteUrl || bypassToken) {
+    console.warn(
+      'Skipping preview webhook: both PREVIEW_SITE_URL and VERCEL_PROTECTION_BYPASS_TOKEN must be set in .env.local.',
+    );
+  }
 
   // -------------------------------------------------------------------------
   // Update Vercel env vars
@@ -209,9 +311,10 @@ async function main(): Promise<void> {
   // -------------------------------------------------------------------------
 
   console.log('\nDone!');
-  console.log(`  Webhook: ${WEBHOOK_NAME} (${webhook.sys.id})`);
-  console.log(`  URL:     ${webhookUrl}`);
-  console.log(`  Secret:  ${secret.slice(0, 8)}…`);
+  console.log(`  Entry webhook:  ${WEBHOOK_NAME} (${webhook.sys.id})`);
+  console.log(`  Asset webhook:  ${ASSET_WEBHOOK_NAME} (${assetWebhook.sys.id})`);
+  console.log(`  URL:    ${webhookUrl}`);
+  console.log(`  Secret: ${secret.slice(0, 8)}…`);
   console.log('\nNext: set up Content Preview in Contentful (see skill Step 5)');
   console.log('Then redeploy to pick up the new secret:');
   console.log('  vercel deploy --prod');
@@ -273,10 +376,10 @@ Or push to the production branch if the project uses git-based deploys.
 #### Test the revalidation webhook
 
 ```bash
-curl -X POST "https://<SITE_URL>/api/revalidate?secret=<REVALIDATION_SECRET>"
+curl -X POST "https://<SITE_URL>/api/revalidate" -H "REVALIDATION_SECRET: <REVALIDATION_SECRET>"
 ```
 
-Expected: `200 OK`. A `401` means the secret in the URL doesn't match the deployed env var (check Vercel dashboard → Settings → Environment Variables).
+Expected: `200 OK`. A `401` means the secret in the header doesn't match the deployed env var (check Vercel dashboard → Settings → Environment Variables).
 
 #### Confirm webhook delivery in Contentful