Skip to content

Commit

Permalink
style(frontend): 💄 Wrap div around blocksrenderer component … (#241)
Browse files Browse the repository at this point in the history 
* style(frontend): 💄 Wrap div around blocksrenderer component and add typography tailwind styling for all blocksrendered content

* refactor(frontend): ♻️ Run prettier
  • Loading branch information
luctra02 authored and GitHub committed Apr 8, 2024
1 parent daaadee commit 02638c2
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 71 deletions.
2 changes: 1 addition & 1 deletion frontend/src/app/projects/[projectSlug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export default async function Page({
}
return (
<div className="flex flex-col items-center gap-4">
<div className="prose prose-invert w-1/2 lg:prose-xl">
<div className="w-1/2">
<BlockRendererClient content={content} />
</div>
{graphqlData.data.projects?.data[0].attributes?.satellites?.data
Expand Down
142 changes: 72 additions & 70 deletions frontend/src/components/BlockRendererClient.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,78 +13,80 @@ export default function BlockRendererClient({
}) {
if (!content) return null;
return (
<BlocksRenderer
content={content}
blocks={{
image: ({ image }) => {
return (
<NextImage
src={image.url}
width={image.width}
className="object-contain"
height={image.height}
alt={image.alternativeText || ""}
/>
);
},
heading: ({ children, level }) => {
switch (level) {
case 1:
return <h1>{children}</h1>;
case 2:
return <h2>{children}</h2>;
case 3:
return <h3>{children}</h3>;
case 4:
return <h4>{children}</h4>;
case 5:
return <h5>{children}</h5>;
default:
return <h1>{children}</h1>;
}
},
<div className="prose prose-invert lg:prose-xl">
<BlocksRenderer
content={content}
blocks={{
image: ({ image }) => {
return (
<NextImage
src={image.url}
width={image.width}
className="object-contain"
height={image.height}
alt={image.alternativeText || ""}
/>
);
},
heading: ({ children, level }) => {
switch (level) {
case 1:
return <h1>{children}</h1>;
case 2:
return <h2>{children}</h2>;
case 3:
return <h3>{children}</h3>;
case 4:
return <h4>{children}</h4>;
case 5:
return <h5>{children}</h5>;
default:
return <h1>{children}</h1>;
}
},

paragraph: ({ children }) => {
const child = children as {
props: {
type: "text";
text: string;
italic: boolean;
};
}[];
paragraph: ({ children }) => {
const child = children as {
props: {
type: "text";
text: string;
italic: boolean;
};
}[];

const italic = child[0]?.props.italic;
if (italic) {
return <p className="text-sm">{children}</p>;
}
return <p>{children}</p>;
},
const italic = child[0]?.props.italic;
if (italic) {
return <p>{children}</p>;
}
return <p>{children}</p>;
},

link: ({ url, children }) => {
// Check if the URL is a valid YouTube video link
const isYouTubeVideo = url.includes("youtube.com");
// Render the iframe only if it's a YouTube video link
if (isYouTubeVideo) {
return (
<div className="flex w-full items-center">
<iframe
width={"100%"}
className="aspect-video"
src={url}
title="YouTube video"
></iframe>
</div>
);
} else {
// If it's not a video link, return an anchor with the href
return (
<a href={url} target="_blank">
{children}
</a>
);
}
},
}}
/>
link: ({ url, children }) => {
// Check if the URL is a valid YouTube video link
const isYouTubeVideo = url.includes("youtube.com");
// Render the iframe only if it's a YouTube video link
if (isYouTubeVideo) {
return (
<div className="flex w-full items-center">
<iframe
width={"100%"}
className="aspect-video"
src={url}
title="YouTube video"
></iframe>
</div>
);
} else {
// If it's not a video link, return an anchor with the href
return (
<a href={url} target="_blank">
{children}
</a>
);
}
},
}}
/>
</div>
);
}

0 comments on commit 02638c2

Please sign in to comment.