feat: overhaul styling for tool pages

Signed-off-by: tylerslaton <[email protected]>

src/components/Sidebar.vue

@@ -1,77 +1,19 @@
 <template>
-    <div class="sidebar">
-        <div v-for="group in headerGroups" :key="group.id" class="mb-4 overflow-auto">
-            <a :href="`#${group.id}`">{{ group.text || "root" }}</a>
-            <button @click="toggleGroup(group)" class="px-4 py-2 text-xs font-thin cursor-pointer">
-                {{ group.isOpen ? '▼' : '►' }}
-            </button>
-
-            <div class="ml-4" v-show="group.isOpen">
-                <div v-for="header in group.headers" :key="header.id" class="m-2">
-                    <a :href="`#${header.id}`">{{ header.text }}</a>
-                </div>
-            </div>
+    <div class="sidebar text-gray-600">
+        <div v-for="header in headers" :key="header.id" class="mb-4 overflow-auto">
+            <a :href="`#${header.id}`">{{ header.innerHTML || "root" }}</a>
         </div>
     </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
 
-const headerGroups = ref([]);
+const headers = ref([]);
 
 onMounted(() => {
     fetchHeaders();
-    achors();
 });
 
-const fetchHeaders = () => {
-    const headers = Array.from(document.querySelectorAll('h2, h4'));
-    const groups = [];
-
-    for (let i = 0; i < headers.length; i++) {
-        const header = headers[i];
-        if (header.tagName === 'H2') {
-            const group = {
-                id: header.id,
-                text: header.textContent,
-                headers: [],
-                isOpen: false
-            };
-            groups.push(group);
-        } else if (header.tagName === 'H4' && groups.length > 0) {
-            const group = groups[groups.length - 1];
-            group.headers.push({
-                id: header.id,
-                text: header.textContent
-            });
-        }
-    }
-
-    headerGroups.value = groups;
-}
-
-const achors = () => {
-    const navbarHeight = document.querySelector('.navbar').offsetHeight;
-    const anchors = document.querySelectorAll('.sidebar a');
-
-    anchors.forEach(anchor => {
-        anchor.addEventListener('click', (event) => {
-            event.preventDefault();
-            const targetId = anchor.getAttribute('href').substring(1);
-            const targetElement = document.getElementById(targetId);
-            const offsetTop = targetElement.offsetTop - navbarHeight;
-
-            window.scrollTo({
-                top: offsetTop,
-                behavior: 'smooth'
-            });
-        });
-    });
-}
-
-const toggleGroup = (group) => {
-    group.isOpen = !group.isOpen;
-}
-
+const fetchHeaders = () => headers.value = Array.from(document.querySelectorAll('h2'));
 </script>

src/components/Tool.vue

@@ -7,11 +7,14 @@
             <p class="">{{ tool.description }}</p>
 
             <h3 :id="tool+ '-arguments'">Arguments</h3>
-            <div v-for="(properties, arg) in tool.arguments?.properties" :key="arg">
-                <h4 :id="tool.name + '-arg-' + arg" class="mb-0">{{ arg }}</h4>
-                <p class="text-gray-500" v-if="properties.type">{{ properties.type }}</p>
-                <p v-if="properties.description">{{ properties.description }}</p>   
-            </div>
+            <table>
+              <tbody>
+                <tr v-for="(properties, arg) in tool.arguments?.properties" :key="arg">
+                  <td class="font-semibold">{{ arg }}</td>
+                  <td class="">{{ properties.description }}</td>
+                </tr>
+              </tbody>
+            </table>
 
             <h3 v-if="tool.tools && tool.tools.length" :id="tool.name + 'tools-used'">Tools used</h3>
             <div v-if="tool.tools && tool.tools.length">

src/pages/[...slug].vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="flex mt-16 mx-24">
-    <div class="hidden md:block">
-      <Sidebar class="mr-24 sticky top-8"/>
+  <div class="flex">
+    <div class="hidden md:block border-r border-gray-200">
+      <Sidebar class="mx-20 sticky top-8 pt-10"/>
+    </div>
+    <div class="pt-10 mx-auto w-auto sm:mx-20">
+      <Tool :owner="owner" :repo="repo"/>
     </div>
-    <Tool :owner="owner" :repo="repo"/>
   </div>
 </template>