@carlonicora/nextjs-jsonapi 5.3.0 → 5.4.0

package/src/features/blog/components/public/BlogListColumn.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { BlogCategoryChips } from "./BlogCategoryChips";
+import { BlogListEmpty, BlogListHeader, type BlogListProps, BlogLoadMore } from "./BlogListParts";
+import { BlogPostCard } from "./BlogPostCard";
+import { BlogSearchBox } from "./BlogSearchBox";
+
+/** Layout B: one narrow reading column, every post a row (image at the start, text at the end). */
+export function BlogListColumn(props: BlogListProps) {
+  const { list, categories, activeCategorySlug, query, page, basePath } = props;
+
+  return (
+    <section className="px-4 pt-16 pb-20 md:pt-20">
+      <div className="mx-auto max-w-2xl">
+        <BlogListHeader align="center" />
+        <BlogCategoryChips
+          categories={categories}
+          basePath={basePath}
+          activeCategorySlug={activeCategorySlug}
+          query={query}
+          className="mt-8 [&>ul]:justify-center"
+        />
+        <BlogSearchBox basePath={basePath} query={query} activeCategorySlug={activeCategorySlug} className="mt-4" />
+        {list.posts.length === 0 ? (
+          <BlogListEmpty query={query} />
+        ) : (
+          <div className="divide-border mt-10 flex flex-col divide-y">
+            {list.posts.map((post, index) => (
+              <div key={post.id} className="py-6 first:pt-0">
+                <BlogPostCard
+                  post={post}
+                  categories={categories}
+                  basePath={basePath}
+                  variant="row"
+                  priority={index === 0}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+        {list.hasMore ? (
+          <BlogLoadMore
+            basePath={basePath}
+            page={page}
+            activeCategorySlug={activeCategorySlug}
+            query={query}
+            className="mt-10"
+          />
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/src/features/blog/components/public/BlogListFeatured.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { BlogCategoryChips } from "./BlogCategoryChips";
+import { BlogListEmpty, BlogListHeader, type BlogListProps, BlogLoadMore } from "./BlogListParts";
+import { BlogPostCard } from "./BlogPostCard";
+import { BlogSearchBox } from "./BlogSearchBox";
+
+/** Layout A: newest post as a hero, then filters, then a three-column grid. */
+export function BlogListFeatured(props: BlogListProps) {
+  const { list, categories, activeCategorySlug, query, page, basePath } = props;
+  const [hero, ...rest] = list.posts;
+
+  return (
+    <section className="px-4 pt-16 pb-20 md:pt-20">
+      <div className="mx-auto max-w-5xl">
+        <BlogListHeader />
+        {hero ? (
+          <div className="mt-10">
+            <BlogPostCard post={hero} categories={categories} basePath={basePath} variant="hero" priority />
+          </div>
+        ) : null}
+        <div className="mt-12 flex flex-col gap-3 md:flex-row md:items-center">
+          <BlogCategoryChips
+            categories={categories}
+            basePath={basePath}
+            activeCategorySlug={activeCategorySlug}
+            query={query}
+            className="flex-1"
+          />
+          <BlogSearchBox
+            basePath={basePath}
+            query={query}
+            activeCategorySlug={activeCategorySlug}
+            className="md:w-64"
+          />
+        </div>
+        {list.posts.length === 0 ? <BlogListEmpty query={query} /> : null}
+        {rest.length > 0 ? (
+          <div className="mt-8 grid gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
+            {rest.map((post) => (
+              <BlogPostCard key={post.id} post={post} categories={categories} basePath={basePath} />
+            ))}
+          </div>
+        ) : null}
+        {list.hasMore ? (
+          <BlogLoadMore
+            basePath={basePath}
+            page={page}
+            activeCategorySlug={activeCategorySlug}
+            query={query}
+            className="mt-12"
+          />
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/src/features/blog/components/public/BlogListParts.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ContentTitle } from "../../../../components/navigations/ContentTitle";
+import { buttonVariants, Link } from "../../../../shadcnui";
+import { cn } from "../../../../utils/cn";
+import type { PublicBlogCategory, PublicBlogList } from "../../types/blog-public.types";
+import type { BlogListLayout } from "../../types/blog.constants";
+import { blogListHref } from "./blogPublicHelpers";
+
+export type BlogListProps = {
+  layout: BlogListLayout;
+  list: PublicBlogList;
+  categories: PublicBlogCategory[];
+  activeCategorySlug?: string;
+  query?: string;
+  page: number;
+  basePath: string;
+};
+
+/** Eyebrow, page title and (optionally) the subtitle. */
+export function BlogListHeader(props: { align?: "start" | "center"; showSubtitle?: boolean }) {
+  const { align = "start", showSubtitle = true } = props;
+  const t = useTranslations();
+  return (
+    <header className={align === "center" ? "text-center" : undefined}>
+      <ContentTitle
+        type={t("blog.public.eyebrow")}
+        element={t("blog.public.title")}
+        headingLevel={1}
+        className={cn("mb-0", align === "center" && "[&_div]:justify-center")}
+      />
+      {showSubtitle ? (
+        <p className="text-muted-foreground mt-3 text-sm leading-relaxed">{t("blog.public.subtitle")}</p>
+      ) : null}
+    </header>
+  );
+}
+
+/** Shown in place of the posts: "no results" when searching, "no posts yet" otherwise. */
+export function BlogListEmpty(props: { query?: string; className?: string }) {
+  const t = useTranslations();
+  return (
+    <p className={cn("text-muted-foreground py-12 text-center text-sm", props.className)}>
+      {props.query ? t("blog.public.noResults") : t("blog.public.empty")}
+    </p>
+  );
+}
+
+/** "Load more": a plain link to the next page, keeping category and query. */
+export function BlogLoadMore(props: {
+  basePath: string;
+  page: number;
+  activeCategorySlug?: string;
+  query?: string;
+  className?: string;
+}) {
+  const { basePath, page, activeCategorySlug, query, className } = props;
+  const t = useTranslations();
+  return (
+    <div className={cn("flex justify-center", className)}>
+      {/* A styled Link, not <Button render={<Link />} nativeButton={false}>: Base UI then
+          stamps role="button" on the anchor, so a control that navigates would announce
+          as a button (same reasoning as HelpHeader). */}
+      <Link
+        href={blogListHref(basePath, { category: activeCategorySlug, q: query, page: page + 1 })}
+        scroll={false}
+        className={buttonVariants({ variant: "outline" })}
+      >
+        {t("blog.public.loadMore")}
+      </Link>
+    </div>
+  );
+}

package/src/features/blog/components/public/BlogListRail.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { MicroLabel } from "../../../../components/typography";
+import { BlogCategoryChips } from "./BlogCategoryChips";
+import { BlogListEmpty, BlogListHeader, type BlogListProps, BlogLoadMore } from "./BlogListParts";
+import { BlogPostCard } from "./BlogPostCard";
+import { BlogSearchBox } from "./BlogSearchBox";
+
+/** Layout C: search and categories in a side rail; newest post large, the rest in two columns. */
+export function BlogListRail(props: BlogListProps) {
+  const { list, categories, activeCategorySlug, query, page, basePath } = props;
+  const t = useTranslations();
+  const [first, ...rest] = list.posts;
+
+  return (
+    <section className="px-4 pt-16 pb-20 md:pt-20">
+      <div className="mx-auto grid max-w-5xl gap-10 md:grid-cols-[13rem_1fr] md:gap-12">
+        <aside className="flex flex-col gap-6">
+          <BlogListHeader showSubtitle={false} />
+          <BlogSearchBox basePath={basePath} query={query} activeCategorySlug={activeCategorySlug} />
+          <div>
+            <MicroLabel as="span" className="block">
+              {t("blog.entities.categories")}
+            </MicroLabel>
+            <BlogCategoryChips
+              categories={categories}
+              basePath={basePath}
+              activeCategorySlug={activeCategorySlug}
+              query={query}
+              variant="list"
+              className="mt-3"
+            />
+          </div>
+        </aside>
+        <div className="min-w-0">
+          {first ? (
+            <BlogPostCard post={first} categories={categories} basePath={basePath} variant="large" priority />
+          ) : (
+            <BlogListEmpty query={query} />
+          )}
+          {rest.length > 0 ? (
+            <div className="border-border mt-10 grid gap-x-6 gap-y-10 border-t pt-10 sm:grid-cols-2">
+              {rest.map((post) => (
+                <BlogPostCard key={post.id} post={post} categories={categories} basePath={basePath} />
+              ))}
+            </div>
+          ) : null}
+          {list.hasMore ? (
+            <BlogLoadMore
+              basePath={basePath}
+              page={page}
+              activeCategorySlug={activeCategorySlug}
+              query={query}
+              className="mt-12"
+            />
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/features/blog/components/public/BlogPostCard.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useFormatter } from "next-intl";
+import Image from "next/image";
+import { MicroLabel, SectionHeader } from "../../../../components/typography";
+import { Link } from "../../../../shadcnui";
+import { cn } from "../../../../utils/cn";
+import { isRemoteImageSrc } from "../../../../utils/isRemoteImageSrc";
+import type { PublicBlogCategory, PublicBlogPost } from "../../types/blog-public.types";
+import { blogPostHref, resolvePostCategory } from "./blogPublicHelpers";
+import { BlogPostMeta } from "./BlogPostMeta";
+
+/**
+ * Cover image in a fixed-ratio frame. With no image it renders a
+ * token-coloured placeholder of the same footprint, so rows stay aligned.
+ */
+export function BlogPostCover(props: {
+  src?: string;
+  alt?: string;
+  sizes: string;
+  priority?: boolean;
+  className?: string;
+}) {
+  const { src, alt, sizes, priority, className } = props;
+  return (
+    <div className={cn("border-border bg-primary/10 relative overflow-hidden rounded-lg border", className)}>
+      {src ? (
+        <Image
+          src={src}
+          alt={alt ?? ""}
+          fill
+          sizes={sizes}
+          priority={priority}
+          className="object-cover"
+          unoptimized={isRemoteImageSrc(src)}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+type BlogPostCardVariant = "hero" | "large" | "card" | "row";
+
+/**
+ * One post in a public list.
+ * - hero: image and text side by side, author and date (featured layout)
+ * - large: image above text, author and date (rail layout)
+ * - card: small grid card (featured grid, rail columns, related posts)
+ * - row: image at the start, text at the end (column layout)
+ * The title link is stretched over the whole card, so the card is one target
+ * whose accessible name is the title alone.
+ */
+export function BlogPostCard(props: {
+  post: PublicBlogPost;
+  categories: PublicBlogCategory[];
+  basePath: string;
+  variant?: BlogPostCardVariant;
+  priority?: boolean;
+  headingLevel?: "h2" | "h3";
+}) {
+  const { post, categories, basePath, variant = "card", priority, headingLevel = "h2" } = props;
+  const format = useFormatter();
+  const category = resolvePostCategory(post, categories);
+  const isProminent = variant === "hero" || variant === "large";
+
+  const eyebrow =
+    variant === "row" && post.publishedAt
+      ? [category?.name, format.dateTime(new Date(post.publishedAt), { day: "numeric", month: "short" })]
+          .filter(Boolean)
+          .join(" · ")
+      : category?.name;
+
+  const text = (
+    <div className="flex min-w-0 flex-col">
+      {eyebrow ? <MicroLabel as="span">{eyebrow}</MicroLabel> : null}
+      <SectionHeader level={headingLevel === "h3" ? 3 : 2} className="mt-1.5">
+        <Link href={blogPostHref(basePath, post.slug)} className="after:absolute after:inset-0">
+          {post.title}
+        </Link>
+      </SectionHeader>
+      {post.summary ? <p className="text-muted-foreground mt-2 text-sm leading-relaxed">{post.summary}</p> : null}
+      <BlogPostMeta post={post} showAuthor={isProminent} showDate={isProminent} className="mt-3" />
+    </div>
+  );
+
+  if (variant === "hero") {
+    return (
+      <article className="group relative grid items-center gap-6 md:grid-cols-[1.4fr_1fr] md:gap-10">
+        <BlogPostCover
+          src={post.coverImage}
+          alt={post.coverImageAlt}
+          sizes="(min-width: 1024px) 560px, (min-width: 768px) 58vw, 100vw"
+          priority={priority}
+          className="aspect-[16/10]"
+        />
+        {text}
+      </article>
+    );
+  }
+
+  if (variant === "row") {
+    return (
+      <article className="group relative grid items-center gap-4 sm:grid-cols-[10rem_1fr] sm:gap-6">
+        <BlogPostCover
+          src={post.coverImage}
+          alt={post.coverImageAlt}
+          sizes="(min-width: 640px) 160px, 100vw"
+          priority={priority}
+          className="aspect-[16/10]"
+        />
+        {text}
+      </article>
+    );
+  }
+
+  return (
+    <article className="group relative flex flex-col gap-4">
+      <BlogPostCover
+        src={post.coverImage}
+        alt={post.coverImageAlt}
+        sizes={
+          variant === "large"
+            ? "(min-width: 1024px) 760px, 100vw"
+            : "(min-width: 1024px) 320px, (min-width: 640px) 50vw, 100vw"
+        }
+        priority={priority}
+        className={variant === "large" ? "aspect-[16/8]" : "aspect-[16/10]"}
+      />
+      {text}
+    </article>
+  );
+}

package/src/features/blog/components/public/BlogPostMeta.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useFormatter, useTranslations } from "next-intl";
+import { cn } from "../../../../utils/cn";
+import type { PublicBlogPost } from "../../types/blog-public.types";
+
+const ONE_DAY_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * "author · date · updated · reading time". Each part is opt-in so cards show
+ * only the reading time while the hero and the post page show more.
+ */
+export function BlogPostMeta(props: {
+  post: PublicBlogPost;
+  showAuthor?: boolean;
+  showDate?: boolean;
+  showUpdated?: boolean;
+  className?: string;
+}) {
+  const { post, showAuthor, showDate, showUpdated, className } = props;
+  const t = useTranslations();
+  const format = useFormatter();
+
+  const parts: string[] = [];
+  if (showAuthor && post.authorName) parts.push(t("blog.public.by", { author: post.authorName }));
+  if (showDate && post.publishedAt) {
+    parts.push(format.dateTime(new Date(post.publishedAt), { dateStyle: "medium" }));
+  }
+  if (
+    showUpdated &&
+    post.publishedAt &&
+    post.updatedAt &&
+    new Date(post.updatedAt).getTime() - new Date(post.publishedAt).getTime() > ONE_DAY_MS
+  ) {
+    parts.push(t("blog.public.updated", { date: format.dateTime(new Date(post.updatedAt), { dateStyle: "medium" }) }));
+  }
+  parts.push(t("blog.public.readingTime", { minutes: post.readingMinutes }));
+
+  return (
+    <p className={cn("text-muted-foreground text-xs", className)}>
+      {parts.map((part, index) => (
+        <span key={index}>
+          {index > 0 ? " · " : null}
+          {part}
+        </span>
+      ))}
+    </p>
+  );
+}

package/src/features/blog/components/public/BlogPostView.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { ArrowLeftIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { BlockNoteEditorContainer } from "../../../../components/editors/BlockNoteEditorContainer";
+import { ContentTitle } from "../../../../components/navigations/ContentTitle";
+import { SectionHeader } from "../../../../components/typography";
+import { Link } from "../../../../shadcnui";
+import type { PublicBlogCategory, PublicBlogPost } from "../../types/blog-public.types";
+import { resolvePostCategory } from "./blogPublicHelpers";
+import { BlogPostCard, BlogPostCover } from "./BlogPostCard";
+import { BlogPostMeta } from "./BlogPostMeta";
+
+/**
+ * Public post page: back link, category, title, summary, meta, cover, body,
+ * then up to three posts from the same category.
+ */
+export function BlogPostView(props: {
+  post: PublicBlogPost;
+  categories: PublicBlogCategory[];
+  related: PublicBlogPost[];
+  basePath: string;
+}) {
+  const { post, categories, related, basePath } = props;
+  const t = useTranslations();
+  const category = resolvePostCategory(post, categories);
+  const more = related.slice(0, 3);
+
+  return (
+    <article className="px-4 pt-12 pb-20 md:pt-16">
+      <div className="mx-auto max-w-3xl">
+        <Link href={basePath} className="inline-flex items-center gap-1.5">
+          <ArrowLeftIcon className="size-4 rtl:rotate-180" />
+          {t("blog.public.back")}
+        </Link>
+        <header className="mt-8">
+          <ContentTitle type={category?.name} element={post.title} headingLevel={1} className="mb-0" />
+          {post.summary ? <p className="text-muted-foreground mt-3 text-sm leading-relaxed">{post.summary}</p> : null}
+          <BlogPostMeta post={post} showAuthor showDate showUpdated className="mt-4" />
+        </header>
+        {post.coverImage ? (
+          <BlogPostCover
+            src={post.coverImage}
+            alt={post.coverImageAlt}
+            sizes="(min-width: 768px) 768px, 100vw"
+            priority
+            className="mt-8 aspect-[16/9]"
+          />
+        ) : null}
+        <div className="mt-8">
+          <BlockNoteEditorContainer id={post.id} type="blog-post" initialContent={post.body} />
+        </div>
+      </div>
+      {more.length > 0 ? (
+        <section className="mx-auto mt-16 max-w-5xl">
+          <div className="border-border border-t pt-10">
+            <SectionHeader level={2}>{t("blog.public.moreIn", { category: category?.name ?? "" })}</SectionHeader>
+            <div className="mt-6 grid gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
+              {more.map((relatedPost) => (
+                <BlogPostCard
+                  key={relatedPost.id}
+                  post={relatedPost}
+                  categories={categories}
+                  basePath={basePath}
+                  headingLevel="h3"
+                />
+              ))}
+            </div>
+          </div>
+        </section>
+      ) : null}
+    </article>
+  );
+}

package/src/features/blog/components/public/BlogSearchBox.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { SearchIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { FormEvent, useEffect, useState } from "react";
+import { useI18nRouter } from "../../../../i18n";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../../../../shadcnui";
+import { blogListHref } from "./blogPublicHelpers";
+
+/**
+ * Search form for the public list. The current query and category come in as
+ * props (the page already parsed the search params), so this component never
+ * reads `useSearchParams` and needs no Suspense boundary of its own.
+ * Submitting keeps the category and resets to page one.
+ */
+export function BlogSearchBox(props: {
+  basePath: string;
+  query?: string;
+  activeCategorySlug?: string;
+  className?: string;
+}) {
+  const { basePath, query, activeCategorySlug, className } = props;
+  const t = useTranslations();
+  const router = useI18nRouter();
+  const [value, setValue] = useState(query ?? "");
+
+  useEffect(() => setValue(query ?? ""), [query]);
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const q = value.trim();
+    router.push(blogListHref(basePath, { category: activeCategorySlug, q: q || undefined }));
+  };
+
+  return (
+    <form role="search" onSubmit={onSubmit} className={className}>
+      <InputGroup>
+        <InputGroupAddon>
+          <SearchIcon />
+        </InputGroupAddon>
+        <InputGroupInput
+          type="search"
+          name="q"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          placeholder={t("blog.public.searchPlaceholder")}
+          aria-label={t("blog.public.search")}
+        />
+      </InputGroup>
+    </form>
+  );
+}