fix: remove last slash from currentPageMatch, format

.prettierrc.cjs

@@ -1,5 +1,8 @@
 module.exports = {
-  plugins: [require.resolve("prettier-plugin-astro")],
+  plugins: [
+    require.resolve("prettier-plugin-astro"),
+    require.resolve("prettier-plugin-tailwindcss"),
+  ],
   overrides: [
     {
       files: "*.astro",

docs/config.ts

@@ -1,8 +1,8 @@
 export interface Docs {
-  sidebar: Sidebar[];
+  sidebar: SidebarItem[];
 }
 
-export interface Sidebar {
+export interface SidebarItem {
   text: string;
   header?: boolean;
   link?: string;
@@ -26,6 +26,6 @@ export const docs: Docs = {
     {
       text: "Stats",
       link: "/docs/discord-experiments-api/stats",
-    }
+    },
   ],
 };

src/components/widgets/docs/LeftSidebar.astro

@@ -1,16 +1,18 @@
 ---
-import { docs, type Sidebar } from "@docs/config";
+import { docs, type SidebarItem } from "@docs/config";
 const { currentPage } = Astro.props;
-const currentPageMatch = currentPage.slice(1);
+const currentPageMatch = currentPage.slice(1).endsWith("/")
+  ? currentPage.slice(1).slice(0, -1)
+  : currentPage.slice(1);
 
-const isCurrentPage = (item: Sidebar) => {
+const isCurrentPage = (item: SidebarItem) => {
   if (item.link) {
     return item.link.includes(currentPageMatch);
   }
   return false;
 };
 
-const getLinkClasses = (link: Sidebar) => {
+const getLinkClasses = (link: SidebarItem) => {
   const baseClasses = "py-1 px-6 my-1 transition-colors border-l -ml-px pl-4";
 
   if (isCurrentPage(link)) {

src/components/widgets/docs/RightSidebar.astro

@@ -20,7 +20,7 @@ const headings = item
 
 {
   headings.length > 1 && (
-    <nav aria-labelledby="grid-right" class="p-4 invisible md:visible">
+    <nav aria-labelledby="grid-right" class="invisible p-4 md:visible">
       <div class="pl-8">
         <TableOfContents headings={headings} client:idle />
       </div>

src/components/widgets/docs/TableOfContents.tsx

@@ -99,8 +99,8 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
           <li
             className={`border-l py-1 ${
               currentId === slug
-                ? "text-gold border-gold"
+                ? "border-gold text-gold"
-                : "text-gray-100 hover:text-gray-200 border-transparent"
+                : "border-transparent text-gray-100 hover:text-gray-200"
             }`}
           >
             <a

src/pages/blog/[...page].astro

@@ -5,15 +5,24 @@ import Container from "@components/atoms/Container.astro";
 import Button from "~/components/widgets/Button.astro";
 import type { PaginateFunction } from "astro";
 
-export async function getStaticPaths({ paginate }: {
+export async function getStaticPaths({
+  paginate,
+}: {
   paginate: PaginateFunction;
 }) {
   // Load your data with fetch(), Astro.glob(), etc.
-  const posts = (await Astro.glob('@blog/*.md')).sort(
+  const posts = (await Astro.glob("@blog/*.md"))
-	(a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()
+    .sort(
-).map((post) => ({
+      (a, b) =>
+        new Date(b.frontmatter.date).valueOf() -
+        new Date(a.frontmatter.date).valueOf()
+    )
+    .map((post) => ({
       ...post,
-    url: `/blog/posts/${post.file.split("/blog/")[1].split("/")[0].replace(".md", "")}`,
+      url: `/blog/posts/${post.file
+        .split("/blog/")[1]
+        .split("/")[0]
+        .replace(".md", "")}`,
     }));
 
   return paginate(posts, { pageSize: 3 });
@@ -32,30 +41,56 @@ const posts = page.data as {
 
 <Layout>
   <Navbar />
-    <h1 class="text-white text-5xl w-full text-center py-32 font-extrabold">
+  <h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
     Blog
   </h1>
 
   <Container class="flex content-center justify-center">
     <main>
-            {posts.map(post => {
+      {
+        posts.map((post) => {
           return (
-                    <a class="text-2xl font-semibold text-gold text-opacity-80 mb-4 break-all" href={post.url}>{post.frontmatter.title}</a>
+            <>
-                    <p class="text-1xl text-opacity-40 text-white italic break-all">
+              <a
-                        {new Date(post.frontmatter.date).toLocaleDateString('en-us', {
+                class="mb-4 break-all text-2xl font-semibold text-gold text-opacity-80"
-                            year: 'numeric',
+                href={post.url}
-                            month: 'short',
+              >
-                            day: 'numeric',
+                {post.frontmatter.title}
+              </a>
+              <p class="text-1xl break-all italic text-white text-opacity-40">
+                {new Date(post.frontmatter.date).toLocaleDateString("en-us", {
+                  year: "numeric",
+                  month: "short",
+                  day: "numeric",
                 })}
               </p>
-                    <p class="text-1xl text-white break-all">{post.frontmatter.description}</p>
+              <p class="text-1xl break-all text-white">
-                    <hr class="mt-4 mb-4 text-dark-200" />
+                {post.frontmatter.description}
-                )
+              </p>
-            })}
+              <hr class="mb-4 mt-4 text-dark-200" />
+            </>
+          );
+        })
+      }
 
       <div class="flex flex-row gap-3">
-                <Button label="Previous" link={page.url.prev} type="primary" icon="/icons/chevrons-right.svg" iconClass="mr-2 h-6 w-5 rotate-180" iconPosition="left" disabled={!page.url.prev} />
+        <Button
-                <Button label="Next" link={page.url.next} type="primary" icon="/icons/chevrons-right.svg" iconClass="ml-2 mt-[1px] h-[23px] w-5" disabled={!page.url.next} />
+          label="Previous"
+          link={page.url.prev}
+          type="primary"
+          icon="/icons/chevrons-right.svg"
+          iconClass="mr-2 h-6 w-5 rotate-180"
+          iconPosition="left"
+          disabled={!page.url.prev}
+        />
+        <Button
+          label="Next"
+          link={page.url.next}
+          type="primary"
+          icon="/icons/chevrons-right.svg"
+          iconClass="ml-2 mt-[1px] h-[23px] w-5"
+          disabled={!page.url.next}
+        />
       </div>
     </main>
   </Container>