Merge branch 'v2' into page/events

Author: hrahul2605

.gitignore

@@ -7,3 +7,4 @@ dist-ssr
 node_modules
 # intellij stuff
 .idea/
+components.d.ts

components.d.ts

@@ -5,6 +5,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     Brand: typeof import('./src/components/Brand.vue')['default']
     BrandDark: typeof import('./src/components/BrandDark.vue')['default']
+    Calendar: typeof import('./src/components/Calendar.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
     README: typeof import('./src/components/README.md')['default']
     Social: typeof import('./src/components/Social.vue')['default']
@@ -14,11 +15,11 @@ declare module 'vue' {
     PopoverGroup: typeof import('@headlessui/vue')['PopoverGroup']
     CarbonMoon: typeof import('virtual:vite-icons/carbon/moon')['default']
     CarbonSun: typeof import('virtual:vite-icons/carbon/sun')['default']
-    CarbonLogoFacebook: typeof import('virtual:vite-icons/carbon/logo-facebook')['default']
+    CarbonArrowRight: typeof import('virtual:vite-icons/carbon/arrow-right')['default']
     CarbonLogoYoutube: typeof import('virtual:vite-icons/carbon/logo-youtube')['default']
     CarbonLogoGithub: typeof import('virtual:vite-icons/carbon/logo-github')['default']
     CarbonLogoTwitter: typeof import('virtual:vite-icons/carbon/logo-twitter')['default']
-    CarbonArrowRight: typeof import('virtual:vite-icons/carbon/arrow-right')['default']
+    CarbonLogoFacebook: typeof import('virtual:vite-icons/carbon/logo-facebook')['default']
   }
 }
 

src/components/Calendar.vue

@@ -0,0 +1,10 @@
+<template>
+  <iframe
+    src="https://calendar.google.com/calendar/embed?height=600&amp;wkst=2&amp;bgcolor=%23ffffff&amp;ctz=Asia%2FKolkata&amp;src=NXJidmI0azdjMTB1amZycGVib2g1amUwNzRAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%234285F4&amp;title=CodeIIEST%20Sessions"
+    style="border:solid 1px #777"
+    width="800"
+    height="600"
+    frameborder="0"
+    scrolling="no"
+  ></iframe>
+</template>

src/logic/events.ts

@@ -12,3 +12,12 @@ export const getEvents = async(): Promise<any> => {
 export const formatDateTime = (dateTime: string): string => {
   return dayjs(dateTime).format(DATE_FORMAT)
 }
+
+export const ytEvents: Array<{link: string; image: string}> = [
+  { link: 'https://www.youtube.com/watch?v=O8zdhpFAW_w', image: 'https://res.cloudinary.com/marcomontalbano/image/upload/v1625165552/video_to_markdown/images/youtube--O8zdhpFAW_w-c05b58ac6eb4c4700831b2b3070cd403.jpg' },
+  { image: 'https://res.cloudinary.com/marcomontalbano/image/upload/v1625200008/video_to_markdown/images/youtube--4vosyExcRvY-c05b58ac6eb4c4700831b2b3070cd403.jpg', link: 'https://www.youtube.com/watch?v=4vosyExcRvY' },
+  { image: 'https://res.cloudinary.com/marcomontalbano/image/upload/v1625200675/video_to_markdown/images/youtube--uAHySjoHXuE-c05b58ac6eb4c4700831b2b3070cd403.jpg', link: 'https://www.youtube.com/watch?v=uAHySjoHXuE' },
+  { image: 'https://res.cloudinary.com/marcomontalbano/image/upload/v1625200767/video_to_markdown/images/youtube--dEz7BYCAxZA-c05b58ac6eb4c4700831b2b3070cd403.jpg', link: 'https://www.youtube.com/watch?v=dEz7BYCAxZA' },
+  { image: 'https://res.cloudinary.com/marcomontalbano/image/upload/v1625201123/video_to_markdown/images/youtube--cwRYql9jzXE-c05b58ac6eb4c4700831b2b3070cd403.jpg', link: 'https://www.youtube.com/watch?v=cwRYql9jzXE' },
+  { image: 'https://res.cloudinary.com/marcomontalbano/image/upload/v1625201444/video_to_markdown/images/youtube--eWfE27FhHCI-c05b58ac6eb4c4700831b2b3070cd403.jpg', link: 'https://www.youtube.com/watch?v=eWfE27FhHCI' },
+]

src/pages/events.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
 import { onMounted, reactive } from 'vue'
-import { getEvents, formatDateTime } from '~/logic'
+import { getEvents, formatDateTime, ytEvents } from '~/logic'
+import Calender from '~/components/Calendar.vue'
 
 useHead({
+  // Can be static or computed
   title: 'Events | CodeIIEST',
   meta: [
     {
       name: 'description',
-      content: 'Ongoing & past events',
+      content: 'Events of CodeIIEST',
     },
   ],
 })
@@ -24,12 +26,20 @@ onMounted(async() => {
 
 <template>
   <div class="py-8">
+    <div class="mb-12">
+      <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
+        Events
+      </h2>
+      <p class="text-xl text-gray-500 dark:text-gray-300">
+        You will find the various events and sessions the chapters of CodeIIEST organizes in the calendar.
+      </p>
+    </div>
     <div class="max-w-lg mx-auto px-6">
       <div class="flow-root">
         <p v-if="events.length === 0">
           No events
         </p>
-        <ul class="-mb-8">
+        <ul class="mb-16">
           <li v-for="(event) in events" :key="event.id">
             <div class="relative pb-8">
               <span
@@ -69,4 +79,20 @@ onMounted(async() => {
       </div>
     </div>
   </div>
+  <div class="flex flex-col justify-center items-center">
+    <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
+      Past Events & Sessions
+    </h2>
+    <p class="text-xl text-gray-500 dark:text-gray-300">
+      All our past recorded events and sessions are uploaded to our <a class="text-red-400 hover:text-red-600 hover:underline" href="https://www.youtube.com/codeiiest" target="_blank">Youtube Channel</a>.
+    </p>
+    <div class="grid md:grid-cols-2 grid-cols-1 mt-4">
+      <div v-for="event in ytEvents" :key="event.link" class="max-w-md p-2">
+        <a :href="event.link" target="_blank"><img :src="event.image"></a>
+      </div>
+    </div>
+  </div>
+  <div class="mt-16 flex justify-center items-center">
+    <Calender />
+  </div>
 </template>