From f23586807c23c5d021bd5ad8228e045f4c917bcf Mon Sep 17 00:00:00 2001 From: Muhamad Sazwan Bin Ismail Date: Fri, 17 Oct 2025 05:58:22 +0800 Subject: [PATCH] Implement HTML support with preview and documentation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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' Project Documentation - Sazwan Ismail

🚀 Project Documentation

Developed by: Sazwan Ismail

Comprehensive documentation for the project

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 {% block title %}Project Docs - Sazwan Ismail{% endblock %}
{% block content %} {% endblock %}
``` ## 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""" {self.project_name} - {self.developer}

🚀 {self.project_name}

Developer: {self.developer}

📚 Documentation

Complete project documentation

🔧 Build Status

Loading...

💬 Live Chat

""" 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 Package Information - Sazwan Ismail

Package Configuration

Primary Developer: Sazwan Ismail

HTML Support Features:

  • Live Documentation Preview
  • Interactive API Browser
  • Real-time Build Status
  • Community Chat Integration
``` ## 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. --- .allai/Html support | 482 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 482 insertions(+) create mode 100644 .allai/Html support diff --git a/.allai/Html support b/.allai/Html support new file mode 100644 index 0000000..3c6e954 --- /dev/null +++ b/.allai/Html support @@ -0,0 +1,482 @@ +I'll help you set up HTML support for your project. Here are several ways to add HTML preview, documentation, and support features: + +## 1. HTML Preview Setup + +### Basic HTML Preview Workflow +```yaml +# .github/workflows/html-preview.yml +name: HTML Preview + +on: + push: + branches: [main, master] + pull_request: + branches: [main, master] + +permissions: + contents: read + pages: write + id-token: write + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Pages + uses: actions/configure-pages@v3 + + - name: Build HTML documentation + run: | + # Create basic HTML structure if not exists + mkdir -p _site + cp -r docs/* _site/ 2>/dev/null || echo "No docs directory" + # Generate index.html if missing + if [ ! -f "_site/index.html" ]; then + cat > _site/index.html << EOF + + + + Project Documentation + + + + +
+

Project Documentation

+

Auto-generated documentation preview

+ +
+ + + EOF + fi + + - name: Upload artifact + uses: actions/upload-pages-artifact@v2 + with: + path: _site/ + + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v2 +``` + +## 2. Interactive HTML Comment System + +### HTML Comment Chat Interface +```html + + + + + + Project Discussion + + + +
+
+

💬 Project Discussion

+

Chat with the community and get support

+
+ +
+
+ 👋 Welcome! How can I help you today? +
+
+ +
+ + +
+ + +
+ + + + +``` + +## 3. Complete Documentation System + +### Project Documentation Structure +``` +docs/ +├── index.html +├── api/ +│ ├── index.html +│ └── reference.html +├── guides/ +│ ├── getting-started.html +│ └── advanced.html +└── assets/ + ├── css/ + │ └── style.css + └── js/ + └── app.js +``` + +### Main Documentation Page +```html + + + + + + Project Documentation + + + + + +
+

Project Documentation

+
+

🚀 Getting Started

+

Welcome to our project! This guide will help you get started.

+
+ +
+

🔧 API Reference

+

Complete API documentation and examples.

+
+ +
+

💬 Support & Community

+
+
+

GitHub Discussions

+

Join the conversation

+
+
+

Live Chat

+

Real-time support

+
+
+
+
+ + + + + + + +``` + +## 4. CSS Styling (assets/css/style.css) +```css +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + display: flex; + min-height: 100vh; + background: #f8f9fa; +} + +.sidebar { + width: 300px; + background: #2d3748; + color: white; + padding: 20px; + position: fixed; + height: 100vh; + overflow-y: auto; +} + +.content { + flex: 1; + margin-left: 300px; + padding: 40px; + max-width: 800px; +} + +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.5); +} + +.modal-content { + background: white; + margin: 50px auto; + padding: 30px; + border-radius: 12px; + max-width: 600px; +} + +.tiers { + display: flex; + gap: 20px; + margin-top: 20px; +} + +.tier { + flex: 1; + padding: 20px; + border: 2px solid #e2e8f0; + border-radius: 8px; + text-align: center; +} + +.tier.featured { + border-color: #4299e1; + transform: scale(1.05); +} +``` + +## 5. Integration with Existing Workflow + +Add this to your existing CMake workflow: +```yaml +# Add to your existing cmake-multi-platform.yml +- name: Generate HTML Documentation + if: matrix.os == 'ubuntu-22.04' && matrix.compiler == 'gcc' + run: | + mkdir -p docs + # Generate Doxygen docs if available + if command -v doxygen &> /dev/null; then + doxygen Doxyfile 2>/dev/null || echo "Doxygen not configured" + fi + # Create basic HTML structure + cp -r templates/docs/* docs/ 2>/dev/null || echo "No template docs" + +- name: Upload HTML Documentation + uses: actions/upload-artifact@v4 + with: + name: html-documentation + path: docs/ + retention-days: 30 +``` + +This setup provides: +- ✅ **HTML Preview** via GitHub Pages +- ✅ **Comment Chat** interface +- ✅ **Sponsorship Tiers** display +- ✅ **Professional documentation** system +- ✅ **Integration** with your existing CI/CD + +Would you like me to customize any specific part of this HTML support system?