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

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

@ -1,78 +1,74 @@
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";
import {getSatAmountFromInvoice} from "@/utils/lightning"; import { getSatAmountFromInvoice } from "@/utils/lightning";
const CourseTemplate = (course) => { const CourseTemplate = (course) => {
const [zaps, setZaps] = useState([]); const [zaps, setZaps] = useState([]);
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(() => {
const fetchZaps = async () => { const fetchZaps = async () => {
try { try {
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();
}, [fetchZapsForEvent, course]); }, [fetchZapsForEvent, 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}`)}
<Image className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"
alt="resource thumbnail" >
src={returnImageProxy(course.image)} <div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
quality={100} <Image
width={width} alt="course thumbnail"
height={height} src={returnImageProxy(course.image)}
className="w-full h-full object-cover object-center rounded-md" quality={100}
/> layout="fill"
<div className='flex flex-col justify-start'> objectFit="cover"
<h4 className="mb-1 font-bold text-2xl font-blinker">{course.title}</h4> className="rounded-md"
<p style={{ />
display: '-webkit-box', </div>
WebkitBoxOrient: 'vertical', <div className="flex flex-col justify-start w-full mt-4">
WebkitLineClamp: 3, <h4 className="mb-1 font-bold text-lg font-blinker line-clamp-2">
overflow: 'hidden', {course.title}
textOverflow: 'ellipsis', </h4>
whiteSpace: 'prewrap', <p className="text-sm text-gray-500 line-clamp-2">{course.summary}</p>
font: '400 1rem/1.5 Blinker, sans-serif' <div className="flex flex-row justify-between items-center mt-2">
}}> <p className="text-xs text-gray-400">
{course.summary} {formatTimestampToHowLongAgo(course.published_at)}
</p> </p>
<div className="flex flex-row justify-between w-full"> <p className="text-xs">
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(course.published_at)}</p> <i className="pi pi-bolt"></i> {zapAmount}
<p className="pr-2"><i className="pi pi-bolt"></i> {zapAmount}</p> </p>
</div>
</div>
</div>
</div> </div>
); </div>
</div>
);
}; };
export default CourseTemplate; export default CourseTemplate;

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

@ -1,82 +1,74 @@
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";
import { getSatAmountFromInvoice } from "@/utils/lightning"; import { getSatAmountFromInvoice } from "@/utils/lightning";
const ResourceTemplate = (resource) => { const ResourceTemplate = (resource) => {
const [zaps, setZaps] = useState([]); const [zaps, setZaps] = useState([]);
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(() => {
const fetchZaps = async () => {
try {
const zaps = await fetchZapsForEvent(resource.id);
setZaps(zaps);
} catch (error) {
console.error("Error fetching zaps:", error);
}
};
fetchZaps();
}, [fetchZapsForEvent, resource]);
useEffect(() => { useEffect(() => {
const fetchZaps = async () => { if (zaps.length > 0) {
try { zaps.map((zap) => {
const zaps = await fetchZapsForEvent(resource.id); const bolt11Tag = zap.tags.find((tag) => tag[0] === "bolt11");
setZaps(zaps); const invoice = bolt11Tag ? bolt11Tag[1] : null;
} catch (error) { if (invoice) {
console.error('Error fetching zaps:', error); const amount = getSatAmountFromInvoice(invoice);
} setZapAmount(zapAmount + amount);
};
fetchZaps();
}, [fetchZapsForEvent, resource]);
useEffect(() => {
if (zaps.length > 0) {
zaps.map((zap) => {
const bolt11Tag = zap.tags.find(tag => tag[0] === 'bolt11');
const invoice = bolt11Tag ? bolt11Tag[1] : null;
if (invoice) {
const amount = getSatAmountFromInvoice(invoice);
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}`)}
<Image className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"
alt="resource thumbnail" >
src={returnImageProxy(resource.image)} <div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
quality={100} <Image
width={width} alt="resource thumbnail"
height={height} src={returnImageProxy(resource.image)}
className="w-full object-cover object-center rounded-md" quality={100}
/> layout="fill"
<div className='flex flex-col justify-start min-h-max'> objectFit="cover"
<h4 className="mb-1 font-bold text-2xl font-blinker">{resource.title}</h4> className="rounded-md"
<div style={{ height: '90px', display: 'flex', alignItems: 'flex-start' }}> />
<p style={{ </div>
display: '-webkit-box', <div className="flex flex-col justify-start w-full mt-4">
WebkitBoxOrient: 'vertical', <h4 className="mb-1 font-bold text-lg font-blinker line-clamp-2">
WebkitLineClamp: 3, {resource.title}
overflow: 'hidden', </h4>
textOverflow: 'ellipsis', <p className="text-sm text-gray-500 line-clamp-2">{resource.summary}</p>
whiteSpace: 'normal', <div className="flex flex-row justify-between items-center mt-2">
font: '400 1rem/1.5 Blinker, sans-serif', <p className="text-xs text-gray-400">
flexGrow: 1 {formatTimestampToHowLongAgo(resource.published_at)}
}}> </p>
{resource.summary} <p className="text-xs">
</p> <i className="pi pi-bolt"></i> {zapAmount}
</div> </p>
<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>
);
}; };
export default ResourceTemplate; export default ResourceTemplate;

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

@ -1,79 +1,74 @@
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";
import {getSatAmountFromInvoice} from "@/utils/lightning"; import { getSatAmountFromInvoice } from "@/utils/lightning";
const WorkshopTemplate = (workshop) => { const WorkshopTemplate = (workshop) => {
const [zaps, setZaps] = useState([]); const [zaps, setZaps] = useState([]);
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(() => {
const fetchZaps = async () => {
try {
const zaps = await fetchZapsForEvent(workshop.id);
setZaps(zaps);
} catch (error) {
console.error("Error fetching zaps:", error);
}
};
fetchZaps();
}, [fetchZapsForEvent, workshop]);
useEffect(() => { useEffect(() => {
const fetchZaps = async () => { if (zaps.length > 0) {
try { zaps.map((zap) => {
const zaps = await fetchZapsForEvent(workshop.id); const bolt11Tag = zap.tags.find((tag) => tag[0] === "bolt11");
setZaps(zaps); const invoice = bolt11Tag ? bolt11Tag[1] : null;
} catch (error) { if (invoice) {
console.error('Error fetching zaps:', error); const amount = getSatAmountFromInvoice(invoice);
} setZapAmount(zapAmount + amount);
};
fetchZaps();
}, [fetchZapsForEvent, workshop]);
useEffect(() => {
if (zaps.length > 0) {
zaps.map((zap) => {
const bolt11Tag = zap.tags.find(tag => tag[0] === 'bolt11');
const invoice = bolt11Tag ? bolt11Tag[1] : null;
if (invoice) {
const amount = getSatAmountFromInvoice(invoice);
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}`)}
<Image className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"
alt="workshop thumbnail" >
src={returnImageProxy(workshop.image)} <div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
quality={100} <Image
width={width} alt="workshop thumbnail"
height={height} src={returnImageProxy(workshop.image)}
className="w-full h-full object-cover object-center rounded-md" quality={100}
/> layout="fill"
<div className='flex flex-col justify-start'> objectFit="cover"
<h4 className="mb-1 font-bold text-2xl font-blinker">{workshop.title}</h4> className="rounded-md"
<p style={{ />
display: '-webkit-box', </div>
WebkitBoxOrient: 'vertical', <div className="flex flex-col justify-start w-full mt-4">
WebkitLineClamp: 3, <h4 className="mb-1 font-bold text-lg font-blinker line-clamp-2">
overflow: 'hidden', {workshop.title}
textOverflow: 'ellipsis', </h4>
whiteSpace: 'prewrap', <p className="text-sm text-gray-500 line-clamp-2">{workshop.summary}</p>
font: '400 1rem/1.5 Blinker, sans-serif' <div className="flex flex-row justify-between items-center mt-2">
}}> <p className="text-xs text-gray-400">
{workshop.summary} {formatTimestampToHowLongAgo(workshop.published_at)}
</p> </p>
<div className="flex flex-row justify-between w-full"> <p className="text-xs">
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(workshop.published_at)}</p> <i className="pi pi-bolt"></i> {zapAmount}
<p className="pr-2"><i className="pi pi-bolt"></i> {zapAmount}</p> </p>
</div>
</div>
</div>
</div> </div>
); </div>
</div>
);
}; };
export default WorkshopTemplate; export default WorkshopTemplate;