added docs

Author: rootxjs

src/pages/docs/DocsContents.astro

@@ -0,0 +1,103 @@
+---
+import { type CollectionEntry } from 'astro:content'
+
+import { getBlogCollection } from 'astro-pure/server'
+import { cn } from 'astro-pure/utils'
+
+export const prerender = true
+export const partial = true
+
+const docsCollection = (await getBlogCollection('docs')) as CollectionEntry<'docs'>[]
+// Group docs by id first part (setup, integrations, advanced, etc.)
+const docsByCate = docsCollection.reduce((acc: { [key: string]: typeof docsCollection }, doc) => {
+  const id = doc.id.split('/')[0]
+  if (!acc[id]) acc[id] = [] as typeof docsCollection
+  acc[id].push(doc)
+  return acc
+}, {})
+
+const docCategories = {
+  "grpc_goat_docs": 'gRPC Goat Docs',
+  // integrations: 'Integrations',
+  // advanced: 'Advanced'
+}
+
+type Props = {
+  title?: boolean
+  class?: string
+}
+
+const { title = true, class: className, ...props } = Astro.props
+---
+
+<docs-toc class={cn('not-prose', className)} {...props}>
+  {title && <h2 class='text-foreground font-semibold'>DOCS</h2>}
+  <ul class='mt-4 flex flex-col gap-y-5'>
+    {
+      Object.entries(docCategories).map(([id, title]: [string, string]) => (
+        <li>
+          <h3 class='text-muted-foreground text-xs tracking-widest uppercase'>{title}</h3>
+          <ul class='mt-2 flex flex-col'>
+            {docsByCate[id]
+              ?.sort((a, b) => a.data.order - b.data.order)
+              ?.map((doc) => (
+                <li class='docs-item flex relative ms-2 px-3 py-1 text-foreground/75 transition-all rounded-2xl'>
+                  <a class='flex-1 hover:text-foreground' href={`/docs/${doc.id}`}>
+                    {doc.data.title}
+                  </a>
+                </li>
+              ))}
+          </ul>
+        </li>
+      ))
+    }
+  </ul>
+</docs-toc>
+
+<style>
+  docs-toc .docs-item::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 5%;
+    bottom: 5%;
+    left: -0.5rem;
+    width: 2px;
+    background-color: hsl(var(--input) / var(--un-bg-opacity));
+  }
+
+  docs-toc :global(.docs-item.docs-hl) {
+    background-color: hsl(var(--muted) / var(--un-bg-opacity));
+    font-weight: 500;
+    & a {
+      color: hsl(var(--primary) / var(--un-text-opacity));
+    }
+
+    &::before {
+      background-color: hsl(var(--primary) / var(--un-bg-opacity));
+    }
+  }
+</style>
+
+<script>
+  class DocsTOC extends HTMLElement {
+    link: string = ''
+
+    constructor() {
+      super()
+
+      this.link = window.location.pathname
+    }
+
+    connectedCallback() {
+      const links = this.querySelectorAll('a')
+      links.forEach((link) => {
+        if (link.getAttribute('href') === this.link) {
+          link.parentElement?.classList.add('docs-hl')
+        }
+      })
+    }
+  }
+
+  customElements.define('docs-toc', DocsTOC)
+</script>