feat: allow images in the accordion module

Author: ben-basten

app/components/modules/Accordion.vue

@@ -31,7 +31,10 @@
             class="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp"
           >
             <div class="pb-4 type-body">
-              <RichTextRenderer :json="item.copy?.json" />
+              <RichTextRenderer
+                :json="item.copy?.json"
+                :assets="getEmbeddedAssets(item.copy?.links)"
+              />
             </div>
           </AccordionContent>
         </AccordionItem>

app/components/modules/CenterText.vue

@@ -12,17 +12,12 @@
 </template>
 
 <script setup lang="ts">
-import type { EmbeddedAsset } from "~/components/render/RichTextRenderer.vue";
 import type { ModuleProps } from "~/types/module";
 import type { CenterTextFragment } from "~~/shared/types/graphql";
 
 const { data } = defineProps<ModuleProps<CenterTextFragment>>();
 
-const embeddedAssets = computed((): EmbeddedAsset[] => {
-  const blockAssets = data?.text?.links?.assets?.block;
-  if (!blockAssets?.length) return [];
-  return blockAssets.filter(
-    (asset): asset is EmbeddedAsset => asset !== null && asset.sys?.id != null,
-  );
+const embeddedAssets = computed(() => {
+  return getEmbeddedAssets(data?.text?.links);
 });
 </script>

app/utils/helpers.ts

@@ -1,3 +1,4 @@
+import type { EmbeddedAsset } from "~/components/render/RichTextRenderer.vue";
 import type { Pagination } from "~~/shared/types/Pagination";
 
 export const ariaCurrent = (route: string, currentRoute: string) => {
@@ -36,3 +37,12 @@ export const formatRelationshipType = (type: string) => {
       return type;
   }
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getEmbeddedAssets = (links: any): EmbeddedAsset[] => {
+  const blockAssets = (links?.assets?.block ?? []) as (EmbeddedAsset | null)[];
+  if (!blockAssets?.length) return [];
+  return blockAssets.filter(
+    (asset): asset is EmbeddedAsset => asset !== null && asset.sys?.id != null,
+  );
+};

server/graphql/fragments/title-copy.fragment.ts

@@ -5,6 +5,16 @@ export const TITLE_COPY_FRAGMENT = gql`
     title
     copy {
       json
+      links {
+        assets {
+          block {
+            sys {
+              id
+            }
+            ...Image
+          }
+        }
+      }
     }
   }
 `;