Temporarly disable astro-assets

astro.config.mjs

@@ -1,4 +1,4 @@
-import { defineConfig, sharpImageService } from 'astro/config';
+import { defineConfig } from 'astro/config';
 
 import solidJs from "@astrojs/solid-js";
 import prefetch from "@astrojs/prefetch";
@@ -25,12 +25,12 @@ export default defineConfig({
     },
   }), compressor()],
   experimental: {
-    assets: true,
-    viewTransitions: true
-  },
-  image: {
-    service: sharpImageService(),
+    //assets: true,
+    //viewTransitions: true
   },
+  //image: {
+  //  service: sharpImageService(),
+  //},
   output: "server",
   site: "https://lindnerit.io/",
 });

src/components/BlogCard.astro

@@ -25,7 +25,7 @@ if (asset.fields.file && contentfulUrl) {
     imageUrl = "https://via.placeholder.com/300x200";
   } else {
     const uniqueId = parts[3];
-    imageUrl = `/cms-assets/${asset.sys.id}/${uniqueId}/${asset.fields.file.fileName}?format=webp&width=300&height=200`;
+    imageUrl = `/cms/${asset.sys.id}/${uniqueId}/${asset.fields.file.fileName}?format=webp&width=300&height=200`;
   }
 } else {
   imageUrl = "https://via.placeholder.com/300x200";

src/components/Header.astro

@@ -11,11 +11,7 @@ const currentLanguage = language === "de" ? "de" : "en";
 const t = useTranslations(currentLanguage);
 ---
 
-<PageHeader
-  language={language as string}
-  transition:name="header"
-  transition:animate="morph"
->
+<PageHeader language={language as string}>
   <img
     slot="branding"
     width="119"

src/components/Hero.astro

@@ -1,14 +1,17 @@
 ---
-import { getImage } from "astro:assets";
-import hero from "../assets/hero.webp";
+//import { getImage } from "astro:assets";
+//import hero from "../assets/hero.webp";
 import { Button } from "./Button/Button";
 import { useTranslations } from "../i18n";
+
+// 06.08.2023 | disable assets for now
+/*
 const optimizedHero = await getImage({
   src: hero,
   format: "webp",
   quality: 80,
 });
-
+*/
 const { language } = Astro.params;
 const currentLanguage = language === "de" ? "de" : "en";
 const t = useTranslations(currentLanguage);
@@ -32,10 +35,7 @@ const t = useTranslations(currentLanguage);
     gap: 0.3rem;
   }
 </style>
-<div
-  class="lindner-hero"
-  style={`background-image: url(${optimizedHero.src});`}
->
+<div class="lindner-hero" style={`background-image: url('/hero.webp');`}>
   <h1>{t("index.hero.title")}</h1>
   <p>{t("index.hero.description")}</p>
 

src/env.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="astro/client-image" />
+/// <reference types="astro/client" />
 interface ImportMetaEnv {
     readonly CONTENTFUL_SPACE_ID: string;
     readonly CONTENTFUL_DELIVERY_TOKEN: string;

src/pages/[language]/about-us.astro

@@ -3,8 +3,8 @@ import Footer from "../../components/Footer.astro";
 import Header from "../../components/Header.astro";
 import Heading from "../../components/Heading.astro";
 import BaseLayout from "../../layouts/BaseLayout.astro";
-import lindner from "../../assets/lindner.webp";
-import { Image } from "astro:assets";
+//import lindner from "../../assets/lindner.webp";
+//import { Image } from "astro:assets";
 import { Button } from "../../components/Button/Button";
 import HookSection from "../../components/HookSection.astro";
 import { useTranslations } from "../../i18n";
@@ -88,11 +88,21 @@ const meta = metaBuilder.create();
         {t("aboutus.content.title")}
       </Heading>
       <section id="aboutus">
-        <Image
+        {
+          /*<Image
           class="aboutus-image"
           height="480"
           src={lindner}
           alt="Avatar of Robin Lindner"
+        />*/
+        }
+        <img
+          src="/lindner.webp"
+          height="480"
+          width="320"
+          decoding="async"
+          alt="Avatar of Robin Lindner"
+          class="aboutus-image"
         />
         <div>
           <h2>{t("aboutus.content.headline")}</h2>

src/pages/[language]/index.astro

@@ -8,8 +8,11 @@ import BlogSection from "../../components/BlogSection.astro";
 import HookSection from "../../components/HookSection.astro";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
-import { Image } from "astro:assets";
-import aboutUsImage from "../../assets/communication.webp";
+//import { Image } from "astro:assets";
+
+// 06.08.2023 | disable assets for now
+// import aboutUsImage from "../../assets/communication.webp";
+
 import Footer from "../../components/Footer.astro";
 import { useTranslations } from "../../i18n";
 import { MetaBuilder } from "../../meta";
@@ -113,7 +116,16 @@ const meta = metaBuilder.create();
           </Button></a
         >
       </div>
-      <Image class="about-us-image" src={aboutUsImage} alt="About us" />
+      {/*<Image class="about-us-image" src={aboutUsImage} alt="About us" />*/}
+      <img
+        class="about-us-image"
+        src="/communication.webp"
+        alt="About us"
+        width="3284"
+        height="2916"
+        loading="lazy"
+        decoding="async"
+      />
     </section>
     <section id="your-partner">
       <Heading>

src/pages/[language]/web-design/index.astro

@@ -3,8 +3,9 @@ import Footer from "../../../components/Footer.astro";
 import Header from "../../../components/Header.astro";
 import Heading from "../../../components/Heading.astro";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
-import mobileImage from "~/assets/mobile.webp";
-import { Image } from "astro:assets";
+// 06.08.2023 | disable assets for now
+// import mobileImage from "~/assets/mobile.webp";
+// import { Image } from "astro:assets";
 import { Button } from "../../../components/Button/Button";
 import HookSection from "../../../components/HookSection.astro";
 import { useTranslations } from "../../../i18n";
@@ -88,12 +89,23 @@ const meta = metaBuilder.create();
         {t("webDesign.content.title")}
       </Heading>
       <section id="web-design">
-        <Image
+        {
+          /*<Image
           class="web-design-image"
           height="480"
           src={mobileImage}
           alt="Mobile phone"
         />
+        */
+        }
+        <img
+          class="web-design-image"
+          src="/mobile.webp"
+          height="480"
+          width="350"
+          loading="eager"
+          decoding="async"
+        />
         <div>
           <h2>{t("webDesign.content.headline")}</h2>
           <div>