add: blog test

1chooo · Jan 6, 2024 · aa5a2f8 · aa5a2f8
1 parent 6bd185e
commit aa5a2f8
Show file tree

Hide file tree

Showing 2 changed files with 270 additions and 0 deletions.
diff --git a/blog/hello_blog/index.html b/blog/hello_blog/index.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/atom-one-light.min.css" integrity="sha512-o5v54Kh5PH0dgnf9ei0L+vMRsbm5fvIvnR/XkrZZjN4mqdaeH7PW66tumBoQVIaKNVrLCZiBEfHzRY4JJSMK/Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <link rel="stylesheet" href="/css/vcard.css">
+    <link rel="stylesheet" href="/css/dracula.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="/css/blog.css">
+    <!-- <link rel="shortcut icon" href="./assets/images/favicon.ico" type="image/x-icon"> -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+</head>
+<body>
+
+    <main>
+
+        <!-- Sidebar -->
+        <aside class="sidebar" data-sidebar include="sidebar"></aside>
+
+        <div class="main-content">
+
+            <!-- Content -->
+            <article id="content" class="active text-white"></article>
+
+
+            <!-- Comment -->
+            <article id="comments" class="active text-white">
+
+                <header>
+                    <h2 class="h2 article-title">Comments</h2>
+                </header>
+
+                <div id="comment-field"></div>
+
+            </article>
+
+        </div>
+
+    </main>
+
+    <script type="text/javascript" src="/js/dom_purify.js"></script>
+    <script type="module">
+        import {INITIALIZE, MANAGER} from '/js/main.js';
+        import {GIST_LOADER, Loader} from '/js/loader.js';
+
+        const id = '322ba1fb8f2f81b6060570b8d78fe074';
+
+        async function init(){
+            await INITIALIZE();
+
+            const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
+
+            // sidebar variables
+            const sidebar = document.querySelector("[data-sidebar]");
+            const sidebarBtn = document.querySelector("[data-sidebar-btn]");
+
+            // sidebar toggle functionality for mobile
+            sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
+
+            GIST_LOADER.fetch(id, async data => {
+                const result = await data.json();
+                const comments_url = await result.comments_url;
+                const content_field = document.getElementById('content');
+
+                for (const [key, value] of Object.entries(result.files)){
+                    document.title = key.split('.md')[0];
+                    content_field.innerHTML = `
+                    <header>
+                        <h2 class="h2 article-title">${key.split('.md')[0]}</h2>
+
+                        <div id="time">
+                            <ion-icon name="time-outline"></ion-icon> 
+                            <small> 
+                                Updated ${result.updated_at.split('T')[0]} 
+                            </small>
+                        </div>
+                    </header>
+                    ` + marked.parse(value.content.replace(/\$(..*)\$/g, '\\\\($1\\\\)'));
+                }
+
+                await new Promise( (res, rej ) => {
+                    new Loader(comments_url, async (data) => {
+
+                        const comments = await data.json();
+                        const comment_field = document.getElementById('comment-field');
+
+                        for (const comment of comments){
+
+                            const comment_element = document.createElement('div');
+                            comment_element.classList.add('comment');
+
+                            comment_element.innerHTML = `
+                                <div class="comment-meta">
+                                    <h4 class="article-title comment-username">
+                                        <img src="${comment.user.avatar_url}" height=15 width=15 style="margin-top: 3px">
+                                        &nbsp;${comment.user.login}
+                                    </h4>
+                                    <div class="time">
+                                        <ion-icon name="time-outline"></ion-icon> 
+                                        <small> 
+                                            Updated ${comment.updated_at.split('T')[0]} 
+                                        </small>
+                                    </div>
+                                </div>
+                            ` + DOMPurify.sanitize(marked.parse(comment.body));
+
+                            comment_field.appendChild(comment_element);
+                        }
+
+                        res()
+
+                    });
+                });
+
+                renderMathInElement(document.body);
+                hljs.highlightAll();
+            });
+        }
+
+        init();
+
+    </script>
+    <!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "13910509e0c344e68180b2f3330febd1"}'></script><!-- End Cloudflare Web Analytics -->
+
+</body>
+</html>
diff --git a/blog/who_is_hugo/index.html b/blog/who_is_hugo/index.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/atom-one-light.min.css" integrity="sha512-o5v54Kh5PH0dgnf9ei0L+vMRsbm5fvIvnR/XkrZZjN4mqdaeH7PW66tumBoQVIaKNVrLCZiBEfHzRY4JJSMK/Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <link rel="stylesheet" href="/css/vcard.css">
+    <link rel="stylesheet" href="/css/dracula.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="/css/blog.css">
+    <!-- <link rel="shortcut icon" href="./assets/images/favicon.ico" type="image/x-icon"> -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+</head>
+<body>
+
+    <main>
+
+        <!-- Sidebar -->
+        <aside class="sidebar" data-sidebar include="sidebar"></aside>
+
+        <div class="main-content">
+
+            <!-- Content -->
+            <article id="content" class="active text-white"></article>
+
+
+            <!-- Comment -->
+            <article id="comments" class="active text-white">
+
+                <header>
+                    <h2 class="h2 article-title">Comments</h2>
+                </header>
+
+                <div id="comment-field"></div>
+
+            </article>
+
+        </div>
+
+    </main>
+
+    <script type="text/javascript" src="/js/dom_purify.js"></script>
+    <script type="module">
+        import {INITIALIZE, MANAGER} from '/js/main.js';
+        import {GIST_LOADER, Loader} from '/js/loader.js';
+
+        const id = '1ed56ceb688b90a30cfdc5f95c9f9796';
+
+        async function init(){
+            await INITIALIZE();
+
+            const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
+
+            // sidebar variables
+            const sidebar = document.querySelector("[data-sidebar]");
+            const sidebarBtn = document.querySelector("[data-sidebar-btn]");
+
+            // sidebar toggle functionality for mobile
+            sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
+
+            GIST_LOADER.fetch(id, async data => {
+                const result = await data.json();
+                const comments_url = await result.comments_url;
+                const content_field = document.getElementById('content');
+
+                for (const [key, value] of Object.entries(result.files)){
+                    document.title = key.split('.md')[0];
+                    content_field.innerHTML = `
+                    <header>
+                        <h2 class="h2 article-title">${key.split('.md')[0]}</h2>
+
+                        <div id="time">
+                            <ion-icon name="time-outline"></ion-icon> 
+                            <small> 
+                                Updated ${result.updated_at.split('T')[0]} 
+                            </small>
+                        </div>
+                    </header>
+                    ` + marked.parse(value.content.replace(/\$(..*)\$/g, '\\\\($1\\\\)'));
+                }
+
+                await new Promise( (res, rej ) => {
+                    new Loader(comments_url, async (data) => {
+
+                        const comments = await data.json();
+                        const comment_field = document.getElementById('comment-field');
+
+                        for (const comment of comments){
+
+                            const comment_element = document.createElement('div');
+                            comment_element.classList.add('comment');
+
+                            comment_element.innerHTML = `
+                                <div class="comment-meta">
+                                    <h4 class="article-title comment-username">
+                                        <img src="${comment.user.avatar_url}" height=15 width=15 style="margin-top: 3px">
+                                        &nbsp;${comment.user.login}
+                                    </h4>
+                                    <div class="time">
+                                        <ion-icon name="time-outline"></ion-icon> 
+                                        <small> 
+                                            Updated ${comment.updated_at.split('T')[0]} 
+                                        </small>
+                                    </div>
+                                </div>
+                            ` + DOMPurify.sanitize(marked.parse(comment.body));
+
+                            comment_field.appendChild(comment_element);
+                        }
+
+                        res()
+
+                    });
+                });
+
+                renderMathInElement(document.body);
+                hljs.highlightAll();
+            });
+        }
+
+        init();
+
+    </script>
+    <!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "13910509e0c344e68180b2f3330febd1"}'></script><!-- End Cloudflare Web Analytics -->
+
+</body>
+</html>