Added Open Source Page

.env.example

@@ -0,0 +1,12 @@
+MONGODB_URI=
+
+GITHUB_CLIENT_SECRET=
+GITHUB_CLIENT_ID=
+
+DISCORD_CLIENT_ID=
+DISCORD_CLIENT_SECRET=
+DISCORD_BOT_TOKEN=
+DISCORD_GUILD_ID=
+DISCORD_OPEN_SOURCE__ROLE_ID=
+
+NEXT_PUBLIC_DIRCORD_OPENSOURCE_INVITE_URL=

components/UI/Form.jsx

@@ -59,6 +59,8 @@ const Form = () => {
     );
   }
 
+  return <></>;
+
   return (
     <form className={`${classes.form}`} onSubmit={handleFormSubmit}>
       <div className={`${classes.form__group}`}>
@@ -93,7 +95,7 @@ const Form = () => {
         />
       </div>
 
-      <button className="primary__btn" type="submit">
+      <button disabled className="primary__btn" type="submit">
         Send
       </button>
     </form>

components/UI/Hero.jsx

@@ -1,4 +1,5 @@
 import React, { Suspense } from "react";
+import Link from "next/link";
 import SectionSubtitle from "./SectionSubtitle";
 import { Container, Row, Col, Button } from "reactstrap";
 import Image from "next/image";
@@ -22,6 +23,18 @@ const Hero = () => {
                 knowledge and experience with others.
               </p>
             </div>
+            <div className="mt-5">
+              <div className="relative inline-flex group">
+                <div className="absolute transitiona-all duration-1000 opacity-70 -inset-px bg-gradient-to-r animate-pulse hover:animate-none from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt"></div>
+                <Link
+                  href="/discord/open-source"
+                  className="relative text-sm sm:text-md md:text-lg text-center items-center justify-center px-8 py-4  font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
+                  role="button"
+                >
+                  <span className="block">Open Source BootCamp 🎉</span>
+                </Link>
+              </div>
+            </div>
           </Col>
           <Col lg="6" md="6">
             <div className={`${classes.hero__img} text-end`}>

package.json

@@ -29,10 +29,14 @@
     "react-terminal": "^1.3.0",
     "reactstrap": "^9.1.1",
     "remixicon": "^2.5.0",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.14",
     "eslint": "8.18.0",
-    "eslint-config-next": "12.1.6"
+    "eslint-config-next": "12.1.6",
+    "postcss": "^8.4.24",
+    "tailwindcss": "^3.3.2"
   }
 }

pages/api/open-source-discord.js

@@ -0,0 +1,91 @@
+import axios from "axios";
+
+const discordApiInstace = axios.create({
+  baseURL: "https://discord.com/api",
+  headers: {
+    "Accept-Encoding": "*",
+  },
+});
+
+export default async function handler(req, res) {
+  if (req.method.toLowerCase() === "post") {
+    const DISCORD_CLEINT_SECRET = process.env.DISCORD_CLIENT_SECRET;
+    const DISCORD_CLIENT_ID = process.env.DISCORD_CLIENT_ID;
+    const DISCORD_BOT_TOKEN = process.env.DISCORD_BOT_TOKEN;
+    const DISCORD_GUILD_ID = process.env.DISCORD_GUILD_ID;
+    const DISCORD_OPEN_SOURCE__ROLE_ID =
+      process.env.DISCORD_OPEN_SOURCE__ROLE_ID;
+
+    if (
+      !DISCORD_CLEINT_SECRET ||
+      !DISCORD_CLIENT_ID ||
+      !DISCORD_BOT_TOKEN ||
+      !DISCORD_GUILD_ID ||
+      !DISCORD_OPEN_SOURCE__ROLE_ID
+    )
+      return res.status(400).json({
+        error: "DISCORD_CLIENT_SECRET or DISCORD_CLIENT_ID is not set",
+      });
+
+    const { code, redirect_uri } = req.body;
+    if (!code || !redirect_uri)
+      return res.status(400).json({ error: "code & redirect_uri is required" });
+
+    const { data: tokenInfo } = await discordApiInstace.post(
+      `/oauth2/token`,
+      {
+        client_id: DISCORD_CLIENT_ID,
+        client_secret: DISCORD_CLEINT_SECRET,
+        grant_type: "authorization_code",
+        code,
+        redirect_uri,
+      },
+      {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+          "Accept-Encoding": "*",
+        },
+      }
+    );
+
+    if (!tokenInfo || !tokenInfo.access_token)
+      return res.status(404).json({ error: "access_token not found" });
+
+    const accessToken = tokenInfo.access_token;
+
+    const { data: userInfo } = await discordApiInstace.get("/users/@me", {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (!userInfo) return res.status(404).json({ error: "userInfo not found" });
+
+    await discordApiInstace.put(
+      `/guilds/${DISCORD_GUILD_ID}/members/${userInfo.id}`,
+      {
+        access_token: accessToken,
+      },
+      {
+        headers: {
+          Authorization: `Bot ${DISCORD_BOT_TOKEN}`,
+        },
+        responseType: "json",
+      }
+    );
+
+    await discordApiInstace.put(
+      `/guilds/${DISCORD_GUILD_ID}/members/${userInfo.id}/roles/${DISCORD_OPEN_SOURCE__ROLE_ID}`,
+      {},
+      {
+        headers: {
+          Authorization: `Bot ${DISCORD_BOT_TOKEN}`,
+        },
+      }
+    );
+
+    return res.status(200).json({ message: "Done" });
+  }
+
+  return res.status(404).json({ error: "Invalid HTTP Method" });
+}

pages/discord/open-source.jsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Container } from "reactstrap";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import SectionSubtitle from "../../components/UI/SectionSubtitle";
+import axios from "axios";
+
+const DISCORD_AUTH_URL = process.env.NEXT_PUBLIC_DIRCORD_OPENSOURCE_INVITE_URL;
+
+const LEARNING_OUTCOMES = [
+  "Understanding the concept of open source",
+  "Exploring successful open source projects and communities",
+  "Setting up a Git repository",
+  "Branching and merging in Git",
+  "Issue Tracking and Management",
+  "Git Pull Requests and Reviews",
+  "Open source licenses",
+  "Choosing the appropriate license for a project",
+];
+
+const PREREQUISITES = [
+  "Basic Programming Knowledge",
+  "Web Development - HTML, CSS & Javascript",
+  "Familiarity with Version Control (GIT)",
+  "Reading and Understanding Documentation",
+];
+
+const OpenSourceInviteDiscordCallbackPage = ({ host }) => {
+  const { query, route, replace: routerReplace, pathname } = useRouter();
+  const hasDiscordCode = useMemo(() => Boolean(query.code), [query]);
+
+  const protocol = useMemo(
+    () => (process.env.NODE_ENV === "production" ? "https://" : "http://"),
+    []
+  );
+
+  const [isAPISuccessfull, setIsAPISuccessfull] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (hasDiscordCode) {
+      const code = query.code;
+      if (!code || isAPISuccessfull || loading) return;
+      setLoading(true);
+      axios
+        .post("/api/open-source-discord", {
+          code,
+          redirect_uri: `${protocol}${host}${route}`,
+        })
+        .then(() => {
+          setIsAPISuccessfull(true);
+          setLoading(false);
+          routerReplace(
+            { pathname, query: { ...query, code: undefined } },
+            undefined,
+            { shallow: true }
+          );
+        });
+    }
+  }, [
+    hasDiscordCode,
+    host,
+    isAPISuccessfull,
+    loading,
+    pathname,
+    protocol,
+    query,
+    query.code,
+    route,
+    routerReplace,
+  ]);
+
+  return (
+    <Container className="my-5">
+      <SectionSubtitle subtitle="Open Source 🚀" />
+      <h4 className="mt-4 text-3xl font-bold ">Free OpenSource BootCamp ✨</h4>
+
+      <div className="mt-4 text-white">
+        <h6 className="text-2xl text-slate-200">Learning Outcomes</h6>
+        {LEARNING_OUTCOMES.map((el) => (
+          <div key={el} className="flex gap-2 items-center mt-2">
+            <input type="checkbox" className="bg-green-500 h-4 w-4" />
+            <p className="text-slate-400">{el}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 text-white">
+        <h6 className="text-2xl text-slate-200">Prerequisites</h6>
+        {PREREQUISITES.map((el) => (
+          <div key={el} className="flex gap-2 items-center mt-2">
+            <input type="checkbox" className="bg-green-500 h-4 w-4" />
+            <p className="text-slate-400">{el}</p>
+          </div>
+        ))}
+      </div>
+      <div className="mt-5">
+        <div className="relative inline-flex group">
+          <div className="absolute transitiona-all duration-1000 opacity-70 -inset-px bg-gradient-to-r animate-pulse hover:animate-none from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt"></div>
+          <Link
+            href={DISCORD_AUTH_URL}
+            title="Get quote now"
+            className="relative text-sm sm:text-md md:text-lg text-center items-center justify-center px-8 py-4  font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
+            role="button"
+          >
+            <span className="block">Join Open Source BootCamp 🎉</span>
+            <span className="block text-slate-500 text-sm">
+              Starting 1st June, 2023 on Discord
+            </span>
+          </Link>
+        </div>
+      </div>
+    </Container>
+  );
+};
+
+export default OpenSourceInviteDiscordCallbackPage;
+
+export const getServerSideProps = (context) => {
+  const host = context.req.headers.host;
+  return {
+    props: { host },
+  };
+};

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

styles/globals.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --site-theme-color: #01d293;
 }

styles/subtitle.module.css

@@ -1,7 +1,9 @@
 .section__subtitle {
   color: var(--site-theme-color) !important;
   font-weight: 400;
+  margin: 30px;
   margin-left: 40px;
+  font-size: 1.5rem !important;
   position: relative;
 }
 

tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};