From 386cd28eed467112dce756b4f713edc704a7b138 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Tue, 17 Sep 2024 13:44:41 -0500 Subject: [PATCH] Updated page breadcrumbs somewhat --- pages/+Layout.ts | 1 - pages/+Page.mdx | 9 +--- pages/dev/xdd-extractions/+Page.ts | 1 - src/components/icon.module.sass | 16 ++++++- src/components/navigation/PageBreadcrumbs.ts | 21 +-------- .../navigation/breadcrumbs.module.sass | 5 -- src/components/page-header.ts | 47 ++++++++++++------- 7 files changed, 47 insertions(+), 53 deletions(-) diff --git a/pages/+Layout.ts b/pages/+Layout.ts index 3f849de0..643e374b 100644 --- a/pages/+Layout.ts +++ b/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"; diff --git a/pages/+Page.mdx b/pages/+Page.mdx index f38c4757..06e9efb4 100644 --- a/pages/+Page.mdx +++ b/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"; - - - v2{" "} - {macrostratInstance} - - + Macrostrat's main map interface showing a harmonized view of the Earth's crust diff --git a/pages/dev/xdd-extractions/+Page.ts b/pages/dev/xdd-extractions/+Page.ts index 790c6790..6dc1b701 100644 --- a/pages/dev/xdd-extractions/+Page.ts +++ b/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); diff --git a/src/components/icon.module.sass b/src/components/icon.module.sass index 66233b08..0256f442 100644 --- a/src/components/icon.module.sass +++ b/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 \ No newline at end of file + 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 diff --git a/src/components/navigation/PageBreadcrumbs.ts b/src/components/navigation/PageBreadcrumbs.ts index 52193d46..d4616990 100644 --- a/src/components/navigation/PageBreadcrumbs.ts +++ b/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 diff --git a/src/components/navigation/breadcrumbs.module.sass b/src/components/navigation/breadcrumbs.module.sass index 84775e5c..765127ca 100644 --- a/src/components/navigation/breadcrumbs.module.sass +++ b/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 diff --git a/src/components/page-header.ts b/src/components/page-header.ts index 13f5f72f..01a2d3e0 100644 --- a/src/components/page-header.ts +++ b/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, ]); }