Merge branch 'main' into Hashnode

.gitpod.yml

@@ -0,0 +1,18 @@
+# List the start up tasks. Learn more https://www.gitpod.io/docs/config-start-tasks/
+tasks:
+ - name: npm
+ init: npm install
+ command: npm start
+# List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/
+ports:
+ - port: 3000
+ onOpen: open-browser
+github:
+ prebuilds:
+ master: true
+ branches: true
+ pullRequests: true
+ pullRequestsFromForks: true
+ addCheck: true
+ addComment: false
+ addBadge: true

Dockerfile

@@ -0,0 +1,5 @@
+FROM --platform=linux/amd64 node:16-alpine 
+WORKDIR ./
+COPY . .
+EXPOSE 3000
+CMD [ "npm", "start" ]

kubernetes/deploy.yml

@@ -0,0 +1,28 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+ name: commclassroom-deploy
+ namespace: default
+spec:
+ ## Set to 5 for start of lab
+ replicas: 5
+ selector:
+ matchLabels:
+ env: commclassroom
+ progressDeadlineSeconds: 300
+ minReadySeconds: 10
+ strategy:
+ type: RollingUpdate
+ rollingUpdate:
+ maxUnavailable: 1
+ maxSurge: 1
+ template:
+ metadata:
+ labels:
+ env: commclassroom
+ spec:
+ containers:
+ - name: commclassroom-ctr
+ image: kaiwalyakoparkar/commclassroom:1.0
+ ports:
+ - containerPort: 3000

kubernetes/pod.yml

@@ -0,0 +1,22 @@
+apiVersion: v1
+kind: Pod
+metadata:
+ name: commclassroom-pod
+ namespace: default
+ labels:
+ env: commclassroom
+spec:
+ restartPolicy: OnFailure
+ containers:
+ - name: commclassroom-ctr
+ imagePullPolicy: Always
+ image: kaiwalyakoparkar/commclassroom:1.0
+ ports:
+ - containerPort: 3000
+ resources:
+ requests:
+ memory: "128Mi"
+ cpu: "500m"
+ limits:
+ memory: "512Mi"
+ cpu: "1000m"

kubernetes/svc.yml

@@ -0,0 +1,11 @@
+apiVersion: v1
+kind: Service
+metadata:
+ name: commclassroom
+spec:
+ type: LoadBalancer
+ ports:
+ - port: 9000
+ targetPort: 3000
+ selector:
+ env: commclassroom

src/components/Course/Card.js

@@ -1,15 +1,38 @@
-import React from 'react'
+import React from "react";
+
+const CardContent = ({ course = {} }) => {
+ return (
+ <>
+ <img
+ className="course_cont_2_card_1"
+ src={course.image}
+ alt={course.title}
+ />
+ <p className="course_cont_2_card_1_heading"> {course.title} </p>
+ <p className="course_cont_2_card_1_para_1">{course.description}</p>
+ </>
+ );
+};
 
 const Card = ({ course = {} }) => {
+ if (course.link) {
+ return (
+ <a
+ href={course.link}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="course_cont_2_card"
+ >
+ <CardContent course={course} />
+ </a>
+ );
+ }
+
  return (
  <div className="course_cont_2_card">
- <img className="course_cont_2_card_1" src={course.image} alt={course.title} />
- <p className="course_cont_2_card_1_heading"> {course.title} </p>
- <p className="course_cont_2_card_1_para_1">
- {course.description}
- </p>
+ <CardContent course={course} />
  </div>
- )
-}
+ );
+};
 
-export default Card
+export default Card;

src/components/Course/data.js

@@ -10,17 +10,20 @@ export const courses = [
  {
  title: "Data Structures and Algorithm in Java",
  description: "Got no programming knowledge ? No worries. Become an expert at solving simple to complex LeetCode problems with ease and become interview-ready.",
- image: Dsa
+ image: Dsa,
+ link: "https://www.youtube.com/playlist?list=PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ",
  },
  {
  title: "Develop your knowledge of Git and GitHub.",
  description: "Start out your exploration of open source with the comprehensive Git & GitHub tutorial, which covers both basic and advanced concepts.",
- image: Github
+ image: Github,
+ link: "https://youtu.be/apGV9Kg7ics",
  },
  {
  title: "Beginner to Advanced DevOps",
  description: "DevOps engineer is without a doubt the most in-demand position on the market right now, particularly with the rise of high-paying remote possibilities. Learn DevOps from scratch here.",
- image: DevOps
+ image: DevOps,
+ link: "https://www.youtube.com/playlist?list=PL9gnSGHSqcnoqBXdMwUTRod4Gi3eac2Ak",
  },
  {
  title: "Web Development",

src/components/Event/Card.js

@@ -1,18 +1,42 @@
-import React from 'react'
+import React from "react";
+import { Link } from "react-router-dom";
+
+const CardContent = ({ event }) => {
+ return (
+ <>
+ <img
+ className="events_cont_2_card_1"
+ src={event.image}
+ alt={event.title}
+ />
+ {event.ongoing && (
+ <p className="events_cont_2_card_1_head">🟢 On-Going </p>
+ )}
+ {!event.ongoing && (
+ <p className="events_cont_2_card_1_head1">🔴 Completed </p>
+ )}
+ <p className="events_cont_2_card_1_heading"> {event.title} </p>
+ <p className="events_cont_2_card_1_para_1">{event.description}</p>
+ <p className="events_cont_2_card_1_date">{event.date}</p>
+ </>
+ );
+};
 
 const Card = ({ event }) => {
+ if (event.link) {
  return (
- <div className="events_cont_2_card">
- <img className="events_cont_2_card_1" src={event.image} alt={event.title} />
- {event.ongoing && <p className="events_cont_2_card_1_head"><span>🟢</span> On-Going </p>}
- {!event.ongoing && <p className="events_cont_2_card_1_head1"><span>🔴</span> Completed </p>}
- <p className="events_cont_2_card_1_heading"> {event.title} </p>
- <p className="events_cont_2_card_1_para_1">
- {event.description}
- </p>
- <p className="events_cont_2_card_1_date">{event.date}</p>
- </div>
- )
-}
+ <Link to={event.link} className="events_cont_2_card">
+ <CardContent event={event} />
+ </Link>
+ );
+ }
+
+ return (
+ <div className="events_cont_2_card">
+ <CardContent event={event} />
+ </div>
+ );
+};
+
 
-export default Card
+export default Card;

src/components/Event/data.js

@@ -10,6 +10,7 @@ export const events = [
  ongoing: true,
  image: events_hashnode,
  date: "Monthly",
+ link: "/hashnode",
  },
  {
  title: "Sema mentorship series",

src/components/Roadmap/data.js

@@ -74,7 +74,7 @@ export const roadmapsData = {
  description:
  "Android development is evolving and products are improving. Want to get started? This roadmap will get you started with absolute basics to advanced concepts like layout & UI's, event based programming, networking & api's etc.",
  link:
- "https://github.com/commclassroom/roadmaps/tree/main/Mobile-Development",
+ "https://github.com/commclassroom/roadmaps/tree/main/Android-Development",
  image: Android,
  },
  {

src/pages/Hashnode.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Header from '../components/Hashnode/Header.js'
 import Cards from '../components/Hashnode/CardsList.js'
 import Participate from '../components/Hashnode/Participate.js'
@@ -7,6 +7,11 @@ import Footer from '../components/Footer.js'
 import Tracks from '../components/Hashnode/Prize'
 
 const Hashnode = () => {
+
+ useEffect(() => {
+ window.scrollTo(0,0);
+ }, [])
+
  return (
  <div>
  <Navbar />