add under construction top bar

pkmn · Nov 5, 2023 · 139d7c3 · 139d7c3
1 parent bfa3c73
commit 139d7c3
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 14 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -24,6 +24,7 @@ const edit = 'https://github.com/pkmn/ai/edit/main/src';
 interface Page {
   id?: string;
   title: string;
+  topbar?: string;
   header?: string;
   content: string;
   edit: string;
@@ -54,41 +55,46 @@ if (require.main === module) {
     fs.writeFileSync(path.join(PUBLIC, 'index.html'), html.minify(template.render(LAYOUT, {
       id: 'home',
       title: 'pkmn.ai',
-      content: `${toHTML(path.join(STATIC, 'index.dj')).replaceAll('<a', m => {
+      content: `<section>${toHTML(path.join(STATIC, 'index.dj')).replaceAll('<a', m => {
         if (first) {
           first = false;
           return m;
         }
         return '<a class="default"';
-      })}`,
+      })}</section>`,
       edit: `${edit}/static/index.dj`,
     }).replace('<a href="/">pkmn.ai</a>', 'pkmn.ai')));
 
-    render('projects', projects.page(STATIC));
+    const topbar =
+      '<div class="topbar">Under Construction: planned completion date January 2024</div>';
+    render('projects', {...projects.page(STATIC), topbar});
     render('research', research.page(STATIC));
 
     render('concepts', {
+      topbar,
       title: 'Concepts | pkmn.ai',
       header: '<h2>Concepts</h2>',
-      content: toHTML(path.join(STATIC, 'concepts', 'index.dj')),
+      content: `<section>${toHTML(path.join(STATIC, 'concepts', 'index.dj'))}</section>`,
       edit: `${edit}/static/concepts/index.dj`,
     });
     for (const title of ['Complexity', 'Engines', 'Variations']) {
       const page = title.toLowerCase();
       render(`concepts/${page}`, {
+        topbar,
         title: `Concepts — ${title} | pkmn.ai`,
         header: `<h2>${title}</h2>`,
-        content: toHTML(path.join(STATIC, 'concepts', `${page}.dj`)),
+        content: `<section>${toHTML(path.join(STATIC, 'concepts', `${page}.dj`))}</section>`,
         edit: `${edit}/static/concepts/${page}.dj`,
       });
     }
 
     for (const title of ['Glossary', 'Rules']) {
       const page = title.toLowerCase();
       render(page, {
+        topbar,
         title: `${title} | pkmn.ai`,
         header: `<h2>${title}</h2>`,
-        content: toHTML(path.join(STATIC, `${page}.dj`)),
+        content: `<section>${toHTML(path.join(STATIC, `${page}.dj`))}</section>`,
         edit: `${edit}/static/${page}.dj`,
       });
     }

diff --git a/src/static/index.css b/src/static/index.css
@@ -1,8 +1,17 @@
 body {
   font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  height: calc(100vh - 1em);
+  height: 100vh;
   display: flex;
   flex-direction: column;
+  margin: 0;
+}
+
+.topbar {
+  background-color: black;
+  color: white;
+  font-weight: normal;
+  font-style: italic;
+  line-height: 2em;
 }
 
 h1 {
@@ -105,6 +114,10 @@ a.default:active {
   color: revert;
 }
 
+section {
+  margin: 0 8px;
+}
+
 .description {
   margin: 2em 0;
 }
@@ -156,12 +169,6 @@ footer img {
   width: var(--svg);
 }
 
-#home {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 #concepts li, #research li {
   margin-bottom: 0.5em;
 }

diff --git a/src/static/layout.html.tmpl b/src/static/layout.html.tmpl
@@ -22,6 +22,7 @@
 </head>
 <body id="{{ id }}">
   <header>
+    {{{ topbar }}}
     <h1><a href="/">pkmn.ai</a></h1>
     {{{ header }}}
   </header>

diff --git a/src/static/projects.ts b/src/static/projects.ts
@@ -60,7 +60,7 @@ export function page(dir: string) {
   const split = filler.replaceAll('\n', '').split('.');
 
   const markdown = djot.renderHTML(djot.parse(filler));
-  buf.push(`<div class="description">${markdown}</div>`);
+  buf.push(`<section><div class="description">${markdown}</div></section>`);
   buf.push(
     `<nav>
       <ul>