create-snapify-app 0.0.0-stage → 1.1.1

package/template/community/hamdiayari/akhbar-actualites/snapify.module.json

@@ -0,0 +1,107 @@
+{
+  "id": "hamdiayari.akhbar-actualites",
+  "name": "Akhbar Actualités",
+  "version": "1.0.0",
+  "description": "Transforme les articles du site en une véritable une de journal : widgets « À la une », « Dernières actualités », « Rubrique », « Les plus lus » et « Rubriques », page d’archives /actualites/ avec recherche, pages de rubrique et mesure d’audience des articles.",
+  "author": { "name": "Hamdi Ayari", "email": "hamdi.ayari@novalabs.tn" },
+  "pricing": "free",
+  "category": "Presse",
+  "icon": "newspaper",
+  "screenshot": "screenshot.jpg",
+  "engines": { "snapify": "^1.2.0" },
+  "permissions": ["http:routes", "admin:routes", "database"],
+  "slots": ["header-actions", "floating"],
+  "routes": ["/actualites/*", "/rubrique/*"],
+  "entries": { "public": "src/public/index.tsx", "server": "src/server.ts", "admin": "src/admin/index.tsx" },
+  "adminPages": [{ "id": "audience", "label": "Audience", "icon": "bar-chart-3" }],
+  "widgets": [
+    {
+      "id": "une",
+      "label": "À la une",
+      "description": "Grand article principal et articles secondaires, façon première page.",
+      "fields": [
+        { "key": "rubrique", "type": "text", "label": "Rubrique (étiquette)", "default": "", "help": "Vide : tous les articles.", "maxLength": 60 },
+        {
+          "key": "layout",
+          "type": "select",
+          "label": "Disposition",
+          "default": "mosaic",
+          "options": [
+            { "value": "mosaic", "label": "Mosaïque (1 grand + 4)" },
+            { "value": "split", "label": "Deux colonnes (1 grand + liste)" },
+            { "value": "cover", "label": "Couverture plein écran" }
+          ]
+        },
+        { "key": "showExcerpt", "type": "boolean", "label": "Afficher le chapeau", "default": true }
+      ]
+    },
+    {
+      "id": "latest",
+      "label": "Dernières actualités",
+      "description": "Liste des articles les plus récents.",
+      "fields": [
+        { "key": "title", "type": "text", "label": "Titre", "default": "Dernières actualités", "maxLength": 80 },
+        { "key": "rubrique", "type": "text", "label": "Rubrique (étiquette)", "default": "", "help": "Vide : tous les articles.", "maxLength": 60 },
+        { "key": "limit", "type": "number", "label": "Nombre d’articles", "default": 6, "min": 1, "max": 24 },
+        { "key": "skip", "type": "number", "label": "Ignorer les premiers articles", "default": 0, "min": 0, "max": 20, "help": "Ex. 5 sous un bloc « À la une » en mosaïque, pour éviter les doublons." },
+        {
+          "key": "layout",
+          "type": "select",
+          "label": "Disposition",
+          "default": "grid",
+          "options": [
+            { "value": "grid", "label": "Grille de cartes" },
+            { "value": "list", "label": "Liste avec vignettes" },
+            { "value": "compact", "label": "Titres seuls" }
+          ]
+        },
+        { "key": "buttonLabel", "type": "text", "label": "Bouton « tout voir »", "default": "Toutes les actualités", "maxLength": 40 }
+      ]
+    },
+    {
+      "id": "rubrique",
+      "label": "Rubrique",
+      "description": "Section consacrée à une rubrique : un article mis en avant et les suivants.",
+      "fields": [
+        { "key": "rubrique", "type": "text", "label": "Rubrique (étiquette)", "default": "Politique", "maxLength": 60 },
+        { "key": "title", "type": "text", "label": "Titre de la section", "default": "", "help": "Vide : nom de la rubrique.", "maxLength": 80 },
+        { "key": "limit", "type": "number", "label": "Nombre d’articles", "default": 4, "min": 2, "max": 12 }
+      ]
+    },
+    {
+      "id": "most-read",
+      "label": "Les plus lus",
+      "description": "Classement des articles les plus consultés.",
+      "fields": [
+        { "key": "title", "type": "text", "label": "Titre", "default": "Les plus lus", "maxLength": 80 },
+        { "key": "limit", "type": "number", "label": "Nombre d’articles", "default": 5, "min": 3, "max": 10 },
+        {
+          "key": "days",
+          "type": "select",
+          "label": "Période",
+          "default": "7",
+          "options": [
+            { "value": "1", "label": "24 heures" },
+            { "value": "7", "label": "7 jours" },
+            { "value": "30", "label": "30 jours" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "tags",
+      "label": "Rubriques",
+      "description": "Toutes les rubriques du site, avec le nombre d’articles.",
+      "fields": [{ "key": "title", "type": "text", "label": "Titre", "default": "Rubriques", "maxLength": 80 }]
+    }
+  ],
+  "settings": [
+    { "key": "archiveTitle", "type": "text", "group": "Archives", "label": "Titre de la page /actualites/", "default": "Toutes les actualités", "public": true, "maxLength": 80 },
+    { "key": "archiveIntro", "type": "textarea", "group": "Archives", "label": "Introduction", "default": "L’essentiel de l’actualité, mis à jour en continu.", "public": true, "maxLength": 300, "rows": 2 },
+    { "key": "perPage", "type": "number", "group": "Archives", "label": "Articles par page", "default": 12, "min": 6, "max": 48, "public": true },
+    { "key": "showAuthor", "type": "boolean", "group": "Cartes", "label": "Afficher l’auteur", "default": true, "public": true },
+    { "key": "relativeDates", "type": "boolean", "group": "Cartes", "label": "Dates relatives (« il y a 2 h »)", "default": true, "public": true },
+    { "key": "headerSearch", "type": "boolean", "group": "En-tête", "label": "Recherche dans l’en-tête", "help": "Loupe dans l’en-tête des thèmes compatibles (Akhbar, Mahdia…).", "default": true, "public": true },
+    { "key": "trackViews", "type": "boolean", "group": "Audience", "label": "Mesurer l’audience des articles", "help": "Compte les lectures (une par visiteur et par article toutes les 30 minutes) pour « Les plus lus ». Aucune donnée personnelle n’est conservée.", "default": true, "public": true }
+  ]
+}

package/template/community/hamdiayari/akhbar-actualites/src/admin/AudiencePage.tsx

@@ -0,0 +1,185 @@
+/**
+ * Akhbar Actualités — audience des articles
+ * © 2026 Hamdi Ayari
+ */
+import { useState } from 'react';
+import { BarChart3, Eye, ExternalLink, FileText, RotateCcw, TrendingUp } from 'lucide-react';
+import {
+  Button,
+  Card,
+  EmptyState,
+  ErrorState,
+  PageHeader,
+  PageSkeleton,
+  Segmented,
+  StatCard,
+  Table,
+  Td,
+  Th,
+  errorMessage,
+  fmtNumber,
+  toast,
+  useAsync,
+  useConfirm,
+  type AdminPageProps,
+} from '@snapify/sdk/admin';
+import type { Ranked, Settings } from '../types';
+
+interface Stats {
+  days: number;
+  total: number;
+  articles: number;
+  timeline: { day: string; views: number }[];
+  top: Ranked[];
+}
+
+type Period = '7' | '30' | '90';
+
+const shortDay = (day: string) => new Date(`${day}T12:00:00Z`).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
+
+async function postTitles(): Promise<Record<string, string>> {
+  const res = await fetch('/api/public/posts', { credentials: 'same-origin' });
+  const list = res.ok ? ((await res.json()) as { slug: string; title: string }[]) : [];
+  return Object.fromEntries(list.map((p) => [p.slug, p.title]));
+}
+
+function Timeline({ data }: { data: Stats['timeline'] }) {
+  const max = Math.max(1, ...data.map((d) => d.views));
+  return (
+    <div>
+      <div className="flex h-40 items-end gap-[3px]" role="img" aria-label="Lectures par jour">
+        {data.map((d) => (
+          <div key={d.day} className="group relative flex h-full flex-1 items-end">
+            <div className="w-full rounded-t bg-rose-500/80 transition-colors group-hover:bg-rose-600" style={{ height: `${Math.max(d.views ? 3 : 0, (d.views / max) * 100)}%` }} />
+            <div className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden -translate-x-1/2 whitespace-nowrap rounded bg-slate-900 px-2 py-1 text-[11px] text-white group-hover:block">
+              {shortDay(d.day)} · {d.views}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="mt-2 flex justify-between text-[11px] text-slate-400">
+        <span>{shortDay(data[0]?.day ?? '')}</span>
+        <span>{shortDay(data[data.length - 1]?.day ?? '')}</span>
+      </div>
+    </div>
+  );
+}
+
+export function AudiencePage({ api, settings }: AdminPageProps<Settings>) {
+  const confirm = useConfirm();
+  const [period, setPeriod] = useState<Period>('30');
+  const stats = useAsync(() => api.get<Stats>(`/stats?days=${period}`), [period]);
+  const titles = useAsync(postTitles, []);
+  const [resetting, setResetting] = useState(false);
+
+  const reset = async () => {
+    const ok = await confirm({
+      title: 'Remettre l’audience à zéro ?',
+      message: 'Toutes les lectures enregistrées seront supprimées et le classement « Les plus lus » repartira de zéro.',
+      confirmLabel: 'Remettre à zéro',
+      danger: true,
+    });
+    if (!ok) return;
+    setResetting(true);
+    try {
+      const r = await api.post<{ removed: number }>('/reset');
+      toast.success(`Audience remise à zéro (${r.removed} enregistrement${r.removed > 1 ? 's' : ''})`);
+      void stats.reload();
+    } catch (err) {
+      toast.error(errorMessage(err));
+    } finally {
+      setResetting(false);
+    }
+  };
+
+  const data = stats.data;
+  const best = data?.top[0];
+  const name = (slug: string) => titles.data?.[slug] ?? slug;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Audience"
+        description="Lectures des articles : une lecture par visiteur et par article toutes les 30 minutes, robots exclus. Aucune donnée personnelle n’est conservée."
+        actions={
+          <div className="flex items-center gap-2">
+            <Segmented<Period>
+              value={period}
+              onChange={setPeriod}
+              size="sm"
+              options={[
+                { value: '7', label: '7 jours' },
+                { value: '30', label: '30 jours' },
+                { value: '90', label: '90 jours' },
+              ]}
+            />
+            <Button variant="secondary" icon={RotateCcw} loading={resetting} onClick={() => void reset()}>
+              Remettre à zéro
+            </Button>
+          </div>
+        }
+      />
+
+      {settings.trackViews === false ? (
+        <Card className="border-amber-200 bg-amber-50 text-sm text-amber-900">La mesure d’audience est désactivée dans les réglages du module : aucune nouvelle lecture n’est comptée.</Card>
+      ) : null}
+
+      {stats.error ? <ErrorState message={errorMessage(stats.error)} onRetry={() => void stats.reload()} /> : null}
+      {!data && stats.loading ? <PageSkeleton /> : null}
+
+      {data ? (
+        <>
+          <div className="grid gap-4 sm:grid-cols-3">
+            <StatCard label={`Lectures sur ${data.days} jours`} value={fmtNumber(data.total)} icon={Eye} />
+            <StatCard label="Articles lus" value={fmtNumber(data.articles)} icon={FileText} tone="sky" />
+            <StatCard label="Article le plus lu" value={best ? fmtNumber(best.views) : '—'} hint={best ? name(best.slug) : 'Aucune lecture'} icon={TrendingUp} tone="violet" />
+          </div>
+
+          <Card>
+            <h2 className="mb-4 text-sm font-semibold text-slate-900">Lectures par jour</h2>
+            <Timeline data={data.timeline} />
+          </Card>
+
+          {data.top.length === 0 ? (
+            <EmptyState icon={BarChart3} title="Aucune lecture sur la période" description="Les lectures apparaissent dès qu’un visiteur ouvre un article du blog." />
+          ) : (
+            <Table>
+              <thead>
+                <tr>
+                  <Th className="w-12">#</Th>
+                  <Th>Article</Th>
+                  <Th className="w-40 text-right">Lectures</Th>
+                  <Th className="w-12" />
+                </tr>
+              </thead>
+              <tbody>
+                {data.top.map((r, i) => (
+                  <tr key={r.slug}>
+                    <Td className="font-semibold text-slate-400">{i + 1}</Td>
+                    <Td>
+                      <div className="font-medium text-slate-900">{name(r.slug)}</div>
+                      <div className="text-xs text-slate-500">/blog/{r.slug}/</div>
+                    </Td>
+                    <Td className="text-right">
+                      <div className="flex items-center justify-end gap-3">
+                        <div className="hidden h-1.5 w-20 overflow-hidden rounded-full bg-slate-100 sm:block">
+                          <div className="h-full bg-rose-500" style={{ width: `${(r.views / (best?.views || 1)) * 100}%` }} />
+                        </div>
+                        <span className="font-semibold tabular-nums">{fmtNumber(r.views)}</span>
+                      </div>
+                    </Td>
+                    <Td>
+                      <a href={`/blog/${r.slug}/`} target="_blank" rel="noreferrer" className="text-slate-400 hover:text-slate-700" aria-label="Ouvrir l’article">
+                        <ExternalLink className="h-4 w-4" />
+                      </a>
+                    </Td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+          )}
+        </>
+      ) : null}
+    </div>
+  );
+}

package/template/community/hamdiayari/akhbar-actualites/src/admin/index.tsx

@@ -0,0 +1,11 @@
+/**
+ * Akhbar Actualités
+ * © 2026 Hamdi Ayari
+ */
+import { defineAdminModule } from '@snapify/sdk/admin';
+import { AudiencePage } from './AudiencePage';
+import type { Settings } from '../types';
+
+export default defineAdminModule<Settings>({
+  pages: { audience: AudiencePage },
+});

package/template/community/hamdiayari/akhbar-actualites/src/public/Archive.tsx

@@ -0,0 +1,142 @@
+/**
+ * Akhbar Actualités — /actualites/ (recherche, pagination) et /rubrique/<slug>/
+ * © 2026 Hamdi Ayari
+ */
+import { useEffect, useMemo, useState, type FormEvent } from 'react';
+import { ChevronLeft, ChevronRight, Search } from 'lucide-react';
+import type { PublicPageProps } from '@snapify/sdk';
+import type { Settings } from '../types';
+import { Empty, Go, PostCard, Skeleton, type CardContext } from './cards';
+import { allRubriques, byRubrique, rubriqueHref, searchPosts, slugify, usePosts } from './posts';
+
+export function ArchivePage({ path, search, settings, navigate, setMeta }: PublicPageProps<Settings>) {
+  const posts = usePosts();
+  const params = useMemo(() => new URLSearchParams(search), [search]);
+  const query = params.get('q') || '';
+  const page = Math.max(1, Number(params.get('page')) || 1);
+  const rubriqueSlug = /^\/rubrique\/([^/]+)\/?/.exec(path)?.[1] || '';
+  const [draft, setDraft] = useState(query);
+  useEffect(() => setDraft(query), [query]);
+
+  const ctx: CardContext = { navigate, showAuthor: settings.showAuthor !== false, relativeDates: settings.relativeDates !== false };
+  const perPage = Math.min(48, Math.max(6, Number(settings.perPage) || 12));
+  const tags = useMemo(() => (posts ? allRubriques(posts) : []), [posts]);
+  const rubrique = rubriqueSlug ? tags.find((t) => slugify(t.tag) === rubriqueSlug)?.tag || '' : '';
+  const base = rubriqueSlug ? `/rubrique/${rubriqueSlug}/` : '/actualites/';
+
+  const results = useMemo(() => {
+    if (!posts) return [];
+    const scoped = rubriqueSlug ? byRubrique(posts, rubriqueSlug) : posts;
+    return searchPosts(scoped, query);
+  }, [posts, rubriqueSlug, query]);
+
+  const pages = Math.max(1, Math.ceil(results.length / perPage));
+  const current = Math.min(page, pages);
+  const slice = results.slice((current - 1) * perPage, current * perPage);
+  const title = rubriqueSlug ? rubrique || 'Rubrique' : settings.archiveTitle || 'Toutes les actualités';
+
+  useEffect(() => {
+    setMeta({
+      title: query ? `Recherche « ${query} » — ${title}` : current > 1 ? `${title} — page ${current}` : title,
+      description: rubriqueSlug ? `Tous les articles de la rubrique ${rubrique || rubriqueSlug}.` : settings.archiveIntro,
+    });
+  }, [setMeta, title, query, current, rubriqueSlug, rubrique, settings.archiveIntro]);
+
+  const href = (p: number, q = query) => {
+    const sp = new URLSearchParams();
+    if (q) sp.set('q', q);
+    if (p > 1) sp.set('page', String(p));
+    const s = sp.toString();
+    return s ? `${base}?${s}` : base;
+  };
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    navigate(href(1, draft.trim()));
+  };
+
+  return (
+    <div className="akn-archive">
+      <header className="akn-archive-head">
+        <p className="akn-archive-kicker">{rubriqueSlug ? 'Rubrique' : 'Archives'}</p>
+        <h1 className="akn-archive-title">{title}</h1>
+        {!rubriqueSlug && settings.archiveIntro ? <p className="akn-archive-intro">{settings.archiveIntro}</p> : null}
+        <form className="akn-search" role="search" onSubmit={submit}>
+          <Search className="akn-search-icon" aria-hidden />
+          <input
+            type="search"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            placeholder={rubriqueSlug ? `Rechercher dans ${title}…` : 'Rechercher un article, un sujet, un auteur…'}
+            aria-label="Rechercher"
+            maxLength={120}
+          />
+          <button type="submit">Rechercher</button>
+        </form>
+        {tags.length ? (
+          <nav className="akn-chips" aria-label="Rubriques">
+            <Go to="/actualites/" ctx={ctx} className={`akn-chip ${rubriqueSlug ? '' : 'is-active'}`}>
+              Tout
+            </Go>
+            {tags.map((t) => (
+              <Go key={t.tag} to={rubriqueHref(t.tag)} ctx={ctx} className={`akn-chip ${slugify(t.tag) === rubriqueSlug ? 'is-active' : ''}`}>
+                {t.tag}
+              </Go>
+            ))}
+          </nav>
+        ) : null}
+      </header>
+
+      {!posts ? (
+        <Skeleton rows={6} />
+      ) : !slice.length ? (
+        <Empty>{query ? `Aucun article ne correspond à « ${query} ».` : 'Aucun article publié pour le moment.'}</Empty>
+      ) : (
+        <>
+          {query ? (
+            <p className="akn-results">
+              {results.length} résultat{results.length > 1 ? 's' : ''} pour « {query} »
+            </p>
+          ) : null}
+          {current === 1 && !query ? (
+            <div className="akn-archive-lead">
+              <PostCard post={slice[0]} ctx={ctx} variant="lead" />
+              <div className="akn-list">
+                {slice.slice(1, 4).map((p) => (
+                  <PostCard key={p.id} post={p} ctx={ctx} variant="row" excerpt={false} />
+                ))}
+              </div>
+            </div>
+          ) : null}
+          <div className="akn-grid">
+            {(current === 1 && !query ? slice.slice(4) : slice).map((p) => (
+              <PostCard key={p.id} post={p} ctx={ctx} variant="card" />
+            ))}
+          </div>
+        </>
+      )}
+
+      {pages > 1 ? (
+        <nav className="akn-pager" aria-label="Pagination">
+          {current > 1 ? (
+            <Go to={href(current - 1)} ctx={ctx} className="akn-pager-btn">
+              <ChevronLeft className="h-4 w-4" aria-hidden /> Plus récents
+            </Go>
+          ) : (
+            <span />
+          )}
+          <span className="akn-pager-info">
+            Page {current} / {pages}
+          </span>
+          {current < pages ? (
+            <Go to={href(current + 1)} ctx={ctx} className="akn-pager-btn">
+              Plus anciens <ChevronRight className="h-4 w-4" aria-hidden />
+            </Go>
+          ) : (
+            <span />
+          )}
+        </nav>
+      ) : null}
+    </div>
+  );
+}

package/template/community/hamdiayari/akhbar-actualites/src/public/cards.tsx

@@ -0,0 +1,152 @@
+/**
+ * Akhbar Actualités — cartes d’articles
+ * © 2026 Hamdi Ayari
+ */
+import type { MouseEvent, ReactNode } from 'react';
+import { formatDate, postHref, rubriqueHref, rubriqueOf, type PostMeta } from './posts';
+
+export interface CardContext {
+  navigate: (path: string) => void;
+  showAuthor: boolean;
+  relativeDates: boolean;
+}
+
+export type CardVariant = 'lead' | 'cover' | 'card' | 'row' | 'headline';
+
+/** Lien interne : navigation sans rechargement, clic molette et Ctrl+clic conservés. */
+export function Go({ to, ctx, className, children, label }: { to: string; ctx: CardContext; className?: string; children: ReactNode; label?: string }) {
+  const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    e.preventDefault();
+    ctx.navigate(to);
+  };
+  return (
+    <a href={to} onClick={onClick} className={className} aria-label={label}>
+      {children}
+    </a>
+  );
+}
+
+function Cover({ post, ratio }: { post: PostMeta; ratio: string }) {
+  return (
+    <div className={`akn-media akn-ratio-${ratio}`}>
+      {post.coverImage ? (
+        <img src={post.coverImage} alt="" loading="lazy" decoding="async" />
+      ) : (
+        <span className="akn-media-empty" aria-hidden>
+          {(rubriqueOf(post) || post.title).slice(0, 1).toUpperCase()}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function Meta({ post, ctx }: { post: PostMeta; ctx: CardContext }) {
+  const date = formatDate(post.publishedAt, ctx.relativeDates);
+  const author = ctx.showAuthor ? post.author?.trim() : '';
+  if (!date && !author) return null;
+  return (
+    <p className="akn-meta">
+      {author ? <span className="akn-author">{author}</span> : null}
+      {author && date ? <span aria-hidden> · </span> : null}
+      {date ? <time dateTime={post.publishedAt}>{date}</time> : null}
+    </p>
+  );
+}
+
+export function Kicker({ post, ctx }: { post: PostMeta; ctx: CardContext }) {
+  const tag = rubriqueOf(post);
+  if (!tag) return null;
+  return (
+    <Go to={rubriqueHref(tag)} ctx={ctx} className="akn-kicker">
+      {tag}
+    </Go>
+  );
+}
+
+export function PostCard({ post, ctx, variant, excerpt = true, rank }: { post: PostMeta; ctx: CardContext; variant: CardVariant; excerpt?: boolean; rank?: number }) {
+  const href = postHref(post);
+  const title = (
+    <Go to={href} ctx={ctx} className="akn-title-link">
+      {post.title}
+    </Go>
+  );
+
+  if (variant === 'cover') {
+    return (
+      <article className="akn-cover">
+        <Cover post={post} ratio="wide" />
+        <div className="akn-cover-body">
+          <Kicker post={post} ctx={ctx} />
+          <h2 className="akn-title akn-title-xl">{title}</h2>
+          {excerpt && post.excerpt ? <p className="akn-excerpt">{post.excerpt}</p> : null}
+          <Meta post={post} ctx={ctx} />
+        </div>
+      </article>
+    );
+  }
+
+  if (variant === 'headline') {
+    return (
+      <article className="akn-headline">
+        {rank ? <span className="akn-rank">{rank}</span> : null}
+        <div className="min-w-0">
+          <Kicker post={post} ctx={ctx} />
+          <h3 className="akn-title akn-title-sm">{title}</h3>
+        </div>
+      </article>
+    );
+  }
+
+  if (variant === 'row') {
+    return (
+      <article className="akn-row">
+        <Go to={href} ctx={ctx} className="akn-row-media" label={post.title}>
+          <Cover post={post} ratio="square" />
+        </Go>
+        <div className="min-w-0">
+          <Kicker post={post} ctx={ctx} />
+          <h3 className="akn-title akn-title-md">{title}</h3>
+          {excerpt && post.excerpt ? <p className="akn-excerpt akn-clamp-2">{post.excerpt}</p> : null}
+          <Meta post={post} ctx={ctx} />
+        </div>
+      </article>
+    );
+  }
+
+  const lead = variant === 'lead';
+  return (
+    <article className={lead ? 'akn-lead' : 'akn-card'}>
+      <Go to={href} ctx={ctx} label={post.title}>
+        <Cover post={post} ratio={lead ? 'wide' : 'photo'} />
+      </Go>
+      <Kicker post={post} ctx={ctx} />
+      <h3 className={`akn-title ${lead ? 'akn-title-lg' : 'akn-title-md'}`}>{title}</h3>
+      {excerpt && post.excerpt ? <p className={`akn-excerpt ${lead ? '' : 'akn-clamp-3'}`}>{post.excerpt}</p> : null}
+      <Meta post={post} ctx={ctx} />
+    </article>
+  );
+}
+
+export function SectionTitle({ children, action }: { children: ReactNode; action?: ReactNode }) {
+  return (
+    <div className="akn-section-head">
+      <h2 className="akn-section-title">{children}</h2>
+      {action}
+    </div>
+  );
+}
+
+export function Skeleton({ rows = 3 }: { rows?: number }) {
+  return (
+    <div className="akn-skeleton" aria-hidden>
+      {Array.from({ length: rows }, (_, i) => (
+        <div key={i} className="akn-skel-line" style={{ width: `${92 - i * 14}%` }} />
+      ))}
+    </div>
+  );
+}
+
+export function Empty({ children }: { children: ReactNode }) {
+  return <p className="akn-empty">{children}</p>;
+}

package/template/community/hamdiayari/akhbar-actualites/src/public/index.tsx

@@ -0,0 +1,71 @@
+/**
+ * Akhbar Actualités
+ * © 2026 Hamdi Ayari
+ */
+import './styles.css';
+import { useEffect, useRef, useState, type FormEvent } from 'react';
+import { Search, X } from 'lucide-react';
+import { definePublicModule, type PublicModuleProps } from '@snapify/sdk';
+import type { Settings } from '../types';
+import { ArchivePage } from './Archive';
+import { LatestWidget, MostReadWidget, RubriqueWidget, TagsWidget, UneWidget } from './widgets';
+
+/** Loupe de l’en-tête : ouvre un champ de recherche menant à /actualites/?q=… */
+function HeaderSearch({ settings, navigate }: PublicModuleProps<Settings>) {
+  const [open, setOpen] = useState(false);
+  const [q, setQ] = useState('');
+  const input = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    input.current?.focus();
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setOpen(false);
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open]);
+  if (settings.headerSearch === false) return null;
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    const text = q.trim();
+    setOpen(false);
+    navigate(text ? `/actualites/?q=${encodeURIComponent(text)}` : '/actualites/');
+  };
+
+  return (
+    <div className="akn-hsearch">
+      <button type="button" className="akn-hsearch-btn" aria-label="Rechercher un article" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
+        {open ? <X className="h-5 w-5" aria-hidden /> : <Search className="h-5 w-5" aria-hidden />}
+      </button>
+      {open ? (
+        <form className="akn-hsearch-pop" role="search" onSubmit={submit}>
+          <input ref={input} type="search" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Rechercher…" aria-label="Rechercher un article" maxLength={120} />
+          <button type="submit" aria-label="Lancer la recherche">
+            <Search className="h-4 w-4" aria-hidden />
+          </button>
+        </form>
+      ) : null}
+    </div>
+  );
+}
+
+/** Compte une lecture par article consulté (aucun rendu). */
+function ViewTracker({ path, settings, isPreview, api }: PublicModuleProps<Settings>) {
+  const last = useRef('');
+  useEffect(() => {
+    if (isPreview || settings.trackViews === false) return;
+    const slug = /^\/blog\/([a-z0-9][a-z0-9-]*)\/?$/.exec(path)?.[1];
+    if (!slug || last.current === slug) return;
+    const t = window.setTimeout(() => {
+      last.current = slug;
+      void api.post('/views', { slug }).catch(() => undefined);
+    }, 1500);
+    return () => window.clearTimeout(t);
+  }, [path, isPreview, settings.trackViews, api]);
+  return null;
+}
+
+export default definePublicModule<Settings>({
+  slots: { 'header-actions': HeaderSearch, floating: ViewTracker },
+  page: ArchivePage,
+  widgets: { une: UneWidget, latest: LatestWidget, rubrique: RubriqueWidget, 'most-read': MostReadWidget, tags: TagsWidget },
+});