update public pages

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

public/foo-style.css

@@ -15,7 +15,7 @@ canvas,
 caption,
 center,
 cite,
-code,
+/* code, */
 dd,
 del,
 details,
@@ -51,10 +51,10 @@ mark,
 menu,
 nav,
 object,
-ol,
+/* ol, */
 output,
-p,
-pre,
+/* p, */
+/* pre, */
 q,
 ruby,
 s,
@@ -68,13 +68,13 @@ sub,
 summary,
 sup,
 /* table, */
-tbody,
-td,
-tfoot,
-th,
-thead,
+/* tbody, */
+/* td, */
+/* tfoot, */
+/* th, */
+/* thead, */
 time,
-tr,
+/* tr, */
 tt,
 u,
 ul,
@@ -109,7 +109,7 @@ section {
     display: block
 }
 
-ol,
+/* ol, */
 ul {
     list-style: none
 }
@@ -943,18 +943,18 @@ q:before {
     font-family: 'Share Tech Mono';
     font-style: normal;
     font-weight: 400;
-    src: url('/website/fonts/share-tech-mono-v15-latin-regular.eot');
+    src: url('fonts/share-tech-mono-v15-latin-regular.eot');
     /* IE9 Compat Modes */
     src: local(''),
-        url('/website/fonts/share-tech-mono-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
+        url('fonts/share-tech-mono-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
         /* IE6-IE8 */
-        url('/website/fonts/share-tech-mono-v15-latin-regular.woff2') format('woff2'),
+        url('fonts/share-tech-mono-v15-latin-regular.woff2') format('woff2'),
         /* Super Modern Browsers */
-        url('/website/fonts/share-tech-mono-v15-latin-regular.woff') format('woff'),
+        url('fonts/share-tech-mono-v15-latin-regular.woff') format('woff'),
         /* Modern Browsers */
-        url('/website/fonts/share-tech-mono-v15-latin-regular.ttf') format('truetype'),
+        url('fonts/share-tech-mono-v15-latin-regular.ttf') format('truetype'),
         /* Safari, Android, iOS */
-        url('/website/fonts/share-tech-mono-v15-latin-regular.svg#ShareTechMono') format('svg');
+        url('fonts/share-tech-mono-v15-latin-regular.svg#ShareTechMono') format('svg');
     /* Legacy iOS */
 }
 

public/index.html

@@ -5,13 +5,9 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/website/post-style.css">
     <link rel="stylesheet" href="/website/foo-style.css">
-    <!-- <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
-        crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'" /> -->
-    <link rel="stylesheet"
-        href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/github-dark.min.css">
-    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script>
+    <link rel="stylesheet" href="/website/mdn-style.css">
+
     <title>Document</title>
     <script src="/website/redirect.js"></script>
 </head>
@@ -23,9 +19,62 @@
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script> -->
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js"
         crossorigin="anonymous"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="/website/prism.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
     <script>
-        var app = Elm.Main.init({ node: document.getElementById("app") });
+        var app = Elm.Blog.init({ node: document.getElementById("app") });
 
+        app.ports.sendString.subscribe(function (markdowndata) {
+
+            var numberOfHeadings = 0;
+            let toc = '';
+            const renderer = new marked.Renderer();
+            const sections = [];
+            renderer.heading = (text, level) => {
+                if (level === 1) {
+                    return `<h${level}>${text}</h${level}>`
+                }
+                const escapedText = text.trim().toLowerCase().replace(/[^\w]+/g, '-');
+                const endSection = `</div></section>`;
+                const sectionContent = `
+            <section aria-labelledby="${escapedText}">
+            <h${level} id="${escapedText}">
+              <a title="Permalink to ${text}" href="#${escapedText}">
+                ${text}
+              </a>
+            </h${level}>
+            <div class="section-content">`;
+                toc += `<li class="document-toc-item"><a class="document-toc-link" href="#${escapedText}">${text}</a></li>`;
+                if (numberOfHeadings === 0) {
+                    numberOfHeadings++;
+                    return sectionContent;
+                } else {
+                    return endSection + sectionContent;
+                }
+            };
+
+            renderer.blockquote = (text) => {
+                return `<div id="sect3" class="notecard note">${text}</div>`;
+            };
+
+            marked.setOptions({
+                renderer: renderer,
+                highlight: function (code, lang) {
+                    console.log(Prism.languages);
+                    const grammar = Prism.languages[lang];
+                    if (!grammar) {
+                        console.warn(
+                            `Unable to find a Prism grammar for '${lang}'`
+                        );
+                        return; // bail!
+                    }
+                    return Prism.highlight(code, grammar, lang);
+                }
+            })
+            document.getElementById("insert-here").innerHTML = marked.parse(markdowndata);
+            document.getElementById("toc-entries").innerHTML = toc;
+        });
         // $(function () {
         //     // copy-btn HTML
         //     var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";