fix: resolve image urls relative to template repository url

m-team-kit · Sep 20, 2023 · d7923c6 · d7923c6
1 parent 1deb37f
commit d7923c6
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 3 deletions.
diff --git a/backend b/backend
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>