footer with deploy date

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'
 }

i18n/locales/ru/site.json5

@@ -32,5 +32,6 @@
  PROBABLE_TYPE_PLANET: 'Вероятный тип планеты',
  UPDATED: 'Обновлено',
  CURRENT_VERSION: 'Текущая версия',
- OPEN_CHANGELOG: 'Открыть журнал изменений'
+ OPEN_CHANGELOG: 'Открыть журнал изменений',
+ Deployed: 'Приложение развернуто'
 }

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';
 

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>

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];
  });
  },