Skip to content

Commit b66bae2

Browse files
committed
adjust docs UI
1 parent 14369ad commit b66bae2

6 files changed

Lines changed: 229 additions & 22 deletions

File tree

README.md

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,3 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
206206
[⬆ Back to Top](#codewiki-automated-repository-level-documentation-generation)
207207

208208
</div>
209-
210-
/Users/anhnh/Documents/vscode/titan-sight/.venv/lib/python3.13/site-packages/codewiki/templates/github_pages/index.html
211-
/Users/anhnh/Documents/vscode/titan-sight/.venv/lib/python3.13/site-packages/codewiki/cli/templates/github_pages/index.html

codewiki/cli/adapters/doc_generator.py

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -205,26 +205,22 @@ def _run_html_generation(self):
205205

206206
from codewiki.cli.html_generator import HTMLGenerator
207207

208-
# Create module tree placeholder
209-
module_tree = {
210-
"Overview": {
211-
"description": "Repository overview",
212-
"components": [],
213-
"children": {}
214-
}
215-
}
216-
217208
# Generate HTML
218209
html_generator = HTMLGenerator()
210+
211+
if self.verbose:
212+
self.progress_tracker.update_stage(0.3, "Loading module tree and metadata...")
213+
219214
repo_info = html_generator.detect_repository_info(self.repo_path)
220215

216+
# Generate HTML with auto-loading of module_tree and metadata from docs_dir
221217
output_path = self.output_dir / "index.html"
222218
html_generator.generate(
223219
output_path=output_path,
224220
title=repo_info['name'],
225-
module_tree=module_tree,
226221
repository_url=repo_info['url'],
227-
github_pages_url=repo_info['github_pages_url']
222+
github_pages_url=repo_info['github_pages_url'],
223+
docs_dir=self.output_dir # Auto-load module_tree and metadata from here
228224
)
229225

230226
self.job.files_generated.append("index.html")

codewiki/cli/html_generator.py

Lines changed: 77 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,54 @@ def __init__(self, template_dir: Optional[Path] = None):
3636
self.styles = self._load_template("styles.css")
3737
self.app_script = self._load_template("app.js")
3838

39+
def load_module_tree(self, docs_dir: Path) -> Dict[str, Any]:
40+
"""
41+
Load module tree from documentation directory.
42+
43+
Args:
44+
docs_dir: Documentation directory path
45+
46+
Returns:
47+
Module tree structure
48+
"""
49+
module_tree_path = docs_dir / "module_tree.json"
50+
if not module_tree_path.exists():
51+
# Fallback to a simple structure
52+
return {
53+
"Overview": {
54+
"description": "Repository overview",
55+
"components": [],
56+
"children": {}
57+
}
58+
}
59+
60+
try:
61+
content = safe_read(module_tree_path)
62+
return json.loads(content)
63+
except Exception as e:
64+
raise FileSystemError(f"Failed to load module tree: {e}")
65+
66+
def load_metadata(self, docs_dir: Path) -> Optional[Dict[str, Any]]:
67+
"""
68+
Load metadata from documentation directory.
69+
70+
Args:
71+
docs_dir: Documentation directory path
72+
73+
Returns:
74+
Metadata dictionary or None if not found
75+
"""
76+
metadata_path = docs_dir / "metadata.json"
77+
if not metadata_path.exists():
78+
return None
79+
80+
try:
81+
content = safe_read(metadata_path)
82+
return json.loads(content)
83+
except Exception:
84+
# Non-critical, return None
85+
return None
86+
3987
def _load_template(self, filename: str) -> str:
4088
"""
4189
Load a template file.
@@ -59,22 +107,44 @@ def generate(
59107
self,
60108
output_path: Path,
61109
title: str,
62-
module_tree: Dict[str, Any],
110+
module_tree: Optional[Dict[str, Any]] = None,
63111
repository_url: Optional[str] = None,
64112
github_pages_url: Optional[str] = None,
65-
config: Optional[Dict[str, Any]] = None
113+
config: Optional[Dict[str, Any]] = None,
114+
docs_dir: Optional[Path] = None,
115+
metadata: Optional[Dict[str, Any]] = None
66116
):
67117
"""
68118
Generate HTML documentation viewer.
69119
70120
Args:
71121
output_path: Output file path (index.html)
72122
title: Documentation title
73-
module_tree: Module tree structure
123+
module_tree: Module tree structure (auto-loaded from docs_dir if not provided)
74124
repository_url: GitHub repository URL
75125
github_pages_url: Expected GitHub Pages URL
76126
config: Additional configuration
127+
docs_dir: Documentation directory (for auto-loading module_tree and metadata)
128+
metadata: Metadata dictionary (auto-loaded from docs_dir if not provided)
77129
"""
130+
# Auto-load module tree if docs_dir provided
131+
if docs_dir and module_tree is None:
132+
module_tree = self.load_module_tree(docs_dir)
133+
134+
# Auto-load metadata if docs_dir provided
135+
if docs_dir and metadata is None:
136+
metadata = self.load_metadata(docs_dir)
137+
138+
# Ensure module_tree exists
139+
if module_tree is None:
140+
module_tree = {
141+
"Overview": {
142+
"description": "Repository overview",
143+
"components": [],
144+
"children": {}
145+
}
146+
}
147+
78148
# Build configuration
79149
full_config = {
80150
"title": title,
@@ -104,6 +174,10 @@ def generate(
104174
}
105175
}
106176

177+
# Add metadata if available
178+
if metadata:
179+
full_config["metadata"] = metadata
180+
107181
if config:
108182
full_config.update(config)
109183

codewiki/templates/github_pages/app.js

Lines changed: 77 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,18 +85,21 @@
8585
}
8686
}
8787

88-
// Navigation tree renderer
88+
// Navigation tree renderer - improved to handle nested structures
8989
function renderNavTree(tree, container, depth = 0) {
9090
if (!tree || typeof tree !== 'object') return;
9191

9292
for (const [moduleName, moduleData] of Object.entries(tree)) {
93+
// Skip if this is just metadata
94+
if (moduleName === 'description' || moduleName === 'components') continue;
95+
9396
const item = document.createElement('div');
9497
item.className = 'nav-item';
9598
item.style.paddingLeft = `${depth * 1}rem`;
9699

97100
const link = document.createElement('a');
98101
link.href = `#/${moduleName}.md`;
99-
link.textContent = moduleName;
102+
link.textContent = formatModuleName(moduleName);
100103
link.className = 'nav-link';
101104

102105
// Highlight active link
@@ -108,13 +111,75 @@
108111
item.appendChild(link);
109112
container.appendChild(item);
110113

111-
// Render children recursively
112-
if (moduleData.children && Object.keys(moduleData.children).length > 0) {
114+
// Render children recursively if they exist
115+
if (moduleData && moduleData.children && Object.keys(moduleData.children).length > 0) {
113116
renderNavTree(moduleData.children, container, depth + 1);
114117
}
115118
}
116119
}
117120

121+
// Format module name for display
122+
function formatModuleName(name) {
123+
// Replace underscores and hyphens with spaces, capitalize words
124+
return name
125+
.replace(/[_-]/g, ' ')
126+
.split(' ')
127+
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
128+
.join(' ');
129+
}
130+
131+
// Render metadata info box
132+
function renderMetadata(metadata) {
133+
if (!metadata || !metadata.generation_info) return null;
134+
135+
const metadataBox = document.createElement('div');
136+
metadataBox.style.cssText = `
137+
margin: 20px 0;
138+
padding: 15px;
139+
background: #f8fafc;
140+
border-radius: 8px;
141+
border: 1px solid #e2e8f0;
142+
font-size: 11px;
143+
line-height: 1.6;
144+
`;
145+
146+
const header = document.createElement('h4');
147+
header.textContent = 'GENERATION INFO';
148+
header.style.cssText = `
149+
margin: 0 0 10px 0;
150+
font-size: 11px;
151+
color: #64748b;
152+
text-transform: uppercase;
153+
letter-spacing: 0.05em;
154+
font-weight: 600;
155+
`;
156+
metadataBox.appendChild(header);
157+
158+
const info = metadata.generation_info;
159+
const contentDiv = document.createElement('div');
160+
contentDiv.style.color = '#475569';
161+
162+
let html = '';
163+
if (info.main_model) {
164+
html += `<div style="margin-bottom: 4px;"><strong>Model:</strong> ${info.main_model}</div>`;
165+
}
166+
if (info.timestamp) {
167+
const date = new Date(info.timestamp);
168+
html += `<div style="margin-bottom: 4px;"><strong>Generated:</strong> ${date.toLocaleString()}</div>`;
169+
}
170+
if (info.commit_id) {
171+
html += `<div style="margin-bottom: 4px;"><strong>Commit:</strong> ${info.commit_id.substring(0, 8)}</div>`;
172+
}
173+
if (metadata.statistics && metadata.statistics.total_components) {
174+
html += `<div><strong>Components:</strong> ${metadata.statistics.total_components}</div>`;
175+
}
176+
177+
contentDiv.innerHTML = html;
178+
metadataBox.appendChild(contentDiv);
179+
180+
return metadataBox;
181+
}
182+
118183
// Mobile menu toggle
119184
function initMobileMenu() {
120185
const sidebar = document.getElementById('sidebar');
@@ -149,6 +214,14 @@
149214
overviewItem.appendChild(overviewLink);
150215
navTree.appendChild(overviewItem);
151216

217+
// Add metadata info box if available
218+
if (CODEWIKI_CONFIG && CODEWIKI_CONFIG.metadata) {
219+
const metadataBox = renderMetadata(CODEWIKI_CONFIG.metadata);
220+
if (metadataBox) {
221+
navTree.appendChild(metadataBox);
222+
}
223+
}
224+
152225
// Add divider
153226
const divider = document.createElement('div');
154227
divider.style.borderTop = '1px solid #e1e4e8';

codewiki/templates/github_pages/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@ <h1 id="doc-title">{{TITLE}}</h1>
4343
</article>
4444
</main>
4545
</div>
46+
47+
<!-- Footer -->
48+
<footer id="footer" style="text-align: center; padding: 1rem; color: #6a737d; font-size: 0.75rem; border-top: 1px solid #e1e4e8;">
49+
Generated with <a href="https://github.com/your-org/codewiki" target="_blank" style="color: #0366d6; text-decoration: none;">CodeWiki</a>
50+
</footer>
4651
</div>
4752

4853
<!-- Configuration Data -->

codewiki/templates/github_pages/styles.css

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@ body {
1717
#app {
1818
display: flex;
1919
flex-direction: column;
20-
height: 100vh;
20+
min-height: 100vh;
21+
}
22+
23+
#footer {
24+
margin-top: auto;
2125
}
2226

2327
/* Header */
@@ -89,6 +93,7 @@ body {
8993
text-decoration: none;
9094
border-radius: 4px;
9195
transition: background 0.2s;
96+
font-size: 0.875rem;
9297
}
9398

9499
.nav-link:hover {
@@ -100,6 +105,25 @@ body {
100105
color: #ffffff;
101106
}
102107

108+
/* Support for deeply nested navigation items */
109+
.nav-item[style*="padding-left: 2rem"] .nav-link {
110+
font-size: 0.8125rem;
111+
color: #586069;
112+
}
113+
114+
.nav-item[style*="padding-left: 3rem"] .nav-link {
115+
font-size: 0.75rem;
116+
color: #6a737d;
117+
}
118+
119+
.metadata-box {
120+
margin: 1rem 0;
121+
padding: 1rem;
122+
background: #f8fafc;
123+
border-radius: 8px;
124+
border: 1px solid #e2e8f0;
125+
}
126+
103127
/* Content */
104128
#content {
105129
flex: 1;
@@ -214,6 +238,44 @@ body {
214238
margin: 0.5rem 0;
215239
}
216240

241+
#markdown-content blockquote {
242+
border-left: 4px solid #0366d6;
243+
padding: 0.5rem 1rem;
244+
margin: 1rem 0;
245+
background: #f6f8fa;
246+
color: #586069;
247+
}
248+
249+
#markdown-content img {
250+
max-width: 100%;
251+
height: auto;
252+
border-radius: 6px;
253+
margin: 1rem 0;
254+
}
255+
256+
#markdown-content hr {
257+
border: none;
258+
border-top: 1px solid #e1e4e8;
259+
margin: 2rem 0;
260+
}
261+
262+
/* Mermaid diagrams */
263+
.mermaid {
264+
background: #ffffff;
265+
border: 1px solid #e1e4e8;
266+
border-radius: 6px;
267+
padding: 1rem;
268+
margin: 1rem 0;
269+
text-align: center;
270+
}
271+
272+
/* Loading state */
273+
.loading {
274+
text-align: center;
275+
padding: 2rem;
276+
color: #586069;
277+
}
278+
217279
/* Responsive Design */
218280
@media (max-width: 768px) {
219281
#sidebar {

0 commit comments

Comments
 (0)