create-nextblock 0.11.2 → 0.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "",
   "main": "index.js",
   "bin": {

package/templates/nextblock-template/app/api/cron/reset-sandbox/sandboxResetSql.ts

@@ -9092,6 +9092,120 @@ WHERE content::text LIKE '%Des questions ?%'
   AND content::text NOT LIKE '%Déployer sur Vercel%';
 
 
+-- >>> FROM: 00000000000043_swap_home_hero_media_to_youtube.sql <<<
+-- Swap the home HERO media from the static NBcover image to an embedded YouTube video.
+--
+-- The seeded home hero (migration 010) renders a "Why teams switch / 100% Lighthouse"
+-- card in its right column whose last element is an <img src="/images/NBcover.webp" />.
+-- This replaces just that <img> with a responsive 16:9 YouTube <iframe>, keeping the
+-- surrounding card, its rounded/border/shadow wrapper, and every other block intact.
+--
+-- Rendering path: the hero right column is a 'text' block; TextBlockRenderer feeds the
+-- html_content through html-react-parser, which preserves <iframe> (it only strips on*
+-- handlers and swaps known CMS <img> for next/image). The proxy.ts CSP frame-src already
+-- allows https://www.youtube.com, so the embed is not blocked.
+--
+-- Forward-only and idempotent:
+--   * Each UPDATE matches the language-specific <img> alt text, so a second run finds no
+--     match and is a no-op (the alt text no longer exists once swapped).
+--   * String replace on content::text mirrors migration 042; the img markup is unique to
+--     the home hero, so exactly the EN and FR home hero blocks are touched.
+--
+-- The NBcover.webp media row is left untouched — it is still the feature image for the
+-- "how-nextblock-works" post; only the inline hero usage changes.
+
+-- ---------------------------------------------------------------------------
+-- 1. EN home hero: replace NBcover <img> with a YouTube <iframe>
+-- ---------------------------------------------------------------------------
+UPDATE public.blocks
+SET content = replace(
+                content::text,
+                '<img src=''/images/NBcover.webp'' alt=''Nextblock cover showcasing dashboards and blocks'' class=''w-full h-auto object-cover transform group-hover:scale-105 transition-transform duration-700'' fetchpriority=''high'' />',
+                '<div class=''relative w-full aspect-video''><iframe class=''absolute inset-0 h-full w-full border-0'' src=''https://www.youtube.com/embed/71MyfoL4YVM?si=jtlDXV6cSC8rDgz0'' title=''NextBlock demo video'' allow=''accelerated-motion; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'' referrerpolicy=''strict-origin-when-cross-origin'' loading=''lazy'' allowfullscreen></iframe></div>'
+              )::jsonb
+WHERE content::text LIKE '%Nextblock cover showcasing dashboards and blocks%';
+
+-- ---------------------------------------------------------------------------
+-- 2. FR home hero: replace NBcover <img> with a YouTube <iframe>
+-- ---------------------------------------------------------------------------
+UPDATE public.blocks
+SET content = replace(
+                content::text,
+                '<img src=''/images/NBcover.webp'' alt=''Couverture Nextblock'' class=''w-full h-auto object-cover transform group-hover:scale-105 transition-transform duration-700'' fetchpriority=''high'' />',
+                '<div class=''relative w-full aspect-video''><iframe class=''absolute inset-0 h-full w-full border-0'' src=''https://www.youtube.com/embed/71MyfoL4YVM?si=jtlDXV6cSC8rDgz0'' title=''Vidéo de démonstration NextBlock'' allow=''accelerated-motion; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'' referrerpolicy=''strict-origin-when-cross-origin'' loading=''lazy'' allowfullscreen></iframe></div>'
+              )::jsonb
+WHERE content::text LIKE '%Couverture Nextblock%';
+
+
+-- >>> FROM: 00000000000044_swap_article_nx_graph_for_youtube.sql <<<
+-- Swap the Nx-graph image in the "How NextBlock™ Works" article for an embedded
+-- YouTube video, and rebalance that two-column section to an even 50/50 split.
+--
+-- Targets the post-body 'text' block (dollar-quoted html_content seeded in migration
+-- 010) for both language variants of the same post:
+--   * EN  slug how-nextblock-works           (img alt "Nx project graph preview ...")
+--   * FR  slug comment-nextblock-fonctionne  (img alt "Apercu du graphe Nx ...")
+--
+-- Three forward-only, idempotent edits:
+--   1. Column widths md:w-3/5 (text) and md:w-2/5 (media) -> md:w-1/2 each, and the
+--      flex row switches items-start -> items-center so the shorter media column sits
+--      centered against the taller text column. These class fragments occur only in
+--      this one section (EN + FR), so a single UPDATE rebalances both languages.
+--   2/3. Replace the <img src="/images/nx-graph.webp" ...> with a responsive 16:9
+--      YouTube <iframe>, kept inside the existing white aside card above its caption.
+--
+-- Rendering/CSP identical to migration 043: TextBlockRenderer -> html-react-parser
+-- preserves the <iframe>; proxy.ts CSP frame-src allows www.youtube.com; every utility
+-- class used here lives in this .sql file, which Tailwind's content scanner
+-- (libs/**/*.sql) compiles into the bundle. The nx-graph.webp media row is left intact.
+--
+-- Each UPDATE is guarded by a substring that only exists pre-swap, so a second run is a
+-- no-op. Dollar-quoted string literals ($old$/$new$) avoid escaping the single-quoted
+-- HTML attributes; the sandbox reset runs this via postgres db.unsafe() (no outer
+-- dollar-quote wrapper), same as migration 010's dollar-quoted seed content.
+
+-- ---------------------------------------------------------------------------
+-- 1. Both languages: 3/5 + 2/5 columns -> 50/50, and vertical-center the row
+-- ---------------------------------------------------------------------------
+UPDATE public.blocks
+SET content = replace(
+                replace(
+                  replace(
+                    content::text,
+                    'flex flex-col md:flex-row gap-8 items-start my-12',
+                    'flex flex-col md:flex-row gap-8 items-center my-12'
+                  ),
+                  'w-full md:w-3/5 space-y-4',
+                  'w-full md:w-1/2 space-y-4'
+                ),
+                'md:w-2/5 rounded-[2rem]',
+                'md:w-1/2 rounded-[2rem]'
+              )::jsonb
+WHERE content::text LIKE '%w-full md:w-3/5 space-y-4%';
+
+-- ---------------------------------------------------------------------------
+-- 2. EN post body: nx-graph <img> -> responsive YouTube <iframe>
+-- ---------------------------------------------------------------------------
+UPDATE public.blocks
+SET content = replace(
+                content::text,
+                $old$<img src='/images/nx-graph.webp' alt='Nx project graph preview showing apps and shared libraries linked together' class='w-full h-auto rounded-2xl object-cover' />$old$,
+                $new$<div class='relative aspect-video overflow-hidden rounded-2xl'><iframe class='absolute inset-0 h-full w-full border-0' src='https://www.youtube.com/embed/DNqU8ez9qjs?si=p2oIy0f-n7wiaBmO' title='How NextBlock™ Works' allow='accelerated-motion; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' loading='lazy' allowfullscreen></iframe></div>$new$
+              )::jsonb
+WHERE content::text LIKE '%Nx project graph preview showing apps and shared libraries linked together%';
+
+-- ---------------------------------------------------------------------------
+-- 3. FR post body: nx-graph <img> -> responsive YouTube <iframe>
+-- ---------------------------------------------------------------------------
+UPDATE public.blocks
+SET content = replace(
+                content::text,
+                $old$<img src='/images/nx-graph.webp' alt='Apercu du graphe Nx montrant les applications et librairies partagees' class='w-full h-auto rounded-2xl object-cover' />$old$,
+                $new$<div class='relative aspect-video overflow-hidden rounded-2xl'><iframe class='absolute inset-0 h-full w-full border-0' src='https://www.youtube.com/embed/DNqU8ez9qjs?si=p2oIy0f-n7wiaBmO' title='Comment NextBlock™ fonctionne' allow='accelerated-motion; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' loading='lazy' allowfullscreen></iframe></div>$new$
+              )::jsonb
+WHERE content::text LIKE '%Apercu du graphe Nx montrant les applications et librairies partagees%';
+
+
   -- Step D: Anchor preserved profiles
   INSERT INTO public.profiles (id, updated_at, full_name, avatar_url, website, role)
   SELECT preserved_user.id, NULL, NULL, NULL, NULL, 'ADMIN'

package/templates/nextblock-template/docs/13-STAYING-UP-TO-DATE.md

@@ -89,6 +89,13 @@ Variables, or your `.env`):
 With that set, the dashboard conflict banner works on private forks too. (The workflow
 itself still needs no extra secret — `GITHUB_TOKEN` covers it either way.)
 
+> **⚠️ Vercel Hobby (free) plan + a private repo blocks auto-deploys.** On Hobby, Vercel only
+> deploys **private**-repo commits authored by the project owner and rejects automated
+> (bot/collaborator) commits — so the auto-merge push won't deploy (*"Hobby Plan does not
+> support collaboration for private repositories"*). Either **make the repo public**
+> (recommended — it also makes the conflict banner tokenless) or upgrade to **Vercel Pro**.
+> Public repos have no such restriction on Hobby.
+
 ### How the dashboard stays current (no cron)
 
 The CMS refreshes update/conflict status **in the background after a dashboard page

package/templates/nextblock-template/lib/setup/migrations-bundle.ts

@@ -228,5 +228,15 @@ export const MIGRATIONS_BUNDLE: BundledMigration[] = [
     "version": "00000000000042",
     "name": "00000000000042_seed_deploy_to_vercel_ctas.sql",
     "sql": "-- Promote the one-click \"Deploy to Vercel\" button as a CTA in the seeded homepage.\n--\n-- Two placements per language, both rendered through the normal 'button' block\n-- (ButtonBlockRenderer), so external URLs open in a new tab with rel=noopener:\n--   1. Home HERO  — replace the secondary \"View on GitHub\" / \"Voir sur GitHub\"\n--      outline button with a \"Deploy on Vercel\" / \"Déployer sur Vercel\" button\n--      (same variant/size/position; the primary \"Get Started\" button is untouched,\n--      and GitHub is still linked from the hero social row + the community section).\n--   2. Home CLOSING CTA band (\"Have Questions?\" / \"Des questions ?\") — append a\n--      secondary (outline) \"Deploy on Vercel\" button after the contact button so\n--      the page also ends on the deploy action, styled to match the hero's Deploy\n--      button and keep the filled \"Get in Touch\" button as the band's primary.\n--\n-- The canonical deploy URL is the exact href from the README's Deploy button\n-- (native Supabase Marketplace `stores` flow). It is stored as a raw button `url`\n-- value (literal '&', not '&') because the renderer uses it directly as an href.\n--\n-- Forward-only and idempotent:\n--   * The hero swap matches the old button label, so a second run is a no-op\n--     (the label no longer exists) and it silently skips any install where the\n--     button was already customized or removed.\n--   * The closing-band append is guarded by NOT LIKE '%Deploy on Vercel%' /\n--     '%Déployer sur Vercel%', so it never appends twice.\n-- Scoping is by unique block text, so exactly the home hero / closing band match.\n\n-- ---------------------------------------------------------------------------\n-- 1a. EN home hero: \"View on GitHub\" -> \"Deploy on Vercel\"\n-- ---------------------------------------------------------------------------\nUPDATE public.blocks\nSET content = replace(\n                replace(content::text, '\"View on GitHub\"', '\"Deploy on Vercel\"'),\n                '\"https://github.com/nextblock-cms/nextblock\"',\n                '\"https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fnextblock-cms%2Fnextblock&project-name=nextblock&repository-name=nextblock&stores=%5B%7B%22type%22%3A%22integration%22%2C%22integrationSlug%22%3A%22supabase%22%2C%22productSlug%22%3A%22supabase%22%7D%5D\"'\n              )::jsonb\nWHERE content::text LIKE '%\"View on GitHub\"%';\n\n-- ---------------------------------------------------------------------------\n-- 1b. FR home hero: \"Voir sur GitHub\" -> \"Déployer sur Vercel\"\n-- ---------------------------------------------------------------------------\nUPDATE public.blocks\nSET content = replace(\n                replace(content::text, '\"Voir sur GitHub\"', '\"Déployer sur Vercel\"'),\n                '\"https://github.com/nextblock-cms/nextblock\"',\n                '\"https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fnextblock-cms%2Fnextblock&project-name=nextblock&repository-name=nextblock&stores=%5B%7B%22type%22%3A%22integration%22%2C%22integrationSlug%22%3A%22supabase%22%2C%22productSlug%22%3A%22supabase%22%7D%5D\"'\n              )::jsonb\nWHERE content::text LIKE '%\"Voir sur GitHub\"%';\n\n-- ---------------------------------------------------------------------------\n-- 2a. EN home closing band (\"Have Questions?\"): append a Deploy on Vercel button\n-- ---------------------------------------------------------------------------\nUPDATE public.blocks\nSET content = jsonb_set(\n                content,\n                '{column_blocks,0}',\n                (content #> '{column_blocks,0}') ||\n                '[{\"block_type\":\"button\",\"content\":{\"text\":\"Deploy on Vercel\",\"url\":\"https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fnextblock-cms%2Fnextblock&project-name=nextblock&repository-name=nextblock&stores=%5B%7B%22type%22%3A%22integration%22%2C%22integrationSlug%22%3A%22supabase%22%2C%22productSlug%22%3A%22supabase%22%7D%5D\",\"variant\":\"outline\",\"size\":\"lg\",\"position\":\"center\"}}]'::jsonb\n              )\nWHERE content::text LIKE '%Have Questions?%'\n  AND content::text NOT LIKE '%Deploy on Vercel%';\n\n-- ---------------------------------------------------------------------------\n-- 2b. FR home closing band (\"Des questions ?\"): append a Déployer sur Vercel button\n-- ---------------------------------------------------------------------------\nUPDATE public.blocks\nSET content = jsonb_set(\n                content,\n                '{column_blocks,0}',\n                (content #> '{column_blocks,0}') ||\n                '[{\"block_type\":\"button\",\"content\":{\"text\":\"Déployer sur Vercel\",\"url\":\"https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fnextblock-cms%2Fnextblock&project-name=nextblock&repository-name=nextblock&stores=%5B%7B%22type%22%3A%22integration%22%2C%22integrationSlug%22%3A%22supabase%22%2C%22productSlug%22%3A%22supabase%22%7D%5D\",\"variant\":\"outline\",\"size\":\"lg\",\"position\":\"center\"}}]'::jsonb\n              )\nWHERE content::text LIKE '%Des questions ?%'\n  AND content::text NOT LIKE '%Déployer sur Vercel%';\n"
+  },
+  {
+    "version": "00000000000043",
+    "name": "00000000000043_swap_home_hero_media_to_youtube.sql",
+    "sql": "-- Swap the home HERO media from the static NBcover image to an embedded YouTube video.\n--\n-- The seeded home hero (migration 010) renders a \"Why teams switch / 100% Lighthouse\"\n-- card in its right column whose last element is an <img src=\"/images/NBcover.webp\" />.\n-- This replaces just that <img> with a responsive 16:9 YouTube <iframe>, keeping the\n-- surrounding card, its rounded/border/shadow wrapper, and every other block intact.\n--\n-- Rendering path: the hero right column is a 'text' block; TextBlockRenderer feeds the\n-- html_content through html-react-parser, which preserves <iframe> (it only strips on*\n-- handlers and swaps known CMS <img> for next/image). The proxy.ts CSP frame-src already\n-- allows https://www.youtube.com, so the embed is not blocked.\n--\n-- Forward-only and idempotent:\n--   * Each UPDATE matches the language-specific <img> alt text, so a second run finds no\n--     match and is a no-op (the alt text no longer exists once swapped).\n--   * String replace on content::text mirrors migration 042; the img markup is unique to\n--     the home hero, so exactly the EN and FR home hero blocks are touched.\n--\n-- The NBcover.webp media row is left untouched — it is still the feature image for the\n-- \"how-nextblock-works\" post; only the inline hero usage changes.\n\n-- ---------------------------------------------------------------------------\n-- 1. EN home hero: replace NBcover <img> with a YouTube <iframe>\n-- ---------------------------------------------------------------------------\nUPDATE public.blocks\nSET content = replace(\n                content::text,\n                '<img src=''/images/NBcover.webp'' alt=''Nextblock cover showcasing dashboards and blocks'' class=''w-full h-auto object-cover transform group-hover:scale-105 transition-transform duration-700'' fetchpriority=''high'' />',\n                '<div class=''relative w-full aspect-video''><iframe class=''absolute inset-0 h-full w-full border-0'' src=''https://www.youtube.com/embed/71MyfoL4YVM?si=jtlDXV6cSC8rDgz0'' title=''NextBlock demo video'' allow=''accelerated-motion; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'' referrerpolicy=''strict-origin-when-cross-origin'' loading=''lazy'' allowfullscreen></iframe></div>'\n              )::jsonb\nWHERE content::text LIKE '%Nextblock cover showcasing dashboards and blocks%';\n\n-- ---------------------------------------------------------------------------\n-- 2. FR home hero: replace NBcover <img> with a YouTube <iframe>\n-- ---------------------------------------------------------------------------\nUPDATE public.blocks\nSET content = replace(\n                content::text,\n                '<img src=''/images/NBcover.webp'' alt=''Couverture Nextblock'' class=''w-full h-auto object-cover transform group-hover:scale-105 transition-transform duration-700'' fetchpriority=''high'' />',\n                '<div class=''relative w-full aspect-video''><iframe class=''absolute inset-0 h-full w-full border-0'' src=''https://www.youtube.com/embed/71MyfoL4YVM?si=jtlDXV6cSC8rDgz0'' title=''Vidéo de démonstration NextBlock'' allow=''accelerated-motion; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'' referrerpolicy=''strict-origin-when-cross-origin'' loading=''lazy'' allowfullscreen></iframe></div>'\n              )::jsonb\nWHERE content::text LIKE '%Couverture Nextblock%';\n"
+  },
+  {
+    "version": "00000000000044",
+    "name": "00000000000044_swap_article_nx_graph_for_youtube.sql",
+    "sql": "-- Swap the Nx-graph image in the \"How NextBlock™ Works\" article for an embedded\n-- YouTube video, and rebalance that two-column section to an even 50/50 split.\n--\n-- Targets the post-body 'text' block (dollar-quoted html_content seeded in migration\n-- 010) for both language variants of the same post:\n--   * EN  slug how-nextblock-works           (img alt \"Nx project graph preview ...\")\n--   * FR  slug comment-nextblock-fonctionne  (img alt \"Apercu du graphe Nx ...\")\n--\n-- Three forward-only, idempotent edits:\n--   1. Column widths md:w-3/5 (text) and md:w-2/5 (media) -> md:w-1/2 each, and the\n--      flex row switches items-start -> items-center so the shorter media column sits\n--      centered against the taller text column. These class fragments occur only in\n--      this one section (EN + FR), so a single UPDATE rebalances both languages.\n--   2/3. Replace the <img src=\"/images/nx-graph.webp\" ...> with a responsive 16:9\n--      YouTube <iframe>, kept inside the existing white aside card above its caption.\n--\n-- Rendering/CSP identical to migration 043: TextBlockRenderer -> html-react-parser\n-- preserves the <iframe>; proxy.ts CSP frame-src allows www.youtube.com; every utility\n-- class used here lives in this .sql file, which Tailwind's content scanner\n-- (libs/**/*.sql) compiles into the bundle. The nx-graph.webp media row is left intact.\n--\n-- Each UPDATE is guarded by a substring that only exists pre-swap, so a second run is a\n-- no-op. Dollar-quoted string literals ($old$/$new$) avoid escaping the single-quoted\n-- HTML attributes; the sandbox reset runs this via postgres db.unsafe() (no outer\n-- dollar-quote wrapper), same as migration 010's dollar-quoted seed content.\n\n-- ---------------------------------------------------------------------------\n-- 1. Both languages: 3/5 + 2/5 columns -> 50/50, and vertical-center the row\n-- ---------------------------------------------------------------------------\nUPDATE public.blocks\nSET content = replace(\n                replace(\n                  replace(\n                    content::text,\n                    'flex flex-col md:flex-row gap-8 items-start my-12',\n                    'flex flex-col md:flex-row gap-8 items-center my-12'\n                  ),\n                  'w-full md:w-3/5 space-y-4',\n                  'w-full md:w-1/2 space-y-4'\n                ),\n                'md:w-2/5 rounded-[2rem]',\n                'md:w-1/2 rounded-[2rem]'\n              )::jsonb\nWHERE content::text LIKE '%w-full md:w-3/5 space-y-4%';\n\n-- ---------------------------------------------------------------------------\n-- 2. EN post body: nx-graph <img> -> responsive YouTube <iframe>\n-- ---------------------------------------------------------------------------\nUPDATE public.blocks\nSET content = replace(\n                content::text,\n                $old$<img src='/images/nx-graph.webp' alt='Nx project graph preview showing apps and shared libraries linked together' class='w-full h-auto rounded-2xl object-cover' />$old$,\n                $new$<div class='relative aspect-video overflow-hidden rounded-2xl'><iframe class='absolute inset-0 h-full w-full border-0' src='https://www.youtube.com/embed/DNqU8ez9qjs?si=p2oIy0f-n7wiaBmO' title='How NextBlock™ Works' allow='accelerated-motion; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' loading='lazy' allowfullscreen></iframe></div>$new$\n              )::jsonb\nWHERE content::text LIKE '%Nx project graph preview showing apps and shared libraries linked together%';\n\n-- ---------------------------------------------------------------------------\n-- 3. FR post body: nx-graph <img> -> responsive YouTube <iframe>\n-- ---------------------------------------------------------------------------\nUPDATE public.blocks\nSET content = replace(\n                content::text,\n                $old$<img src='/images/nx-graph.webp' alt='Apercu du graphe Nx montrant les applications et librairies partagees' class='w-full h-auto rounded-2xl object-cover' />$old$,\n                $new$<div class='relative aspect-video overflow-hidden rounded-2xl'><iframe class='absolute inset-0 h-full w-full border-0' src='https://www.youtube.com/embed/DNqU8ez9qjs?si=p2oIy0f-n7wiaBmO' title='Comment NextBlock™ fonctionne' allow='accelerated-motion; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' loading='lazy' allowfullscreen></iframe></div>$new$\n              )::jsonb\nWHERE content::text LIKE '%Apercu du graphe Nx montrant les applications et librairies partagees%';\n"
   }
 ];

package/templates/nextblock-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextblock-cms/template",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "private": true,
   "scripts": {
     "dev": "next dev",