folder structure + Next Images + readme asset

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"]
+  "extends": ["next", "next/core-web-vitals"]
 }

README.md

@@ -46,6 +46,17 @@ DESCOPE_ACCESS_KEY="<YOUR_DESCOPE_ACCESS_KEY>"
 $ openssl rand -base64 32
 ```
 
+2. Setup SSO 
+
+- To enable SSO and add Descope as an Identity Provider (IdP), we need to add our flow hosting URL: 
+```
+https://auth.descope.io/<YOUR_DESCOPE_PROJECT_ID>
+```
+
+- Navigate to Descope Project --> Authentication methods --> Identity Provider:
+
+<img src="./readme-assets/sso.png" />
+
 2. Installation
 
 - `npm install`

pages/_components/About.tsx → components/About.tsx

@@ -1,15 +1,20 @@
-import { AboutType } from "../_template_data/About"
+import Image from "next/image"
+import { AboutType } from "../template_data/About"
 
 
 export default function About({ data, AboutImage }: { data: AboutType, AboutImage: string }) {
     return (
         <div id="about" className='page component'>
             <div className='row'>
                 <div className='col flex-1 max-md:flex-none items-center justify-center w-[90%]'>
-                    <img
+                    <Image
                         src={AboutImage}
                         alt="About image"
+                        width={200}
+                        height={160}
                         className="w-[40vw] max-md:w-full max-md:mb-10 border-gray-800 border-8"
+                        placeholder="blur"
+                        blurDataURL={AboutImage}
                     />
                 </div>
                 <div className='col flex-1 max-md:flex-none max-md:mt-6 items-center justify-center'>

pages/_components/Bottom.tsx → components/Bottom.tsx

@@ -1,16 +1,19 @@
-import { SocialType } from "../_template_data/Social"
+import Image from "next/image"
+import { SocialType } from "../template_data/Social"
 
 
 export default function Bottom({ Logo, SocialList }: { Logo: string, SocialList: SocialType[] }) {
     return (
         <div className='row justify-between px-4 py-4 bottom-0 w-full bg-[#1d242b]'>
             <div>
-                <img
+                <Image
                     src={Logo}
                     alt="bottom navbar logo"
-                    width={200}
-                    height={160}
+                    width={60}
+                    height={60}
                     className="w-12 h-12 m-6"
+                    placeholder="blur"
+                    blurDataURL={Logo}
                 />
             </div>
             <div className='row items-start h-full py-6 max-md:col text-white'>

pages/_components/FAQ.tsx → components/FAQ.tsx

@@ -1,4 +1,4 @@
-import { FAQType } from "../_template_data/FAQ"
+import { FAQType } from "../template_data/FAQ"
 
 
 export default function FAQ({ data }: { data: FAQType[] }) {

pages/_components/Navbar.tsx → components/Navbar.tsx

@@ -1,5 +1,8 @@
 import 'flowbite'
 
+import Image from "next/image"
+import Link from 'next/link'
+
 import { useSession, signIn } from "next-auth/react"
 
 
@@ -9,14 +12,17 @@ export default function Navbar({ Logo }: { Logo: string }) {
     return (
         <nav className="absolute top-0 w-full py-4">
             <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-                <a href={"/"} className="flex items-center">
-                    <div>
-                        <img
-                            src={Logo}
-                            className="w-12 h-12"
-                        />
-                    </div>
-                </a>
+                <Link href={"/"} className="flex items-center">
+                    <Image
+                        src={Logo}
+                        alt="navbar logo"
+                        width={60}
+                        height={60}
+                        className="w-5 h-5"
+                        placeholder="blur"
+                        blurDataURL={Logo}
+                    />
+                </Link>
                 <button data-collapse-toggle="navbar-default" type="button" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 md:hidden hover:bg-gray-100 focus:outline-none dark:text-gray-800 dark:hover:bg-gray-300" aria-controls="navbar-default" aria-expanded="false">
                     <span className="sr-only">Open main menu</span>
                     <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
@@ -41,11 +47,11 @@ export default function Navbar({ Logo }: { Logo: string }) {
                             <a href="#faq" className="max-md:text-white block py-2 pl-3 pr-4 text-gray-900 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0  md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">FAQ</a>
                         </li>
                         <li>
-                            <a href={"/team"} className="max-md:text-white block py-2 pl-3 pr-4 max-md:mb-2 text-gray-900 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0  md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Team</a>
+                            <Link href={"/team"} className="max-md:text-white block py-2 pl-3 pr-4 max-md:mb-2 text-gray-900 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0  md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Team</Link>
                         </li>
-                        <li className='mr-6 my-2 max-md:pb-2 max-md:mb-1'>
+                        <li className='mr-6 max-md:pb-2 max-md:mb-1'>
                             {session ? 
-                                <a href={"/dashboard"} className="text-[#e9e9e9] bg-[#262d3b] py-2 px-7 border-[#45546e] border-4">Dashboard</a>
+                                <Link href={"/dashboard"} className="text-[#e9e9e9] bg-[#262d3b] py-2 px-7 border-[#45546e] border-4">Dashboard</Link>
                                 :
                                 <button onClick={() => signIn("descope", { callbackUrl: "/dashboard" })} className="text-[#e9e9e9] bg-[#262d3b] py-2 px-7 border-[#45546e] border-4">Apply</button>
                             }

pages/_components/Schedule.tsx → components/Schedule.tsx

@@ -1,4 +1,4 @@
-import { ScheduleType } from '../_template_data/Schedule'
+import { ScheduleType } from '../template_data/Schedule'
 
 
 export default function Schedule({ data }: { data: ScheduleType[] }) {

pages/_components/Speakers.tsx → components/Speakers.tsx

@@ -1,4 +1,5 @@
-import { SpeakerType } from '../_template_data/Speakers'
+import Image from "next/image"
+import { SpeakerType } from '../template_data/Speakers'
 
 
 export default function Speakers({ data }: { data: SpeakerType[] }) {
@@ -9,10 +10,14 @@ export default function Speakers({ data }: { data: SpeakerType[] }) {
                 {data.map((obj, i) => (
                     <div key={i} className='row h-full w-[30%] max-md:w-[90%] m-3 bg-gray-200'>
                         <div className='col flex-1 max-md:flex-none'>
-                            <img
+                            <Image
                                 src={obj.img}
                                 alt="speaker img"
+                                width={200}
+                                height={160}
                                 className="w-[20vh] h-[20vh] max-md:w-full max-md:h-full object-cover"
+                                placeholder="blur"
+                                blurDataURL={obj.img}
                             />
                         </div>
                         <div className='col flex-1 max-md:flex-none p-6'>

pages/_components/Sponsors.tsx → components/Sponsors.tsx

@@ -1,4 +1,5 @@
-import { SponsorType } from '../_template_data/Sponsor'
+import Image from "next/image"
+import { SponsorType } from '../template_data/Sponsor'
 
 
 export default function Sponsors({ data }: { data: SponsorType[] }) {
@@ -8,10 +9,14 @@ export default function Sponsors({ data }: { data: SponsorType[] }) {
             <div className='row w-full'>
                 {data.map((obj, i) => (
                     <div key={i} className='row justify-start m-10'>
-                        <img
+                        <Image
                             src={obj.img}
                             alt="sponsor img"
+                            width={200}
+                            height={160}
                             className="w-[35vh] object-cover"
+                            placeholder="blur"
+                            blurDataURL={obj.img}
                         />
                     </div>
                 ))}

package.json

@@ -14,19 +14,19 @@
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.7",
     "airtable": "^0.12.1",
-    "autoprefixer": "10.4.14",
     "encoding": "^0.1.13",
     "flowbite": "1.7.0",
     "next": "^12.3.4",
     "next-auth": "4.22.1",
-    "postcss": "8.4.25",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.1.6"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.14",
     "eslint": "8.44.0",
     "eslint-config-next": "13.4.9",
+    "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3"
   }
 }

pages/_app.tsx

@@ -3,13 +3,13 @@ import './globals.css'
 import type { AppProps } from "next/app";
 import { Session } from "next-auth";
 
-import Navbar from './_components/Navbar'
+import Navbar from '../components/Navbar'
 
-import LogoBlack from "./_assets/logo/icons8-pixel-heart-100 (black).png"
-import LogoWhite from "./_assets/logo/icons8-pixel-heart-100.png"
+import LogoBlack from "../assets/logo/icons8-pixel-heart-100 (black).png"
+import LogoWhite from "../assets/logo/icons8-pixel-heart-100.png"
 
-import Bottom from './_components/Bottom'
-import { SocialList } from './_template_data/Social'
+import Bottom from '../components/Bottom'
+import { SocialList } from '../template_data/Social'
 
 import { SessionProvider } from "next-auth/react"
 import Head from 'next/head';

pages/api/airtable.ts

@@ -4,38 +4,38 @@ import { NextApiRequest, NextApiResponse } from 'next'
 
 
 export default async function handler(request: NextApiRequest, response: NextApiResponse) {
-    const API_KEY = process.env.AIRTABLE_PERSONAL_ACCESS_TOKEN
-    const AIRTABLE_BASE = process.env.AIRTABLE_BASE
-    const AIRTABLE_VIEW = process.env.AIRTABLE_TABLE_NAME
+    // const API_KEY = process.env.AIRTABLE_PERSONAL_ACCESS_TOKEN
+    // const AIRTABLE_BASE = process.env.AIRTABLE_BASE
+    // const AIRTABLE_VIEW = process.env.AIRTABLE_TABLE_NAME
 
-    const base = new Airtable({apiKey: API_KEY}).base(AIRTABLE_BASE || "");
+    // const base = new Airtable({apiKey: API_KEY}).base(AIRTABLE_BASE || "");
 
-    const email = request.query.email
+    // const email = request.query.email
 
-    const res = await base(AIRTABLE_VIEW || "")
-        .select({ filterByFormula: `email="${email}"`})
-        .firstPage()
-        .then((records) => {
-            if (records.length === 0) {
-                return "None"
-            }
-            return records
-        })
-        .catch((err: any) => {
-            console.log(err)
-            return err;
-        });
+    // const res = await base(AIRTABLE_VIEW || "")
+    //     .select({ filterByFormula: `email="${email}"`})
+    //     .firstPage()
+    //     .then((records) => {
+    //         if (records.length === 0) {
+    //             return "None"
+    //         }
+    //         return records
+    //     })
+    //     .catch((err: any) => {
+    //         console.log(err)
+    //         return err;
+    //     });
 
-    // const res = [{
-    //     "fields": {
-    //         "Name": 'Descope',
-    //         "University": 'University of Waterloo',
-    //         "What year are you?": 'First year',
-    //         "Email": '[email protected]',
-    //         'Why AuthHacks?': "Authentication is a fundamental part of any startup, SaaS, or business. The workshops and connections I'll make will profoundly broaden my knowledge of good security practices and industry leaders.",
-    //         'Accepted': true 
-    //     }
-    // }]
+    const res = [{
+        "fields": {
+            "Name": 'Descope',
+            "University": 'University of Waterloo',
+            "What year are you?": 'First year',
+            "Email": '[email protected]',
+            'Why AuthHacks?': "Authentication is a fundamental part of any startup, SaaS, or business. The workshops and connections I'll make will profoundly broaden my knowledge of good security practices and industry leaders.",
+            'Accepted': true 
+        }
+    }]
 
     return response.status(200).json(
         {