@zoyth/simple-site-framework 1.0.2 → 1.1.0

package/dist/components/index.mjs

@@ -33597,8 +33597,8 @@ function TextToggle({
       onClick: handleClick,
       className: cn(
         "text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors",
-        "py-2",
-        // Match hamburger button height for mobile alignment
+        "inline-flex items-center h-10",
+        // Match hamburger button height (p-2 + 24px icon = 40px)
         className
       ),
       "aria-label": `Switch to ${displayText}`,
@@ -34210,6 +34210,10 @@ import { useRef as useRef5, useEffect as useEffect10, useState as useState18 } f
 import { compileMDX } from "next-mdx-remote/rsc";
 import rehypeSlug from "rehype-slug";
 
+// src/lib/content/blog.ts
+import { compileMDX as compileMDX2 } from "next-mdx-remote/rsc";
+import rehypeSlug2 from "rehype-slug";
+
 // src/components/sections/HeroSection.tsx
 import Image4 from "next/image";
 import { Fragment as Fragment10, jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -38109,6 +38113,206 @@ function CTASection({
     }
   );
 }
+
+// src/components/BlogLayout.tsx
+import { jsx as jsx69, jsxs as jsxs58 } from "react/jsx-runtime";
+function BlogLayout({
+  title,
+  excerpt,
+  author,
+  authorAvatar,
+  date,
+  readTime,
+  tags,
+  image,
+  imageAlt,
+  locale,
+  children,
+  showToc = true,
+  backHref,
+  backLabel,
+  className
+}) {
+  const formattedDate = formatDate2(date, locale);
+  const isFr = locale === "fr";
+  return /* @__PURE__ */ jsxs58("article", { className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12", className), children: [
+    /* @__PURE__ */ jsxs58(
+      "a",
+      {
+        href: backHref || `/${locale}/blog`,
+        className: "inline-flex items-center text-sm text-gray-600 hover:text-primary mb-6",
+        children: [
+          /* @__PURE__ */ jsx69("span", { "aria-hidden": "true", children: "\u2190" }),
+          /* @__PURE__ */ jsx69("span", { className: "ml-2", children: backLabel || (isFr ? "Retour au blog" : "Back to blog") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs58("header", { className: "mb-8 sm:mb-12", children: [
+      /* @__PURE__ */ jsx69("h1", { className: "text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-4", children: title }),
+      /* @__PURE__ */ jsxs58("div", { className: "flex flex-wrap items-center gap-4 text-sm text-gray-600 mb-4", children: [
+        /* @__PURE__ */ jsxs58("div", { className: "flex items-center gap-2", children: [
+          authorAvatar && /* @__PURE__ */ jsx69(
+            "img",
+            {
+              src: authorAvatar,
+              alt: author,
+              className: "w-8 h-8 rounded-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsx69("span", { children: author })
+        ] }),
+        /* @__PURE__ */ jsx69("span", { "aria-hidden": "true", children: "\xB7" }),
+        /* @__PURE__ */ jsx69("time", { dateTime: date, children: formattedDate }),
+        /* @__PURE__ */ jsx69("span", { "aria-hidden": "true", children: "\xB7" }),
+        /* @__PURE__ */ jsxs58("span", { children: [
+          readTime,
+          " ",
+          isFr ? "min de lecture" : "min read"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx69("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsx69(
+        "span",
+        {
+          className: "inline-block px-3 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded-full",
+          children: tag
+        },
+        tag
+      )) })
+    ] }),
+    image && /* @__PURE__ */ jsx69("div", { className: "mb-8 sm:mb-12 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx69(
+      "img",
+      {
+        src: image,
+        alt: imageAlt || title,
+        className: "w-full h-auto object-cover"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs58("div", { className: "flex flex-col lg:flex-row gap-8 lg:gap-12", children: [
+      showToc && /* @__PURE__ */ jsx69("aside", { className: "hidden lg:block w-64 flex-shrink-0", children: /* @__PURE__ */ jsx69("div", { className: "sticky top-24", children: /* @__PURE__ */ jsx69(TableOfContents, { title: isFr ? "Table des mati\xE8res" : "Table of Contents" }) }) }),
+      /* @__PURE__ */ jsx69("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx69(
+        "div",
+        {
+          className: cn(
+            "prose prose-gray prose-lg max-w-none",
+            "prose-headings:scroll-mt-24",
+            "prose-h2:text-2xl prose-h2:font-bold prose-h2:mt-12 prose-h2:mb-4",
+            "prose-h3:text-xl prose-h3:font-semibold prose-h3:mt-8 prose-h3:mb-3",
+            "prose-h4:text-lg prose-h4:font-semibold prose-h4:mt-6 prose-h4:mb-2",
+            "prose-p:text-gray-700 prose-p:leading-relaxed",
+            "prose-a:text-primary prose-a:no-underline hover:prose-a:underline",
+            "prose-strong:text-gray-900 prose-strong:font-semibold",
+            "prose-ul:my-6 prose-li:my-2",
+            "prose-code:text-primary prose-code:bg-gray-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded",
+            "prose-pre:bg-gray-900 prose-pre:text-gray-100",
+            "prose-blockquote:border-l-primary prose-blockquote:bg-gray-50 prose-blockquote:py-2",
+            "prose-table:text-sm",
+            "sm:prose-lg",
+            "prose-headings:break-words",
+            "prose-p:break-words"
+          ),
+          children
+        }
+      ) })
+    ] })
+  ] });
+}
+function formatDate2(dateString, locale) {
+  try {
+    const isoDateMatch = dateString.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    const date = isoDateMatch ? /* @__PURE__ */ new Date(`${dateString}T12:00:00`) : new Date(dateString);
+    return date.toLocaleDateString(locale, {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+  } catch {
+    return dateString;
+  }
+}
+
+// src/components/BlogIndex.tsx
+import { useState as useState25, useMemo } from "react";
+import { jsx as jsx70, jsxs as jsxs59 } from "react/jsx-runtime";
+function BlogIndex({
+  locale,
+  posts,
+  title,
+  description,
+  showTagFilter = true,
+  cardVariant = "default",
+  featuredFirst = true,
+  className
+}) {
+  const [activeTag, setActiveTag] = useState25(null);
+  const resolvedTitle = title ? typeof title === "string" ? title : getLocalizedString(title, locale) : void 0;
+  const resolvedDescription = description ? typeof description === "string" ? description : getLocalizedString(description, locale) : void 0;
+  const allTags = useMemo(() => {
+    const tagSet = /* @__PURE__ */ new Set();
+    for (const post of posts) {
+      for (const tag of post.metadata.tags) {
+        tagSet.add(tag);
+      }
+    }
+    return Array.from(tagSet).sort();
+  }, [posts]);
+  const filteredPosts = activeTag ? posts.filter((p) => p.metadata.tags.includes(activeTag)) : posts;
+  const featuredPosts = featuredFirst ? filteredPosts.filter((p) => p.metadata.featured) : [];
+  const regularPosts = featuredFirst ? filteredPosts.filter((p) => !p.metadata.featured) : filteredPosts;
+  const isFr = locale === "fr";
+  return /* @__PURE__ */ jsxs59("div", { className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12", className), children: [
+    (resolvedTitle || resolvedDescription) && /* @__PURE__ */ jsxs59("div", { className: "mb-8 sm:mb-12", children: [
+      resolvedTitle && /* @__PURE__ */ jsx70("h1", { className: "text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-3", children: resolvedTitle }),
+      resolvedDescription && /* @__PURE__ */ jsx70("p", { className: "text-lg text-gray-600", children: resolvedDescription })
+    ] }),
+    showTagFilter && allTags.length > 0 && /* @__PURE__ */ jsx70("div", { className: "flex flex-wrap gap-2 mb-8", role: "group", "aria-label": isFr ? "Filtrer par tag" : "Filter by tag", children: allTags.map((tag) => /* @__PURE__ */ jsx70(
+      "button",
+      {
+        onClick: () => setActiveTag(activeTag === tag ? null : tag),
+        className: cn(
+          "px-3 py-1.5 text-sm font-medium rounded-full transition-colors",
+          activeTag === tag ? "bg-primary text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+        ),
+        children: tag
+      },
+      tag
+    )) }),
+    filteredPosts.length === 0 && /* @__PURE__ */ jsx70("div", { className: "text-center py-16", children: /* @__PURE__ */ jsx70("p", { className: "text-gray-500 text-lg", children: isFr ? "Aucun article trouv\xE9." : "No posts found." }) }),
+    featuredPosts.length > 0 && /* @__PURE__ */ jsx70("div", { className: "mb-12", children: /* @__PURE__ */ jsx70("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: featuredPosts.map((post) => /* @__PURE__ */ jsx70(
+      BlogCard,
+      {
+        locale,
+        title: post.metadata.title,
+        excerpt: post.metadata.excerpt,
+        image: post.metadata.image,
+        imageAlt: post.metadata.imageAlt,
+        href: `/${locale}/blog/${post.slug}`,
+        author: post.metadata.author,
+        date: post.metadata.date,
+        readTime: post.metadata.readTime,
+        tags: post.metadata.tags,
+        variant: cardVariant
+      },
+      post.slug
+    )) }) }),
+    regularPosts.length > 0 && /* @__PURE__ */ jsx70("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: regularPosts.map((post) => /* @__PURE__ */ jsx70(
+      BlogCard,
+      {
+        locale,
+        title: post.metadata.title,
+        excerpt: post.metadata.excerpt,
+        image: post.metadata.image,
+        imageAlt: post.metadata.imageAlt,
+        href: `/${locale}/blog/${post.slug}`,
+        author: post.metadata.author,
+        date: post.metadata.date,
+        readTime: post.metadata.readTime,
+        tags: post.metadata.tags,
+        variant: cardVariant
+      },
+      post.slug
+    )) })
+  ] });
+}
 export {
   AboutSection,
   AddressLink,
@@ -38116,6 +38320,8 @@ export {
   AnimatedItem,
   AnimatedSection,
   BlogCard,
+  BlogIndex,
+  BlogLayout,
   BodyEndScripts,
   Breadcrumb,
   Button,