Fix topic tags, some styling fixes

src/components/content/carousels/templates/ResourceTemplate.js

@@ -50,7 +50,7 @@ const ResourceTemplate = (resource) => {
         <h4 className="mb-1 font-bold text-lg font-blinker line-clamp-2">
           {resource.title}
         </h4>
-        <p className="text-sm text-gray-500 line-clamp-2">{resource.summary}</p>
+        <p className="text-sm text-gray-500 min-h-[40px] line-clamp-2">{resource.summary}</p>
         <div className="flex flex-row justify-between items-center mt-2">
           <p className="text-xs text-gray-400">
             {formatTimestampToHowLongAgo(resource.published_at)}

src/pages/details/[slug].js

@@ -96,8 +96,8 @@ export default function Details() {
 
     useEffect(() => {
         if (event) {
-            const { id, pubkey, content, title, summary, image, published_at, d } = parseEvent(event);
+            const { id, pubkey, content, title, summary, image, published_at, d, topics } = parseEvent(event);
-            setProcessedEvent({ id, pubkey, content, title, summary, image, published_at, d });
+            setProcessedEvent({ id, pubkey, content, title, summary, image, published_at, d, topics });
         }
     }, [event]);
 
@@ -116,15 +116,16 @@ export default function Details() {
     return (
         <div className='w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2'>
             <div className='w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col'>
-                {/* <i className='pi pi-arrow-left pl-8 cursor-pointer hover:opacity-75 max-tab:pl-2 max-mob:pl-2' onClick={() => router.push('/')} /> */}
+                <i className='pi pi-arrow-left pl-8 cursor-pointer hover:opacity-75 max-tab:pl-2 max-mob:pl-2' onClick={() => router.push('/')} />
                 <div className='w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]'>
                     <div className='flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
                         <div className='pt-2 flex flex-row justify-start w-full'>
-                            <Tag className='mr-2' value="Primary"></Tag>
+                            {processedEvent && processedEvent.topics && processedEvent.topics.length > 0 && (
-                            <Tag className='mr-2' severity="success" value="Success"></Tag>
+                                processedEvent.topics.map((topic, index) => (
-                            <Tag className='mr-2' severity="info" value="Info"></Tag>
+                                    <Tag className='mr-2 text-white' key={index} value={topic}></Tag>
-                            <Tag className='mr-2' severity="warning" value="Warning"></Tag>
+                                ))
-                            <Tag className='mr-2' severity="danger" value="Danger"></Tag>
+                            )
+                            }
                         </div>
                         <h1 className='text-4xl mt-6'>{processedEvent?.title}</h1>
                         <p className='text-xl mt-6'>{processedEvent?.summary}</p>

src/pages/draft/[slug].js

@@ -39,7 +39,7 @@ export default function Details() {
 
     const router = useRouter();
 
-    const {showToast} = useToast();
+    const { showToast } = useToast();
 
     const { publishAll } = useNostr();
 
@@ -60,7 +60,7 @@ export default function Details() {
 
     const handleSubmit = async () => {
         if (draft) {
-            const {unsignedEvent, type} = buildEvent(draft);
+            const { unsignedEvent, type } = buildEvent(draft);
 
             if (unsignedEvent) {
                 await publishEvent(unsignedEvent, type);
@@ -184,11 +184,14 @@ export default function Details() {
                 <div className='w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]'>
                     <div className='flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
                         <div className='pt-2 flex flex-row justify-start w-full'>
-                            <Tag className='mr-2' value="Primary"></Tag>
+                            {/* List out topics */}
-                            <Tag className='mr-2' severity="success" value="Success"></Tag>
+                            {draft?.topics && draft.topics.map((topic, index) => {
-                            <Tag className='mr-2' severity="info" value="Info"></Tag>
+                                if (topic === "plebdevs") return;
-                            <Tag className='mr-2' severity="warning" value="Warning"></Tag>
+                                return (
-                            <Tag className='mr-2' severity="danger" value="Danger"></Tag>
+                                    <Tag className='mr-2 text-white' key={index} value={topic}></Tag>
+                                )
+                            })
+                            }
                         </div>
                         <h1 className='text-4xl mt-6'>{draft?.title}</h1>
                         <p className='text-xl mt-6'>{draft?.summary}</p>

src/utils/nostr.js

@@ -40,6 +40,7 @@ export const parseEvent = (event) => {
         summary: '',
         image: '',
         published_at: '',
+        topics: [], // Added to hold all topics
     };
 
     // Iterate over the tags array to extract data
@@ -63,6 +64,9 @@ export const parseEvent = (event) => {
             case 'd':
                 eventData.d = tag[1];
                 break;
+            case 't':
+                tag[1] !== "plebdevs" && eventData.topics.push(tag[1]);
+                break;
             default:
                 break;
         }

tailwind.config.js

@@ -7,6 +7,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      colors: {
+        white: "#f8f8ff"
+      },
       screens: {
         'max-mob': {'max': '475px'},
         'max-tab': {'max': '768px'},