Skip to content

Commit

Permalink
feat(vth): add image url support
Browse files Browse the repository at this point in the history
  • Loading branch information
bddjong committed Oct 4, 2023
1 parent f9caec5 commit ef9a1fc
Show file tree
Hide file tree
Showing 6 changed files with 47 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,16 @@
"relation": "manyToMany",
"target": "api::thema.thema",
"mappedBy": "child_contents"
},
"previewImage": {
"allowedTypes": [
"images",
"files",
"videos",
"audios"
],
"type": "media",
"multiple": false
}
}
}
10 changes: 10 additions & 0 deletions apps/vth-dashboard/src/api/thema/content-types/thema/schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,16 @@
},
"description": {
"type": "text"
},
"previewImage": {
"allowedTypes": [
"images",
"files",
"videos",
"audios"
],
"type": "media",
"multiple": false
}
}
}
11 changes: 6 additions & 5 deletions apps/vth-frontend/src/app/[locale]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { createStrapiURL } from '@frameless/pdc-frontend/src/util/createStrapiURL';
import { fetchData } from '@frameless/pdc-frontend/src/util/fetchData';
import { createStrapiURL } from '@frameless/vth-frontend/src/util/createStrapiURL';
import { fetchData } from '@frameless/vth-frontend/src/util/fetchData';
import { Heading1 } from '@utrecht/component-library-react';
import { Metadata } from 'next';
import React from 'react';
import { Card } from '@/components/Card';
import { Grid } from '@/components/Grid';
import { Markdown } from '@/components/Markdown';
import { GET_HOME_PAGE } from '@/query';
import { buildImgURL } from '@/util/buildImgURL';
import { useTranslation } from '../i18n';

export interface Fields {
Expand Down Expand Up @@ -43,19 +44,19 @@ const Home = async ({ params: { locale } }: { params: any }) => {
<Grid className={'utrecht-grid--content-padding'}>
<div className={'utrecht-grid__two-third'}>
<Heading1>{title}</Heading1>
<Markdown>{content}</Markdown>
<Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{content}</Markdown>
</div>
<Grid className={'utrecht-grid__full-width'}>
{themas &&
themas.map((thema: any) => {
const { title, description, slug } = thema.attributes;
const { title, description, slug, previewImage } = thema.attributes;
return (
<Card
className={'utrecht-grid__one-third'}
key={`thema-${slug}`}
title={title}
description={description}
image={{ url: '', alt: '' }}
image={{ url: previewImage && buildImgURL(previewImage), alt: '' }}
link={{ href: `/themas/${slug}` }}
/>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { createStrapiURL } from '@frameless/pdc-frontend/src/util/createStrapiURL';
import { fetchData } from '@frameless/pdc-frontend/src/util/fetchData';
import { createStrapiURL } from '@frameless/vth-frontend/src/util/createStrapiURL';
import { fetchData } from '@frameless/vth-frontend/src/util/fetchData';
import {
Heading1,
Heading2,
Expand Down
13 changes: 7 additions & 6 deletions apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { createStrapiURL } from '@frameless/pdc-frontend/src/util/createStrapiURL';
import { fetchData } from '@frameless/pdc-frontend/src/util/fetchData';
import { createStrapiURL } from '@frameless/vth-frontend/src/util/createStrapiURL';
import { fetchData } from '@frameless/vth-frontend/src/util/fetchData';
import { Heading1 } from '@utrecht/component-library-react';
import { Metadata } from 'next';
import React from 'react';
Expand All @@ -8,6 +8,7 @@ import { Card } from '@/components/Card';
import { Grid } from '@/components/Grid';
import { Markdown } from '@/components/Markdown';
import { GET_THEMA_BY_SLUG } from '@/query';
import {buildImgURL} from "@/util/buildImgURL";

type Params = {
params: {
Expand Down Expand Up @@ -43,11 +44,11 @@ const Thema = async ({ params: { locale, themaSlug } }: Params) => {
<Grid className={'utrecht-grid__full-width'}>
{child_themas.data[0] &&
child_themas.data.map((thema: any) => {
const { title, description, slug: childSlug } = thema.attributes;
const { title, description, slug: childSlug, previewImage } = thema.attributes;
return (
<Card
className={'utrecht-grid__one-third'}
image={{ url: '', alt: '' }}
image={{ url: previewImage && buildImgURL(previewImage), alt: '' }}
title={title}
description={description}
key={`thema-${childSlug}`}
Expand All @@ -58,14 +59,14 @@ const Thema = async ({ params: { locale, themaSlug } }: Params) => {
{child_contents.data[0] &&
child_contents.data &&
child_contents.data.map((content: any) => {
const { title, description, slug: contentSlug } = content.attributes;
const { title, description, slug: contentSlug, previewImage } = content.attributes;
return (
<Card
className={'utrecht-grid__one-third'}
title={title}
description={description}
key={`thema-${contentSlug}`}
image={{ url: '', alt: '' }}
image={{ url: previewImage && buildImgURL(previewImage), alt: '' }}
link={{ href: `/themas/${themaSlug}/content/${contentSlug}` }}
/>
);
Expand Down
12 changes: 12 additions & 0 deletions apps/vth-frontend/src/util/buildImgURL.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export const buildImgURL = (src: string) => {
if (!process.env.STRAPI_PUBLIC_URL) {
throw new Error('`STRAPI_PUBLIC_URL` is required to construct the image URL in the Markdown component.');
}
const url = new URL(process.env.STRAPI_PUBLIC_URL);
// if we need to support a different image-provider-upload, we can use the following approach
// just rename env variable
// if (process.env.DEPLOY_TO_VERCEL && Boolean(process.env.DEPLOY_TO_VERCEL)) {
// return src;
// }
return `${url?.origin}${src}`;
};

0 comments on commit ef9a1fc

Please sign in to comment.