Style giscuss comment feed

src/package.json

@@ -8,20 +8,21 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@astrojs/react": "^4.2.3",
+    "@astrojs/react": "^4.2.4",
     "@astrojs/tailwind": "^6.0.2",
     "@tailwindcss/typography": "^0.5.16",
     "@types/react": "^18.3.20",
     "@types/react-dom": "^18.3.6",
-    "astro": "^5.6.1",
+    "astro": "^5.7.2",
     "prisma": "^6.6.0",
     "tailwindcss": "^3.4.17"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.2.3",
+    "@astrojs/mdx": "^4.2.4",
-    "@astrojs/node": "^9.1.3",
+    "@astrojs/node": "^9.2.0",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.3.0",
+    "@giscus/react": "^3.1.0",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
     "@pilcrowjs/object-parser": "^0.0.4",

src/src/components/blog/comments.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import Giscus from "@giscus/react";
+
+const id = "inject-comments";
+
+export const Comments = () => {
+  const [mounted, setMounted] = React.useState(false);
+  
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  
+  return (
+    <div id={id}>
+      {mounted ? (
+        <Giscus
+          id={id}
+          repo="timmypidashev/web"
+          repoId="MDEwOlJlcG9zaXRvcnkzODYxMjk5Mjk="
+          category="Blog & Project Comments"
+          categoryId="DIC_kwDOFwPgCc4CpKtV"
+          theme="https://timmypidashev.us-sea-1.linodeobjects.com/comments.css"
+          mapping="pathname"
+          strict="0"
+          reactionsEnabled="1"
+          emitMetadata="0"
+          inputPosition="bottom"
+          lang="en"
+          loading="lazy"
+        />
+      ) : null}
+    </div>
+  );
+};

src/src/content/blog/thinkpad-t440p-coreboot-guide.mdx

@@ -15,5 +15,24 @@ image: "/blog/thinkpad-t440p-coreboot-guide/thumbnail.png"
 > ```
 > curl -fsSL https://timmypidashev.dev/scripts/run.sh | sh -s -- -t coreboot-t440p
 > ```
+> NOTE: This script supports Arch, Debian, Fedora, Gentoo, and Nix linux distributions!
 
+## Getting Started 
+The Thinkpad T440p is a powerful and versatile laptop that can be further enhanced by installing coreboot, 
+an open-source BIOS replacement. This guide will walk you through the process of corebooting your T440p, 
+including flashing the BIOS chip and installing the necessary software.
 
+## What You'll Need
+
+Before getting started corebooting your T440p, make sure you have the following:
+
+- **Thinkpad T440p**: This guide is specifically for the T440p model.
+- **CH341A Programmer**: This is a USB device used to flash the BIOS chip.
+- **Screwdriver**: A torx screwdriver is needed to open the laptop.
+
+## Disassembling the Laptop
+1. **Power off your laptop**: Make sure your T440p is completely powered off and unplugged from any power source.
+2. **Remove the battery**: Flip the laptop over and remove the battery by sliding the latch to the unlock position and lifting it out.
+3. **Unscrew the back panel**: Use a torx screwdriver to remove the screws securing the back panel.
+
+## Locating the EEPROM Chips

src/src/pages/blog/[...slug].astro

@@ -4,6 +4,7 @@ import { Image } from "astro:assets";
 import ContentLayout from "@/layouts/content.astro";
 import { getArticleSchema } from "@/lib/structuredData";
 import { blogWebsite } from "@/lib/structuredData";
+import { Comments } from "@/components/blog/comments";
 
 // This is a dynamic route in SSR mode
 const { slug } = Astro.params;
@@ -100,5 +101,6 @@ const jsonLd = {
         <Content />
       </div>
     </article>
+    <Comments client:idle />
   </div>
 </ContentLayout>

src/src/pages/projects/[...slug].astro

@@ -3,6 +3,7 @@ export const prerender = true;
 
 import { getCollection } from "astro:content";
 import ContentLayout from "@/layouts/content.astro";
+import { Comments } from "@/components/blog/comments";
 
 export async function getStaticPaths() {
   const projects = await getCollection("projects");
@@ -62,4 +63,5 @@ const { Content } = await project.render();
       <Content />
     </div>
   </article>
+  <Comments client:idle />
 </ContentLayout>

src/src/style/comments.css

@@ -0,0 +1,331 @@
+/*!
+ * Gruvbox Dark Theme for Giscus - Minimalist Edition
+ * Pure black background with simplified design
+ * Hosted on a linode bucket
+ */
+
+main {
+  /* Syntax highlighting colors */
+  --color-prettylights-syntax-comment: #928374;
+  --color-prettylights-syntax-constant: #83a598;
+  --color-prettylights-syntax-entity: #d3869b;
+  --color-prettylights-syntax-storage-modifier-import: #ebdbb2;
+  --color-prettylights-syntax-entity-tag: #b8bb26;
+  --color-prettylights-syntax-keyword: #fb4934;
+  --color-prettylights-syntax-string: #83a598;
+  --color-prettylights-syntax-variable: #fe8019;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #fb4934;
+  --color-prettylights-syntax-invalid-illegal-text: #ebdbb2;
+  --color-prettylights-syntax-invalid-illegal-bg: #cc241d;
+  --color-prettylights-syntax-carriage-return-text: #ebdbb2;
+  --color-prettylights-syntax-carriage-return-bg: #cc241d;
+  --color-prettylights-syntax-string-regexp: #b8bb26;
+  --color-prettylights-syntax-markup-list: #fabd2f;
+  --color-prettylights-syntax-markup-heading: #83a598;
+  --color-prettylights-syntax-markup-italic: #ebdbb2;
+  --color-prettylights-syntax-markup-bold: #fe8019;
+  --color-prettylights-syntax-markup-deleted-text: #fb4934;
+  --color-prettylights-syntax-markup-deleted-bg: #000000;
+  --color-prettylights-syntax-markup-inserted-text: #b8bb26;
+  --color-prettylights-syntax-markup-inserted-bg: #000000;
+  --color-prettylights-syntax-markup-changed-text: #fabd2f;
+  --color-prettylights-syntax-markup-changed-bg: #000000;
+  --color-prettylights-syntax-markup-ignored-text: #ebdbb2;
+  --color-prettylights-syntax-markup-ignored-bg: #000000;
+  --color-prettylights-syntax-meta-diff-range: #d3869b;
+  --color-prettylights-syntax-brackethighlighter-angle: #928374;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #928374;
+  --color-prettylights-syntax-constant-other-reference-link: #83a598;
+
+  /* Button colors */
+  --color-btn-text: #ebdbb2;
+  --color-btn-bg: #000000;
+  --color-btn-border: #3c3836;
+  --color-btn-shadow: 0 0 #0000;
+  --color-btn-inset-shadow: 0 0 #0000;
+  --color-btn-hover-bg: #282828;
+  --color-btn-hover-border: #504945;
+  --color-btn-active-bg: #1d2021;
+  --color-btn-active-border: #504945;
+  --color-btn-selected-bg: #000000;
+  
+  /* Primary button colors */
+  --color-btn-primary-text: #ebdbb2;
+  --color-btn-primary-bg: #458588;
+  --color-btn-primary-border: #000000;
+  --color-btn-primary-shadow: 0 0 #0000;
+  --color-btn-primary-inset-shadow: 0 0 #0000;
+  --color-btn-primary-hover-bg: #83a598;
+  --color-btn-primary-hover-border: #000000;
+  --color-btn-primary-selected-bg: #458588;
+  --color-btn-primary-selected-shadow: 0 0 #0000;
+  --color-btn-primary-disabled-text: #ebdbb280;
+  --color-btn-primary-disabled-bg: #45858899;
+  --color-btn-primary-disabled-border: #000000;
+  
+  /* Control colors */
+  --color-action-list-item-default-hover-bg: #28282850;
+  --color-segmented-control-bg: #28282850;
+  --color-segmented-control-button-bg: #000000;
+  --color-segmented-control-button-selected-border: #504945;
+  
+  /* Foreground colors */
+  --color-fg-default: #ebdbb2;
+  --color-fg-muted: #a89984;
+  --color-fg-subtle: #7c6f64;
+  
+  /* Background colors - pure black */
+  --color-canvas-default: #000000;
+  --color-canvas-overlay: #000000;
+  --color-canvas-inset: #000000;
+  --color-canvas-subtle: #0a0a0a;
+  
+  /* Border colors - minimal */
+  --color-border-default: #28282880;
+  --color-border-muted: #28282850;
+  --color-neutral-muted: #28282840;
+  
+  /* Accent colors */
+  --color-accent-fg: #83a598;
+  --color-accent-emphasis: #458588;
+  --color-accent-muted: #83a59866;
+  --color-accent-subtle: #83a5981a;
+  
+  /* Status colors */
+  --color-success-fg: #b8bb26;
+  --color-attention-fg: #fabd2f;
+  --color-attention-muted: #fabd2f66;
+  --color-attention-subtle: #fabd2f26;
+  --color-danger-fg: #fb4934;
+  --color-danger-muted: #fb493466;
+  --color-danger-subtle: #fb49341a;
+  
+  /* Shadow color */
+  --color-primer-shadow-inset: 0 0 #0000;
+  
+  /* Scale colors */
+  --color-scale-gray-7: #282828;
+  --color-scale-blue-8: #458588;
+  
+  /* Social reaction colors */
+  --color-social-reaction-bg-hover: #28282850;
+  --color-social-reaction-bg-reacted-hover: #45858850;
+}
+
+/* Loader SVG */
+main .pagination-loader-container {
+  background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg);
+}
+
+/* Custom Giscus styles - Minimalist */
+.gsc-reactions-count {
+  display: none;
+}
+
+.gsc-timeline {
+  flex-direction: column-reverse;
+}
+
+.gsc-header {
+  padding-bottom: 1rem;
+  font-family: "Comic Code", monospace;
+  border-bottom: none;
+}
+
+.gsc-comments > .gsc-header {
+  order: 1;
+}
+
+.gsc-comments > .gsc-comment-box {
+  margin-bottom: 1rem;
+  order: 2;
+  font-family: "Comic Code", monospace;
+  background-color: #000000;
+  border-radius: 0.25rem;
+  border: 1px solid #28282850;
+}
+
+.gsc-comments > .gsc-timeline {
+  order: 3;
+}
+
+.gsc-homepage-bg {
+  background-color: #000000;
+}
+
+/* Loading image */
+main .gsc-loading-image {
+  background-image: url(https://github.githubassets.com/images/mona-loading-dimmed.gif);
+}
+
+/* Additional custom styles - Minimalist */
+.gsc-comment {
+  border: 1px solid #28282850;
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  background-color: #000000;
+  transition: border-color 0.2s ease;
+}
+
+.gsc-comment-header {
+  background-color: #0a0a0a;
+  padding: 0.75rem;
+  border-bottom: 1px solid #28282830;
+  font-family: "Comic Code", monospace;
+}
+
+.gsc-comment-content {
+  padding: 1rem;
+  font-family: "Comic Code", monospace;
+}
+
+.gsc-comment-author {
+  color: var(--color-fg-default);
+  font-weight: 600;
+}
+
+.gsc-comment-author-avatar img {
+  border-radius: 50%;
+}
+
+.gsc-comment-reactions {
+  border-top: none;
+  padding-top: 0.5rem;
+}
+
+.gsc-reply-box {
+  background-color: #000000;
+  border-radius: 0.25rem;
+  margin-top: 0.5rem;
+  margin-left: 1rem;
+  font-family: "Comic Code", monospace;
+  border: 1px solid #28282840;
+}
+
+/* Text input areas */
+.gsc-comment-box-textarea {
+  background-color: #0a0a0a;
+  border: 1px solid #28282850;
+  border-radius: 0.25rem;
+  color: var(--color-fg-default);
+  font-family: "Comic Code", monospace;
+  padding: 0.75rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.gsc-comment-box-textarea:focus {
+  border-color: var(--color-accent-fg);
+  box-shadow: 0 0 0 2px #45858830;
+  outline: none;
+}
+
+/* Buttons */
+.gsc-comment-box-buttons button {
+  font-family: "Comic Code", monospace;
+  border-radius: 0.25rem;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+/* Code block styling */
+.gsc-comment pre {
+  background-color: #0a0a0a;
+  border-radius: 0.25rem;
+  padding: 1rem;
+  overflow-x: auto;
+  border: 1px solid #28282840;
+}
+
+.gsc-comment code {
+  font-family: "Comic Code", monospace;
+  background-color: #0a0a0a;
+  color: var(--color-prettylights-syntax-entity);
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+}
+
+/* Add hover effects - subtle */
+.gsc-comment:hover {
+  border-color: #504945;
+}
+
+.gsc-social-reaction-summary-item:hover {
+  background-color: #28282850;
+}
+
+/* Dark scrollbar - minimal */
+.gsc-timeline::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.gsc-timeline::-webkit-scrollbar-track {
+  background: #000000;
+  border-radius: 4px;
+}
+
+.gsc-timeline::-webkit-scrollbar-thumb {
+  background: #28282880;
+  border-radius: 4px;
+}
+
+.gsc-timeline::-webkit-scrollbar-thumb:hover {
+  background: #3c3836;
+}
+
+/* Remove unnecessary borders and separators */
+.gsc-comment-footer, 
+.gsc-comment-footer-separator,
+.gsc-reactions-button,
+.gsc-social-reaction-summary-item:not(:hover) {
+  border: none;
+}
+
+.gsc-upvote svg {
+  fill: #83a598;
+}
+
+.gsc-downvote svg {
+  fill: #fb4934;
+}
+
+/* Add subtle hover transitions */
+.gsc-comment-box,
+.gsc-comment,
+.gsc-comment-reactions,
+button,
+.gsc-reply-box {
+  transition: all 0.2s ease-in-out;
+}
+
+.gsc-main {
+  border: none !important;
+}
+
+.gsc-left-header {
+  background-color: #000000 !important;
+}
+
+.gsc-right-header {
+  background-color: #000000 !important;
+}
+
+.gsc-header-status {
+  background-color: #000000 !important;
+}
+
+/* Remove any additional borders */
+.gsc-comment-box,
+.gsc-comment-box-md-toolbar,
+.gsc-comment-box-buttons {
+  border: none !important;
+}
+
+.gsc-comment-box-md-toolbar-item {
+  color: #83a598 !important;
+}
+
+/* Simplify the editor toolbar */
+.gsc-comment-box-md-toolbar {
+  background-color: #0a0a0a !important;
+  padding: 0.5rem !important;
+}