feat: add org thumbnails on app pages

apps/web/app/orgs/[orgslug]/(withmenu)/collections/page.tsx

@@ -11,6 +11,7 @@ import ContentPlaceHolderIfUserIsNotAdmin from '@components/ContentPlaceHolder'
 import { nextAuthOptions } from 'app/auth/options'
 import { getServerSession } from 'next-auth'
 import { getOrgCollections } from '@services/courses/collections'
+import { getOrgThumbnailMediaDirectory } from '@services/media/media'
 
 type MetadataProps = {
   params: { orgslug: string; courseid: string }
@@ -44,6 +45,14 @@ export async function generateMetadata({
       title: `Collections — ${org.name}`,
       description: `Collections of courses from ${org.name}`,
       type: 'website',
+      images: [
+        {
+          url: getOrgThumbnailMediaDirectory(org?.org_uuid, org?.thumbnail_image),
+          width: 800,
+          height: 600,
+          alt: org.name,
+        },
+      ],
     },
   }
 }

apps/web/app/orgs/[orgslug]/(withmenu)/courses/page.tsx

@@ -5,6 +5,7 @@ import { getOrganizationContextInfo } from '@services/organizations/orgs'
 import { nextAuthOptions } from 'app/auth/options'
 import { getServerSession } from 'next-auth'
 import { getOrgCourses } from '@services/courses/courses'
+import { getOrgThumbnailMediaDirectory } from '@services/media/media'
 
 type MetadataProps = {
   params: { orgslug: string }
@@ -39,6 +40,14 @@ export async function generateMetadata({
       title: 'Courses — ' + org.name,
       description: org.description,
       type: 'website',
+      images: [
+        {
+          url: getOrgThumbnailMediaDirectory(org?.org_uuid, org?.thumbnail_image),
+          width: 800,
+          height: 600,
+          alt: org.name,
+        },
+      ],
     },
   }
 }

apps/web/app/orgs/[orgslug]/(withmenu)/page.tsx

@@ -15,6 +15,7 @@ import ContentPlaceHolderIfUserIsNotAdmin from '@components/ContentPlaceHolder'
 import { getOrgCollections } from '@services/courses/collections'
 import { getServerSession } from 'next-auth'
 import { nextAuthOptions } from 'app/auth/options'
+import { getOrgThumbnailMediaDirectory } from '@services/media/media'
 
 type MetadataProps = {
   params: { orgslug: string }
@@ -48,6 +49,14 @@ export async function generateMetadata({
       title: `Home — ${org.name}`,
       description: org.description,
       type: 'website',
+      images: [
+        {
+          url: getOrgThumbnailMediaDirectory(org?.org_uuid, org?.thumbnail_image),
+          width: 800,
+          height: 600,
+          alt: org.name,
+        },
+      ],
     },
   }
 }

apps/web/app/page.tsx

@@ -1,95 +0,0 @@
-'use client'
-import { motion } from 'framer-motion'
-import styled from 'styled-components'
-import learnhouseBigIcon from 'public/learnhouse_bigicon.png'
-import Image from 'next/legacy/image'
-import Link from 'next/link'
-
-export default function Home() {
-  return (
-    <HomePage>
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{
-          type: 'spring',
-          stiffness: 260,
-          damping: 70,
-          delay: 0.2,
-        }}
-        exit={{ opacity: 1 }}
-      >
-        <Image
-          alt="Learnhouse Icon"
-          height={260}
-          width={260}
-          quality={100}
-          src={learnhouseBigIcon}
-        ></Image>
-      </motion.div>
-      <br />
-      <br />
-      <br />
-      <br />
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{
-          type: 'spring',
-          stiffness: 260,
-          damping: 70,
-          delay: 0.8,
-        }}
-        exit={{ opacity: 1 }}
-      >
-        <div>
-          <Link href={'/organizations'}>
-            <OrgsButton>See Organizations</OrgsButton>
-          </Link>
-          <br />
-          <br />
-          <Link href={'/login'}>
-            <OrgsButton>Login</OrgsButton>
-          </Link>
-        </div>
-      </motion.div>
-    </HomePage>
-  )
-}
-
-const OrgsButton = styled.button`
-  background: #151515;
-  border: 1px solid #e5e5e50a;
-  box-sizing: border-box;
-  border-radius: 4px;
-  padding: 10px 20px;
-  color: white;
-  font-size: 16px;
-  line-height: 24px;
-  margin: 0 10px;
-  margin: auto;
-  cursor: pointer;
-  font-family: 'DM Sans';
-  font-weight: 500;
-  border-radius: 12px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  &:hover {
-    background: #191919;
-  }
-`
-
-const HomePage = styled.div`
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(131.61deg, #202020 7.15%, #000000 90.96%);
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  width: 100vw;
-  min-height: 100vh;
-  text-align: center;
-  img {
-    width: 60px;
-  }
-`