wip, it looks bad. May need to rethink approach for #10

2023-07-11 03:02:22 +00:00
2 changed files with 37 additions and 20 deletions
--- a/assets/styles.css
+++ b/assets/styles.css
@ -114,20 +114,34 @@ p {
  padding-right: 1em;
 }

+.nav a {
+  text-decoration: none;
+}
+
+.nav a .link-text {
+  text-decoration: underline;
+}
+
 .nav a::before {
  padding-right: 0.2em;
+  font-size: 1.5em;
+}
+
+.nav a::after {
+  padding-left: 0.2em;
+  font-size: 1.5em;
 }

 .nav .home::before {
-  content: "🏠";
+  content: "μ";
 }

 .nav .prev::before {
-  content: "⬅️";
+  content: "⇐";
 }

-.nav .next::before {
-  content: "➡️";
+.nav .next::after {
+  content: "⇒";
 }

 .footer {
--- a/htmlTemplate.js
+++ b/htmlTemplate.js
@ -1,5 +1,22 @@
 const footer = require('./htmlFooter')

+const nav = ({prev, next}) => {
+  let ul = `  <ul class="nav">
+    <li><a class="home" href=".."><span class="link-text">Journal Home</span></a></li>`
+
+  if (prev) {
+    ul += `    <li><a class="prev" href="${prev}"><span class="link-text">Previous</span></a></li>\n`
+  }
+
+  if (next) {
+    ul += `    <li><a class="next" href="${next}"><span class="link-text">Next</span></a></li>\n`
+  }
+
+  ul += `  </ul>`
+
+  return ul
+}
+
 module.exports = (title, content, data) => {
 let page = `
 <!DOCTYPE html>
@ -13,19 +30,7 @@ let page = `
  <meta name="generator" content="CMS ETL BBQ; https://tildegit.org/mycrobe/cmsetlbbq/issues/19" />
 </head>
 <body>
-  <ul class="nav">
-  <li><a class="home" href="..">Journal Home</a></li>` 
-
-if (data.prev) {
-  page += `<li><a class="prev" href="${data.prev}">Previous</a></li>`
-}
-
-if (data.next) {
-  page += `<li><a class="next" href="${data.next}">Next</a></li>`
-}
-
-page += `
-  </ul>
+${nav(data)}
  <div class="heading">
    <h1 class="title">${title}</h1>
    <ul class="tags">
@ -38,9 +43,7 @@ page += `
  <div class="content">
    ${content}
  </div>
-  <pre class="metadata-raw">
-${JSON.stringify(data, null, '  ')}
-  </pre>
+${nav(data)}
 ${footer('..')}
 </body>
 `