Adds "Under Construction" banner to each page.

This clearly denotes each page as currently being developed.

Warning icon courtesy of Google Fonts: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:warning:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=warning.

docs/components/markdown/BUILD.bazel

@@ -14,6 +14,7 @@ ts_project(
     srcs = ["markdown.tsx"],
     deps = [
         "//docs/components/layout:layout_prerender",
+        "//docs/components/under_construction_banner:under_construction_banner_prerender",
         "//docs/markdown:markdown_page",
         "//:node_modules/@rules_prerender/preact",
         "//:node_modules/preact",

docs/components/markdown/markdown.css

@@ -3,6 +3,10 @@
     margin: 1rem auto;
 }
 
+#banner {
+    margin-bottom: 1rem;
+}
+
 #md {
     --rp-markdown--box-shadow-size: 5px;
 

docs/components/markdown/markdown.tsx

@@ -4,6 +4,7 @@ import { type VNode } from 'preact';
 import { Layout } from '../layout/layout.js';
 import { type Route } from '../../routing.mjs';
 import { MarkdownPage } from '../../markdown/markdown_page.mjs';
+import { UnderConstructionBanner } from '../under_construction_banner/under_construction_banner_prerender.js';
 
 /**
  * Renders a docs page based on the given runfiles path to the markdown file.
@@ -13,10 +14,16 @@ import { MarkdownPage } from '../../markdown/markdown_page.mjs';
  *     forest which this layout is currently rendering.
  * @param routes Routes to render page navigation with.
  */
-export function Markdown({ page, currentRoute, routes }: {
+export function Markdown({
+    page,
+    currentRoute,
+    routes,
+    underConstruction = true,
+}: {
     page: MarkdownPage,
     currentRoute: Route,
     routes: Route[],
+    underConstruction?: boolean,
 }): VNode {
     return <Layout
         pageTitle={page.metadata.title}
@@ -28,6 +35,10 @@ export function Markdown({ page, currentRoute, routes }: {
             <Template shadowrootmode="open">
                 {inlineStyle('./markdown.css', import.meta)}
 
+                {underConstruction
+                    ? <UnderConstructionBanner id="banner" />
+                    : undefined}
+
                 <div id="md" dangerouslySetInnerHTML={{
                     __html: page.html.getHtmlAsString(),
                 }}></div>

docs/components/under_construction/BUILD.bazel

@@ -13,6 +13,7 @@ ts_project(
     srcs = ["under_construction.tsx"],
     deps = [
         "//docs/components/layout:layout_prerender",
+        "//docs/components/under_construction_banner:under_construction_banner_prerender",
         "//:node_modules/@rules_prerender/preact",
         "//:node_modules/preact",
         "//:prerender_components/@rules_prerender/declarative_shadow_dom_prerender",

docs/components/under_construction/under_construction.css

@@ -1,3 +1,3 @@
-h2 {
-    text-align: center;
+:host {
+    margin-top: 1rem;
 }

docs/components/under_construction/under_construction.tsx

@@ -3,6 +3,7 @@ import { inlineStyle } from '@rules_prerender/preact';
 import { VNode } from 'preact';
 import { Layout } from '../layout/layout.js';
 import { type Route } from '../../routing.mjs';
+import { UnderConstructionBanner } from '../under_construction_banner/under_construction_banner_prerender.js';
 
 /** Renders a "under construction" placeholder page. */
 export function UnderConstruction({
@@ -24,7 +25,7 @@ export function UnderConstruction({
     >
         <div>
             <Template shadowrootmode="open">
-                <h2>This page is under construction.</h2>
+                <UnderConstructionBanner id="banner" />
 
                 <p>
                     Please check back later for this content. Alternatively, you

docs/components/under_construction_banner/BUILD.bazel

@@ -0,0 +1,25 @@
+load("//tools/typescript:defs.bzl", "ts_project")
+load("//:index.bzl", "css_library", "prerender_component")
+
+prerender_component(
+    name = "under_construction_banner",
+    prerender = ":prerender",
+    styles = ":styles",
+    visibility = ["//docs:__subpackages__"],
+)
+
+ts_project(
+    name = "prerender",
+    srcs = ["under_construction_banner_prerender.tsx"],
+    data = ["warning.svg"],
+    deps = [
+        "//:node_modules/@rules_prerender/preact",
+        "//:node_modules/preact",
+        "//:prerender_components/@rules_prerender/declarative_shadow_dom_prerender",
+    ],
+)
+
+css_library(
+    name = "styles",
+    srcs = ["under_construction_banner.css"],
+)

docs/components/under_construction_banner/under_construction_banner.css

@@ -0,0 +1,15 @@
+:host {
+    background-color: khaki;
+    padding: 1rem;
+    font-size: 1.25rem;
+    border-radius: 15px;
+}
+
+#warning {
+    display: inline-block;
+    margin-right: 2px;
+}
+
+#warning svg {
+    vertical-align: bottom;
+}

docs/components/under_construction_banner/under_construction_banner_prerender.tsx

@@ -0,0 +1,28 @@
+import { Template } from '@rules_prerender/declarative_shadow_dom/preact.mjs';
+import { inlineStyle, InlinedSvg } from '@rules_prerender/preact';
+import { VNode } from 'preact';
+import { JSX } from 'preact/jsx-runtime';
+
+/**
+ * Renders a banner informing the user that the current page is still under
+ * construction.
+ */
+export function UnderConstructionBanner(attrs: JSX.IntrinsicElements['aside']):
+        VNode {
+    return <aside {...attrs}>
+        <Template shadowrootmode="open">
+            {inlineStyle('./under_construction_banner.css', import.meta)}
+
+            <InlinedSvg
+                src="./warning.svg"
+                importMeta={import.meta}
+                id="warning"
+            />
+
+            <span>
+                This page is under construction. Content may be missing or
+                inaccurate.
+            </span>
+        </Template>
+    </aside>;
+}

docs/www/BUILD.bazel

@@ -20,6 +20,7 @@ ts_project(
     deps = [
         "//docs:routing",
         "//docs/components/layout:layout_prerender",
+        "//docs/components/under_construction_banner:under_construction_banner_prerender",
         "//:node_modules/@rules_prerender/preact",
         "//:node_modules/preact",
     ],
@@ -46,5 +47,5 @@ jasmine_node_test(
 
 css_library(
     name = "styles",
-    srcs = ["index.css"],
+    srcs = ["index.css", "index_global.css"],
 )

docs/www/index.css

@@ -1,4 +1,3 @@
-/* Title is `rules_prerender`, so it should be fixed-width as code. */
-body > header::part(title) {
-    font-family: monospace;
+#banner {
+    margin-top: 1rem;
 }

docs/www/index.tsx

@@ -1,6 +1,8 @@
+import { Template } from '@rules_prerender/declarative_shadow_dom/preact.mjs';
 import { inlineStyle } from '@rules_prerender/preact';
 import { VNode } from 'preact';
 import { Layout } from '../components/layout/layout.js';
+import { UnderConstructionBanner } from '../components/under_construction_banner/under_construction_banner_prerender.js';
 import { type Route } from '../routing.mjs';
 
 /** Renders the root index page of the docs site. */
@@ -11,10 +13,18 @@ export function IndexPage({ currentRoute, routes }: {
     return <Layout
         pageTitle="Documentation Home"
         headerTitle="rules_prerender"
-        headChildren={inlineStyle('./index.css', import.meta)}
+        headChildren={inlineStyle('./index_global.css', import.meta)}
         currentRoute={currentRoute}
         routes={routes}
     >
-        <h2>Hello, World!</h2>
+        <div>
+            <Template shadowrootmode="open">
+                {inlineStyle('./index.css', import.meta)}
+
+                <UnderConstructionBanner id="banner" />
+
+                <h2>Hello, World!</h2>
+            </Template>
+        </div>
     </Layout>;
 }

docs/www/index_global.css

@@ -0,0 +1,4 @@
+/* Title is `rules_prerender`, so it should be fixed-width as code. */
+body > header::part(title) {
+    font-family: monospace;
+}

docs/www/not_found/BUILD.bazel

@@ -14,6 +14,7 @@ ts_project(
     srcs = ["not_found.tsx"],
     deps = [
         "//docs/components/layout:layout_prerender",
+        "//docs/components/under_construction_banner:under_construction_banner_prerender",
         "//:node_modules/@rules_prerender/preact",
         "//:node_modules/preact",
         "//:prerender_components/@rules_prerender/declarative_shadow_dom_prerender",

docs/www/not_found/not_found.css

@@ -1,3 +1,7 @@
+#banner {
+    margin-top: 1rem;
+}
+
 h2 {
     text-align: center;
 }

docs/www/not_found/not_found.tsx

@@ -2,6 +2,7 @@ import { Template } from '@rules_prerender/declarative_shadow_dom/preact.mjs';
 import { inlineStyle } from '@rules_prerender/preact';
 import { VNode } from 'preact';
 import { Layout } from '../../components/layout/layout.js';
+import { UnderConstructionBanner } from '../../components/under_construction_banner/under_construction_banner_prerender.js';
 import { type Route } from '../../routing.mjs';
 
 /** Renders a 404 Not Found page. */
@@ -16,6 +17,8 @@ export function NotFound({ currentRoute, routes }: {
     >
         <div>
             <Template shadowrootmode="open">
+                <UnderConstructionBanner id="banner" />
+
                 <h2>Not Found</h2>
 
                 <p>