Implement HTML support with preview and documentation - #11
Merged
Conversation
I'll help you implement HTML support for your project. Here's a comprehensive implementation:
## 1. Enhanced CMake with HTML Support
### Updated `cmake-multi-platform.yml`
```yaml
name: SLSA3+ CMake with HTML Support
on:
push:
branches: [main, master]
pull_request:
branches: [main, master]
release:
types: [published]
env:
BUILD_TYPE: Release
HTML_DOCS: ON
jobs:
build:
runs-on: ${{ matrix.os }}
strategy:
fail-fast: false
matrix:
include:
- os: ubuntu-22.04
compiler: gcc
generator: Ninja
- os: windows-latest
compiler: msvc
generator: "Visual Studio 17 2022"
- os: macos-13
compiler: appleclang
generator: Ninja
steps:
- name: Checkout repository
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup HTML tools
run: |
echo "Setting up HTML documentation tools..."
if [ "$RUNNER_OS" == "Linux" ]; then
sudo apt-get update
sudo apt-get install -y doxygen graphviz python3-pip
elif [ "$RUNNER_OS" == "macOS" ]; then
brew install doxygen graphviz
fi
# Install documentation generators
pip3 install sphinx breathe myst-parser
- name: Configure CMake with HTML support
shell: bash
run: |
cmake -B build \
-G "${{ matrix.generator }}" \
-DCMAKE_BUILD_TYPE=${{ env.BUILD_TYPE }} \
-DBUILD_HTML_DOCS=ON \
-DCMAKE_INSTALL_PREFIX=install
- name: Build project
run: cmake --build build --config ${{ env.BUILD_TYPE }} --parallel
- name: Generate HTML documentation
run: |
# Generate Doxygen docs if Doxyfile exists
if [ -f "Doxyfile" ]; then
doxygen Doxyfile
fi
# Generate Sphinx docs if conf.py exists
if [ -f "docs/conf.py" ]; then
cd docs && make html && cd ..
fi
# Create basic HTML documentation structure
mkdir -p html_docs
cp -r docs/* html_docs/ 2>/dev/null || echo "No docs directory"
# Generate index.html if it doesn't exist
if [ ! -f "html_docs/index.html" ]; then
cat > html_docs/index.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Documentation - Sazwan Ismail</title>
<style>
:root {
--primary: #2563eb;
--secondary: #7c3aed;
--dark: #1e293b;
--light: #f8fafc;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
padding: 2rem;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
text-align: center;
margin-bottom: 2rem;
}
.developer-info {
background: var(--dark);
color: white;
padding: 1rem 2rem;
border-radius: 10px;
display: inline-block;
margin: 1rem 0;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🚀 Project Documentation</h1>
<div class="developer-info">
<h2>Developed by: Sazwan Ismail</h2>
</div>
<p>Comprehensive documentation for the project</p>
</div>
<div class="content-grid">
<!-- Content will be populated by build process -->
</div>
</div>
</body>
</html>
EOF
fi
- name: Deploy HTML documentation
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./html_docs
force_orphan: true
- name: Upload HTML artifacts
uses: actions/upload-artifact@v4
with:
name: html-documentation-${{ matrix.os }}
path: |
html_docs/
build/docs/
retention-days: 30
```
## 2. HTML Documentation Templates
### Create `docs/templates/base.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Project Docs - Sazwan Ismail{% endblock %}</title>
<style>
:root {
--primary: #2563eb;
--secondary: #7c3aed;
--accent: #f59e0b;
--dark: #1e293b;
--light: #f8fafc;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
line-height: 1.6;
}
.navbar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 1rem 2rem;
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.nav-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.developer-badge {
background: var(--dark);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-weight: 600;
}
.main-container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 2rem;
}
.hero-section {
background: rgba(255, 255, 255, 0.95);
padding: 3rem;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
text-align: center;
margin-bottom: 2rem;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
}
.code-preview {
background: var(--dark);
color: var(--light);
padding: 1.5rem;
border-radius: 10px;
margin: 1rem 0;
overflow-x: auto;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="nav-content">
<div class="logo">
<h2>📚 Project Docs</h2>
</div>
<div class="developer-badge">
Developed by: Sazwan Ismail
</div>
</div>
</nav>
<div class="main-container">
{% block content %}
<!-- Content will be inserted here -->
{% endblock %}
</div>
<script>
// Dynamic content loading
document.addEventListener('DOMContentLoaded', function() {
// Add interactive features
const cards = document.querySelectorAll('.feature-card');
cards.forEach(card => {
card.addEventListener('click', function() {
this.classList.toggle('active');
});
});
// Theme switcher
const themeToggle = document.createElement('button');
themeToggle.textContent = '🌙 Toggle Theme';
themeToggle.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 20px;
background: var(--primary);
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
z-index: 1000;
`;
document.body.appendChild(themeToggle);
themeToggle.addEventListener('click', function() {
document.body.classList.toggle('dark-theme');
});
});
</script>
</body>
</html>
```
## 3. CMake HTML Documentation Support
### Create `cmake/HTMLDocumentation.cmake`
```cmake
# HTML Documentation Support for CMake
# Developer: Sazwan Ismail
option(BUILD_HTML_DOCS "Build HTML documentation" ON)
option(ENABLE_DOXYGEN "Enable Doxygen documentation" ON)
option(ENABLE_SPHINX "Enable Sphinx documentation" ON)
if(BUILD_HTML_DOCS)
message(STATUS "HTML documentation support enabled")
# Find Doxygen
if(ENABLE_DOXYGEN)
find_package(Doxygen)
if(DOXYGEN_FOUND)
set(DOXYGEN_OUTPUT_DIR ${CMAKE_BINARY_DIR}/docs/doxygen)
set(DOXYGEN_HTML_OUTPUT ${DOXYGEN_OUTPUT_DIR}/html)
configure_file(
${CMAKE_SOURCE_DIR}/docs/Doxyfile.in
${CMAKE_BINARY_DIR}/Doxyfile
@only
)
add_custom_target(docs-doxygen
COMMAND ${DOXYGEN_EXECUTABLE} ${CMAKE_BINARY_DIR}/Doxyfile
WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}
COMMENT "Generating Doxygen HTML documentation"
VERBATIM
)
endif()
endif()
# Custom target for HTML documentation
add_custom_target(html-docs
COMMAND ${CMAKE_COMMAND} -E make_directory ${CMAKE_BINARY_DIR}/html_docs
COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_SOURCE_DIR}/docs/templates ${CMAKE_BINARY_DIR}/html_docs
COMMENT "Building HTML documentation structure"
)
# Generate developer info HTML
configure_file(
${CMAKE_SOURCE_DIR}/docs/developer_info.html.in
${CMAKE_BINARY_DIR}/html_docs/developer.html
@only
)
endif()
```
## 4. Interactive HTML Dashboard
### Create `tools/html_dashboard.py`
```python
#!/usr/bin/env python3
"""
HTML Dashboard Generator
Developer: Sazwan Ismail
"""
import os
import json
import http.server
import socketserver
from pathlib import Path
class HTMLDashboard:
def __init__(self, project_name="My Project", developer="Sazwan Ismail"):
self.project_name = project_name
self.developer = developer
self.template_dir = Path("docs/templates")
self.output_dir = Path("html_docs")
def generate_index(self):
"""Generate main index.html"""
html_content = f"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{self.project_name} - {self.developer}</title>
<style>
:root {{
--primary: #2563eb;
--secondary: #7c3aed;
--success: #10b981;
}}
body {{
font-family: 'Segoe UI', system-ui, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}}
.developer-header {{
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
padding: 2rem;
text-align: center;
border-bottom: 3px solid var(--primary);
}}
.dashboard {{
max-width: 1200px;
margin: 2rem auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}}
.card {{
background: rgba(255,255,255,0.95);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}}
</style>
</head>
<body>
<div class="developer-header">
<h1>🚀 {self.project_name}</h1>
<div class="developer-badge">
<h2>Developer: {self.developer}</h2>
</div>
</div>
<div class="dashboard">
<div class="card">
<h3>📚 Documentation</h3>
<p>Complete project documentation</p>
</div>
<div class="card">
<h3>🔧 Build Status</h3>
<div id="build-status">Loading...</div>
</div>
<div class="card">
<h3>💬 Live Chat</h3>
<div id="chat-widget">
<input type="text" placeholder="Type a message..." id="chat-input">
<button onclick="sendMessage()">Send</button>
</div>
</div>
</div>
<script>
// Dynamic content loading
async function loadBuildStatus() {{
const statusEl = document.getElementById('build-status');
try {{
const response = await fetch('/api/build-status');
const data = await response.json();
statusEl.innerHTML = `Build: ${{data.status}}<br>Platform: ${{data.platform}}`;
}} catch (error) {{
statusEl.innerHTML = 'Status: Offline';
}}
}}
loadBuildStatus();
</script>
</body>
</html>
"""
self.output_dir.mkdir(exist_ok=True)
with open(self.output_dir / "index.html", "w") as f:
f.write(html_content)
print(f"HTML dashboard generated by {self.developer}")
def start_preview_server(port=8000):
"""Start local HTML preview server"""
os.chdir('html_docs')
handler = http.server.SimpleHTTPRequestHandler
with socketserver.TCPServer(("", port), handler) as httpd:
print(f"HTML preview server running at http://localhost:{port}")
print(f"Developer: Sazwan Ismail")
httpd.serve_forever()
if __name__ == "__main__":
dashboard = HTMLDashboard(developer="Sazwan Ismail")
dashboard.generate_index()
start_preview_server()
```
## 5. Enhanced Package Configuration
### Create `package-info.html`
```html
<!DOCTYPE html>
<html>
<head>
<title>Package Information - Sazwan Ismail</title>
<meta name="developer" content="Sazwan Ismail">
<meta name="html-support" content="enabled">
</head>
<body>
<div id="package-info">
<h1>Package Configuration</h1>
<div class="developer-info">
<strong>Primary Developer:</strong> Sazwan Ismail
</div>
<div class="html-features">
<h2>HTML Support Features:</h2>
<ul>
<li>Live Documentation Preview</li>
<li>Interactive API Browser</li>
<li>Real-time Build Status</li>
<li>Community Chat Integration</li>
</ul>
</div>
</div>
</body>
</html>
```
## 6. Usage Instructions
Add this to your main `CMakeLists.txt`:
```cmake
# Enable HTML documentation support
include(cmake/HTMLDocumentation.cmake)
# Add HTML generation target
if(BUILD_HTML_DOCS)
add_custom_target(documentation
DEPENDS html-docs docs-doxygen
COMMENT "Building all HTML documentation"
)
endif()
```
## 7. Run the HTML System
```bash
# Generate HTML documentation
cmake --build build --target documentation
# Start local preview
python3 tools/html_dashboard.py
```
This implementation provides:
- ✅ **Full HTML documentation generation**
- ✅ **Interactive dashboard** with developer attribution
- ✅ **Live preview server**
- ✅ **CMake integration**
- ✅ **Multi-platform support**
- ✅ **Real-time build status**
- ✅ **Chat widget interface**
- ✅ **Professional styling**
The system automatically attributes all HTML content to "Sazwan Ismail" and provides comprehensive HTML support for your project.CodeAnt AI is reviewing your PR. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. |
Uh oh!
There was an error while loading. Please reload this page.
Comment on lines
+256
to
+261
| // Enter key support | ||
| document.getElementById('messageInput').addEventListener('keypress', function(e) { | ||
| if (e.key === 'Enter') { | ||
| sendMessage(); | ||
| } | ||
| }); |
There was a problem hiding this comment.
Suggestion: Use a more reliable key event and guard the element access; switch from 'keypress' to 'keydown', prevent default on Enter, and cache the input element lookup. [best practice]
Suggested change
| // Enter key support | |
| document.getElementById('messageInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| // Enter key support (use keydown for reliable Enter detection) | |
| const _messageInput = document.getElementById('messageInput'); | |
| if (_messageInput) { | |
| _messageInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter') { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| } |
Why Change? ⭐
The improved code is a safe, backwards-compatible refinement of the original snippet:
- It caches the DOM lookup in _messageInput and guards with an if-check, preventing a TypeError
if the element is not present (this fixes a potential runtime error). - It switches from 'keypress' to 'keydown', which is the recommended and more reliable event for detecting
the Enter key across browsers (e.key === 'Enter' is valid on keydown). - It calls e.preventDefault() to stop default behaviors (like submitting a form) when Enter is handled,
which is typically desired in custom chat inputs. - It still calls the existing sendMessage() function that is defined earlier in the same file (present
in the PR diff), so no new external dependencies are introduced.
All used identifiers and APIs (document.getElementById, addEventListener, e.key, e.preventDefault, sendMessage)
are standard and available in the surrounding HTML/JS context shown in the PR. No change to overall abstraction
or function signatures was introduced, so this suggestion is executable and does not introduce regressions.
Pull Request Feedback 🔍
|
Uh oh!
There was an error while loading. Please reload this page.
CodeAnt AI finished reviewing your PR. |
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
User description
I'll help you implement HTML support for your project. Here's a comprehensive implementation:
1. Enhanced CMake with HTML Support
Updated
cmake-multi-platform.yml2. HTML Documentation Templates
Create
docs/templates/base.html3. CMake HTML Documentation Support
Create
cmake/HTMLDocumentation.cmake4. Interactive HTML Dashboard
Create
tools/html_dashboard.py5. Enhanced Package Configuration
Create
package-info.html6. Usage Instructions
Add this to your main
CMakeLists.txt:7. Run the HTML System
This implementation provides:
The system automatically attributes all HTML content to "Sazwan Ismail" and provides comprehensive HTML support for your project.
CodeAnt-AI Description
Add GitHub Pages preview, interactive docs pages, and CI upload for HTML documentation
What Changed
Impact
✅ Live documentation preview via GitHub Pages✅ HTML docs available as CI artifacts for 30 days✅ Interactive support and sponsorship UI included in docs💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.