feat: add dynamic page and display video paragraph

app/[...slug]/page.tsx

@@ -0,0 +1,42 @@
+import { notFound } from "next/navigation"
+import React from "react"
+
+import BasicPageLayout from "@/components/pages/basicPageLayout/BasicPageLayout"
+import { fetcher } from "@/lib/graphql/fetchers/dpl-cms.fetcher"
+import {
+  GetPageByPathDocument,
+  GetPageByPathQuery,
+  NodeGoPage,
+} from "@/lib/graphql/generated/dpl-cms/graphql"
+
+async function page(props: { params: Promise<{ slug: string[] }> }) {
+  const params = await props.params
+
+  const { slug } = params
+
+  const data = await fetcher<GetPageByPathQuery, { path: string }>(GetPageByPathDocument, {
+    path: slug.join("/"),
+  })()
+
+  const routeType = data.route?.__typename
+
+  if (routeType === "RouteRedirect") {
+    // TODO: implement redirect
+    return
+  }
+
+  if (routeType === "RouteExternal") {
+    // TODO: implement external route redirect
+    return
+  }
+
+  if (!routeType || !data?.route?.entity) {
+    return notFound()
+  }
+
+  const pageData = data.route.entity
+
+  return <BasicPageLayout pageData={pageData as NodeGoPage} />
+}
+
+export default page

app/layout.tsx

@@ -47,7 +47,7 @@ export default function RootLayout({
         <Theme>
           <ReactQueryProvider>
             <Header />
-            <div className="flex h-full min-h-screen-minus-navigation-height w-full flex-col">
+            <div className="flex h-full min-h-screen-minus-navigation-height w-full flex-col py-space-y">
               {children}
             </div>
             <Footer />

app/page.tsx

@@ -1,4 +1,3 @@
-import VideoPlayer from "@/components/videoPlayer/VideoPlayer"
 import goConfig from "@/lib/config/goConfig"
 
 const wellknownUrl = goConfig("service.unilogin.wellknown.url")
@@ -7,8 +6,6 @@ export default async function Home() {
     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center gap-16 p-8 pb-20 sm:p-20">
       <main className="row-start-2 flex flex-col items-center gap-8 sm:items-start">
         <pre>Wellknown url: {wellknownUrl}</pre>
-
-        <VideoPlayer />
       </main>
     </div>
   )

components/pages/basicPageLayout/BasicPageLayout.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+
+import ParagraphVideo from "@/components/paragraphs/ParagraphGoVideo/ParagraphVideo"
+import ParagraphResolver from "@/components/paragraphs/ParagraphResolver"
+import { NodeGoPage, ParagraphUnion } from "@/lib/graphql/generated/dpl-cms/graphql"
+
+function BasicPageLayout({ pageData }: { pageData: NodeGoPage }) {
+  const { paragraphs } = pageData
+
+  return (
+    <div className="gap-y-paragraph-spacing flex flex-col">
+      <ParagraphResolver paragraphs={paragraphs ?? []} />
+    </div>
+  )
+}
+
+export default BasicPageLayout

components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import React, { useEffect } from "react"
+
+import type { ParagraphGoVideo } from "@/lib/graphql/generated/dpl-cms/graphql"
+
+export default function ParagraphGoVideo(paragraphGoVideo: ParagraphGoVideo) {
+  const [mounted, setMounted] = React.useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const { goVideoTitle: title } = paragraphGoVideo
+
+  return (
+    <div className="content-container grid-go gap-paragraph-spacing-inner">
+      <div className="col-span-6 w-full lg:col-span-10 lg:col-start-2">
+        <h2 className="text-center text-typo-heading-2">{title}</h2>
+      </div>
+
+      <div className="col-span-6 lg:col-span-12">
+        {mounted && (
+          <div className="relative aspect-16/9 w-full overflow-hidden rounded-base">
+            <iframe
+              aria-label="Naja Marie Aidt - Oevelser i moerke"
+              className="absolute inset-0 h-full w-full"
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%!important",
+                height: "100%!important",
+              }}
+              src="https://media.videotool.dk/?vn=557_2024111913325696587632242634"
+              allowFullScreen
+              allow="autoplay; fullscreen"></iframe>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

components/paragraphs/ParagraphResolver.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+
+import { ParagraphUnion } from "@/lib/graphql/generated/dpl-cms/graphql"
+
+import ParagraphGoVideo from "./ParagraphGoVideo/ParagraphGoVideo"
+import { ParagraphErrorBoundary } from "./paragraphErrorBoundary/paragraphErrorBoundary"
+
+function ParagraphResolver({ paragraphs }: { paragraphs: ParagraphUnion[] }) {
+  const components = {
+    ParagraphGoVideo,
+  }
+
+  return paragraphs.map((paragraph, index) => {
+    const type = paragraph?.__typename
+    if (!type) {
+      return null
+    }
+
+    const DynamicComponentType = components[type as keyof typeof components] || null
+
+    return (
+      <ParagraphErrorBoundary key={index}>
+        {DynamicComponentType ? <DynamicComponentType key={index} {...paragraph} /> : null}
+      </ParagraphErrorBoundary>
+    )
+  })
+}
+
+export default ParagraphResolver

components/paragraphs/paragraphErrorBoundary/paragraphErrorBoundary.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { ErrorBoundary } from "react-error-boundary"
+
+import { Button } from "../../shared/button/Button"
+
+function ErrorFallback({ resetErrorBoundary }: { resetErrorBoundary: () => void }) {
+  return (
+    <div className="bg-sand flex h-[200px] w-full flex-col items-center justify-center">
+      <p>Noget gik galt ved visning af denne blok - måske den mangler indhold?</p>
+      <Button className="mt-4" onClick={resetErrorBoundary}>
+        Genindlæs
+      </Button>
+    </div>
+  )
+}
+
+function ParagraphErrorBoundary({ children }: { children: React.ReactNode }) {
+  return <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>
+}
+
+export { ParagraphErrorBoundary }

lib/graphql/generated/dpl-cms/graphql.tsx

@@ -1009,7 +1009,7 @@ export type GetPageByPathQueryVariables = Exact<{
 }>;
 
 
-export type GetPageByPathQuery = { __typename?: 'Query', route?: { __typename?: 'RouteExternal' } | { __typename?: 'RouteInternal', entity?: { __typename?: 'NodeArticle' } | { __typename?: 'NodeGoPage', paragraphs?: Array<{ __typename?: 'ParagraphAccordion' } | { __typename?: 'ParagraphBanner' } | { __typename?: 'ParagraphBreadcrumbChildren' } | { __typename?: 'ParagraphCardGridAutomatic' } | { __typename?: 'ParagraphCardGridManual' } | { __typename?: 'ParagraphContentSlider' } | { __typename?: 'ParagraphContentSliderAutomatic' } | { __typename?: 'ParagraphFilteredEventList' } | { __typename: 'ParagraphGoVideo', id: string, goVideoTitle?: string | null, status: boolean, created: { __typename?: 'DateTime', timestamp: unknown }, embedVideo?: { __typename?: 'MediaDocument' } | { __typename?: 'MediaImage' } | { __typename?: 'MediaVideo', id: string, mediaOembedVideo: string, name: string, path: string } | null, langcode: { __typename?: 'Language', name?: string | null } } | { __typename?: 'ParagraphManualEventList' } | { __typename?: 'ParagraphMaterialGridAutomatic' } | { __typename?: 'ParagraphMaterialGridManual' } | { __typename?: 'ParagraphTextBody' } | { __typename?: 'ParagraphVideo' }> | null } | null } | { __typename?: 'RouteRedirect' } | null };
+export type GetPageByPathQuery = { __typename?: 'Query', route?: { __typename: 'RouteExternal' } | { __typename: 'RouteInternal', url: string, entity?: { __typename?: 'NodeArticle' } | { __typename?: 'NodeGoPage', paragraphs?: Array<{ __typename?: 'ParagraphAccordion' } | { __typename?: 'ParagraphBanner' } | { __typename?: 'ParagraphBreadcrumbChildren' } | { __typename?: 'ParagraphCardGridAutomatic' } | { __typename?: 'ParagraphCardGridManual' } | { __typename?: 'ParagraphContentSlider' } | { __typename?: 'ParagraphContentSliderAutomatic' } | { __typename?: 'ParagraphFilteredEventList' } | { __typename: 'ParagraphGoVideo', id: string, goVideoTitle?: string | null, status: boolean, created: { __typename?: 'DateTime', timestamp: unknown }, embedVideo?: { __typename?: 'MediaDocument' } | { __typename?: 'MediaImage' } | { __typename?: 'MediaVideo', id: string, mediaOembedVideo: string, name: string, path: string } | null, langcode: { __typename?: 'Language', name?: string | null } } | { __typename?: 'ParagraphManualEventList' } | { __typename?: 'ParagraphMaterialGridAutomatic' } | { __typename?: 'ParagraphMaterialGridManual' } | { __typename?: 'ParagraphTextBody' } | { __typename?: 'ParagraphVideo' }> | null } | null } | { __typename: 'RouteRedirect' } | null };
 
 
 
@@ -1124,7 +1124,9 @@ useGetDplCmsConfigurationQuery.fetcher = (variables?: GetDplCmsConfigurationQuer
 export const GetPageByPathDocument = `
     query getPageByPath($path: String!) {
   route(path: $path) {
+    __typename
     ... on RouteInternal {
+      url
       entity {
         ... on NodeGoPage {
           paragraphs {

lib/graphql/queries/page.dpl-cms.graphql

@@ -1,6 +1,8 @@
 query getPageByPath($path: String!) {
   route(path: $path) {
+    __typename
     ... on RouteInternal {
+      url
       entity {
         ... on NodeGoPage {
           paragraphs {

package.json

@@ -48,6 +48,7 @@
     "openid-client": "^6.1.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
     "react-parallax-tilt": "^1.7.252",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",

styles/globals.css

@@ -12,8 +12,6 @@
   --grid-gap-3: calc(var(--grid-gap) * 3); /* 36px */
   --grid-gap-x: var(--grid-gap); /* 12px */
 
-  --space-y: 5rem; /* 80px */
-
   /* SIZE OF EACH INDIVIDUAL COLUMN IN THE GRID  */
   --grid-column: calc(
     ((min(var(--page-width), 100vw) - (2 * var(--grid-edge))) - (11 * var(--grid-gap-x))) / 12
@@ -59,7 +57,9 @@
   --aspect-9-16: 9 / 16;
 
   /* SPACING */
-  --block-spacing: 5rem; /* 80px */
+  --paragraph-spacing: 2.5rem; /* 40px */
+  --paragraph-spacing-inner: 2rem; /* 32px */
+  --space-y: 2.5rem; /* 40px */
 
   /* COLORS */
   --black: hsla(0, 0%, 0%, 1);
@@ -220,6 +220,11 @@
     --navigation-height: 5rem; /* 80px */
     --navigation-search-height: 6.25rem; /* 100px */
 
+    /* SPACING */
+    --paragraph-spacing: 5rem; /* 80px */
+    --paragraph-spacing-inner: 4rem; /* 64px */
+    --space-y: 5rem; /* 80px */
+
     /* FONTS */
     --typo-huge-size: 92px;
     --typo-huge-weight: 500;

tailwind.config.ts

@@ -320,6 +320,8 @@ export const extendedTheme = {
       "grid-gap-x": "var(--grid-gap-x)",
       "grid-edge": "var(--grid-edge)",
       "space-y": "var(--space-y)",
+      "paragraph-spacing": "var(--paragraph-spacing)",
+      "paragraph-spacing-inner": "var(--paragraph-spacing-inner)",
     },
     boxShadow: {
       button: "2px 2px 0 0px var(--foreground)",

yarn.lock

@@ -11174,6 +11174,13 @@ react-dom@^19.0.0:
   dependencies:
     scheduler "^0.25.0"
 
+react-error-boundary@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-5.0.0.tgz#6b6c7e075c922afb0283147e5b084efa44e68570"
+  integrity sha512-tnjAxG+IkpLephNcePNA7v6F/QpWLH8He65+DmedchDwg162JZqx4NmbXj0mlAYVVEd81OW7aFhmbsScYfiAFQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"