@dasidev/dasi-ui 1.0.0

package/src/layouts/DocsLayout.vue

@@ -0,0 +1,681 @@
+<script setup lang="ts">
+import ScrollArea from '@/components/ui/scroll-area/ScrollArea.vue';
+import { ref, onMounted, watch, onUnmounted } from 'vue';
+import { RouterLink, useRoute, useRouter } from 'vue-router'
+import { marked } from 'marked';
+import doscMenu from '@/docs/index';
+import { CurlGenerator } from 'curl-generator';
+import Copyright from '@/components/helper/Copyright.vue';
+import ApiTester from '@/components/helper/ApiTester.vue';
+import { LucideLoader2, LucidePlaneTakeoff, LucideScrollText, LucideSearch } from 'lucide-vue-next';
+import api from '@/api/api';
+
+interface Menu {
+  title: string
+  code?: string
+  items?: Menu[]
+  type?: 'page' | 'api' | null
+  openApi?: any
+}
+
+interface CodeBlock {
+  start: number
+  end: number
+}
+
+const route = useRoute();
+const router = useRouter();
+
+const ms = ref<Menu | null>(null); // menuSelected
+const msc = ref(''); // menuSelectedCode
+const leftbar = ref<Menu[]>([]);
+const ls = ref<Menu | null>(null); // leftbarSelected
+const lsc = ref(''); // leftbarSelectedCode
+const indexHtml = ref('');
+const rightbar = ref<Menu[]>([]);
+const rsi = ref(0); // rightbarSelectedIndex
+const apiUrl = ref(import.meta.env.VITE_API_URL);
+const exampleType = ref('cURL');
+const sendingApi = ref(false);
+const q = ref('');
+
+/**
+ * El
+ *
+ */
+const apiTesterEl: any = ref(null);
+
+/**
+ * Extract all header h2 (##)
+ * from markdown string
+ *
+ */
+function loadRightbar(markdown: string) {
+  rightbar.value = [];
+
+  /**
+   * Regular expressions to match h2 (##) headers
+   * and skip ## on code block
+   *
+   */
+  const h2Regex = /^##\s(.+)$/gm;
+  const codeBlockRegex = /```[\s\S]*?```|`[\s\S]*?`/g;
+
+  // Find all code blocks to ignore
+  const codeBlocks: CodeBlock[] = [];
+  let match;
+  while ((match = codeBlockRegex.exec(markdown)) !== null) {
+    codeBlocks.push({ start: match.index, end: codeBlockRegex.lastIndex });
+  }
+
+  // Helper function to check if a position is inside a code block
+  function isInCodeBlock(index: number) {
+    return codeBlocks.some(block => index >= block.start && index < block.end);
+  }
+
+  // Reset the regex lastIndex to start searching from the beginning
+  h2Regex.lastIndex = 0;
+
+  // Match all ## headers
+  while ((match = h2Regex.exec(markdown)) !== null) {
+    if (!isInCodeBlock(match.index)) {
+      rightbar.value.push({ title: match[1] });
+    }
+  }
+}
+
+async function loadContent() {
+  lsc.value = route.path.split('/')[3];
+  if (!lsc.value && leftbar.value.length > 0 && leftbar.value[0].items && leftbar.value[0].items.length > 0) {
+    lsc.value = String(leftbar.value[0].items[0].code);
+  }
+
+  if (ms.value?.type === 'api') {
+    /**
+     * Find leftbar selected
+     * from leftbar array
+     *
+     */
+    for (const item of leftbar.value) {
+      if (!item.items) continue;
+      for (const sub of item.items) {
+        if (sub.code === lsc.value) {
+          ls.value = sub;
+          /**
+           * Format api for example
+           *
+           */
+          ls.value.openApi.endpointExample = ls.value.openApi.endpoint;
+          ls.value.openApi.headers = {};
+          if (ls.value.openApi.requestBody && ls.value.openApi.requestBody.content) {
+            const rbc = ls.value.openApi.requestBody.content;
+            for (const rb in rbc) {
+              ls.value.openApi.requestBodyContentType = rb;
+              ls.value.openApi.headers['Content-Type'] = rb;
+              if (rbc[rb].example) {
+                ls.value.openApi.requestBodyExample = rbc[rb].example;
+              } else if (rbc[rb].schema && rbc[rb].schema.example) {
+                ls.value.openApi.requestBodyExample = rbc[rb].schema.example;
+              }
+            }
+          }
+          let queryParams = [];
+          if (ls.value.openApi.parameters) {
+            for (const param of ls.value.openApi.parameters) {
+              if (param.in === 'path') {
+                if (param.example) {
+                  ls.value.openApi.endpointExample = ls.value.openApi.endpointExample.replace(`{${param.name}}`, param.example);
+                }
+              } else if (param.in === 'header') {
+                ls.value.openApi.headers[param.name] = param.example || '';
+              } else if (param.in === 'query') {
+                queryParams.push(`${param.name}=${param.example || `{${param.name}}`}`);
+              }
+            }
+          }
+          const qm = queryParams.length > 0 ? '?' : '';
+          ls.value.openApi.endpointExample = `${ls.value.openApi.endpointExample}${qm}${queryParams.join('&')}`;
+
+          for (const key in ls.value.openApi.responses) {
+            if (Number(key) === 200) {
+              const item = ls.value.openApi.responses[key];
+              for (const k2 in item.content) {
+                ls.value.openApi.responseContentType = k2;
+                if (item.content[k2].examples) {
+                  for (const k3 in item.content[k2].examples) {
+                    ls.value.openApi.okResponseExample = item.content[k2].examples[k3];
+                  }
+                }
+              }
+              break;
+            }
+          }
+          break;
+        }
+      }
+    }
+
+    return;
+  }
+
+  // Reset content
+  indexHtml.value = '';
+
+  if (!msc.value || !lsc.value) return;
+
+  try {
+    /* @vite-ignore */
+    const md = (await import(`@/docs/${msc.value}/${lsc.value}.md`)).default;
+    const htmlTmp = await marked(md);
+    let i = 0;
+    indexHtml.value = htmlTmp.replace(/<h2>/g, () => {
+      const id = `h2-${i}`;
+      i += 1;
+      return `<h2 id="${id}">`;
+    });
+    loadRightbar(md);
+  } catch (error) {
+    console.error('Failed to load module:', error);
+  }
+}
+
+function camelCaseToSpace(text: string) {
+  return text.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+}
+
+async function loadLeftbar() {
+  if (!ms.value) return;
+
+  // Reset selected leftbar menu
+  ls.value = null
+  lsc.value = '';
+  leftbar.value = [];
+
+  if (ms.value.type === 'api') {
+    /**
+     * Load json open api
+     *
+     */
+    const jsonData = (await import(`@/docs/${msc.value}/${msc.value}.json`)).default;
+    for (const key in jsonData.paths) {
+      console.log(key);
+      const category = camelCaseToSpace(key.split('/')[1]);
+      let itemFound = false;
+      for (const item of leftbar.value) {
+        if (item.title === category) {
+          const items: Menu[] = [];
+          for (const method in jsonData.paths[key]) {
+            const openApi = jsonData.paths[key][method];
+            openApi.endpoint = key;
+            openApi.method = method;
+            const code = `${method}${key.replace(/\//g, '-')}`;
+            items.push({ title: openApi.summary, openApi, code: code.toLowerCase() })
+          }
+          item.items?.push(...items);
+          itemFound = true;
+          break;
+        }
+      }
+      if (!itemFound) {
+        const items: Menu[] = [];
+        for (const method in jsonData.paths[key]) {
+          const openApi = jsonData.paths[key][method];
+          openApi.endpoint = key;
+          openApi.method = method;
+          const code = `${method}${key.replace(/\//g, '-')}`;
+          items.push({
+            title: openApi.summary,
+            openApi: openApi,
+            code: code.toLowerCase(),
+          })
+        }
+        leftbar.value.push({ title: category, items });
+      }
+    }
+    loadContent();
+    return;
+  }
+
+  try {
+    // Dynamically import the TypeScript file from the specified folder
+    leftbar.value = (await import(`@/docs/${msc.value}/${msc.value}.ts`)).default;
+    loadContent();
+  } catch (error) {
+    console.error('Failed to load module:', error);
+  }
+}
+
+function findMenuOpen(path: string) {
+  if (!route.path.split('/')[2]) {
+    if (doscMenu.length > 0) router.push(`/docs/${doscMenu[0].code}`);
+    return;
+  }
+
+  const newMenu = path.split('/')[2];
+  if (msc.value === newMenu) {
+    loadContent();
+    return;
+  }
+  msc.value = newMenu;
+
+  /**
+   * Set menu selected
+   * find from docMenu
+   *
+   */
+  for (const item of doscMenu) {
+    if (item.code === msc.value) {
+      ms.value = item as Menu;
+      break;
+    }
+  }
+
+  loadLeftbar();
+}
+
+function gotoH2(idx: number) {
+  const el: any = document.getElementById(`h2-${idx}`);
+  if (el) window.scrollTo({ top: el.offsetTop, behavior: 'smooth' });
+}
+
+function winScrolled() {
+  const docsEl = document.getElementById('dasi-docs');
+  if (!docsEl) return;
+
+  const els: any = [...docsEl.getElementsByTagName('h2')];
+  let i = els.length - 1;
+  for (const item of els.reverse()) {
+    if (window.scrollY >= item.offsetTop) {
+      if (rsi.value !== i) rsi.value = i;
+      break;
+    }
+    i -= 1;
+  }
+}
+
+function tryApi(api: any) {
+  apiTesterEl.value.open(api);
+  // sendingApi.value = true;
+  // api.get(api.endpointExample).then((r) => {
+
+  // }).catch((err) => {
+
+  // }).finally(() => {
+  //   sendingApi.value = false;
+  // })
+}
+
+watch(route, (to) => {
+  findMenuOpen(to.path);
+});
+
+onMounted(async () => {
+  findMenuOpen(route.path);
+  window.addEventListener('scroll', winScrolled);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', winScrolled);
+});
+</script>
+
+<template>
+  <section class="fixed top-24 left-20 right-0 h-10 border-b bg-white flex items-center pl-6 pr-3 z-9">
+    <h4 class="font-medium">Dokumentasi</h4>
+    <div class="flex items-center ml-auto">
+      <RouterLink :to="`/docs/${item.code}`"
+        class="block text-sm py-1 rounded-full px-4 ml-1 hover:bg-hover_main cursor-pointer"
+        :class="{'bg-active_main text-primary_main': msc === item.code}"
+        v-for="(item, i) in doscMenu" :key="i">
+        {{ item.title }}
+      </RouterLink>
+    </div>
+  </section>
+  <section class="z-9 fixed left-20 top-24 bottom-0 bg-white w-80 border-r">
+    <ScrollArea class="h-full">
+      <div class="px-4 pb-5">
+        <div class="mt-5 relative">
+          <input class="rounded-full bg-gray-100 border-gray-100 w-full px-5 !h-9 py-0 block hover:bg-white transition hover:border-gray-300 focus:bg-white focus:border-primary_main !outline-none !shadow-none !hover:shadow-none !hover:outline-none pr-10"
+            type="text" placeholder="Search docs..." v-model="q">
+          <LucideSearch class="text-gray-400 right-3 top-1/2 -translate-y-1/2 absolute" :size="22"/>
+        </div>
+        <div v-for="(item, i) in leftbar.filter(row => row.title.toLowerCase().indexOf(q.toLowerCase()) >= 0)" :key="i" class="pt-5">
+          <div class="flex items-center font-medium text-gray-400 text-[14px] mb-1 px-2">
+            {{ item.title }}
+          </div>
+          <div v-for="(sub, i) in item.items" :key="i">
+            <RouterLink :to="`/docs/${msc}/${sub.code}`"
+              class="block relative py-[3px] mb-[2px] px-2 rounded-sm hover:bg-hover_main text-[14px] hover:text-primary_main transition"
+              :class="{'!bg-primary_main !text-white': lsc === sub.code}">
+              {{ sub.title }}
+            </RouterLink>
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+  </section>
+  <section class="ml-80 mt-10 min-h-[calc(100vh-96px)] bg-white">
+    <div class="pt-5 px-10 pb-16" v-if="lsc">
+      <div class="relative flex -mx-10 -mt-5 -mb-16 pr-[400px]" v-if="ms && ms.type === 'api'">
+        <div class="w-full px-10 pt-5 pb-16 min-h-[calc(100vh-96px)]">
+          <div class="text-red-500 bg-red-100 inline-block px-3 py-0.5 font-medium rounded-full text-sm mb-1 -ml-[2px]"
+            v-if="ls?.openApi.deprecated">Deprecated</div>
+          <h3 class="text-xl font-medium">{{ ls?.title }}</h3>
+          <p class="mt-2 font-[400] text-[15px] leading-snug" v-if="ls?.openApi.description">{{ ls?.openApi.description }}</p>
+
+          <div class="-mr-[440px] flex relative z-3">
+            <section class="w-full pr-10">
+              <div class="border flex items-center rounded-sm overflow-hidden mt-5 mb-6 py-1.5">
+                <div class="flex-none font-semibold uppercase pt-0.5 px-4 border-r"
+                  :class="{'text-green-500': ls?.openApi.method === 'get',
+                  'text-blue-500': ls?.openApi.method === 'post',
+                  'text-purple-500': ls?.openApi.method === 'put',
+                  'text-orange-500': ls?.openApi.method === 'patch',
+                  'text-red-500': ls?.openApi.method === 'delete'}">
+                  {{ ls?.openApi.method }}
+                </div>
+                <div class="pl-4 whitespace-nowrap overflow-hidden text-ellipsis">
+                  {{ ls?.openApi.endpoint }}
+                </div>
+              </div>
+              <section class="mb-7" v-if="ls?.openApi.parameters && ls?.openApi.parameters.length > 0">
+                <h4 class="font-medium mb-1 ml-1 text-[15px]">Request Paremeters</h4>
+                <div class="dasi-api-doc">
+                  <table class="border rounded-sm font-light">
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+                        <th>In</th>
+                        <th>Type</th>
+                        <th>Description</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="(item, i) in ls?.openApi.parameters" :key="i"
+                        :class="{'bg-red-50': item.deprecated}">
+                        <td>
+                          <div class="font-medium"
+                            :class="{'text-red-500 line-through': item.deprecated}">
+                            {{ item.name }}
+                          </div>
+                          <span class="text-sm text-black/60" v-if="!item.required">optional</span>
+                          <div class="text-red-500 font-medium text-[13px] mt-0.5"
+                            v-if="item.deprecated">Deprecated
+                          </div>
+                        </td>
+                        <td>{{ item.in }}</td>
+                        <td>
+                          <div class="flex items-center" v-if="Array.isArray(item.schema.type)">
+                            <div v-for="(type, i) in item.schema.type" :key="i">
+                              <span
+                                class="mr-1.5 px-1 border rounded-sm pb-0.5"
+                                :class="{'text-pink-700 border-pink-200': type === 'string',
+                                'text-purple-700 border-purple-200': type === 'boolean',
+                                'text-sky-600 border-sky-200': type === 'array',
+                                'text-green-600 border-green-200': ['number', 'integer'].includes(type)}">
+                                {{ type }}
+                              </span>
+                              <span class="mr-1.5 text-gray-400 text-sm" v-if="i < item.schema.type.length - 1">/</span>
+                            </div>
+                          </div class="flex items-center">
+                          <template v-else>
+                            <span class="mr-1.5 px-1 border rounded-sm pb-0.5"
+                              :class="{'text-pink-700 border-pink-200': item.schema.type === 'string',
+                              'text-purple-700 border-purple-200': item.schema.type === 'boolean',
+                              'text-sky-600 border-sky-200': item.schema.type === 'array',
+                              'text-green-600 border-green-200': ['number', 'integer'].includes(item.schema.type)}">
+                              {{ item.schema.type }}
+                            </span>
+                          </template>
+                        </td>
+                        <td>
+                          <div v-if="item.description">
+                            {{ item.description }}
+                          </div>
+                          <div class="mt-2.5 text-[13px] mb-0.5" v-if="item.example">
+                            <span class="font-medium mr-1.5">Example:</span>
+                            <span class="px-1.5 bg-slate-50 border rounded-sm py-0.5 font-normal">
+                              {{ item.example }}
+                            </span>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </section>
+
+              <section class="mb-9" v-if="ls?.openApi.requestBody">
+                <h4 class="font-medium mb-1 ml-1 text-[15px]">Request Body</h4>
+                <section v-for="(item, key) in ls?.openApi.requestBody.content" :key="key">
+                  <div class="dasi-api-doc mb-3">
+                    <table class="border rounded-sm mb-3">
+                      <thead>
+                        <tr>
+                          <th>Content-Type</th>
+                          <th>Req. Body Params. / Schema</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>{{ key }}</td>
+                          <td>
+                            <pre class="border rounded-sm py-1.5 px-2 bg-slate-50 text-[13px]"
+                              v-if="item.schema.properties && Object.keys(item.schema.properties).length > 0"
+                              ><code>{{item.schema.properties}}</code></pre>
+                            <span class="text-sm italic text-gray-300" v-else>Not available</span>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </section>
+              </section>
+
+              <section class="mb-7" v-if="ls?.openApi.responses">
+                <h4 class="font-medium mb-1 ml-1 text-[15px]">Responses</h4>
+                <div class="dasi-api-doc">
+                  <table class="border rounded-sm font-light table-responses">
+                    <thead>
+                      <tr>
+                        <th>Code</th>
+                        <th class="whitespace-nowrap">Response</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="(item, key) in ls?.openApi.responses" :key="key">
+                        <td class="border-t">
+                          <div class="font-medium mb-1">{{ key }}</div>
+                          <span
+                            class="px-1 border rounded-sm py-0.5 font-medium"
+                            :class="{'text-pink-700 border-pink-200': Number(key) >= 300 || Number(key) < 200,
+                            'text-green-600 border-green-200': Number(key) >= 200 && Number(key) < 300}">
+                            {{ item.description }}
+                          </span>
+                        </td>
+                        <td class="border-t">
+                          <div class="" v-for="(resp, ct) in item.content" :key="ct">
+                            <div class="font-normal mb-2">
+                              Content-Type:
+                              <span class="px-1.5 bg-slate-50 border rounded-sm pt-0.5 pb-1 ml-1">{{ ct }}</span>
+                            </div>
+                            <div class="mb-4" v-if="resp.schema && resp.schema.properties && Object.keys(resp.schema.properties).length > 0">
+                              <div class="font-medium mb-[2px] ml-1">Schema</div>
+                              <pre class="bg-slate-50 border rounded-sm py-1.5 px-2 text-[13px]"><code>{{resp.schema.properties}}</code></pre>
+                            </div>
+                            <template v-if="resp.examples">
+                              <div class="mb-4" v-for="(example, exc) in resp.examples" :key="exc">
+                                <div class="font-medium mb-[2px] ml-1">Example</div>
+                                <pre class="bg-slate-50 border rounded-sm py-1.5 px-2 text-[13px]"
+                                  :class="{'text-green-700 !bg-green-50 border-green-300': Number(key) >= 200 && Number(key) < 300,
+                                  'text-red-700 !bg-red-50 border-red-300': Number(key) >= 300 || Number(key) < 200}"><code>{{example}}</code></pre>
+                              </div>
+                            </template>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </section>
+
+              <section class="border-t pt-2 mt-10" v-if="ls?.openApi.tags && 1>2">
+                <div v-for="(tag, i) in ls?.openApi.tags" :key="i">
+                  <span class="mr-1.5 px-1 border rounded-sm pb-0.5">{{ tag }}</span>
+                </div>
+              </section>
+            </section>
+
+            <section class="w-[400px] text-white/80 text-sm flex-none">
+              <div class="flex border-b border-b-white/10 pl-5 mb-3">
+                <div class="font-medium mr-5 pb-3 relative text-gray-500 cursor-pointer hover:text-gray-300 transition"
+                  :class="{'text-white': exampleType === 'cURL'}"
+                  v-on:click="exampleType = 'cURL'">
+                  cURL
+                  <div class="absolute -left-1 -right-1 bottom-0 h-1 rounded-t-full bg-primary_main_hover"
+                    v-if="exampleType === 'cURL'"></div>
+                </div>
+                <div class="font-medium mr-5 pb-3 relative text-gray-500 cursor-pointer hover:text-gray-300 transition"
+                  :class="{'text-white': exampleType === 'DASI API'}"
+                  v-on:click="exampleType = 'DASI API'">
+                  DASI API
+                  <div class="absolute -left-1 -right-1 bottom-0 h-1 rounded-t-full bg-primary_main_hover"
+                    v-if="exampleType === 'DASI API'"></div>
+                </div>
+              </div>
+
+              <div class="font-medium px-5 mb-1 text-[13px] flex items-center">
+                Request example
+                <div class="ml-auto text-white/35 font-normal">
+                  {{ exampleType }}
+                </div>
+              </div>
+              <template v-if="exampleType === 'cURL'">
+                <pre class="px-4 py-3 bg-[#1f3473] overflow-x-scroll mb-8 text-[13px] border-l-4 border-l-[#1f57ff]"><code>{{ CurlGenerator({ 
+                  url: `${apiUrl}${ls?.openApi.endpointExample}`,
+                  method: ls?.openApi.method,
+                  headers: ls?.openApi.headers,
+                  body: ls?.openApi.requestBodyExample,
+                }) }}</code></pre>
+              </template>
+              <template v-else>
+                <pre class="px-4 py-3 bg-[#1f3473] overflow-x-scroll mb-8 text-[13px] border-l-4 border-l-[#1f57ff]"><code>import api from '@/api/api'
+
+api.{{ ls?.openApi.method.toLowerCase() }}('{{ ls?.openApi.endpointExample }}'<template
+v-if="ls?.openApi.requestBodyExample">, {{ ls.openApi.requestBodyExample }}</template><template
+v-if="Object.keys(ls?.openApi.headers).length > 0">, {
+  headers: {
+    <span v-for="(header, i) in ls?.openApi.headers" :key="i">"{{ i }}": "{{ header }}",</span>
+  },
+}</template>).then((r) => {
+  // Your code after req success...
+
+}).catch((err) => {
+  // Logic for handling error...
+
+}).finally(() => {
+  // Finish api request, stop loading...
+
+})
+                </code></pre>
+              </template>
+              <div class="px-5 -mt-5 mb-8">
+                <button class="bg-primary_main w-full h-10 font-medium text-[15px] rounded-md shadow-md text-left flex items-center px-4 transition hover:bg-primary_main_hover hover:shadow-lg"
+                  :class="{'!bg-slate-800 !text-slate-600 !shadow-none !cursor-default': sendingApi}"
+                  v-on:click="tryApi(ls?.openApi)">
+                  <LucideLoader2 class="mr-2 animate-spin" v-if="sendingApi"/>
+                  <LucidePlaneTakeoff class="mr-2" v-else/>
+                  Try This Endpoint
+                </button>
+              </div>
+
+              <template v-if="ls?.openApi.requestBodyExample">
+                <div class="font-medium px-5 mb-1 text-[13px] flex items-center">
+                  Req. Body example
+                  <div class="ml-auto text-white/35 font-normal" v-if="ls.openApi.requestBodyContentType">
+                    {{ ls.openApi.requestBodyContentType }}
+                  </div>
+                </div>
+                <pre class="px-4 py-3 bg-[#1f3473] overflow-x-scroll mb-8 text-[13px] border-l-4 border-l-[#1f57ff]"><code>{{ ls?.openApi.requestBodyExample }}</code></pre>
+              </template>
+
+              <template v-if="ls?.openApi.okResponseExample">
+                <div class="font-medium px-5 mb-1 text-[13px] flex items-center">
+                  Success response example
+                  <div class="ml-auto text-white/35 font-normal" v-if="ls.openApi.responseContentType">
+                    {{ ls.openApi.responseContentType }}
+                  </div>
+                </div>
+                <pre class="px-4 py-3 bg-[#1f3473] overflow-x-scroll mb-8 text-[13px] border-l-4 border-l-[#1f57ff]"><code>{{ ls?.openApi.okResponseExample }}</code></pre>
+              </template>
+            </section>
+          </div>
+
+          <div class="text-sm text-gray-400">
+            <Copyright/>
+          </div>
+        </div>
+        <div class="absolute right-0 top-0 bottom-0 w-[400px] bg-slate-800"></div>
+      </div>
+      <div class="relative" v-else>
+        <div class="max-w-[760px]">
+          <div v-if="indexHtml">
+            <div id="dasi-docs" class="dasi-docs" v-html="indexHtml"></div>
+            <div class="text-sm text-gray-400">
+              <Copyright/>
+            </div>
+          </div>
+          <div class="text-center flex items-center h-[calc(100vh-200px)]" v-else>
+            <div class="w-full">
+              <LucideScrollText :size="40" :stroke-width="1.5" class="mx-auto mb-3 text-gray-500"/>
+              <div class="font-semibold text-lg">
+                Tidak Ada Data
+              </div>
+              <div class="text-gray-500 text-sm">
+                Maaf! Konten belum tersedia
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fixed top-24 right-0 w-80 text-sm pt-5 pr-6" v-if="rightbar && rightbar.length > 0">
+          <h4 class="font-semibold mb-1 text-lg">Di halaman ini</h4>
+          <div v-for="(item, i) in rightbar" :key="i"
+            class="py-1 text-gray-400 hover:text-text_main cursor-pointer rightbar-nav relative"
+            :class="{active: i === rsi}" v-on:click="gotoH2(i)">
+            {{item.title}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <ApiTester ref="apiTesterEl"/>
+</template>
+
+<style lang="scss" scoped>
+.rightbar-nav{
+  transition: all .3s ease;
+  &:before{
+    content: "";
+    position: absolute;
+    left: 0; top: 4px; bottom: 4px;
+    width: 0;
+    border-radius: 50px;
+    transition: all .3s ease;
+    background-color: #ccc;
+  }
+  &:hover, &.active{
+    padding-left: 12px;
+    opacity: 1;
+    &:before{
+      width: 3px;
+    }
+  }
+  &.active{
+    color: #2671D9;
+    &:before{
+      background-color: #2671D9;
+    }
+  }
+}
+</style>