Updated page breadcrumbs somewhat

pages/+Layout.ts

@@ -11,7 +11,6 @@ import "~/styles/core.sass";
 import "~/styles/padding.css";
 //
 import h from "./layout.module.sass";
-import { onDemand } from "~/_utils";
 
 import { PageAdminConsole } from "~/components";
 

pages/+Page.mdx

@@ -1,14 +1,9 @@
 export { ContentPage as default } from "~/layouts";
 import { macrostratInstance } from "@macrostrat-web/settings";
-import { PageHeader } from "~/components";
+import { PageHeaderV2 } from "~/components";
 import { LinkCard } from "~/components/cards";
 
-<PageHeader title="Macrostrat">
-  <span className="subtitle">
-    <span className="secondary">v2</span>{" "}
-    <span className="tertiary">{macrostratInstance}</span>
-  </span>
-</PageHeader>
+<PageHeaderV2 title="Macrostrat"></PageHeaderV2>
 
 <LinkCard href="/map" title="Map interface">
   Macrostrat's main map interface showing a harmonized view of the Earth's crust

pages/dev/xdd-extractions/+Page.ts

@@ -5,7 +5,6 @@ import { ContentPage } from "~/layouts";
 import { PageHeaderV2 } from "~/components";
 import { postgrestPrefix } from "@macrostrat-web/settings";
 import { useEffect, useState } from "react";
-import { PageAdminConsole } from "~/components";
 
 const postgrest = new PostgrestClient(postgrestPrefix);
 

src/components/icon.module.sass

@@ -12,10 +12,22 @@
   .icon-container
     margin-right: 0.4em
     margin-bottom: 0
-    transform: translateY(0.05em)
   .subtitle
     margin-left: 1em
     font-weight: 300
   .site-name
     font-weight: 300
-    color: unset
+    color: unset
+
+.page-header
+  margin: 1.2em 0 1.2em
+  display: flex
+  flex-direction: row
+  align-items: start
+  .header-left
+    flex: 0
+    margin: 0.5em 0 1em 0
+  gap: 1em
+  h1
+    margin-top: 0
+    margin-bottom: 0

src/components/navigation/PageBreadcrumbs.ts

@@ -5,23 +5,6 @@ import React from "react";
 import { MacrostratIcon } from "~/components";
 import h from "./breadcrumbs.module.sass";
 
-export function PageHeaderV2({ className, title, children, showLogo }) {
-  /** A page header component that includes a title and breadcrumbs. */
-  const ctx = usePageContext();
-  let items = buildBreadcrumbs(ctx.urlPathname, sitemap, ctx);
-
-  const lastItem = items.pop();
-  let _title = title ?? lastItem.text;
-
-  return h("header.page-header", { className }, [
-    h("div.header-top", [
-      h(PageBreadcrumbsInternal, { showLogo, items }),
-      children,
-    ]),
-    h("h1.page-title", _title),
-  ]);
-}
-
 export function PageBreadcrumbs({ showLogo = false }) {
   const ctx = usePageContext();
   let items = buildBreadcrumbs(ctx.urlPathname, sitemap, ctx);
@@ -31,7 +14,7 @@ export function PageBreadcrumbs({ showLogo = false }) {
   });
 }
 
-function PageBreadcrumbsInternal({ showLogo = false, items }) {
+export function PageBreadcrumbsInternal({ showLogo = false, items }) {
   if (showLogo) {
     items[0].text = h("span.breadcrumbs-root", [
       h(MacrostratIcon, { size: 16 }),
@@ -44,7 +27,7 @@ function PageBreadcrumbsInternal({ showLogo = false, items }) {
   });
 }
 
-function buildBreadcrumbs(
+export function buildBreadcrumbs(
   currentPath: string,
   routes: Routes,
   ctx: PageContext

src/components/navigation/breadcrumbs.module.sass

@@ -4,8 +4,3 @@
   align-items: center
   gap: 0.5em
 
-.page-header
-  margin: 1.2em 0 1.2em
-  h1
-    margin-top: 0
-    margin-bottom: 0

src/components/page-header.ts

@@ -1,10 +1,14 @@
-import hyper from "@macrostrat/hyper";
 import { MacrostratIcon } from "./macrostrat-icon";
 import { DevLinkButton, Link } from "./buttons";
-import styles from "./icon.module.sass";
+import h from "./icon.module.sass";
 import { AnchorButton, ButtonGroup } from "@blueprintjs/core";
-
-const h = hyper.styled(styles);
+import {
+  PageBreadcrumbsInternal,
+  buildBreadcrumbs,
+  sitemap,
+} from "~/components/navigation";
+import { usePageContext } from "vike-react/usePageContext";
+import { Breadcrumbs } from "@blueprintjs/core";
 
 export function PageHeader(props) {
   const {
@@ -31,23 +35,30 @@ export function PageHeader(props) {
   ]);
 }
 
-export function Icon(props) {
-  const { title = "", showSiteName = true, children, className } = props;
-  const siteName = "";
-  let _showSiteName = showSiteName;
-  if (title == siteName) {
-    _showSiteName = false;
+export function PageHeaderV2({ className, title, children, showLogo = true }) {
+  /** A page header component that includes a title and breadcrumbs. */
+  const ctx = usePageContext();
+  let items = buildBreadcrumbs(ctx.urlPathname, sitemap, ctx);
+
+  const lastItem = items.pop();
+  let _title = title ?? lastItem.text;
+
+  if (ctx.urlPathname == "/") {
+    items = [];
   }
 
-  return h("h1.page-title", { className }, [
-    h(MacrostratIcon, { size: 24 }),
-    h.if(_showSiteName)([
-      h(Link, { href: "/", className: "site-name" }, siteName),
-      " ",
+  return h("header.page-header", { className }, [
+    h.if(showLogo)("div.header-left", h(MacrostratIcon, { size: 24 })),
+    h("div.header-main", [
+      h("div.header-top", [
+        h.if(items.length > 0)(PageBreadcrumbsInternal, {
+          showLogo: false,
+          items,
+        }),
+        children,
+      ]),
+      h("h1.page-title", _title),
     ]),
-    h("span.title", title),
-    " ",
-    children,
   ]);
 }