CLAUDE.md

Instructions for Claude Code when working with this project.

About This Project

This is a documentation site for premium Blogger and WordPress themes from sugeng.id, built using VitePress with multi-language support (Indonesian & English).

Available Commands

npm run docs:dev      # Run development server
npm run docs:build    # Build for production
npm run docs:preview  # Preview build output

Language Structure

URL	Language
/	Language selector page
/id/	Indonesian
/en/	English

Mandatory Rules

1. URL Structure Must Use English

CRITICAL: All folder and file names MUST use English.

CORRECT:  /id/general/installation
WRONG:    /id/panduan-umum/instalasi

CORRECT:  /id/wuzz/configuration
WRONG:    /id/wuzz/pengaturan

Reason: VitePress language switcher matches URL paths. If paths differ between languages, it will result in 404 errors.

2. Files Must Exist in Both Languages

Every file in /id/ (Indonesian) MUST have a matching file in /en/ with an identical path:

id/general/installation.md     <->  en/general/installation.md
id/wuzz/configuration.md       <->  en/wuzz/configuration.md

3. Standard File Names

Content	File Name
Installation	installation.md
Settings/Configuration	configuration.md
Modification/Customization	customization.md
Optimization/Performance	optimization.md
Navigation Menu	navigation-menu.md
Social Media Icons	social-icons.md
Blog Elements	blog-elements.md
Image Upload	image-upload.md

4. Update Sidebar in Both Languages

When adding new pages, update the sidebar in .vitepress/config.mts for BOTH languages (id and en).

Folder Structure

blogger-docs/
├── .vitepress/
│   ├── config.mts      # Main configuration
│   ├── cache/          # Build cache (auto-generated)
│   └── dist/           # Build output (auto-generated)
├── id/                  # Indonesian content
│   ├── index.md
│   ├── general/        # Blogger general guides
│   │   ├── installation.md
│   │   ├── navigation-menu.md
│   │   ├── social-icons.md
│   │   ├── blog-elements.md
│   │   └── image-upload.md
│   ├── wuzz/           # Blogger themes
│   ├── kutoko/
│   ├── evomagz/
│   ├── viomagz/
│   ├── linkmagz/
│   ├── viotoko/
│   └── wordpress/      # WordPress themes
│       ├── installation.md
│       └── sastrapro/
│           ├── configuration.md
│           └── optimization.md
├── en/                  # English content (mirrors id/)
│   ├── index.md
│   ├── general/
│   ├── [blogger-theme]/
│   └── wordpress/
│       ├── installation.md
│       └── [theme]/
│           ├── configuration.md
│           └── optimization.md
├── public/              # Static assets
│   ├── logo.svg
│   ├── og-image.svg
│   ├── robots.txt
│   ├── icons/          # Favicons (16-512px)
│   ├── images/         # Documentation screenshots
│   └── videos/         # Video tutorials
├── index.md             # Language selector page
├── wrangler.jsonc       # Cloudflare Pages config
├── CLAUDE.md            # Claude Code instructions
└── README.md

Important File Locations

File	Purpose
.vitepress/config.mts	VitePress config, sidebar, navbar, SEO
index.md	Language selector page
id/index.md	Indonesian homepage
en/index.md	English homepage
public/logo.svg	Website logo
public/og-image.svg	Open Graph social sharing image
public/robots.txt	SEO crawler directives
wrangler.jsonc	Cloudflare Pages deployment config

Checklist for Adding New Pages

• [ ] Create file at /id/[path]/[name].md (Indonesian)
• [ ] Create file at /en/[path]/[name].md (English)
• [ ] Update Indonesian sidebar in config.mts (locales.root, path: /id/)
• [ ] Update English sidebar in config.mts (locales.en, path: /en/)
• [ ] Ensure file name uses English

Checklist for Adding New Blogger Theme

• [ ] Create folder /id/[theme-name]/ (Indonesian)
• [ ] Create folder /en/[theme-name]/ (English)
• [ ] Create configuration.md in both folders
• [ ] Update sidebar in both languages (under "Tema Blogger" / "Blogger Themes")
• [ ] Update features in id/index.md (Indonesian) - optional
• [ ] Update features in en/index.md (English) - optional

Checklist for Adding New WordPress Theme

• [ ] Create folder /id/wordpress/[theme-name]/ (Indonesian)
• [ ] Create folder /en/wordpress/[theme-name]/ (English)
• [ ] Create configuration.md in both folders
• [ ] Update sidebar in both languages (under "Tema WordPress" / "WordPress Themes")
• [ ] Update features in id/index.md (Indonesian) - optional
• [ ] Update features in en/index.md (English) - optional

Do Not

• Do not use Indonesian file/folder names
• Do not create pages in only one language
• Do not forget to update sidebar after adding pages
• Do not push to remote without user confirmation

SEO Features (config.mts)

The configuration includes automatic SEO optimizations:

• Canonical URLs: Auto-generated via transformHead() function
• Hreflang tags: Auto-generated for language variants (id ↔ en)
• Sitemap: Auto-generated at build time
• Meta tags: Open Graph and Twitter Card tags configured
• Robots.txt: Located at public/robots.txt

Content Conventions

• Use ::: info, ::: tip, ::: warning for callout boxes
• Reference images as /images/filename.png (stored in public/images/)
• Link to tool generators: https://sugeng.id/tools/[tool-name].html
• Include prerequisites at the top of theme-specific guides
• Use tables for settings/options overview

Deployment

Site is deployed on Cloudflare Pages (see wrangler.jsonc). Build output goes to .vitepress/dist/.

Link Checking

Use linkinator to check for broken links:

npx linkinator https://docs.sugeng.id --recurse