Skip to content

Add comment system with Turso/libSQL backend#17

Open
cbcruk wants to merge 2 commits into
mainfrom
claude/custom-comment-system-e167o7
Open

Add comment system with Turso/libSQL backend#17
cbcruk wants to merge 2 commits into
mainfrom
claude/custom-comment-system-e167o7

Conversation

@cbcruk

@cbcruk cbcruk commented Jul 12, 2026

Copy link
Copy Markdown
Owner

Summary

Implements a full-featured comment system for memos using Turso (libSQL) as the backend database. Comments are managed through a Vercel serverless API endpoint with client-side React components for display and submission.

Key Changes

  • Backend (src/lib/comments.ts): Core comment service with Turso/libSQL integration

    • getComments() - Fetch approved comments for a memo
    • createComment() - Validate and insert new comments with IP-based rate limiting
    • hashIp() - SHA256 hashing for IP anonymization (no raw IPs stored)
    • Configurable limits: author name (1-40 chars), body (1-2000 chars), rate limit (3 per 60s)
  • API Route (src/pages/api/comments.ts): Astro serverless endpoint

    • GET: Retrieve approved comments by memoId
    • POST: Create new comment with honeypot spam protection
    • CORS headers configured in vercel.json
  • React Components (src/components/Comments/):

    • Comments.tsx - Main container with SWR data fetching and optimistic updates
    • CommentForm.tsx - Form with validation, honeypot field, and pending state
    • CommentList.tsx - Display comments with UTC→local time conversion
    • CommentPrimitive.tsx - Styled components using react-twc
    • Comments.types.ts - Shared types and API client functions
  • Database Setup:

    • scripts/init-comments.mjs - Create comment table with indexes
    • scripts/moderate-comments.mjs - CLI tool for moderation (list/hide/spam/approve/delete)
    • Schema includes status field (approved/hidden/spam) for moderation workflow
  • Configuration:

    • .env.example - Document required env vars (TURSO_DATABASE_URL, TURSO_AUTH_TOKEN, COMMENT_IP_SALT)
    • tsconfig.json - Add @lib/* path alias
    • package.json - Add @libsql/client dependency
    • vercel.json - Add CORS headers for API routes
    • .gitignore - Exclude local comments.db* files
  • Integration: Wire Comments component into memo detail page (src/pages/memo/[id].astro)

Implementation Details

  • Spam Protection: Honeypot field (website) + IP-based rate limiting + approval-required status
  • Privacy: IPs hashed with salt, never stored raw
  • Optimistic Updates: New comments reflected immediately in UI, synced with server
  • Time Handling: SQLite UTC timestamps parsed and formatted to local timezone
  • Development: Defaults to local file:comments.db when env vars not set

https://claude.ai/code/session_01MFFjbY1BjD6UEUj3ko7N7N

블루스카이 대신 직접 만든 코멘트 기능. 정적 GH Pages 사이트가
Vercel 서버리스 API(/api/comments)를 CORS로 호출하고, libSQL(Turso)에
익명+이름 코멘트를 저장한다.

- src/lib/comments.ts: libSQL 클라이언트 + 조회/작성 + 검증/레이트리밋/IP 해시
- src/pages/api/comments.ts: GET(목록)/POST(작성)/OPTIONS, 허니팟
- src/components/Comments/: React 아일랜드(SWR), client:visible로 메모 하단 삽입
- scripts/init-comments.mjs, moderate-comments.mjs: 초기화/직접 모더레이션
- 스팸 방어: 허니팟 + IP 레이트리밋(60초당 3) + status(approved/hidden/spam)
- vite 8.1.0 고정: libsql 추가 시 tailwind가 vite5로 재바인딩되는 문제 방지

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MFFjbY1BjD6UEUj3ko7N7N
@bolt-new-by-stackblitz

Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@vercel

vercel Bot commented Jul 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
cbcruk-github-io Ready Ready Preview, Comment Jul 12, 2026 1:11pm

작성 즉시 노출 → 승인 후 노출로 변경. 익명 코멘트의 스팸/노출 통제 강화.

- 스키마 기본값 approved → pending, CHECK에 pending 추가
- POST 응답을 {status:'pending'}으로, 폼은 "승인 후 표시" 안내
- Comments 아일랜드: 낙관적 삽입 제거, 승인 안내 문구 추가
- moderate: `pending` 큐 조회 추가, `list`는 대기 건 우선 정렬

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MFFjbY1BjD6UEUj3ko7N7N
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants