Add demo.html to GitHub Pages deployment #3
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
| name: Deploy Website | |
| on: | |
| push: | |
| branches: [main] | |
| paths: | |
| - 'README.md' | |
| - '.github/workflows/website.yml' | |
| - 'docs/**' | |
| - 'demo.html' | |
| workflow_dispatch: | |
| permissions: | |
| contents: read | |
| pages: write | |
| id-token: write | |
| concurrency: | |
| group: "pages" | |
| cancel-in-progress: false | |
| jobs: | |
| build: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v4 | |
| - name: Setup Pages | |
| uses: actions/configure-pages@v4 | |
| - name: Create website from README | |
| run: | | |
| mkdir -p _site | |
| # Copy demo.html if it exists | |
| if [ -f demo.html ]; then | |
| cp demo.html _site/ | |
| fi | |
| cat > _site/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>mdtail - Terminal Markdown Viewer</title> | |
| <meta name="description" content="A simple terminal app that displays and live-refreshes markdown files"> | |
| <meta property="og:title" content="mdtail"> | |
| <meta property="og:description" content="Terminal markdown viewer with live refresh"> | |
| <meta property="og:url" content="https://mdtail.dev"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.0/github-markdown-light.css"> | |
| <style> | |
| body { | |
| box-sizing: border-box; | |
| min-width: 200px; | |
| max-width: 980px; | |
| margin: 0 auto; | |
| padding: 45px; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; | |
| } | |
| .markdown-body { | |
| box-sizing: border-box; | |
| min-width: 200px; | |
| max-width: 980px; | |
| margin: 0 auto; | |
| } | |
| @media (max-width: 767px) { | |
| body { | |
| padding: 15px; | |
| } | |
| } | |
| .hero { | |
| text-align: center; | |
| padding: 3rem 0; | |
| margin-bottom: 2rem; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border-radius: 8px; | |
| } | |
| .hero h1 { | |
| margin: 0 0 1rem 0; | |
| font-size: 3rem; | |
| font-weight: 700; | |
| } | |
| .hero p { | |
| margin: 0 0 2rem 0; | |
| font-size: 1.2rem; | |
| opacity: 0.95; | |
| } | |
| .hero .badges { | |
| display: flex; | |
| gap: 0.5rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .install-command { | |
| background: #1e1e1e; | |
| color: #d4d4d4; | |
| padding: 1rem; | |
| border-radius: 6px; | |
| font-family: 'Monaco', 'Menlo', monospace; | |
| font-size: 1.1rem; | |
| margin: 2rem 0; | |
| position: relative; | |
| } | |
| .install-command::before { | |
| content: "$"; | |
| color: #569cd6; | |
| margin-right: 0.5rem; | |
| } | |
| code { | |
| background: #f6f8fa; | |
| padding: 0.2rem 0.4rem; | |
| border-radius: 3px; | |
| font-size: 0.9em; | |
| } | |
| pre code { | |
| background: none; | |
| padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="hero"> | |
| <h1>📝 mdtail</h1> | |
| <p>Terminal markdown viewer with live refresh</p> | |
| <div class="badges"> | |
| <img src="https://badge.fury.io/js/mdtail.svg" alt="npm version"> | |
| <img src="https://img.shields.io/github/actions/workflow/status/super3/mdtail.dev/test.yml?branch=main&label=tests" alt="Test Status"> | |
| <img src="https://coveralls.io/repos/github/super3/mdtail.dev/badge.svg?branch=main" alt="Coverage Status"> | |
| <img src="https://img.shields.io/badge/license-MIT-blue.svg?label=license" alt="License"> | |
| </div> | |
| </div> | |
| <div class="install-command"> | |
| npm install -g mdtail | |
| </div> | |
| <article class="markdown-body"> | |
| EOF | |
| # Convert README.md to HTML (skip the title and first badges since we have custom hero) | |
| npm install marked | |
| tail -n +9 README.md | npx marked >> _site/index.html | |
| cat >> _site/index.html << 'EOF' | |
| </article> | |
| <script> | |
| // Add copy functionality to code blocks | |
| document.querySelectorAll('pre').forEach(block => { | |
| block.style.position = 'relative'; | |
| const button = document.createElement('button'); | |
| button.textContent = 'Copy'; | |
| button.style.position = 'absolute'; | |
| button.style.top = '8px'; | |
| button.style.right = '8px'; | |
| button.style.padding = '4px 8px'; | |
| button.style.fontSize = '12px'; | |
| button.style.borderRadius = '4px'; | |
| button.style.border = '1px solid #d1d5da'; | |
| button.style.background = '#f6f8fa'; | |
| button.style.cursor = 'pointer'; | |
| button.onclick = () => { | |
| const code = block.querySelector('code'); | |
| navigator.clipboard.writeText(code.textContent); | |
| button.textContent = 'Copied!'; | |
| setTimeout(() => button.textContent = 'Copy', 2000); | |
| }; | |
| block.appendChild(button); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| EOF | |
| - name: Upload artifact | |
| uses: actions/upload-pages-artifact@v3 | |
| 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@v4 |