clean up details page, enforce font sizes for header elements universally

src/components/courses/CoursesCarousel.js

@@ -9,12 +9,12 @@ import { formatTimestampToHowLongAgo } from '@/utils/time';
 
 const responsiveOptions = [
     {
-        breakpoint: '1199px',
+        breakpoint: '3000px',
         numVisible: 3,
         numScroll: 1
     },
     {
-        breakpoint: '767px',
+        breakpoint: '1462px',
         numVisible: 2,
         numScroll: 1
     },
@@ -25,6 +25,7 @@ const responsiveOptions = [
     }
 ];
 
+
 export default function CoursesCarousel() {
     const courses = useSelector((state) => state.events.courses);
     const [processedCourses, setProcessedCourses] = useState([]);
@@ -107,7 +108,7 @@ export default function CoursesCarousel() {
 
     return (
         <>
-            <h1 className="text-2xl ml-[6%] mt-4">courses</h1>
+            <h2 className="ml-[6%] mt-4">courses</h2>
             <Carousel value={processedCourses} numVisible={2} itemTemplate={courseTemplate} responsiveOptions={responsiveOptions} />
         </>
     );

src/components/navbar/Navbar.js

@@ -92,7 +92,7 @@ const Navbar = () => {
                 <Menubar
                     start={start}
                     end={UserAvatar}
-                    className='px-[2%] py-[2%] bg-gray-800 border-t-0 border-l-0 border-r-0 rounded-none fixed z-10 w-[100vw] max-tab:px-[5%] max-mob:px-[5%]'
+                    className='px-[2%] py-8 bg-gray-800 border-t-0 border-l-0 border-r-0 rounded-none fixed z-10 w-[100vw] max-tab:px-[5%] max-mob:px-[5%]'
                     style={{ height: navbarHeight }}
                 />
             </div>

src/components/workshops/WorkshopsCarousel.js

@@ -9,12 +9,12 @@ import { formatTimestampToHowLongAgo } from '@/utils/time';
 
 const responsiveOptions = [
     {
-        breakpoint: '1199px',
+        breakpoint: '3000px',
         numVisible: 3,
         numScroll: 1
     },
     {
-        breakpoint: '767px',
+        breakpoint: '1462px',
         numVisible: 2,
         numScroll: 1
     },
@@ -105,7 +105,7 @@ export default function WorkshopsCarousel() {
 
     return (
         <>
-            <h1 className="text-2xl ml-[6%] mt-4">workshops</h1>
+            <h2 className="ml-[6%] mt-4">workshops</h2>
             <Carousel value={processedWorkshops} numVisible={2} itemTemplate={workshopTemplate} responsiveOptions={responsiveOptions} />
         </>
     );

src/pages/details/[slug].js

@@ -8,6 +8,20 @@ import { Tag } from 'primereact/tag';
 import Image from 'next/image';
 import 'primeicons/primeicons.css';
 
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+const MarkdownContent = ({ content }) => {
+    console.log('content:', content);
+    return (
+        <div>
+            <ReactMarkdown rehypePlugins={[rehypeRaw]}>
+                {content}
+            </ReactMarkdown>
+        </div>
+    );
+};
+
 export default function Details() {
     const [event, setEvent] = useState(null);
     const [processedEvent, setProcessedEvent] = useState({});
@@ -55,59 +69,68 @@ export default function Details() {
     }, [event]);
 
     return (
-        <div className='w-[80vw] flex flex-row justify-between mx-auto mt-4'>
+        <div className='w-full px-24 pt-12 mx-auto mt-4'>
-            <i className='pi pi-arrow-left pl-8 cursor-pointer hover:opacity-75' onClick={() => router.push('/')} />
+            <div className='w-full flex flex-row justify-between'>
-            <div className='flex flex-col items-start'>
+                <i className='pi pi-arrow-left pl-8 cursor-pointer hover:opacity-75' onClick={() => router.push('/')} />
-                <div className='flex flex-row justify-start w-full'>
+                <div className='w-[75vw] mx-auto flex flex-row items-start justify-between'>
-                    <Tag className='mr-2' value="Primary"></Tag>
+                    <div className='flex flex-col items-start max-w-[45vw]'>
-                    <Tag className='mr-2' severity="success" value="Success"></Tag>
+                        <div className='pt-2 flex flex-row justify-start w-full'>
-                    <Tag className='mr-2' severity="info" value="Info"></Tag>
+                            <Tag className='mr-2' value="Primary"></Tag>
-                    <Tag className='mr-2' severity="warning" value="Warning"></Tag>
+                            <Tag className='mr-2' severity="success" value="Success"></Tag>
-                    <Tag className='mr-2' severity="danger" value="Danger"></Tag>
+                            <Tag className='mr-2' severity="info" value="Info"></Tag>
-                </div>
+                            <Tag className='mr-2' severity="warning" value="Warning"></Tag>
-                <h1 className='text-4xl mt-6'>{processedEvent?.title}</h1>
+                            <Tag className='mr-2' severity="danger" value="Danger"></Tag>
-                <p className='text-xl mt-6'>{processedEvent?.summary}</p>
+                        </div>
-                <div className='flex flex-row w-full mt-6 items-center'>
+                        <h1 className='text-4xl mt-6'>{processedEvent?.title}</h1>
-                    <Image
+                        <p className='text-xl mt-6'>{processedEvent?.summary}</p>
-                        alt="resource thumbnail"
+                        <div className='flex flex-row w-full mt-6 items-center'>
-                        src={returnImageProxy(author?.avatar)}
+                            <Image
-                        width={50}
+                                alt="resource thumbnail"
-                        height={50}
+                                src={returnImageProxy(author?.avatar)}
-                        className="rounded-full mr-4"
+                                width={50}
-                    />
+                                height={50}
-                    <p className='text-lg'>
+                                className="rounded-full mr-4"
-                        Created by{' '}
+                            />
-                        <a rel='noreferrer noopener' target='_blank' className='text-blue-500 hover:underline'>
+                            <p className='text-lg'>
-                            {author?.username}
+                                Created by{' '}
-                        </a>
+                                <a rel='noreferrer noopener' target='_blank' className='text-blue-500 hover:underline'>
-                    </p>
+                                    {author?.username}
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                    <div className='flex flex-col'>
+                        {processedEvent && (
+                            <div className='flex flex-col items-center justify-between rounded-lg h-72 p-4 bg-gray-700 drop-shadow-md'>
+                                <Image
+                                    alt="resource thumbnail"
+                                    src={returnImageProxy(processedEvent.image)}
+                                    width={344}
+                                    height={194}
+                                    className="object-cover object-center rounded-lg"
+                                />
+                                <Button
+                                    icon="pi pi-bolt"
+                                    label="100 sats"
+                                    severity="success"
+                                    outlined
+                                    pt={{
+                                        button: {
+                                            icon: ({ context }) => ({
+                                                className: 'bg-yellow-500'
+                                            })
+                                        }
+                                    }}
+                                />
+                            </div>
+                        )}
+                    </div>
                 </div>
             </div>
-            <div className='flex flex-col'>
+            <div className='w-[75vw] mx-auto mt-32 p-12 border-t-2 border-gray-300'>
-                {processedEvent && (
+            {
-                    <div className='flex flex-col items-center justify-between rounded-lg h-72 p-4 bg-gray-700 drop-shadow-md'>
+                    processedEvent?.content && <MarkdownContent content={processedEvent.content} />
-                        <Image
+                }
-                            alt="resource thumbnail"
-                            src={returnImageProxy(processedEvent.image)}
-                            width={344}
-                            height={194}
-                            className="object-cover object-center rounded-lg"
-                        />
-                        <Button
-                            icon="pi pi-bolt"
-                            label="100 sats"
-                            severity="success"
-                            outlined
-                            pt={{
-                                button: {
-                                    icon: ({ context }) => ({
-                                        className: 'bg-yellow-500'
-                                    })
-                                }
-                            }}
-                        />
-                    </div>
-                )}
             </div>
         </div>
     );

src/styles/globals.css

@@ -10,9 +10,20 @@
 }
 
 body {
-  font-family: 'Blinker', sans-serif;
+  @apply font-blinker;
 }
 
+h1 {
+  @apply text-h1 font-blinker;
+}
+
+h2 {
+  @apply text-h2 font-blinker;
+}
+
+h3 {
+  @apply text-h3 font-blinker;
+}
 
 .p-tabmenu .p-tabmenu-nav {
   background-color: transparent !important;

tailwind.config.js

@@ -18,6 +18,11 @@ module.exports = {
       fontFamily: {
         'blinker': ['Blinker', 'sans-serif'],
       },
+      fontSize: {
+        'h1': ['2.25rem', { lineHeight: '2.5rem' }],
+        'h2': ['1.5rem', { lineHeight: '2rem' }],
+        'h3': ['1.25rem', { lineHeight: '1.75rem' }],
+      },
     },
   },
   plugins: [],