feat(docs): add breadcrumb navigation to blog post pages (#7306)

Author: alicanerdurmaz

documentation/src/components/blog/common/date.js

@@ -1,8 +1,13 @@
 import React from "react";
+import clsx from "clsx";
 
-export function Date({ date, formattedDate }) {
+export function Date({ date, formattedDate, className }) {
   return (
-    <time dateTime={date} itemProp="datePublished" className="uppercase">
+    <time
+      dateTime={date}
+      itemProp="datePublished"
+      className={clsx("uppercase", className)}
+    >
       {formattedDate}
     </time>
   );

documentation/src/components/blog/post-paginator/index.js

@@ -21,8 +21,7 @@ export const PostPaginator = ({ posts, title }) => {
         "blog-md:max-w-[672px]",
         "blog-lg:max-w-[720px]",
         "pt-16",
-        "pb-12",
-        "blog-md:pt-[72px] blog-md:pb-[120px]",
+        "blog-md:pt-[72px]",
       )}
     >
       <div className={clsx("w-full")}>
@@ -57,7 +56,7 @@ export const PostPaginator = ({ posts, title }) => {
                     "blog-md:flex-row",
                     "w-full",
                     "items-start",
-                    "blog-md:items-center",
+                    "blog-md:items-start",
                     "gap-2",
                     "py-3",
                     "blog-md:py-4",
@@ -95,7 +94,7 @@ export const PostPaginator = ({ posts, title }) => {
                       "w-[120px]",
                       "blog-md:text-right",
                       "text-[10px]",
-                      "leading-4",
+                      "leading-6",
                       "font-semibold",
                       "uppercase",
                       "tracking-[0.01em]",

documentation/src/refine-theme/blog-breadcrumbs.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import clsx from "clsx";
+
+type BlogCategory = {
+  label?: string;
+  permalink?: string;
+} | null;
+
+type BreadcrumbItem = {
+  label: string;
+  href?: string;
+};
+
+type BlogBreadcrumbsProps = {
+  permalink?: string;
+  title?: string;
+  category?: BlogCategory;
+  className?: string;
+};
+
+const getBreadcrumbItems = ({
+  permalink,
+  title,
+  category,
+}: {
+  permalink: string;
+  title: string;
+  category?: BlogCategory;
+}): BreadcrumbItem[] => [
+  { label: "Blog", href: "/blog" },
+  ...(category?.label && category?.permalink
+    ? [{ label: category.label, href: category.permalink }]
+    : []),
+  { label: title, href: permalink },
+];
+
+export const BlogBreadcrumbs = ({
+  permalink,
+  title,
+  category,
+  className,
+}: BlogBreadcrumbsProps) => {
+  if (!title || !permalink) {
+    return null;
+  }
+
+  const items = getBreadcrumbItems({ permalink, title, category });
+
+  return (
+    <nav
+      className={clsx("not-prose", "w-full", "min-w-0", className)}
+      aria-label="Blog breadcrumbs"
+    >
+      <ol
+        className={clsx(
+          "m-0",
+          "p-0",
+          "list-none",
+          "flex",
+          "w-full",
+          "min-w-0",
+          "flex-col",
+          "items-start",
+          "gap-1",
+          "blog-sm:flex-row",
+          "blog-sm:flex-wrap",
+          "blog-sm:items-center",
+          "blog-sm:gap-0",
+          "text-sm",
+          "leading-5",
+          "font-normal",
+          "tracking-[-0.007em]",
+        )}
+      >
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          const itemTextClass = isLast
+            ? "text-zinc-400 dark:text-zinc-400"
+            : "text-zinc-700 dark:text-zinc-300";
+          const itemContainerClass = isLast
+            ? "blog-sm:flex-1"
+            : "blog-sm:w-auto blog-sm:shrink-0";
+          const itemLabelClass = clsx(
+            "block",
+            "min-w-0",
+            "max-w-full",
+            "break-words",
+            isLast ? "blog-sm:truncate" : "blog-sm:whitespace-nowrap",
+          );
+
+          return (
+            <li
+              key={`${item.label}-${item.href ?? "current"}`}
+              className={clsx(
+                "flex",
+                "items-center",
+                "min-w-0",
+                "max-w-full",
+                "w-full",
+                itemContainerClass,
+              )}
+            >
+              {index > 0 && (
+                <span
+                  className={clsx(
+                    "hidden",
+                    "blog-sm:inline",
+                    "blog-sm:mx-2",
+                    "text-zinc-300",
+                    "dark:text-zinc-700",
+                  )}
+                  aria-hidden="true"
+                >
+                  /
+                </span>
+              )}
+              {item.href && !isLast ? (
+                <Link
+                  to={item.href}
+                  className={clsx(
+                    "no-underline",
+                    "hover:no-underline",
+                    itemLabelClass,
+                    itemTextClass,
+                    "hover:text-zinc-700",
+                    "dark:hover:text-zinc-300",
+                  )}
+                >
+                  {item.label}
+                </Link>
+              ) : (
+                <span
+                  className={clsx(itemLabelClass, itemTextClass)}
+                  aria-current={isLast ? "page" : undefined}
+                >
+                  {item.label}
+                </span>
+              )}
+              <span
+                className={clsx(
+                  "ml-2",
+                  "text-zinc-300",
+                  "dark:text-zinc-700",
+                  "blog-sm:hidden",
+                )}
+                aria-hidden="true"
+              >
+                /
+              </span>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};

documentation/src/theme/BlogPostPage/index.js

@@ -10,18 +10,37 @@ import {
 } from "@docusaurus/theme-common/internal";
 import BlogLayout from "@theme/BlogLayout";
 import BlogPostPageMetadata from "@theme/BlogPostPage/Metadata";
+import { BlogBreadcrumbs } from "../../refine-theme/blog-breadcrumbs";
 import { BlogTOC } from "../../refine-theme/blog-toc";
 
 import { BlogPostPageView, PostPaginator } from "../../components/blog";
 
 function BlogPostPageContent({ children }) {
   const { metadata, toc } = useBlogPost();
-  const { relatedPosts } = metadata;
+  const { relatedPosts, permalink, title, category } = metadata;
 
   return (
     <BlogLayout toc={<BlogTOC toc={toc} />}>
       <BlogPostPageView>{children}</BlogPostPageView>
       <PostPaginator title="Related Articles" posts={relatedPosts} />
+      <BlogBreadcrumbs
+        permalink={permalink}
+        title={title}
+        category={category}
+        className={clsx(
+          "w-full",
+          "mx-auto",
+          "px-4",
+          "blog-md:px-0",
+          "blog-max:px-4",
+          "max-w-[320px]",
+          "blog-md:max-w-[672px]",
+          "blog-lg:max-w-[720px]",
+          "mt-10",
+          "pb-16",
+          "blog-md:pb-[120px]",
+        )}
+      />
     </BlogLayout>
   );
 }