fix: resolve image urls relative to template repository url

backend @ f180f73e

-Subproject commit a52272528f99e0a13baa6155bf826b0ae4b153a4
+Subproject commit f180f73e7fd172869ea309a68b9792389872c20d

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}`)
 

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

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
 

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>

frontend/lib/resolveImage.ts

+// 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;

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>