moved to static export

Evi-2003 · Nov 2, 2024 · 8e1b3b6 · 8e1b3b6
1 parent 73c0b34
commit 8e1b3b6
Show file tree

Hide file tree

Showing 25 changed files with 1,121 additions and 96 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,5 @@
 yarn-debug.log*
 yarn-error.log*
 .next
+out
+/out
diff --git a/app/components/CloudflareImage.tsx b/app/components/CloudflareImage.tsx
@@ -14,15 +14,15 @@ const CloudflareImage = ({
   width: number;
   height: number;
   className?: string;
-  title: string;
+  title?: string;
 }) => {
   if (!imageId) {
     return <div className={`bg-gray-200 ${className}`} style={{ width, height }} />;
   }
 
   const imageSrc = `https://imagedelivery.net/MIBm4UuP4Jw-6-_5GPO_5w/${imageId}/public`;
 
-  return <Image src={imageSrc} quality={80} width={width} height={height} className={className} alt={title} />;
+  return <Image src={imageSrc} quality={80} width={width} height={height} className={className} alt={title ?? ''} />;
 };
 
 export default CloudflareImage;
diff --git a/app/components/GalleryImage.tsx b/app/components/GalleryImage.tsx
@@ -2,25 +2,36 @@
 
 import { Fancybox } from '@fancyapps/ui';
 import { Image } from 'react-datocms';
-import { IResponsiveImage } from '../[lang]/gallery/page';
+import { IResponsiveImage } from '../nl-NL/gallery/page';
+import CloudflareImage from './CloudflareImage';
 
 const GalleryImage = ({
   responsiveImage,
+  imageId,
   index,
 }: {
-  responsiveImage: IResponsiveImage['responsiveImage'];
+  responsiveImage?: IResponsiveImage['responsiveImage'];
+  imageId?: string;
   index: number;
 }) => {
   Fancybox.bind('[data-fancybox="gallery"]', {});
 
   return (
     <a
       data-fancybox="gallery"
-      data-src={responsiveImage.webpSrcSet}
+      data-src={
+        responsiveImage
+          ? responsiveImage.webpSrcSet
+          : `https://imagedelivery.net/MIBm4UuP4Jw-6-_5GPO_5w/${imageId}/public`
+      }
       className={`cursor-pointer overflow-hidden rounded-xl ${index % 2 === 0 ? 'row-span-3' : 'row-span-1'}
         ${index % 2 !== 0 ? 'col-span-1' : 'col-span-1'}`}
     >
-      <Image data={responsiveImage} pictureClassName="object-cover" className="h-full w-full" />
+      {responsiveImage ? (
+        <Image objectFit="cover" data={responsiveImage} pictureClassName="object-cover" className="h-full w-full" />
+      ) : (
+        <CloudflareImage width={1500} height={1500} className="h-full object-cover" imageId={imageId} />
+      )}
     </a>
   );
 };

diff --git a/app/[lang]/about-me/page.tsx → app/en-US/about-me/page.tsx b/app/[lang]/about-me/page.tsx → app/en-US/about-me/page.tsx
@@ -5,8 +5,6 @@ import twofeet from '@/app/images/twofeet.jpeg';
 import checkLanguage from '@/app/utils/checkLanguage';
 import Image from 'next/image';
 
-export const revalidate = 86400;
-
 async function getSeoData(lng: string) {
   const { data } = await fetch(`${process.env.DATO_CMS_URL}`, {
     method: 'POST',

diff --git a/app/[lang]/gallery/page.tsx → app/en-US/gallery/page.tsx b/app/[lang]/gallery/page.tsx → app/en-US/gallery/page.tsx
@@ -3,8 +3,6 @@ import '@fancyapps/ui/dist/fancybox/fancybox.css';
 import GalleryImage from '@/app/components/GalleryImage';
 import checkLanguage from '@/app/utils/checkLanguage';
 
-export const revalidate = 86400;
-
 async function getGalleryImages(lng: string) {
   const { data } = await fetch(`${process.env.DATO_CMS_URL}`, {
     method: 'POST',
@@ -16,7 +14,10 @@ async function getGalleryImages(lng: string) {
       query: `
         query getPictures {
           allAfbeeldings (locale: ${lng}) {
-            fotorolletje 
+            fotorolletje
+    cloudflareAfbeeldingen {
+      imageId
+    }
             afbeeldingen {
               responsiveImage {
                 width
@@ -121,21 +122,44 @@ const Page = async (props: { params: Promise<{ lang: string }> }) => {
         </span>
       </div>
 
-      {allAfbeeldings.map((collection: { fotorolletje: string; afbeeldingen: IResponsiveImage[] }) => (
-        <div
-          key={`image-collection-${collection.fotorolletje}`}
-          className="grid min-h-screen grid-cols-1 gap-2 overflow-hidden lg:grid-cols-2 xl:grid-cols-3"
-        >
-          <span
-            className="col-span-full row-start-1 w-fit self-center rounded-full bg-stone-300 px-3 py-1 text-left
-              text-black opacity-80 dark:bg-stone-700 dark:text-white dark:opacity-100"
-          >{`${lng === 'en' ? 'Used film:' : 'Gebruikte fotorol:'} ${collection.fotorolletje}`}</span>
-
-          {collection.afbeeldingen.map((image: IResponsiveImage, index: number) => (
-            <GalleryImage responsiveImage={image.responsiveImage} key={`gallery-image-${index}`} index={index} />
-          ))}
-        </div>
-      ))}
+      {allAfbeeldings.map(
+        (
+          collection: {
+            fotorolletje: string;
+            afbeeldingen: IResponsiveImage[];
+            cloudflareAfbeeldingen: {
+              imageId: string;
+            }[];
+          },
+          index: number,
+        ) => (
+          <div
+            key={`image-collection-${collection.fotorolletje}`}
+            className="grid min-h-screen grid-cols-1 gap-2 overflow-hidden lg:grid-cols-2 xl:grid-cols-3"
+          >
+            <span
+              className={`${index > 0 && 'my-2'} col-span-full row-start-1 w-fit self-center rounded-full bg-stone-300
+              px-3 py-1 text-left text-black opacity-80 dark:bg-stone-700 dark:text-white dark:opacity-100`}
+            >{`${lng === 'en' ? 'Used film:' : 'Gebruikte fotorol:'} ${collection.fotorolletje}`}</span>
+
+            {collection.cloudflareAfbeeldingen.map((image: { imageId: string }, indexCloudflare: number) => (
+              <GalleryImage
+                imageId={image.imageId}
+                key={`gallery-image-cloudflare-${index - indexCloudflare}`}
+                index={index}
+              />
+            ))}
+
+            {collection.afbeeldingen.map((image: IResponsiveImage, indexDatoCMS: number) => (
+              <GalleryImage
+                responsiveImage={image.responsiveImage}
+                key={`gallery-image-${indexDatoCMS}`}
+                index={indexDatoCMS}
+              />
+            ))}
+          </div>
+        ),
+      )}
     </main>
   );
 };

diff --git a/app/[lang]/layout.tsx → app/en-US/layout.tsx b/app/[lang]/layout.tsx → app/en-US/layout.tsx
@@ -4,16 +4,11 @@ import NavProvider from '@/app/components/providers/NavProvider';
 import { GeistSans } from 'geist/font/sans';
 import PlausibleProvider from 'next-plausible';
 
-export const revalidate = 86400;
-
 export default async function RootLayout(
   props: Readonly<{
     children: React.ReactNode;
-    params: { lang: string };
   }>,
 ) {
-  const params = await props.params;
-
   const { children } = props;
 
   return (
@@ -30,7 +25,7 @@ export default async function RootLayout(
             className={`flex min-h-screen flex-col items-center bg-gradient-to-b from-white to-gray-100 pb-5
               dark:from-neutral-900 dark:to-neutral-950 ${GeistSans.className}`}
           >
-            <Header lng={params.lang} />
+            <Header lng={'en-US'} />
             {children}
           </body>
         </html>

diff --git a/app/[lang]/page.tsx → app/en-US/page.tsx b/app/[lang]/page.tsx → app/en-US/page.tsx
@@ -1,8 +1,6 @@
 import checkLanguage from '@/app/utils/checkLanguage';
 import { Image as ResponsiveImage, StructuredText } from 'react-datocms';
 
-export const revalidate = 86400;
-
 async function getSeoData(lng: string) {
   if (!process.env.DATO_CMS_URL) {
     throw new Error('DatoCMS URL is not defined in environment variables.');

diff --git a/app/[lang]/projects/[slug]/page.tsx → app/en-US/projects/[slug]/page.tsx b/app/[lang]/projects/[slug]/page.tsx → app/en-US/projects/[slug]/page.tsx
@@ -2,8 +2,6 @@ import checkLanguage from '@/app/utils/checkLanguage';
 import Link from 'next/link';
 import { StructuredText } from 'react-datocms';
 
-export const revalidate = 86400;
-
 export async function generateStaticParams() {
   const { data } = await fetch(`${process.env.DATO_CMS_URL}`, {
     method: 'POST',

diff --git a/app/[lang]/projects/page.tsx → app/en-US/projects/page.tsx b/app/[lang]/projects/page.tsx → app/en-US/projects/page.tsx
@@ -3,8 +3,6 @@ import checkLanguage from '@/app/utils/checkLanguage';
 import Link from 'next/link';
 import { Image as ResponsiveImage } from 'react-datocms';
 
-export const revalidate = 86400;
-
 async function getSeoData(lng: string) {
   if (!process.env.DATO_CMS_URL) {
     throw new Error('DatoCMS URL is not defined in environment variables.');

diff --git a/app/[lang]/work-experience/page.tsx → app/en-US/work-experience/page.tsx b/app/[lang]/work-experience/page.tsx → app/en-US/work-experience/page.tsx
@@ -1,8 +1,6 @@
 import checkLanguage from '@/app/utils/checkLanguage';
 import React from 'react';
 
-export const revalidate = 86400;
-
 async function getSeoData(lng: string) {
   const { data } = await fetch(`${process.env.DATO_CMS_URL}`, {
     method: 'POST',
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,3 +11,5 @@ @@
     yarn-debug.log*
     yarn-error.log*
     .next
+    out
+    /out