From dde54ba50266e3f4fd4a49144e0fb60d235fc5ab Mon Sep 17 00:00:00 2001
From: Virenbar <Virenbar@users.noreply.github.com>
Date: Tue, 10 Oct 2023 05:57:57 +0500
Subject: [PATCH] feat: version text

---
 .github/workflows/build.yml  |  8 ++++++--
 .github/workflows/update.yml |  2 +-
 app.vue                      |  5 ++++-
 assets/css/variables.scss    |  5 ++++-
 components/Page/Footer.vue   | 11 ++++++++++-
 components/Station/List.vue  | 19 +++++++------------
 nuxt.config.ts               |  5 ++++-
 pages/index.vue              |  4 +++-
 utils/format.ts              | 27 +++++++++++++++++++++++++++
 9 files changed, 66 insertions(+), 20 deletions(-)
 create mode 100644 utils/format.ts

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 147d3ef..bd7f271 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -18,15 +18,19 @@ jobs:
           fetch-depth: 0
           ref: master
 
-      - name: Use Node.js 18.x
+      - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18.x
           cache: "yarn"
 
+      - name: Set variables
+        run: |
+          echo "NUXT_PUBLIC_BRANCH=${GITHUB_REF#refs/heads/}" >> "$GITHUB_ENV"
+          echo "NUXT_PUBLIC_HASH=$(git rev-parse --short "$GITHUB_SHA")" >> "$GITHUB_ENV"
+
       - name: Build website
         run: |
-          date +"DATE=%Y.%m.%d" > .env
           yarn install --immutable --immutable-cache --check-cache
           yarn generate
 
diff --git a/.github/workflows/update.yml b/.github/workflows/update.yml
index 1d8f64f..0083fb9 100644
--- a/.github/workflows/update.yml
+++ b/.github/workflows/update.yml
@@ -13,7 +13,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4
 
-      - name: Use Node.js 18.x
+      - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18.x
diff --git a/app.vue b/app.vue
index 2b06967..83bc730 100644
--- a/app.vue
+++ b/app.vue
@@ -6,7 +6,10 @@ useHead({
   ],
   meta: [
     { name: "description", content: "Автоматически обновляемый список ссылок на каналы радио Record" }
-  ]
+  ],
+  htmlAttrs: {
+    "data-bs-theme": "dark"
+  }
 });
 useSeoMeta({
   ogType: "website",
diff --git a/assets/css/variables.scss b/assets/css/variables.scss
index 97ab205..52714cc 100644
--- a/assets/css/variables.scss
+++ b/assets/css/variables.scss
@@ -45,10 +45,13 @@ $font-family-sans-serif: "Roboto", "Segoe UI", "Helvetica Neue", "Noto Sans", "L
 
 // Links
 $link-color: $brand-accent;
+$link-color-dark: $brand-accent;
 
 // Body
 $body-bg: $neutrals-800;
+$body-bg-dark: $neutrals-800;
 $body-color: $text-night-primary;
+$body-color-dark: $text-night-primary;
 
 // Card
 $card-bg: $neutrals-700;
@@ -59,4 +62,4 @@ $card-spacer-x: .5rem;
 $dropdown-bg: $neutrals-800;
 $dropdown-link-color: $body-color;
 $dropdown-link-hover-color: $body-color;
-$dropdown-link-hover-bg: $neutrals-600;
+$dropdown-link-hover-bg: $neutrals-600;
\ No newline at end of file
diff --git a/components/Page/Footer.vue b/components/Page/Footer.vue
index a818059..09adaaf 100644
--- a/components/Page/Footer.vue
+++ b/components/Page/Footer.vue
@@ -1,10 +1,19 @@
+<script setup lang="ts">
+const config = useRuntimeConfig();
+const tree = `${config.public.repository}/tree/${config.public.hash}`;
+</script>
 <template>
   <footer class="container-fluid py-1 px-3 d-flex justify-content-between font-monospace">
     <div>
       Hosted on <a href="https://pages.github.com">GitHub Pages</a>
     </div>
     <div>
-      Source at <a href="https://github.com/Virenbar/RadioRecord">GitHub</a>
+      Version: <a :href="tree" class="text-link" rel="noopener" target="_blank">
+        {{ config.public.branch }}@{{ config.public.hash.substring(0, 7) }}
+      </a>#{{ formatDate(new Date(config.public.date)) }}
+    </div>
+    <div>
+      Source at <a :href="config.public.repository">GitHub</a>
     </div>
   </footer>
 </template>
diff --git a/components/Station/List.vue b/components/Station/List.vue
index 41d54d7..1c41ed3 100644
--- a/components/Station/List.vue
+++ b/components/Station/List.vue
@@ -16,17 +16,12 @@ const stations = computed(() => {
 const fake = (4 - (stations.value.length % 4)) % 4;
 </script>
 <template>
-  <div class="container p-3">
-    <div class="d-flex align-items-center justify-content-between font-monospace">
-      <h5>Каналов: {{ stations.length }}</h5>
-      <StationSort />
-    </div>
-    <div class="d-flex flex-wrap justify-content-center">
-      <StationCard v-for="station in stations" :key="station.id" :station="station" />
-      <StationCard v-for="n in fake" :key="n" />
-    </div>
-    <div class="text-center pt-3 font-monospace">
-      Последнее обновление: {{ new Date(useRuntimeConfig().public.date).toLocaleDateString() }}
-    </div>
+  <div class="d-flex align-items-center justify-content-between font-monospace">
+    <h5>Каналов: {{ stations.length }}</h5>
+    <StationSort />
+  </div>
+  <div class="d-flex flex-wrap justify-content-center">
+    <StationCard v-for="station in stations" :key="station.id" :station="station" />
+    <StationCard v-for="n in fake" :key="n" />
   </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f16dab4..c1438db 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,7 +7,10 @@ export default defineNuxtConfig({
   yandexMetrika: { id: "87731504" },
   runtimeConfig: {
     public: {
-      date: process.env.DATE ?? "2000.01.01"
+      repository: "https://github.com/Virenbar/RadioRecord",
+      branch: process.env.BRANCH || "master",
+      hash: process.env.COMMIT_REF || "unknown",
+      date: new Date().toISOString()
     }
   },
   vite: {
diff --git a/pages/index.vue b/pages/index.vue
index d145240..ae8a6ce 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,3 +1,5 @@
 <template>
-  <StationList />
+  <div class="container p-3">
+    <StationList />
+  </div>
 </template>
diff --git a/utils/format.ts b/utils/format.ts
new file mode 100644
index 0000000..db04a38
--- /dev/null
+++ b/utils/format.ts
@@ -0,0 +1,27 @@
+export function formatDateTime(date: Date) {
+  const year = date.getFullYear();
+  const month = formatNumber(date.getMonth() + 1);//WTF C -> Java -> JS
+  const day = formatNumber(date.getDate());
+  const hours = formatNumber(date.getHours());
+  const minutes = formatNumber(date.getMinutes());
+  const seconds = formatNumber(date.getSeconds());
+  return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
+}
+
+export function formatDate(date: Date) {
+  const year = date.getFullYear();
+  const month = formatNumber(date.getMonth() + 1);//WTF C -> Java -> JS
+  const day = formatNumber(date.getDate());
+  return `${year}.${month}.${day}`;
+}
+
+export function formatTime(date: Date) {
+  const hours = formatNumber(date.getHours());
+  const minutes = formatNumber(date.getMinutes());
+  const seconds = formatNumber(date.getSeconds());
+  return `${hours}:${minutes}:${seconds}`;
+}
+
+function formatNumber(number: number) {
+  return `${number}`.padStart(2, "0");
+}