Skip to content

Commit

Permalink
fix(nested-headings): nested headings for content grouping components
Browse files Browse the repository at this point in the history
  • Loading branch information
@0tuedon
0tuedon committed Jan 15, 2025
1 parent 1825a2c commit b042660
Show file tree
Hide file tree
Showing 7 changed files with 231 additions and 113 deletions.
52 changes: 38 additions & 14 deletions src/components/explore/ContentGrouping.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@ export interface IContentGrouping {
currentGroup: string;
groupedData: GroupedData | never[];
screen?: "mobile" | "desktop";
isTranscript?: boolean;
className?: string;
}
const ContentGrouping = ({
currentGroup,
groupedData,
isTranscript,
screen,
className,
}: IContentGrouping) => {
Expand Down Expand Up @@ -41,22 +43,44 @@ const ContentGrouping = ({
<div
className={twMerge(
" 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
className,
)}
>
{Object.keys(groupedData).map((char) => (
<Link
key={char}
href={`#${createContentSlug(char)}`}
className={`flex text-sm 2xl:text-lg leading-5 ${
createContentSlug(currentGroup) == createContentSlug(char)
? "text-orange-custom-100 rounded-[4px] font-semibold"
: ""
} `}
>
{char}
</Link>
))}
{isTranscript &&
Object.values(groupedData)
.sort()
.map((char, index) => (
<Link
key={char[0]?.slug}
href={`#${createSlug(char[0]?.slug)}`}
className={twMerge(
"flex text-sm 2xl:text-lg leading-5 ",
createContentSlug(currentGroup) == createSlug(char[0]?.slug)
? "text-orange-custom-100 rounded-[4px] font-semibold"
: "",
char[0]?.nested ? "pl-4" : "",
)}
>
{char[0]?.name}
</Link>
))}
{!isTranscript &&
Object.keys(groupedData)
.sort()
.map((char) => (
<Link
key={createSlug(char)}
href={`#${createSlug(char)}`}
className={twMerge(
"flex text-sm 2xl:text-lg leading-5 ",
createContentSlug(currentGroup) == createSlug(char)
? "text-orange-custom-100 rounded-[4px] font-semibold"
: "",
)}
>
{char}
</Link>
))}
</div>
)}
{screen === "mobile" && (
Expand Down
7 changes: 3 additions & 4 deletions src/components/explore/GroupedTranscriptContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,8 @@ const GroupedTranscriptContent = ({
}: IGroupedTranscriptContent) => {
const handleAxisChange = (
inView: boolean,
entry: IntersectionObserverEntry
entry: IntersectionObserverEntry,
) => {

if (inView) {
setCurrentGroup(topicsByAlphabet[0]);
}
Expand Down Expand Up @@ -57,7 +56,7 @@ const GroupedTranscriptContent = ({
<h4 className="font-bold text-2xl capitalize">{topicsByAlphabet[0]}</h4>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
{topicsByAlphabet[1] &&
topicsByAlphabet[1].map((data, i) => (
topicsByAlphabet[1].map((data, i) => (
<SingleTranscriptContent
key={`${data.slug}${i}`}
{...data}
Expand All @@ -70,4 +69,4 @@ const GroupedTranscriptContent = ({
);
};

export default GroupedTranscriptContent;
export default GroupedTranscriptContent;
17 changes: 10 additions & 7 deletions src/components/explore/TranscriptContentPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@ import {
groupDataByAlphabet,
GroupedData,
sortKeysAlphabetically,
TopicsData,
} from "@/utils";
import MobileAlphabetGrouping from "./MobileAlphabetGrouping";
import ContentGrouping from "./ContentGrouping";
import BaseCrumbLists from "../common/BaseCrumbLists";
import { usePathname } from "next/navigation";
import { LanguageCodes } from '@/config';
import { LanguageCodes } from "@/config";

interface ITranscriptContentPage {
header: string;
Expand All @@ -34,11 +35,11 @@ const TranscriptContentPage: FC<ITranscriptContentPage> = ({
}) => {
const groupedData =
type === "alphabet"
? groupDataByAlphabet(data) as GroupedData
: sortKeysAlphabetically(data) as GroupedData;
? (groupDataByAlphabet(data) as Omit<GroupedData, "nested">)
: (sortKeysAlphabetically(data) as Omit<GroupedData, "nested">);

const [currentGroup, setCurrentGroup] = useState<string>(
type === "alphabet" ? "A" : createSlug(Object.keys(groupedData)[0])
type === "alphabet" ? "A" : createSlug(Object.keys(groupedData)[0]),
);

const pathname = usePathname();
Expand All @@ -58,7 +59,9 @@ const TranscriptContentPage: FC<ITranscriptContentPage> = ({
});

// remove language codes from paths passed to breadcrumbs
const allRoutes = routes.filter((route) => !LanguageCodes.includes(route.name))
const allRoutes = routes.filter(
(route) => !LanguageCodes.includes(route.name),
);

return (
<div className="flex items-start relative lg:gap-[50px]">
Expand Down Expand Up @@ -98,7 +101,7 @@ const TranscriptContentPage: FC<ITranscriptContentPage> = ({
<GroupedTranscriptContent
setCurrentGroup={setCurrentGroup}
key={`${arg[0]}${i}`}
topicsByAlphabet={arg}
topicsByAlphabet={arg as [string, TopicsData[]]} // Topics type has "count" compulsory
linkName={linkName}
type={type}
/>
Expand All @@ -110,7 +113,7 @@ const TranscriptContentPage: FC<ITranscriptContentPage> = ({
<GroupedTranscriptContent
setCurrentGroup={setCurrentGroup}
key={`${arg[0]}${i}`}
topicsByAlphabet={arg}
topicsByAlphabet={arg as [string, TopicsData[]]}
linkName={linkName}
type={type}
/>
Expand Down
25 changes: 10 additions & 15 deletions src/components/individual-transcript/IndividualTranscript.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@ import React, { useState } from "react";
import { Transcript } from "contentlayer/generated";
import TranscriptMetadataComponent from "../common/TranscriptMetadataCard";
import ContentGrouping from "../explore/ContentGrouping";
import { ContentData, createContentSlug, extractHeadings, GroupedData } from "@/utils";
import {
ContentData,
createContentSlug,
extractHeadings,
GroupedData,
} from "@/utils";
import Wrapper from "../layout/Wrapper";
import { twMerge } from "tailwind-merge";
import FooterComponent from "../layout/FooterComponent";
import BaseCrumbLists, { BaseCrumbType } from "../common/BaseCrumbLists";
import Tabs from "../common/Tabs";


type HeadingObject = Record<string, ContentData[]>;;

const IndividualTranscript = ({
breadCrumbs,
transcript,
Expand All @@ -22,16 +24,8 @@ const IndividualTranscript = ({
}) => {
const [currentHeading, setCurrentHeading] = useState("");

const allHeadings = extractHeadings(transcript.body.raw).reduce<HeadingObject>((acc, key, index)=>{
// removing the # from the string
let keyWithoutHash = key.replace(/[#]+\s+/gi, "")
acc[keyWithoutHash] = [{
name: keyWithoutHash,
slug: createContentSlug(key),
}]
return acc;
}, {})

const allHeadings = extractHeadings(transcript.body.raw);

const staticRoutes = [
{ name: "Home", link: "/", isActive: false },
{ name: "Sources", link: "/sources", isActive: false },
Expand Down Expand Up @@ -72,10 +66,11 @@ const IndividualTranscript = ({
<div className="hidden lg:flex w-full sticky lg:flex-auto top-6 max-w-[300px] 2xl:max-w-[465px] self-start">
<ContentGrouping
currentGroup={currentHeading}
isTranscript
groupedData={allHeadings as unknown as GroupedData}
className={twMerge(
`!w-full rounded-xl max-h-[calc(90vh-var(--header-height))]`,
Object.keys(allHeadings).length < 1 && "!invisible"
Object.keys(allHeadings).length < 1 && "!invisible",
)}
screen="desktop"
/>
Expand Down
19 changes: 17 additions & 2 deletions src/components/individual-transcript/TranscriptTabContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import "./markdown.css";
import { InView } from "react-intersection-observer";
import { createContentSlug } from "@/utils";


function formatSpeakerText(text: string): string {
// Regular expression pattern to match "Speaker" or "Speaker:" followed by a timestamp
const pattern = /(\b\w+(?: \w+)?\s*):? (\d{2}:\d{2}:\d{2})/g;
Expand Down Expand Up @@ -57,7 +56,7 @@ const TranscriptTabContent = ({
as="div"
threshold={1}
rootMargin="35% 0% -65% 0%"
onChange={(inView, entry) => {
onChange={(inView) => {
if (setCurrentHeading && inView) {
setCurrentHeading(createContentSlug(props?.id || ""));
}
Expand All @@ -67,6 +66,22 @@ const TranscriptTabContent = ({
</InView>
);
},
h3: ({ children = [], className, ...props }) => {
return (
<InView
as="div"
threshold={1}
rootMargin="35% 0% -65% 0%"
onChange={(inView) => {
if (setCurrentHeading && inView) {
setCurrentHeading(createContentSlug(props?.id || ""));
}
}}
>
<h3 id={createContentSlug(props?.id || "")}>{children}</h3>
</InView>
);
},
}}
/>
);
Expand Down
44 changes: 28 additions & 16 deletions src/components/individual-transcript/markdown.css
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,36 @@
@import url('https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap');
@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, .wmde-markdown h2 {
.wmde-markdown h1,
.wmde-markdown h2 {
padding-left: 10px;
scroll-margin-top: 100px;
border-left: 8px solid #F7931A;
border-left: 8px solid #f7931a;
color: #000;
border-bottom: none !important;
padding-top: 6px;
padding-bottom: 6px;
margin: 8px 0px !important;
font-size: 1.125rem;

}

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

span.code-line {
white-space: pre-wrap;
}
.wmde-markdown pre code, .wmde-markdown pre tt{
.wmde-markdown pre code,
.wmde-markdown pre tt {
max-width: 100%;
}
.wmde-markdown pre > code {
Expand Down Expand Up @@ -59,15 +64,18 @@ span.code-line {
}

@media (min-width: 1024px) {

.wmde-markdown h1, .wmde-markdown h2 {
.wmde-markdown h1,
.wmde-markdown h2 {
padding-top: 10px;
padding-bottom: 10px;
margin: 12px 0px !important;
font-size: 1.2rem;
}

.wmde-markdown h3, .wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6 {
color: #000;
font-size: 1rem;
}
Expand All @@ -77,7 +85,8 @@ span.code-line {
font-size: 1rem;
line-height: 2.1875rem;
}
.wmde-markdown ul,.wmde-markdown ol {
.wmde-markdown ul,
.wmde-markdown ol {
margin: 0px !important;
font-weight: 400;
font-size: 1rem;
Expand All @@ -86,17 +95,20 @@ span.code-line {
}

@media (min-width: 1536px) {

.wmde-markdown h1, .wmde-markdown h2 {
.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 {
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6 {
font-size: 1rem;
}

.wmde-markdown p {
line-height: 2rem;
}
}
}
Loading

0 comments on commit b042660

Please sign in to comment.