feat: show breadcrumbs on blog post pages

packages/logos-docusaurus-theme/src/client/lib/useBlogPluginData.ts

@@ -0,0 +1,33 @@
+import { PluginOptions } from '@docusaurus/plugin-content-blog'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+
+export const useBlogPluginData = () => {
+  const ctx = useDocusaurusContext()
+
+  const plugins = ctx.siteConfig.plugins.filter(
+    (plugin) =>
+      Array.isArray(plugin) &&
+      [
+        'docusaurus-plugin-content-blog',
+        '@docusaurus/plugin-content-blog',
+      ].includes(plugin[0] as string),
+  )
+
+  if (plugins.length === 0)
+    return {
+      routeBasePath: '/blog',
+    } as Partial<PluginOptions>
+
+  const plugin = plugins.find((plugin) =>
+    window.location.pathname.startsWith(
+      (plugin as [string, PluginOptions])[1].routeBasePath,
+    ),
+  )
+
+  if (!plugin)
+    return {
+      routeBasePath: '/blog',
+    } as Partial<PluginOptions>
+
+  return (plugin as any)[1] as Partial<PluginOptions>
+}

packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/index.tsx

@@ -1,10 +1,39 @@
+import { useBlogPost } from '@docusaurus/theme-common/internal'
+import { translate } from '@docusaurus/Translate'
 import BlogPostItemHeaderInfo from '@theme/BlogPostItem/Header/Info'
 import BlogPostItemHeaderTitle from '@theme/BlogPostItem/Header/Title'
 import React from 'react'
+import { useBlogPluginData } from '../../../lib/useBlogPluginData'
+import { BreadcrumbsBase } from '../../DocBreadcrumbs/index'
 
 export default function BlogPostItemHeader(): JSX.Element {
+  const {
+    metadata: { title, permalink },
+    isBlogPostPage,
+    assets,
+  } = useBlogPost()
+
+  const plugin = useBlogPluginData()
+  const routeBasePath = plugin.routeBasePath ?? '/blog'
+
   return (
     <header>
+      {isBlogPostPage && (
+        <BreadcrumbsBase
+          homePage={translate({
+            id: 'theme.blog.breadcrumbs.listPageLabel',
+            message: 'All posts',
+          })}
+          homePageLink={routeBasePath}
+          breadcrumbs={[
+            {
+              type: 'link',
+              href: permalink,
+              label: title,
+            },
+          ]}
+        />
+      )}
       <BlogPostItemHeaderTitle />
       <BlogPostItemHeaderInfo />
     </header>

packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx

@@ -1,15 +1,16 @@
-import React from 'react'
-import clsx from 'clsx'
+import { Typography } from '@acid-info/lsd-react'
+import Link from '@docusaurus/Link'
+import { PropSidebarBreadcrumbsItem } from '@docusaurus/plugin-content-docs'
+import { useActivePlugin } from '@docusaurus/plugin-content-docs/lib/client/index.js'
 import { ThemeClassNames } from '@docusaurus/theme-common'
 import {
-  useSidebarBreadcrumbs,
   useHomePageRoute,
+  useSidebarBreadcrumbs,
 } from '@docusaurus/theme-common/internal'
-import Link from '@docusaurus/Link'
 import { translate } from '@docusaurus/Translate'
+import clsx from 'clsx'
+import React from 'react'
 import styles from './styles.module.css'
-import { Typography } from '@acid-info/lsd-react'
-import { useActivePlugin } from '@docusaurus/plugin-content-docs/lib/client/index.js'
 
 // TODO move to design system folder
 function BreadcrumbsItemLink({ children, href, isLast }) {
@@ -63,17 +64,21 @@ function BreadcrumbsItem({ children, active, index, addMicrodata }) {
   )
 }
 
-export default function DocBreadcrumbs() {
-  const breadcrumbs = useSidebarBreadcrumbs()
-  const homePageRoute = useHomePageRoute()
-  const plugin = useActivePlugin()
+export type BreadcrumbsBaseProps = {
+  homePage?: string
+  homePageLink?: string
+  breadcrumbs?: PropSidebarBreadcrumbsItem[]
+}
 
+export const BreadcrumbsBase: React.FC<BreadcrumbsBaseProps> = ({
+  homePage,
+  homePageLink,
+  breadcrumbs,
+}) => {
   if (!breadcrumbs) {
     return null
   }
 
-  const routeBasePath = plugin?.pluginData.path
-
   return (
     <nav
       className={clsx(
@@ -91,15 +96,12 @@ export default function DocBreadcrumbs() {
         itemScope
         itemType="https://schema.org/BreadcrumbList"
       >
-        {homePageRoute && (
-          <Typography
-            className={clsx('breadcrumbs__item')}
-            variant="body3"
-            component="a"
-            href={routeBasePath}
-          >
-            Home
-          </Typography>
+        {!!homePage && (
+          <Link to={homePageLink} className={clsx('breadcrumbs__item')}>
+            <Typography variant="body3" component="span">
+              {homePage}
+            </Typography>
+          </Link>
         )}
         {breadcrumbs.map((item, idx) => {
           const isLast = idx === breadcrumbs.length - 1
@@ -120,3 +122,29 @@ export default function DocBreadcrumbs() {
     </nav>
   )
 }
+
+export default function DocBreadcrumbs() {
+  const breadcrumbs = useSidebarBreadcrumbs()
+  const homePageRoute = useHomePageRoute()
+  const plugin = useActivePlugin()
+
+  if (!breadcrumbs) {
+    return null
+  }
+
+  const routeBasePath = plugin?.pluginData.path
+
+  return (
+    <BreadcrumbsBase
+      homePage={
+        homePageRoute &&
+        translate({
+          id: 'theme.docs.breadcrumbs.homePageLabel',
+          message: 'Home',
+        })
+      }
+      breadcrumbs={breadcrumbs}
+      homePageLink={routeBasePath}
+    />
+  )
+}