fix: h1,h2 check and code tag adjustment

src/app/transcript/[...slug]/page.tsx

@@ -18,19 +18,11 @@ export function generateStaticParams() {
   return allSingleTranscriptPaths;
 }
 
+
 const Page = ({ params }: { params: { slug: string[] } }) => {
   const slugArray = params.slug;
-  const isNonEnglishLanguage = LanguageCodes.includes(slugArray[0]);
-  let transcriptUrl = "";
-  if (isNonEnglishLanguage) {
-    const languageCode = slugArray.shift();
-    slugArray[slugArray.length - 1] = slugArray[slugArray.length - 1] + `.${languageCode}`;
-    transcriptUrl = `/${slugArray.join("/")}`;
-  } else {
-    transcriptUrl = `/${slugArray.join("/")}`;
-  }
-
-  const transcript = allTranscripts.find(transcript => transcript.url === transcriptUrl)
+  let transcriptUrl = `/${slugArray.join("/")}`;
+  const transcript = allTranscripts.find(transcript => transcript.languageURL === transcriptUrl)
 
   if(!transcript) {
     return notFound();

src/components/common/ContentSwitch.tsx

@@ -72,7 +72,7 @@ const ContentSwitch = ({
           />
         )}
       </div>
-      <div className="block w-full pt-4 lg:hidden sticky top-[20px] md:top-[152px] z-[5]">
+      <div className="block w-full pt-4 lg:hidden sticky top-[20px] md:top-[65px] z-[5]">
         <ContentGrouping
           currentGroup={currentHeading || ""}
           groupedData={groupedHeading || []}

src/components/common/TranscriptDetailsCard.tsx

@@ -8,7 +8,7 @@ import { createSlug, formatDate, unsluggify } from "@/utils";
 import { MicIcon } from "@bitcoin-dev-project/bdp-ui/icons";
 
 const TranscriptDetailsCard = ({ data, slug }: { data: ContentTreeArray; slug: string[] }) => {
-  const { speakers, tags, summary, date, title, body, flattenedPath: url } = data;
+  const { speakers, tags, summary, date, title, body, languageURL } = data;
 
   const calculateRemaining = (data: string[]) => (data?.length && data.length > 3 ? data.length - 3 : 0);
 
@@ -17,7 +17,7 @@ const TranscriptDetailsCard = ({ data, slug }: { data: ContentTreeArray; slug: s
       <section className='flex justify-between'>
         <div className='flex md:flex-row flex-col justify-between gap-2 w-full'>
           <Link
-            href={`/${url}`}
+            href={`${languageURL}`}
             className='font-bold text-base leading-[21.86px] md:text-xl 2xl:text-[22.5px] md:leading-[30px] text-orange-custom-100 md:text-black'
           >
             {title}

src/components/common/TranscriptMetadataCard.tsx

@@ -85,7 +85,7 @@ const TranscriptMetadataComponent = ({
               </>
             }
             footer={
-              <div className="pl-5">
+              <div className="pl-2.5">
                 <p className="text-xs md:text-sm lg:text-base 2xl:text-lg md:font-medium">
                   {formattedDate}
                 </p>
@@ -102,7 +102,7 @@ const TranscriptMetadataComponent = ({
             }
             footer={
               <div className="flex flex-wrap gap-2">
-                {topics &&
+                {(topics && topics.length > 0) ?
                   topics.map((topic) => (
                     <Link
                       key={topic}
@@ -111,7 +111,9 @@ const TranscriptMetadataComponent = ({
                     >
                       {topic}
                     </Link>
-                  ))}
+                  )):
+                  <p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
+                }
               </div>
             }
           />
@@ -125,7 +127,7 @@ const TranscriptMetadataComponent = ({
             }
             footer={
               <div className="flex flex-wrap gap-2">
-                {speakers &&
+                {speakers && speakers.length > 0 ?
                   speakers.map((speaker) => (
                     <Link
                       href={`/speakers/${createSlug(speaker)}`}
@@ -134,7 +136,9 @@ const TranscriptMetadataComponent = ({
                     >
                       {speaker}
                     </Link>
-                  ))}
+                  )):
+                  <p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
+                }
               </div>
             }
           />
@@ -149,16 +153,16 @@ const TranscriptMetadataComponent = ({
                   height={24}
                   className="w-5"
                 />
-                <p className="text-base lg:text-lg font-semibold">
+                <p className="text-base  lg:text-lg font-semibold">
                   Transcript by
                 </p>
               </>
             }
             footer={
-              <div className="pl-5">
+              <div className="pl-5 pt-1.5 flex items-center ">
                 {isAiGenerated ? (
                   <>
-                    <a className="text-blue-custom-100 no-underline border-b border-blue-custom-100 max-w-[max-content] text-sm 2xl:text-base flex gap-1 items-start cursor-pointer">
+                    <a href="https://review.btctranscripts.com/" className="text-blue-custom-100 no-underline border-b border-blue-custom-100 max-w-[max-content] text-sm 2xl:text-base flex gap-1 items-start cursor-pointer">
                     <AiGeneratedIcon className="-mt-0.5" />
                       <span>
                         AI Generated (Review for sats)

src/components/explore/ContentGrouping.tsx

@@ -2,7 +2,7 @@
 
 import { createContentSlug, createSlug, GroupedData } from "@/utils";
 import Link from "next/link";
-import { useEffect, useRef } from "react";
+import { SetStateAction, useEffect, useRef } from "react";
 import { twMerge } from "tailwind-merge";
 
 export interface IContentGrouping {
@@ -26,8 +26,7 @@ const ContentGrouping = ({
       linkRef.current.click();
     }
   };
-
-console.log(createContentSlug("Fee Management"), "test")
+
   useEffect(() => {
     if (currentGroup) {
       if (selectRef.current) {
@@ -41,7 +40,7 @@ console.log(createContentSlug("Fee Management"), "test")
       {screen === "desktop" && (
         <div
           className={twMerge(
-            " flex-col p-5 hidden lg:flex gap-2.5 border max-h-[calc(95vh-var(--header-height))] overflow-auto no-scrollbar border-gray-custom-1200 rounded-md w-full min-w-[260px] 2xl:min-w-[354px] ",
+            " flex-col p-5 hidden lg:flex gap-2.5 border max-h-[calc(95vh-var(--header-height))] overflow-auto scroller border-gray-custom-1200 rounded-md w-full min-w-[260px] 2xl:min-w-[354px] ",
             className
           )}
         >

src/components/individual-transcript/IndividualTranscript.tsx

@@ -8,6 +8,7 @@ import ContentGrouping from "../explore/ContentGrouping";
 import { createSlug, extractListOfHeadings } from "@/utils";
 import Wrapper from "../layout/Wrapper";
 import { twMerge } from "tailwind-merge";
+import FooterComponent from "../layout/FooterComponent";
 
 const IndividualTranscript = ({ transcript }: { transcript: Transcript }) => {
   const [currentHeading, setCurrentHeading] = useState("");
@@ -27,14 +28,15 @@ const IndividualTranscript = ({ transcript }: { transcript: Transcript }) => {
     {}
   );
 
+
   return (
-    <Wrapper className="relative flex flex-col gap-6 lg:gap-7 2xl:gap-10 mx-auto h-[calc(100vh-var(--header-height))] w-full overflow-y-auto scroll-smooth">
-      <div className="py-4 lg:pt-7 2xl:pt-10">
+    <Wrapper className="relative flex flex-col !px-0 gap-6 lg:gap-7 2xl:gap-10 mx-auto h-[calc(100vh-var(--header-height))] w-full overflow-y-auto scroll-smooth">
+      <div className="py-4 lg:pt-7 2xl:pt-10 px-4 lg:px-10 2xl:px-[60px]">
       <BreadCrumbs />
       </div>
 
-      <div className="flex gap-4  justify-between w-full ">
-        <div className=" w-full relative flex flex-col">
+      <div className="flex gap-4 justify-between px-4 lg:px-10 2xl:px-[60px]">
+        <div className=" w-full relative flex flex-col flex-1 ">
           <div className=" w-full">
             <TranscriptMetadataComponent
               title={transcript.title}
@@ -46,7 +48,7 @@ const IndividualTranscript = ({ transcript }: { transcript: Transcript }) => {
           </div>
 
           <div>
-            <div className="pt-4 md:pt-5 2xl:pt-6">
+            <div className="pt-4 md:pt-5 2xl:pt-6 pb-[var(--header-height)] xl:pb-[calc(60vh-var(--header-height))]">
               <ContentSwitch
                 markdown={transcript.body.raw}
                 summary={transcript?.summary}
@@ -71,6 +73,7 @@ const IndividualTranscript = ({ transcript }: { transcript: Transcript }) => {
           />
         </div>
       </div>
+      <FooterComponent />
     </Wrapper>
   );
 };

src/components/individual-transcript/TranscriptTabContent.tsx

@@ -34,9 +34,9 @@ const TranscriptTabContent = ({
           return (
             <InView
               as="div"
-              rootMargin="-30% 0% -70% 0%"
-              onChange={(inView, entry) => {
-                console.log(props.id, "test")
+              threshold={1}
+              rootMargin="35% 0% -65% 0%"
+              onChange={(inView) => {
                 if (setCurrentHeading && inView) {
                   setCurrentHeading(createContentSlug(props?.id || ""));
                 }
@@ -50,10 +50,10 @@ const TranscriptTabContent = ({
           return (
             <InView
               as="div"
-              rootMargin="-30% 0% -70% 0%"
+              threshold={1}
+              rootMargin="35% 0% -65% 0%"
               onChange={(inView, entry) => {
                 if (setCurrentHeading && inView) {
-                  console.log(props.id, "test")
                   setCurrentHeading(createContentSlug(props?.id || ""));
                 }
               }}
@@ -62,22 +62,6 @@ const TranscriptTabContent = ({
             </InView>
           );
         },
-        h3: ({ children = [], ...props }) => {
-          return (
-            <InView
-              as="div"
-              rootMargin="-30% 0% -70% 0%"
-              onChange={(inView) => {
-                if (setCurrentHeading && inView) {
-                  console.log(props.id, "test")
-                  setCurrentHeading(createContentSlug(props?.id || ""));
-                }
-              }}
-            >
-              <h3 id={createContentSlug(props?.id || "")}>{children}</h3>
-            </InView>
-          );
-        },
       }}
     />
   );

src/components/individual-transcript/markdown.css

@@ -1,14 +1,10 @@
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');
-
-
-.wmde-markdown {
+@import url('https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap');
+.wmde-markdown.wmde-markdown-color {
     background-color: transparent;
-    font-family: "Manrope", sans-serif;
+    font-family: "Manrope", sans-serif ;
 }
 
-.wmde-markdown h1,
-h2,
-h3 {
+.wmde-markdown h1, .wmde-markdown h2 {
     padding-left: 10px;
     scroll-margin-top: 100px;
     border-left: 8px solid #F7931A;
@@ -21,12 +17,27 @@ h3 {
 
 }
 
+.wmde-markdown h3, .wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
+    color: #000;
+    font-size: 1rem
+}
+
+span.code-line {
+    white-space: pre-wrap;
+}
+.wmde-markdown pre code, .wmde-markdown pre tt{
+    max-width: 100%;
+}
+.wmde-markdown pre > code {
+    max-width: 100%;
+}
+
 .wmde-markdown p {
 
     margin-bottom: 8px;
     color: #000;
     font-size: 0.875rem;
-    font-weight: 500;
+    font-weight: 400;
     line-height: 2.1875rem;
 }
 
@@ -36,9 +47,7 @@ h3 {
 
 @media (min-width: 1024px) {
 
-    .wmde-markdown h1,
-    h2,
-    h3 {
+    .wmde-markdown h1, .wmde-markdown h2 {
         /* margin: 0px !important; */
         scroll-margin-top: 100px;
         color: #000;
@@ -48,8 +57,9 @@ h3 {
         font-size: 1.2rem;
     }
 
-    .wmde-markdown h4,h5,h6{
-        color: black;
+    .wmde-markdown h3, .wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
+        color: #000;
+        font-size: 1rem;
     }
 
     .wmde-markdown p {
@@ -59,14 +69,14 @@ h3 {
         font-size: 1rem;
         line-height: 2.1875rem;
     }
-    .wmde-markdown ul,ol {
+    .wmde-markdown ul,.wmde-markdown ol {
         margin: 0px !important;
         color: #000;
         font-weight: 400;
         font-size: 1rem;
         line-height: 2.1875rem;
     }
-    .wmde-markdown ul, li {
+    .wmde-markdown ul, .wmde-markdown li {
         list-style-type: circle;
     }
 
@@ -77,13 +87,16 @@ h3 {
 
 @media (min-width: 1536px) {
 
-    .wmde-markdown h1,
-    h2,
-    h3 {
+    .wmde-markdown h1, .wmde-markdown h2 {
         margin: 12px 0px !important;
         font-size: 1.75rem;
     }
 
+    .wmde-markdown h3,.wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
+        color: #000;
+        font-size: 1rem;
+    }
+
     .wmde-markdown p {
         margin: 0px !important;
         color: #000;

src/utils/data.ts

@@ -111,6 +111,7 @@ export type ContentTreeArray = {
   speakers?: string[] | undefined;
   date?: IsoDateTimeString | undefined;
   tags?: string[] | undefined;
+  languageURL?: string;
   sourceFilePath: string;
   flattenedPath: string;
   summary?: string | undefined;

src/utils/index.ts

@@ -267,14 +267,15 @@ export const fetchTranscriptDetails = (allTranscripts: Transcript[], paths: stri
   if (!isRoot || paths.length === 0) return { transcripts: [] };
 
   const transcripts = allTranscripts.reduce((acc, curr) => {
-    const { url, title, speakers, date, tags, _raw, summary, body } = curr;
+    const { url, title, speakers, date, tags, _raw, summary, body, languageURL } = curr;
 
     if (paths.includes(url)) {
       acc.push({
         title,
         speakers,
         date,
         tags,
+        languageURL,
         sourceFilePath: _raw.sourceFilePath,
         flattenedPath: _raw.flattenedPath,
         summary,
@@ -299,7 +300,7 @@ export function extractListOfHeadings(text: string): string[] {
   const headings: string[] = [];
 
   lines.forEach(line => {
-      if (/^[#]+\s/.test(line)) {
+      if (/^#{1,2}\s/.test(line)) {
           headings.push(line.trim());
       }
   });