update function, create botcard, update cards

netlify/functions/bot-status.js

@@ -6,8 +6,23 @@ exports.handler = async function(event, context) {
 			Authorization: `Bot ${process.env.token}`,
 		},
 	});
+	let statusResponse = await axios.get(
+		`https://discord.com/api/v9/users/@me/connections`,
+		{
+			headers: {
+				Authorization: `Bot ${process.env.token}`,
+			},
+		}
+	);
+	console.log(statusResponse.data);
 	return {
 		statusCode: 200,
-		body: JSON.stringify(response.data),
+		body: JSON.stringify({
+			info: response.data,
+			status: statusResponse.data,
+		}),
+		headers: {
+			'Content-Type': 'application/json',
+		},
 	};
 };

src/components/BotCard.vue

@@ -0,0 +1,63 @@
+<template>
+	<div class="card">
+		<h3>bot card</h3>
+		<p>
+			Bot Name:
+			{{ status.info.username + '#' + status.info.discriminator }} <br />
+			Bot ID: {{ status.info.id }} <br />
+			Bot Avatar:
+			<img
+				:src="
+					`https://cdn.discordapp.com/avatars/${status.info.id}/${
+						status.info.avatar
+					}.png?size=64`
+				"
+				alt=""
+				v-if="status"
+			/>
+			<br />
+			Bot Status: {{ status.status }} <br />
+			Bot Info: {{ status.info }}
+		</p>
+	</div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+	name: 'BotCard',
+	data() {
+		return {
+			status: {},
+		};
+	},
+	mounted() {
+		this.fetchData();
+	},
+	methods: {
+		fetchData: function() {
+			axios.get(`/.netlify/functions/bot-status`).then((response) => {
+				this.status = response.data;
+			});
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.card {
+	display: inline-block;
+	border: 1px solid var(--gray);
+	border-radius: 4px;
+	padding: 1rem;
+	margin: 1rem 0.2rem;
+	width: 100%;
+	transition-duration: var(--trandur);
+	&:hover,
+	&:focus {
+		border: 1px solid transparent;
+		box-shadow: 0 0 10px black;
+	}
+}
+</style>

src/components/Card.vue

@@ -1,5 +1,8 @@
 <template>
-	<p>This is a card.</p>
+	<!-- <g-image alt="" :src="require(`../assets/spis/${photo}`)" /> -->
+	<div class="card">
+		<h3>{{ name }}</h3>
+	</div>
 </template>
 
 <script>
@@ -14,3 +17,20 @@ export default {
 	},
 };
 </script>
+
+<style lang="scss" scoped>
+.card {
+	display: inline-block;
+	border: 1px solid var(--gray);
+	border-radius: 4px;
+	padding: 1rem;
+	margin: 1rem 0.2rem;
+	width: 8rem;
+	transition-duration: var(--trandur);
+	&:hover,
+	&:focus {
+		border: 1px solid transparent;
+		box-shadow: 0 0 10px black;
+	}
+}
+</style>

src/pages/Index.vue

@@ -1,14 +1,19 @@
 <template>
 	<main>
+		<header>
+			<g-link
+				to="/"
+				style="color: inherit; text-decoration: inherit;background-color: inherit"
+			>
+				<div style="display:flex;flex-direction:row">
+					<g-image src="~/assets/main-logo-x64.png" width="64"></g-image>
+					<h1>Gractwo</h1>
+				</div>
+			</g-link>
 			<p style="text-align: center">
 				Strona w trakcie rewrite-u! Zapraszamy później.
 			</p>
-		<g-link to="/" style="color: inherit; text-decoration: inherit">
-			<header>
-				<g-image src="~/assets/main-logo-x64.png" width="64"></g-image>
-				<h1>Gractwo</h1>
 		</header>
-		</g-link>
 		<section>
 			<h2>
 				Witajcie w Gractwie!
@@ -37,6 +42,7 @@
 			<p>
 				Sprawdź jak się ma nasz bot discordowy - in progress!
 			</p>
+			<BotCard />
 		</section>
 		<section>
 			<h2>Spis Moderacji</h2>
@@ -44,7 +50,11 @@
 				Ludzie stojący za Gractwem - in progress!
 			</p>
 			<div class="cards">
-				<!-- <Card id="jamesen" /> -->
+				<Card id="jamesen" name="Jakub Mańczak" photo="~/assets/cards/.png" />
+				<Card id="kuolek" name="Olek Kulka" />
+				<Card id="mollin" name="Jakub Mollin" />
+				<Card id="adam" name="Adam Cała" />
+				<Card id="franek" name="Franek Cała" />
 			</div>
 		</section>
 		<section>
@@ -59,6 +69,7 @@
 
 <script>
 import Card from '~/components/Card.vue';
+import BotCard from '~/components/BotCard.vue';
 
 export default {
 	metaInfo: {
@@ -66,6 +77,7 @@ export default {
 	},
 	components: {
 		Card,
+		BotCard,
 	},
 };
 </script>
@@ -78,7 +90,7 @@ main {
 	padding-right: 24px;
 	header {
 		display: flex;
-		flex-direction: row;
+		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 		text-align: center;
@@ -90,6 +102,13 @@ main {
 	}
 	section {
 		padding: 2rem 0 4rem;
+		.cards {
+			display: flex;
+			flex-wrap: wrap;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+		}
 	}
 	h1 {
 		font-size: 3rem;