Skip to content

Commit 4b83efd

Browse files
rootroot
root
authored and
root
committed
Add GitHub Actions workflow for automatic GitHub Pages deployment
1 parent 6807f77 commit 4b83efd

File tree

2 files changed

+176
-0
lines changed

2 files changed

+176
-0
lines changed

‎.github/workflows/deploy-github-pages.yml‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
name: Deploy GitHub Pages (Simple)
2+
3+
on:
4+
push:
5+
branches: [ main ]
6+
paths:
7+
- 'docs/**'
8+
workflow_dispatch:
9+
10+
permissions:
11+
contents: read
12+
pages: write
13+
id-token: write
14+
15+
concurrency:
16+
group: "pages"
17+
cancel-in-progress: false
18+
19+
jobs:
20+
deploy:
21+
runs-on: ubuntu-latest
22+
steps:
23+
- name: Checkout
24+
uses: actions/checkout@v4
25+
26+
- name: Setup Pages
27+
uses: actions/configure-pages@v4
28+
29+
- name: Upload artifact
30+
uses: actions/upload-pages-artifact@v3
31+
with:
32+
path: ./docs
33+
34+
- name: Deploy to GitHub Pages
35+
id: deployment
36+
uses: actions/deploy-pages@v4
37+
environment:
38+
name: github-pages
39+
url: ${{ steps.deployment.outputs.page_url }}

‎docs/index.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Magentic-UI</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown-light.min.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
11+
<style>
12+
body {
13+
margin: 0;
14+
padding: 0;
15+
background-color: #ffffff;
16+
}
17+
.markdown-body {
18+
box-sizing: border-box;
19+
min-width: 200px;
20+
max-width: 980px;
21+
margin: 0 auto;
22+
padding: 45px;
23+
}
24+
@media (max-width: 767px) {
25+
.markdown-body {
26+
padding: 15px;
27+
}
28+
}
29+
.loading {
30+
text-align: center;
31+
padding: 50px;
32+
color: #666;
33+
}
34+
.error {
35+
text-align: center;
36+
padding: 50px;
37+
color: #d73a49;
38+
}
39+
/* GitHub-style header */
40+
.header {
41+
background-color: #24292f;
42+
color: white;
43+
padding: 16px 0;
44+
margin-bottom: 32px;
45+
}
46+
.header-content {
47+
max-width: 980px;
48+
margin: 0 auto;
49+
padding: 0 45px;
50+
display: flex;
51+
align-items: center;
52+
gap: 16px;
53+
}
54+
.header h1 {
55+
margin: 0;
56+
font-size: 20px;
57+
font-weight: 600;
58+
}
59+
.header a {
60+
color: #7d8590;
61+
text-decoration: none;
62+
}
63+
.header a:hover {
64+
color: white;
65+
}
66+
@media (max-width: 767px) {
67+
.header-content {
68+
padding: 0 15px;
69+
}
70+
}
71+
</style>
72+
</head>
73+
<body>
74+
<div class="header">
75+
<div class="header-content">
76+
<h1>Magentic-UI</h1>
77+
<span>•</span>
78+
<a href="https://github.com/microsoft/magentic-ui">View on GitHub</a>
79+
<span>•</span>
80+
<a href="https://github.com/microsoft/magentic-ui/releases">Releases</a>
81+
</div>
82+
</div>
83+
84+
<article class="markdown-body">
85+
<div id="loading" class="loading">Loading README...</div>
86+
<div id="content" style="display: none;"></div>
87+
<div id="error" class="error" style="display: none;">
88+
<h2>Error loading README</h2>
89+
<p>Please visit the <a href="https://github.com/microsoft/magentic-ui">GitHub repository</a> to view the latest content.</p>
90+
</div>
91+
</article>
92+
93+
<script>
94+
// Configure marked options
95+
marked.setOptions({
96+
highlight: function(code, lang) {
97+
if (lang && hljs.getLanguage(lang)) {
98+
return hljs.highlight(code, { language: lang }).value;
99+
} else {
100+
return hljs.highlightAuto(code).value;
101+
}
102+
},
103+
breaks: true,
104+
gfm: true
105+
});
106+
107+
// Fetch and display README content
108+
fetch('https://raw.githubusercontent.com/microsoft/magentic-ui/main/README.md')
109+
.then(response => {
110+
if (!response.ok) {
111+
throw new Error('Failed to fetch README');
112+
}
113+
return response.text();
114+
})
115+
.then(markdown => {
116+
// Fix relative image paths to point to GitHub
117+
const fixedMarkdown = markdown.replace(
118+
/!\[([^\]]*)\]\((?!https?:\/\/)([^)]+)\)/g,
119+
'![$1](https://raw.githubusercontent.com/microsoft/magentic-ui/main/$2)'
120+
);
121+
122+
const html = marked.parse(fixedMarkdown);
123+
document.getElementById('loading').style.display = 'none';
124+
document.getElementById('content').style.display = 'block';
125+
document.getElementById('content').innerHTML = html;
126+
127+
// Initialize syntax highlighting
128+
hljs.highlightAll();
129+
})
130+
.catch(error => {
131+
console.error('Error:', error);
132+
document.getElementById('loading').style.display = 'none';
133+
document.getElementById('error').style.display = 'block';
134+
});
135+
</script>
136+
</body>
137+
</html>

0 commit comments

Comments
 (0)