Nested headings for Transcript Page (#75)

* fix(nested-headings): nested headings for content grouping components

* refactor(data-structure): changed complex data structure for contentGrouping and Transcript content page

contentlayer.config.ts

@@ -1,10 +1,8 @@
 import path from "path";
 import * as fs from "fs";
 import {
-  ContentData,
   createSlug,
-  SpeakerData,
-  TopicsData,
+  FieldCountItem,
   unsluggify,
 } from "./src/utils";
 import {
@@ -113,8 +111,8 @@ function buildTopicsMap(
 
 function generateAlphabeticalList(
   processedTopics: Map<string, ProcessedTopic>
-): TopicsData[] {
-  const result: TopicsData[] = [];
+): FieldCountItem[] {
+  const result: FieldCountItem[] = [];
   // The categories property is not needed for this list, so we drop it
   for (const { name, slug, count } of processedTopics.values()) {
     result.push({ name, slug, count });
@@ -124,8 +122,8 @@ function generateAlphabeticalList(
 
 function generateCategorizedList(
   processedTopics: Map<string, ProcessedTopic>
-): Record<string, TopicsData[]> {
-  const categorizedTopics: Record<string, TopicsData[]> = {};
+): Record<string, FieldCountItem[]> {
+  const categorizedTopics: Record<string, FieldCountItem[]> = {};
 
   Array.from(processedTopics.values()).forEach(
     ({ name, slug, count, categories }) => {
@@ -182,7 +180,7 @@ function generateTopicsCounts(transcripts: ContentTranscriptType[]) {
 
 function createSpeakers(transcripts: ContentTranscriptType[]) {
   const slugSpeakers: any = {};
-  const speakerArray: SpeakerData[] = [];
+  const speakerArray: FieldCountItem[] = [];
 
   transcripts.forEach((transcript) => {
     const slugSpeakersArray = transcript.speakers?.map((speaker) => ({
@@ -382,21 +380,21 @@ export const Transcript = defineDocumentType(() => ({
       type: "list",
       resolve: (doc) => {
          // doc?.tags doesn't give an array in contentLayer so we do  _array to get it
-        const topicsStore = doc?.tags as any || []; 
+        const topicsStore = doc?.tags as any || [];
         const topics = (topicsStore?._array as string[]) ?? [];
 
         const topicsWithTitles = topics.map((topic) => {
           const currentTopic = getTopics().find(
-            (topicData: ContentData) => topicData.slug === topic
+            (topicData: FieldCountItem) => topicData.slug === topic
           );
 
           if(currentTopic?.title && currentTopic?.title.includes("(Miscellaneous)")) {
-            return { 
+            return {
               name: currentTopic?.title.replace("(Miscellaneous)",""),
               slug: currentTopic.slug,
             }
           }
-          return { 
+          return {
               name: currentTopic?.title || topic,
               slug: currentTopic?.slug || topic,
           };

src/app/(explore)/categories/page.tsx

@@ -1,12 +1,27 @@
 import React from "react";
 import TranscriptContentPage from "@/components/explore/TranscriptContentPage";
 import allCategoriesTopic from "@/public/topics-by-category-counts.json";
+import { createContentSlug, ExploreGroupedData, FieldCountItem } from "@/utils";
 
 const CategoriesPage = () => {
-
+  const categoriesTopic = allCategoriesTopic as Record<string, FieldCountItem[]>;
+  let reStructuredCategories: ExploreGroupedData[] = [];
+  for (let key in categoriesTopic) {
+    reStructuredCategories.push({
+      name: key,
+      slug: createContentSlug(key),
+      nested: categoriesTopic[key],
+    });
+  }
   return (
     <div className="flex flex-col text-black">
-        <TranscriptContentPage header="Categories" data={allCategoriesTopic} description="Explore the main areas of focus within the Bitcoin technical ecosystem."  type="words" linkName="tags"/>
+      <TranscriptContentPage
+        header="Categories"
+        data={reStructuredCategories}
+        description="Explore the main areas of focus within the Bitcoin technical ecosystem."
+        type="words"
+        linkName="tags"
+      />
     </div>
   );
 };

src/app/(explore)/types/page.tsx

@@ -1,16 +1,26 @@
 import React from "react";
 import TranscriptContentPage from "@/components/explore/TranscriptContentPage";
 import allTypesData from "@/public/types-data.json";
+import { createContentSlug, ExploreGroupedData, FieldCountItem } from "@/utils";
 
 const CategoriesPage = () => {
+  const allTypes = allTypesData as Record<string, FieldCountItem[]>;
+  let reStructuredTypes: ExploreGroupedData[] = [];
+  for (let key in allTypes) {
+    reStructuredTypes.push({
+      name: key,
+      slug: createContentSlug(key),
+      nested: allTypes[key],
+    });
+  }
   return (
-    <div className='flex flex-col text-black'>
+    <div className="flex flex-col text-black">
       <TranscriptContentPage
-        header='Types'
-        data={allTypesData}
-        description='Sources tend to fall into discrete types, from podcasts to meetups. Find transcripts in your preferred format of communication.'
-        type='words'
-        linkName='sources'
+        header="Types"
+        data={reStructuredTypes}
+        description="Sources tend to fall into discrete types, from podcasts to meetups. Find transcripts in your preferred format of communication."
+        type="words"
+        linkName="sources"
       />
     </div>
   );

src/components/common/Tabs.tsx

@@ -3,8 +3,8 @@
 import { Resources } from "contentlayer/generated";
 import React, { SetStateAction, useState } from "react";
 import TranscriptTabContent from "../individual-transcript/TranscriptTabContent";
-import ContentGrouping from "../explore/ContentGrouping";
-import { ContentData, GroupedData, TopicsData } from "@/utils";
+import NavigationByWords from "../explore/NavigationByWords";
+import { NavigationList } from "@/utils";
 
 const Tabs = ({
   summary,
@@ -18,7 +18,7 @@ const Tabs = ({
   markdown: string;
   extraInfo?: Resources[];
   currentHeading?: string;
-  groupedHeading?: Record<string, ContentData[]>;
+  groupedHeading?: NavigationList[];
   setCurrentHeading?: React.Dispatch<SetStateAction<string>>;
 }) => {
   const [openTabs, setOpenTabs] = useState<
@@ -51,11 +51,11 @@ const Tabs = ({
       </div>
 
      {/* This is needed since the layout for the mobile design changes and goes under the tabs */}
-      {Object.keys({ ...groupedHeading }).length > 0 && (
+      {groupedHeading && (
         <div className="block w-full pt-4 lg:hidden sticky top-[20px] md:top-[65px] z-[5]">
-          <ContentGrouping
+          <NavigationByWords
             currentGroup={currentHeading || ""}
-            groupedData={(groupedHeading as GroupedData) || []}
+            navigationList={groupedHeading}
             screen="mobile"
           />
         </div>

src/components/common/TranscriptDetailsCard.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 import { ContentTreeArray } from "@/utils/data";
-import { ContentData, formatDate } from "@/utils";
+import { FieldCountItem, formatDate, TagsDetailed } from "@/utils";
 import { MicIcon, BookmarkIcon, CalendarIcon } from "@bitcoin-dev-project/bdp-ui/icons";
 import Pill from "./Pill";
 import useURLManager from "@/service/URLManager/useURLManager";
@@ -18,7 +18,7 @@ const TranscriptDetailsCard = ({ data, pillCountLimit = 3, breadCrumbsComponent
   const speakersToDisplay = pillCountLimit ? speakers?.slice(0, pillCountLimit) : speakers;
   const tagsToDisplay = pillCountLimit ? tagsDetailed?.slice(0, pillCountLimit) : tagsDetailed;
 
-  const calculateRemaining = (data: ContentData[] | string[]) => {
+  const calculateRemaining = (data: FieldCountItem[] | string[] | TagsDetailed[]) => {
     if (!pillCountLimit) return 0;
     // only truncate if data exceeds limit
     if (data?.length && data.length > pillCountLimit) {

src/components/common/TranscriptMetadataCard.tsx

@@ -7,8 +7,7 @@ import {
   CalendarIcon,
   MicIcon,
 } from "@bitcoin-dev-project/bdp-ui/icons";
-import Link from "next/link";
-import { ContentData, createSlug } from "@/utils";
+import { createSlug, FieldCountItem } from "@/utils";
 import AiGeneratedIcon from "../svgs/AIGeneratedIcon";
 import { format, isDate } from "date-fns";
 import Pill from "./Pill";
@@ -17,7 +16,7 @@ import { getIsolatedFacetLink } from "@/service/URLManager/helper";
 interface ITranscriptMetadataComponent {
   title: string;
   date: string | Date;
-  topics: ContentData[];
+  topics: FieldCountItem[];
   speakers: string[] | null;
   transcriptBy: string | string[];
 }
@@ -88,7 +87,7 @@ const TranscriptMetadataComponent = ({
             }
             footer={
               <div className="pl-2.5">
-                {formattedDate ? 
+                {formattedDate ?
                 <p className="text-xs md:text-sm lg:text-base 2xl:text-lg md:font-medium">
                   {formattedDate}
                 </p>:
@@ -160,7 +159,7 @@ const TranscriptMetadataComponent = ({
                       <span>
                         AI Generated (Review for sats)
                       </span>
-                      
+
                     </a>{" "}
                   </>
                 ) : (

src/components/explore/AlphabetNavigation.tsx

@@ -0,0 +1,41 @@
+import { ExploreGroupedData } from "@/utils";
+import Link from "next/link";
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+export interface IAlphabetNavigation {
+  currentGroup: string;
+  groupedData: ExploreGroupedData[];
+}
+const AlphabetNavigation = ({ currentGroup, groupedData }: IAlphabetNavigation) => {
+
+  return (
+    <div
+      className={
+        "grid grid-cols-5 p-5 gap-4 lg:p-6  2xl:gap-6  border border-gray-custom-1200 rounded-md"
+      }
+    >
+      {groupedData.map((char) =>
+        char?.nested&& char?.nested.length > 0 ? (
+          <Link
+            key={char.slug}
+            href={`#${char.slug}`}
+            className={twMerge("flex justify-center items-center w-8 h-8 text-base 2xl:h-10 2xl:w-10 2xl:text-lg",
+      currentGroup === char.slug
+        ? "text-orange-custom-100 bg-orange-custom-900 rounded-[4px] font-semibold"
+        : "hover:text-orange-custom-100",
+  )}
+          >
+            {char.name}
+          </Link>
+        ) : (
+          <button  key={char.slug} className="text-gray-custom-1400 cursor-not-allowed">
+            {char.name}
+          </button>
+        )
+      )}
+    </div>
+  );
+};
+
+export default AlphabetNavigation;