@canopy-iiif/app 1.5.14 → 1.5.16

package/lib/build/mdx.js

@@ -11,6 +11,7 @@ const {
   CACHE_DIR,
   ensureDirSync,
   withBase,
+  readSiteMetadata,
 } = require("../common");
 let remarkGfm = null;
 try {
@@ -1043,10 +1044,12 @@ async function compileMdxFile(filePath, outPath, Layout, extraProps = {}) {
     : contentNode;
   const withApp = React.createElement(app.App, null, withLayout);
   const PageContext = getPageContext();
+  const siteMeta = readSiteMetadata();
   const contextValue = {
     navigation:
       extraProps && extraProps.navigation ? extraProps.navigation : null,
     page: extraProps && extraProps.page ? extraProps.page : null,
+    site: siteMeta ? {...siteMeta} : null,
   };
   const withContext = PageContext
     ? React.createElement(PageContext.Provider, {value: contextValue}, withApp)

package/lib/common.js

@@ -1,6 +1,7 @@
 const fs = require('fs');
 const fsp = fs.promises;
 const path = require('path');
+const yaml = require('js-yaml');
 const { resolveCanopyConfigPath } = require('./config-path');
 
 const CONTENT_DIR = path.resolve('content');
@@ -13,6 +14,8 @@ const { readBasePath, withBasePath } = require('./base-path');
 const BASE_PATH = readBasePath();
 let cachedAppearance = null;
 let cachedAccent = null;
+let cachedSiteMetadata = null;
+const DEFAULT_SITE_TITLE = 'Site title';
 
 function resolveThemeAppearance() {
   if (cachedAppearance) return cachedAppearance;
@@ -47,17 +50,43 @@ function resolveThemeAccent() {
 
 function readYamlConfigBaseUrl() {
   try {
-    const y = require('js-yaml');
     const p = resolveCanopyConfigPath();
     if (!fs.existsSync(p)) return '';
     const raw = fs.readFileSync(p, 'utf8');
-    const data = y.load(raw) || {};
+    const data = yaml.load(raw) || {};
     const site = data && data.site;
     const url = site && site.baseUrl ? String(site.baseUrl) : '';
     return url;
   } catch (_) { return ''; }
 }
 
+function readSiteMetadata() {
+  if (cachedSiteMetadata) return cachedSiteMetadata;
+  cachedSiteMetadata = { title: DEFAULT_SITE_TITLE };
+  try {
+    const cfgPath = resolveCanopyConfigPath();
+    if (!fs.existsSync(cfgPath)) return cachedSiteMetadata;
+    const raw = fs.readFileSync(cfgPath, 'utf8');
+    const data = yaml.load(raw) || {};
+    const directTitle = data && typeof data.title === 'string' ? data.title.trim() : '';
+    const nestedTitle =
+      data && data.site && typeof data.site.title === 'string'
+        ? data.site.title.trim()
+        : '';
+    const resolved = directTitle || nestedTitle || DEFAULT_SITE_TITLE;
+    cachedSiteMetadata = { title: resolved };
+  } catch (_) {}
+  return cachedSiteMetadata;
+}
+
+function getSiteTitle() {
+  const site = readSiteMetadata();
+  if (site && typeof site.title === 'string' && site.title.trim()) {
+    return site.title.trim();
+  }
+  return DEFAULT_SITE_TITLE;
+}
+
 // Determine the absolute site origin (scheme + host[:port])
 // Priority:
 // 1) CANOPY_BASE_URL env
@@ -224,4 +253,7 @@ module.exports = {
   applyBaseToHtml,
   rootRelativeHref,
   canopyBodyClassForType,
+  readSiteMetadata,
+  getSiteTitle,
+  DEFAULT_SITE_TITLE,
 };

package/lib/head.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const { withBase, rootRelativeHref, absoluteUrl } = require('./common');
+const { withBase, rootRelativeHref, absoluteUrl, getSiteTitle } = require('./common');
 const { getPageContext } = require('./page-context');
 
 const DEFAULT_STYLESHEET_PATH = '/styles/styles.css';
@@ -56,10 +56,16 @@ function Meta(props = {}) {
     page.title ||
     fallbackTitle;
   const pageTitle = normalizeText(rawTitle);
-  const siteTitle = normalizeText(props.siteTitle) || '';
-  const defaultTitle = siteTitle || 'Canopy IIIF';
+  const fallbackSiteTitle = normalizeText(getSiteTitle()) || '';
+  const explicitSiteTitle = normalizeText(props.siteTitle) || '';
+  const siteTitle = explicitSiteTitle || fallbackSiteTitle;
+  const defaultTitle = siteTitle || fallbackSiteTitle || 'Site title';
   const title = pageTitle ? pageTitle : defaultTitle;
-  const fullTitle = siteTitle ? (pageTitle ? `${pageTitle} | ${siteTitle}` : siteTitle) : title;
+  const fullTitle = siteTitle
+    ? pageTitle
+      ? `${pageTitle} | ${siteTitle}`
+      : siteTitle
+    : title;
   const rawDescription =
     props.description ||
     (metaFromPage && metaFromPage.description) ||
@@ -108,6 +114,35 @@ function Meta(props = {}) {
   if (description) nodes.push(React.createElement('meta', { key: 'twitter-description', name: 'twitter:description', content: description }));
   if (twitterImage) nodes.push(React.createElement('meta', { key: 'twitter-image', name: 'twitter:image', content: twitterImage }));
 
+  const slug = typeof page.slug === 'string' ? page.slug : '';
+  const relPath = typeof page.relativePath === 'string' ? page.relativePath : '';
+  const hrefRaw = page && typeof page.href === 'string' ? page.href : '';
+  const urlRaw = page && typeof page.url === 'string' ? page.url : '';
+  const normalizedHref = hrefRaw ? rootRelativeHref(hrefRaw) : '';
+  const normalizedUrl = urlRaw ? rootRelativeHref(urlRaw) : '';
+  const isHomepage = !!(
+    (slug === '' && page && page.isIndex) ||
+    relPath === 'index.mdx' ||
+    normalizedHref === '/' ||
+    normalizedUrl === '/'
+  );
+  const siteTitleForJsonLd = siteTitle || fallbackSiteTitle || 'Site title';
+  if (isHomepage && siteTitleForJsonLd) {
+    const ldPayload = {
+      '@context': 'https://schema.org',
+      '@type': 'WebSite',
+      name: siteTitleForJsonLd,
+      url: absoluteUrl('/'),
+    };
+    nodes.push(
+      React.createElement('script', {
+        key: 'canopy-website-json-ld',
+        type: 'application/ld+json',
+        dangerouslySetInnerHTML: { __html: JSON.stringify(ldPayload) },
+      })
+    );
+  }
+
   return React.createElement(React.Fragment, null, nodes);
 }
 

package/lib/page-context.js

@@ -13,7 +13,7 @@ function getGlobalRoot() {
 function getPageContext() {
   const root = getGlobalRoot();
   if (root[CONTEXT_KEY]) return root[CONTEXT_KEY];
-  const ctx = React.createContext({ navigation: null, page: null });
+  const ctx = React.createContext({ navigation: null, page: null, site: null });
   root[CONTEXT_KEY] = ctx;
   return ctx;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "1.5.14",
+  "version": "1.5.16",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",

package/ui/dist/index.mjs

@@ -809,7 +809,7 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
       "data-expanded": allowToggle ? defaultExpanded ? "true" : "false" : void 0,
       "data-default-expanded": allowToggle && defaultExpanded ? "true" : void 0
     },
-    /* @__PURE__ */ React14.createElement("div", { className: "canopy-nav-tree__row" }, /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React14.createElement("div", { className: "canopy-nav-tree__row" }, /* @__PURE__ */ React14.createElement("div", { className: "canopy-nav-tree__link-wrapper" }, /* @__PURE__ */ React14.createElement(
       Tag,
       {
         className: classes.join(" "),
@@ -819,7 +819,7 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
       },
       node.title || node.slug,
       isRoadmap ? /* @__PURE__ */ React14.createElement("span", { className: "canopy-nav-tree__badge" }, "Roadmap") : null
-    ), allowToggle ? /* @__PURE__ */ React14.createElement(
+    )), allowToggle ? /* @__PURE__ */ React14.createElement(
       "button",
       {
         type: "button",
@@ -839,7 +839,14 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
           strokeWidth: "1.5",
           className: "canopy-nav-tree__toggle-icon"
         },
-        /* @__PURE__ */ React14.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 9l7 7 7-7" })
+        /* @__PURE__ */ React14.createElement(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M5 9l7 7 7-7"
+          }
+        )
       ),
       /* @__PURE__ */ React14.createElement("span", { className: "sr-only" }, toggleLabel)
     ) : null),
@@ -884,7 +891,14 @@ function NavigationTree({
       ...rest
     },
     heading ? /* @__PURE__ */ React14.createElement("div", { className: headingClassName }, heading) : null,
-    /* @__PURE__ */ React14.createElement(NavigationTreeList, { nodes, depth: includeRoot ? -1 : 0, parentKey })
+    /* @__PURE__ */ React14.createElement(
+      NavigationTreeList,
+      {
+        nodes,
+        depth: includeRoot ? -1 : 0,
+        parentKey
+      }
+    )
   );
 }
 
@@ -1197,7 +1211,7 @@ function getSharedRoot() {
 function getSafePageContext() {
   const root = getSharedRoot();
   if (root && root[CONTEXT_KEY]) return root[CONTEXT_KEY];
-  const ctx = React15.createContext({ navigation: null, page: null });
+  const ctx = React15.createContext({ navigation: null, page: null, site: null });
   if (root) root[CONTEXT_KEY] = ctx;
   return ctx;
 }
@@ -1264,13 +1278,18 @@ function CanopyHeader(props = {}) {
     searchHotkey = "mod+k",
     searchPlaceholder = "Search\u2026",
     brandHref = "/",
-    title = "Canopy IIIF",
+    title: titleProp,
     logo: SiteLogo
   } = props;
   const navLinks = ensureArray(navLinksProp);
   const PageContext = getSafePageContext();
   const context = React15.useContext(PageContext);
   const contextNavigation = context && context.navigation ? context.navigation : null;
+  const contextSite = context && context.site ? context.site : null;
+  const contextSiteTitle = contextSite && typeof contextSite.title === "string" ? contextSite.title.trim() : "";
+  const defaultHeaderTitle = contextSiteTitle || "Site title";
+  const normalizedTitleProp = typeof titleProp === "string" ? titleProp.trim() : "";
+  const resolvedTitle = normalizedTitleProp || defaultHeaderTitle;
   const sectionNavigation = contextNavigation && contextNavigation.root ? contextNavigation : null;
   const navigationRoots = contextNavigation && contextNavigation.allRoots ? contextNavigation.allRoots : null;
   const sectionHeading = sectionNavigation && sectionNavigation.title || (sectionNavigation && sectionNavigation.root ? sectionNavigation.root.title : "");
@@ -1299,7 +1318,7 @@ function CanopyHeader(props = {}) {
     /* @__PURE__ */ React15.createElement("div", { className: "canopy-header__brand" }, /* @__PURE__ */ React15.createElement(
       CanopyBrand,
       {
-        label: title,
+        label: resolvedTitle,
         href: brandHref,
         className: "canopy-header__brand-link",
         Logo: SiteLogo
@@ -1394,7 +1413,7 @@ function CanopyHeader(props = {}) {
       id: "canopy-modal-nav",
       variant: "nav",
       labelledBy: "canopy-modal-nav-label",
-      label: title,
+      label: resolvedTitle,
       logo: SiteLogo,
       href: brandHref,
       closeLabel: "Close navigation",
@@ -1489,7 +1508,7 @@ function CanopyHeader(props = {}) {
       id: "canopy-modal-search",
       variant: "search",
       labelledBy: "canopy-modal-search-label",
-      label: title,
+      label: resolvedTitle,
       logo: SiteLogo,
       href: brandHref,
       closeLabel: "Close search",