mirror of
https://github.com/andwati/andwati.com.git
synced 2026-10-18 09:22:53 +00:00
andwati
ec6401ac38
- Fresh structure: Next.js App Router + Tailwind v4 at the repo root, exported as static files (output: export) and served by static-web-server - Remove the Strapi CMS, Astro app, Pagefind search, comments, old scripts, Lighthouse config and compose files; content in content/ is now plain markdown with YAML frontmatter - Pages: About, Writing, Reading (3D bookshelf) and Portfolio, styled after adammaj.com - SEO: metadata and canonicals, JSON-LD, generated OG images, sitemap, robots, RSS and JSON feeds, llms.txt - Umami via PUBLIC_UMAMI_SCRIPT_URL / PUBLIC_UMAMI_WEBSITE_ID (build args) - Dockerfile builds the export and serves it with sws.toml (security headers, clean URLs, .well-known, OG image content type, immutable asset caching) - Prettier and cspell for content with a husky/lint-staged pre-commit hook - Old redirect list dropped to start from a clean slate
64 lines
2.6 KiB
Markdown
64 lines
2.6 KiB
Markdown
---
|
|
title: "What say you?"
|
|
description: "Adding a comment system by utterances"
|
|
date: "2023-08-24"
|
|
tags: ["blog", "utterances"]
|
|
---
|
|
|
|
Free speech enhanced
|
|
|
|
There is no point in writing online if your readers cannot provide feedback for your writings. You might as well be shouting at a void. My ideal commenting system has to be free, open source and should not be a hassle to setup. Luckily, [utterances 🔮](https://github.com/utterance/utterances) checks all of these conditions
|
|
|
|
It is a lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more! The notable features are:
|
|
|
|
- Open source. 🙌
|
|
- No tracking, no ads, always free. 📡🚫
|
|
- No lock-in. All data stored in GitHub issues. 🔓
|
|
- Styled with Primer, the css toolkit that powers GitHub. 💅
|
|
- Dark theme. 🌘
|
|
- Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲
|
|
|
|
## How it works
|
|
|
|
When Utterances loads, the GitHub [issue search API](https://developer.github.com/v3/search/#search-issues) is used to find the issue associated with the page based on url, pathname or title. If it cannot find an issue that matches the page, [utterances-bot](https://github.com/utterances-bot) will automatically create an issue the first time someone comments.
|
|
|
|
To comment, users must authorize the utterances app to post on their behalf using the GitHub [OAuth flow](https://developer.github.com/v3/oauth/#web-application-flow). Alternatively, users can comment on the GitHub issue directly.
|
|
|
|
# Setting up Utterances
|
|
|
|
### Repository
|
|
|
|
Choose the repository utterances will connect to.
|
|
|
|
Make sure the repo is public, otherwise your readers will not be able to view the issues/comments.
|
|
Make sure the utterances app is installed on the repo, otherwise users will not be able to post comments.
|
|
If your repo is a fork, navigate to its settings tab and confirm the issues feature is turned on.
|
|
|
|
```
|
|
repo:
|
|
username/repo
|
|
```
|
|
|
|
A public GitHub repository. This is where the blog post issues and issue-comments will be posted.
|
|
|
|
### Theme
|
|
|
|
Choose an Utterances theme that matches your blog.
|
|
|
|
### Enable Utterances
|
|
|
|
Add the following script tag to your blog's template. Position it where you want the comments to appear. Customize the layout using the .utterances and .utterances-frame selectors.
|
|
|
|
```js
|
|
<script
|
|
src="https://utteranc.es/client.js"
|
|
repo="[ENTER REPO HERE]"
|
|
issue-term="title"
|
|
theme="gruvbox-dark"
|
|
crossorigin="anonymous"
|
|
async
|
|
></script>
|
|
```
|
|
|
|
The complete documentation can be found at [https://utteranc.es](https://utteranc.es/)
|