Skip to content

Add Giscus comments and blog post page #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ivanbanov merged 6 commits into from
Jun 29, 2026
Merged

Add Giscus comments and blog post page #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
900d256
Add Giscus comments, blog post page, and custom giscus theme
ivanbanov Jun 29, 2026
6312ac3
Remove dead giscus-theme.css (iframe blocks external CSS)
ivanbanov Jun 29, 2026
5d00258
Split monolithic styles.css into scoped CSS files
ivanbanov Jun 29, 2026
353068e
Remove dev-only CORS header from astro.config
ivanbanov Jun 29, 2026
924f0a3
Replace em dashes with colons/pipes in titles and descriptions
ivanbanov Jun 29, 2026
b8992eb
Fix bullet list styles in post content
ivanbanov Jun 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions src/components/Comments.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---

Check failure on line 1 in src/components/Comments.astro

View workflow job for this annotation

GitHub Actions / lint

unicorn(filename-case) 

Filename should be in kebab-case
interface Props {
id: string
}

const { id } = Astro.props
---

<section class="comments-section">
<div class="comments-header">
<span class="comments-label">Discussion</span>
</div>
<div class="giscus-container">
<script
src="https://giscus.app/client.js"
data-repo="dunky-dev/website"
data-repo-id="R_kgDOTDRDLQ"
data-category="General"
data-category-id="DIC_kwDOTDRDLc4C__gr"
data-mapping="specific"
data-term={id}
data-strict="1"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="dark"
data-lang="en"
data-loading="lazy"
crossorigin="anonymous"
async
></script>
</div>
</section>
Empty file removed src/content/blog/.gitkeep
View file
Open in desktop
Empty file.
4 changes: 2 additions & 2 deletions src/layouts/Base.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
---

Check failure on line 1 in src/layouts/Base.astro

View workflow job for this annotation

GitHub Actions / lint

unicorn(filename-case) 

Filename should be in kebab-case
import Icon from '../components/icon.astro'
import './layout.css'

interface Props {
title: string
description?: string
}

const { title, description = 'Dunky — DX tools that unlock powerful UIs.' } = Astro.props
const { title, description = 'Dunky: DX tools that unlock powerful UIs.' } = Astro.props
const pathname = Astro.url.pathname
const isHome = pathname === '/'
---
Expand All @@ -20,7 +21,6 @@
<title>{title}</title>
<link rel="icon" type="image/svg+xml" href="/logo/logo-symbol.svg" media="(prefers-color-scheme: light)" />
<link rel="icon" type="image/svg+xml" href="/logo/logo-symbol-white.svg" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<header class="topbar">
Expand Down
136 changes: 136 additions & 0 deletions src/layouts/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

::selection {
background: #f0f;
color: white;
text-shadow: 1px 1px black;
}

html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}

img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}

input,
button,
textarea,
select {
font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}

:root {
color-scheme: dark;
}

body {
min-height: 100vh;
display: flex;
flex-direction: column;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
font-family:
system-ui,
-apple-system,
'Segoe UI',
sans-serif;
color: #fff;
/* premium dark background: subtle radial glow over near-black */
background-color: #08090d;
background-image: radial-gradient(120% 120% at 50% 0%, #222 0%, #111 55%, #000 100%);
background-attachment: fixed;
}

.topbar {
position: fixed;
top: 0;
right: 0;
width: 100%;
display: flex;
gap: 0.25rem;
padding: 0.75rem 1rem;
z-index: 10;
justify-content: center;
background: rgb(8 9 13 / 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}

.topbar-link {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.65rem;
border-radius: 0.5rem;
color: rgb(255 255 255 / 0.55);
text-decoration: none;
font-size: 0.8rem;
font-weight: 500;
transition:
color 0.18s ease,
background 0.18s ease;
}

.topbar-link:hover,
.topbar-link:focus-visible {
color: #fff;
background: rgb(255 255 255 / 0.08);
outline: none;
}

.topbar-link--active {
color: #fff;
}

.topbar-link--back {
margin-right: auto;
}

.topbar-icon {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}

.footer {
padding: 1.5rem;
text-align: center;
font-size: 0.8rem;
color: rgb(255 255 255 / 0.35);
}

.footer-link {
color: rgb(255 255 255 / 0.55);
text-decoration: none;
transition: color 0.18s ease;
}

.footer-link:hover,
.footer-link:focus-visible {
color: #fff;
outline: none;
}
32 changes: 32 additions & 0 deletions src/pages/blog/[id].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
import { getCollection, render } from 'astro:content'
import Base from '../../layouts/base.astro'
import Comments from '../../components/Comments.astro'
import './blog.css'

export async function getStaticPaths() {
const posts = await getCollection('blog', ({ data }) => !data.draft)
return posts.map((post) => ({ params: { id: post.id }, props: { post } }))
}

const { post } = Astro.props
const { Content } = await render(post)
---

<Base title={`${post.data.title} | Dunky`} description={post.data.description}>
<main class="post-page">
<article class="post">
<header class="post-header">
<time class="post-date" datetime={post.data.date.toISOString()}>
{post.data.date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
</time>
<h1 class="post-title">{post.data.title}</h1>
<p class="post-description">{post.data.description}</p>
</header>
<div class="post-content">
<Content />
</div>
</article>
<Comments id={post.id} />
</main>
</Base>
Loading
Loading