adding version to stats page

package.json

@@ -7,15 +7,32 @@
     "start": "vite",
     "build": "tsc && vite build",
     "serve": "vite preview",
+    "lint": "eslint .",
     "analyze": "tsc && vite build && source-map-explorer 'build/static/js/*.js'"
   },
   "dependencies": {
     "@heroicons/react": "^2.1.1",
+    "@types/lodash.defaultsdeep": "^4.6.9",
+    "@types/lodash.merge": "^4.6.9",
+    "@types/qs": "^6.9.11",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/seedrandom": "^3.0.8",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
     "deep-object-diff": "^1.1.9",
+    "eslint": "^8.56.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-sonarjs": "^0.23.0",
     "i18next": "^23.8.2",
     "i18next-browser-languagedetector": "^7.2.0",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.merge": "^4.6.2",
+    "postcss": "^8.4.34",
     "qs": "^6.11.2",
     "rc-slider": "^10.5.0",
     "react": "^18.2.0",
@@ -24,28 +41,15 @@
     "react-i18next": "^14.0.5",
     "react-router-dom": "^6.22.0",
     "recharts": "^2.11.0",
-    "seedrandom": "^3.0.5",
-    "vite-plugin-pwa": "^0.17.5"
-  },
-  "devDependencies": {
-    "@types/lodash.defaultsdeep": "^4.6.9",
-    "@types/lodash.merge": "^4.6.9",
-    "@types/qs": "^6.9.11",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.18",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/seedrandom": "^3.0.8",
-    "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.17",
-    "eslint": "^8.56.0",
-    "eslint-plugin-sonarjs": "^0.23.0",
-    "postcss": "^8.4.34",
     "sass": "^1.70.0",
+    "seedrandom": "^3.0.5",
     "source-map-explorer": "^2.5.3",
     "tailwindcss": "^3.4.1",
     "translation-check": "^1.1.0",
     "typescript": "^5",
-    "vite": "^5.0.12"
+    "vite": "^5.0.12",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-pwa": "^0.17.5"
   },
   "browserslist": {
     "production": [

src/generic/Toggle.module.scss

@@ -2,7 +2,7 @@
 
 .wrapper {
     label:has(input:checked) {
-        background-color: var(--color-accent-text);
+        background-color: var(--color-text);
     }
 
     display: flex;
@@ -33,7 +33,7 @@
         aspect-ratio: 1/1;
         border: 1px solid $blue;
         border-radius: 100%;
-        background-color: var(--color-accent-text);
+        background-color: var(--color-text);
     }
 
     input:checked+div {

src/locales/de.json

@@ -72,7 +72,8 @@
     },
     "stats": {
         "deepnesses": "Deepnesse",
-        "tags": "Tags"
+        "tags": "Tags",
+        "version": "Version"
     },
     "explanation": {
         "slogan": "Über das reden, was wirklich wichtig ist",

src/locales/en.json

@@ -72,7 +72,8 @@
     },
     "stats": {
         "deepnesses": "Deepnesses",
-        "tags": "Tags"
+        "tags": "Tags",
+        "version": "Version"
     },
     "explanation": {
         "slogan": "Getting people to talk about the stuff that really matters",

src/pages/Stats.tsx

@@ -21,6 +21,7 @@ export const Stats: FC = () => {
     <h2>{statsT( 'tags' )}</h2>
     <LinePlot questions={questions} groupBy={tagGrouper} />
     <BarPlot questions={questions} groupBy={( q ): string[] => q.tags || []} axisMapper={tagsT}/>
+    <p className='text-center text-gray-500'>{statsT( 'version' )}: {__BUILD_DATE__}</p>
   </>
   )
 }

src/styles/_colors.scss

@@ -3,32 +3,29 @@ $accentColorDarkBlue: #062048;
 $accentColorLightBlue: #052049;
 $accentColorOffWhite: #c6cdd7;
 
-$borderStyle: var(--border-thickness) solid var(--color-accent-text);
+$borderStyle: var(--border-thickness) solid var(--color-text);
 
 * {
-    border-color: var(--color-accent-text);
+    border-color: var(--color-text);
 }
 
 @mixin dark-mode-styling {
     --color-body-background: #{$blue};
     --color-text: #d5d9e0;
     --color-accent-background: #{$accentColorDarkBlue};
-    --color-accent-text: #{$accentColorOffWhite};
     --color-input-background: #{$accentColorOffWhite};
     --color-input-text: #{$blue};
     --color-red: #600000;
     --color-red-foreground: #f87171;
     --color-green: #004000;
     --color-yellow-foreground: #facc15;
-
     --border-thickness: 1px;
 }
 
 @mixin light-mode-styling {
     --color-body-background: white;
     --color-text: #{$blue};
     --color-accent-background: #8bb6fb;
-    --color-accent-text: #{$accentColorDarkBlue};
     --color-input-background: #{$accentColorOffWhite};
     --color-input-text: #{$blue};
     --color-red: #FF6060;

src/styles/_slider.scss

@@ -3,13 +3,13 @@
 
     .rc-slider-rail,
     .rc-slider-track {
-        background-color: var(--color-accent-text);
+        background-color: var(--color-text);
     }
 
     .rc-slider-dot,
     .rc-slider-dot-active,
     .rc-slider-handle {
-        border-color: var(--color-accent-text) !important;
+        border-color: var(--color-text) !important;
         box-shadow: none !important;
     }
 

tailwind.config.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}' ],
+  content: [ './index.html', './src/**/*.{js,ts,jsx,tsx}' ],
   theme: {
     extend: {},
   },

tsconfig.json

@@ -24,6 +24,7 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src",
+    "vite-env.d.ts"
   ]
 }

vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare const __BUILD_DATE__: string

vite.config.ts

@@ -1,8 +1,9 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
 import { VitePWA } from 'vite-plugin-pwa'
+import eslint from 'vite-plugin-eslint'
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [ react(), VitePWA({ registerType: 'autoUpdate'}) ],
-});
+export default defineConfig( {
+  plugins: [ react(), eslint(), VitePWA( { registerType: 'autoUpdate' } ) ],
+  define: { __BUILD_DATE__: `"${ new Date().toISOString() }"` }
+} )