Skip to content

Commit

Permalink
chore(dark-page): added dark pages on explore and indivdualtranscript…
Browse files Browse the repository at this point in the history 
… page
  • Loading branch information
@0tuedon
0tuedon committed Jan 7, 2025
1 parent 9d0bd56 commit b13229b
Show file tree
Hide file tree
Showing 12 changed files with 233 additions and 72 deletions.
6 changes: 3 additions & 3 deletions src/app/(explore)/[...slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import Image from "next/image";
import { notFound } from "next/navigation";
import { ContentTreeArray } from "@/utils/data";
import LinkIcon from "/public/svgs/link-icon.svg";
import WorldIcon from "/public/svgs/world-icon.svg";
import allSources from "@/public/sources-data.json";
import { constructSlugPaths, deriveSourcesList, fetchTranscriptDetails, loopArrOrObject } from "@/utils";
import { ArrowLinkRight } from "@bitcoin-dev-project/bdp-ui/icons";
Expand All @@ -13,6 +12,7 @@ import TranscriptDetailsCard from "@/components/common/TranscriptDetailsCard";
import { SourcesBreadCrumbs } from "@/components/explore/SourcesBreadCrumbs";
import TranscriptContentPage from "@/components/explore/TranscriptContentPage";
import { LanguageCodes } from "@/config";
import WorldIcon from "@/components/svgs/WorldIcon";

// forces 404 for paths not generated from `generateStaticParams` function.
export const dynamicParams = false;
Expand Down Expand Up @@ -106,11 +106,11 @@ const page = ({ params }: { params: { slug: string[] } }) => {
<h3 className='text-xl 2xl:text-2xl font-medium pt-6 md:pt-3'>{metadata?.title ?? slug[slug.length - 1]}</h3>
{isRoot && metadata?.website ? (
<div className='flex gap-1 items-center pt-3 md:pt-6'>
<Image src={WorldIcon} alt='world icon' className='w-[18px] md:w-[20px]' />
<WorldIcon className='w-[18px] md:w-[20px] dark:text-gray-custom-100' />
<Link
href={metadata?.website ?? ""}
target='_blank'
className='text-xs md:text-sm xl:text-base leading-[17.6px] font-medium text-black underline text-wrap break-words line-clamp-1'
className='text-xs md:text-sm xl:text-base leading-[17.6px] font-medium text-black dark:text-gray-custom-100 underline text-wrap break-words line-clamp-1'
>
{metadata.website ?? ""}
</Link>
Expand Down
4 changes: 2 additions & 2 deletions src/components/common/BaseCrumbLists.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@ const BaseCrumbLists = ({crumbsArray}:{crumbsArray:BaseCrumbType[]}) => {
className={`capitalize hover:underline font-medium text-sm 2xl:text-base text-nowrap ${
link.isActive
? "text-orange-custom-100"
: "text-black md:text-gray-custom-800"
: "text-black md:text-gray-custom-800 dark:text-gray-custom-800"
}`}
href={link.link}
>
{link.name}
</Link>
{i !== crumbsArray.length - 1 && (
<p className="text-custom-black-custom-200">/</p>
<p className="text-custom-black-custom-200 dark:text-gray-custom-800">/</p>
)}
</div>
))}
Expand Down
5 changes: 3 additions & 2 deletions src/components/common/Tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ const Tabs = ({

return (
<div className="flex flex-col relative">
<div className="sticky bg-white z-10 top-0 lg:top-0 md:pt-6 h-full flex gap-4 md:gap-10 xl:gap-16 justify-start items-center border-b border-b-gray-custom-1200">
<div className="sticky bg-white dark:bg-dark-custom-100 z-10 top-0 lg:top-0 md:pt-6 h-full flex gap-4
md:gap-10 xl:gap-16 justify-start items-center border-b border-b-gray-custom-1200 dark:border-b-gray-custom-1800">
<Tab
title="Transcript"
isOpen={openTabs === "transcript"}
Expand Down Expand Up @@ -116,7 +117,7 @@ const Tab = ({
<section className="flex flex-col h-full items-center justify-between relative w-full">
<p
className={`text-sm md:text-base xl:text-lg 2xl:text-xl font-normal ${
isOpen ? "text-orange-custom-100" : "text-custom-black-custom-400"
isOpen ? "text-orange-custom-100" : "text-custom-black-custom-400 dark:text-gray-custom-100"
}`}
>
{title}
Expand Down
112 changes: 59 additions & 53 deletions src/components/common/TranscriptMetadataCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@ import {
CalendarIcon,
MicIcon,
} from "@bitcoin-dev-project/bdp-ui/icons";
import Link from "next/link";
import { ContentData, createSlug } from "@/utils";
import AiGeneratedIcon from "../svgs/AIGeneratedIcon";
import { format, isDate } from "date-fns";
import Pill from "./Pill";
import PencilIcon from "../svgs/PencilIcon";
import EyeClose from "../svgs/EyeClose";
import EyeOpen from "../svgs/EyeOpen";

interface ITranscriptMetadataComponent {
title: string;
Expand All @@ -34,44 +36,37 @@ const TranscriptMetadataComponent = ({
setShowDetail((prev) => !prev);
};

const convertedDate = date ? new Date(date) : false

const formattedDate = isDate(convertedDate) ? format(convertedDate, "d MMMM, yyyy") : "";
const convertedDate = date ? new Date(date) : false;

const formattedDate = isDate(convertedDate)
? format(convertedDate, "d MMMM, yyyy")
: "";

return (
<div className="border flex text-black flex-col rounded-2xl p-4 md:p-5 2xl:p-6 gap-4 w-full border-gray-custom-1200">
<div className="border flex text-black dark:text-gray-custom-100 flex-col rounded-2xl p-4 md:p-5 2xl:p-6 gap-4 w-full border-gray-custom-1200 dark:border-gray-custom-1800">
<div className="flex flex-col md:flex-row flex-wrap gap-4 justify-between ">
<h4 className="text-orange-custom-100 text-xl font-bold md:text-2xl 2xl:text-[2rem]">
{title}
</h4>
<button
onClick={handleShowDetail}
className="text-black text-sm lg:text-base gap-1 py-1.5 2xl:py-2 px-5 flex items-center border w-[149px] md:w-[154px] rounded-lg border-gray-custom-1100 whitespace-nowrap"
className="text-black dark:text-gray-custom-100
text-sm lg:text-base gap-1 py-1.5 2xl:py-2 px-5 flex items-center border
w-[149px] md:w-[154px] rounded-lg border-gray-custom-1100 whitespace-nowrap"
>
{showDetail ? (
<>
<Image
src="/svgs/eye-close-icon.svg"
alt="eye close icon"
width={24}
height={24}
className="w-5"
/>
<EyeClose className="w-5 dark:text-gray-custom-100" />
<span className="font-medium text-sm 2xl:text-base">
Hide Details{" "}
</span>
</>
) : (
<>
<Image
src="/svgs/eye-open-icon.svg"
alt="eye open icon"
width={24}
height={24}
className="w-5"
/>
<span className="font-medium">Show Details</span>
<EyeOpen className="w-5 dark:text-gray-custom-100" />
<span className="font-medium text-sm 2xl:text-base">
Show Details
</span>
</>
)}
</button>
Expand All @@ -82,70 +77,81 @@ const TranscriptMetadataComponent = ({
<MetadataBlock
header={
<>
<CalendarIcon width={"19px"} color="#141B34" />
<CalendarIcon width={"19px"} />
<p className="text-base lg:text-lg font-semibold">Date</p>
</>
}
footer={
<div className="pl-2.5">
{formattedDate ?
<p className="text-xs md:text-sm lg:text-base 2xl:text-lg md:font-medium">
{formattedDate}
</p>:
<p className="pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
}
{formattedDate ? (
<p className="text-xs md:text-sm lg:text-base 2xl:text-lg md:font-medium">
{formattedDate}
</p>
) : (
<p className="pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">
Not available
</p>
)}
</div>
}
/>
{/* render only 3 tags*/}
<MetadataBlock
header={
<>
<BookmarkIcon width={"19px"} color="#000000" />
<BookmarkIcon width={"19px"} />
<p className="text-base lg:text-lg font-semibold">Topics</p>
</>
}
footer={
<div className="flex flex-wrap gap-2">
{(topics && topics.length > 0) ?
{topics && topics.length > 0 ? (
topics.map((topic) => (
<Pill key={topic.slug} name={topic.name} slug={`/tags/${topic.slug}`} />
)):
<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>
}
<Pill
key={topic.slug}
name={topic.name}
slug={`/tags/${topic.slug}`}
/>
))
) : (
<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>
}
/>

<MetadataBlock
header={
<>
<MicIcon width={"19px"} color="#000000" />
<MicIcon width={"19px"} />
<p className="text-base lg:text-lg font-semibold">Speakers</p>
</>
}
footer={
<div className="flex flex-wrap gap-2">
{speakers && speakers.length > 0 ?
{speakers && speakers.length > 0 ? (
speakers.map((speaker) => (
<Pill key={speaker} name={speaker} slug={`/speakers/${createSlug(speaker)}`} />
)):
<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>
}
<Pill
key={speaker}
name={speaker}
slug={`/speakers/${createSlug(speaker)}`}
/>
))
) : (
<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>
}
/>

<MetadataBlock
header={
<>
<Image
src="/svgs/pencil-icon.svg"
alt="pencil icon"
width={24}
height={24}
className="w-5"
/>
<PencilIcon className="w-5 dark:text-gray-custom-100" />
<p className="text-base lg:text-lg font-semibold">
Transcript by
</p>
Expand All @@ -155,12 +161,12 @@ const TranscriptMetadataComponent = ({
<div className="pl-5 pt-1.5 flex items-center ">
{isAiGenerated ? (
<>
<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)
</span>

<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)</span>
</a>{" "}
</>
) : (
Expand Down
4 changes: 2 additions & 2 deletions src/components/individual-transcript/IndividualTranscript.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const IndividualTranscript = ({
let keyWithoutHash = key.replace(/[#]+\s+/gi, "")
acc[keyWithoutHash] = [{
name: keyWithoutHash,
slug: createContentSlug(key),
slug: createContentSlug(key),
}]
return acc;
}, {})
Expand All @@ -38,7 +38,7 @@ const IndividualTranscript = ({
];
const finalRoutes = [...staticRoutes, ...breadCrumbs];
return (
<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">
<Wrapper className="relative flex flex-col !px-0 gap-6 lg:gap-7 dark:bg-dark-custom-100 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]">
<BaseCrumbLists crumbsArray={finalRoutes} />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/individual-transcript/TranscriptTabContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function formatSpeakerText(text: string): string {
// Replace matched text with formatted HTML
return text.replace(pattern, (match, speaker, time) => {
// HTML for the speaker's name
const formattedSpeaker = `<span className="font-bold text-black text-base leading-[1.36rem]">${speaker}:</span>`;
const formattedSpeaker = `<span className="font-bold text-black dark:text-gray-custom-100 text-base leading-[1.36rem]">${speaker}:</span>`;
// HTML for the timestamp
const formattedTime = `<span className="text-gray-custom-1700 font-bold text-base leading-[1.36rem]">${time}</span>`;

Expand Down
19 changes: 17 additions & 2 deletions src/components/individual-transcript/markdown.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,17 @@

}


.wmde-markdown h3, .wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
color: #000;
font-size: 1rem
}

html.dark .wmde-markdown h1, .wmde-markdown h2, .wmde-markdown h3, .wmde-markdown h4,
.wmde-markdown h5, .wmde-markdown h6 {
color: #fafafa;
}

span.code-line {
white-space: pre-wrap;
}
Expand All @@ -40,11 +46,21 @@ span.code-line {
line-height: 2.1875rem;
}

html.dark .wmde-markdown p {
color: #fafafa;
}
.wmde-markdown ul li {
list-style-type: circle;
color: #000;
}

html.dark .wmde-markdown ul li {
color: #fafafa;
}

html.dark .wmde-markdown ol li {
color: #fafafa;
}
.wmde-markdown ul {
padding-left: 1em;
}
Expand All @@ -68,7 +84,6 @@ span.code-line {
}

.wmde-markdown h3, .wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
color: #000;
font-size: 1rem;
}

Expand Down Expand Up @@ -99,4 +114,4 @@ span.code-line {
.wmde-markdown p {
line-height: 2rem;
}
}
}
Loading

0 comments on commit b13229b

Please sign in to comment.