added markdown styles

Author: MohamedElmdary

frontend/kubecloud-v2/assets/scss/global.scss

@@ -1,6 +1,7 @@
 body,
 html {
   scroll-behavior: smooth;
+  scroll-padding-top: 80px;
 }
 
 .text-link {
@@ -140,3 +141,13 @@ html {
 .v-container--fluid {
   max-width: 100% !important;
 }
+
+blockquote > * {
+  &:first-child {
+    margin-top: 0 !important;
+  }
+
+  &:last-child {
+    margin-bottom: 0 !important;
+  }
+}

frontend/kubecloud-v2/composables/docs.ts

@@ -1,5 +1,8 @@
+import hljs from "highlight.js"
 import yaml from "js-yaml"
-import { marked } from "marked"
+import { Marked } from "marked"
+import { markedHighlight } from "marked-highlight"
+import "highlight.js/styles/atom-one-dark.css"
 
 export interface Doc {
   title: string
@@ -9,10 +12,45 @@ export interface Doc {
   content: string
   md: {
     html: string
-    tableOfContent: []
+    tableOfContent: { id: string, content: string }[]
   }
 }
 
+const marked = new Marked(
+  markedHighlight({
+    emptyLangClass: "hljs",
+    langPrefix: "hljs language-",
+    highlight(code, lang) {
+      const language = hljs.getLanguage(lang) ? lang : "plaintext"
+      return hljs.highlight(code, { language }).value
+    },
+  }),
+)
+
+const renderer = new marked.Renderer()
+
+renderer.code = function ({ text }) {
+  const parts = text.split("\n")
+  const count = parts.length
+  const size = 29 + count.toString().length * 15
+  const lines = parts.map((_, i) => `<span class="text-accent">${i + 1}</span>`)
+
+  return `
+    <pre 
+      class="my-6 border rounded d-flex"
+      style="--v-border-color: 255, 255, 255; --v-border-opacity: 0.12"
+      >
+      <code class="py-4 d-inline-block border-e bg-surface text-center" style="width: ${size}px;">${lines.join("\n")}</code>
+      <code class="hljs bg-surface" style="width: calc(100% - ${size}px);">${parts.join("\n")}</code>
+    </pre>
+  `
+}
+
+renderer.blockquote = function ({ tokens }) {
+  const content = this.parser.parse(tokens)
+  return `<blockquote class="my-6 px-6 pa-4 border-s-lg border-primary rounded" style="--v-border-opacity: 1; background: rgba(var(--v-theme-primary), 0.12);">${content}</blockquote>`
+}
+
 export const useDocs = createGlobalState(() => {
   // const router = useRouter()
 
@@ -26,31 +64,45 @@ export const useDocs = createGlobalState(() => {
           .then(res => res.text())),
     )
 
-    const renderer = new marked.Renderer()
+    let tableOfContent: Doc["md"]["tableOfContent"] = []
 
+    const linkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42"/></svg>`
     renderer.heading = function ({ depth, tokens }) {
       const content = this.parser.parseInline(tokens)
+      let id = ""
+      let a = ""
+      if (depth === 2) {
+        id = content.toLowerCase().replaceAll(":", "").replaceAll(" ", "-")
+        a = `<a href="#${id}" class="d-inline-block mr-2 text-primary opacity-50">${linkIcon}</a>`
+        tableOfContent.push({ id, content })
+      }
+
       const lv = Math.min(depth + 3, 6)
-      return `<h${lv} class="text-h${lv} mb-2">${content}</h${lv}>`
+      return `
+        <h${depth} id="${id}" class="text-h${lv} mb-4">
+          ${a}${content}
+        </h${depth}>
+      `
     }
 
     renderer.paragraph = function ({ tokens }) {
       const content = this.parser.parseInline(tokens)
-      return `<p class="text-body-1 text-accent mt-2 mb-4">${content}</p>`
+      return `<p class="text-body-1 text-accent mt-3 mb-6">${content}</p>`
     }
 
     renderer.listitem = function (x) {
-      // console.log(x.tokens)
-
-      // return "item"
       const content = this.parser.parse(x.tokens)
-      return `<li class="text-body-1 text-accent">${content}</li>`
+      return `
+        <li class="mb-2">
+          <span class="text-body-1 text-accent">${content}</span>
+        </li>
+      `
     }
 
     renderer.list = function ({ ordered, items }) {
       const tag = ordered ? "ol" : "ul"
       const body = items.map(item => this.listitem(item)).join("")
-      return `<${tag} class="mt-2 mb-4 pl-4" style="list-style-type: square">${body}</${tag}>`
+      return `<${tag} class="mt-4 mb-6 pl-4" style="list-style-type: square">${body}</${tag}>`
     }
 
     renderer.link = function ({ href, tokens }) {
@@ -75,139 +127,27 @@ export const useDocs = createGlobalState(() => {
       return `<a class="text-link" href="${href}" onclick="xonClick(event, this);">${content}</a>`
     }
 
+    renderer.strong = function ({ tokens }) {
+      const content = this.parser.parseInline(tokens)
+      return `<strong class="text-white text-body-1 font-weight-bold">${content}</strong>`
+    }
+
     renderer.codespan = function ({ text }) {
       return `<code
           class="text-primary text-body-1 border border-primary py-1 px-2 rounded"
-          style="background-color: rgba(var(--v-theme-primary), var(--v-border-opacity))"
+          style="--v-border-opacity: 0.12; background-color: rgba(var(--v-theme-primary), var(--v-border-opacity))"
         >${text}</code>`
     }
 
-    /* Headings */
-    // renderer.heading = ({ text, depth: level }) => {
-    //   return `<h${level} class="md-heading text-h${Math.min(level + 3, 6)}">${text}</h${level}>`
-    // }
-
-    /* Paragraphs */
-    // renderer.paragraph = (text) => {
-    //   return `<p class="md-paragraph">${text}</p>`
-    // }
-
-    /* Links */
-    // renderer.link = ({ href, title, text }) => {
-    //   const t = title ? ` title="${title}"` : ""
-    //   return `<a class="md-link" href="${href}"${t} target="_blank" rel="noopener noreferrer">${text}</a>`
-    // }
-
-    /* Lists */
-    // renderer.list = ({ ordered, items }) => {
-    //   const tag = ordered ? "ol" : "ul"
-    //   const body = items.map(item => `<li class="md-list-item">${item}</li>`).join("")
-    //   return `<${tag} class="md-list">${body}</${tag}>`
-    // }
-
-    // renderer.listitem = (text) => {
-    //   return `<li class="md-list-item">${text}</li>`
-    // }
-
-    /* Blockquotes */
-    // renderer.blockquote = (quote) => {
-    //   return `<blockquote class="md-blockquote">${quote}</blockquote>`
-    // }
-
-    /* Inline code */
-    // renderer.codespan = (code) => {
-    //   return `<code class="md-inline-code">${code}</code>`
-    // }
-
-    /* Code blocks */
-    //   renderer.code = ({ text, lang }) => {
-    //     const langClass = lang ? ` lang-${lang}` : ""
-    //     return `
-    //   <pre class="md-code-block${langClass}">
-    //     <code class="md-code">${text}</code>
-    //   </pre>
-    // `
-    //   }
-
-    /* Tables */
-    //   renderer.table = ({ header, rows }) => {
-    //     const body = marked.parseInline(rows)
-    //     return `
-    //   <table class="md-table">
-    //     <thead class="md-table-head">${header}</thead>
-    //     <tbody class="md-table-body">${body}</tbody>
-    //   </table>
-    // `
-    //   }
-
-    // renderer.tablerow = (content) => {
-    //   return `<tr class="md-table-row">${content}</tr>`
-    // }
-
-    // renderer.tablecell = (content, flags) => {
-    //   const tag = flags.header ? "th" : "td"
-    //   return `<${tag} class="md-table-cell">${content}</${tag}>`
-    // }
-
-    /* Images */
-    // renderer.image = ({ href, title, text }) => {
-    //   const t = title ? ` title="${title}"` : ""
-    //   return `<img class="md-image" src="${href}" alt="${text}"${t} />`
-    // }
-
-    /* Horizontal rule */
-    // renderer.hr = () => {
-    //   return `<hr class="md-hr" />`
-    // }
-
-    /* Strong / emphasis */
-    // renderer.strong = (text) => {
-    //   return `<strong class="md-strong">${text}</strong>`
-    // }
-
-    // renderer.em = (text) => {
-    //   return `<em class="md-em">${text}</em>`
-    // }
-
-    // function e(name: string, attrs: Record<string, string>) {
-    //   const content = attrs.content ?? ""
-    //   delete attrs.content
-    //   return `<${name} ${Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ")}>${content}</${name}>`
-    // }
-
-    // marked.use({
-    //   renderer: {
-    //     blockquote({ tokens }) {
-    //       const text = this.parser.parse(tokens)
-    //       return `
-    //         <blockquote
-    //           class="pa-4 border-s-lg border-primary bg-surface"
-    //           style="--v-border-opacity: 1"
-    //         >
-    //           ${text}
-    //         </blockquote>
-    //       `
-    //     },
-    //     code(code) {
-    //       console.log(code)
-
-    //       if (!code.type) {
-    //         console.log({ code })
-    //       }
-    //       return `
-    //         <pre class="bg-red overflow-y-auto"><code class="language-${code.lang}">${code.text}</code></pre>
-    //       `
-    //     },
-    //   },
-    // })
     return docs.map((doc, index) => {
+      tableOfContent = []
       const content = contents[index] ?? ""
       return {
         ...doc,
         content,
         md: {
           html: marked.parse(content, { renderer }),
-          tableOfContent: [],
+          tableOfContent,
         },
       }
     })

frontend/kubecloud-v2/package.json

@@ -21,9 +21,11 @@
     "@vueuse/nuxt": "14.1.0",
     "async-await-mutex-lock": "^1.0.12",
     "axios": "^1.13.2",
+    "highlight.js": "^11.11.1",
     "izitoast": "^1.4.0",
     "js-yaml": "^4.1.1",
     "marked": "^17.0.1",
+    "marked-highlight": "^2.2.3",
     "nuxt": "^4.2.2",
     "nuxt-toast": "^1.4.0",
     "quill": "^2.0.3",

frontend/kubecloud-v2/pages/docs.vue

@@ -13,6 +13,7 @@
             :prepend-icon="doc.icon"
             link
             exact
+            rounded
             :title="doc.title"
             :to="ROUTES.Docs(doc.path)"
             class="text-accent"
@@ -25,14 +26,18 @@
           </v-list-item>
 
           <v-list-item
-            v-for="doc in docs"
-            :key="doc.path"
+            v-for="{ id, content } in activePage?.md.tableOfContent"
+            :key="id"
             link
-            exact
             density="compact"
-            class="text-body-2"
+            rounded
+            :href="`#${id}`"
           >
-            {{ doc.title }}
+            <v-list-item-title
+              class="text-body-2 pl-4 text-no-wrap"
+            >
+              {{ content }}
+            </v-list-item-title>
           </v-list-item>
         </v-list>
         <!-- :to="ROUTES.Docs(doc.path)" -->

frontend/kubecloud-v2/pages/docs/index.vue

@@ -3,7 +3,7 @@
     {{ page }}
   </div> -->
 
-  <div class="markdown" v-html="page?.md?.html" />
+  <div v-html="page?.md?.html" />
 </template>
 
 <script setup lang="ts">

frontend/kubecloud-v2/public/docs/getting-started.md

@@ -20,7 +20,7 @@ Mycelium Cloud uses peer-to-peer networking that enables:
 - **Secure Communication**: All traffic is encrypted through the Mycelium network
 - **No Public IPs Required**: Services accessible via Mycelium IPs
 
-**Network Flow**: `User Machine → Mycelium Network → Cluster Node → Service`
+**Network Flow**: `User Machine → Mycelium Network → Cluster Node → Service`
 
 ## Quick Start
 
@@ -44,7 +44,7 @@ Mycelium Cloud uses peer-to-peer networking that enables:
 
 #### Download Kubeconfig
 
-1. Go to dashboard → Clusters → Click download icon (⬇️)
+1. Go to dashboard → Clusters → Click download icon (⬇️)
 2. Set kubeconfig: `export KUBECONFIG=/path/to/config`
 3. Test: `kubectl get nodes`
 
@@ -66,4 +66,4 @@ Mycelium Cloud uses peer-to-peer networking that enables:
    sudo mycelium --peers tcp://188.40.132.242:9651 tcp://136.243.47.186:9651 tcp://185.69.166.7:9651 tcp://185.69.166.8:9651 tcp://65.21.231.58:9651 tcp://65.109.18.113:9651 tcp://209.159.146.190:9651 tcp://5.78.122.16:9651 tcp://5.223.43.251:9651 tcp://142.93.217.194:9651
    ```
 
-4. **SSH to nodes**: `ssh root@<mycelium-ip>`
+4. **SSH to nodes**: `ssh root@&lt;mycelium-ip&gt;`