code-changelog

Code Changelog with Simple HTML Viewer

This is a solution that records all AI-generated code changes in the reviews folder and allows you to check them in real time in a browser with a simple HTML viewer.

🎯 Key Features

• ✅ Automatic document generation: Creates an MD file in the reviews folder for every modification
• ✅ Simple HTML viewer: No installation required, works with Python alone
• ✅ Automatic index.html update: Automatically refreshes the file list when a new document is added
• ✅ Real-time server: http://localhost:4000에서 immediate check
• ✅ Dark mode UI: A beautiful GitHub-style documentation site
• ✅ Navigation: Easy browsing with automatic file list generation
• ✅ Markdown rendering: Code highlighting and diff display
• ✅ Latest document first: The most recently created document is displayed by default

🚀 Quick Start

1. Initial setup (first time only)

# 설치 불필요! Python만 있으면 OK
python3 create_changelog.py

2. Use while developing

from code_changelog_tracker import CodeChangeLogger

# 로거 생성
logger = CodeChangeLogger("프로젝트명", user_request="요구사항")

# 변경사항 기록
logger.log_file_creation("main.py", "코드", "이유")
logger.save_and_build()  # 저장!

3. Run the documentation server

# reviews 폴더에서 Python 서버 실행
cd reviews
python3 -m http.server 4000

# 브라우저에서 확인
# http://localhost:4000

Or run in the background:

cd reviews && python3 -m http.server 4000 &

📁 Project Structure

your-project/
├── reviews/                    # 문서 루트
│   ├── index.html             # HTML 뷰어 (자동 생성)
│   ├── README.md              # 홈페이지
│   ├── SUMMARY.md             # 네비게이션 (자동 생성)
│   │
│   ├── 20251020_140000.md    # 변경 이력 1
│   ├── 20251020_140530.md    # 변경 이력 2
│   ├── 20251020_141200.md    # 변경 이력 3
│   └── ...
│
├── code_changelog_tracker.py  # 로거 스크립트
└── create_changelog.py         # 변경사항 기록 스크립트

💡 Usage Scenarios

Scenario 1: Documenting while developing continuously

logger = CodeChangeLogger("로그인 기능")

# 첫 번째 작업
logger.log_file_creation("auth.py", "def login(): pass", "로그인 함수")
logger.save_and_build()
# → reviews/20251020_140000.md 생성
# → index.html 자동 업데이트 (파일 목록에 추가)
# → 기본 페이지가 20251020_140000.md로 변경

# 두 번째 작업
logger.log_file_modification("auth.py", "old", "new", "암호화 추가")
logger.save_and_build()
# → reviews/20251020_140530.md 생성
# → index.html 자동 업데이트 (파일 목록 갱신)
# → 기본 페이지가 20251020_140530.md로 변경

# 세 번째 작업
logger.log_file_creation("test_auth.py", "test code", "테스트")
logger.save_and_build()
# → reviews/20251020_141200.md 생성
# → index.html 자동 업데이트 (파일 목록 갱신)
# → 기본 페이지가 20251020_141200.md로 변경

# 브라우저에서 http://localhost:4000 방문
# → 최신 문서가 자동으로 표시됨!
# → 좌측 네비게이션에서 이전 버전들도 확인 가능

Scenario 2: Running the server in the background

# 터미널 1: 문서 서버 실행 (계속 켜둠)
cd reviews && python3 -m http.server 4000

# 터미널 2: 개발 작업
python3 your_dev_script.py  # logger.save_and_build() 호출

# 브라우저 새로고침하여 최신 문서 확인!

Scenario 3: Sharing with the team

# reviews 폴더를 팀원들과 공유
# GitHub Pages, Netlify 등에 배포
# 또는 내부 웹서버에 호스팅

🛠️ Implementation Code

code_changelog_tracker.py (main logger)

Uses the already generated file. Main methods:

• log_file_creation() - Record file creation
• log_file_modification() - Record file modification
• log_file_deletion() - Record file deletion
• update_index_html() - Automatically update the index.html file list ⭐ NEW!
• save_and_build() - Save + update SUMMARY + update index.html

reviews/index.html (HTML viewer)

It is automatically generated and updated! save_and_build() It is refreshed with the latest file list every time it is called.

Provided features:

• Automatic Markdown rendering (marked.js)
• Dark mode UI (GitHub style)
• File list navigation (automatic update)
• Code highlighting
• The latest document is displayed by default
• Active link highlighting

📋 Simple Usage

Step 1: Record changes

# create_changelog.py 예시
from code_changelog_tracker import CodeChangeLogger

logger = CodeChangeLogger(
    "Daily Signal App - 회원 가입 기능",
    user_request="이메일/비밀번호 기반 회원 가입 구현"
)

# 파일 생성 기록
logger.log_file_creation(
    "lib/screens/signup_screen.dart",
    "SignUpScreen 코드...",
    "회원 가입 화면 구현"
)

# 파일 수정 기록
logger.log_file_modification(
    "lib/providers/auth_provider.dart",
    "old code",
    "new code",
    "signUp 메서드 추가"
)

# 저장
logger.save_and_build()

Step 2: Run the server

cd reviews
python3 -m http.server 4000

Step 3: Check in the browser

http://localhost:4000

🎨 HTML Viewer Features

Dark mode UI

• GitHub-style Markdown rendering
• Code block highlighting
• Responsive layout

Navigation

• Automatically displays the file list on the left
• Sorted by date/time
• Easy navigation by clicking

Markdown rendering

• Supports headings, lists, and code blocks
• Diff display
• Emoji support

💻 Command guide

Start server

cd reviews
python3 -m http.server 4000

Change port

python3 -m http.server 3000
python3 -m http.server 8080

Run in background

cd reviews && python3 -m http.server 4000 &

Stop server

# 포그라운드: Ctrl+C
# 백그라운드: 프로세스 ID 찾아서 종료
lsof -ti:4000 | xargs kill -9

🔧 Port settings

Default port: 4000

python3 -m http.server 4000
# → http://localhost:4000

Use a different port

python3 -m http.server 3000
# → http://localhost:3000

Resolve port conflict

# 다른 포트 사용
python3 -m http.server 4001

# 또는 기존 프로세스 종료
lsof -ti:4000 | xargs kill -9

🌐 Deployment options

GitHub Pages

# reviews 폴더를 gh-pages 브랜치에 푸시
git subtree push --prefix reviews origin gh-pages

Netlify

# Netlify에 reviews 폴더 배포
# Build command: (없음)
# Publish directory: reviews

Vercel

# Vercel에 reviews 폴더 배포
vercel reviews

📝 Best Practices

1. Keep server always running: Keep the server running during development
2. Small units: Divide each task into small units and document them
3. Clear titles: Write the project name clearly
4. Regular backups: Manage the reviews folder with Git
5. Browser bookmarks: http://localhost:4000 Add bookmark

🎓 Usage examples

Implementing a sign-up feature

logger = CodeChangeLogger(
    "Daily Signal App - 회원 가입",
    user_request="이메일/비밀번호 회원 가입 기능"
)

# CustomTextField 생성
logger.log_file_creation(
    "lib/widgets/custom_text_field.dart",
    "CustomTextField 코드...",
    "재사용 가능한 입력 필드 위젯"
)

# SignUpScreen 생성
logger.log_file_creation(
    "lib/screens/signup_screen.dart",
    "SignUpScreen 코드...",
    "회원 가입 화면 구현"
)

# AuthProvider 수정
logger.log_file_modification(
    "lib/providers/auth_provider.dart",
    "old code",
    "new code with signUp",
    "signUp 메서드 추가"
)

# 저장
logger.save_and_build()

# 서버에서 확인: http://localhost:4000

🚨 Troubleshooting

Port is already in use

# 다른 포트 사용
python3 -m http.server 4001

# 또는 프로세스 종료
lsof -ti:4000 | xargs kill -9

Files are not displayed

# index.html이 있는지 확인
ls reviews/index.html

# 없으면 logger.save_and_build() 호출 시 자동 생성됨

Important: logger.save_and_build()Calling this automatically updates index.html!

• File list automatically refreshes when a new Markdown file is added
• The latest file is automatically set as the default page
• You can view the latest documents just by refreshing the browser

Markdown is not rendered

• Clear browser cache (Cmd+Shift+R / Ctrl+Shift+R)
• Restart the server
• Check whether index.html is up to date (rerun save_and_build())

🎯 Advantages

No installation required

• No need to install Node.js, npm, or HonKit
• Ready to use immediately with just Python
• No dependencies

Fast execution

• Server starts within 1 second
• Documents can be viewed immediately

Simple deployment

• Just deploy the reviews folder
• Can be hosted anywhere as a static site

Auto-update ⭐ NEW!

• save_and_build() index.html is automatically updated when called
• No manual editing required
• Always keeps the latest file list
• The latest document is automatically set as the default page

📊 Comparison: HonKit vs Simple HTML

Feature	HonKit	Simple HTML
Installation	Requires npm, Node.js	Requires only Python
Build time	5-10초	Immediate
Dependencies	Many	None
Customization	High	Medium
Search function	Available	Browser search
Deployment	_book folder	reviews folder

License

MIT License

---

No installation required! Run it directly with Python and view it in your web browser! 🎉