make article body function a react component

Refuge-Worldwide · Apr 17, 2024 · 4d3c0bc · 4d3c0bc
1 parent ad924ab
commit 4d3c0bc
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/lib/rich-text.tsx b/lib/rich-text.tsx
@@ -5,6 +5,7 @@ import { Asset, Entry, Content } from "../types/shared";
 import Link from "next/link";
 import { ArticleShowPreview } from "../components/showPreview";
 import Pill from "../components/pill";
+import { useEffect, useState } from "react";
 interface EmbeddedAssetBlock extends Block {
   data: {
     target: {
@@ -21,7 +22,15 @@ const getAssetById = (id: string, assets: Asset[]) =>
 const getEntryById = (id: string, assets: Entry[]) =>
   assets.filter((asset) => asset.sys.id === id).pop();
 
-export function renderRichTextWithImages(content: Content) {
+export function RenderRichTextWithImages(content: Content) {
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    const scriptTag = document.createElement("script");
+    scriptTag.src = "https://tally.so/widgets/embed.js";
+    scriptTag.addEventListener("load", () => setLoaded(true));
+    document.body.appendChild(scriptTag);
+  }, []);
+
   if (content.links) {
     const blockAssets = content.links.assets.block;
     const blockEntries = content.links?.entries?.block;
@@ -58,11 +67,10 @@ export function renderRichTextWithImages(content: Content) {
             return (
               <div className="max-w-[750px] mx-auto">
                 <iframe
-                  title="Application form"
-                  src={uri}
+                  data-tally-src={uri}
                   width="100%"
-                  height="1650"
-                  loading="lazy"
+                  height="auto"
+                  title="Application form"
                 ></iframe>
               </div>
             );

diff --git a/pages/workshops/[slug].tsx b/pages/workshops/[slug].tsx
@@ -4,7 +4,7 @@ import Prose from "../../components/Prose";
 import WorkshopMeta from "../../components/seo/workshop";
 import { getWorkshopPageSingle } from "../../lib/contentful/pages/workshops";
 import { getWorkshopPathsToPreRender } from "../../lib/contentful/paths";
-import { renderRichTextWithImages } from "../../lib/rich-text";
+import { RenderRichTextWithImages } from "../../lib/rich-text";
 import SinglePage from "../../views/singlePage";
 import Script from "next/script";
 
@@ -28,7 +28,7 @@ export default function Workshop({
           </h1>
 
           <div>
-            <Prose>{renderRichTextWithImages(workshop.content)}</Prose>
+            <Prose>{RenderRichTextWithImages(workshop.content)}</Prose>
           </div>
           <div className="mt-16 max-w-[750px] mx-auto">
             <iframe

diff --git a/views/news/articleBody.tsx b/views/news/articleBody.tsx
@@ -3,7 +3,7 @@ import { Fragment } from "react";
 import Date from "../../components/date";
 import Pill from "../../components/pill";
 import Prose from "../../components/Prose";
-import { renderRichTextWithImages } from "../../lib/rich-text";
+import { RenderRichTextWithImages } from "../../lib/rich-text";
 import { ArticleInterface } from "../../types/shared";
 import Link from "next/link";
 import { Arrow } from "../../icons/arrow";
@@ -64,7 +64,7 @@ export default function ArticleBody({
           <div className="h-6" />
 
           <Prose>
-            {renderRichTextWithImages(content)}{" "}
+            {RenderRichTextWithImages(content)}{" "}
             {title.includes("ICYMI") && (
               <div className="text-center mt-32">
                 <Link