setup talks page (#60)

Why: - Talks and Roundtables wasn't styled nor rendering any content, which was not working as intended; How: - Added content fetching and rendering to the talks and roundtables page; - Added styling; - Re-enabled navigation to Talks & Roundtables in content hub homepage; Screenshots: ### Styled page ![imagem](https://github.com/user-attachments/assets/73997dea-e305-48cc-94f1-f20f10415223) ### Re-enabled Talks & Roundtables navbar button ![imagem](https://github.com/user-attachments/assets/aef8bda4-a0de-439c-9114-299ee66ca063)
subvisual · Oct 22, 2024 · 37a6e09 · 37a6e09
1 parent a3cc05e
commit 37a6e09
Show file tree

Hide file tree

Showing 7 changed files with 253 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "clsx": "^2.1.1",
     "cross-env": "^7.0.3",
     "geist": "^1.3.0",
+    "get-video-id": "^4.1.7",
     "graphql": "^16.8.2",
     "install": "^0.13.0",
     "isomorphic-dompurify": "^2.16.0",
@@ -68,6 +69,7 @@
     "react-dom": "^19.0.0-rc-09111202-20241011",
     "react-hook-form": "7.45.4",
     "react-share": "^5.1.0",
+    "react-youtube": "^10.1.0",
     "sharp": "0.32.6",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",

diff --git a/src/app/(pages)/talks-and-roundtables/[slug]/page.tsx b/src/app/(pages)/talks-and-roundtables/[slug]/page.tsx
@@ -1,41 +1,99 @@
-// import { notFound } from 'next/navigation'
-//
-// import { fetchDoc } from '../../../_api/fetchDoc'
-
-import { Metadata } from "next";
 import { fetchContentBySlug } from "@/app/_utilities/contentFetchers";
+import getVideoId from "get-video-id";
+import BackButton from "@/app/_components/BackButton";
+import ArchiveButton from "@/app/_components/ArchiveButton";
+import { formatDateTime } from "@/app/_utilities/formatDateTime";
+import Share from "@/app/_components/Share";
+import Categories from "@/app/_components/Categories";
+import styles from "./styles.module.css";
+import { Subscribe } from "@/app/_blocks/Subscribe";
+import Contributors from "@/app/_blocks/EpisodeContent/Contributors";
+import { TalksAndRoundtable } from "@/payload-types";
+import { Metadata } from "next";
 import { generateMeta } from "@/utilities/generateMeta";
 
-export const dynamic = 'force-dynamic'
+export const dynamic = "force-dynamic";
+
+export default async function TalksAndRoundTablesPage({ params: paramsPromise }) {
+  const { slug } = await paramsPromise;
+
+  // @ts-expect-error
+  const talk: TalksAndRoundtable = await fetchContentBySlug({
+    slug: slug,
+    type: "talks-and-roundtables",
+  });
 
-export default async function TalksAndRoundTablesPage() {
- /* let content = null
+  const { title, authors, summary, url, publishedAt, categories } = talk;
 
-  try {
-    content = await fetchDoc({
-      collection: 'talks-and-roundtables',
-      slug: slug,
-    })
-  } catch (err) {}
+  // move this to the collection / store in db?
+  // @ts-ignore
+  const videoID = getVideoId(talk.url);
 
-  if (!content) {
-    notFound()
-  }
-*/
   return (
     <div>
-      {/*Hello, world!
-      <pre>{JSON.stringify(content, null, 2)}</pre>*/}
+      {/* Head Block */}
+      <div className={styles.headContainer}>
+        <BackButton color={"var(--soft-white-100)"} />
+        <ArchiveButton collection={"talks-and-roundtables"} color={"var(--soft-white-100)"} />
+        {/* @ts-ignore */}
+        <h5>{title}</h5>
+        <p>
+          {/* @ts-ignore */}
+          {formatDateTime(publishedAt)}
+          <span>Duration in mins</span>
+        </p>
+
+      </div>
+      <div className={styles.contentContainer}>
+
+        {/* Contributors column*/}
+        <div>
+          <Contributors className={styles.contributors} authors={authors} />
+          {/* @ts-ignore */}
+
+        </div>
+
+        {/* Content column */}
+        <div className={styles.videoPlayer}>
+          {videoID.service === "youtube" && (
+            <iframe
+              width="560"
+              height="315"
+              src={`https://www.youtube.com/embed/${videoID.id}`}
+              title="YouTube video player"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+            ></iframe>
+          )}
+          <h5>About</h5>
+          {/* @ts-ignore */}
+          <p>{summary}</p>
+        </div>
+
+        {/*  Share & categories column */}
+        <div className={styles.sharingAndCategories}>
+          <Share />
+          {/* @ts-ignore */}
+          {categories.length > 0 && (
+            // @ts-ignore
+            <Categories categories={categories} />
+          )}
+        </div>
+      </div>
+      <Subscribe />
+
     </div>
-  )
+  );
 }
 
-export async function generateMetadata({ params: paramsPromise}): Promise<Metadata> {
-  const { slug } = await paramsPromise
+export async function generateMetadata({ params: paramsPromise }): Promise<Metadata> {
+  const { slug } = await paramsPromise;
   const talk = await fetchContentBySlug({
     slug: slug,
     type: "talks-and-roundtables",
-  })
+  });
   // @ts-ignore
-  return generateMeta({doc: talk})
+  return generateMeta({ doc: talk });
 }
diff --git a/src/app/(pages)/talks-and-roundtables/[slug]/styles.module.css b/src/app/(pages)/talks-and-roundtables/[slug]/styles.module.css
@@ -0,0 +1,127 @@
+
+.headContainer {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--sub-purple-400);
+  color: var(--soft-white-100);
+  border-bottom-right-radius: 16px;
+  border-bottom-left-radius: 16px;
+  padding: 40px 80px;
+  gap: 20px;
+}
+
+.headContainer p {
+  display: flex;
+  gap: 40px;
+}
+
+.backButton {
+  display: block;
+  font-family: Colfax, sans-serif;
+  padding-top: 40px;
+  padding-left: 15px;
+  padding-bottom: 40px;
+}
+
+
+.contentContainer {
+  display: grid;
+  grid-template-rows: 2fr;
+  font-family: var(--colfax);
+  padding-bottom: 40px;
+}
+
+.contributors {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 16px;
+}
+
+.sharingAndCategories {
+  display: flex;
+  flex-direction: column;
+  grid-row-start: 2;
+  padding-left: 20px;
+  gap: 30px;
+}
+
+.videoPlayer {
+  padding: 20px;
+}
+
+.videoPlayer iframe {
+  width: 100%;
+  border-radius: 25px;
+  margin-bottom: 16px;
+}
+
+.videoPlayer p {
+  margin-top: 16px;
+  text-align: justify;
+}
+
+.contributors {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+@media (min-width: 1080px) {
+
+  .headContainer {
+    width: calc(100% - 40px);
+    margin: 0 auto;
+  }
+
+  .backButton {
+    padding-left: 95px;
+    color: var(--soft-white-100);
+  }
+
+  .contentContainer {
+    width: calc(100% - 40px);
+    margin: 20px auto;
+    display: grid;
+    grid-template-columns: 0.3fr 0.6fr 0.3fr;
+  }
+
+  .videoPlayer {
+    margin: auto;
+    width: calc(100% - 40px);
+    border-radius: 25px;
+  }
+
+  .videoPlayer iframe {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: 25px;
+    margin-bottom: 40px;
+  }
+
+  .videoPlayer p {
+    text-align: justify;
+  }
+
+  .contributors {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 40px 40px 40px 80px;
+  }
+
+  .sharingAndCategories {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    padding-left: 40px;
+    padding-top: 40px;
+    gap: 40px;
+    grid-column: 3 / 3;
+    grid-row: 1 / 1;
+  }
+
+
+}
+
+
diff --git a/src/app/_blocks/HubContentGrid/NavBar/index.tsx b/src/app/_blocks/HubContentGrid/NavBar/index.tsx
@@ -77,7 +77,7 @@ export default function ContentNavBar({
             activeButton === 'CaseStudies' ? 'var(--dark-rock-800)' : 'var(--soft-white-100)'
           }
         />
-      </button>
+      </button>*/}
       <button
         className={`${styles.button} ${styles.talksButton} ${
           activeButton === 'TalksAndRoundtables' ? styles.activeButton : ''
@@ -96,7 +96,7 @@ export default function ContentNavBar({
               : 'var(--soft-white-100)'
           }
         />
-      </button>*/}
+      </button>
     </div>
   )
 }
diff --git a/src/app/_components/Categories/styles.module.css b/src/app/_components/Categories/styles.module.css
@@ -2,8 +2,6 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
-  padding-top: 30px;
-  padding-bottom: 20px;
 }
 
 .categories {

diff --git a/src/app/_components/Share/styles.module.css b/src/app/_components/Share/styles.module.css
@@ -1,6 +1,4 @@
 .container {
-  padding: 20px;
-  margin: 20px auto;
   color: var(--dark-rock-800);
 }