update renderrer

docs/assets/render.mjs

@@ -0,0 +1,25 @@
+import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/es/highlight.min.js';
+// import ts from 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/es/languages/typescript.min.js';
+// hljs.registerLanguage('ts', ts);
+
+async function CST_MenuConstructor() {
+    // open menu.yml from uri
+    var menu = "menu.json";
+    var url = menu;
+    const res = await fetch(url).then(res => res.json())
+    console.log(res)
+}
+
+async function CST_ContentConstructor() {
+    const res = await fetch("pages/intro.md").then(res => res.text()).catch(err => console.error(err))
+    console.log(res)
+    const md = window.markdownit();
+    const result = md.render(res);
+    document.getElementById('root').innerHTML = result;
+    hljs.highlightAll()
+}
+
+(async () => {
+    await CST_MenuConstructor()
+    await CST_ContentConstructor()
+})()

docs/assets/style.css

@@ -0,0 +1,38 @@
+* {
+    color: white;
+}
+
+/* make table border white 0.5 */
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+th,
+td {
+    border: 0.5px solid rgb(156, 156, 156);
+    padding: 8px;
+    text-align: left;
+}
+
+th {
+    background-color: #1b1b1b;
+}
+
+tr:nth-child(even) {
+    background-color: #1b1b1b;
+}
+
+tr:nth-child(odd) {
+    background-color: #1b1b1b;
+}
+
+tr:hover {
+    background-color: #404040;
+}
+
+p code {
+    background-color: #484848;
+    border-radius: 4px;
+    padding: 3px 5px;
+}

docs/assets/theme.css

@@ -0,0 +1,143 @@
+pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+    border-radius: 5px;
+}
+
+code.hljs {
+    padding: 3px 5px
+}
+
+/*!
+    Theme: GitHub Dark Dimmed
+    Description: Dark dimmed theme as seen on github.com
+    Author: github.com
+    Maintainer: @Hirse
+    Updated: 2021-05-15
+  
+    Colors taken from GitHub's CSS
+  */
+.hljs {
+    color: #adbac7;
+    background: #22272e
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #f47067
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #dcbdfb
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #6cb6ff
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #96d0ff
+}
+
+.hljs-built_in,
+.hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #f69d50
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #768390
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #8ddb8c
+}
+
+.hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #adbac7
+}
+
+.hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #316dca;
+    font-weight: bold
+}
+
+.hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #eac55f
+}
+
+.hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #adbac7;
+    font-style: italic
+}
+
+.hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #adbac7;
+    font-weight: bold
+}
+
+.hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #b4f1b4;
+    background-color: #1b4721
+}
+
+.hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #ffd8d3;
+    background-color: #78191b
+}
+
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+    /* purposely ignored */
+
+}
+
+.language-xml .hljs-tag {
+    color: #e8e8e8;
+}
+
+.language-xml .hljs-tag .hljs-name {
+    color: #00cc22;
+}

docs/index.html

@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <link rel="stylesheet" type="text/css" href="assets/prism.css">
-    <script src="assets/prism.js"></script>
-  </head>
-  <body>
-    <pre><code class="language-ts">
-export async ACT_Test(){
-  return(
-    <div></div>
-  )
-}</code></pre>
-  </body>
-</html>
+
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">
+  <link rel="stylesheet" href="assets/theme.css">
+  <link rel="stylesheet" href="assets/style.css">
+  <script src="assets/markdown.js"></script>
+  <script type="module" src="assets/render.mjs"></script>
+</head>
+
+<body id="root" style="background-color: #1b1b1b;">
+</body>
+
+</html>

docs/menu.json

@@ -0,0 +1,12 @@
+{
+    "main": "menu-home",
+    "menu": [
+        {
+            "id": "menu-home",
+            "mode":"menu",
+            "title": "Home",
+            "file": "",
+            "menu": []
+        }
+    ]
+}

docs/pages/intro.md

@@ -0,0 +1,22 @@
+
+## test ini judul
+
+```html
+<h1>hello<span></span></h1>
+```
+
+| Name | Age |
+|------|-----|
+| John | 20  |
+
+```tsx
+const hello = () => {
+    const ok = "yaaa";
+
+    return (
+        <h1>hello<span></span></h1>
+    )
+}
+```
+
+hello `test`