breadcrumbs

package.json

@@ -23,6 +23,7 @@
     "@astrojs/tailwind": "~5.1.0",
     "@tailwindcss/typography": "0.5.10",
     "astro": "~4.2.5",
+    "astro-breadcrumbs": "~2.0.2",
     "astro-critters": "~2.0.11",
     "astrojs-service-worker": "~2.0.0",
     "classnames": "~2.5.1",

src/components/DocumentBreadcrumbs.astro

@@ -0,0 +1,61 @@
+---
+import { Breadcrumbs } from 'astro-breadcrumbs';
+import getPathFromSlug from '../utils/get-path-from-slug.ts';
+import { getEntry } from 'astro:content';
+export interface Props {
+  slug: string;
+}
+const { slug } = Astro.props;
+const parentSlugs = slug
+  .split('/')
+  .map((_slugPart, index, slugParts) =>
+    slugParts.slice(0, index + 1).join('/'),
+  );
+const crumbs = [
+  {
+    text: 'WebDoky',
+    href: '/',
+  },
+  ...(await Promise.all(
+    parentSlugs.map(async (slug) => {
+      const entry = await getEntry('processed-content', slug);
+      if (!entry) {
+        throw new Error(`No entry found for slug: ${slug}`);
+      }
+      return {
+        text: entry.data.title,
+        href: getPathFromSlug(slug),
+      };
+    }),
+  )),
+];
+---
+
+<Breadcrumbs crumbs={crumbs} trailingSlash={true}
+  ><svg
+    slot="separator"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    ><polyline points="9 18 15 12 9 6"></polyline>
+  </svg></Breadcrumbs
+>
+<style is:global lang="scss">
+  /* stylelint-disable selector-class-pattern */
+  .c-breadcrumbs__crumbs {
+    column-gap: 0;
+    padding: 8px 16px !important;
+
+
+    a:hover {
+      color: var(--color-ui-primary);
+    }
+  }
+  /* stylelint-enable selector-class-pattern */
+</style>

src/pages/uk/docs/[...slug].astro

@@ -1,10 +1,11 @@
 ---
 import { getCollection, getEntry } from 'astro:content';
 
+import DocumentBreadcrumbs from '../../../components/DocumentBreadcrumbs.astro';
 import MetaHead from '../../../components/MetaHead.astro';
 import Layout from '../../../layouts/Layout/Layout.astro';
 import processedFrontmatterSchema from '../../../validation/processed-frontmatter.ts';
-
+import 'astro-breadcrumbs/breadcrumbs.css';
 export interface Params {
   slug: string;
 }
@@ -41,6 +42,7 @@ const TARGET_LOCALE = import.meta.env.TARGET_LOCALE;
     description={description}
     title={`${title} ${section ? `— ${section}` : ''} | ВебДоки`}
   />
+  <DocumentBreadcrumbs slug={slug} />
   <main
     class="wd-doc-page container relative flex flex-wrap justify-start flex-1 w-full bg-ui-background">
     <h1>{title}</h1>
@@ -58,7 +60,7 @@ const TARGET_LOCALE = import.meta.env.TARGET_LOCALE;
     h4,
     h5,
     h6 {
-      @apply -mt-12 pt-20;
+      // @apply -mt-12 pt-20;
     }
 
     h2 + h3,

yarn.lock

@@ -3020,6 +3020,11 @@ astral-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
+astro-breadcrumbs@~2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/astro-breadcrumbs/-/astro-breadcrumbs-2.0.2.tgz#39cfdae5352e2419567c01883fe59c674147c6c0"
+  integrity sha512-tKhTHH0N70G1+8FO7Rg/gE6ZRLIS//kZO5SR0jzLJpMgWeigzBN8L5VKXx3Ur1p/QW99y2Qc+ewQ0YhdkTgnEw==
+
 astro-critters@~2.0.11:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/astro-critters/-/astro-critters-2.0.11.tgz#1cd9fb8c4c7722e42a1f7d43e1a1a764e5cd1f74"