Add ML Widget

Author: timoclsn

Diff for: components/MLWidget.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image';
+import { ArrowRight } from 'react-feather';
+
+import { Button } from './Button';
+
+interface BgImage {
+  url: string;
+  description: string;
+  blurDataURL: string;
+}
+
+interface Props {
+  bgImage: BgImage;
+}
+
+export function MLWidget({ bgImage }: Props) {
+  return (
+    <section id="makers-league" className="relative rounded-3xl bg-[#E5F0F2]">
+      <div className="aspect-w-3 aspect-h-2 overflow-hidden rounded-3xl sm:aspect-w-2 sm:aspect-h-1">
+        <div className="hidden sm:block">
+          <Image
+            src={bgImage.url}
+            layout={'fill'}
+            objectFit="cover"
+            objectPosition="center"
+            sizes="90vw"
+            quality={90}
+            alt={bgImage.description}
+            className="rounded-3xl"
+            blurDataURL={bgImage.blurDataURL}
+            placeholder="blur"
+          />
+        </div>
+      </div>
+      <div className="absolute top-0 left-0 flex h-full w-full flex-col justify-end rounded-3xl px-6 py-12 text-dark xl:px-12 xl:py-20">
+        <div>
+          <h2 className="mb-1 text-2xl font-bold sm:text-3xl md:mb-2 md:text-4xl lg:text-5xl">
+            Makers League e. V.
+          </h2>
+          <p className="mb-2 text-sm sm:text-base md:mb-4 md:text-lg lg:text-xl xl:text-2xl">
+            Die Gemeinschaft für Macher*innen in Esslingen
+          </p>
+          <Button
+            as="a"
+            variant="link"
+            href="https://makersleague.de"
+            target="_blank"
+            rel="noopener"
+          >
+            <ArrowRight />
+            Zum Projekt
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}

Diff for: pages/index.tsx

@@ -7,6 +7,7 @@ import { BlogWidget } from '../components/BlogWidget';
 import { ContactWidget } from '../components/ContactWidget';
 import { Layout } from '../components/Layout';
 import { LCDWidget } from '../components/LCDWidget';
+import { MLWidget } from '../components/MLWidget';
 import { NowPlaying } from '../components/NowPlaying';
 import { PodcastsWidget } from '../components/PodcastsWidget';
 import { RunningWidget } from '../components/RunningWidget';
@@ -51,6 +52,11 @@ interface Props {
     description: string;
     blurDataURL: string;
   };
+  MLImage: {
+    url: string;
+    description: string;
+    blurDataURL: string;
+  };
   contact: string;
 }
 
@@ -76,6 +82,7 @@ const Home: NextPage<Props> = function (props) {
       <RunningWidget />
       <PodcastsWidget podcasts={props.favoritePodcasts} />
       <Web3Widget />
+      <MLWidget bgImage={props.MLImage} />
       <NowPlaying />
       <ContactWidget text={props.contact} />
     </Layout>
@@ -138,6 +145,12 @@ export const getStaticProps: GetStaticProps = async ({ preview = false }) => {
                 description
             }
         }
+        MLImage: assetCollection(where: {title: "Makersleague.de"}, limit: 1, preview: false) {
+          items {
+              url
+              description
+          }
+      }
     }`,
     preview
   );
@@ -163,6 +176,11 @@ export const getStaticProps: GetStaticProps = async ({ preview = false }) => {
     size: 10,
   });
   LCDImage.blurDataURL = LCDImageBase64;
+  const MLImage = response.data.MLImage.items[0];
+  const { base64: MLImageBase64 } = await getPlaiceholder(MLImage.url, {
+    size: 10,
+  });
+  MLImage.blurDataURL = MLImageBase64;
 
   let aboutTeaser = person.cvText;
   aboutTeaser = stripFirstLine(aboutTeaser);
@@ -190,6 +208,7 @@ export const getStaticProps: GetStaticProps = async ({ preview = false }) => {
       smartHomeFootnote: await markdownToHTML(smartHomeFootnoteText),
       favoritePodcasts,
       LCDImage,
+      MLImage,
       contact: await markdownToHTML(contactText),
     },
   };