Skip to content

Commit 2f8c00b

Browse files
husseinmozannarhusseinmozannar
authored
Add github pages (#342)
1 parent d72967c commit 2f8c00b

File tree

2 files changed

+180
-0
lines changed

2 files changed

+180
-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: true
18+
19+
jobs:
20+
deploy:
21+
environment:
22+
name: github-pages
23+
url: ${{ steps.deployment.outputs.page_url }}
24+
runs-on: ubuntu-latest
25+
steps:
26+
- name: Checkout
27+
uses: actions/checkout@v4
28+
29+
- name: Setup Pages
30+
uses: actions/configure-pages@v4
31+
32+
- name: Upload artifact
33+
uses: actions/upload-pages-artifact@v3
34+
with:
35+
path: ./docs
36+
37+
- name: Deploy to GitHub Pages
38+
id: deployment
39+
uses: actions/deploy-pages@v4

‎docs/index.html‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
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+
let fixedMarkdown = markdown
118+
// Fix Markdown image syntax: ![alt](path)
119+
.replace(/!\[([^\]]*)\]\((?!https?:\/\/)([^)]+)\)/g, '![$1](https://raw.githubusercontent.com/microsoft/magentic-ui/main/$2)')
120+
// Fix HTML img tags: <img src="path">
121+
.replace(/<img([^>]+)src="(?!https?:\/\/)([^"]+)"/g, '<img$1src="https://raw.githubusercontent.com/microsoft/magentic-ui/main/$2"')
122+
// Convert GitHub video URLs to embedded video players
123+
.replace(/https:\/\/github\.com\/user-attachments\/assets\/([a-f0-9-]+)/g,
124+
'<video controls width="100%" style="max-width: 800px;"><source src="https://github.com/user-attachments/assets/$1" type="video/mp4">Your browser does not support the video tag.</video>');
125+
126+
const html = marked.parse(fixedMarkdown);
127+
document.getElementById('loading').style.display = 'none';
128+
document.getElementById('content').style.display = 'block';
129+
document.getElementById('content').innerHTML = html;
130+
131+
// Initialize syntax highlighting
132+
hljs.highlightAll();
133+
})
134+
.catch(error => {
135+
console.error('Error:', error);
136+
document.getElementById('loading').style.display = 'none';
137+
document.getElementById('error').style.display = 'block';
138+
});
139+
</script>
140+
</body>
141+
</html>

0 commit comments

Comments
 (0)