content/issue 31 Docs pages (#117)

ProjectEvergreen · Oct 31, 2024 · b27f919 · b27f919
1 parent 2c7f766
commit b27f919
Show file tree

Hide file tree

Showing 43 changed files with 3,831 additions and 158 deletions.
diff --git a/greenwood.config.js b/greenwood.config.js
@@ -1,5 +1,39 @@
 import { greenwoodPluginCssModules } from "@greenwood/plugin-css-modules";
 import { greenwoodPluginImportRaw } from "@greenwood/plugin-import-raw";
+import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
+
+// TODO would be nice to find a better way to solve this problem
+// https://github.com/ProjectEvergreen/www.greenwoodjs.dev/issues/125
+class ActiveFrontmatterDocsTitleRestorerResource extends ResourceInterface {
+  constructor() {
+    super();
+    this.extensions = ["html"];
+    this.contentType = "text/html";
+    this.matches = ["My Blog - Active Frontmatter", "My Site - Going Further"];
+    this.replacer = "${globalThis.page.title}";
+  }
+
+  async shouldIntercept(url, request, response) {
+    return response.headers.get("Content-Type")?.indexOf(this.contentType) >= 0;
+  }
+
+  async intercept(url, request, response) {
+    let body = await response.text();
+
+    this.matches.forEach((match) => {
+      if (body.indexOf(match) > 0) {
+        const titleParts = match.split("-");
+
+        body = body.replace(
+          new RegExp(String.raw`${match}`, "g"),
+          `${titleParts[0]}- ${this.replacer}`,
+        );
+      }
+    });
+
+    return new Response(body);
+  }
+}
 
 export default {
   activeContent: true,
@@ -10,7 +44,15 @@ export default {
     plugins: ["@mapbox/rehype-prism", "rehype-slug", "rehype-autolink-headings", "remark-github"],
   },
 
-  plugins: [greenwoodPluginCssModules(), greenwoodPluginImportRaw()],
+  plugins: [
+    greenwoodPluginCssModules(),
+    greenwoodPluginImportRaw(),
+    {
+      name: "active-frontmatter-docs-title-restorer-resource",
+      type: "resource",
+      provider: (compilation) => new ActiveFrontmatterDocsTitleRestorerResource(compilation),
+    },
+  ],
 
   polyfills: {
     importAttributes: ["css", "json"],

diff --git a/src/assets/docs/graphql-playground.png b/src/assets/docs/graphql-playground.png
diff --git a/src/components/heading-box/heading-box.module.css b/src/components/heading-box/heading-box.module.css
@@ -17,4 +17,8 @@
 
 .slotted {
   margin: var(--size-4) 0 var(--size-1);
+
+  & a {
+    color: var(--color-accent);
+  }
 }
diff --git a/src/components/side-nav/side-nav.js b/src/components/side-nav/side-nav.js
@@ -29,6 +29,10 @@ export default class SideNav extends HTMLElement {
       }
     });
 
+    if (sections.length === 0) {
+      return;
+    }
+
     this.innerHTML = `
       <div class="${styles.fullMenu}" data-full>
         ${sections

diff --git a/src/components/side-nav/side-nav.module.css b/src/components/side-nav/side-nav.module.css
@@ -18,6 +18,7 @@
   padding: 0 12px;
   width: 100%;
   text-align: right;
+  color: var(--color-black);
 }
 
 .compactMenuPopoverTrigger {
@@ -60,7 +61,7 @@
     padding: 0 var(--size-2);
     min-width: 200px;
     display: inline-block;
-    box-shadow: var(--shadow-3);
+    box-shadow: var(--shadow-2);
     margin-left: -16px;
   }
 }

diff --git a/src/components/table-of-contents/table-of-contents.module.css b/src/components/table-of-contents/table-of-contents.module.css
@@ -26,7 +26,7 @@
   min-height: 150px;
   margin: 0 var(--size-2);
   border: 1px solid var(--color-gray);
-  box-shadow: var(--shadow-3);
+  box-shadow: var(--shadow-2);
   padding: var(--size-2);
 }
 
@@ -75,6 +75,7 @@
   padding: 0 12px;
   width: 100%;
   text-align: right;
+  color: var(--color-black);
 }
 
 @media (min-width: 1200px) {
@@ -83,7 +84,7 @@
     border-left: 1px solid var(--color-gray);
     border-top: 1px solid var(--color-gray);
     border-bottom: 1px solid var(--color-gray);
-    box-shadow: var(--shadow-3);
+    box-shadow: var(--shadow-2);
     padding: var(--size-2) 0 0 var(--size-7);
 
     & a,

diff --git a/src/layouts/docs.html b/src/layouts/docs.html
@@ -0,0 +1,36 @@
+<html>
+  <head>
+    <title>Greenwood - ${globalThis.page.title}</title>
+    <script
+      type="module"
+      src="../components/heading-box/heading-box.js"
+      data-gwd-opt="static"
+    ></script>
+    <script type="module" src="../components/side-nav/side-nav.js" data-gwd-opt="static"></script>
+    <script
+      type="module"
+      src="../components/table-of-contents/table-of-contents.js"
+      data-gwd-opt="static"
+    ></script>
+    <script
+      type="module"
+      src="../components/edit-on-github/edit-on-github.js"
+      data-gwd-opt="static"
+    ></script>
+    <link rel="stylesheet" href="../styles/docs.css" />
+  </head>
+
+  <body>
+    <app-side-nav
+      route="/docs/"
+      heading="Docs"
+      current-route="${globalThis.page.route}"
+    ></app-side-nav>
+    <app-toc route="${globalThis.page.route}"></app-toc>
+
+    <div class="content-outlet">
+      <content-outlet></content-outlet>
+      <app-edit-on-github route="${globalThis.page.route}"></app-edit-on-github>
+    </div>
+  </body>
+</html>
diff --git a/src/layouts/guides.html b/src/layouts/guides.html
@@ -17,158 +17,7 @@
       src="../components/edit-on-github/edit-on-github.js"
       data-gwd-opt="static"
     ></script>
-    <style>
-      body:has(#compact-menu:popover-open) {
-        overflow-y: hidden;
-      }
-
-      .page-content {
-        margin: var(--size-4) auto;
-
-        & hr {
-          margin: 0 0 var(--size-4);
-        }
-      }
-
-      .page-content .content-outlet {
-        padding: 0 var(--size-4);
-
-        & h1 {
-          font-size: var(--font-size-5);
-        }
-
-        & h2 {
-          font-size: var(--font-size-4);
-          font-family: var(--font-primary-bold);
-          font-weight: 100;
-          margin: var(--size-8) 0 0 !important;
-        }
-
-        & h2,
-        & p {
-          margin: var(--size-4) 0;
-        }
-
-        & h3,
-        & h4,
-        & h5,
-        & h6 {
-          margin: var(--size-4) 0 var(--size-1);
-        }
-
-        & ol,
-        & ul {
-          padding-left: var(--size-4);
-        }
-
-        & img {
-          width: 100%;
-        }
-
-        & h2 > a > span.icon,
-        & h3 > a > span.icon,
-        & h4 > a > span.icon {
-          vertical-align: text-top;
-        }
-
-        & iframe.stackblitz {
-          display: none;
-        }
-      }
-
-      app-edit-on-github {
-        display: block;
-        padding: var(--size-3) 0;
-        position: sticky;
-        bottom: 0;
-        text-align: right;
-        margin: var(--size-px-7) 0 var(--size-px-3) 0;
-      }
-
-      app-heading-box {
-        & .spacer {
-          display: block;
-          margin: var(--size-1);
-        }
-
-        & .question {
-          font-style: italic;
-          margin: 0 var(--size-2) 0 0;
-        }
-
-        & .answer {
-          font-family: var(--font-primary-bold);
-          font-weight: 100;
-          text-decoration: underline;
-          margin-bottom: 20px;
-          display: inline-block;
-        }
-      }
-
-      app-side-nav,
-      app-toc {
-        display: inline-block;
-        margin: 0 auto var(--size-4);
-      }
-
-      app-side-nav {
-        padding: 0 0 0 var(--size-4);
-      }
-
-      @media (min-width: 1200px) {
-        .content-outlet {
-          display: inline-block;
-          width: 45%;
-          font-size: var(--font-size-1);
-        }
-
-        app-edit-on-github {
-          position: fixed;
-          bottom: var(--size-10);
-          right: var(--size-6);
-        }
-
-        app-side-nav {
-          display: inline-block;
-          width: 20%;
-          min-width: 25%;
-          vertical-align: top;
-          padding: var(--size-4) 0 0 var(--size-fluid-5);
-          background-color: var(--color-gray);
-          border: 1px dotted var(--color-prism-bg);
-          border-radius: 0 var(--radius-2) var(--radius-2) 0;
-        }
-
-        app-toc {
-          float: right;
-          display: inline-block;
-          width: 20%;
-          position: sticky;
-          top: var(--size-4);
-          margin: 0 var(--size-1) 0 0;
-        }
-      }
-
-      @media (min-width: 768px) {
-        .page-content {
-          & iframe.stackblitz {
-            width: 100%;
-            height: 800px;
-            display: block;
-          }
-        }
-      }
-
-      @media (min-width: 1440px) {
-        .page-content .content-outlet {
-          width: 54%;
-        }
-
-        app-side-nav {
-          padding: var(--size-4) var(--size-1) 0 var(--size-fluid-6);
-        }
-      }
-    </style>
+    <link rel="stylesheet" href="../styles/docs.css" />
   </head>
 
   <body>