@salifbiaye/create-boutique 0.3.4 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salifbiaye/create-boutique",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Usine à Boutiques : génère un projet complet (backend Medusa + une boutique Next.js par campagne) prêt pour docker compose",
   "type": "module",
   "repository": { "type": "git", "url": "git+https://github.com/salifbiaye/create-boutique.git" },

package/templates/backend/src/admin/i18n/json/en.json

@@ -23,7 +23,8 @@
       "topbar": "Top bar messages",
       "promo": "Promo banner",
       "vars": "Variables used by theme texts",
-      "identity": "Identity"
+      "identity": "Identity",
+      "share": "Social sharing (link preview)"
     },
     "fields": {
       "startsAt": "Starts at",
@@ -49,7 +50,10 @@
       "countdownTheme": "As the theme",
       "countdownYes": "Always show",
       "countdownNo": "Never show",
-      "promoImage": "Promo banner image"
+      "promoImage": "Promo banner image",
+      "seoTitle": "Share title (70 characters max)",
+      "seoDescription": "Share description (200 characters max)",
+      "seoImage": "Share image (ideally 1200 × 630, jpg, png or webp)"
     },
     "errors": {
       "imageType": "Image must be jpg, png or webp",
@@ -61,6 +65,7 @@
       "hint": "Shown on the category tiles of the stores.",
       "save": "Save image",
       "saved": "Image saved"
-    }
+    },
+    "shareHint": "What shows when the store link is shared (WhatsApp, Facebook, LinkedIn…). Empty = store name, subtitle and main visual."
   }
 }

package/templates/backend/src/admin/i18n/json/fr.json

@@ -23,7 +23,8 @@
       "topbar": "Messages de la barre du haut",
       "promo": "Bandeau promo",
       "vars": "Variables des textes du thème",
-      "identity": "Identité"
+      "identity": "Identité",
+      "share": "Partage sur les réseaux (aperçu du lien)"
     },
     "fields": {
       "startsAt": "Début",
@@ -49,7 +50,10 @@
       "countdownTheme": "Comme le thème",
       "countdownYes": "Toujours afficher",
       "countdownNo": "Ne jamais afficher",
-      "promoImage": "Image du bandeau promo"
+      "promoImage": "Image du bandeau promo",
+      "seoTitle": "Titre de partage (70 caractères max)",
+      "seoDescription": "Description de partage (200 caractères max)",
+      "seoImage": "Image de partage (idéal 1200 × 630, jpg, png ou webp)"
     },
     "errors": {
       "imageType": "L'image doit être en jpg, png ou webp",
@@ -61,6 +65,7 @@
       "hint": "Affichée sur les tuiles catégories des boutiques.",
       "save": "Enregistrer l'image",
       "saved": "Image enregistrée"
-    }
+    },
+    "shareHint": "Ce qui s'affiche quand on partage le lien de la boutique (WhatsApp, Facebook, LinkedIn…). Vide = nom de la boutique, sous-titre et visuel principal."
   }
 }

package/templates/backend/src/admin/routes/boutique-campaigns/campaign-drawer.tsx

@@ -84,6 +84,9 @@ export function CampaignDrawer({
   const [heroImage, setHeroImage] = useState(c?.hero?.image ?? "")
   const [promoImage, setPromoImage] = useState(c?.promo?.image ?? "")
   const [logo, setLogo] = useState(c?.logo ?? "")
+  // Aperçu de partage (Open Graph) : vide = nom de la boutique, sous-titre et visuel du hero
+  const [seo, setSeo] = useState({ title: c?.seo?.title ?? "", description: c?.seo?.description ?? "" })
+  const [seoImage, setSeoImage] = useState(c?.seo?.image ?? "")
   const [countdown, setCountdown] = useState(c?.showCountdown == null ? "theme" : c.showCountdown ? "yes" : "no")
 
   const save = useMutation({
@@ -124,6 +127,7 @@ export function CampaignDrawer({
       topbar: topbar.some((m) => m.trim()) ? topbar.filter((m) => m.trim()) : undefined,
       hero: clean({ ...hero, bubble: bubble.some((b) => b.trim()) ? bubble : undefined }),
       promo: clean(promo),
+      seo: clean({ ...seo, image: seoImage || undefined }),
     })
   }
 
@@ -131,7 +135,7 @@ export function CampaignDrawer({
   const reset = () => {
     const d = dates()
     if (!d) return
-    save.mutate({ ...d, nextCampaign: nextCampaign || null, vars: clean(vars) ?? null, ...media() }, {
+    save.mutate({ ...d, nextCampaign: nextCampaign || null, vars: clean(vars) ?? null, ...media(), seo: clean({ ...seo, image: seoImage || undefined }) }, {
       onSuccess: () => toast.success(t("campaigns.resetDone")),
     })
   }
@@ -164,6 +168,15 @@ export function CampaignDrawer({
           <Drawer.Description>{t("campaigns.emptyHint")}</Drawer.Description>
         </Drawer.Header>
         <Drawer.Body className="flex flex-col gap-y-8 overflow-y-auto">
+          {section(
+            t("campaigns.sections.share"),
+            <>
+              <Text size="small" className="text-ui-fg-subtle">{t("campaigns.shareHint")}</Text>
+              {field(t("campaigns.fields.seoTitle"), seo.title, (v) => setSeo({ ...seo, title: v }))}
+              {field(t("campaigns.fields.seoDescription"), seo.description, (v) => setSeo({ ...seo, description: v }), true)}
+              <ImageField label={t("campaigns.fields.seoImage")} value={seoImage} onChange={setSeoImage} previewClassName="h-20 w-40 object-cover" />
+            </>
+          )}
           {section(
             t("campaigns.sections.identity"),
             <>

package/templates/backend/src/modules/campaign/validators.ts

@@ -32,6 +32,15 @@ export const CampaignTexts = z.object({
     .partial()
     .optional(),
   sections: z.object({ categories: plain(40), products: plain(40) }).partial().optional(),
+  /** Aperçu de partage (Open Graph / réseaux sociaux) ; vide = nom de la boutique, sous-titre et image du hero */
+  seo: z
+    .object({
+      title: plain(70),
+      description: plain(200),
+      image: z.url().max(500).refine((u) => /\.(jpe?g|png|webp)(\?.*)?$/i.test(u), "Image : jpg, png ou webp"),
+    })
+    .partial()
+    .optional(),
 })
 
 const imageUrl = z

package/templates/backend/src/workflows/upsert-campaign.ts

@@ -7,9 +7,9 @@ type Input = { sales_channel_id: string; campaign: CampaignInput }
 /** Enregistre la campagne d'une boutique (admin « Campagnes », seed, `campaign import`). */
 export const upsertCampaignWorkflow = createWorkflow("upsert-campaign", function (input: Input) {
   const data = transform({ input }, ({ input }) => {
-    const { startsAt, endsAt, nextCampaign, vars, heroImage, logo, promoImage, showCountdown, topbar, hero, promo, sections } = input.campaign
+    const { startsAt, endsAt, nextCampaign, vars, heroImage, logo, promoImage, showCountdown, topbar, hero, promo, sections, seo } = input.campaign
     const texts = Object.fromEntries(
-      Object.entries({ topbar, hero, promo, sections }).filter(([, v]) => v !== undefined && JSON.stringify(v) !== "{}")
+      Object.entries({ topbar, hero, promo, sections, seo }).filter(([, v]) => v !== undefined && JSON.stringify(v) !== "{}")
     )
     return {
       sales_channel_id: input.sales_channel_id,

package/templates/storefront/src/app/layout.tsx

@@ -14,6 +14,7 @@ import "styles/ub/forms.css"
 import "styles/ub/account.css"
 import "styles/ub/black-friday.css"
 import "styles/ub/harvest.css"
+import "styles/ub/media.css"
 import "styles/ub/responsive.css"
 import "styles/ub/fonts.css"
 import "styles/ub/medusa-ui.css"
@@ -25,13 +26,29 @@ export const dynamic = "force-dynamic"
 export async function generateMetadata(): Promise<Metadata> {
   const b = getBoutique()
   // Favicon = logo de la boutique s'il existe (admin → Campagnes)
-  const logo = await getCampaign()
-    .then((c) => c.logo)
-    .catch(() => undefined)
+  const campaign = await getCampaign().catch(() => undefined)
+  const logo = campaign?.logo
+  // Aperçu de partage (WhatsApp, Facebook, LinkedIn, X…) : réglages de l'admin, sinon nom, sous-titre et image du hero
+  const seo = campaign?.seo ?? {}
+  const heroImage = campaign?.hero.image && /^https?:\/\//.test(campaign.hero.image) ? campaign.hero.image : undefined
+  const title = seo.title || b.storeName
+  const description = seo.description || campaign?.hero.sub || undefined
+  const image = seo.image || heroImage || logo
   return {
     metadataBase: new URL(b.siblings[b.slug]),
-    title: { default: b.storeName, template: `%s | ${b.storeName}` },
+    title: { default: title, template: `%s | ${b.storeName}` },
+    description,
     ...(logo ? { icons: { icon: logo, apple: logo } } : {}),
+    openGraph: {
+      type: "website",
+      siteName: b.storeName,
+      title,
+      description,
+      locale: b.locale.replace("-", "_"),
+      url: b.siblings[b.slug],
+      ...(image ? { images: [{ url: image, width: 1200, height: 630, alt: title }] } : {}),
+    },
+    twitter: { card: image ? "summary_large_image" : "summary", title, description, ...(image ? { images: [image] } : {}) },
   }
 }
 

package/templates/storefront/src/lib/boutique/campaign.ts

@@ -16,6 +16,8 @@ export type Campaign = CampaignTexts & {
   freeShipping?: string
   /** Logo (URL) ; absent = pastille de couleur + nom */
   logo?: string
+  /** Aperçu de partage (Open Graph) : titre, description, image ; vides = valeurs par défaut */
+  seo?: { title?: string; description?: string; image?: string }
   /** Compte à rebours : undefined = selon le thème (CSS), true = toujours, false = jamais */
   showCountdown?: boolean
 }
@@ -104,6 +106,7 @@ export const getCampaign = cache(async (): Promise<Campaign> => {
     freeShipping: own.vars?.freeShipping,
     logo: own.logo,
     showCountdown: own.showCountdown,
+    seo: own.seo,
   }
 })
 

package/templates/storefront/src/lib/boutique/schema.ts

@@ -125,6 +125,8 @@ export const campaignFileSchema = z
     hero: campaignTextsSchema.shape.hero.partial().optional(),
     promo: campaignTextsSchema.shape.promo.partial().optional(),
     sections: campaignTextsSchema.shape.sections.unwrap().partial().optional(),
+    /** Aperçu de partage (Open Graph) défini dans l'admin */
+    seo: z.object({ title: plain(70), description: plain(200), image: z.url().max(500) }).partial().optional(),
     /** Logo de la boutique (URL du stockage), aussi utilisé comme favicon */
     logo: z.url().max(500).optional(),
     /** undefined = selon le thème */

package/templates/storefront/src/modules/ub/campaign-blocks.tsx

@@ -99,7 +99,7 @@ export function Hero({ campaign }: { campaign: Campaign }) {
           <div className="ub-hero__blob" />
           {image ? (
             // eslint-disable-next-line @next/next/no-img-element
-            <img className="ub-hero__photo" src={image} alt={t("hero.photo")} />
+            <img className="ub-hero__photo" src={image} alt={t("hero.photo")} fetchPriority="high" decoding="async" />
           ) : (
             <div className="ub-hero__photo ub-ph" role="img" aria-label={t("hero.photo")} />
           )}

package/templates/storefront/src/modules/ub/category-tiles.tsx

@@ -3,6 +3,7 @@ import { t } from "@lib/boutique/i18n"
 import { HttpTypes } from "@medusajs/types"
 import { Icon, TILE_ICONS } from "./icons"
 
+import FadeImg from "./fade-img"
 /** Tuiles catégorie : catégories racines de Medusa (6 max), couleurs --tint-1…4 du thème. */
 export default function CategoryTiles({ categories }: { categories: HttpTypes.StoreProductCategory[] }) {
   const roots = categories.filter((c) => !c.parent_category).slice(0, 6)
@@ -21,7 +22,7 @@ export default function CategoryTiles({ categories }: { categories: HttpTypes.St
             <span className="ub-tile__img" style={{ overflow: "hidden" }}>
               {/* Image de la catégorie : admin → catégorie → « Image de la catégorie » */}
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={c.metadata.image} alt="" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+              <FadeImg src={c.metadata.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
             </span>
           ) : (
             <span className="ub-tile__img ub-ph" />

package/templates/storefront/src/modules/ub/fade-img.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { useEffect, useRef, useState, type ImgHTMLAttributes } from "react"
+
+/**
+ * Image qui apparaît en fondu une fois chargée (le conteneur affiche un fond animé en attendant, cf. styles/ub/media.css).
+ * Chargement différé par défaut ; `priority` pour une image visible dès l'arrivée sur la page.
+ */
+export default function FadeImg({ priority, className = "", alt = "", ...props }: ImgHTMLAttributes<HTMLImageElement> & { priority?: boolean }) {
+  const ref = useRef<HTMLImageElement>(null)
+  const [loaded, setLoaded] = useState(false)
+
+  // Image déjà en cache (chargée avant l'hydratation) : pas d'événement load, on l'affiche directement
+  useEffect(() => {
+    if (ref.current?.complete && ref.current.naturalWidth > 0) setLoaded(true)
+  }, [])
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      ref={ref}
+      alt={alt}
+      loading={priority ? "eager" : "lazy"}
+      decoding="async"
+      fetchPriority={priority ? "high" : "auto"}
+      {...props}
+      className={`ub-fade${loaded ? " is-loaded" : ""}${className ? ` ${className}` : ""}`}
+      onLoad={(e) => {
+        setLoaded(true)
+        props.onLoad?.(e)
+      }}
+      onError={() => setLoaded(true)}
+    />
+  )
+}

package/templates/storefront/src/modules/ub/harvest.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link"
+import { preload } from "react-dom"
 import type { Campaign } from "@lib/boutique/campaign"
 import { getBoutique } from "@lib/boutique/config"
 import { t } from "@lib/boutique/i18n"
@@ -7,6 +8,7 @@ import { HttpTypes } from "@medusajs/types"
 import { CampaignCountdown } from "./campaign-blocks"
 import { Icon, type IconName } from "./icons"
 
+import FadeImg from "./fade-img"
 /**
  * Accueil « Harvest » (thèmes Thanksgiving, theme.json → "home": "harvest") : structure différente de l'accueil
  * standard. Hero plein cadre avec titre condensé géant + mot manuscrit et bas en vague (« tache »), services en ligne,
@@ -28,6 +30,8 @@ function Drip() {
 export function HarvestHero({ campaign }: { campaign: Campaign }) {
   const { hero } = campaign
   const image = hero.image && /^https?:\/\//.test(hero.image) ? hero.image : undefined
+  // Image de fond (CSS) : préchargée en priorité pour qu'elle arrive avant le reste de la page
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
   // Mot manuscrit : en fin de titre, il passe sur sa propre ligne sous le titre condensé ; au milieu de la phrase,
   // il reste à sa place (sinon la phrase devient incompréhensible).
   const hl = hero.highlight && hero.title.includes(hero.highlight) ? hero.highlight : undefined
@@ -120,7 +124,7 @@ export function HarvestGrid({ products, title, sub }: { products: P[]; title: st
                 <span className="ub-hv-card__media">
                   {image ? (
                     // eslint-disable-next-line @next/next/no-img-element
-                    <img src={image} alt="" loading="lazy" />
+                    <FadeImg src={image} alt="" />
                   ) : (
                     <span className="ub-ph" />
                   )}
@@ -186,7 +190,7 @@ export function HarvestStrip({ products }: { products: P[] }) {
           <li key={p.id}>
             <Link href={`/products/${p.handle}`} aria-label={p.title ?? ""}>
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={imageOf(p)} alt="" loading="lazy" />
+              <FadeImg src={imageOf(p)} alt="" />
             </Link>
           </li>
         ))}

package/templates/storefront/src/modules/ub/product-card.tsx

@@ -4,6 +4,7 @@ import { getProductPrice } from "@lib/util/get-product-price"
 import { HttpTypes } from "@medusajs/types"
 import { Icon } from "./icons"
 
+import FadeImg from "./fade-img"
 /** Carte produit des maquettes. Prix calculés par Medusa pour la région de la boutique. */
 export default function ProductCard({ product }: { product: HttpTypes.StoreProduct }) {
   const { cheapestPrice: price } = getProductPrice({ product })
@@ -24,7 +25,7 @@ export default function ProductCard({ product }: { product: HttpTypes.StoreProdu
       >
         {image && (
           // eslint-disable-next-line @next/next/no-img-element
-          <img src={image} alt="" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+          <FadeImg src={image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
         )}
       </Link>
       <div className="ub-card__body">

package/templates/storefront/src/modules/ub/showcase.tsx

@@ -4,6 +4,7 @@ import { getProductPrice } from "@lib/util/get-product-price"
 import { HttpTypes } from "@medusajs/types"
 import { Icon } from "./icons"
 
+import FadeImg from "./fade-img"
 type P = HttpTypes.StoreProduct
 const imageOf = (p: P) => p.thumbnail ?? p.images?.[0]?.url ?? undefined
 const priceOf = (p: P) => {
@@ -32,7 +33,7 @@ export function DealsFold({ products, title }: { products: P[]; title: string })
                 <Link href={`/products/${p.handle}`} className="ub-fold__link" aria-label={t("card.view", { name: p.title ?? "" })}>
                   {image ? (
                     // eslint-disable-next-line @next/next/no-img-element
-                    <img className="ub-fold__img" src={image} alt="" loading="lazy" />
+                    <FadeImg className="ub-fold__img" src={image} alt="" />
                   ) : (
                     <span className="ub-fold__img ub-ph" />
                   )}
@@ -92,7 +93,7 @@ export function DealsSpotlight({ products, eyebrow, title }: { products: P[]; ey
                   <div key={p.id} className="ub-spot__media" data-i={i}>
                     {image ? (
                       // eslint-disable-next-line @next/next/no-img-element
-                      <img src={image} alt={p.title ?? ""} loading="lazy" />
+                      <FadeImg src={image} alt={p.title ?? ""} />
                     ) : (
                       <span className="ub-ph" />
                     )}

package/templates/storefront/src/styles/ub/harvest.css

@@ -196,7 +196,8 @@
   .ub-hv-strip__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
   .ub-hv-strip__row li { flex: 0 0 62%; scroll-snap-align: center; }
   .ub-hv-head { flex-direction: column; align-items: flex-start; }
-  [data-theme="thanksgiving"]:not([data-variant]) body::after { border-width: 6px; }
+  /* Mobile et tablette : pas de cadre (fixé à l'écran, il suivait le défilement et mangeait la place) */
+  [data-theme="thanksgiving"]:not([data-variant]) body::after { display: none; }
 }
 @media (prefers-reduced-motion: reduce) {
   .ub-hv-title__main, .ub-hv-title__script { animation: none; }

package/templates/storefront/src/styles/ub/media.css

@@ -0,0 +1,37 @@
+/* Chargement des images : fond animé (couleurs du thème) dans le cadre, puis apparition en fondu (FadeImg). */
+.ub-fade {
+  opacity: 0;
+  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+.ub-fade.is-loaded { opacity: 1; }
+
+/* Cadres d'images : fond animé tant que la photo n'est pas affichée (masqué ensuite par l'image opaque) */
+.ub-card__media,
+.ub-fold__link,
+.ub-spot__media,
+.ub-hv-card__media,
+.ub-hv-strip__row a,
+.ub-tile__img {
+  background-color: var(--surface);
+  background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--tint-1) 80%, transparent) 45%, transparent 70%);
+  background-size: 220% 100%;
+  animation: ub-shimmer 1.6s ease-in-out infinite;
+}
+/* Une fois l'image chargée, plus d'animation (économie de batterie) */
+.ub-card__media:has(.ub-fade.is-loaded),
+.ub-fold__link:has(.ub-fade.is-loaded),
+.ub-spot__media:has(.ub-fade.is-loaded),
+.ub-hv-card__media:has(.ub-fade.is-loaded),
+.ub-hv-strip__row a:has(.ub-fade.is-loaded),
+.ub-tile__img:has(.ub-fade.is-loaded) {
+  animation: none;
+  background-image: none;
+}
+@keyframes ub-shimmer {
+  from { background-position: 120% 0; }
+  to { background-position: -120% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ub-fade { transition: none; }
+  .ub-card__media, .ub-fold__link, .ub-spot__media, .ub-hv-card__media, .ub-hv-strip__row a, .ub-tile__img { animation: none; }
+}