Skip to content

Update Comments via Val Town #19

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
jesseditson merged 2 commits into from
Sep 15, 2026
Merged

Update Comments via Val Town #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8dbfc07
take a swing at adding comments to the updates section via val town
jesseditson Sep 10, 2026
b23ad18
updates from review
jesseditson Sep 15, 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
12 changes: 12 additions & 0 deletions build.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,21 @@ const EDITOR_URL = dev
: staging
? "https://editor.archival-staging.dev"
: "https://editor.archival.dev";
// The Val Town val in valtown/comments.ts. Override with COMMENTS_URL to point
// a build at a val of your own.
const COMMENTS_URL =
process.env.COMMENTS_URL ??
(dev || staging
? "https://archival-update-comments.web.val.run"
: "https://archival-update-comments.web.val.run");
const TURNSTILE_SITE_KEY = dev
? "1x00000000000000000000AA"
: staging
? "0x4AAAAAAEZffDvzgSX4xffU"
: "0x4AAAAAAEZfb1ZNwVKPq0Eq";
const COMMENTS_TURNSTILE_SITE_KEY = dev
? "1x00000000000000000000AA"
: "0x4AAAAAAE2bl5C1gBUENCco";

const ctx = await esbuild.context({
entryPoints: {
Expand All @@ -43,6 +53,8 @@ const ctx = await esbuild.context({
EDITOR_URL: `"${EDITOR_URL}"`,
API_URL: `"${API_URL}"`,
TURNSTILE_SITE_KEY: `"${TURNSTILE_SITE_KEY}"`,
COMMENTS_URL: `"${COMMENTS_URL}"`,
COMMENTS_TURNSTILE_SITE_KEY: `"${COMMENTS_TURNSTILE_SITE_KEY}"`,
},
format: "esm",
target: "es2022",
Expand Down
3 changes: 3 additions & 0 deletions define.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,6 @@ declare const DEV: boolean;
declare const EDITOR_URL: string;
declare const API_URL: string;
declare const TURNSTILE_SITE_KEY: string;
/** Origin of the Val Town val that stores comments on updates. */
declare const COMMENTS_URL: string;
declare const COMMENTS_TURNSTILE_SITE_KEY: string;
60 changes: 60 additions & 0 deletions pages/update.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
%}

{% assign sorted_updates = objects.update | sort: "publish_date" | reverse %}
{% assign update_slug = update.path | split: "/" | last %}

<div class="updates-page updates-page--detail">
<article class="update-detail">
Expand All @@ -25,6 +26,65 @@
{{ update.body }}
</div>

<section class="update-comments" id="comments" data-comments data-comments-slug="{{ update_slug }}">
<h2 class="comments-title">Comments<span class="comments-count" data-comments-total></span></h2>
<p class="comments-prompt">Add your thoughts</p>

<p class="comments-status" data-comments-status role="status" aria-live="polite">Loading comments…</p>

<ol class="comments-list" data-comments-list></ol>

<form class="comment-form" data-comment-form hidden>
<div class="comment-form-identity">
<span class="comment-avatar comment-avatar--you is-empty" data-comment-you aria-hidden="true">?</span>
<label class="sr-only" for="comment-name">Your name</label>
<input
class="comment-name"
id="comment-name"
data-comment-name
type="text"
maxlength="60"
autocomplete="name"
placeholder="Your name"
required
>
</div>

<p class="comment-replying" data-comment-reply-to hidden>
Replying to <span data-comment-reply-name></span>
<button type="button" class="comment-reply-cancel" data-comment-reply-cancel>Cancel</button>
</p>

<div class="comment-form-send">
<label class="sr-only" for="comment-body">Leave a comment</label>
<textarea
class="comment-input"
id="comment-body"
data-comment-body
rows="1"
maxlength="2000"
placeholder="Leave a comment"
required
></textarea>
<button
class="comment-post"
type="submit"
data-comment-post
data-umami-event="update-comment-post"
>
Post
</button>
</div>

<div class="comment-turnstile" data-comment-turnstile></div>
<p class="comment-error" data-comment-error role="alert"></p>
</form>

<noscript>
<p class="comments-status">Comments need JavaScript.</p>
</noscript>
</section>

{% comment %}
Newer and older by publish date. The list is newest-first, so the entry
before this one is the newer of the two.
Expand Down
34 changes: 25 additions & 9 deletions pages/updates.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,31 @@
</div>
</div>

<a
class="update-more"
href="/{{ update.path }}.html"
data-update-more
data-umami-event="update-read-more"
data-umami-event-update="{{ update.title }}"
>
Read more →
</a>
<div class="update-card-footer">
<a
class="update-more"
href="/{{ update.path }}.html"
data-update-more
data-umami-event="update-read-more"
data-umami-event-update="{{ update.title }}"
>
Read more →
</a>

{% comment %}
Filled in from one batched request to the comments val, and left
out entirely for an update nobody has commented on.
{% endcomment %}
<a
class="update-comment-count"
href="/{{ update.path }}.html#comments"
data-comment-count
data-comment-slug="{{ update_slug }}"
data-umami-event="update-comments"
data-umami-event-update="{{ update.title }}"
hidden
></a>
</div>
</article>
{% endfor %}
</div>
Expand Down
Loading
Loading