create-nextblock 0.13.10 → 0.13.12

package/templates/nextblock-template/components/form-message.tsx

@@ -1,32 +1,32 @@
- 'use client';
-
-import { useTranslations } from "@nextblock-cms/utils";
-
-export type Message =
-  | { success: string }
-  | { error: string }
-  | { message: string };
-
-export function FormMessage({ message }: { message?: Message }) {
-  const { t } = useTranslations();
-
-  if (!message) return null;
-
-  return (
-    <div className="flex flex-col gap-2 w-full max-w-md text-sm">
-      {"success" in message && message.success && (
-        <div className="text-foreground border-l-2 border-foreground px-4">
-          {t(message.success)}
-        </div>
-      )}
-      {"error" in message && message.error && (
-        <div className="text-destructive border-l-2 border-destructive px-4">
-          {t(message.error)}
-        </div>
-      )}
-      {"message" in message && message.message && (
-        <div className="text-foreground border-l-2 px-4">{t(message.message)}</div>
-      )}
-    </div>
-  );
-}
+ 'use client';
+
+import { useTranslations } from "@nextblock-cms/utils";
+
+export type Message =
+  | { success: string }
+  | { error: string }
+  | { message: string };
+
+export function FormMessage({ message }: { message?: Message }) {
+  const { t } = useTranslations();
+
+  if (!message) return null;
+
+  return (
+    <div className="flex flex-col gap-2 w-full max-w-md text-sm">
+      {"success" in message && message.success && (
+        <div className="text-foreground border-l-2 border-foreground px-4">
+          {t(message.success)}
+        </div>
+      )}
+      {"error" in message && message.error && (
+        <div className="text-destructive border-l-2 border-destructive px-4">
+          {t(message.error)}
+        </div>
+      )}
+      {"message" in message && message.message && (
+        <div className="text-foreground border-l-2 px-4">{t(message.message)}</div>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/components/media/YouTubeFacade.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import React, { useState } from 'react';
+import Image from 'next/image';
+import {
+  buildNoCookieEmbedUrl,
+  youTubePosterUrl,
+  YOUTUBE_POSTER_DIMENSIONS,
+  type YouTubePosterQuality,
+} from '../../lib/media/youtube';
+
+interface YouTubeFacadeProps {
+  videoId: string;
+  title?: string;
+  /** Serialized extra player params (from parseYouTubeUrl). */
+  query?: string;
+  /** Classes for the clickable surface / injected iframe. Defaults to filling its parent. */
+  className?: string;
+  /**
+   * Above-the-fold embeds. The poster is very often the page's LCP element, so
+   * this preloads it, marks it fetchpriority=high and drops lazy-loading.
+   */
+  priority?: boolean;
+  /** Responsive-srcset layout hint; override when the embed is not ~half-width. */
+  sizes?: string;
+}
+
+const FILL = 'absolute inset-0 h-full w-full';
+// The video block is content-width, so it is full-bleed on phones and roughly a
+// column wide on desktop. Callers that know better pass their own `sizes`.
+const DEFAULT_SIZES = '(max-width: 768px) 100vw, 50vw';
+
+/**
+ * Click-to-play YouTube facade: renders a poster + play button and loads no
+ * youtube.com resource at all until the user clicks. This is what keeps the
+ * Lighthouse `inspector-issues` audit green -- the nocookie host still writes
+ * cookies from the player JS, so the only reliable fix is not booting the
+ * player during the audit. See lib/media/youtube.ts.
+ */
+const YouTubeFacade: React.FC<YouTubeFacadeProps> = ({
+  videoId,
+  title,
+  query,
+  className,
+  priority = false,
+  sizes,
+}) => {
+  const [activated, setActivated] = useState(false);
+  const [posterQuality, setPosterQuality] = useState<YouTubePosterQuality>('maxres');
+  const label = title || 'YouTube video';
+  const surface = className || FILL;
+  const poster = youTubePosterUrl(videoId, posterQuality);
+  const posterSize = YOUTUBE_POSTER_DIMENSIONS[posterQuality];
+
+  if (activated) {
+    return (
+      <iframe
+        className={surface}
+        src={buildNoCookieEmbedUrl(videoId, new URLSearchParams(query || ''), { autoplay: true })}
+        title={label}
+        allow="autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerPolicy="strict-origin-when-cross-origin"
+        allowFullScreen
+      />
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => setActivated(true)}
+      aria-label={`Play video: ${label}`}
+      className={`${surface} group flex items-center justify-center overflow-hidden border-0 bg-black p-0`}
+    >
+      {/* Routed through next/image on purpose: i.ytimg.com serves the poster as a
+          full-size JPEG with a 2h cache TTL, which made a ~205 KiB download the LCP
+          for a thumbnail-sized slot. The optimizer re-encodes to AVIF/WebP at the
+          displayed width and serves it same-origin under the app's long cache TTL. */}
+      <Image
+        src={poster}
+        alt=""
+        aria-hidden="true"
+        width={posterSize.width}
+        height={posterSize.height}
+        sizes={sizes || DEFAULT_SIZES}
+        quality={60}
+        priority={priority}
+        fetchPriority={priority ? 'high' : undefined}
+        loading={priority ? undefined : 'lazy'}
+        decoding="async"
+        // maxresdefault.jpg is not uploaded for every video; fall back to the
+        // hqdefault variant, which always exists.
+        onError={() => setPosterQuality((current) => (current === 'maxres' ? 'hq' : current))}
+        className="absolute inset-0 h-full w-full object-cover opacity-90 transition group-hover:opacity-100"
+      />
+      <span className="relative flex h-16 w-16 items-center justify-center rounded-full bg-black/70 text-white shadow-lg transition group-hover:scale-110 group-hover:bg-red-600">
+        <svg viewBox="0 0 24 24" className="ml-1 h-7 w-7" aria-hidden="true" focusable="false">
+          <path d="M8 5v14l11-7z" fill="currentColor" />
+        </svg>
+      </span>
+    </button>
+  );
+};
+
+export default YouTubeFacade;

package/templates/nextblock-template/components/media/youtube-embed-replace.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Element, type HTMLReactParserOptions } from 'html-react-parser';
+import YouTubeFacade from './YouTubeFacade';
+import { parseYouTubeUrl } from '../../lib/media/youtube';
+
+/**
+ * html-react-parser `replace` helper: swaps any YouTube <iframe> for a
+ * click-to-play facade (zero third-party requests on load) and forces
+ * loading="lazy" on every other third-party frame.
+ * Returns undefined to let the parser render the node normally.
+ */
+export function replaceYouTubeIframe(domNode: Element): React.ReactElement | undefined {
+  if (domNode.name !== 'iframe' || !domNode.attribs) return undefined;
+  const parsed = parseYouTubeUrl(domNode.attribs.src);
+  if (!parsed) {
+    if (!domNode.attribs.loading) domNode.attribs.loading = 'lazy';
+    return undefined;
+  }
+  return (
+    <YouTubeFacade
+      videoId={parsed.videoId}
+      title={domNode.attribs.title}
+      query={parsed.params.toString()}
+      className={domNode.attribs.class}
+    />
+  );
+}
+
+/** Minimal parser options for raw-HTML surfaces that only need embed safety. */
+export const embedSafeParserOptions: HTMLReactParserOptions = {
+  replace: (domNode) => (domNode instanceof Element ? replaceYouTubeIframe(domNode) : undefined),
+};

package/templates/nextblock-template/components/privacy/ConsentBanner.tsx

@@ -1,170 +1,170 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import Link from 'next/link';
-import { useTranslations } from '@nextblock-cms/utils';
-import { logConsentDecision } from '../../app/actions/consent';
-import { readConsent, writeConsent } from '../../lib/privacy/consent-client';
-
-/**
- * Minimal floating consent pill, bottom-right. Renders nothing once a decision
- * exists (the nb_consent_preference cookie). Decisions persist client-side and
- * are mirrored to privacy_consent_logs for accountability.
- */
-export function ConsentBanner() {
-  const { lang, t } = useTranslations();
-  const [visible, setVisible] = useState(false);
-  const [managing, setManaging] = useState(false);
-  const [analytics, setAnalytics] = useState(true);
-  const [marketing, setMarketing] = useState(false);
-  const isFrench = lang.toLowerCase().startsWith('fr');
-
-  const translate = (key: string, fallback: string) => {
-    const translated = t(key);
-    return translated === key ? fallback : translated;
-  };
-
-  const privacyPolicyHref = translate(
-    'privacy.consent.privacy_policy_href',
-    isFrench ? '/politique-de-confidentialite' : '/privacy-policy',
-  );
-
-  useEffect(() => {
-    if (!readConsent()) setVisible(true);
-  }, []);
-
-  const decide = (choice: { analytics: boolean; marketing: boolean }) => {
-    const pref = writeConsent(choice);
-    void logConsentDecision({
-      token: pref.token,
-      analytics: choice.analytics,
-      marketing: choice.marketing,
-    });
-    setVisible(false);
-  };
-
-  if (!visible) return null;
-
-  return (
-    <div
-      role="dialog"
-      aria-label={translate('privacy.consent.aria_label', 'Privacy consent')}
-      className="fixed bottom-4 right-4 z-[70] w-[min(92vw,360px)] animate-in fade-in slide-in-from-bottom-2 duration-300"
-    >
-      <div className="rounded-2xl border border-slate-200/70 bg-white/95 p-4 shadow-[0_8px_30px_rgba(15,23,42,0.12)] backdrop-blur-md dark:border-slate-700/60 dark:bg-slate-900/95 dark:shadow-[0_8px_30px_rgba(0,0,0,0.5)]">
-        <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
-          {translate('privacy.consent.title', 'We value your privacy')}
-        </p>
-        <p className="mt-1 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
-          {translate(
-            'privacy.consent.description_before_policy_link',
-            'We use only essential cookies by default. With your consent we also use analytics to improve the site. See our',
-          )}{' '}
-          <Link
-            href={privacyPolicyHref}
-            className="underline underline-offset-2 hover:text-slate-700 dark:hover:text-slate-200"
-          >
-            {translate('privacy.consent.privacy_policy_link', 'Privacy Policy')}
-          </Link>
-          {translate('privacy.consent.description_after_policy_link', '.')}
-        </p>
-
-        {managing && (
-          <div className="mt-3 space-y-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-800/60">
-            <label className="flex items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
-              <span>
-                <span className="font-medium text-slate-800 dark:text-slate-200">
-                  {translate('privacy.consent.necessary_label', 'Necessary')}
-                </span>
-                <span className="block text-[11px] text-slate-400">
-                  {translate('privacy.consent.necessary_help', 'Always on')}
-                </span>
-              </span>
-              <input
-                type="checkbox"
-                checked
-                disabled
-                className="h-4 w-4 accent-slate-400"
-              />
-            </label>
-            <label className="flex cursor-pointer items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
-              <span>
-                <span className="font-medium text-slate-800 dark:text-slate-200">
-                  {translate('privacy.consent.analytics_label', 'Analytics')}
-                </span>
-                <span className="block text-[11px] text-slate-400">
-                  {translate(
-                    'privacy.consent.analytics_help',
-                    'Usage insights',
-                  )}
-                </span>
-              </span>
-              <input
-                type="checkbox"
-                checked={analytics}
-                onChange={(e) => setAnalytics(e.target.checked)}
-                className="h-4 w-4 accent-slate-900 dark:accent-slate-100"
-              />
-            </label>
-            <label className="flex cursor-pointer items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
-              <span>
-                <span className="font-medium text-slate-800 dark:text-slate-200">
-                  {translate('privacy.consent.marketing_label', 'Marketing')}
-                </span>
-                <span className="block text-[11px] text-slate-400">
-                  {translate(
-                    'privacy.consent.marketing_help',
-                    'Personalized content',
-                  )}
-                </span>
-              </span>
-              <input
-                type="checkbox"
-                checked={marketing}
-                onChange={(e) => setMarketing(e.target.checked)}
-                className="h-4 w-4 accent-slate-900 dark:accent-slate-100"
-              />
-            </label>
-          </div>
-        )}
-
-        <div className="mt-3 flex items-center gap-2">
-          {managing ? (
-            <button
-              type="button"
-              onClick={() => decide({ analytics, marketing })}
-              className="flex-1 rounded-lg bg-slate-900 px-3 py-2 text-xs font-medium text-white transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
-            >
-              {translate('privacy.consent.save_choices', 'Save choices')}
-            </button>
-          ) : (
-            <button
-              type="button"
-              onClick={() => decide({ analytics: true, marketing: true })}
-              className="flex-1 rounded-lg bg-slate-900 px-3 py-2 text-xs font-medium text-white transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
-            >
-              {translate('privacy.consent.accept_all', 'Accept all')}
-            </button>
-          )}
-          <button
-            type="button"
-            onClick={() => decide({ analytics: false, marketing: false })}
-            className="rounded-lg border border-slate-200 px-3 py-2 text-xs font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
-          >
-            {translate('privacy.consent.reject_all', 'Reject all')}
-          </button>
-        </div>
-
-        <button
-          type="button"
-          onClick={() => setManaging((prev) => !prev)}
-          className="mt-2 w-full text-center text-[11px] text-slate-800 underline underline-offset-2 transition hover:text-slate-600 dark:hover:text-slate-300"
-        >
-          {managing
-            ? translate('privacy.consent.hide_options', 'Hide options')
-            : translate('privacy.consent.manage_options', 'Manage options')}
-        </button>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useTranslations } from '@nextblock-cms/utils';
+import { logConsentDecision } from '../../app/actions/consent';
+import { readConsent, writeConsent } from '../../lib/privacy/consent-client';
+
+/**
+ * Minimal floating consent pill, bottom-right. Renders nothing once a decision
+ * exists (the nb_consent_preference cookie). Decisions persist client-side and
+ * are mirrored to privacy_consent_logs for accountability.
+ */
+export function ConsentBanner() {
+  const { lang, t } = useTranslations();
+  const [visible, setVisible] = useState(false);
+  const [managing, setManaging] = useState(false);
+  const [analytics, setAnalytics] = useState(true);
+  const [marketing, setMarketing] = useState(false);
+  const isFrench = lang.toLowerCase().startsWith('fr');
+
+  const translate = (key: string, fallback: string) => {
+    const translated = t(key);
+    return translated === key ? fallback : translated;
+  };
+
+  const privacyPolicyHref = translate(
+    'privacy.consent.privacy_policy_href',
+    isFrench ? '/politique-de-confidentialite' : '/privacy-policy',
+  );
+
+  useEffect(() => {
+    if (!readConsent()) setVisible(true);
+  }, []);
+
+  const decide = (choice: { analytics: boolean; marketing: boolean }) => {
+    const pref = writeConsent(choice);
+    void logConsentDecision({
+      token: pref.token,
+      analytics: choice.analytics,
+      marketing: choice.marketing,
+    });
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-label={translate('privacy.consent.aria_label', 'Privacy consent')}
+      className="fixed bottom-4 right-4 z-[70] w-[min(92vw,360px)] animate-in fade-in slide-in-from-bottom-2 duration-300"
+    >
+      <div className="rounded-2xl border border-slate-200/70 bg-white/95 p-4 shadow-[0_8px_30px_rgba(15,23,42,0.12)] backdrop-blur-md dark:border-slate-700/60 dark:bg-slate-900/95 dark:shadow-[0_8px_30px_rgba(0,0,0,0.5)]">
+        <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
+          {translate('privacy.consent.title', 'We value your privacy')}
+        </p>
+        <p className="mt-1 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
+          {translate(
+            'privacy.consent.description_before_policy_link',
+            'We use only essential cookies by default. With your consent we also use analytics to improve the site. See our',
+          )}{' '}
+          <Link
+            href={privacyPolicyHref}
+            className="underline underline-offset-2 hover:text-slate-700 dark:hover:text-slate-200"
+          >
+            {translate('privacy.consent.privacy_policy_link', 'Privacy Policy')}
+          </Link>
+          {translate('privacy.consent.description_after_policy_link', '.')}
+        </p>
+
+        {managing && (
+          <div className="mt-3 space-y-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-800/60">
+            <label className="flex items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
+              <span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">
+                  {translate('privacy.consent.necessary_label', 'Necessary')}
+                </span>
+                <span className="block text-[11px] text-slate-400">
+                  {translate('privacy.consent.necessary_help', 'Always on')}
+                </span>
+              </span>
+              <input
+                type="checkbox"
+                checked
+                disabled
+                className="h-4 w-4 accent-slate-400"
+              />
+            </label>
+            <label className="flex cursor-pointer items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
+              <span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">
+                  {translate('privacy.consent.analytics_label', 'Analytics')}
+                </span>
+                <span className="block text-[11px] text-slate-400">
+                  {translate(
+                    'privacy.consent.analytics_help',
+                    'Usage insights',
+                  )}
+                </span>
+              </span>
+              <input
+                type="checkbox"
+                checked={analytics}
+                onChange={(e) => setAnalytics(e.target.checked)}
+                className="h-4 w-4 accent-slate-900 dark:accent-slate-100"
+              />
+            </label>
+            <label className="flex cursor-pointer items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
+              <span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">
+                  {translate('privacy.consent.marketing_label', 'Marketing')}
+                </span>
+                <span className="block text-[11px] text-slate-400">
+                  {translate(
+                    'privacy.consent.marketing_help',
+                    'Personalized content',
+                  )}
+                </span>
+              </span>
+              <input
+                type="checkbox"
+                checked={marketing}
+                onChange={(e) => setMarketing(e.target.checked)}
+                className="h-4 w-4 accent-slate-900 dark:accent-slate-100"
+              />
+            </label>
+          </div>
+        )}
+
+        <div className="mt-3 flex items-center gap-2">
+          {managing ? (
+            <button
+              type="button"
+              onClick={() => decide({ analytics, marketing })}
+              className="flex-1 rounded-lg bg-slate-900 px-3 py-2 text-xs font-medium text-white transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
+            >
+              {translate('privacy.consent.save_choices', 'Save choices')}
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={() => decide({ analytics: true, marketing: true })}
+              className="flex-1 rounded-lg bg-slate-900 px-3 py-2 text-xs font-medium text-white transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
+            >
+              {translate('privacy.consent.accept_all', 'Accept all')}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => decide({ analytics: false, marketing: false })}
+            className="rounded-lg border border-slate-200 px-3 py-2 text-xs font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
+          >
+            {translate('privacy.consent.reject_all', 'Reject all')}
+          </button>
+        </div>
+
+        <button
+          type="button"
+          onClick={() => setManaging((prev) => !prev)}
+          className="mt-2 w-full text-center text-[11px] text-slate-800 underline underline-offset-2 transition hover:text-slate-600 dark:hover:text-slate-300"
+        >
+          {managing
+            ? translate('privacy.consent.hide_options', 'Hide options')
+            : translate('privacy.consent.manage_options', 'Manage options')}
+        </button>
+      </div>
+    </div>
+  );
+}