From e265d1ea88e546015b2920a5c9ffd0cc385b5c79 Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Mon, 5 Aug 2024 17:27:19 -0500 Subject: [PATCH] Queries are near perfect, also quality of life improvements --- package-lock.json | 45 +++++++ package.json | 1 + .../carousels/templates/CourseTemplate.js | 115 +++++++++--------- .../carousels/templates/ResourceTemplate.js | 6 +- .../carousels/templates/WorkshopTemplate.js | 12 +- src/components/forms/WorkshopForm.js | 4 +- src/components/zaps/ZapDisplay.js | 2 +- src/components/zaps/ZapForm.js | 1 + .../nostrQueries/content/useCoursesQuery.js | 2 +- .../nostrQueries/content/useResourcesQuery.js | 2 +- .../nostrQueries/content/useWorkshopsQuery.js | 2 +- .../nostrQueries/zaps/useCoursesZapsQuery.js | 62 ---------- .../nostrQueries/zaps/useResourceZapsQuery.js | 62 ---------- .../zaps/useWorkshopsZapsQuery.js | 62 ---------- src/hooks/nostrQueries/zaps/useZapsQuery.js | 39 ++++++ .../nostrQueries/zaps/useZapsSubscription.js | 1 + src/pages/details/[slug].js | 8 +- tailwind.config.js | 5 +- 18 files changed, 169 insertions(+), 262 deletions(-) delete mode 100644 src/hooks/nostrQueries/zaps/useCoursesZapsQuery.js delete mode 100644 src/hooks/nostrQueries/zaps/useResourceZapsQuery.js delete mode 100644 src/hooks/nostrQueries/zaps/useWorkshopsZapsQuery.js create mode 100644 src/hooks/nostrQueries/zaps/useZapsQuery.js diff --git a/package-lock.json b/package-lock.json index 0c83453..0f6f0ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "zapthreads": "^0.5.2" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.13", "eslint": "^8", "eslint-config-next": "14.2.5", "postcss": "^8", @@ -1275,6 +1276,36 @@ "tslib": "^2.4.0" } }, + "node_modules/@tailwindcss/typography": { + "version": "0.5.13", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz", + "integrity": "sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==", + "dev": true, + "license": "MIT", + "dependencies": { + "lodash.castarray": "^4.4.0", + "lodash.isplainobject": "^4.0.6", + "lodash.merge": "^4.6.2", + "postcss-selector-parser": "6.0.10" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders" + } + }, + "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz", + "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/@tanstack/query-core": { "version": "5.51.21", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.21.tgz", @@ -7249,6 +7280,20 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "dev": true, + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", diff --git a/package.json b/package.json index bf9a648..e1bf431 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "zapthreads": "^0.5.2" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.13", "eslint": "^8", "eslint-config-next": "14.2.5", "postcss": "^8", diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js index f6f0e0a..374a3a8 100644 --- a/src/components/content/carousels/templates/CourseTemplate.js +++ b/src/components/content/carousels/templates/CourseTemplate.js @@ -5,70 +5,71 @@ import { formatTimestampToHowLongAgo } from "@/utils/time"; import { useImageProxy } from "@/hooks/useImageProxy"; import { getSatAmountFromInvoice } from "@/utils/lightning"; import ZapDisplay from "@/components/zaps/ZapDisplay"; -import { useCoursesZapsQuery } from "@/hooks/nostrQueries/zaps/useCoursesZapsQuery"; +import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery"; const CourseTemplate = ({ course }) => { - const [zapAmount, setZapAmount] = useState(0); - const router = useRouter(); - const { returnImageProxy } = useImageProxy(); - const { zaps, zapsLoading, zapsError } = useCoursesZapsQuery({ event: course }); + const [zapAmount, setZapAmount] = useState(null); + const router = useRouter(); + const { returnImageProxy } = useImageProxy(); + const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: course, type: "course" }); - useEffect(() => { - if (!zaps || zapsLoading || zapsError) return; + useEffect(() => { + if (!zaps || zapsLoading || zapsError) return; - let total = 0; - zaps.forEach((zap) => { - // If the zap matches the event or the parameterized event, then add the zap to the total - if (zap.tags.find(tag => tag[0] === "e" && tag[1] === course.id) || zap.tags.find(tag => tag[0] === "a" && tag[1] === `${course.kind}:${course.id}:${course.d}`)) { - const bolt11Tag = zap.tags.find(tag => tag[0] === "bolt11"); - const invoice = bolt11Tag ? bolt11Tag[1] : null; - if (invoice) { - const amount = getSatAmountFromInvoice(invoice); - total += amount; - } - } - }); - setZapAmount(total); - }, [course, zaps, zapsLoading, zapsError]); + let total = 0; + zaps.forEach((zap) => { + // If the zap matches the event or the parameterized event, then add the zap to the total + if (zap.tags.find(tag => tag[0] === "e" && tag[1] === course.id) || zap.tags.find(tag => tag[0] === "a" && tag[1] === `${course.kind}:${course.id}:${course.d}`)) { + const bolt11Tag = zap.tags.find(tag => tag[0] === "bolt11"); + const invoice = bolt11Tag ? bolt11Tag[1] : null; + if (invoice) { + const amount = getSatAmountFromInvoice(invoice); + total += amount; + } + } + }); + setZapAmount(total); + }, [course, zaps, zapsLoading, zapsError]); - if (zapsError) return
Error: {zapsError}
; + if (zapsError) return
Error: {zapsError}
; - return ( -
-
router.push(`/course/${course.id}`)} - className="relative w-full h-0 hover:opacity-80 transition-opacity duration-300 cursor-pointer" - style={{ paddingBottom: "56.25%" }} - > - course thumbnail -
-
-

- {course.name || course.title} -

-

{course.description || course.summary}

-
-

- {course?.published_at && course.published_at !== "" ? ( - formatTimestampToHowLongAgo(course.published_at) - ) : ( - formatTimestampToHowLongAgo(course.created_at) - )} -

- -
-
+ return ( +
+ {/* Wrap the image in a div with a relative class with a padding-bottom of 56.25% representing the aspect ratio of 16:9 */} +
router.push(`/course/${course.id}`)} + className="relative w-full h-0 hover:opacity-80 transition-opacity duration-300 cursor-pointer" + style={{ paddingBottom: "56.25%" }} + > + course thumbnail +
+
+

+ {course.name || course.title} +

+

{course.description || course.summary}

+
+

+ {course?.published_at && course.published_at !== "" ? ( + formatTimestampToHowLongAgo(course.published_at) + ) : ( + formatTimestampToHowLongAgo(course.created_at) + )} +

+
- ); +
+
+ ); }; export default CourseTemplate; diff --git a/src/components/content/carousels/templates/ResourceTemplate.js b/src/components/content/carousels/templates/ResourceTemplate.js index 609fd36..92e3859 100644 --- a/src/components/content/carousels/templates/ResourceTemplate.js +++ b/src/components/content/carousels/templates/ResourceTemplate.js @@ -3,13 +3,13 @@ import Image from "next/image"; import { useRouter } from "next/router"; import { formatTimestampToHowLongAgo } from "@/utils/time"; import { useImageProxy } from "@/hooks/useImageProxy"; -import { useResourceZapsQuery } from "@/hooks/nostrQueries/zaps/useResourceZapsQuery"; +import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery"; import { getSatAmountFromInvoice } from "@/utils/lightning"; import ZapDisplay from "@/components/zaps/ZapDisplay"; const ResourceTemplate = ({ resource }) => { - const [zapAmount, setZapAmount] = useState(0); - const { zaps, zapsLoading, zapsError } = useResourceZapsQuery({ event: resource }); + const [zapAmount, setZapAmount] = useState(null); + const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: resource, type: "resource" }); const router = useRouter(); const { returnImageProxy } = useImageProxy(); diff --git a/src/components/content/carousels/templates/WorkshopTemplate.js b/src/components/content/carousels/templates/WorkshopTemplate.js index 080e0a7..4b85239 100644 --- a/src/components/content/carousels/templates/WorkshopTemplate.js +++ b/src/components/content/carousels/templates/WorkshopTemplate.js @@ -3,18 +3,18 @@ import Image from "next/image"; import { useRouter } from "next/router"; import { formatTimestampToHowLongAgo } from "@/utils/time"; import { useImageProxy } from "@/hooks/useImageProxy"; -import { useWorkshopsZapsQuery } from "@/hooks/nostrQueries/zaps/useWorkshopsZapsQuery"; +import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery"; import { getSatAmountFromInvoice } from "@/utils/lightning"; import ZapDisplay from "@/components/zaps/ZapDisplay"; const WorkshopTemplate = ({ workshop }) => { - const [zapAmount, setZapAmount] = useState(0); + const [zapAmount, setZapAmount] = useState(null); const router = useRouter(); const { returnImageProxy } = useImageProxy(); - const { zaps, zapsLoading, zapsError } = useWorkshopsZapsQuery({ event: workshop }); + const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: workshop, type: "workshop" }); useEffect(() => { - if (!zaps || zapsLoading || zapsError) return; + if (zapsLoading || !zaps) return; let total = 0; zaps.forEach((zap) => { @@ -28,13 +28,15 @@ const WorkshopTemplate = ({ workshop }) => { } } }); + setZapAmount(total); }, [zaps, workshop, zapsLoading, zapsError]); - + if (zapsError) return
Error: {zapsError}
; return (
+ {/* Wrap the image in a div with a relative class with a padding-bottom of 56.25% representing the aspect ratio of 16:9 */}
router.push(`/details/${workshop.id}`)} className="relative w-full h-0 hover:opacity-80 transition-opacity duration-300 cursor-pointer" diff --git a/src/components/forms/WorkshopForm.js b/src/components/forms/WorkshopForm.js index 52a9aed..8331d69 100644 --- a/src/components/forms/WorkshopForm.js +++ b/src/components/forms/WorkshopForm.js @@ -41,12 +41,12 @@ const WorkshopForm = ({ draft = null }) => { // Check if it's a YouTube video if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) { const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop(); - embedCode = ``; + embedCode = `
`; } // Check if it's a Vimeo video else if (videoUrl.includes('vimeo.com')) { const videoId = videoUrl.split('/').pop(); - embedCode = ``; + embedCode = `
`; } // Add more conditions here for other video services diff --git a/src/components/zaps/ZapDisplay.js b/src/components/zaps/ZapDisplay.js index 7630f3c..32e8531 100644 --- a/src/components/zaps/ZapDisplay.js +++ b/src/components/zaps/ZapDisplay.js @@ -12,7 +12,7 @@ const ZapDisplay = ({ zapAmount, event, zapsLoading }) => { {zapsLoading ? ( ) : ( - zapAmount + zapAmount !== null ? zapAmount : )} diff --git a/src/components/zaps/ZapForm.js b/src/components/zaps/ZapForm.js index 68a3276..4d92add 100644 --- a/src/components/zaps/ZapForm.js +++ b/src/components/zaps/ZapForm.js @@ -2,6 +2,7 @@ import React from "react"; import { nip19 } from "nostr-tools"; const ZapForm = ({ event }) => { + console.log('event', event); const nAddress = nip19.naddrEncode({ kind: event?.kind, pubkey: event?.pubkey, diff --git a/src/hooks/nostrQueries/content/useCoursesQuery.js b/src/hooks/nostrQueries/content/useCoursesQuery.js index 3f35ae9..44f2228 100644 --- a/src/hooks/nostrQueries/content/useCoursesQuery.js +++ b/src/hooks/nostrQueries/content/useCoursesQuery.js @@ -38,7 +38,7 @@ const { data: courses, isLoading: coursesLoading, error: coursesError, refetch: queryKey: ['courses', isClient], queryFn: fetchCoursesFromNDK, staleTime: 1000 * 60 * 30, // 30 minutes - cacheTime: 1000 * 60 * 60, // 1 hour + refetchInterval: 1000 * 60 * 30, // 30 minutes enabled: isClient, }) diff --git a/src/hooks/nostrQueries/content/useResourcesQuery.js b/src/hooks/nostrQueries/content/useResourcesQuery.js index 86c9e77..3884626 100644 --- a/src/hooks/nostrQueries/content/useResourcesQuery.js +++ b/src/hooks/nostrQueries/content/useResourcesQuery.js @@ -43,7 +43,7 @@ const { data: resources, isLoading: resourcesLoading, error: resourcesError, ref queryKey: ['resources', isClient], queryFn: fetchResourcesFromNDK, staleTime: 1000 * 60 * 30, // 30 minutes - cacheTime: 1000 * 60 * 60, // 1 hour + refetchInterval: 1000 * 60 * 30, // 30 minutes enabled: isClient, }) diff --git a/src/hooks/nostrQueries/content/useWorkshopsQuery.js b/src/hooks/nostrQueries/content/useWorkshopsQuery.js index 85f57c8..e2d2cd9 100644 --- a/src/hooks/nostrQueries/content/useWorkshopsQuery.js +++ b/src/hooks/nostrQueries/content/useWorkshopsQuery.js @@ -43,7 +43,7 @@ const { data: workshops, isLoading: workshopsLoading, error: workshopsError, ref queryKey: ['workshops', isClient], queryFn: fetchWorkshopsFromNDK, staleTime: 1000 * 60 * 30, // 30 minutes - cacheTime: 1000 * 60 * 60, // 1 hour + refetchInterval: 1000 * 60 * 30, // 30 minutes enabled: isClient, }) diff --git a/src/hooks/nostrQueries/zaps/useCoursesZapsQuery.js b/src/hooks/nostrQueries/zaps/useCoursesZapsQuery.js deleted file mode 100644 index 62b1255..0000000 --- a/src/hooks/nostrQueries/zaps/useCoursesZapsQuery.js +++ /dev/null @@ -1,62 +0,0 @@ -import { useState, useEffect } from 'react'; -import { useNDKContext } from '@/context/NDKContext'; - -export function useCoursesZapsQuery({ event }) { - const [isClient, setIsClient] = useState(false); - const [zaps, setZaps] = useState([]); - const [zapsLoading, setZapsLoading] = useState(true); - const [zapsError, setZapsError] = useState(null); - const ndk = useNDKContext(); - - useEffect(() => { - setIsClient(true); - }, []); - - useEffect(() => { - if (!isClient || !ndk || !event) return; - - let subscription = null; - let isSubscribed = true; - - const fetchZapsFromNDK = async () => { - try { - await ndk.connect(); - const uniqueEvents = new Set(); - - const filters = [ - { kinds: [9735], "#e": [event.id] }, - { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] } - ]; - - subscription = ndk.subscribe(filters); - - subscription.on('event', (zap) => { - if (isSubscribed) { - uniqueEvents.add(zap); - setZaps(Array.from(uniqueEvents)); - } - }); - - subscription.on('eose', () => { - setZaps(Array.from(uniqueEvents)); - setZapsLoading(false); - }); - - } catch (error) { - setZapsError('Error fetching zaps from NDK: ' + error); - setZapsLoading(false); - } - }; - - fetchZapsFromNDK(); - - return () => { - isSubscribed = false; - if (subscription) { - subscription.stop(); - } - }; - }, [isClient, ndk, event]); - - return { zaps, zapsLoading, zapsError }; -} diff --git a/src/hooks/nostrQueries/zaps/useResourceZapsQuery.js b/src/hooks/nostrQueries/zaps/useResourceZapsQuery.js deleted file mode 100644 index 0d91416..0000000 --- a/src/hooks/nostrQueries/zaps/useResourceZapsQuery.js +++ /dev/null @@ -1,62 +0,0 @@ -import { useState, useEffect } from 'react'; -import { useNDKContext } from '@/context/NDKContext'; - -export function useResourceZapsQuery({ event }) { - const [isClient, setIsClient] = useState(false); - const [zaps, setZaps] = useState([]); - const [zapsLoading, setZapsLoading] = useState(true); - const [zapsError, setZapsError] = useState(null); - const ndk = useNDKContext(); - - useEffect(() => { - setIsClient(true); - }, []); - - useEffect(() => { - if (!isClient || !ndk || !event) return; - - let subscription = null; - let isSubscribed = true; - - const fetchZapsFromNDK = async () => { - try { - await ndk.connect(); - const uniqueEvents = new Set(); - - const filters = [ - { kinds: [9735], "#e": [event.id] }, - { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] } - ]; - - subscription = ndk.subscribe(filters); - - subscription.on('event', (zap) => { - if (isSubscribed) { - uniqueEvents.add(zap); - setZaps(Array.from(uniqueEvents)); - } - }); - - subscription.on('eose', () => { - setZaps(Array.from(uniqueEvents)); - setZapsLoading(false); - }); - - } catch (error) { - setZapsError('Error fetching zaps from NDK: ' + error); - setZapsLoading(false); - } - }; - - fetchZapsFromNDK(); - - return () => { - isSubscribed = false; - if (subscription) { - subscription.stop(); - } - }; - }, [isClient, ndk, event]); - - return { zaps, zapsLoading, zapsError }; -} diff --git a/src/hooks/nostrQueries/zaps/useWorkshopsZapsQuery.js b/src/hooks/nostrQueries/zaps/useWorkshopsZapsQuery.js deleted file mode 100644 index 467b7a5..0000000 --- a/src/hooks/nostrQueries/zaps/useWorkshopsZapsQuery.js +++ /dev/null @@ -1,62 +0,0 @@ -import { useState, useEffect } from 'react'; -import { useNDKContext } from '@/context/NDKContext'; - -export function useWorkshopsZapsQuery({ event }) { - const [isClient, setIsClient] = useState(false); - const [zaps, setZaps] = useState([]); - const [zapsLoading, setZapsLoading] = useState(true); - const [zapsError, setZapsError] = useState(null); - const ndk = useNDKContext(); - - useEffect(() => { - setIsClient(true); - }, []); - - useEffect(() => { - if (!isClient || !ndk || !event) return; - - let subscription = null; - let isSubscribed = true; - - const fetchZapsFromNDK = async () => { - try { - await ndk.connect(); - const uniqueEvents = new Set(); - - const filters = [ - { kinds: [9735], "#e": [event.id] }, - { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] } - ]; - - subscription = ndk.subscribe(filters); - - subscription.on('event', (zap) => { - if (isSubscribed) { - uniqueEvents.add(zap); - setZaps(Array.from(uniqueEvents)); - } - }); - - subscription.on('eose', () => { - setZaps(Array.from(uniqueEvents)); - setZapsLoading(false); - }); - - } catch (error) { - setZapsError('Error fetching zaps from NDK: ' + error); - setZapsLoading(false); - } - }; - - fetchZapsFromNDK(); - - return () => { - isSubscribed = false; - if (subscription) { - subscription.stop(); - } - }; - }, [isClient, ndk, event]); - - return { zaps, zapsLoading, zapsError }; -} diff --git a/src/hooks/nostrQueries/zaps/useZapsQuery.js b/src/hooks/nostrQueries/zaps/useZapsQuery.js new file mode 100644 index 0000000..e2e352e --- /dev/null +++ b/src/hooks/nostrQueries/zaps/useZapsQuery.js @@ -0,0 +1,39 @@ +import { useState, useEffect } from 'react'; +import { useQuery } from '@tanstack/react-query'; +import { useNDKContext } from '@/context/NDKContext'; + +export function useZapsQuery({ event, type }) { + const [isClient, setIsClient] = useState(false); + const ndk = useNDKContext(); + + useEffect(() => { + setIsClient(true); + }, []); + + const fetchZaps = async (event) => { + try { + await ndk.connect(); + + const filters = [ + { kinds: [9735], "#e": [event.id] }, + { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] } + ]; + + const events = await ndk.fetchEvents(filters, { closeOnEose: true }); + return events; + } catch (error) { + console.error('Error fetching zaps from NDK:', error); + return []; + } + }; + + const { data: zaps, isLoading: zapsLoading, error: zapsError, refetch: refetchZaps } = useQuery({ + queryKey: ['zaps', isClient, event, type], + queryFn: () => fetchZaps(event), + staleTime: 10000, // 10 seconds + refetchInterval: 10000, // 10 seconds + enabled: isClient, + }) + + return { zaps, zapsLoading, zapsError, refetchZaps } +} \ No newline at end of file diff --git a/src/hooks/nostrQueries/zaps/useZapsSubscription.js b/src/hooks/nostrQueries/zaps/useZapsSubscription.js index 634d216..a82374f 100644 --- a/src/hooks/nostrQueries/zaps/useZapsSubscription.js +++ b/src/hooks/nostrQueries/zaps/useZapsSubscription.js @@ -34,6 +34,7 @@ export function useZapsSubscription({ event }) { if (isSubscribed) { uniqueEvents.add(zap); setZaps(Array.from(uniqueEvents)); + setZapsLoading(false); } }); diff --git a/src/pages/details/[slug].js b/src/pages/details/[slug].js index 4b1837d..4f1fd7f 100644 --- a/src/pages/details/[slug].js +++ b/src/pages/details/[slug].js @@ -38,7 +38,7 @@ export default function Details() { const ndk = useNDKContext(); const [user] = useLocalStorageWithEffect('user', {}); const { returnImageProxy } = useImageProxy(); - const { zaps, zapsError } = useZapsSubscription({ event: processedEvent }); + const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: processedEvent }); const router = useRouter(); @@ -105,8 +105,8 @@ export default function Details() { useEffect(() => { if (event) { - const { id, pubkey, content, title, summary, image, published_at, d, topics } = parseEvent(event); - setProcessedEvent({ id, pubkey, content, title, summary, image, published_at, d, topics }); + const parsedEvent = parseEvent(event); + setProcessedEvent(parsedEvent); } }, [event]); @@ -184,7 +184,7 @@ export default function Details() {
) : (
- +
)}
diff --git a/tailwind.config.js b/tailwind.config.js index 3f9ad1c..ea59bc1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -29,5 +29,8 @@ module.exports = { }, }, }, - plugins: [], + plugins: [ + require('@tailwindcss/typography'), + // ... + ], }