Merge pull request #83 from jordanopensource/development

merge "development" into "main"

Author: thread-koder

components/LastUpdated.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-if="lastUpdated" class="flex justify-end mr-24 pt-5">
+    <p class="opacity-50">
+      {{ lastUpdated }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LastUpdated',
+  data() {
+    return {
+      lastUpdated: null,
+    }
+  },
+  async fetch() {
+    const response = await this.$axios.get('/v1/stats/updated')
+    const year = new Date(response.data.lastUpdated).getFullYear()
+    const month = new Date(response.data.lastUpdated).toLocaleString('en-GB', {
+      month: '2-digit',
+    })
+    const day = new Date(response.data.lastUpdated).toLocaleString('en-GB', {
+      day: '2-digit',
+    })
+    const time = new Date(response.data.lastUpdated).toLocaleTimeString('en-GB')
+    this.lastUpdated = `The information on this site was last updated at ${year}-${month}-${day} ${time}`
+  },
+}
+</script>
+
+<style lang="postcss" scoped>
+.cards-container {
+  @apply block py-2 w-11/12 mx-auto lg:flex lg:flex-nowrap lg:justify-center;
+}
+</style>

components/Stats.vue

@@ -38,7 +38,7 @@
 import { mapState } from 'vuex'
 import Card from './Card.vue'
 export default {
-  name: 'Stats',
+  name: 'StatsCards',
   components: {
     Card,
   },

pages/contributors/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="page-container">
     <Hero title="Contributors" />
+    <LastUpdated />
     <div class="area-chart-section">
       <div class="chart-header">
         <div class="divider-black"></div>
@@ -30,13 +31,15 @@
 </template>
 
 <script>
+import LastUpdated from '~/components/LastUpdated.vue'
 export default {
   name: 'ContributorsPage',
   components: {
     Hero: () => import('~/components/Hero.vue'),
     AreaChart: () => import('~/components/AreaChart.vue'),
     BarChart: () => import('~/components/BarChart.vue'),
     TopDevelopers: () => import('~/components/TopDevelopers.vue'),
+    LastUpdated,
   },
   data() {
     return {

pages/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="bg-gray">
     <Hero />
+    <LastUpdated />
     <LazyHydrate when-visible>
       <Stats />
     </LazyHydrate>
@@ -13,12 +14,14 @@
 <script>
 import LazyHydrate from 'vue-lazy-hydration'
 import Hero from '../components/HomePageHero.vue'
+import LastUpdated from '~/components/LastUpdated.vue'
 export default {
   components: {
     Hero,
     Stats: () => import('../components/Stats.vue'),
     TopDevelopers: () => import('../components/TopDevelopers.vue'),
     LazyHydrate,
+    LastUpdated,
   },
   mounted() {
     this.$store.commit('setPeriod', 'last_30_days')

pages/organizations/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="page-container">
     <Hero title="Organizations" />
+    <LastUpdated />
     <div class="area-chart-section">
       <div class="chart-header">
         <div class="divider-black"></div>
@@ -21,12 +22,14 @@
 </template>
 
 <script>
+import LastUpdated from '~/components/LastUpdated.vue'
 export default {
   name: 'OrganizationsPage',
   components: {
     Hero: () => import('~/components/Hero.vue'),
     AreaChart: () => import('~/components/AreaChart.vue'),
     TopOrganizations: () => import('~/components/TopOrganizations.vue'),
+    LastUpdated,
   },
   data() {
     return {