∆

assets/404.html

@@ -14,18 +14,48 @@
         <img alt="Future of Coding" width="300" height="300" src="/wiki.svg">
       </a>
       <nav>
-        <a id="edit" href="https://github.com/futureofcoding/wiki/edit/main/{{path}}">
+        <a id="edit" href="https://github.com/futureofcoding/wiki/new/main/pages?filename=My-file-name.md&value=---%0Atitle:%20A%20New%20Page%0Acontributors:%20Your%20Name%0A---">
           <span>Edit This Page</span>
           <img width="14" height="13" src="/edit.svg" alt="">
         </a>
-        <a href="/">Home</a>
-        <a href="/all">List of All Pages</a>
+        <a href="/all">All Pages</a>
+        <a href="/search">Search</a>
       </nav>
     </header>
 
-    This page doesn't exist.
+    <article>
 
-    <a href="https://github.com/futureofcoding/wiki/new/master/_pages?filename=pages%2FMy-file-name.md&value=---%0Atitle:%20A%20New%20Page%0Acontributors:%20Your%20Name%0A---">Create it on GitHub</a>
+      <div>
+        <p>This page doesn't exist.</p>
+        <a id="new" href="https://github.com/futureofcoding/wiki/new/main/pages?filename=My-file-name.md&value=---%0Atitle:%20A%20New%20Page%0Acontributors:%20Your%20Name%0A---">Create it on GitHub?</a>
+      </div>
+
+      <style>
+        @media (min-width: 801px) {
+          article {
+            display: grid;
+            place-content: center;
+          }
+          article div {
+            padding: 2em;
+            margin-left: -12.5em;
+            border-radius: 1px;
+            background: #9991;
+          }
+        }
+      </style>
+
+      <script>
+        let name = window.location.pathname.slice(1);
+        ["edit", "new"].forEach((id)=> {
+          let elm = document.getElementById(id)
+          elm.href = elm.href
+            .replace("My-file-name.md", name + ".md")
+            .replace("A%20New%20Page", encodeURI(name))
+        })
+      </script>
+
+    </article>
 
   </main>
 

assets/styles.css

@@ -89,7 +89,7 @@ main {
       "aside article";
     grid-template-rows: auto 1fr; /* Pull the aside up towards the top */
     grid-template-columns: 10em minmax(0, 48em); /* Set the header/aside width explicitly, and shrink article to fit */
-    gap: var(--pad);
+    gap: 0 var(--pad);
     margin: var(--pad);
     border-radius: 3px;
   }
@@ -102,9 +102,9 @@ main {
       "article"
       "aside";
     grid-template-columns: minmax(0, 100%);
-    gap: var(--double-pad);
     width: 100%;
     padding-bottom: var(--double-pad);
+    margin-bottom: var(--double-pad);
   }
 }
 
@@ -126,6 +126,7 @@ header {
     flex-flow: row;
     justify-content: space-between;
     align-items: flex-start;
+    margin-bottom: var(--double-pad);
   }
 }
 
@@ -202,9 +203,16 @@ aside {
   gap: var(--pad);
 }
 
+@media(min-width: 801px) {
+  aside {
+    margin-top: var(--pad);
+  }
+}
+
 @media(max-width: 800px) {
   aside {
     flex-flow: row wrap;
+    margin-top: var(--double-pad);
   }
 }
 
@@ -286,7 +294,11 @@ h2 {
 }
 
 p {
-  margin: 0 0 1em;
+  margin: 0 0 1.2em;
+}
+
+p:last-child {
+  margin: 0;
 }
 
 img {

build/build.coffee

@@ -50,7 +50,7 @@ mkdir = (path)-> fs.mkdirSync path, recursive: true
 ensureDir = (path)-> mkdir(path.split("/")[0...-1].join("/")); path
 
 # Delete the file or folder at the given path, or fail silently if it doesn't exist
-rm = (path)-> try fs.rmSync path, recursive: trues
+rm = (path)-> try fs.rmSync path, recursive: true
 
 # Give us the names of all the files in a given folder, ignoring dotfiles
 readDir = (path)-> fs.readdirSync(path).filter (file)-> !file.startsWith "."
@@ -332,23 +332,31 @@ for pageName, page of pages
   page.html = "\n#{indent}<title>#{page.data.title}</title>\n" + page.html
 
 
-# BUILD THE s
+# DRAW THE REST OF THE OWL
 for pageName, page of pages
   html = layout
 
   # Replace the string {{path}} with the path to this page file — used for Edit on GitHub link
   html = html.replaceAll "{{path}}", page.sourcePath
 
-  # Replace the string {{contributors}} with the contributors section
-  html = html.replaceAll "{{contributors}}", if not page.data.contributors? then "" else
-    lis = page.data.contributors.split(",").map (c)-> li c.trim()
-    "<section><h1>Contributors</h1><ul>#{lis}</ul></section>"
-
-  # Replace the string {{backlinks}} with the backlinks section
+  aside = ""
   backlinks = ("<a href=\"#{url}\">#{title}</a>" for title, url of page.backlinks)
-  html = html.replaceAll "{{backlinks}}", if backlinks.length is 0 then "" else
-    lis = backlinks.map(li).join("")
-    "<section><h1>Backlinks</h1><ul>#{lis}</ul></section>"
+
+  if page.data.contributors? or backlinks.length
+
+    aside = "<aside>\n"
+
+    if page.data.contributors?
+      lis = page.data.contributors.split(",").map (c)-> li c.trim()
+      aside += indent + "  <section><h1>Contributors</h1><ul>#{lis}</ul></section>\n"
+
+    if page.backlinks
+      lis = backlinks.map(li).join("")
+      aside += indent + "  <section><h1>Backlinks</h1><ul>#{lis}</ul></section>\n"
+
+    aside += indent + "</aside>"
+
+  html = html.replaceAll "{{aside}}", aside
 
   # Replace the string {{page}} with the page body
   html = html.replace /\s*{{page}}/, page.html

build/layout.html

@@ -27,10 +27,7 @@
       {{page}}
     </article>
 
-    <aside>
-      {{backlinks}}
-      {{contributors}}
-    </aside>
+    {{aside}}
 
   </main>