mdtail.dev/.github/workflows/website.yml at main · super3/mdtail.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
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