@coralreefventures/site 0.2.0 → 0.4.0

package/README.md

@@ -35,6 +35,8 @@ export const site = createSite({
     { label: "Sign in", href: "https://app.streamlane.app", kind: "link", hideBelow: "md" },
     { label: "Start free", href: "/pricing/", kind: "primary" },
   ],
+  // Optional: something in the bar that is not a link, such as a color-scheme control.
+  headerTools: <SchemeControl />,
   footer: {
     maker: <>Streamlane · made by <a href="https://coralreefventures.com/">Coral Reef Ventures</a> · source on <a href="...">GitHub</a></>,
     links: [{ label: "Docs", href: "/docs/" }, { label: "Changelog", href: "/changelog/" } /* ... */],
@@ -65,6 +67,12 @@ const PricingPage = () => (
 );
 ```
 
+`headerTools` (optional, since 0.3.0) is for something in the header that is not a link, such as a color-scheme
+control. It renders in the actions group after the actions and before the folded menu's button, vertically centered in
+the 64 px bar, at every width: never hidden below a breakpoint and never copied into the folded menu. The header stays a
+server component; the element is the product's own, and may be one of its client components. Without it, the header's
+markup is what it was before the field existed, and a test holds that.
+
 `active` is typed to the config's nav keys. The root layout takes `site.rootMetadata()` and `site.rootViewport()`;
 `app/robots.ts` returns `site.robots()`, `app/sitemap.ts` returns `site.sitemap()` (with the docs pages added, for a
 site that has them); and `app/og/[...card]/route.tsx` keeps its two literals and takes the rest:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralreefventures/site",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "The shell a Coral Reef public site is built in: header, footer, sections, the social-card builder and the metadata helpers, as server components, parametrized by one SiteConfig.",
   "license": "MIT",
   "type": "module",

package/src/config.ts

@@ -44,6 +44,14 @@ export type SiteConfig<Key extends string = string> = {
   lockup: ReactNode;
   /** The header's actions, in order. */
   actions: readonly HeaderAction[];
+  /**
+   * Something in the header that is not a link, such as a color-scheme control: rendered in the actions group after
+   * the actions and before the folded menu's button, vertically centered in the bar, at every width. It is never
+   * hidden below a breakpoint and never copied into the folded menu. The header stays a server component, so this is
+   * the product's own element (a client component of the product's is fine; the shell imports none). Absent, the
+   * header renders exactly as it did without it.
+   */
+  headerTools?: ReactNode;
   footer: {
     /** The footer's first line: who makes the product and where its source is. */
     maker: ReactNode;

package/src/shell/SiteHeader.module.css

@@ -82,6 +82,13 @@
   }
 }
 
+/* The site's header tools (a color-scheme control, say): in the bar at every width, centered on its line. */
+.tools {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+
 /* An action that leaves the bar on narrow screens; the folded menu lists it instead. */
 @media (max-width: 62em) {
   .actions [data-hide-below="md"] {

package/src/shell/SiteHeader.tsx

@@ -15,7 +15,7 @@ const action = ({ label, href, kind, hideBelow }: HeaderAction) => (
 );
 
 /**
- * The header: lockup, the sections, and the actions. A server component with plain links, so a page that ships no
+ * The header: lockup, the sections, the actions, and the site's header tools if it has any. A server component with plain links, so a page that ships no
  * client code can carry it; below the md breakpoint the sections fold into a <details> menu, which needs no script,
  * and any action hidden at some width is listed there too.
  */
@@ -36,6 +36,7 @@ export const SiteHeader = <Key extends string>({
       </nav>
       <div className={classes.actions}>
         {site.actions.map(action)}
+        {site.headerTools == null ? null : <div className={classes.tools}>{site.headerTools}</div>}
         <details className={classes.menu}>
           <summary className={classes.menuButton} aria-label="Menu">
             <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">