From ab1597a28b5905787a8ce6d68474d163cce3dcf3 Mon Sep 17 00:00:00 2001
From: Michael Zhang <mail@mzhang.io>
Date: Fri, 1 Sep 2023 22:25:11 -0500
Subject: [PATCH] add utterances

---
 .../index.md                                  | 41 ++++++++++++++++++-
 src/layouts/BaseLayout.astro                  |  9 ++--
 src/pages/posts/[...slug].astro               | 20 +++++++--
 src/styles/_variables.scss                    |  3 ++
 src/styles/global.scss                        |  6 ++-
 src/styles/post.scss                          |  3 +-
 src/styles/toc.scss                           | 11 +++--
 7 files changed, 77 insertions(+), 16 deletions(-)
diff --git a/src/content/posts/2023-09-02-coping-with-refactoring/index.md b/src/content/posts/2023-09-02-coping-with-refactoring/index.md
index 12ee3f7..eeffcbe 100644
--- a/src/content/posts/2023-09-02-coping-with-refactoring/index.md
+++ b/src/content/posts/2023-09-02-coping-with-refactoring/index.md
@@ -9,4 +9,43 @@ heroAlt: ruins
 draft: true
 ---
 
-It is the inevitable nature of code to be refactored.
+It is the inevitable nature of code to be refactored. How do we make it a less
+painful process?
+
+It pains me to start a stream-of-consciousness type of article with a
+definition, but to set things straight let's be sure we're talking about the
+same thing. When I say **refactoring** I mean changing potentially large parts
+of the codebase purely for the sake of making it more "organized". For some
+definition of organized.
+
+As software developers, we usually think of refactoring as something we do in
+order to make something easier. A common example would be something like a few
+lines of code that people on your team have just been copy and pasting
+mindlessly everywhere, because to make it generic would mean that they would
+have to touch code outside of their little bubble and then reviewers get
+hesitant at the diffs and yadda yadda all kinds of problems supposedly.
+
+Now it's your turn, and you have to change something tiny in those few lines of
+code ...everywhere. Before you go in and start abstracting all of it into
+something more generic, take a breather and think for a second: is it worth it
+to refactor?
+
+If your refactor involves adding some extra helper classes or you're pulling out
+your toolbelt of design patterns, **you are creating complexity**. And in the
+software world, complexity is the real devil.
+
+Many people try to code in an "extensible" way in order to avoid refactors, with
+extravagant interfaces and inheritance patterns. But all they've created is just
+a larger mess that's harder to clean up later down the line when it eventually
+needs to be rewritten. And it _will_ eventually need to be rewritten.
+
+Let's talk about object-oriented programming. There's this bizarre
+[open-to-extension but closed-to-modification][1] principle I've observed where
+people are so resistant to changing their source code that they'd implement
+heaps of useless design patterns on top of it in order to keep their little
+classes from ever being touched.
+
+[1]: https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle
+
+If that doesn't sound insane to you, let's take a look at a case study. Suppose
+you're writing some code that takes in a request type,
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 0f04486..3220ed4 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -6,11 +6,14 @@ import "../styles/global.scss";
 import "katex/dist/katex.min.css";
 
 interface Props {
+  title?: string;
   pad?: boolean;
+  toc?: boolean;
 }
 
-const { pad } = Astro.props;
+const { title, pad, toc } = Astro.props;
 const shouldPad = pad === undefined ? true : pad;
+const hasToc = toc ?? false;
 ---
 
 <!doctype html>
@@ -18,7 +21,7 @@ const shouldPad = pad === undefined ? true : pad;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Michael Zhang</title>
+    <title>{title && `${title} - `}Michael Zhang</title>
     <slot name="head" />
   </head>
 
@@ -28,7 +31,7 @@ const shouldPad = pad === undefined ? true : pad;
 
       <div class="sep"></div>
 
-      <main class={classNames(shouldPad && "pad")}>
+      <main class={classNames(shouldPad && "pad", hasToc && "hasToc")}>
         <slot />
       </main>
     </div>
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index a1b6fd4..ab22653 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -18,7 +18,7 @@ type Props = CollectionEntry<"posts">;
 
 const post = Astro.props;
 const { Content, remarkPluginFrontmatter, headings } = await post.render();
-const { toc, heroImage: heroImagePath, heroAlt } = post.data;
+const { title, toc, heroImage: heroImagePath, heroAlt } = post.data;
 
 let heroImage;
 if (heroImagePath) {
@@ -29,19 +29,21 @@ const datestamp = post.data.date.toLocaleDateString(undefined, {
   month: "short",
   day: "numeric",
 });
+const excerpt = remarkPluginFrontmatter.excerpt.replaceAll("\n", "");
+console.log("except", excerpt);
 ---
 
-<BaseLayout pad={false}>
+<BaseLayout title={title} pad={false} toc={toc}>
   <meta slot="head" property="og:title" content={post.data.title} />
   <meta slot="head" property="og:url" content={Astro.url} />
-  <meta slot="head" property="og:description" content={remarkPluginFrontmatter.excerpt} />
+  <meta slot="head" property="og:description" content={excerpt} />
   <meta slot="head" property="og:type" content="article" />
   <meta slot="head" property="og:locale" content="en_US" />
   {heroImage && <meta slot="head" property="og:image" content={heroImage.src} />}
   {heroAlt && <meta slot="head" property="og:image:alt" content={heroAlt} />}
 
   <meta slot="head" property="keywords" content={post.data.tags.join(", ")} />
-  <meta slot="head" property="description" content={remarkPluginFrontmatter.excerpt} />
+  <meta slot="head" property="description" content={excerpt} />
   <meta slot="head" property="article:published_time" content={datestamp} />
   <meta slot="head" property="article:author" content="Michael Zhang" />
 
@@ -82,6 +84,16 @@ const datestamp = post.data.date.toLocaleDateString(undefined, {
 
       <div class="post-content" id="post-content">
         <Content />
+
+        <hr />
+
+        <script
+          src="https://utteranc.es/client.js"
+          repo="iptq/blog-comments"
+          issue-term="og:title"
+          theme="github-light"
+          crossorigin="anonymous"
+          async></script>
       </div>
     </div>
   </TocWrapper>
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index f9a9957..b09d8b3 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1 +1,4 @@
 $breakpoint: 720px;
+
+$tocWidth: 240px;
+$tocBreakpoint: $breakpoint + $tocWidth;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 1249173..503f9d7 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -98,13 +98,17 @@ pre > code {
 
 .flex-wrapper > main {
   min-width: 0;
-  max-width: 720px;
+  max-width: variables.$breakpoint;
   flex-grow: 1;
   box-sizing: border-box;
 
   &.pad {
     padding: 20px;
   }
+
+  &.hasToc {
+    max-width: variables.$tocBreakpoint;
+  }
 }
 
 @media screen and (max-width: variables.$breakpoint) {
diff --git a/src/styles/post.scss b/src/styles/post.scss
index 585869b..aeeeb5c 100644
--- a/src/styles/post.scss
+++ b/src/styles/post.scss
@@ -23,9 +23,10 @@
 }
 
 .post-container {
-  max-width: 720px;
+  max-width: variables.$breakpoint;
   display: flex;
   padding: 20px;
+  box-sizing: border-box;
 
   flex-direction: column;
   .toc-drawer {
diff --git a/src/styles/toc.scss b/src/styles/toc.scss
index adc2693..bb6fb22 100644
--- a/src/styles/toc.scss
+++ b/src/styles/toc.scss
@@ -1,6 +1,4 @@
 @use "variables";
-$tocWidth: 240px;
-$tocBreakpoint: variables.$breakpoint + $tocWidth;
 
 .toc-wrapper {
   position: relative;
@@ -13,6 +11,7 @@ $tocBreakpoint: variables.$breakpoint + $tocWidth;
 
 .toc {
   height: 100vh;
+  box-sizing: border-box;
 
   ul {
     list-style-type: none;
@@ -53,20 +52,20 @@ $tocBreakpoint: variables.$breakpoint + $tocWidth;
   }
 }
 
-@media screen and (max-width: $tocBreakpoint) {
+@media screen and (max-width: variables.$tocBreakpoint) {
   .toc {
     display: none;
   }
 }
 
-@media screen and (min-width: $tocBreakpoint) {
+@media screen and (min-width: variables.$tocBreakpoint) {
   .article {
     flex-grow: 1;
   }
 
   .toc {
-    flex: 0 0 $tocWidth;
-    max-width: $tocWidth;
+    flex: 0 0 variables.$tocWidth;
+    max-width: variables.$tocWidth;
 
     position: sticky;
     top: 0;
