feat: version text

.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
 

.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

app.vue

@@ -6,7 +6,10 @@ useHead({
   ],
   meta: [
     { name: "description", content: "Автоматически обновляемый список ссылок на каналы радио Record" }
-  ]
+  ],
+  htmlAttrs: {
+    "data-bs-theme": "dark"
+  }
 });
 useSeoMeta({
   ogType: "website",

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;

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>

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>

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: {

pages/index.vue

@@ -1,3 +1,5 @@
 <template>
-  <StationList />
+  <div class="container p-3">
+    <StationList />
+  </div>
 </template>

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");
+}