Skip to content

Commit b4057dc

Browse files
arnabsen1729arnabsen1729
committed
Resolved conflicts
2 parents 440464d + d3a8c2c commit b4057dc

File tree

7 files changed

+153
-33
lines changed

7 files changed

+153
-33
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@ node_modules
88
# intellij stuff
99
.idea/
1010
components.d.ts
11+
.env

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
"@headlessui/vue": "^1.3.0",
1212
"@vueuse/core": "^5.0.3",
1313
"@vueuse/head": "^0.6.0",
14+
"axios": "^0.21.1",
15+
"dayjs": "^1.10.5",
1416
"nprogress": "^0.2.0",
1517
"prism-theme-vars": "^0.2.2",
1618
"vue": "^3.1.2",

‎pnpm-lock.yaml‎

Lines changed: 35 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sample.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_CALENDAR_KEY=

‎src/logic/events.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import axios from 'axios'
2+
import dayjs from 'dayjs'
3+
4+
const DATE_FORMAT = 'DD MMM, YYYY'
5+
6+
export const getEvents = async(): Promise<any> => {
7+
const { data } = await axios.get(`https://www.googleapis.com/calendar/v3/calendars/5rbvb4k7c10ujfrpeboh5je074@group.calendar.google.com/events?key=${import.meta.env.VITE_CALENDAR_KEY}`)
8+
9+
return data
10+
}
11+
12+
export const formatDateTime = (dateTime: string): string => {
13+
return dayjs(dateTime).format(DATE_FORMAT)
14+
}
15+
16+
export const ytEvents: Array<{link: string; image: string}> = [
17+
{ 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' },
18+
{ 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' },
19+
{ 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' },
20+
{ 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' },
21+
{ 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' },
22+
{ 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' },
23+
]

‎src/logic/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from './dark'
22
export * from './chapters'
33
export * from './team'
4+
export * from './events'

‎src/pages/events.vue‎

Lines changed: 90 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<script setup lang="ts">
22
import { useHead } from '@vueuse/head'
3+
import { onMounted, reactive } from 'vue'
4+
import { getEvents, formatDateTime, ytEvents } from '~/logic'
5+
import Calendar from '~/components/Calendar.vue'
6+
37
useHead({
48
// Can be static or computed
59
title: 'Events | CodeIIEST',
@@ -11,44 +15,97 @@ useHead({
1115
],
1216
})
1317
14-
const events: Array<{link: String; image: String}> = [
15-
{ 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' },
16-
{ 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' },
17-
{ 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' },
18-
{ 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' },
19-
{ 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' },
20-
{ 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' },
21-
]
18+
const events: Array<any> = reactive([])
19+
20+
onMounted(async() => {
21+
const { items } = await getEvents()
22+
items.forEach((i: any) => events.push(i))
23+
})
24+
2225
</script>
26+
2327
<template>
24-
<div
25-
class="max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-24"
26-
>
27-
<div class="space-y-14">
28-
<div>
29-
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
30-
Events
31-
</h2>
32-
<p class="text-xl text-gray-500 dark:text-gray-300">
33-
You will find the various events and sessions the chapters of CodeIIEST organizes in the calendar.
28+
<div class="py-8">
29+
<div class="mb-12">
30+
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
31+
Events
32+
</h2>
33+
<p
34+
class="text-xl text-gray-500 dark:text-gray-300"
35+
>
36+
You will find the various events and sessions the chapters of CodeIIEST organizes in the calendar.
37+
</p>
38+
</div>
39+
<div class="max-w-lg mx-auto px-6">
40+
<div class="flow-root">
41+
<p v-if="events.length === 0">
42+
No events
3443
</p>
35-
<div class="flex justify-center mt-10">
36-
<Calendar />
37-
</div>
44+
<ul class="mb-16">
45+
<li v-for="(event) in events" :key="event.id">
46+
<div class="relative pb-8">
47+
<span
48+
class="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-700 dark:bg-gray-200"
49+
aria-hidden="true"
50+
></span>
51+
<div class="relative flex items-start space-x-3">
52+
<div class="relative">
53+
<carbon-code class="p-1 h-10 w-10 text-bold rounded-full text-red-500 dark:text-red-400 bg-white dark:bg-dark-900 flex items-center justify-center" />
54+
</div>
55+
<div class="min-w-0 flex-1 text-left pl-4">
56+
<div>
57+
<div>
58+
<a
59+
href="#"
60+
class="font-medium text-red-600 font-600 text-md dark:text-red-400"
61+
>{{ event.summary }}</a>
62+
</div>
63+
<p
64+
class="mt-0.5 text-sm text-gray-500 font-300 italic dark:text-gray-400"
65+
>
66+
{{ formatDateTime(event.start.dateTime) }} ~ {{ formatDateTime(event.end.dateTime) }}
67+
</p>
68+
</div>
69+
<div class="mt-4 text-sm text-gray-700 font-500 dark:text-gray-300">
70+
<p>{{ event.description }}</p>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
</li>
76+
</ul>
3877
</div>
39-
<div>
40-
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
41-
Past Events
42-
</h2>
43-
<p class="text-xl text-gray-500 dark:text-gray-300">
44-
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>.
45-
</p>
46-
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 justify-center mt-10 px-10">
47-
<div v-for="event in events" :key="event.link">
48-
<a :href="event.link" target="_blank"><img :src="event.image"></a>
49-
</div>
50-
</div>
78+
</div>
79+
</div>
80+
<div class="flex flex-col justify-center items-center">
81+
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
82+
Past Events & Sessions
83+
</h2>
84+
<p class="text-xl text-gray-500 dark:text-gray-300">
85+
All our past recorded events and sessions are uploaded to our
86+
<a
87+
class="text-red-400 hover:text-red-600 hover:underline"
88+
href="https://www.youtube.com/codeiiest"
89+
target="_blank"
90+
>Youtube Channel</a>.
91+
</p>
92+
<div class="grid md:grid-cols-2 grid-cols-1 mt-4">
93+
<div v-for="event in ytEvents" :key="event.link" class="max-w-md p-2">
94+
<a :href="event.link" target="_blank">
95+
<img :src="event.image" />
96+
</a>
5197
</div>
5298
</div>
5399
</div>
100+
<div class="mt-16 flex flex-col justify-center items-center">
101+
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
102+
Calendar
103+
</h2>
104+
<p
105+
class="text-xl text-gray-500 dark:text-gray-300 mb-4"
106+
>
107+
Refer to the calendar below to know more about the events & sessions organised by CodeIIEST
108+
</p>
109+
<Calendar />
110+
</div>
54111
</template>

0 commit comments

Comments
 (0)