fix: move source name algorithm to server

src/components/landing-page/TranscriptCard.tsx

@@ -7,10 +7,10 @@ interface TranscriptCardProps {
   data: Transcript;
   daysOpened?: number;
   transcripts?: number;
-  source: string;
+  sourceName: string;
 }
 
-const TranscriptCard = ({ data, daysOpened, transcripts, source }: TranscriptCardProps) => {
+const TranscriptCard = ({ data, daysOpened, transcripts, sourceName }: TranscriptCardProps) => {
   const remainingSpeakers = data?.speakers?.length && data?.speakers.length > 2 ? data?.speakers.length - 2 : 0;
 
   return (
@@ -20,7 +20,7 @@ const TranscriptCard = ({ data, daysOpened, transcripts, source }: TranscriptCar
       } p-6 gap-4 text-black border border-gray-custom-600 rounded-xl shadow-sm cursor-pointer max-2xl:p-[18px] max-md:p-4`}
     >
       <section className='flex flex-col'>
-        <p className='text-gray-custom-600 max-xl:text-[13px] max-md:text-sm leading-[100%] pb-[10px] md:pb-4 line-clamp-1'>{source}</p>
+        <p className='text-gray-custom-600 max-xl:text-[13px] max-md:text-sm leading-[100%] pb-[10px] md:pb-4 line-clamp-1'>{sourceName}</p>
         <section className='flex justify-between items-start gap-4'>
           <p className='text-xl font-medium max-xl:text-lg max-md:text-base'>{data?.title}</p>
           {daysOpened ? <p className='text-sm text-nowrap whitespace-normal text-gray-custom-800'>{daysOpened} days ago</p> : null}

src/components/landing-page/featured-transcripts/FeaturedTranscriptClient.tsx

@@ -3,25 +3,21 @@
 import React, { useState } from "react";
 import { Transcript } from "contentlayer/generated";
 import { DiceIcon } from "@bitcoin-dev-project/bdp-ui/icons";
-import SourceCountData from "@/public/source-count-data.json";
 import TranscriptCard from "../TranscriptCard";
 
 const FeaturedTranscriptClient = ({
   featuredTranscripts,
   latestTranscripts,
 }: {
-  featuredTranscripts: Transcript[];
-  latestTranscripts: Array<Transcript & { days_opened: number }>;
+  featuredTranscripts: (Transcript & { sourceName: string })[];
+  latestTranscripts: Array<Transcript & { daysOpened: number; sourceName: string }>;
 }) => {
   const [featured, setFeatured] = useState(featuredTranscripts);
 
   const randomise = async () => {
     setFeatured([...featuredTranscripts].sort(() => 0.5 - Math.random()));
   };
 
-  const getSourceFromTranscript = (data: Transcript) =>
-    SourceCountData.find((source) => source.slug === data.slugAsParams[0])?.name ?? (data.slugAsParams as Array<string>)[0];
-
   return (
     <div className='flex items-start flex-col gap-14 w-full z-10'>
       <section className='flex flex-col gap-6 w-full'>
@@ -36,7 +32,7 @@ const FeaturedTranscriptClient = ({
         </section>
         <div className='grid auto-rows-max gap-5 max-sm:grid-cols-1 max-lg:grid-cols-2 max-xl:grid-cols-2 grid-cols-3'>
           {featured.slice(0, 3).map((transcript, idx) => (
-            <TranscriptCard data={transcript} key={idx} source={getSourceFromTranscript(transcript)} />
+            <TranscriptCard data={transcript} key={idx} sourceName={transcript.sourceName} />
           ))}
         </div>
       </section>
@@ -45,7 +41,7 @@ const FeaturedTranscriptClient = ({
         <h3 className='text-2xl font-semibold max-md:text-xl'>Latest Transcripts</h3>
         <div className='grid auto-rows-max gap-5 max-sm:grid-cols-1 max-lg:grid-cols-2 max-xl:grid-cols-2 grid-cols-3'>
           {latestTranscripts.map((transcript, idx) => (
-            <TranscriptCard data={transcript} daysOpened={transcript.days_opened} key={idx} source={getSourceFromTranscript(transcript)} />
+            <TranscriptCard data={transcript} daysOpened={transcript.daysOpened} sourceName={transcript.sourceName} key={idx} />
           ))}
         </div>
       </section>

src/utils/index.ts

@@ -1,5 +1,6 @@
 import { Markdown, type Transcript } from "contentlayer/generated";
 import { ContentTreeArray } from "./data";
+import SourceCountData from "@/public/source-count-data.json";
 
 export interface ContentTree {
   [key: string]: ContentTree | Transcript[];
@@ -48,6 +49,9 @@ export function shuffle(data: Transcript[]) {
   return data;
 }
 
+const getSourceFromTranscript = (data: Transcript) =>
+  SourceCountData.find((source) => source.slug === data.slugAsParams[0])?.name ?? (data.slugAsParams as Array<string>)[0];
+
 export const extractTranscripts = (allTranscripts: Transcript[]) => {
   const CURRENT_DAY = Date.now();
   const ONE_DAY = 86_400_000; // 1000 * 3600 * 24
@@ -62,26 +66,30 @@ export const extractTranscripts = (allTranscripts: Transcript[]) => {
   // Sort and slice in one pass
   const latestTranscripts = transcripts.reduce((acc, transcript) => {
     const transcriptDate = new Date(transcript.date as string).getTime();
-    const days_opened = Math.floor((CURRENT_DAY - transcriptDate) / ONE_DAY);
+    const daysOpened = Math.floor((CURRENT_DAY - transcriptDate) / ONE_DAY);
 
-    acc.push({ ...transcript, days_opened });
+    acc.push({ ...transcript, daysOpened, sourceName: getSourceFromTranscript(transcript) });
     acc.sort((a, b) => new Date(b.date as string).getTime() - new Date(a.date as string).getTime());
 
     if (acc.length > 3) acc.pop();
     return acc;
-  }, [] as (Transcript & { days_opened: number })[]);
+  }, [] as (Transcript & { daysOpened: number; sourceName: string })[]);
 
   const featuredTranscripts = getFeaturedTranscripts(transcripts);
 
   return { latestTranscripts, featuredTranscripts };
 };
 
 export const getFeaturedTranscripts = (allTranscripts: Transcript[]) => {
-  const featuredTranscripts = allTranscripts
-    .filter((transcript) => transcript.speakers)
-    .sort(() => Math.random() - 0.5)
-    .slice(0, 60);
+  let featuredTranscripts: (Transcript & { sourceName: string })[] = [];
+
+  for (const transcript of allTranscripts) {
+    if (transcript.speakers) {
+      featuredTranscripts.push({ ...transcript, sourceName: getSourceFromTranscript(transcript) });
+    }
+  }
 
+  featuredTranscripts = featuredTranscripts.sort(() => Math.random() - 0.5).slice(0, 60);
   return featuredTranscripts;
 };