Skip to content

Commit ac3bd5f

Browse files
super3claude
super3
and
claude
committed
Add GitHub Pages website workflow
- Create website.yml workflow to deploy README as landing page - Custom hero section with badges and install command - GitHub-styled markdown rendering with responsive design - Auto-deploy to mdtail.dev on README updates - Add copy-to-clipboard functionality for code blocks 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 9d4df45 commit ac3bd5f

1 file changed

Lines changed: 185 additions & 0 deletions

File tree

‎.github/workflows/website.yml‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
name: Deploy Website
2+
3+
on:
4+
push:
5+
branches: [main]
6+
paths:
7+
- 'README.md'
8+
- '.github/workflows/website.yml'
9+
- 'docs/**'
10+
workflow_dispatch:
11+
12+
permissions:
13+
contents: read
14+
pages: write
15+
id-token: write
16+
17+
concurrency:
18+
group: "pages"
19+
cancel-in-progress: false
20+
21+
jobs:
22+
build:
23+
runs-on: ubuntu-latest
24+
steps:
25+
- name: Checkout
26+
uses: actions/checkout@v4
27+
28+
- name: Setup Pages
29+
uses: actions/configure-pages@v4
30+
31+
- name: Create website from README
32+
run: |
33+
mkdir -p _site
34+
cat > _site/index.html << 'EOF'
35+
<!DOCTYPE html>
36+
<html lang="en">
37+
<head>
38+
<meta charset="UTF-8">
39+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
40+
<title>mdtail - Terminal Markdown Viewer</title>
41+
<meta name="description" content="A simple terminal app that displays and live-refreshes markdown files">
42+
<meta property="og:title" content="mdtail">
43+
<meta property="og:description" content="Terminal markdown viewer with live refresh">
44+
<meta property="og:url" content="https://mdtail.dev">
45+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.0/github-markdown-light.css">
46+
<style>
47+
body {
48+
box-sizing: border-box;
49+
min-width: 200px;
50+
max-width: 980px;
51+
margin: 0 auto;
52+
padding: 45px;
53+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
54+
}
55+
.markdown-body {
56+
box-sizing: border-box;
57+
min-width: 200px;
58+
max-width: 980px;
59+
margin: 0 auto;
60+
}
61+
@media (max-width: 767px) {
62+
body {
63+
padding: 15px;
64+
}
65+
}
66+
.hero {
67+
text-align: center;
68+
padding: 3rem 0;
69+
margin-bottom: 2rem;
70+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
71+
color: white;
72+
border-radius: 8px;
73+
}
74+
.hero h1 {
75+
margin: 0 0 1rem 0;
76+
font-size: 3rem;
77+
font-weight: 700;
78+
}
79+
.hero p {
80+
margin: 0 0 2rem 0;
81+
font-size: 1.2rem;
82+
opacity: 0.95;
83+
}
84+
.hero .badges {
85+
display: flex;
86+
gap: 0.5rem;
87+
justify-content: center;
88+
flex-wrap: wrap;
89+
}
90+
.install-command {
91+
background: #1e1e1e;
92+
color: #d4d4d4;
93+
padding: 1rem;
94+
border-radius: 6px;
95+
font-family: 'Monaco', 'Menlo', monospace;
96+
font-size: 1.1rem;
97+
margin: 2rem 0;
98+
position: relative;
99+
}
100+
.install-command::before {
101+
content: "$";
102+
color: #569cd6;
103+
margin-right: 0.5rem;
104+
}
105+
code {
106+
background: #f6f8fa;
107+
padding: 0.2rem 0.4rem;
108+
border-radius: 3px;
109+
font-size: 0.9em;
110+
}
111+
pre code {
112+
background: none;
113+
padding: 0;
114+
}
115+
</style>
116+
</head>
117+
<body>
118+
<div class="hero">
119+
<h1>📝 mdtail</h1>
120+
<p>Terminal markdown viewer with live refresh</p>
121+
<div class="badges">
122+
<img src="https://badge.fury.io/js/mdtail.svg" alt="npm version">
123+
<img src="https://img.shields.io/github/actions/workflow/status/super3/mdtail.dev/test.yml?branch=main&label=tests" alt="Test Status">
124+
<img src="https://coveralls.io/repos/github/super3/mdtail.dev/badge.svg?branch=main" alt="Coverage Status">
125+
<img src="https://img.shields.io/badge/license-MIT-blue.svg?label=license" alt="License">
126+
</div>
127+
</div>
128+
129+
<div class="install-command">
130+
npm install -g mdtail
131+
</div>
132+
133+
<article class="markdown-body">
134+
EOF
135+
136+
# Convert README.md to HTML (skip the title and first badges since we have custom hero)
137+
npm install -g marked
138+
tail -n +9 README.md | marked >> _site/index.html
139+
140+
cat >> _site/index.html << 'EOF'
141+
</article>
142+
143+
<script>
144+
// Add copy functionality to code blocks
145+
document.querySelectorAll('pre').forEach(block => {
146+
block.style.position = 'relative';
147+
const button = document.createElement('button');
148+
button.textContent = 'Copy';
149+
button.style.position = 'absolute';
150+
button.style.top = '8px';
151+
button.style.right = '8px';
152+
button.style.padding = '4px 8px';
153+
button.style.fontSize = '12px';
154+
button.style.borderRadius = '4px';
155+
button.style.border = '1px solid #d1d5da';
156+
button.style.background = '#f6f8fa';
157+
button.style.cursor = 'pointer';
158+
button.onclick = () => {
159+
const code = block.querySelector('code');
160+
navigator.clipboard.writeText(code.textContent);
161+
button.textContent = 'Copied!';
162+
setTimeout(() => button.textContent = 'Copy', 2000);
163+
};
164+
block.appendChild(button);
165+
});
166+
</script>
167+
</body>
168+
</html>
169+
EOF
170+
171+
- name: Upload artifact
172+
uses: actions/upload-pages-artifact@v3
173+
with:
174+
path: '_site'
175+
176+
deploy:
177+
environment:
178+
name: github-pages
179+
url: ${{ steps.deployment.outputs.page_url }}
180+
runs-on: ubuntu-latest
181+
needs: build
182+
steps:
183+
- name: Deploy to GitHub Pages
184+
id: deployment
185+
uses: actions/deploy-pages@v4

0 commit comments

Comments
 (0)