feat: add line numbers to code viewer using CSS counters
40883e8Files changed3+18 -2
+18 -2 · 3
@@ -59,6 +59,22 @@
body { @apply bg-background text-foreground; }
}
+/* Shiki line numbers. */
+.code-viewer code {
+ counter-reset: line;
+}
+
+.code-viewer code .line::before {
+ counter-increment: line;
+ content: counter(line);
+ display: inline-block;
+ width: 3ch;
+ margin-right: 1.5rem;
+ text-align: right;
+ color: hsl(var(--muted-foreground) / 0.5);
+ user-select: none;
+}
+
/* Shiki dark mode. */
.dark .shiki,
.dark .shiki span {
@@ -29,7 +29,7 @@ export async function CodeViewer({
return (
<div
- className="text-sm overflow-auto [&>pre]:p-5 [&>pre]:min-h-full"
+ className="code-viewer text-sm overflow-auto [&>pre]:p-5 [&>pre]:min-h-full"
dangerouslySetInnerHTML={{ __html: html }}
/>
);
@@ -81,7 +81,7 @@ The API route (`app/api/github/[...path]/route.ts`) validates that requested rep
- **Server Components by default** — pages use `async` components for data fetching; interactive components (`FileTree.tsx`, `LangSwitcher.tsx`, `ThemeToggle.tsx`, `FilesChanged.tsx`, `SidebarDrawer.tsx`, `BranchSelector.tsx`) are `"use client"`
- **Mobile layout** — all pages must be usable on mobile (≥ 320px). Use `md:` breakpoint prefix for desktop-only styles. The sidebar is hidden on mobile and toggled via `SidebarDrawer.tsx`, which accepts the server-rendered `<Sidebar>` as a prop — this is the App Router pattern for mixing server and client components. Do not add new fixed-width layout elements without a responsive fallback.
- **i18n** — `lib/i18n.server.ts` loads dictionaries server-side; `lib/i18n.ts` holds types and locale config
-- **Syntax highlighting** — `CodeViewer.tsx` uses Shiki with `github-light`/`github-dark` themes, switching based on the `dark` class on `<html>`
+- **Syntax highlighting** — `CodeViewer.tsx` uses Shiki with `github-light`/`github-dark` themes, switching based on the `dark` class on `<html>`. Line numbers are rendered via CSS counters on `.code-viewer code .line::before` in `globals.css`.
- **Markdown rendering** — `MarkdownBody.tsx` uses `react-markdown` + `remark-gfm` with custom Tailwind-styled components (no `@tailwindcss/typography`). Use this component for any user-generated Markdown content.
- **Diff view** — `FilesChanged.tsx` renders GitHub-style diffs with per-file and global fold/unfold. Accepts `GhPullFile[]` and a dict slice; reused across PR detail and commit detail pages.
- **Pagination** — implemented via `?page=N` searchParams on server components; `hasNext` is inferred from `results.length === perPage` (GitHub API does not return total count).