saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-05-23 10:22:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Normalize all thee templates to make thumbnails look like thumbnails despite image size

Browse Source
This commit is contained in:
austinkelsay 2024-04-22 10:45:52 -05:00
parent 6231da2a37
commit b2a6686e89
3 changed files with 175 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,6 @@
import React, {use, useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions";
import { formatTimestampToHowLongAgo } from "@/utils/time"; import { formatTimestampToHowLongAgo } from "@/utils/time";
import { useImageProxy } from "@/hooks/useImageProxy"; import { useImageProxy } from "@/hooks/useImageProxy";
import { useNostr } from "@/hooks/useNostr"; import { useNostr } from "@/hooks/useNostr";
@ -12,7 +11,6 @@ const CourseTemplate = (course) => {
const [zapAmount, setZapAmount] = useState(null); const [zapAmount, setZapAmount] = useState(null);
const router = useRouter(); const router = useRouter();
const { returnImageProxy } = useImageProxy(); const { returnImageProxy } = useImageProxy();
const { width, height } = useResponsiveImageDimensions();
const { fetchZapsForEvent } = useNostr(); const { fetchZapsForEvent } = useNostr();
useEffect(() => { useEffect(() => {
@ -21,7 +19,7 @@ const CourseTemplate = (course) => {
const zaps = await fetchZapsForEvent(course.id); const zaps = await fetchZapsForEvent(course.id);
setZaps(zaps); setZaps(zaps);
} catch (error) { } catch (error) {
console.error('Error fetching zaps:', error); console.error("Error fetching zaps:", error);
} }
}; };
fetchZaps(); fetchZaps();
@ -30,45 +28,43 @@ const CourseTemplate = (course) => {
useEffect(() => { useEffect(() => {
if (zaps.length > 0) { if (zaps.length > 0) {
zaps.map((zap) => { zaps.map((zap) => {
const bolt11Tag = zap.tags.find(tag => tag[0] === 'bolt11'); const bolt11Tag = zap.tags.find((tag) => tag[0] === "bolt11");
const invoice = bolt11Tag ? bolt11Tag[1] : null; const invoice = bolt11Tag ? bolt11Tag[1] : null;
if (invoice) { if (invoice) {
const amount = getSatAmountFromInvoice(invoice); const amount = getSatAmountFromInvoice(invoice);
setZapAmount(zapAmount + amount); setZapAmount(zapAmount + amount);
} }
}) });
} }
}, [zaps]); }, [zaps]);
return ( return (
<div style={{width: width < 768 ? "auto" : width}} onClick={() => router.push(`/details/${course.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg"> <div
<div style={{maxWidth: width, minWidth: width}} className="max-tab:h-auto max-mob:h-auto"> onClick={() => router.push(`/details/${course.id}`)}
className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"
>
<div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
<Image <Image
alt="resource thumbnail" alt="course thumbnail"
src={returnImageProxy(course.image)} src={returnImageProxy(course.image)}
quality={100} quality={100}
width={width} layout="fill"
height={height} objectFit="cover"
className="w-full h-full object-cover object-center rounded-md" className="rounded-md"
/> />
<div className='flex flex-col justify-start'>
<h4 className="mb-1 font-bold text-2xl font-blinker">{course.title}</h4>
<p style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 3,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'prewrap',
font: '400 1rem/1.5 Blinker, sans-serif'
}}>
{course.summary}
</p>
<div className="flex flex-row justify-between w-full">
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(course.published_at)}</p>
<p className="pr-2"><i className="pi pi-bolt"></i> {zapAmount}</p>
</div> </div>
<div className="flex flex-col justify-start w-full mt-4">
<h4 className="mb-1 font-bold text-lg font-blinker line-clamp-2">
{course.title}
</h4>
<p className="text-sm text-gray-500 line-clamp-2">{course.summary}</p>
<div className="flex flex-row justify-between items-center mt-2">
<p className="text-xs text-gray-400">
{formatTimestampToHowLongAgo(course.published_at)}
</p>
<p className="text-xs">
<i className="pi pi-bolt"></i> {zapAmount}
</p>
</div> </div>
</div> </div>
</div> </div>

54
src/components/content/carousels/templates/ResourceTemplate.js
View File

@ -1,7 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions";
import { formatTimestampToHowLongAgo } from "@/utils/time"; import { formatTimestampToHowLongAgo } from "@/utils/time";
import { useImageProxy } from "@/hooks/useImageProxy"; import { useImageProxy } from "@/hooks/useImageProxy";
import { useNostr } from "@/hooks/useNostr"; import { useNostr } from "@/hooks/useNostr";
@ -12,8 +11,6 @@ const ResourceTemplate = (resource) => {
const [zapAmount, setZapAmount] = useState(null); const [zapAmount, setZapAmount] = useState(null);
const router = useRouter(); const router = useRouter();
const { returnImageProxy } = useImageProxy(); const { returnImageProxy } = useImageProxy();
const { width, height } = useResponsiveImageDimensions();
const { fetchZapsForEvent } = useNostr(); const { fetchZapsForEvent } = useNostr();
useEffect(() => { useEffect(() => {
@ -22,7 +19,7 @@ const ResourceTemplate = (resource) => {
const zaps = await fetchZapsForEvent(resource.id); const zaps = await fetchZapsForEvent(resource.id);
setZaps(zaps); setZaps(zaps);
} catch (error) { } catch (error) {
console.error('Error fetching zaps:', error); console.error("Error fetching zaps:", error);
} }
}; };
fetchZaps(); fetchZaps();
@ -31,48 +28,43 @@ const ResourceTemplate = (resource) => {
useEffect(() => { useEffect(() => {
if (zaps.length > 0) { if (zaps.length > 0) {
zaps.map((zap) => { zaps.map((zap) => {
const bolt11Tag = zap.tags.find(tag => tag[0] === 'bolt11'); const bolt11Tag = zap.tags.find((tag) => tag[0] === "bolt11");
const invoice = bolt11Tag ? bolt11Tag[1] : null; const invoice = bolt11Tag ? bolt11Tag[1] : null;
if (invoice) { if (invoice) {
const amount = getSatAmountFromInvoice(invoice); const amount = getSatAmountFromInvoice(invoice);
setZapAmount(zapAmount + amount); setZapAmount(zapAmount + amount);
} }
}) });
} }
}, [zaps]); }, [zaps]);
return ( return (
<div style={{ width: width < 768 ? "auto" : width }} onClick={() => router.push(`/details/${resource.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"> <div
<div style={{ maxWidth: width, minWidth: width }} className="max-tab:h-auto max-mob:h-auto"> onClick={() => router.push(`/details/${resource.id}`)}
className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"
>
<div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
<Image <Image
alt="resource thumbnail" alt="resource thumbnail"
src={returnImageProxy(resource.image)} src={returnImageProxy(resource.image)}
quality={100} quality={100}
width={width} layout="fill"
height={height} objectFit="cover"
className="w-full object-cover object-center rounded-md" className="rounded-md"
/> />
<div className='flex flex-col justify-start min-h-max'> </div>
<h4 className="mb-1 font-bold text-2xl font-blinker">{resource.title}</h4> <div className="flex flex-col justify-start w-full mt-4">
<div style={{ height: '90px', display: 'flex', alignItems: 'flex-start' }}> <h4 className="mb-1 font-bold text-lg font-blinker line-clamp-2">
<p style={{ {resource.title}
display: '-webkit-box', </h4>
WebkitBoxOrient: 'vertical', <p className="text-sm text-gray-500 line-clamp-2">{resource.summary}</p>
WebkitLineClamp: 3, <div className="flex flex-row justify-between items-center mt-2">
overflow: 'hidden', <p className="text-xs text-gray-400">
textOverflow: 'ellipsis', {formatTimestampToHowLongAgo(resource.published_at)}
whiteSpace: 'normal', </p>
font: '400 1rem/1.5 Blinker, sans-serif', <p className="text-xs">
flexGrow: 1 <i className="pi pi-bolt"></i> {zapAmount}
}}>
{resource.summary}
</p> </p>
</div>
<div className="flex flex-row justify-between w-full">
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(resource.published_at)}</p>
<p className="pr-2"><i className="pi pi-bolt"></i> {zapAmount}</p>
</div>
</div> </div>
</div> </div>
</div> </div>

51
src/components/content/carousels/templates/WorkshopTemplate.js
View File

@ -1,7 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions";
import { formatTimestampToHowLongAgo } from "@/utils/time"; import { formatTimestampToHowLongAgo } from "@/utils/time";
import { useImageProxy } from "@/hooks/useImageProxy"; import { useImageProxy } from "@/hooks/useImageProxy";
import { useNostr } from "@/hooks/useNostr"; import { useNostr } from "@/hooks/useNostr";
@ -12,8 +11,6 @@ const WorkshopTemplate = (workshop) => {
const [zapAmount, setZapAmount] = useState(null); const [zapAmount, setZapAmount] = useState(null);
const router = useRouter(); const router = useRouter();
const { returnImageProxy } = useImageProxy(); const { returnImageProxy } = useImageProxy();
const { width, height } = useResponsiveImageDimensions();
const { fetchZapsForEvent } = useNostr(); const { fetchZapsForEvent } = useNostr();
useEffect(() => { useEffect(() => {
@ -22,7 +19,7 @@ const WorkshopTemplate = (workshop) => {
const zaps = await fetchZapsForEvent(workshop.id); const zaps = await fetchZapsForEvent(workshop.id);
setZaps(zaps); setZaps(zaps);
} catch (error) { } catch (error) {
console.error('Error fetching zaps:', error); console.error("Error fetching zaps:", error);
} }
}; };
fetchZaps(); fetchZaps();
@ -31,45 +28,43 @@ const WorkshopTemplate = (workshop) => {
useEffect(() => { useEffect(() => {
if (zaps.length > 0) { if (zaps.length > 0) {
zaps.map((zap) => { zaps.map((zap) => {
const bolt11Tag = zap.tags.find(tag => tag[0] === 'bolt11'); const bolt11Tag = zap.tags.find((tag) => tag[0] === "bolt11");
const invoice = bolt11Tag ? bolt11Tag[1] : null; const invoice = bolt11Tag ? bolt11Tag[1] : null;
if (invoice) { if (invoice) {
const amount = getSatAmountFromInvoice(invoice); const amount = getSatAmountFromInvoice(invoice);
setZapAmount(zapAmount + amount); setZapAmount(zapAmount + amount);
} }
}) });
} }
}, [zaps]); }, [zaps]);
return ( return (
<div style={{width: width < 768 ? "auto" : width}} onClick={() => router.push(`/details/${workshop.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg"> <div
<div style={{maxWidth: width, minWidth: width}} className="max-tab:h-auto max-mob:h-auto"> onClick={() => router.push(`/details/${workshop.id}`)}
className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"
>
<div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
<Image <Image
alt="workshop thumbnail" alt="workshop thumbnail"
src={returnImageProxy(workshop.image)} src={returnImageProxy(workshop.image)}
quality={100} quality={100}
width={width} layout="fill"
height={height} objectFit="cover"
className="w-full h-full object-cover object-center rounded-md" className="rounded-md"
/> />
<div className='flex flex-col justify-start'>
<h4 className="mb-1 font-bold text-2xl font-blinker">{workshop.title}</h4>
<p style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 3,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'prewrap',
font: '400 1rem/1.5 Blinker, sans-serif'
}}>
{workshop.summary}
</p>
<div className="flex flex-row justify-between w-full">
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(workshop.published_at)}</p>
<p className="pr-2"><i className="pi pi-bolt"></i> {zapAmount}</p>
</div> </div>
<div className="flex flex-col justify-start w-full mt-4">
<h4 className="mb-1 font-bold text-lg font-blinker line-clamp-2">
{workshop.title}
</h4>
<p className="text-sm text-gray-500 line-clamp-2">{workshop.summary}</p>
<div className="flex flex-row justify-between items-center mt-2">
<p className="text-xs text-gray-400">
{formatTimestampToHowLongAgo(workshop.published_at)}
</p>
<p className="text-xs">
<i className="pi pi-bolt"></i> {zapAmount}
</p>
</div> </div>
</div> </div>
</div> </div>