mirror of
https://github.com/timmypidashev/web.git
synced 2026-04-14 11:03:50 +00:00
Style giscuss comment feed
This commit is contained in:
@@ -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/node": "^9.1.3",
|
||||
"@astrojs/mdx": "^4.2.4",
|
||||
"@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",
|
||||
|
||||
568
src/pnpm-lock.yaml
generated
568
src/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
34
src/src/components/blog/comments.tsx
Normal file
34
src/src/components/blog/comments.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
331
src/src/style/comments.css
Normal file
331
src/src/style/comments.css
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user