From a050b7f436c31696d076c994f61d3c764e585a93 Mon Sep 17 00:00:00 2001
From: Xinos <userxinos@gmail.com>
Date: Fri, 20 Oct 2023 12:55:43 +0700
Subject: [PATCH] footer with deploy date

---
 i18n/locales/en/site.json5   |  3 ++-
 i18n/locales/ru/site.json5   |  3 ++-
 src/App.vue                  |  2 ++
 src/components/TheFooter.vue | 42 ++++++++++++++++++++++++++++++++++++
 vue.config.js                |  2 ++
 5 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 src/components/TheFooter.vue

diff --git a/i18n/locales/en/site.json5 b/i18n/locales/en/site.json5
index 62e4301b3..4aade5670 100644
--- a/i18n/locales/en/site.json5
+++ b/i18n/locales/en/site.json5
@@ -34,5 +34,6 @@
   PROBABLE_TYPE_PLANET: 'Probable type of planet',
   UPDATED: 'Updated',
   CURRENT_VERSION: 'Current version',
-  OPEN_CHANGELOG: 'open changelog'
+  OPEN_CHANGELOG: 'open changelog',
+  DEPLOYED: 'App deployed'
 }
diff --git a/i18n/locales/ru/site.json5 b/i18n/locales/ru/site.json5
index 5c2802566..0e52babab 100644
--- a/i18n/locales/ru/site.json5
+++ b/i18n/locales/ru/site.json5
@@ -32,5 +32,6 @@
   PROBABLE_TYPE_PLANET: 'Вероятный тип планеты',
   UPDATED: 'Обновлено',
   CURRENT_VERSION: 'Текущая версия',
-  OPEN_CHANGELOG: 'Открыть журнал изменений'
+  OPEN_CHANGELOG: 'Открыть журнал изменений',
+  Deployed: 'Приложение развернуто'
 }
diff --git a/src/App.vue b/src/App.vue
index 1fe93f275..4725b5166 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,6 +31,7 @@
       </div>
     </div>
 
+    <the-footer />
     <go-top />
     <changelog
       :is-open="changelogIsOpen"
@@ -46,6 +47,7 @@ import router from '@Utils/Vue/router';
 import { Head as VHead } from '@vueuse/head';
 import GoTop from '@/components/GoTop.vue';
 import TheHeader from '@/components/TheHeader.vue';
+import TheFooter from '@/components/TheFooter.vue';
 import Sidebar from '@/components/TheSidebar.vue';
 import Changelog from '@/components/Changelog.vue';
 
diff --git a/src/components/TheFooter.vue b/src/components/TheFooter.vue
new file mode 100644
index 000000000..3a71a418a
--- /dev/null
+++ b/src/components/TheFooter.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="container">
+    <div class="bg">
+      <footer class="footer">
+        <p>
+          {{ `${$t('DEPLOYED')}: ${dateFormat}` }}
+        </p>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { BUILD_TIMESTAMP } = process.env;
+const date = new Date(BUILD_TIMESTAMP);
+const dateFormat = new Intl.DateTimeFormat(undefined, { dateStyle: 'long' } as Intl.DateTimeFormatOptions).format(date);
+</script>
+
+<style scoped lang="scss">
+@import "../style/vars";
+
+$mw: 960px;
+
+.container {
+    padding: 0 12%;
+    margin-top: 1%;
+
+    .bg {
+        padding: 1%;
+        background-color: #161b1d;
+
+        .footer p {
+            text-align: center;
+            font-size: 90%;
+        }
+    }
+
+    @media screen and (max-width: $mw) {
+        padding: 0;
+    }
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index e753d32b7..f634b46d6 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,6 +2,7 @@ const configureWebpack = require('./webpack.config.js');
 
 const isDev = (process.env.NODE_ENV === 'development');
 const { version } = require('./package.json');
+const currentDate = new Date();
 const isNebulaBuild = !!process.env.VUE_APP_NEBULA_BUILD;
 
 module.exports = {
@@ -18,6 +19,7 @@ module.exports = {
         });
         config.plugin('define').tap(([options]) => {
             options['process.env']['VERSION'] = JSON.stringify(version);
+            options['process.env']['BUILD_TIMESTAMP'] = currentDate.getTime();
             return [options];
         });
     },