saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 18:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

show or hide meta tags

Browse Source
This commit is contained in:
austinkelsay 2024-10-17 09:23:46 -05:00
parent a4a5db54ab
commit 47a454c6cc
6 changed files with 44 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/content/carousels/CoursesCarousel.js
View File

@ -73,7 +73,7 @@ export default function CoursesCarousel() {
itemTemplate={(item) => itemTemplate={(item) =>
!processedCourses.length ? !processedCourses.length ?
<TemplateSkeleton key={Math.random()} /> : <TemplateSkeleton key={Math.random()} /> :
<CourseTemplate key={item.id} course={item} /> <CourseTemplate key={item.id} course={item} showMetaTags={false} />
} }
responsiveOptions={responsiveOptions} /> responsiveOptions={responsiveOptions} />
</div> </div>

2
src/components/content/carousels/DocumentsCarousel.js
View File

@ -94,7 +94,7 @@ export default function DocumentsCarousel() {
}} }}
itemTemplate={(item) => itemTemplate={(item) =>
processedDocuments.length > 0 ? processedDocuments.length > 0 ?
<DocumentTemplate key={item.id} document={item} isLesson={freeLessons.includes(item.d)} /> : <DocumentTemplate key={item.id} document={item} isLesson={freeLessons.includes(item.d)} showMetaTags={false} /> :
<TemplateSkeleton key={Math.random()} /> <TemplateSkeleton key={Math.random()} />
} }
responsiveOptions={responsiveOptions} /> responsiveOptions={responsiveOptions} />

2
src/components/content/carousels/VideosCarousel.js
View File

@ -92,7 +92,7 @@ export default function VideosCarousel() {
itemTemplate={(item) => itemTemplate={(item) =>
!processedVideos.length ? !processedVideos.length ?
<TemplateSkeleton key={Math.random()} /> : <TemplateSkeleton key={Math.random()} /> :
<VideoTemplate key={item.id} video={item} isLesson={freeLessons.includes(item.d)} /> <VideoTemplate key={item.id} video={item} isLesson={freeLessons.includes(item.d)} showMetaTags={false} />
} }
responsiveOptions={responsiveOptions} responsiveOptions={responsiveOptions}
/> />

17
src/components/content/carousels/templates/CourseTemplate.js
View File

@ -15,7 +15,7 @@ import useWindowWidth from "@/hooks/useWindowWidth";
import GenericButton from "@/components/buttons/GenericButton"; import GenericButton from "@/components/buttons/GenericButton";
import appConfig from "@/config/appConfig"; import appConfig from "@/config/appConfig";
export function CourseTemplate({ course }) { export function CourseTemplate({ course, showMetaTags = true }) {
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: course }); const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: course });
const [zapAmount, setZapAmount] = useState(0); const [zapAmount, setZapAmount] = useState(0);
const [lessonCount, setLessonCount] = useState(0); const [lessonCount, setLessonCount] = useState(0);
@ -53,6 +53,13 @@ export function CourseTemplate({ course }) {
} }
}, [course]); }, [course]);
const shouldShowMetaTags = (topic) => {
if (!showMetaTags) {
return !["lesson", "document", "video", "course"].includes(topic);
}
return true;
}
if (!nAddress) return <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div> if (!nAddress) return <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
if (zapsError) return <div>Error: {zapsError}</div>; if (zapsError) return <div>Error: {zapsError}</div>;
@ -87,9 +94,11 @@ export function CourseTemplate({ course }) {
<CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}> <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
<div className="flex flex-wrap gap-2 max-w-[65%]"> <div className="flex flex-wrap gap-2 max-w-[65%]">
{course && course.topics && course.topics.map((topic, index) => ( {course && course.topics && course.topics.map((topic, index) => (
<Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]"> shouldShowMetaTags(topic) && (
{topic} <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
</Tag> {topic}
</Tag>
)
))} ))}
</div> </div>
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">

19
src/components/content/carousels/templates/DocumentTemplate.js
View File

@ -14,7 +14,7 @@ import useWindowWidth from "@/hooks/useWindowWidth";
import GenericButton from "@/components/buttons/GenericButton"; import GenericButton from "@/components/buttons/GenericButton";
import appConfig from "@/config/appConfig"; import appConfig from "@/config/appConfig";
export function DocumentTemplate({ document, isLesson }) { export function DocumentTemplate({ document, isLesson, showMetaTags }) {
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: document }); const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: document });
const [nAddress, setNAddress] = useState(null); const [nAddress, setNAddress] = useState(null);
const [zapAmount, setZapAmount] = useState(0); const [zapAmount, setZapAmount] = useState(0);
@ -42,6 +42,13 @@ export function DocumentTemplate({ document, isLesson }) {
} }
}, [zaps, document]); }, [zaps, document]);
const shouldShowMetaTags = (topic) => {
if (!showMetaTags) {
return !["lesson", "document", "video", "course"].includes(topic);
}
return true;
}
if (zapsError) return <div>Error: {zapsError}</div>; if (zapsError) return <div>Error: {zapsError}</div>;
return ( return (
@ -74,11 +81,13 @@ export function DocumentTemplate({ document, isLesson }) {
<CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}> <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
<div className="flex flex-wrap gap-2 max-w-[65%]"> <div className="flex flex-wrap gap-2 max-w-[65%]">
{document?.topics?.map((topic, index) => ( {document?.topics?.map((topic, index) => (
<Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]"> shouldShowMetaTags(topic) && (
{topic} <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
</Tag> {topic}
</Tag>
)
))} ))}
{isLesson && <Tag size="small" className="px-2 py-1 text-sm text-[#f8f8ff]" value="lesson" />} {isLesson && showMetaTags && <Tag size="small" className="px-2 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
</div> </div>
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">
<p className="font-bold text-gray-300">{document?.readTime || "5 min"} read</p> <p className="font-bold text-gray-300">{document?.readTime || "5 min"} read</p>

19
src/components/content/carousels/templates/VideoTemplate.js
View File

@ -15,7 +15,7 @@ import useWindowWidth from "@/hooks/useWindowWidth";
import GenericButton from "@/components/buttons/GenericButton"; import GenericButton from "@/components/buttons/GenericButton";
import appConfig from "@/config/appConfig"; import appConfig from "@/config/appConfig";
export function VideoTemplate({ video, isLesson }) { export function VideoTemplate({ video, isLesson, showMetaTags }) {
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: video }); const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: video });
const [nAddress, setNAddress] = useState(null); const [nAddress, setNAddress] = useState(null);
const [zapAmount, setZapAmount] = useState(0); const [zapAmount, setZapAmount] = useState(0);
@ -43,6 +43,13 @@ export function VideoTemplate({ video, isLesson }) {
} }
}, [zaps, video]); }, [zaps, video]);
const shouldShowMetaTags = (topic) => {
if (!showMetaTags) {
return !["lesson", "document", "video", "course"].includes(topic);
}
return true;
}
if (zapsError) return <div>Error: {zapsError}</div>; if (zapsError) return <div>Error: {zapsError}</div>;
return ( return (
@ -75,11 +82,13 @@ export function VideoTemplate({ video, isLesson }) {
<CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}> <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
<div className="flex flex-wrap gap-2 max-w-[65%]"> <div className="flex flex-wrap gap-2 max-w-[65%]">
{video?.topics?.map((topic, index) => ( {video?.topics?.map((topic, index) => (
<Tag size="small" key={index} className="px-3 py-1 text-sm text-[#f8f8ff]"> shouldShowMetaTags(topic) && (
{topic} <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
</Tag> {topic}
</Tag>
)
))} ))}
{isLesson && <Tag size="small" className="px-3 py-1 text-sm text-[#f8f8ff]" value="lesson" />} {isLesson && showMetaTags && <Tag size="small" className="px-3 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
</div> </div>
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">
<p className="font-bold text-gray-300">{video?.duration || "5 min"} watch</p> <p className="font-bold text-gray-300">{video?.duration || "5 min"} watch</p>