Merge pull request #130 from nr2f1/yt-from-rich-media

YouTube videos from Contenful rich text type

package.json

@@ -20,6 +20,7 @@
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@commitlint/types": "^19.5.0",
+    "@contentful/rich-text-types": "^17.0.0",
     "@graphql-codegen/cli": "^5.0.3",
     "@graphql-codegen/near-operation-file-preset": "^3.0.0",
     "@graphql-codegen/typescript": "^4.1.1",

website/src/app/[lang]/blog/[slug]/page.tsx

@@ -12,6 +12,7 @@ import {
 } from '@graphql/queries/posts/index.generated';
 import type { BlogPagePropsWithLocale } from '@shared/types/page-with-locale-params';
 import { getIntlDateStrings } from '@shared/utils/intl-date';
+import { renderNode } from '@shared/utils/rich-text';
 import type { NextPage } from 'next';
 
 const { query } = getClient();
@@ -65,7 +66,7 @@ const Page: NextPage<BlogPagePropsWithLocale> = async ({ params }) => {
         <p>
           Published: <time dateTime={dateTime}>{publishedString}</time>
         </p>
-        {documentToReactComponents(post?.body?.json)}
+        {documentToReactComponents(post?.body?.json, { renderNode })}
       </div>
     </article>
   );

website/src/shared/utils/rich-text.tsx

@@ -1,3 +1,6 @@
+import type { RenderNode } from '@contentful/rich-text-react-renderer';
+import { INLINES } from '@contentful/rich-text-types';
+
 // From https://github.com/contentful/rich-text/tree/master/packages/rich-text-react-renderer
 // Create <br> tag for new line in text
 export const renderText = (text: string) => {
@@ -10,3 +13,34 @@ export const renderText = (text: string) => {
       );
     }, []);
 };
+
+// From https://miguelcrespo.co/posts/rendering-youtube-videos-using-rich-text-contentful/
+// Create an iframe when a hyperlink is a youtube video
+export const renderNode: RenderNode = {
+  // If the node is a link
+  [INLINES.HYPERLINK]: (node) => {
+    console.log({ node });
+    // Only process youtube links
+    if (node.data.uri.includes('youtube.com')) {
+      // Extract videoId from the URL
+      const match =
+        /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/.exec(
+          node.data.uri,
+        );
+      const videoId = match && match[7].length === 11 ? match[7] : null;
+      return (
+        videoId && (
+          <section className="video-container">
+            <iframe
+              className="video"
+              title={`https://youtube.com/embed/${videoId}`}
+              src={`https://youtube.com/embed/${videoId}`}
+              allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            />
+          </section>
+        )
+      );
+    }
+  },
+};

website/src/styles/_global.scss

@@ -84,3 +84,17 @@ input {
     color: var(--foreground-disabled);
   }
 }
+
+.video-container {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%;
+}
+.video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}