fix: More thoughts generation QoL updates

assets/styles/styles.css

@@ -29,13 +29,14 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Fredoka One", cursive;
+  font-family: "Fredoka One", sans-serif;
   letter-spacing: 0.1em;
 }
 
 p,
 ol,
-ul {
+ul,
+blockquote {
   line-height: 1.5em;
   padding-bottom: 1em;
   /* letter-spacing: 0.05em; */
@@ -99,7 +100,7 @@ nav a:hover {
 }
 
 nav ul {
-  font-family: "Fredoka One", cursive;
+  font-family: "Fredoka One", sans-serif;
   letter-spacing: 0.1em;
   margin-top: 20px;
 }
@@ -177,7 +178,7 @@ main {
 }
 
 main > p {
-  font-family: "Fredoka One", cursive;
+  font-family: "Fredoka One", sans-serif;
   letter-spacing: 0.1em;
   font-size: 1.2em;
   text-align: center;
@@ -216,6 +217,22 @@ main.area {
   max-width: 100%;
 }
 
+.thoughts.details {
+  font-size: 1em;
+  align-items: center;
+}
+
+.thoughts.details p {
+  padding-top: 0;
+  margin-right: 10px;
+  padding-bottom: 10px;
+}
+
+.thoughts.details .button {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
 @media only screen and (max-width: 600px) {
   .details {
     flex-wrap: nowrap;
@@ -511,14 +528,36 @@ em {
   text-transform: none;
 }
 
+.article section.area h3,
+.article section.area h4,
+.article section.area h5,
+.article section.area h6 {
+  font-family: "Lato", sans-serif;
+  font-weight: normal;
+}
+
+.article section.area h3 {
+  font-size: 1.2em;
+}
+.article section.area h4 {
+  font-size: 1.1em;
+}
+.article section.area h5 {
+  font-size: 1.05em;
+}
+.article section.area h6 {
+  font-size: 1em;
+}
+
 .article section.area p {
   text-align: justify;
 }
 
 .article section.area p,
 .article section.area img,
 .article section.area ol,
-.article section.area ul {
+.article section.area ul,
+.article section.area blockquote {
   margin-left: 10px;
 }
 

nodemon.json

@@ -6,5 +6,5 @@
     "thoughts"
   ],
   "ext": "html,css,md",
-  "exec": "npm run build:dev"
+  "exec": "rm -rf public/ && npm run build:dev"
 }

pages/thoughts.html

@@ -8,14 +8,16 @@
 
     <main class="thoughts">
       <p>A peak inside my brain you ask? Reader, beware...</p>
+      <!--START_REP-->
       <section class="area">
         <div class="header-details">
-          <h3>{title0}</h3>
-          <p class="tag">{date0}</p>
+          <h3>{title}</h3>
+          <p class="tag">{date}</p>
         </div>
-        {body0}
-        <a class="button" href="/thoughts/{link0}">Read the rest</a>
+        {body}
+        <a class="button" href="/thoughts/{link}">Read more</a>
       </section>
+      <!--END_REP-->
     </main>
 
     {footer.html}

scripts/generateThoughts.ts

@@ -35,6 +35,7 @@ const articlesGenerated: Array<{
   link: string;
   body: string;
   date: string;
+  dateNum: number;
 }> = [];
 
 articles.forEach((article) => {
@@ -44,7 +45,8 @@ articles.forEach((article) => {
   let [datestring, titleWithDash] = articleWithoutFolder
     .replace(".html", "")
     .split("_");
-  const date = dateFormat(new Date(datestring), "do LLL, u");
+  const dateObj = new Date(datestring);
+  const date = dateFormat(dateObj, "do LLL, u");
   const title = titleWithDash.replace(/-/g, " ");
   const body = mdConverter.makeHtml(fs.readFileSync(article, "utf8"));
 
@@ -73,6 +75,7 @@ articles.forEach((article) => {
     link: `${datestring}_${titleWithDash}`,
     title,
     date,
+    dateNum: dateObj.valueOf(),
     body: `${splitBody[0]}</p>${splitBody[1]}</p>`,
   });
 });
@@ -82,14 +85,36 @@ console.log(`Generated ${articlesGenerated.length} articles`);
 console.log("Updating thoughts page proper");
 let thoughtsPageContents = fs.readFileSync("./public/thoughts.html", "utf8");
 
+const startRepPos = thoughtsPageContents.indexOf("<!--START_REP-->") + 16; // +16 for length of comment tag
+const endRepPos = thoughtsPageContents.indexOf("<!--END_REP-->");
+
+const repeatableBlock = thoughtsPageContents.substr(
+  startRepPos,
+  endRepPos - startRepPos
+);
+
+let blockToPaste = "";
+
+articlesGenerated.sort((a, b) => b.dateNum - a.dateNum); // most-recent first
+
 for (let i = 0; i < Math.min(2, articlesGenerated.length); i++) {
-  thoughtsPageContents = thoughtsPageContents
-    .replace(`{title${i}}`, articlesGenerated[i].title)
-    .replace(`{date${i}}`, articlesGenerated[i].date)
-    .replace(`{body${i}}`, articlesGenerated[i].body)
-    .replace(`{link${i}}`, articlesGenerated[i].link);
+  blockToPaste =
+    blockToPaste +
+    `${repeatableBlock}`
+      .replace(`{title}`, articlesGenerated[i].title)
+      .replace(`{date}`, articlesGenerated[i].date)
+      .replace(`{body}`, articlesGenerated[i].body)
+      .replace(`{link}`, articlesGenerated[i].link);
 }
 
+thoughtsPageContents =
+  `${thoughtsPageContents}`.substr(0, startRepPos) +
+  blockToPaste +
+  `${thoughtsPageContents}`.substr(
+    endRepPos,
+    thoughtsPageContents.length - endRepPos
+  );
+
 console.log("Updated thoughts page");
 
 fs.writeFileSync("./public/thoughts.html", thoughtsPageContents, "utf8");

thoughts/articles/2019-09-09_The-Importance-of-Monitoring-and-Alerting.md

@@ -19,6 +19,8 @@ For the purpose of this story, this is actually not important (although obviousl
 
 ## So, how did we get here?
 
+Oh, so many questions, so few graphs...
+
 ### The Service
 
 First thing's first - let's have a look at the monitoring that was in place on the service I was calling:

thoughts/template.html

@@ -16,6 +16,11 @@ <h1>{title}</h1>
       </section>
     </main>
 
+    <main class="thoughts details">
+      <p>Thanks for reading! Fancy sharing...?</p>
+      <a href="/thoughts" class="button">More thoughts</a>
+    </main>
+
     {footer.html}
   </body>
 </html>