Remove Instagram Integration (#102)

* Remove instagram integration

* Fix instagram section component usage

.env.example

@@ -1,3 +1,4 @@
 EASYVEREIN_TOKEN=
-INSTAGRAM_USER_ID=
-INSTAGRAM_ACCESS_TOKEN=
+CRON_SECRET=
+RESEND_API_KEY=
+HTTP_BASIC_AUTH=

app/einblicke/page.tsx

@@ -14,7 +14,7 @@ const InsightsPage = () => {
     <Page>
       <div>
         <h1 className="mb-16 text-xl font-bold md:text-5xl">Einblicke</h1>
-        <InstagramSection count={9} />
+        <InstagramSection />
       </div>
       <Blog />
     </Page>

components/InstagramSection.tsx

@@ -1,71 +1,22 @@
 import { Instagram } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
 import { Button } from "./Button";
-import { getMedia } from "lib/instagram";
 
-interface Props {
-  count?: number;
-}
-
-export const InstagramSection = async ({ count = 6 }: Props) => {
-  const mediaArray = await getMedia(count);
+export const InstagramSection = async () => {
   return (
     <section id="instagram">
-      <div className="mb-14">
-        <h2 className="mb-2 text-base font-bold md:text-2xl">
-          Folge uns auf Instagram
-        </h2>
-        <p className="mb-10 text-base opacity-60 md:text-2xl">
-          Bilcke hinter die Kulissen der Makers League
-        </p>
-
-        <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 md:gap-8">
-          {mediaArray.map((media) => {
-            const isVideo = media.media_url.includes("mp4");
-            return (
-              <li key={media.id} className="border-4 border-dark p-4">
-                <div className="relative mb-14 aspect-square">
-                  {isVideo ? (
-                    <video
-                      controls
-                      playsInline
-                      preload="metadata"
-                      src={`${media.media_url}#t=0.001`}
-                      className="absolute inset-0 h-full w-full bg-pink object-cover"
-                    />
-                  ) : (
-                    <Image
-                      src={media.media_url}
-                      alt="Instagram Image"
-                      width={200}
-                      height={200}
-                      unoptimized
-                      className="absolute inset-0 h-full w-full object-cover"
-                    />
-                  )}
-                </div>
-                <div className="flex w-full flex-1 flex-col items-end justify-end">
-                  <Link
-                    href={media.permalink}
-                    className="flex items-center justify-center gap-1 self-end font-bold text-pink hover:opacity-80"
-                  >
-                    <Instagram className="text-2xl" />
-                    <span className="sr-only">Auf Instagram ansehen</span>
-                  </Link>
-                </div>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
+      <h2 className="mb-2 text-base font-bold md:text-2xl">
+        Folge uns auf Instagram
+      </h2>
+      <p className="mb-10 text-base opacity-60 md:text-2xl">
+        Bilcke hinter die Kulissen der Makers League
+      </p>
       <Button
         href="https://www.instagram.com/makersleague.ev"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Instagram className="text-2xl" />
-        Mehr auf Instagram
+        Zu Instagram
       </Button>
     </section>
   );

lib/env.ts

@@ -15,10 +15,6 @@ const envSchema = z.object({
   // EasyVerein
   EASYVEREIN_TOKEN: envVarSchema,
 
-  // Instagram
-  INSTAGRAM_USER_ID: envVarSchema,
-  INSTAGRAM_ACCESS_TOKEN: envVarSchema,
-
   // CRON
   CRON_SECRET: envVarSchema,
 

next.config.js

@@ -20,10 +20,6 @@ const nextConfig = {
         protocol: "https",
         hostname: "**.vercel.app",
       },
-      {
-        protocol: "https",
-        hostname: "**.cdninstagram.com",
-      },
     ],
   },
   async rewrites() {