From d7923c65e98c92a33f787ee86de687a4365e241e Mon Sep 17 00:00:00 2001
From: Christophe <christophe.misc+git@protonmail.ch>
Date: Wed, 20 Sep 2023 19:05:33 +0200
Subject: [PATCH] fix: resolve image urls relative to template repository url
---
backend | 2 +-
docker-compose.base.yaml | 1 +
docker-compose.prod.yaml | 1 +
frontend/Dockerfile | 2 ++
frontend/components/templates/Template.tsx | 7 ++++++-
frontend/lib/resolveImage.ts | 9 +++++++++
frontend/pages/template/[id].tsx | 6 +++++-
7 files changed, 25 insertions(+), 3 deletions(-)
create mode 100644 frontend/lib/resolveImage.ts
diff --git a/backend b/backend
index a522725..f180f73 160000
--- a/backend
+++ b/backend
@@ -1 +1 @@
-Subproject commit a52272528f99e0a13baa6155bf826b0ae4b153a4
+Subproject commit f180f73e7fd172869ea309a68b9792389872c20d
diff --git a/docker-compose.base.yaml b/docker-compose.base.yaml
index 1cd554b..df60440 100644
--- a/docker-compose.base.yaml
+++ b/docker-compose.base.yaml
@@ -13,6 +13,7 @@ services:
NEXT_PUBLIC_OAUTH_AUTHORITY: ${OAUTH_AUTHORITY}
NEXT_PUBLIC_OIDC_REDIRECT_HOST: ${FRONTEND_REDIRECT_HOST}
NEXT_PUBLIC_OIDC_CLIENT_ID: ${FRONTEND_OIDC_CLIENT_ID}
+ NEXT_PUBLIC_TEMPLATE_REPOSITORY: ${REPOSITORY_URL}
labels:
traefik.http.routers.webapp.rule: Host(`${DOMAIN}`)
diff --git a/docker-compose.prod.yaml b/docker-compose.prod.yaml
index dec866b..9cd3737 100644
--- a/docker-compose.prod.yaml
+++ b/docker-compose.prod.yaml
@@ -7,6 +7,7 @@ services:
OAUTH_AUTHORITY: ${OAUTH_AUTHORITY}
OIDC_REDIRECT_HOST: ${FRONTEND_REDIRECT_HOST}
OIDC_CLIENT_ID: ${FRONTEND_OIDC_CLIENT_ID}
+ REPOSITORY_URL: ${REPOSITORY_URL}
labels:
traefik.http.routers.webapp.tls: true
traefik.http.routers.webapp.tls.certResolver: letsEncrypt
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 29d78da..563ceb4 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -36,6 +36,8 @@ ARG OIDC_REDIRECT_HOST
ENV FRONTEND_REDIRECT_HOST=${OIDC_REDIRECT_HOST}
ARG OIDC_CLIENT_ID
ENV FRONTEND_OIDC_CLIENT_ID=${OIDC_CLIENT_ID}
+ARG REPOSITORY_URL
+ENV NEXT_PUBLIC_TEMPLATE_REPOSITORY=${REPOSITORY_URL}
RUN yarn build
diff --git a/frontend/components/templates/Template.tsx b/frontend/components/templates/Template.tsx
index e07f068..3cc7e61 100644
--- a/frontend/components/templates/Template.tsx
+++ b/frontend/components/templates/Template.tsx
@@ -5,6 +5,7 @@ import { Template as TemplateDto } from 'lib/client/models/template';
import Link from 'next/link';
import Badge from 'components/Badge';
import Rating from 'components/Rating';
+import resolveImage from 'lib/resolveImage';
type TemplateProps = {
template: TemplateDto;
@@ -30,7 +31,11 @@ const Template: FC<TemplateProps> = ({ template }) => {
</div>
{template.picture && (
<div className="flex-grow-0 flex justify-center items-center">
- <img src={template.picture} alt="" className="max-w-[100px]" />
+ <img
+ src={resolveImage(template.picture)}
+ alt=""
+ className="max-w-[100px]"
+ />
</div>
)}
</div>
diff --git a/frontend/lib/resolveImage.ts b/frontend/lib/resolveImage.ts
new file mode 100644
index 0000000..1001bd5
--- /dev/null
+++ b/frontend/lib/resolveImage.ts
@@ -0,0 +1,9 @@
+// TODO: only works with github repos, maybe gitlab
+const resolveImage = (relativeUrl: string) => {
+ return `${
+ process.env['NEXT_PUBLIC_TEMPLATE_REPOSITORY']?.replace('.git', '') ??
+ 'https://github.com/m-team-kit/templates-hub.git'
+ }/raw/main/${relativeUrl}`;
+};
+
+export default resolveImage;
diff --git a/frontend/pages/template/[id].tsx b/frontend/pages/template/[id].tsx
index 0907ec0..d0aa4c4 100644
--- a/frontend/pages/template/[id].tsx
+++ b/frontend/pages/template/[id].tsx
@@ -13,6 +13,7 @@ import TemplateForm from 'components/TemplateForm';
import Rating from 'components/Rating';
import { Code2 } from 'lucide-react';
import ErrorBox from 'components/ErrorBox';
+import resolveImage from 'lib/resolveImage';
// TODO: SSR?
const Template: NextPage = () => {
@@ -89,7 +90,10 @@ const Template: NextPage = () => {
</div>
<div className="flex-grow-0">
{template.data.data.picture && (
- <img src={template.data.data.picture} alt="template picture" />
+ <img
+ src={resolveImage(template.data.data.picture)}
+ alt="template picture"
+ />
)}
</div>
</div>
--
GitLab