rename index file for collection and added accessiblity for some components

src/content/authors/-index.md

@@ -0,0 +1,5 @@
+---
+title: "Authors"
+meta_title: ""
+description: "this is meta description"
+---

src/content/authors/index.md

@@ -1,3 +0,0 @@
----
-title: "Authors"
----

src/content/config.ts

@@ -48,6 +48,6 @@ const pagesCollection = defineCollection({
 // Export collections
 export const collections = {
   posts: postsCollection,
-  pages: pagesCollection,
   authors: authorsCollection,
+  pages: pagesCollection,
 };

src/layouts/shortcodes/Accordion.tsx

@@ -13,7 +13,7 @@ const Accordion = ({
 
   return (
     <div className={`accordion ${show && "active"} ${className}`}>
-      <div className="accordion-header" onClick={() => setShow(!show)}>
+      <button className="accordion-header" onClick={() => setShow(!show)}>
         {title}
         <svg
           className="accordion-icon"
@@ -27,7 +27,7 @@ const Accordion = ({
             d="M505.755,123.592c-8.341-8.341-21.824-8.341-30.165,0L256.005,343.176L36.421,123.592c-8.341-8.341-21.824-8.341-30.165,0 s-8.341,21.824,0,30.165l234.667,234.667c4.16,4.16,9.621,6.251,15.083,6.251c5.462,0,10.923-2.091,15.083-6.251l234.667-234.667 C514.096,145.416,514.096,131.933,505.755,123.592z"
           ></path>
         </svg>
-      </div>
+      </button>
       <div className="accordion-content">{children}</div>
     </div>
   );

src/layouts/shortcodes/Tabs.tsx

@@ -1,44 +1,63 @@
 import { marked } from "marked";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
-function Tabs({ children }: { children: any }) {
-  const [active, setAvtive] = useState(0);
+const Tabs = ({ children }: any) => {
+  const [active, setActive] = useState(0);
+  const [defaultFocus, setDefaultFocus] = useState(false);
 
-  const tabItems = Array.from(
+  const tabRefs: any = useRef([]);
+  useEffect(() => {
+    if (defaultFocus) {
+      tabRefs.current[active]?.focus();
+    } else {
+      setDefaultFocus(true);
+    }
+  }, [active]);
+
+  const tabLinks = Array.from(
     children.props.value.matchAll(
       /<div\s+data-name="([^"]+)"[^>]*>(.*?)<\/div>/gs
     ),
     (match: RegExpMatchArray) => ({ name: match[1], children: match[0] })
   );
 
+  const handleKeyDown = (event: any, index: number) => {
+    if (event.key === "Enter" || event.key === " ") {
+      setActive(index);
+    } else if (event.key === "ArrowRight") {
+      setActive((active + 1) % tabLinks.length);
+    } else if (event.key === "ArrowLeft") {
+      setActive((active - 1 + tabLinks.length) % tabLinks.length);
+    }
+  };
+
   return (
     <div className="tab">
       <ul className="tab-nav">
-        {tabItems.map((item: any, index: number) => (
+        {tabLinks.map((item: any, index: number) => (
           <li
             key={index}
             className={`tab-nav-item ${index === active && "active"}`}
-            onClick={() => setAvtive(index)}
+            role="tab"
+            tabIndex={index === active ? 0 : -1}
+            onKeyDown={(event) => handleKeyDown(event, index)}
+            onClick={() => setActive(index)}
+            ref={(ref) => (tabRefs.current[index] = ref)}
           >
             {item.name}
           </li>
         ))}
       </ul>
-
-      <div className="tab-content">
-        {tabItems.map((item, i) => (
-          <div
-            className={`tab-content-panel ${
-              active === i ? "active" : "hidden"
-            }`}
-            dangerouslySetInnerHTML={{
-              __html: marked.parse(item.children),
-            }}
-          />
-        ))}
-      </div>
+      {tabLinks.map((item, i) => (
+        <div
+          className={active === i ? "tab-content block px-5" : "hidden"}
+          dangerouslySetInnerHTML={{
+            __html: marked.parseInline(item.children),
+          }}
+        />
+      ))}
     </div>
   );
-}
+};
 
 export default Tabs;

src/lib/contentParser.astro

@@ -3,7 +3,7 @@ import { getCollection } from "astro:content";
 
 export const getSinglePage = async (collection: any) => {
   const allPage = await getCollection(collection);
-  const removeIndex = allPage.filter((data) => data.id !== "index.md");
+  const removeIndex = allPage.filter((data) => data.id.match(/^(?!-)/));
   const removeDrafts = removeIndex.filter((data) => !data.data.draft);
   return removeDrafts;
 };

src/pages/authors/index.astro

@@ -5,7 +5,7 @@ import { getSinglePage } from "@/lib/contentParser.astro";
 import PageHeader from "@/partials/PageHeader.astro";
 import { getEntryBySlug } from "astro:content";
 
-const authorIndex = await getEntryBySlug<any, string>("authors", "index");
+const authorIndex = await getEntryBySlug<any, string>("authors", "-index");
 const authors = await getSinglePage("authors");
 ---
 

src/pages/posts/index.astro

@@ -11,7 +11,7 @@ import PostSidebar from "@/partials/PostSidebar.astro";
 import { getEntryBySlug } from "astro:content";
 
 const { blog_folder } = config.settings;
-const postIndex = await getEntryBySlug<any, string>(blog_folder, "index");
+const postIndex = await getEntryBySlug<any, string>(blog_folder, "-index");
 const posts = await getSinglePage(blog_folder);
 const allCategories = await getAllTaxonomy(blog_folder, "categories");
 const categories = await getTaxonomy(blog_folder, "categories");

src/pages/posts/page/[slug].astro

@@ -12,7 +12,7 @@ import { getEntryBySlug } from "astro:content";
 
 const { blog_folder } = config.settings;
 const { slug } = Astro.params;
-const postIndex = await getEntryBySlug<any, string>(blog_folder, "index");
+const postIndex = await getEntryBySlug<any, string>(blog_folder, "-index");
 const posts = await getSinglePage(blog_folder);
 const allCategories = await getAllTaxonomy(blog_folder, "categories");
 const categories = await getTaxonomy(blog_folder, "categories");

src/styles/components.scss

@@ -118,10 +118,10 @@
 .accordion {
   @apply mb-6 overflow-hidden rounded-lg border border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light;
   &-header {
-    @apply flex cursor-pointer items-center justify-between px-8 py-4 text-lg text-dark dark:bg-darkmode-theme-light dark:text-darkmode-light;
+    @apply flex w-full cursor-pointer items-center justify-between px-8 py-4 text-lg text-dark dark:bg-darkmode-theme-light dark:text-darkmode-light;
   }
   &-icon {
-    @apply h-[.8em] w-[.8em] rotate-[-90deg] transition-transform duration-200;
+    @apply ml-auto h-[.8em] w-[.8em] rotate-[-90deg] transition-transform duration-200;
   }
   &-content {
     @apply max-h-0 overflow-hidden px-8 py-0;