Add base template for 11ty and catalog pages (#1365)

justinfagnani · web-flow · commit 1ba834ed02e6 · 2022-10-14T10:10:56.000-07:00
diff --git a/packages/site-content/package.json b/packages/site-content/package.json
@@ -15,7 +15,8 @@
       "command": "eleventy --config=eleventy.config.prod.cjs",
       "files": [
         "eleventy.config.prod.cjs",
-        "site"
+        "site",
+        "../site-server/lib/templates/**/*.js"
       ],
       "output": [
         "_site"
@@ -29,14 +30,16 @@
       "files": [
         "eleventy.config.dev.cjs",
         "site",
-        "!site/assets"
+        "!site/assets",
+        "../site-server/lib/templates/**/*.js"
       ],
       "output": [
         "_dev"
       ]
     }
   },
   "dependencies": {
-    "@11ty/eleventy": "^1.0.2"
+    "@11ty/eleventy": "^1.0.2",
+    "@webcomponents/internal-site-server": "^0.0.0"
   }
 }
diff --git a/packages/site-content/site/_includes/layouts/base.11ty.cjs b/packages/site-content/site/_includes/layouts/base.11ty.cjs
@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+module.exports = {
+  async render(data) {
+    const {renderPage} = await import(
+      '@webcomponents/internal-site-server/lib/templates/base.js'
+    );
+    return renderPage(data);
+  },
+};
diff --git a/packages/site-content/site/index.html b/packages/site-content/site/index.html
@@ -1,17 +1,8 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>webcomponents.org</title>
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <wco-top-bar></wco-top-bar>
-    <h2>🚧 Under construction! 🚧</h2>
-    <script type="module" src="./js/homepage.js"></script>
-  </body>
-</html>
+---
+layout: "layouts/base.11ty.cjs"
+title: "Web Components"
+scripts:
+- "./js/homepage.js"
+---
+<wco-top-bar></wco-top-bar>
+<h2>🚧 Under construction! 🚧</h2>
diff --git a/packages/site-server/src/catalog/router.ts b/packages/site-server/src/catalog/router.ts
@@ -6,6 +6,7 @@
 
 import Router from '@koa/router';
 import {ApolloClient, InMemoryCache, gql} from '@apollo/client/core/index.js';
+import {renderPage} from '../templates/base.js';
 import {renderElement} from './element-template.js';
 
 const CATALOG_GRAPHQL_URL =
@@ -85,7 +86,7 @@ catalogRouter.get('/element/:path+', async (context) => {
     manifest: customElementsManifest,
   });
 
-  context.body = content;
+  context.body = renderPage({title: `${packageName}/${elementName}`, content});
   context.type = 'html';
   context.status = 200;
 });
diff --git a/packages/site-server/src/templates/base.ts b/packages/site-server/src/templates/base.ts
@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import {escapeHTML} from '../catalog/escape-html.js';
+
+export const renderPage = (data: {
+  scripts?: Array<string>;
+  title?: string;
+  content?: string;
+}) => {
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
+      rel="stylesheet"
+    />
+    ${(data.scripts ?? [])
+      .map((s) => `<script type="module" src="${s}"></script>`)
+      .join('\n')}
+    <style>
+      body {
+        margin: 0;
+        --mdc-typography-font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+        font-family: var(--mdc-typography-font-family);
+        font-size: 14px;
+        line-height: 1.5;
+        min-height: 100vh;
+      }
+      @media (max-width: 500px), (max-height: 500px) {
+        body {
+          max-height: 100vh;
+          overflow: auto;
+        }
+      }
+    </style>
+    <title>${escapeHTML(data.title)}</title>
+  </head>
+  <body>
+    ${data.content}
+  </body>
+</html>
+`;
+};
