Package updates

.nvmrc

@@ -0,0 +1 @@
+v22.11.0

.prettierrc

@@ -0,0 +1 @@
+{}

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

app.vue

@@ -15,9 +15,6 @@ onMounted(useMediaQuery);
 </script>
 
 <style>
-@import "xf-cmpt-lib/dist/cmpt-lib-ts.css";
-</style>
-
-<style lang="scss">
-@import "./assets/styles/index.scss";
+@import "xf-cmpt-lib/style.css";
+@import "@/assets/styles/index.scss";
 </style>

assets/styles/_mixins.scss

@@ -1,83 +1,85 @@
+@use "variables";
+
 @mixin xs {
   // 499px wide or less
-  @media only screen and (max-width: ($breakpoint-xs - 1px)) {
+  @media only screen and (max-width: (variables.$breakpoint-xs - 1px)) {
     @content;
   }
 }
 
 @mixin sm {
   // between 500px and 767px
-  @media screen and (min-width: $breakpoint-xs) and (max-width: ($breakpoint-sm - 1px)) {
+  @media screen and (min-width: variables.$breakpoint-xs) and (max-width: (variables.$breakpoint-sm - 1px)) {
     @content;
   }
 }
 
 @mixin md {
   // between 768px and 1023px
-  @media screen and (min-width: $breakpoint-sm) and (max-width: ($breakpoint-md - 1px)) {
+  @media screen and (min-width: variables.$breakpoint-sm) and (max-width: (variables.$breakpoint-md - 1px)) {
     @content;
   }
 }
 
 @mixin lg {
   // between 1024px and 1365px
-  @media only screen and (min-width: $breakpoint-md) and (max-width: ($breakpoint-lg - 1px)) {
+  @media only screen and (min-width: variables.$breakpoint-md) and (max-width: (variables.$breakpoint-lg - 1px)) {
     @content;
   }
 }
 
 @mixin xs-up {
   // 500px wide or above
-  @media only screen and (min-width: $breakpoint-xs) {
+  @media only screen and (min-width: variables.$breakpoint-xs) {
     @content;
   }
 }
 
 @mixin sm-up {
   // 768px wide or above
-  @media only screen and (min-width: $breakpoint-sm) {
+  @media only screen and (min-width: variables.$breakpoint-sm) {
     @content;
   }
 }
 
 @mixin md-up {
   // 1024px wide or above
-  @media only screen and (min-width: $breakpoint-md) {
+  @media only screen and (min-width: variables.$breakpoint-md) {
     @content;
   }
 }
 
 @mixin lg-up {
   // 1366px wide or above
-  @media only screen and (min-width: $breakpoint-lg) {
+  @media only screen and (min-width: variables.$breakpoint-lg) {
     @content;
   }
 }
 
 @mixin xs-down {
   // 499px wide or below
-  @media only screen and (max-width: ($breakpoint-xs - 1px)) {
+  @media only screen and (max-width: (variables.$breakpoint-xs - 1px)) {
     @content;
   }
 }
 
 @mixin sm-down {
   // 767px wide or below
-  @media only screen and (max-width: ($breakpoint-sm - 1px)) {
+  @media only screen and (max-width: (variables.$breakpoint-sm - 1px)) {
     @content;
   }
 }
 
 @mixin md-down {
   // 1023px wide or below
-  @media only screen and (max-width: ($breakpoint-md - 1px)) {
+  @media only screen and (max-width: (variables.$breakpoint-md - 1px)) {
     @content;
   }
 }
 
 @mixin lg-down {
   // 1365px wide or below
-  @media only screen and (max-width: ($breakpoint-lg - 1px)) {
+  @media only screen and (max-width: (variables.$breakpoint-lg - 1px)) {
     @content;
   }
 }

assets/styles/variables.scss → assets/styles/_variables.scss

@@ -15,6 +15,5 @@ $gc-colours: (
   "primary": #00a8ff,
   "secondary": #b3c5ef,
   "tertiary": #272727,
+  "white": #fff,
 );
-
-@import "./_mixins.scss";

assets/styles/index.scss

@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@use "variables";
 
 body {
   background-color: black;
@@ -25,7 +25,7 @@ body {
   }
 }
 
-@each $name, $colour in $gc-colours {
+@each $name, $colour in variables.$gc-colours {
   .xf-bg-#{$name} {
     background: $colour;
   }

components/Background/Background.vue

@@ -35,8 +35,6 @@
   </svg>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="scss" scoped>
 svg {
   width: 100vw;

components/Carousel/GcCarousel.vue

@@ -27,6 +27,8 @@
 </template>
 
 <script lang="ts" setup>
+import type { SanityImage } from "@/types/sanity.types";
+
 import "vue3-carousel/dist/carousel.css";
 import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
 
@@ -35,7 +37,7 @@ import { XfIcon } from "xf-cmpt-lib";
 // ** Props **
 const props = defineProps({
   images: {
-    type: Array as PropType<any[]>,
+    type: Array as PropType<SanityImage[]>,
     default: () => [],
   },
   allowModalOpen: {
@@ -67,20 +69,23 @@ watch(
   (val) => {
     selectedIndex.value = val;
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 
 <style lang="scss">
+@use "sass:map";
+@use "@/assets/styles/variables";
+
 .gc-carousel {
   position: relative;
 
   &-content {
     --vc-pgn-width: 10px;
     --vc-pgn-height: 10px;
-    --vc-pgn-background-color: #b3c5ef;
+    --vc-pgn-background-color: #{map.get(variables.$gc-colours, "secondary")};
     --vc-pgn-border-radius: 50%;
-    --vc-pgn-active-color: #00a8ff;
+    --vc-pgn-active-color: #{map.get(variables.$gc-colours, "primary")};
 
     --vc-nav-color: #fff;
     --vc-nav-width: 40px;
@@ -90,7 +95,7 @@ watch(
   &-expand {
     position: absolute;
     right: 15px;
-    bottom: 40px;
+    bottom: 10px;
   }
 }
 </style>

components/Footer/GcFooter.vue

@@ -14,20 +14,24 @@ const currentYear: number = new Date().getFullYear();
 </script>
 
 <style lang="scss" scoped>
+@use "sass:map";
+@use "@/assets/styles/mixins";
+@use "@/assets/styles/variables";
+
 .footer {
   width: 100%;
   display: flex;
 
   p {
     font-size: 10px;
 
-    @include md-up {
+    @include mixins.md-up {
       font-size: 14px;
     }
   }
 
   a {
-    color: map-get($gc-colours, "secondary") !important;
+    color: map.get(variables.$gc-colours, "secondary") !important;
   }
 }
 </style>

components/GcNav/DownloadOptions.vue

@@ -22,9 +22,11 @@
 </template>
 
 <script lang="ts" setup>
+import type { DownloadOptions } from "@/types/generic.types";
+
 import { XfIcon } from "xf-cmpt-lib";
 
-const downloadOptions = [
+const downloadOptions: DownloadOptions[] = [
   {
     text: "Curseforge",
     icon: "curseforge",

components/GcNav/GcNav.vue

@@ -25,12 +25,10 @@
         >
           <template #activator>
             <xf-button
-              style="order: 1"
               background-colour="primary"
               text-colour="black"
-            >
-              Download
-            </xf-button>
+              text="Download"
+            />
           </template>
 
           <download-options />
@@ -62,6 +60,8 @@ const openLink = (route: string): void => {
 </script>
 
 <style lang="scss" scoped>
+@use "@/assets/styles/mixins";
+
 :deep(.xf-menu-modal-content) {
   border-radius: 10px;
 }
@@ -71,14 +71,15 @@ const openLink = (route: string): void => {
   letter-spacing: 0.1em;
   font-weight: 700;
   font-size: 12px !important;
+  order: 1;
 
-  @include sm-up {
+  @include mixins.sm-up {
     padding-top: 10px !important;
     padding-bottom: 10px !important;
     font-size: 18px !important;
   }
 
-  @include sm-up {
+  @include mixins.sm-up {
     padding-top: 5px !important;
     padding-bottom: 5px !important;
   }

composables/index.ts

@@ -1,7 +1,52 @@
-export const formatDate = (date: Date): string => {
+export const formatDate = (date: Date | string): string => {
   return new Date(date).toLocaleDateString("en-US", {
     year: "numeric",
     month: "long",
     day: "numeric",
   });
 };
+
+export const startCountdown = (
+  startValue: number,
+  endValue: number,
+  id: string,
+) => {
+  const countingElement: HTMLElement | null = document.getElementById(id);
+  const duration: number = 2000;
+
+  let currentNumber: number = startValue;
+  let startTime: number | null = null;
+
+  const easeOutQuad = (t: number): number => t * (2 - t);
+
+  const animate = (timestamp: number): void => {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+    const progress: number = timestamp - startTime;
+    const percentage: number = Math.min(progress / duration, 1);
+    const easedPercentage: number = easeOutQuad(percentage);
+
+    currentNumber = Math.floor(
+      easedPercentage * (endValue - startValue) + startValue,
+    );
+
+    if (countingElement) {
+      countingElement.textContent = currentNumber.toLocaleString();
+    }
+
+    if (progress < duration) {
+      // Schedule the next frame
+      requestAnimationFrame(animate);
+    }
+  };
+
+  const initLoad: string | null = sessionStorage.getItem("initLoad");
+
+  if (initLoad && countingElement) {
+    countingElement.textContent = endValue.toLocaleString();
+  } else {
+    requestAnimationFrame(animate);
+  }
+};

composables/intersectionObserver.ts

@@ -1,6 +1,8 @@
+import type { InView } from "@/types/generic.types";
+
 import { ref, onMounted } from "vue";
 
-export const useIntersectionObserver = (elementId: string) => {
+export const useIntersectionObserver = (elementId: string): InView => {
   const inView = ref<boolean>(false);
 
   onMounted(() => {
@@ -13,7 +15,7 @@ export const useIntersectionObserver = (elementId: string) => {
             inView.value = true;
           }
         }),
-      { rootMargin: "-50px" }
+      { rootMargin: "-50px" },
     );
 
     if (element) {