feat: new theme (#38)

jimniels · Apr 13, 2022 · f2a08f6 · f2a08f6
1 parent 40a889d
commit f2a08f6
Show file tree

Hide file tree

Showing 10 changed files with 613 additions and 626 deletions.
diff --git a/src/client/404.html.tmpl.js b/src/client/404.html.tmpl.js
@@ -3,13 +3,17 @@ import { html } from "../server/utils.js";
 
 export default function Page404(site) {
   const title = "404: Page Not Found";
-  return Page({
-    site,
-    page: {
-      title,
-      path: "/404/",
-      layout: "Page",
-      contents: html`
+  return Page(
+    {
+      site,
+      page: {
+        title,
+        path: "/404/",
+        layout: "Page",
+      },
+    },
+    html`
+      <main class="copy wrapper">
         <h1>${title}</h1>
 
         <p>
@@ -31,7 +35,7 @@ export default function Page404(site) {
               alt="Picture of a pie I made and posted on Instagram"
           /></a>
         </p>
-      `,
-    },
-  });
+      </main>
+    `
+  );
 }
diff --git a/src/client/about/index.html.tmpl.js b/src/client/about/index.html.tmpl.js
@@ -1,4 +1,4 @@
-import { PageCustom } from "../../server/Layouts.js";
+import { Page } from "../../server/Layouts.js";
 import { html } from "../../server/utils.js";
 
 const page = {
@@ -37,86 +37,84 @@ export default function About(site) {
     (domain) => site.outboundLinksByDomain[domain].length === 1
   );
 
-  return PageCustom(
+  return Page(
     { site, page },
-    // prettier-ignorez
-    html` <div class="copy">
-        <h1>About</h1>
+    html` <h1>About</h1>
 
-        <p>Hello, I’m <a href="https://www.jim-nielsen.com">Jim Nielsen</a>.</p>
+      <p>Hello, I’m <a href="https://www.jim-nielsen.com">Jim Nielsen</a>.</p>
 
-        <p>
-          In the past, I put off writing because I was unable to do my best—“if
-          you can’t do something right, don’t do it at all”.
-        </p>
-        <p>
-          But lately I’ve found myself regretting not writing down at least
-          <em>something</em>.
-        </p>
+      <p>
+        In the past, I put off writing because I was unable to do my best—“if
+        you can’t do something right, don’t do it at all”.
+      </p>
+      <p>
+        But lately I’ve found myself regretting not writing down at least
+        <em>something</em>.
+      </p>
 
-        <p>
-          So my current posture towards blogging is: something is better than
-          nothing.
-        </p>
+      <p>
+        So my current posture towards blogging is: something is better than
+        nothing.
+      </p>
 
-        <p>
-          <img
-            src="https://cdn.jim-nielsen.com/shared/jim-nielsen-portrait.jpg"
-            width="300"
-            height="300"
-            alt="Portrait of Jim Nielsen"
-          />
-        </p>
+      <p>
+        <img
+          src="https://cdn.jim-nielsen.com/shared/jim-nielsen-portrait.jpg"
+          width="300"
+          height="300"
+          alt="Portrait of Jim Nielsen"
+        />
+      </p>
 
-        <h2>Blog Links</h2>
+      <h2>Blog Links</h2>
 
-        <p>
-          I thought it would be interesting to
-          <a href="/2020/indexing-my-blogs-links/"
-            >index all the outbound links on my blog</a
-          >
-          and keep it as a running list.
-        </p>
+      <p>
+        I thought it would be interesting to
+        <a href="/2020/indexing-my-blogs-links/"
+          >index all the outbound links on my blog</a
+        >
+        and keep it as a running list.
+      </p>
 
-        ${domainsOfMoreThanOne.map(
-          (domain) => html`
-            <details>
-              <summary>
-                <img
-                  src="https://www.google.com/s2/favicons?domain=${domain}&sz=32"
-                  width="16"
-                  height="16"
-                  alt="Favicon for ${domain}"
-                />
-                <span class="domain">${domain}</span>
-                <span class="count"
-                  >${site.outboundLinksByDomain[domain].length}</span
+      ${domainsOfMoreThanOne.map(
+        (domain) => html`
+          <details>
+            <summary>
+              <img
+                src="https://www.google.com/s2/favicons?domain=${domain}&sz=32"
+                width="16"
+                height="16"
+                alt="Favicon for ${domain}"
+              />
+              <span class="domain">${domain}</span>
+              <span class="count"
+                >${site.outboundLinksByDomain[domain].length}</span
+              >
+            </summary>
+            <ol>
+              ${site.outboundLinksByDomain[domain].map(
+                (link) => html` <li><a href="${link}">${link}</a></li> `
+              )}
+            </ol>
+          </details>
+        `
+      )}
+
+      <details>
+        <summary>...all others with only one occurence</summary>
+        <ol>
+          ${domainsOfOnlyOne.map(
+            (d) => html`
+              <li>
+                <a href="${site.outboundLinksByDomain[d][0]}"
+                  >${site.outboundLinksByDomain[d][0]}</a
                 >
-              </summary>
-              <ol>
-                ${site.outboundLinksByDomain[domain].map(
-                  (link) => html` <li><a href="${link}">${link}</a></li> `
-                )}
-              </ol>
-            </details>
-          `
-        )}
+              </li>
+            `
+          )}
+        </ol>
+      </details>
 
-        <details>
-          <summary>...all others with only one occurence</summary>
-          <ol>
-            ${domainsOfOnlyOne.map(
-              (d) => html`
-                <li>
-                  <a href="${site.outboundLinksByDomain[d][0]}"
-                    >${site.outboundLinksByDomain[d][0]}</a
-                  >
-                </li>
-              `
-            )}
-          </ol>
-        </details>
-      </div>
       <style>
         details {
           border: 1px solid transparent;

diff --git a/src/client/archive/index.html.tmpl.js b/src/client/archive/index.html.tmpl.js
@@ -1,4 +1,4 @@
-import { PageCustom } from "../../server/Layouts.js";
+import { Page } from "../../server/Layouts.js";
 import { html } from "../../server/utils.js";
 
 const page = {
@@ -9,7 +9,7 @@ const page = {
 export default function Archive(site) {
   const { postsByYear } = site;
 
-  return PageCustom(
+  return Page(
     { site, page },
     html`
       <h1>Archive</h1>
@@ -46,9 +46,11 @@ export default function Archive(site) {
                 (post) => html`
                   <li>
                     <a href="${post.path}"> ${post.title} </a>
-                    <time datetime="${post.date}">
-                      ${post.date.slice(5, 10)}
-                    </time>
+                    <small
+                      ><time datetime="${post.date}">
+                        ${post.date.slice(5, 10)}
+                      </time></small
+                    >
                   </li>
                 `
               )}

diff --git a/src/client/index.html.tmpl.js b/src/client/index.html.tmpl.js
@@ -1,4 +1,4 @@
-import { PageCustom } from "../server/Layouts.js";
+import { Page } from "../server/Layouts.js";
 import { html, toDateUI } from "../server/utils.js";
 
 const page = {
@@ -14,24 +14,41 @@ export default function Index(site) {
     .sort((a, b) => (a.pageviews > b.pageviews ? -1 : 1))
     .slice(0, 5);
 
-  return PageCustom(
+  return Page(
     { site, page },
     html`
-      <h1>Posts</h1>
-
-      <h2>Latest</h2>
+      <h1>Latest Posts</h1>
       ${PostList(recent)}
       ${trending.length > 0 &&
       html`
-        <h2>Popular This Month</h2>
-        ${PostList(trending, true)}
-        <p style="margin-bottom: 2.5rem; font-size: .8rem">
-          <a
+        <h1>
+          Popular Posts This Month (<a
             href="/2020/using-netlify-analytics-to-build-list-of-popular-posts/"
-            >Stats homebrewed from Netlify Analytics</a
-          >
-        </p>
+            >According to the Data</a
+          >)
+        </h1>
+        ${PostList(trending, true)}
       `}
+      ${
+        /*
+      <h1>Praise For My Blog</h1>
+      <div class="copy">
+        <blockquote>
+          <p>
+            <a href="">Jeremy Keith</a>: “damn, do I enjoy reading [Jim’s] blog.
+            Last year alone, I ended up linking to [his] posts ten different
+            times.”
+          </p>
+        </blockquote>
+        <blockquote>
+          <p>
+            <a href="">Sara Soueidan:</a>: “I, for one, love seeing [Jim’s]
+            posts in my RSS reader.”
+          </p>
+        </blockquote>
+      </div>
+      */ ""
+      }
     `
   );
 }
@@ -43,13 +60,14 @@ function PostList(posts, showPageviews = false) {
         ({ path, title, pageviews, date }) => html`
           <li>
             <a href="${path}">${title}</a>
-            <time datetime="${date}">${toDateUI(date)}</time>
-            ${showPageviews &&
-            html`<small
-              >${pageviews > 1000
-                ? Math.round((pageviews / 1000) * 10) / 10 + "k"
-                : pageviews}</small
-            >`}
+            <small>
+              <time datetime="${date}">${toDateUI(date)}</time>
+              ${showPageviews
+                ? pageviews > 1000
+                  ? Math.round((pageviews / 1000) * 10) / 10 + "k"
+                  : pageviews
+                : ""}
+            </small>
           </li>
         `
       )}

diff --git a/src/client/tags/index.html.tmpl.js b/src/client/tags/index.html.tmpl.js
@@ -1,4 +1,4 @@
-import { PageCustom } from "../../server/Layouts.js";
+import { Page } from "../../server/Layouts.js";
 import { html, toDateUI } from "../../server/utils.js";
 
 const page = {
@@ -25,7 +25,7 @@ export default function Tags(site) {
     .filter((tag) => tag !== "rssClub");
 
   // prettier-ignore
-  return PageCustom({ site, page }, html`
+  return Page({ site, page }, html`
     <h1>Tags <small>(${tags.length})</small></h1>
     <ul class="list-2col">
       ${tags.map(
@@ -48,9 +48,11 @@ export default function Tags(site) {
         ${postsByTag[tag].map(post => html`
           <li class="post-wrapper">
             <a href="${post.path}">${post.title}</a>
-            <time class="date post-date" datetime="${post.date}">
-              ${toDateUI(post.date)}
-            </time>
+            <small>
+              <time class="date post-date" datetime="${post.date}">
+                ${toDateUI(post.date)}
+              </time>
+            </small>
           </li>
         `)}
       </ul>

diff --git a/src/client/tags/readingNotes/index.html.tmpl.js b/src/client/tags/readingNotes/index.html.tmpl.js
@@ -1,4 +1,4 @@
-import { PageCustom } from "../../../server/Layouts.js";
+import { Page } from "../../../server/Layouts.js";
 import { html } from "../../../server/utils.js";
 
 const page = {
@@ -8,7 +8,7 @@ const page = {
 
 export default function Tags(site) {
   // prettier-ignore
-  return PageCustom({ site, page }, html`
+  return Page({ site, page }, html`
     <h1>Index of All Reading Notes</h1>
 
       <style>