create-snapify-app 0.0.0-stage → 1.1.0

package/template/community/hamdiayari/akhbar/src/Ticker.tsx

@@ -0,0 +1,86 @@
+/**
+ * Akhbar — thème presse pour Snapify
+ * © 2026 Hamdi Ayari
+ */
+import React, { useEffect, useState } from 'react';
+import { Zap } from 'lucide-react';
+import { isModuleActive } from '@snapify/sdk/theme';
+import { followLink, URGENT_ID } from './site';
+
+interface Flash {
+  id: string;
+  text: string;
+  link: string;
+  level: 'urgent' | 'live' | 'info';
+  publishedAt: string;
+}
+interface Feed {
+  label: string;
+  speed: 'slow' | 'normal' | 'fast';
+  flashes: Flash[];
+}
+
+const REFRESH_MS = 60_000;
+const time = (iso: string) => new Date(iso).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+
+/** Flashs du module Akhbar Urgent ; `null` si le module est inactif ou sans flash en ligne. */
+function useUrgent(enabled: boolean): Feed | null {
+  const [feed, setFeed] = useState<Feed | null>(null);
+  useEffect(() => {
+    if (!enabled) return setFeed(null);
+    let alive = true;
+    const load = () =>
+      fetch(`/api/modules/${URGENT_ID}/flashes`, { credentials: 'same-origin' })
+        .then((r) => (r.ok ? (r.json() as Promise<Feed>) : null))
+        .then((f) => alive && setFeed(f))
+        .catch(() => undefined);
+    void load();
+    const timer = window.setInterval(load, REFRESH_MS);
+    return () => {
+      alive = false;
+      window.clearInterval(timer);
+    };
+  }, [enabled]);
+  return feed;
+}
+
+export function UrgentTicker({ enabled, navigate }: { enabled: boolean; navigate: (p: string) => void }) {
+  const feed = useUrgent(enabled && isModuleActive(URGENT_ID));
+  const items = feed?.flashes ?? [];
+  if (!feed || !items.length) return null;
+  const duration = Math.max(20, items.reduce((n, f) => n + f.text.length, 0) / { slow: 5, normal: 8, fast: 12 }[feed.speed ?? 'normal']);
+  const list = (hidden?: boolean) =>
+    items.map((f) => (
+      <span key={`${hidden ? 'b' : 'a'}-${f.id}`} className="ak-ticker-item" aria-hidden={hidden || undefined}>
+        <time dateTime={f.publishedAt}>{time(f.publishedAt)}</time>
+        {f.link ? (
+          <a
+            href={f.link}
+            tabIndex={hidden ? -1 : undefined}
+            onClick={(e) => {
+              e.preventDefault();
+              followLink(f.link, navigate);
+            }}
+          >
+            {f.text}
+          </a>
+        ) : (
+          <span>{f.text}</span>
+        )}
+      </span>
+    ));
+  return (
+    <div className="ak-ticker" role="region" aria-label="Flashs info">
+      <span className="ak-ticker-label">
+        <Zap className="ak-live h-3.5 w-3.5 rounded-full" aria-hidden="true" />
+        {feed.label || 'Urgent'}
+      </span>
+      <div className="ak-ticker-viewport">
+        <div className="ak-ticker-track" style={{ ['--ak-ticker-duration' as string]: `${duration}s` }}>
+          {list()}
+          {list(true)}
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/community/hamdiayari/akhbar/src/Views.tsx

@@ -0,0 +1,285 @@
+/**
+ * Akhbar — thème presse pour Snapify
+ * © 2026 Hamdi Ayari
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+import { ArrowLeft, ArrowRight, Check, Clock, Facebook, Link2, Linkedin, MessageCircle, Search, Twitter } from 'lucide-react';
+import type { BlogPost } from '@snapify/sdk/content';
+import { useSnapify } from '@snapify/sdk/theme';
+import { followLink, IS_PREVIEW, newsActive, rubriqueHref, useOptions } from './site';
+import { cx, Frame } from './kit';
+
+type PostMeta = Omit<BlogPost, 'blocks'>;
+
+const LONG_DATE = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' });
+const HOUR = new Intl.DateTimeFormat('fr-FR', { hour: '2-digit', minute: '2-digit' });
+const SHORT_DATE = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
+
+/** Mots lisibles de tous les textes des blocs (balises HTML retirées), 230 mots par minute. */
+function readingMinutes(blocks: unknown): number {
+  let words = 0;
+  const walk = (v: unknown) => {
+    if (typeof v === 'string') {
+      if (/^(https?:|\/|#|data:)/.test(v)) return;
+      words += v.replace(/<[^>]+>/g, ' ').split(/\s+/).filter((w) => /[\p{L}\p{N}]/u.test(w)).length;
+    } else if (Array.isArray(v)) v.forEach(walk);
+    else if (v && typeof v === 'object') Object.entries(v).forEach(([k, x]) => k !== 'id' && k !== 'style' && walk(x));
+  };
+  walk(blocks);
+  return Math.max(1, Math.round(words / 230));
+}
+
+function useReadProgress(enabled: boolean) {
+  const [p, setP] = useState(0);
+  useEffect(() => {
+    if (!enabled) return;
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const max = document.documentElement.scrollHeight - window.innerHeight;
+      setP(max > 0 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0);
+    };
+    const onScroll = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [enabled]);
+  return p;
+}
+
+function useRelated(post: BlogPost, enabled: boolean): PostMeta[] {
+  const [list, setList] = useState<PostMeta[]>([]);
+  useEffect(() => {
+    if (!enabled) return;
+    let alive = true;
+    fetch('/api/public/posts', { credentials: 'same-origin' })
+      .then((r) => (r.ok ? (r.json() as Promise<PostMeta[]>) : []))
+      .then((all) => {
+        if (!alive || !Array.isArray(all)) return;
+        const now = Date.now();
+        const others = all
+          .filter((p) => p.slug !== post.slug && (Date.parse(p.publishedAt || '') || 0) <= now)
+          .sort((a, b) => (Date.parse(b.publishedAt || '') || 0) - (Date.parse(a.publishedAt || '') || 0));
+        const tag = post.tags?.[0];
+        const same = tag ? others.filter((p) => p.tags?.includes(tag)) : [];
+        setList([...same, ...others.filter((p) => !same.includes(p))].slice(0, 3));
+      })
+      .catch(() => undefined);
+    return () => {
+      alive = false;
+    };
+  }, [post.slug, post.tags, enabled]);
+  return list;
+}
+
+function Share({ title, url }: { title: string; url: string }) {
+  const [copied, setCopied] = useState(false);
+  const enc = encodeURIComponent;
+  const links = [
+    { id: 'fb', label: 'Partager sur Facebook', icon: Facebook, href: `https://www.facebook.com/sharer/sharer.php?u=${enc(url)}` },
+    { id: 'x', label: 'Partager sur X', icon: Twitter, href: `https://x.com/intent/post?url=${enc(url)}&text=${enc(title)}` },
+    { id: 'wa', label: 'Partager sur WhatsApp', icon: MessageCircle, href: `https://wa.me/?text=${enc(`${title} ${url}`)}` },
+    { id: 'li', label: 'Partager sur LinkedIn', icon: Linkedin, href: `https://www.linkedin.com/sharing/share-offsite/?url=${enc(url)}` },
+  ];
+  const btn = 'flex h-9 w-9 items-center justify-center border border-(--ak-line) text-(--ak-ink) transition-colors hover:border-(--ak-ink) hover:bg-(--ak-ink) hover:text-(--ak-on-dark)';
+  return (
+    <div className="flex items-center gap-1.5">
+      {links.map((l) => (
+        <a key={l.id} href={IS_PREVIEW ? undefined : l.href} target="_blank" rel="noopener noreferrer" aria-label={l.label} className={btn}>
+          <l.icon className="h-4 w-4" />
+        </a>
+      ))}
+      <button
+        type="button"
+        aria-label="Copier le lien"
+        className={btn}
+        onClick={() => {
+          void navigator.clipboard?.writeText(url).then(() => {
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 2000);
+          });
+        }}
+      >
+        {copied ? <Check className="h-4 w-4" /> : <Link2 className="h-4 w-4" />}
+      </button>
+    </div>
+  );
+}
+
+function RelatedCard({ post, navigate }: { post: PostMeta; navigate: (p: string) => void }) {
+  const href = `/blog/${post.slug}/`;
+  const open = (e: React.MouseEvent) => {
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+    e.preventDefault();
+    followLink(href, navigate);
+  };
+  return (
+    <article>
+      <a href={href} onClick={open} className="group block">
+        <div className="relative mb-4 aspect-[3/2] overflow-hidden bg-(--ak-paper-2)">
+          {post.coverImage ? <img src={post.coverImage} alt="" loading="lazy" className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]" /> : null}
+        </div>
+        {post.tags?.[0] ? <p className="ak-kicker mb-2">{post.tags[0]}</p> : null}
+        <h3 className="ak-display text-xl text-(--ak-ink) group-hover:underline group-hover:decoration-1 group-hover:underline-offset-4">{post.title}</h3>
+      </a>
+      {post.publishedAt ? <p className="mt-2 text-xs text-(--ak-muted)">{SHORT_DATE.format(new Date(post.publishedAt))}</p> : null}
+    </article>
+  );
+}
+
+export function Post({ post, children }: { post: BlogPost; children: React.ReactNode }) {
+  const { navigate } = useSnapify();
+  const o = useOptions();
+  const minutes = useMemo(() => readingMinutes(post.blocks), [post.blocks]);
+  const progress = useReadProgress(o.progressBar && !IS_PREVIEW);
+  const related = useRelated(post, o.relatedPosts);
+  const published = post.publishedAt ? new Date(post.publishedAt) : null;
+  const rubrique = post.tags?.[0] || '';
+  const rubriqueLink = rubrique ? rubriqueHref(rubrique) : '';
+  const url = typeof window !== 'undefined' ? `${window.location.origin}/blog/${post.slug}/` : `/blog/${post.slug}/`;
+
+  return (
+    <article className="ak-article">
+      {o.progressBar && !IS_PREVIEW ? <div className="ak-read-progress" style={{ transform: `scaleX(${progress})` }} aria-hidden /> : null}
+
+      <header className="mx-auto max-w-4xl px-5 pb-8 pt-10 sm:px-8 sm:pt-14">
+        <nav aria-label="Fil d’Ariane" className="mb-6 flex flex-wrap items-center gap-2 text-xs font-semibold text-(--ak-muted)">
+          <button type="button" onClick={() => followLink('/', navigate)} className="hover:text-(--ak-ink)">
+            Accueil
+          </button>
+          {newsActive() ? (
+            <>
+              <span aria-hidden>/</span>
+              <button type="button" onClick={() => followLink('/actualites/', navigate)} className="hover:text-(--ak-ink)">
+                Actualités
+              </button>
+            </>
+          ) : null}
+          {rubrique ? (
+            <>
+              <span aria-hidden>/</span>
+              {rubriqueLink ? (
+                <button type="button" onClick={() => followLink(rubriqueLink, navigate)} className="hover:text-(--ak-ink)">
+                  {rubrique}
+                </button>
+              ) : (
+                <span>{rubrique}</span>
+              )}
+            </>
+          ) : null}
+        </nav>
+
+        {rubrique ? <p className="ak-kicker">{rubrique}</p> : null}
+        <h1 className="ak-display mt-4 text-[2.2rem] text-(--ak-ink) sm:text-5xl lg:text-[3.6rem]">{post.title}</h1>
+        {post.excerpt ? <p className="mt-6 text-xl font-medium leading-relaxed text-(--ak-text) sm:text-[1.4rem]">{post.excerpt}</p> : null}
+
+        <div className="mt-8 flex flex-col gap-4 border-y border-(--ak-line) py-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="text-sm text-(--ak-muted)">
+            {post.author ? (
+              <p>
+                Par <span className="font-bold text-(--ak-ink)">{post.author}</span>
+              </p>
+            ) : null}
+            <p className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-1">
+              {published ? (
+                <time dateTime={post.publishedAt}>
+                  Publié le {LONG_DATE.format(published)} à {HOUR.format(published)}
+                </time>
+              ) : null}
+              {o.readingTime ? (
+                <span className="inline-flex items-center gap-1.5">
+                  <Clock className="h-3.5 w-3.5" /> {minutes} min de lecture
+                </span>
+              ) : null}
+            </p>
+          </div>
+          {o.shareButtons ? <Share title={post.title} url={url} /> : null}
+        </div>
+      </header>
+
+      {post.coverImage ? (
+        <figure className="mx-auto mb-4 max-w-5xl px-5 sm:px-8">
+          <Frame shaped className="aspect-[16/9]">
+            <img src={post.coverImage} alt="" className="h-full w-full object-cover" fetchPriority="high" />
+          </Frame>
+        </figure>
+      ) : null}
+
+      {children}
+
+      <footer className="mx-auto max-w-3xl px-5 pb-6 pt-4 sm:px-8">
+        {post.tags.length ? (
+          <div className="flex flex-wrap items-center gap-2 border-t border-(--ak-line) pt-6">
+            <span className="mr-1 text-xs font-bold uppercase tracking-[0.14em] text-(--ak-muted)">Sujets</span>
+            {post.tags.map((tag) => {
+              const link = rubriqueHref(tag);
+              return link ? (
+                <button key={tag} type="button" onClick={() => followLink(link, navigate)} className="border border-(--ak-line) px-3 py-1 text-xs font-semibold text-(--ak-ink) hover:border-(--ak-ink)">
+                  {tag}
+                </button>
+              ) : (
+                <span key={tag} className="border border-(--ak-line) px-3 py-1 text-xs font-semibold text-(--ak-ink)">
+                  {tag}
+                </span>
+              );
+            })}
+          </div>
+        ) : null}
+        {o.shareButtons ? (
+          <div className="mt-6 flex flex-wrap items-center justify-between gap-4">
+            <p className="text-sm font-semibold text-(--ak-ink)">Cet article vous a intéressé ? Partagez-le.</p>
+            <Share title={post.title} url={url} />
+          </div>
+        ) : null}
+      </footer>
+
+      {o.relatedPosts && related.length ? (
+        <section className="mx-auto mt-10 max-w-7xl px-5 sm:px-8" aria-label="À lire aussi">
+          <div className="mb-8 flex items-end justify-between gap-4 border-t-[3px] border-(--ak-ink) pt-3">
+            <h2 className="ak-display text-2xl text-(--ak-ink) sm:text-3xl">À lire aussi</h2>
+            {newsActive() ? (
+              <button type="button" onClick={() => followLink(rubriqueLink || '/actualites/', navigate)} className="ak-link">
+                {rubriqueLink ? `Toute la rubrique ${rubrique}` : 'Toutes les actualités'} <ArrowRight className="ak-btn-arrow h-4 w-4" />
+              </button>
+            ) : null}
+          </div>
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {related.map((p) => (
+              <RelatedCard key={p.id} post={p} navigate={navigate} />
+            ))}
+          </div>
+        </section>
+      ) : null}
+    </article>
+  );
+}
+
+export function NotFound({ navigate }: { navigate: (path: string) => void }) {
+  const news = newsActive();
+  return (
+    <section className="mx-auto flex min-h-[65vh] max-w-3xl flex-col items-center justify-center px-5 py-20 text-center">
+      <p className="ak-kicker">Erreur 404</p>
+      <h1 className="ak-display mt-5 text-5xl text-(--ak-ink) sm:text-6xl">Cette page n’est plus en kiosque.</h1>
+      <p className="mt-5 max-w-md text-lg text-(--ak-muted)">L’adresse demandée n’existe pas ou l’article a été retiré. {news ? 'Retrouvez toute l’actualité dans nos archives.' : 'Reprenons depuis la une.'}</p>
+      <div className={cx('mt-10 flex flex-wrap justify-center gap-3')}>
+        <button type="button" onClick={() => followLink('/', navigate)} className="ak-btn ak-btn-outline">
+          <ArrowLeft className="h-4 w-4" />
+          Retour à la une
+        </button>
+        {news ? (
+          <button type="button" onClick={() => followLink('/actualites/', navigate)} className="ak-btn ak-btn-primary">
+            <Search className="h-4 w-4" />
+            Toutes les actualités
+          </button>
+        ) : null}
+      </div>
+    </section>
+  );
+}