Revamp homepage layout and components

Added git commit history and two-column responsive layout

availabili.tf/src/assets/main.css

@@ -19,12 +19,6 @@ a.button {
   padding: unset;
 }
 
-@media (hover: hover) {
-  a:hover {
-    background-color: var(--accent-transparent);
-  }
-}
-
 button {
   display: flex;
   align-items: center;

availabili.tf/src/commit.ts

@@ -0,0 +1,11 @@
+export default interface Commit {
+  verified: boolean;
+  html_url: string;
+  sha: string;
+  commit: {
+    author: {
+      name: string;
+    };
+    message: string;
+  };
+};

availabili.tf/src/components/GithubCommitHistory.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useCommitsStore } from "@/stores/commits";
+import { onMounted, ref } from "vue";
+import GithubCommitHistoryItem from "./GithubCommitHistoryItem.vue";
+
+const commitsStore = useCommitsStore();
+
+onMounted(() => {
+  commitsStore.fetchCommits();
+});
+</script>
+
+<template>
+  <div class="commit-history">
+    <div class="header">
+      <h2>Commit History</h2>
+      <a
+        class="icon"
+        href="https://github.com/HumanoidSandvichDispenser/availabili.tf/commits"
+      >
+        <button class="icon">
+          <i class="bi bi-view-list"></i>
+        </button>
+      </a>
+    </div>
+    <div>
+      <GithubCommitHistoryItem
+        v-for="commit in commitsStore.commits.slice(0, 5)"
+        :commit="commit"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.header {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

availabili.tf/src/components/GithubCommitHistoryItem.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type Commit from "@/commit";
+import { computed } from "vue";
+
+const props = defineProps<{
+  commit: Commit;
+}>();
+
+const summary = computed(() => {
+  return props.commit.commit.message.split("\n\n")[0];
+});
+
+const description = computed(() => {
+  return props.commit.commit.message.split("\n\n")[1];
+});
+</script>
+
+<template>
+  <div class="commit-history-item">
+    <div class="header">
+      <span class="circle"></span>
+      <a :href="commit.html_url">
+        <h3>
+          {{ summary }}
+        </h3>
+      </a>
+    </div>
+    <div class="description" v-if="description">
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.header {
+  display: flex;
+  align-items: center;
+}
+
+.header a {
+  color: var(--text);
+}
+
+.circle {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: var(--green);
+  margin-right: 1em;
+}
+
+.description {
+  padding: 0.5rem 2rem;
+  color: var(--subtext-0);
+
+}
+</style>

availabili.tf/src/components/MatchCard.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="match-card">
+    <div class="match-scores">
+      <div class="team-and-score">
+        <span class="team-name">
+          NVBLU
+        </span>
+        <span class="score">
+          3
+        </span>
+      </div>
+      <span class="score">-</span>
+      <div class="team-and-score">
+        <span class="score">
+          2
+        </span>
+        <span class="team-name">
+          RED
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.match-card {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem;
+  border: 1px solid var(--text);
+  border-radius: 8px;
+}
+
+.match-scores {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  font-weight: 700;
+}
+
+.match-scores span {
+  font-weight: 700;
+}
+
+.team-and-score {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.match-scores .score {
+  font-size: 1.5rem;
+}
+</style>

availabili.tf/src/stores/commits.ts

@@ -0,0 +1,30 @@
+import type Commit from "@/commit";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useCommitsStore = defineStore("commits", () => {
+  const commits = ref<Commit[]>([]);
+  const commitsMap = ref<{ [id: string]: Commit }>({ });
+
+  function fetchCommits() {
+    const user = "HumanoidSandvichDispenser";
+    const repo = "availabili.tf";
+
+    if (commits.value.length == 0) {
+      fetch(`https://api.github.com/repos/${user}/${repo}/commits`)
+        .then((response) => response.json())
+        .then((response: Commit[]) => {
+          commits.value = response;
+          response.forEach((commit) => {
+            commitsMap.value[commit.sha] = commit;
+          });
+        });
+    }
+  }
+
+  return {
+    commits,
+    commitsMap,
+    fetchCommits,
+  };
+});

availabili.tf/src/views/HomeView.vue

@@ -1,13 +1,38 @@
 <script setup lang="ts">
+import GithubCommitHistory from "@/components/GithubCommitHistory.vue";
 import TeamsListSidebar from "../components/TeamsListSidebar.vue";
 </script>
 
 <template>
-  <TeamsListSidebar />
   <main>
-    <h2>JustGetAHouse</h2>
+    <div class="home-view-container">
-    <div>
+      <div class="left">
-      test
+        <TeamsListSidebar />
+      </div>
+      <div class="right">
+        <GithubCommitHistory />
+      </div>
     </div>
   </main>
 </template>
+
+<style scoped>
+.home-view-container {
+  display: flex;
+  gap: 2rem;
+}
+
+.left {
+  flex: 2;
+}
+
+.right {
+  flex: 1;
+}
+
+@media (max-width: 1024px) {
+  .home-view-container {
+    flex-direction: column;
+  }
+}
+</style>

availabili.tf/src/views/TeamDetailsView.vue

@@ -8,6 +8,7 @@ import MembersList from "@/components/MembersList.vue";
 import moment from "moment";
 import EventList from "@/components/EventList.vue";
 import { useTeamsEventsStore } from "@/stores/teams/events";
+import MatchCard from "@/components/MatchCard.vue";
 
 const route = useRoute();
 const teamsStore = useTeamsStore();
@@ -81,7 +82,8 @@ onMounted(() => {
               </button>
             </RouterLink>
           </h2>
-          <em class="subtext">No recent matches.</em>
+          <em class="subtext" v-if="false">No recent matches.</em>
+          <MatchCard v-else />
         </div>
       </div>
     </template>
@@ -135,4 +137,10 @@ onMounted(() => {
 .icons button:hover {
   color: var(--text);
 }
+
+@media (max-width: 1024px) {
+  .content-container {
+    flex-direction: column;
+  }
+}
 </style>