# Documentation System Usage Guide
## Overview
This documentation system is a real-time Markdown file display system designed to showcase Kotchasan Framework documentation.
## Key Features
### 🌐 Multi-language Support
- Supports Thai and English
- Real-time language switching
- Separate documentation files per language
### 🎨 Themes
- Light Mode
- Dark Mode
- Instant theme switching
### 📱 Responsive Design
- Supports all screen sizes
- Mobile-first design
- Touch-friendly interface
## Basic Usage
### 1. Opening the Documentation System
```bash
# Open index.html in browser
open index.html
# Or use local server
python3 -m http.server 8000
# Open http://localhost:8000
```
### 2. Navigation
#### Left Sidebar Menu
- Shows all available documents
- Click to switch documents
- Shows selected document status
#### Language Switching
- Click 🌐 TH/EN button
- System loads selected language documentation
- Supports real-time language switching
#### Theme Switching
- Click 🌙 Dark/☀️ Light button
- Changes background and text colors
- Saves settings in localStorage
### 3. Reading Documentation
#### Markdown Support
- Full Markdown syntax support
- Code highlighting for PHP, JavaScript, CSS
- Tables, lists, links
#### Code Blocks
```markdown
```php
<?php
echo "Hello World";
```
```
#### Tables
```markdown
| Column 1 | Column 2 |
|----------|----------|
| Data 1 | Data 2 |
```
## Document Management
### File Structure
```
docs/
├── th/ # Thai documentation
│ ├── index.md # Home page
│ ├── installation.md # Installation guide
│ ├── getting-started.md # Getting started guide
│ ├── api-reference.md # API Reference
│ └── usage-guide.md # Usage guide
└── en/ # English documentation
├── index.md
├── installation.md
├── getting-started.md
├── api-reference.md
└── usage-guide.md
```
### Adding New Documents
#### 1. Create Markdown Files
```bash
# Create new files
touch docs/th/new-document.md
touch docs/en/new-document.md
```
#### 2. Write Content
```markdown
# Document Title
## Introduction
Document content
## Main Content
- Item 1
- Item 2
## Summary
Content summary
```
#### 3. System Auto-loads
Files appear in left sidebar immediately
### File Naming
#### Naming Rules
- Use English only
- Use `-` instead of spaces
- Use lowercase only
- Avoid special characters
#### File Name Examples
```
✅ Correct:
- getting-started.md
- api-reference.md
- troubleshooting.md
❌ Wrong:
- Getting Started.md
- api_reference.md
- การใช้งาน.md
```
## Customization
### Changing Colors
#### Edit CSS Variables
```css
:root {
--bg-primary: #ffffff; /* Main background */
--bg-secondary: #f8f9fa; /* Secondary background */
--text-primary: #212529; /* Main text color */
--accent: #0d6efd; /* Accent color */
}
```
#### Dark Mode
```css
[data-theme="dark"] {
--bg-primary: #1a1d23;
--bg-secondary: #22252b;
--text-primary: #e9ecef;
--accent: #4dabf7;
}
```
### Adding Features
#### Add New Button
```html
<button class="btn" id="newFeatureBtn">🆕 New Feature</button>
```
```javascript
document.getElementById('newFeatureBtn').addEventListener('click', () => {
// New functionality
});
```
#### Add Menu
```javascript
// Add new menu
function addCustomMenu() {
const menu = document.getElementById('fileTree');
const newItem = document.createElement('div');
newItem.className = 'file-item';
newItem.textContent = 'New Menu';
newItem.onclick = () => loadCustomContent();
menu.appendChild(newItem);
}
```
## Troubleshooting
### Common Issues
#### 1. Files Not Loading
**Causes:**
- Wrong file name
- File not in correct location
- Incorrect file permissions
**Solutions:**
```bash
# Check file names
ls -la docs/th/
# Check permissions
chmod 644 docs/th/*.md
# Check structure
tree docs/
```
#### 2. Theme Not Changing
**Causes:**
- JavaScript error
- CSS not loading
- Browser cache
**Solutions:**
```javascript
// Check console
console.log('Theme:', currentTheme);
// Clear cache
localStorage.clear();
location.reload();
```
#### 3. Language Not Switching
**Causes:**
- .md file not available in selected language
- File names don't match
- JavaScript error
**Solutions:**
```javascript
// Check available files
console.log('Available docs:', Object.keys(docs));
// Check language
console.log('Current lang:', currentLang);
```
### Debugging
#### Open Developer Tools
```javascript
// Check status
console.log('Current language:', currentLang);
console.log('Current theme:', currentTheme);
console.log('Available documents:', Object.keys(docs));
console.log('Current document:', currentDoc);
```
#### Check Network
1. Open Developer Tools (F12)
2. Go to Network tab
3. Watch .md file loading
4. Check HTTP status codes
## Deployment
### 1. Prepare Files
```bash
# Create production files
cp -r docs/ production/
cp index.html production/
cp README.md production/
```
### 2. Upload
```bash
# Use rsync
rsync -avz production/ user@server:/var/www/docs/
# Use scp
scp -r production/* user@server:/var/www/docs/
```
### 3. Web Server Configuration
#### Apache
```apache
<VirtualHost *:80>
ServerName docs.yourdomain.com
DocumentRoot /var/www/docs
<Directory "/var/www/docs">
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
```
#### Nginx
```nginx
server {
listen 80;
server_name docs.yourdomain.com;
root /var/www/docs;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location ~ \.md$ {
add_header Content-Type text/plain;
}
}
```
## Maintenance
### Updating Documentation
```bash
# Update documentation
git pull origin main
# Check changes
git diff HEAD~1
# Test functionality
python3 -m http.server 8000
```
### Backup
```bash
# Backup files
tar -czf docs-backup-$(date +%Y%m%d).tar.gz docs/
# Backup database (if any)
mysqldump -u user -p database > backup.sql
```
### Usage Tracking
```javascript
// Add Google Analytics
gtag('config', 'GA_MEASUREMENT_ID');
// Track language changes
function trackLanguageChange(lang) {
gtag('event', 'language_change', {
'language': lang
});
}
// Track theme changes
function trackThemeChange(theme) {
gtag('event', 'theme_change', {
'theme': theme
});
}
```
## Further Development
### Adding New Features
#### 1. Search Functionality
```javascript
// Add search function
function addSearch() {
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.placeholder = 'Search documents...';
searchInput.onkeyup = (e) => searchDocuments(e.target.value);
document.querySelector('.header-controls').appendChild(searchInput);
}
function searchDocuments(query) {
const results = Object.keys(docs).filter(doc =>
doc.toLowerCase().includes(query.toLowerCase())
);
// Display search results
}
```
#### 2. Print Functionality
```javascript
// Add print function
function addPrintButton() {
const printBtn = document.createElement('button');
printBtn.className = 'btn';
printBtn.innerHTML = '🖨️ Print';
printBtn.onclick = () => window.print();
document.querySelector('.header-controls').appendChild(printBtn);
}
```
#### 3. Export Functionality
```javascript
// Add export function
function addExportButton() {
const exportBtn = document.createElement('button');
exportBtn.className = 'btn';
exportBtn.innerHTML = '📄 Export';
exportBtn.onclick = () => exportDocument();
document.querySelector('.header-controls').appendChild(exportBtn);
}
function exportDocument() {
const content = document.getElementById('content').innerHTML;
const blob = new Blob([content], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${currentDoc}.html`;
a.click();
}
```
---
**Note**: This guide covers the documentation system usage. For more information, please refer to the [API Reference](api-reference.md)