From 37a6e0926a55e2768f611be5b2bf87fa2d2939a1 Mon Sep 17 00:00:00 2001 From: Rui Sousa <149320958+rccsousa@users.noreply.github.com> Date: Tue, 22 Oct 2024 14:37:41 +0100 Subject: [PATCH] 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) --- package.json | 2 + .../talks-and-roundtables/[slug]/page.tsx | 108 +++++++++++---- .../[slug]/styles.module.css | 127 ++++++++++++++++++ .../_blocks/HubContentGrid/NavBar/index.tsx | 4 +- .../_components/Categories/styles.module.css | 2 - src/app/_components/Share/styles.module.css | 2 - yarn.lock | 43 +++++- 7 files changed, 253 insertions(+), 35 deletions(-) create mode 100644 src/app/(pages)/talks-and-roundtables/[slug]/styles.module.css diff --git a/package.json b/package.json index ce59f50..1d8b524 100644 --- 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 index ded374b..6e4365d 100644 --- 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 (
- {/*Hello, world! - 
{JSON.stringify(content, null, 2)}
*/} + {/* Head Block */} +
+ + + {/* @ts-ignore */} +
{title}
+

+ {/* @ts-ignore */} + {formatDateTime(publishedAt)} + Duration in mins +

+ +
+
+ + {/* Contributors column*/} +
+ + {/* @ts-ignore */} + +
+ + {/* Content column */} +
+ {videoID.service === "youtube" && ( + + )} +
About
+ {/* @ts-ignore */} +

{summary}

+
+ + {/* Share & categories column */} +
+ + {/* @ts-ignore */} + {categories.length > 0 && ( + // @ts-ignore + + )} +
+
+ +
- ) + ); } -export async function generateMetadata({ params: paramsPromise}): Promise { - const { slug } = await paramsPromise +export async function generateMetadata({ params: paramsPromise }): Promise { + 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 new file mode 100644 index 0000000..d4ff117 --- /dev/null +++ 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 index 3e6d35e..7be7e12 100644 --- 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)' } /> - + */} */} + ) } diff --git a/src/app/_components/Categories/styles.module.css b/src/app/_components/Categories/styles.module.css index 7cc5c4e..2c5616d 100644 --- 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 index 3f4ef66..4640c9e 100644 --- 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); } diff --git a/yarn.lock b/yarn.lock index a12b1ac..b721dea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1384,7 +1384,7 @@ dependencies: regenerator-runtime "^0.14.0" -"@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7": +"@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.23.9": version "7.25.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.7.tgz#7ffb53c37a8f247c8c4d335e89cdf16a2e0d0fb6" integrity sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w== @@ -5277,7 +5277,7 @@ debug@4, debug@4.x, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.5: dependencies: ms "^2.1.3" -debug@^2.1.3: +debug@^2.1.3, debug@^2.6.6: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== @@ -6190,7 +6190,7 @@ fast-copy@^3.0.2: resolved "https://registry.yarnpkg.com/fast-copy/-/fast-copy-3.0.2.tgz#59c68f59ccbcac82050ba992e0d5c389097c9d35" integrity sha512-dl0O9Vhju8IrcLndv2eU4ldt1ftXMqqfgN4H1cpmGV7P6jeB9FwpN9a2c8DPGE1Ys88rNUJVYDHq73CGAGOPfQ== -fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: +fast-deep-equal@3.1.3, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== @@ -6466,6 +6466,13 @@ get-tsconfig@^4.7.2, get-tsconfig@^4.7.5: dependencies: resolve-pkg-maps "^1.0.0" +get-video-id@^4.1.7: + version "4.1.7" + resolved "https://registry.yarnpkg.com/get-video-id/-/get-video-id-4.1.7.tgz#71c0b209dc85b808fc1be1c7e2b6e2b4f88a3bd3" + integrity sha512-bYHXe3BTbFbiViuNFyfFnZPnSDVWBu5N06p35LW7dD/ul4O1sdPSs3Brw8U/m5JlQUnkj3tht3luSz0k05vEYg== + dependencies: + "@babel/runtime" "^7.23.9" + github-from-package@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce" @@ -7585,6 +7592,11 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== +load-script@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4" + integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA== + locate-path@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286" @@ -8820,7 +8832,7 @@ promzard@^2.0.0: dependencies: read "^4.0.0" -prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@15.8.1, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -9039,6 +9051,15 @@ react-transition-group@4.4.5, react-transition-group@^4.3.0: loose-envify "^1.4.0" prop-types "^15.6.2" +react-youtube@^10.1.0: + version "10.1.0" + resolved "https://registry.yarnpkg.com/react-youtube/-/react-youtube-10.1.0.tgz#7e5670c764f12eb408166e8eb438d788dc64e8b5" + integrity sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg== + dependencies: + fast-deep-equal "3.1.3" + prop-types "15.8.1" + youtube-player "5.5.2" + react@18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" @@ -9527,6 +9548,11 @@ simple-wcswidth@^1.0.1: resolved "https://registry.yarnpkg.com/simple-wcswidth/-/simple-wcswidth-1.0.1.tgz#8ab18ac0ae342f9d9b629604e54d2aa1ecb018b2" integrity sha512-xMO/8eNREtaROt7tJvWJqHBDTMFN4eiQ5I4JRMuilwfnFcV5W9u7RUkueNkdw0jPqGMX36iCywelS5yilTuOxg== +sister@^3.0.0: + version "3.0.2" + resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4" + integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA== + sisteransi@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" @@ -10655,3 +10681,12 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +youtube-player@5.5.2: + version "5.5.2" + resolved "https://registry.yarnpkg.com/youtube-player/-/youtube-player-5.5.2.tgz#052b86b1eabe21ff331095ffffeae285fa7f7cb5" + integrity sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ== + dependencies: + debug "^2.6.6" + load-script "^1.0.0" + sister "^3.0.0"