0856749 | website

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

0856749 — pyrossh 2026-07-07T12:12:56+05:30

feat: add repo issues workers with htmx interactivity

Files changed (8) hide show

packages/workers/repos/issues/detail/package.json +14 -0
packages/workers/repos/issues/detail/src/index.tsx +139 -0
packages/workers/repos/issues/detail/tsconfig.json +4 -0
packages/workers/repos/issues/detail/wrangler.jsonc +10 -0
packages/workers/repos/issues/index/package.json +14 -0
packages/workers/repos/issues/index/src/index.tsx +84 -0
packages/workers/repos/issues/index/tsconfig.json +4 -0
packages/workers/repos/issues/index/wrangler.jsonc +10 -0

packages/workers/repos/issues/detail/package.json ADDED Viewed

@@ -0,0 +1,14 @@
+{
+  "name": "@pyrossh/repos-issues-detail",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
+  "dependencies": {
+    "@pyrossh/config": "workspace:*",
+    "@pyrossh/core": "workspace:*",
+    "@pyrossh/types": "workspace:*",
+    "@pyrossh/ui": "workspace:*"
+  }
+}

packages/workers/repos/issues/detail/src/index.tsx ADDED Viewed

@@ -0,0 +1,139 @@
+import { RepoLayout } from "@pyrossh/ui";
+import { getRepo, getGitBugIssue, addGitBugIssueComment, setGitBugIssueState } from "@pyrossh/core";
+import type { Env, GitBugIssue } from "@pyrossh/types";
+const TimeAgo = (date: string) => <time-ago data-date={date}></time-ago>;
+const StateBadge = (issue: GitBugIssue) => (
+  <span id="state-badge" class={`state ${issue.state}`}>
+    {issue.state}
+  </span>
+);
+const CommentsSection = (repoId: string, issue: GitBugIssue) => (
+  <section id="comments-section" class="comments">
+    {issue.comments.length > 0 && (
+      <>
+        <h3>Comments</h3>
+        {issue.comments.map((comment) => (
+          <article class="comment">
+            <div class="comment-meta">
+              {comment.author && <strong>{comment.author}</strong>}
+              {comment.createdAt && TimeAgo(comment.createdAt)}
+            </div>
+            <pre>{comment.body}</pre>
+          </article>
+        ))}
+      </>
+    )}
+    <form
+      class="comment-form"
+      hx-post={`/repos/${repoId}/issues/${issue.id}`}
+      hx-target="#comments-section"
+      hx-swap="outerHTML"
+    >
+      <input name="repoId" type="hidden" value={repoId} />
+      <input name="issueId" type="hidden" value={issue.id} />
+      <textarea name="body" placeholder="Comment" required></textarea>
+      <div class="comment-actions">
+        <input name="author" placeholder="Author" />
+        <button type="submit">Comment</button>
+      </div>
+    </form>
+  </section>
+);
+const IssueHeader = (repoId: string, issue: GitBugIssue) => (
+  <article class="issue">
+    <div class="issue-title">
+      <a href={`/repos/${repoId}/issues/${issue.id}`} title={issue.id}>
+        {issue.title}
+      </a>
+      {StateBadge(issue)}
+    </div>
+    <div class="meta">
+      <a href={`/repos/${repoId}/issues/${issue.id}`} title={issue.id}>
+        {issue.id.substring(0, 8)}
+      </a>
+      {issue.author && <span>by {issue.author}</span>}
+      {issue.createdAt && TimeAgo(issue.createdAt)}
+      {issue.comments.length > 0 && <span>{issue.comments.length} comments</span>}
+    </div>
+    {issue.labels.length > 0 && (
+      <div class="labels">
+        {issue.labels.map((label) => (
+          <span class="label">#{label}</span>
+        ))}
+      </div>
+    )}
+  </article>
+);
+const StateForm = (repoId: string, issue: GitBugIssue) => (
+  <form
+    class="state-form"
+    hx-put={`/repos/${repoId}/issues/${issue.id}`}
+    hx-target="#state-badge"
+    hx-swap="outerHTML"
+  >
+    <input name="repoId" type="hidden" value={repoId} />
+    <input name="issueId" type="hidden" value={issue.id} />
+    <input name="state" type="hidden" value={issue.state === "open" ? "closed" : "open"} />
+    <input name="author" type="hidden" value={issue.author || ""} />
+    <button type="submit">{issue.state === "open" ? "Close" : "Reopen"}</button>
+  </form>
+);
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    const url = new URL(request.url);
+    const parts = url.pathname.split("/").filter(Boolean);
+    const repoId = parts[1];
+    const issueId = parts[3];
+    const repo = getRepo(repoId);
+    if (!repo) return Response.redirect(`${url.origin}/404`, 302);
+    const issue = await getGitBugIssue(env.REPOS, repo.id, issueId ?? "");
+    if (!issue) return Response.redirect(`${url.origin}/repos/${repo.id}/issues`, 302);
+    if (request.method === "POST") {
+      const formData = await request.formData();
+      const body = formData.get("body") as string;
+      const author = formData.get("author") as string;
+      const updated = await addGitBugIssueComment(env.REPOS, repo.id, issueId, { body, author });
+      return new Response("<!---->" + CommentsSection(repo.id, updated).toString(), {
+        headers: { "Content-Type": "text/html" },
+      });
+    }
+    if (request.method === "PUT") {
+      const formData = await request.formData();
+      const state = formData.get("state") as "open" | "closed";
+      const author = formData.get("author") as string;
+      const updated = await setGitBugIssueState(env.REPOS, repo.id, issueId, state, author);
+      return new Response(StateBadge(updated).toString(), {
+        headers: { "Content-Type": "text/html" },
+      });
+    }
+    return new Response(
+      <RepoLayout repo={repo} request={request} currentTab="Issues">
+        {IssueHeader(repo.id, issue)}
+        {StateForm(repo.id, issue)}
+        {issue.body && (
+          <section class="body">
+            <pre>{issue.body}</pre>
+          </section>
+        )}
+        {CommentsSection(repo.id, issue)}
+      </RepoLayout>,
+      {
+        headers: {
+          "Content-Type": "text/html",
+          "Cache-Control": "public, max-age=300, s-maxage=3600",
+        },
+      },
+    );
+  },
+};

packages/workers/repos/issues/detail/tsconfig.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "include": ["src"]
+}

packages/workers/repos/issues/detail/wrangler.jsonc ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://raw.githubusercontent.com/cloudflare/workers-sdk/main/packages/wrangler/config-schema.json",
+  "name": "pyrossh-repos-issues-detail",
+  "main": "src/index.tsx",
+  "compatibility_date": "2026-07-07",
+  "compatibility_flags": ["nodejs_compat"],
+  "workers_dev": false,
+  "routes": [{ "pattern": "pyrossh.dev/repos/*/issues/*", "custom_domain": true }],
+  "r2_buckets": [{ "binding": "REPOS", "bucket_name": "pyrossh-repos-prd" }],
+}

packages/workers/repos/issues/index/package.json ADDED Viewed

@@ -0,0 +1,14 @@
+{
+  "name": "@pyrossh/repos-issues-index",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
+  "dependencies": {
+    "@pyrossh/config": "workspace:*",
+    "@pyrossh/core": "workspace:*",
+    "@pyrossh/types": "workspace:*",
+    "@pyrossh/ui": "workspace:*"
+  }
+}

packages/workers/repos/issues/index/src/index.tsx ADDED Viewed

@@ -0,0 +1,84 @@
+import { RepoLayout, IssueCard } from "@pyrossh/ui";
+import { getRepo, getGitBugIssues, createGitBugIssue } from "@pyrossh/core";
+import type { Env, GitBugIssue, GitBugIssuesResult } from "@pyrossh/types";
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    const url = new URL(request.url);
+    const parts = url.pathname.split("/").filter(Boolean);
+    const repoId = parts[1];
+    const repo = getRepo(repoId);
+    if (!repo) return Response.redirect(`${url.origin}/404`, 302);
+    if (request.method === "POST") {
+      const formData = await request.formData();
+      const title = formData.get("title") as string;
+      const body = formData.get("body") as string;
+      const author = formData.get("author") as string;
+      const labelsRaw = formData.get("labels") as string;
+      const labels = labelsRaw
+        ? labelsRaw
+            .split(",")
+            .map((l) => l.trim())
+            .filter(Boolean)
+        : undefined;
+      const issue = await createGitBugIssue(env.REPOS, repo.id, { title, body, author, labels });
+      const { issues } = await getGitBugIssues(env.REPOS, repo.id);
+      const html = issues.map((i) => <IssueCard repoId={repo.id} issue={i} />).join("");
+      return new Response(html, {
+        headers: { "Content-Type": "text/html" },
+      });
+    }
+    const { issues, isAvailable } = await getGitBugIssues(env.REPOS, repo.id);
+    const openIssues = issues.filter((issue) => issue.state === "open");
+    const closedIssues = issues.filter((issue) => issue.state === "closed");
+    return new Response(
+      <RepoLayout repo={repo} request={request} currentTab="Issues">
+        <section class="issues">
+          <div class="summary">
+            <strong>{issues.length}</strong> issues
+            <span>{openIssues.length} open</span>
+            <span>{closedIssues.length} closed</span>
+          </div>
+          <form
+            class="new-issue"
+            hx-post={`/repos/${repo.id}/issues`}
+            hx-target="#issues-list"
+            hx-swap="innerHTML"
+          >
+            <input name="repoId" type="hidden" value={repo.id} />
+            <input name="title" placeholder="Title" required />
+            <textarea name="body" placeholder="Description"></textarea>
+            <div class="form-row">
+              <input name="author" placeholder="Author" />
+              <input name="labels" placeholder="labels, comma-separated" />
+              <button type="submit">Create</button>
+            </div>
+          </form>
+          <div id="issues-list">
+            {issues.length > 0 ? (
+              issues.map((issue) => <IssueCard repoId={repo.id} issue={issue} />)
+            ) : (
+              <p class="empty">
+                {isAvailable
+                  ? "No git-bug issues found in this repository."
+                  : "No git-bug issues could be loaded from R2."}
+              </p>
+            )}
+          </div>
+        </section>
+      </RepoLayout>,
+      {
+        headers: {
+          "Content-Type": "text/html",
+          "Cache-Control": "public, max-age=300, s-maxage=3600",
+        },
+      },
+    );
+  },
+};

packages/workers/repos/issues/index/tsconfig.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "include": ["src"]
+}

packages/workers/repos/issues/index/wrangler.jsonc ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://raw.githubusercontent.com/cloudflare/workers-sdk/main/packages/wrangler/config-schema.json",
+  "name": "pyrossh-repos-issues-index",
+  "main": "src/index.tsx",
+  "compatibility_date": "2026-07-07",
+  "compatibility_flags": ["nodejs_compat"],
+  "workers_dev": false,
+  "routes": [{ "pattern": "pyrossh.dev/repos/*/issues", "custom_domain": true }],
+  "r2_buckets": [{ "binding": "REPOS", "bucket_name": "pyrossh-repos-prd" }],
+}