THC 856 create main article theme template (#267)

src/components/Callout.astro

@@ -58,6 +58,12 @@ if (Astro.slots.has("default")) {
 ---
 
 <!-- Pass the assigned information to the BuildBanner React component -->
-<Banner client:only="react" title={title ? title : typeTitle} kind={bannerType}>
-  <Fragment set:html={content} slot="description" />
-</Banner>
+<div class="my-7">
+  <Banner
+    client:only="react"
+    title={title ? title : typeTitle}
+    kind={bannerType}
+  >
+    <Fragment set:html={content} slot="description" />
+  </Banner>
+</div>

src/components/LeftSidebar/Navigation.astro

@@ -2,12 +2,12 @@
 import classNames from "classnames";
 
 import { getLanguageFromURL } from "@i18n/locales";
-import type { getNavigationEntries } from "src/utils/helpers/navigation/getNavigationEntries";
-
 import NavigationItem from "./NavigationItem";
 
+import type { NavigationData } from "src/utils/helpers/navigation/types";
+
 interface NavigationProps {
-  navigationEntries: ReturnType<typeof getNavigationEntries>;
+  navigationEntries: NavigationData["languageTree"];
 }
 
 const { navigationEntries } = Astro.props as NavigationProps;

src/components/PageBreadcrumbs/PageBreadcrumbs.astro

@@ -0,0 +1,45 @@
+---
+import classNames from "classnames";
+
+import type { NavigationData } from "src/utils/helpers/navigation/types";
+
+import "./breadcrumbs.css";
+
+interface BreadcrumbsProps {
+  breadcrumbs: NavigationData["breadcrumbs"];
+}
+
+const { breadcrumbs } = Astro.props as BreadcrumbsProps;
+const currentPage = Astro.url.pathname;
+const currentPageMatch = currentPage.endsWith("/")
+  ? currentPage.slice(1, -1)
+  : currentPage.slice(1);
+---
+
+<div aria-label="breadcrumbs" class="mb-8">
+  <nav>
+    <ul class="flex flex-row gap-x-6">
+      {
+        breadcrumbs.map((breadcrumb, i) => (
+          <li
+            class={classNames(" relative", {
+              "breadcrumbs-item":
+                breadcrumbs.length > 1 && i !== breadcrumbs.length - 1,
+            })}
+          >
+            <a
+              class={classNames("cursor-pointer  text-sm", {
+                "text-black font-semibold": currentPageMatch === breadcrumb.url,
+                "text-secondary font-medium":
+                  currentPageMatch !== breadcrumb.url,
+              })}
+              href={`/${breadcrumb.url}`}
+            >
+              {breadcrumb.title}
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </nav>
+</div>

src/components/PageBreadcrumbs/breadcrumbs.css

@@ -0,0 +1,8 @@
+.breadcrumbs-item::after {
+  content: "•";
+  font-weight: 500;
+  position: absolute;
+  top: -5px;
+  right: -16px;
+  font-size: 20px;
+}

src/components/PageContent/PageContent.astro

@@ -1,26 +1,21 @@
 ---
 import type { MarkdownHeading } from "astro";
-import MoreMenu from "../RightSidebar/MoreMenu.astro";
 import TableOfContents from "../RightSidebar/TableOfContents";
 
 type Props = {
   title: string;
   headings: MarkdownHeading[];
-  githubEditUrl: string;
 };
 
-const { title, headings, githubEditUrl } = Astro.props;
+const { title, headings } = Astro.props;
 ---
 
-<article id="article" class="w-full">
+<article id="article" class="article-main w-full">
   <section class="main-section">
     <h1 class="content-title" id="overview">{title}</h1>
     <nav class="block sm:hidden">
       <TableOfContents client:media="(max-width: 50em)" headings={headings} />
     </nav>
     <slot />
   </section>
-  <nav class="block sm:hidden">
-    <MoreMenu editHref={githubEditUrl} />
-  </nav>
 </article>

src/components/RightSidebar/RightSidebar.astro

@@ -1,19 +1,16 @@
 ---
 import type { MarkdownHeading } from "astro";
 import TableOfContents from "./TableOfContents";
-import MoreMenu from "./MoreMenu.astro";
 
 type Props = {
   headings: MarkdownHeading[];
-  githubEditUrl: string;
 };
 
-const { headings, githubEditUrl } = Astro.props;
+const { headings } = Astro.props;
 ---
 
 <nav class="w-full sticky top-10" aria-labelledby="grid-right">
   <div class="h-full p-0 overflow-auto xs:hidden lg:block">
     <TableOfContents client:visible headings={headings} />
-    <MoreMenu editHref={githubEditUrl} />
   </div>
 </nav>

src/components/RightSidebar/TableOfContents.tsx

@@ -1,4 +1,3 @@
-/** @jsxImportSource react */
 import type { MarkdownHeading } from "astro";
 import type { FC } from "react";
 import { unescape } from "html-escaper";
@@ -100,7 +99,9 @@ const TableOfContents: FC<{ headings: MarkdownHeading[] }> = ({
           .map((heading) => (
             <li
               key={heading.slug}
-              className={`header-link depth-${heading.depth} ${
+              className={`header-link before:content-none depth-${
+                heading.depth
+              } ${
                 currentID === heading.slug ? "current-header-link" : ""
               }`.trim()}
             >

src/components/atlas/BuildTabs.tsx

@@ -64,14 +64,14 @@ const BuildTabs: FC<{
   }, []);
 
   return (
-    <>
+    <div id="tabs-container">
       <Tabs
         items={currentTabs.items}
         value={currentTabs.activeTab}
         onChange={(id) => handleTabChange(id, currentTabs.isTabsHaveSync)}
       />
       {content}
-    </>
+    </div>
   );
 };
 

src/layouts/MainLayout.astro

@@ -1,11 +1,13 @@
 ---
 import type { MarkdownHeading } from "astro";
 import type { CollectionEntry } from "astro:content";
+
 import HeadCommon from "../components/HeadCommon.astro";
 import HeadSEO from "../components/HeadSEO.astro";
 import PageContent from "../components/PageContent/PageContent.astro";
+import PageBreadcrumbs from "@components/PageBreadcrumbs/PageBreadcrumbs.astro";
 import Navigation from "../components/LeftSidebar/Navigation.astro";
-import { GITHUB_EDIT_URL, SITE } from "../consts";
+import { SITE } from "../consts";
 import { getNavigationEntries } from "src/utils/helpers/navigation/getNavigationEntries";
 import SidebarHeader from "@components/LeftSidebar/SidebarHeader/SidebarHeader.astro";
 import SidebarSearch from "@components/LeftSidebar/SidebarSearch/SidebarSearch.astro";
@@ -23,11 +25,8 @@ type Props = CollectionEntry<"docs">["data"] & {
 const pages = await Astro.glob("../content/docs/**/*.mdx");
 const currentPage = Astro.url.pathname;
 const navigationEntries = getNavigationEntries(pages, currentPage);
-
 const { headings, ...data } = Astro.props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-const currentFile = `src/content/docs${currentPage.replace(/\/$/, "")}.md`;
-const githubEditUrl = `${GITHUB_EDIT_URL}/${currentFile}`;
 const currentLang = getLanguageFromURL(currentPage);
 const homeUrl = `${Astro.url.origin}/${currentLang}`;
 ---
@@ -54,7 +53,7 @@ const homeUrl = `${Astro.url.origin}/${currentLang}`;
         <SidebarHeader homeUrl={homeUrl} />
         {/* Search input */}
         <SidebarSearch />
-        <Navigation navigationEntries={navigationEntries} />
+        <Navigation navigationEntries={navigationEntries?.languageTree} />
         <div class="h-[63px] p-[22px] border-t-[1px] border-[#CDD0E0]">
           <LanguageSwitch
             client:load
@@ -66,18 +65,15 @@ const homeUrl = `${Astro.url.origin}/${currentLang}`;
       </aside>
       <div
         id="content-main"
-        class="article-main xs:pl-4 lg:pl-0 pr-4 flex mt-9 mb-16 xs:w-full lg:w-[calc(100%-326px-272px)]"
+        class="xs:pl-4 lg:pl-0 pr-4 flex flex-col mt-14 mb-16 xs:w-full lg:w-[calc(100%-326px-272px)]"
       >
-        <PageContent
-          title={data.title}
-          headings={headings}
-          githubEditUrl={githubEditUrl}
-        >
+        <PageBreadcrumbs breadcrumbs={navigationEntries?.breadcrumbs} />
+        <PageContent title={data.title} headings={headings}>
           <slot />
         </PageContent>
       </div>
       <aside class="relative pl-8 w-[272px]" title="Table of Contents">
-        <RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
+        <RightSidebar headings={headings} />
       </aside>
     </main>
   </body>