magentic-ui/docs/index.html at 4b83efd721dd959385d3ea37ee87d108acb47d6e · microsoft/magentic-ui · 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
<!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;
        }
        /* GitHub-style header */
        .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>
        // Configure marked options
        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 and display README content
        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 => {
                // Fix relative image paths to point to GitHub
                const fixedMarkdown = markdown.replace(
                    /!\[([^\]]*)\]\((?!https?:\/\/)([^)]+)\)/g,
                    '![$1](https://raw.githubusercontent.com/microsoft/magentic-ui/main/$2)'
                );

                const html = marked.parse(fixedMarkdown);
                document.getElementById('loading').style.display = 'none';
                document.getElementById('content').style.display = 'block';
                document.getElementById('content').innerHTML = html;

                // Initialize syntax highlighting
                hljs.highlightAll();
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('loading').style.display = 'none';
                document.getElementById('error').style.display = 'block';
            });
    </script>
</body>
</html>