@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/layouts/DocsLayout.vue

@@ -1,681 +0,0 @@
-<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>