docs: add demo video and rewrite README
50120e7변경된 파일2개+93 -85
+93 -85 · 2개
바이너리 파일
@@ -1,126 +1,134 @@
-# Portfolio Viewer
+# showmycode
-GitHub Private 레포지토리를 면접관에게 안전하게 공유할 수 있는 소스 코드 뷰어입니다.
+Share private GitHub repositories securely — without exposing your credentials.
-## Features
+**showmycode** is a self-hosted code viewer that lets you grant read-only access to specific private repositories.
+Share a single link with interviewers, collaborators, or reviewers, and they can browse your code, commits, and pull requests — all without needing a GitHub account or your PAT.
-- 파일 트리 + 소스 코드 뷰어 (신택스 하이라이팅)
-- 커밋 히스토리
-- Pull Request 목록
-- 다크모드 지원
-- GitHub PAT 서버사이드 보호 (클라이언트 노출 없음)
+**[Live Demo](https://showmycode.vercel.app)**
-## Tech Stack
+<video src="media/demo.mp4" autoplay loop muted playsinline></video>
-- [Next.js 15](https://nextjs.org/) (App Router)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [shadcn/ui](https://ui.shadcn.com/)
-- [Shiki](https://shiki.style/) (신택스 하이라이팅)
-- [Vercel](https://vercel.com/) (배포)
+## Features
----
+- **Code Viewer** — File tree browser with syntax highlighting (20+ languages via Shiki)
+- **Commit History** — Paginated commit list with detailed diff view per commit
+- **Pull Requests** — PR list with overview, commits, and files changed tabs
+- **Branch Selector** — Switch between branches to browse different code states
+- **Dark Mode** — Toggle between light and dark themes
+- **i18n** — Korean and English interface
+- **Mobile Friendly** — Fully responsive layout down to 320px
+- **Access Control** — Optional share token with HMAC-SHA256 cookie authentication
+- **Zero Credential Exposure** — GitHub PAT stays server-side; viewers never see it
-## Getting Started
+## Deploy Your Own
-### 1. 레포지토리 클론
+[](https://vercel.com/new/clone?repository-url=https://github.com/Jiseoup/showmycode&env=GITHUB_PAT,GITHUB_OWNER,GITHUB_REPOS,SHARE_TOKEN&envDescription=Required%20environment%20variables&envLink=https://github.com/Jiseoup/showmycode#environment-setup)
-```bash
-git clone https://github.com/your-username/showmycode.git
-cd showmycode
-```
+Click the button above to clone this repository and deploy it to Vercel in one step.
+You will be prompted to fill in the required environment variables.
-### 2. 패키지 설치
+## Environment Setup
+
+Copy `.env.example` to `.env.local` and fill in the values:
```bash
-npm install
+cp .env.example .env.local
```
-### 3. 환경 변수 설정
+| Variable | Description | Required | Default |
+| --- | --- | --- | --- |
+| `GITHUB_PAT` | Fine-grained GitHub personal access token (read-only) | Yes | — |
+| `GITHUB_OWNER` | GitHub username or organization | Yes | — |
+| `GITHUB_REPOS` | Comma-separated repository names to expose | Yes | — |
+| `FILE_TREE_DEPTH` | File tree default expansion depth (`0` = all collapsed) | No | `0` |
+| `COMMITS_PER_PAGE` | Commits per page (max `100`) | No | `20` |
+| `PULLS_PER_PAGE` | Pull requests per page (max `100`) | No | `10` |
+| `SHARE_TOKEN` | Access token for the share link (leave empty for public mode) | No | — |
-`.env.local` 파일을 생성하고 아래 값을 입력합니다.
+### Creating a GitHub PAT
-```bash
-cp .env.example .env.local
-```
+1. Go to [GitHub Settings > Fine-grained tokens](https://github.com/settings/personal-access-tokens)
+2. Click **Generate new token**
+3. Under **Repository access**, select only the repos you want to share
+4. Set permissions:
+ - **Contents** — Read-only
+ - **Pull requests** — Read-only
+5. Copy the generated token into `GITHUB_PAT`
-```env
-GITHUB_PAT=ghp_xxxxxxxxxxxxxxxxxxxx
-GITHUB_OWNER=your-github-username
-GITHUB_REPOS=repo-name-1,repo-name-2
-```
+> **Warning:** Never commit your PAT. `.env.local` is included in `.gitignore`.
-### 4. 개발 서버 실행
+## Access Control
-```bash
-npm run dev
-```
+showmycode supports two modes depending on whether `SHARE_TOKEN` is set:
-http://localhost:3000 에서 확인할 수 있습니다.
+### Public Mode (no `SHARE_TOKEN`)
----
+All pages are accessible without authentication. Ideal for demo sites or open portfolios.
-## GitHub PAT 발급 방법
+### Token Mode (with `SHARE_TOKEN`)
-1. GitHub → Settings → Developer settings → Personal access tokens → **Fine-grained tokens**
-2. Repository access: 공개할 레포만 선택
-3. Permissions 설정
- - **Contents**: Read-only
- - **Pull requests**: Read-only
-4. 생성된 토큰을 `.env.local`의 `GITHUB_PAT`에 입력
+All pages require authentication. There are two ways to authenticate:
-> PAT는 절대 커밋하지 마세요. `.env.local`은 `.gitignore`에 포함되어 있습니다.
+1. **Share link** — Append `?token=<SHARE_TOKEN>` to any URL. The token is validated, a secure cookie is set, and the visitor is redirected without the token in the URL.
----
+ ```
+ https://your-domain.com/?token=your-secret-token
+ ```
-## Deployment (Vercel)
+2. **Manual entry** — Visitors without a valid token are redirected to a token entry page where they can paste the token.
-1. [Vercel](https://vercel.com)에 레포지토리 연결
-2. 대시보드 → Settings → Environment Variables에 아래 3개 등록
+Once authenticated, a 30-day `httpOnly` cookie keeps the session active. The cookie stores an HMAC-SHA256 digest — not the raw token — so a leaked cookie does not reveal the share token.
-| Key | Value |
-| -------------- | ---------------------------- |
-| `GITHUB_PAT` | GitHub Personal Access Token |
-| `GITHUB_OWNER` | GitHub 유저명 |
-| `GITHUB_REPOS` | 쉼표로 구분된 레포 이름 목록 |
+## Getting Started
-3. Deploy
+```bash
+git clone https://github.com/Jiseoup/showmycode.git
+cd showmycode
+npm install
+cp .env.example .env.local # fill in your values
+npm run dev
+```
----
+Open [http://localhost:3000](http://localhost:3000) to see the app.
-## 오픈소스 전환 체크리스트
+### Available Scripts
-### 보안
+```bash
+npm run dev # Start development server
+npm run build # Production build
+npm run start # Start production server
+npm run lint # Run ESLint
+npm run lint:fix # Run ESLint with --fix
+npm run format # Run Prettier (includes Tailwind class sort)
+npm run format:check # Check formatting (used in CI)
+npm run typecheck # Run tsc --noEmit
+```
-- [ ] `.env.local`이 `.gitignore`에 포함되어 있는지 확인
-- [ ] `.env.example` 파일 생성 (실제 값 없이 키 이름만 포함)
-- [ ] git log에 PAT 등 민감한 정보가 없는지 확인 (`git log --all`)
-- [ ] `GITHUB_OWNER`, `GITHUB_REPOS` 환경 변수로만 제어되는지 확인
+## Tech Stack
-### 코드 정리
+- [Next.js 16](https://nextjs.org/) (App Router, React 19)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Tailwind CSS v4](https://tailwindcss.com/)
+- [shadcn/ui](https://ui.shadcn.com/)
+- [Shiki](https://shiki.style/) (syntax highlighting)
+- [react-markdown](https://github.com/remarkjs/react-markdown) + [remark-gfm](https://github.com/remarkjs/remark-gfm)
+- [Vercel](https://vercel.com/) (deployment)
-- [ ] 하드코딩된 개인 정보 제거 (이름, 이메일, URL 등)
-- [ ] 불필요한 `console.log` 제거
-- [ ] TypeScript 타입 오류 없는지 확인 (`npm run build`)
-- [ ] 사용하지 않는 패키지 제거 (`npm prune`)
+## How It Works
+
+```
+Viewer → showmycode (Server Components) → GitHub API (with PAT)
+```
-### 문서화
+All GitHub API calls happen server-side. The PAT never reaches the browser. Repository access is restricted to the repos listed in `GITHUB_REPOS` — any unlisted repo returns a 404.
-- [ ] `README.md` 작성 (이 파일)
-- [ ] `.env.example` 작성
-- [ ] `CONTRIBUTING.md` 작성 (기여 방법 안내)
-- [ ] `LICENSE` 파일 추가 (MIT 권장)
-- [ ] 주요 컴포넌트에 JSDoc 주석 추가
+GitHub responses are cached for 60 seconds, so data shown to viewers may be up to one minute stale.
-### GitHub 설정
+## Contributing
-- [ ] 레포지토리 Public으로 전환
-- [ ] `Description` 및 `Topics` 태그 입력 (예: `nextjs`, `github-api`, `portfolio`)
-- [ ] Issue 템플릿 추가 (`.github/ISSUE_TEMPLATE/`)
-- [ ] PR 템플릿 추가 (`.github/pull_request_template.md`)
-- [ ] `About` 섹션에 데모 URL 입력
+Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on branching, commit messages, and the PR process.
-### 선택 사항
+## License
-- [ ] 데모 사이트 배포 후 README에 링크 추가
-- [ ] 스크린샷 또는 GIF 데모 추가
-- [x] GitHub Actions CI 설정 (빌드 자동 검증)
+[MIT](LICENSE) © 2026 JISUB LIM