| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Magentic-UI</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown-light.min.css"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> |
| <style> |
| body { |
| margin: 0; |
| padding: 0; |
| background-color: #ffffff; |
| } |
| .markdown-body { |
| box-sizing: border-box; |
| min-width: 200px; |
| max-width: 980px; |
| margin: 0 auto; |
| padding: 45px; |
| } |
| @media (max-width: 767px) { |
| .markdown-body { |
| padding: 15px; |
| } |
| } |
| .loading { |
| text-align: center; |
| padding: 50px; |
| color: #666; |
| } |
| .error { |
| text-align: center; |
| padding: 50px; |
| color: #d73a49; |
| } |
| |
| .header { |
| background-color: #24292f; |
| color: white; |
| padding: 16px 0; |
| margin-bottom: 32px; |
| } |
| .header-content { |
| max-width: 980px; |
| margin: 0 auto; |
| padding: 0 45px; |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| } |
| .header h1 { |
| margin: 0; |
| font-size: 20px; |
| font-weight: 600; |
| } |
| .header a { |
| color: #7d8590; |
| text-decoration: none; |
| } |
| .header a:hover { |
| color: white; |
| } |
| @media (max-width: 767px) { |
| .header-content { |
| padding: 0 15px; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="header"> |
| <div class="header-content"> |
| <h1>Magentic-UI</h1> |
| <span>•</span> |
| <a href="https://github.com/microsoft/magentic-ui">View on GitHub</a> |
| <span>•</span> |
| <a href="https://github.com/microsoft/magentic-ui/releases">Releases</a> |
| </div> |
| </div> |
| |
| <article class="markdown-body"> |
| <div id="loading" class="loading">Loading README...</div> |
| <div id="content" style="display: none;"></div> |
| <div id="error" class="error" style="display: none;"> |
| <h2>Error loading README</h2> |
| <p>Please visit the <a href="https://github.com/microsoft/magentic-ui">GitHub repository</a> to view the latest content.</p> |
| </div> |
| </article> |
| |
| <script> |
| |
| marked.setOptions({ |
| highlight: function(code, lang) { |
| if (lang && hljs.getLanguage(lang)) { |
| return hljs.highlight(code, { language: lang }).value; |
| } else { |
| return hljs.highlightAuto(code).value; |
| } |
| }, |
| breaks: true, |
| gfm: true |
| }); |
| |
| |
| fetch('https://raw.githubusercontent.com/microsoft/magentic-ui/main/README.md') |
| .then(response => { |
| if (!response.ok) { |
| throw new Error('Failed to fetch README'); |
| } |
| return response.text(); |
| }) |
| .then(markdown => { |
| |
| let fixedMarkdown = markdown |
| |
| .replace(/!\[([^\]]*)\]\((?!https?:\/\/)([^)]+)\)/g, '') |
| |
| .replace(/<img([^>]+)src="(?!https?:\/\/)([^"]+)"/g, '<img$1src="https://raw.githubusercontent.com/microsoft/magentic-ui/main/$2"') |
| |
| .replace(/https:\/\/github\.com\/user-attachments\/assets\/([a-f0-9-]+)/g, |
| '<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>'); |
| |
| const html = marked.parse(fixedMarkdown); |
| document.getElementById('loading').style.display = 'none'; |
| document.getElementById('content').style.display = 'block'; |
| document.getElementById('content').innerHTML = html; |
| |
| |
| hljs.highlightAll(); |
| }) |
| .catch(error => { |
| console.error('Error:', error); |
| document.getElementById('loading').style.display = 'none'; |
| document.getElementById('error').style.display = 'block'; |
| }); |
| </script> |
| </body> |
| </html> |
