Merge pull request #366 from willtheorangeguy/new-post-gen-fixes

willtheorangeguy · web-flow · commit affd9b4d0cd3 · 2024-12-16T18:24:24.000-07:00
General fixes and new posts
diff --git a/assets/img/blog/giscus.jpg b/assets/img/blog/giscus.jpg
diff --git a/assets/img/blog/utterances.jpg b/assets/img/blog/utterances.jpg
diff --git a/src/config.ts b/src/config.ts
@@ -4,7 +4,7 @@ export const SITE: Site = {
     website: "https://williamvdg.me/",
     author: "willtheorangeguy",
     desc: "A dev blog, with random personal thoughts, tech stuff, and travel musings.",
-    title: "willtheorangeguy",
+    title: "To Be Continued",
     ogImage: "hero.jpg",
     lightAndDarkMode: true,
     postPerPage: 10,
diff --git a/src/content/blog/book-review/fourth-wing.md b/src/content/blog/book-review/fourth-wing.md
@@ -12,9 +12,9 @@ description: "A review of the Fourth Wing Book."
 
 # Fourth Wing
 
--   **Date:** 10-12-2023
+-   **Date:** 2023-10-08
 -   **Rating:** ⭐⭐⭐⭐
 
 **Pubic Links:**
 
-1. https://bookwyrm.social/user/willtheorangeguy/reviewrating/3251596
+1. [bookwrym.social](https://bookwyrm.social/user/willtheorangeguy/reviewrating/3251596)
diff --git a/src/content/blog/book-review/how-to-avoid-a-climate-disaster.md b/src/content/blog/book-review/how-to-avoid-a-climate-disaster.md
@@ -0,0 +1,22 @@
+---
+author: willtheorangeguy
+pubDatetime: 2024-12-16T15:22:00Z
+title: "How to Avoid a Climate Disaster Book Review"
+postSlug: how-to-avoid-a-climate-disaster
+featured: false
+draft: false
+tags:
+    - book-review
+description: "A review of the How to Avoid a Climate Disaster Book."
+---
+
+# How to Avoid a Climate Disaster
+
+-   **Date:** 2024-12-16
+-   **Rating:** ⭐⭐⭐⭐⭐
+
+**Pubic Links:**
+
+1. [bookwrym.social](https://bookwyrm.social/book/173863/comment#:~:text=great%20overview%20of%20the%20climate%20problem%20for%20the%20lay%20person.%20has%20lots%20of%20helpful%20insights%20that%20can%20be%20shared%20with%20others%20when%20discussing%20our%20path%20to%20remedying%20climate%20change.)
+
+> Great overview of the climate problem for the lay person. Has lots of helpful insights that can be shared with others when discussing our path to remedying climate change.
diff --git a/src/content/blog/book-review/the-invisible-life-of-addie-larue.md b/src/content/blog/book-review/the-invisible-life-of-addie-larue.md
@@ -12,11 +12,11 @@ description: "A review of The Invisible Life of Addie LaRue Book."
 
 # The Invisible Life of Addie LaRue
 
--   **Date:** 24-07-2024
+-   **Date:** 2024-07-24
 -   **Rating:** ⭐⭐⭐⭐
 
 **Pubic Links:**
 
-1. https://bookwyrm.social/user/willtheorangeguy/review/4967999/s/great-book
+1. [bookwrym.social](https://bookwyrm.social/user/willtheorangeguy/review/4967999/s/great-book)
 
 > This was an awesome read, really loved how the reader gets to see the perspective of the modern world as well as going back in time. The ending was a suprising, but I enjoyed the emotion of it.
diff --git a/src/content/blog/book-review/the-prisoners-throne.md b/src/content/blog/book-review/the-prisoners-throne.md
@@ -12,11 +12,11 @@ description: "A review of The Prisoner's Throne Book."
 
 # The Prisoner's Throne
 
--   **Date:** 28-09-2023
+-   **Date:** 2023-09-28
 -   **Rating:** ⭐⭐⭐⭐ (3.5 on Bookwyrm)
 
 **Pubic Links:**
 
-1. https://bookwyrm.social/user/willtheorangeguy/review/5442750/s/gripping-finale
+1. [bookwrym.social](https://bookwyrm.social/user/willtheorangeguy/review/5442750/s/gripping-finale)
 
 > This finale to the short series had a lot of twists and turns that someone who enjoys these books for light reading would not have seen coming. Was a great series and can be read super quickly.
diff --git a/src/content/blog/book-review/the-stolen-heir.md b/src/content/blog/book-review/the-stolen-heir.md
@@ -12,11 +12,11 @@ description: "A review of The Stolen Heir Book."
 
 # The Stolen Heir
 
--   **Date:** 28-09-2023
+-   **Date:** 2023-09-28
 -   **Rating:** ⭐⭐⭐⭐
 
 **Pubic Links:**
 
-1. https://bookwyrm.social/user/willtheorangeguy/review/5442749/s/a-great-start
+1. [bookwrym.social](https://bookwyrm.social/user/willtheorangeguy/review/5442749/s/a-great-start)
 
 > A great start to this series, I really enjoyed getting to know more about the characters and their personal lives. Looking forward to more by this author.
diff --git a/src/content/blog/book-review/travel-hacks.md b/src/content/blog/book-review/travel-hacks.md
@@ -12,9 +12,9 @@ description: "A review of the Travel Hacks Book."
 
 # Travel Hacks
 
--   **Date:** 05-12-2022
+-   **Date:** 2022-05-12
 -   **Rating:** ⭐⭐⭐⭐
 
 **Pubic Links:**
 
-1. https://bookwyrm.social/user/willtheorangeguy/reviewrating/558969
+1. [bookwrym.social](https://bookwyrm.social/user/willtheorangeguy/reviewrating/558969)
diff --git a/src/content/blog/switching-from-utterances-to-giscus.md b/src/content/blog/switching-from-utterances-to-giscus.md
@@ -0,0 +1,34 @@
+---
+author: willtheorangeguy
+pubDatetime: 2024-12-17T00:00:00.198Z
+title: Switching from Utterances to Giscus
+postSlug: switching-from-utterances-to-giscus
+featured: true
+draft: false
+tags:
+    - github
+    - blog
+    - web-development
+    - comments
+description: Details on how I switched from utterances to giscus on this blog!
+---
+
+A while ago, I stumbled upon [utterances](https://utteranc.es/), which easily allows you to add comments to a blog without the need to sign up for a service or set up anything extra. You just use the built in "comment threads" of GitHub Issues to facilitate this. I thought they did a great job with the tool, and I found it extremely easy to setup. All you have to do is:
+
+1. Head to their website [utteranc.es](https://utteranc.es/)
+2. Follow the steps on their page to exert as little or as much customization as you want
+3. Copy and paste the `script` tag into your blog layout
+
+Here is what it looks like on this blog:
+
+![Blog post with utterances comments](/assets/img/blog/utterances.jpg)
+
+This was super easy and I was happy to (hopefully) drive more engagement thanks to the comments. The only annoying part was that I was going to have a ton of open issues acting as comments for the blog posts... Luckily, a few days ago, I came across another blog (which I unfortunately don't remember - otherwise I would have linked it here) and saw that they were using [giscus](https://giscus.app/).
+
+giscus is clearly heavily inspired by utterances, and their website is pretty much the same thing, so you can follow the same easy steps to add it to your site or blog. The benefit of using giscus? It uses GitHub Discussions for the comments, meaning you won't have any unnecessary open GitHub Issues. I also think this is a better platform for blog comments, since Discussions allows for a more forum-like commenting and discussion experience. Another benefit is that giscus is [still under active development](https://github.com/giscus/giscus/commits/main/), whereas utterances was [last updated two years ago](https://github.com/utterance/utterances/commits/master/). Regardless, both are still open source on GitHub and great options to use!
+
+Here is what the comment section currently looks like with giscus:
+
+![Blog post with giscus comments](/assets/img/blog/giscus.jpg)
+
+Oh - giscus also has support for reactions!
diff --git a/src/content/blog/welcome.md b/src/content/blog/welcome.md
@@ -3,7 +3,7 @@ title: Welcome to my blog!
 author: willtheorangeguy
 pubDatetime: 2024-07-26T12:00:00Z
 postSlug: welcome
-featured: true
+featured: false
 draft: false
 tags:
     - intro
diff --git a/src/layouts/BucketListLayout.astro b/src/layouts/BucketListLayout.astro
@@ -166,7 +166,7 @@ const { frontmatter } = Astro.props;
 
   /* Style the progress value for WebKit browsers (Chrome, Safari) */
   progress::-webkit-progress-value {
-    background-color: #ff6b01; /* Color of the progress value */
+    @apply bg-skin-accent; /* Color of the progress value */
     border-radius: 5px; /* Rounded corners */
   }
 
@@ -178,7 +178,7 @@ const { frontmatter } = Astro.props;
 
   /* Style the progress value for Firefox */
   progress::-moz-progress-bar {
-    background-color: #ff6b01; /* Color of the progress value */
+    @apply bg-skin-accent; /* Color of the progress value */
     border-radius: 5px; /* Rounded corners */
   }
 </style>
diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
@@ -13,7 +13,7 @@ export interface Props {
 
 const { post } = Astro.props;
 
-const { title, author, description, ogImage, canonicalURL, pubDatetime, tags, readingTime } =
+const { title, author, description, ogImage, canonicalURL, pubDatetime, tags } =
   post.data;
 
 const { Content } = await post.render();
@@ -33,7 +33,7 @@ const ogUrl = new URL(
   canonicalURL={canonicalURL}
 >
   <Header />
-  <div id="progress-bar" style="position: fixed; top: 0; left: 0; height: 4px; background: #ff6b01; width: 0%; z-index: 1000;"></div>
+  <div id="progress-bar"></div>
   <div class="mx-auto flex w-full max-w-6xl justify-start px-2">
     <button
       class="focus-outline mb-2 mt-8 flex hover:opacity-75"
diff --git a/src/styles/base.css b/src/styles/base.css
@@ -95,6 +95,17 @@
         overflow-y: scroll;
     }
 
+    /* progress bar */
+    #progress-bar {
+        @apply bg-skin-accent;
+        position: fixed; 
+        top: 0; 
+        left: 0; 
+        height: 4px; 
+        width: 0%; 
+        z-index: 1000;
+    }
+
     /* width */
     ::-webkit-scrollbar {
         @apply w-3;
