Render version string (just the GIT SHA) in the footer

benvinegar · Feb 15, 2024 · a4f0617 · a4f0617
1 parent 1f33c53
commit a4f0617
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 9 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,5 +1,9 @@
 import styles from "./globals.css";
-import type { LinksFunction } from "@remix-run/cloudflare";
+import {
+    json,
+    LoaderFunctionArgs,
+    type LinksFunction,
+} from "@remix-run/cloudflare";
 import { cssBundleHref } from "@remix-run/css-bundle";
 import {
     Links,
@@ -8,14 +12,21 @@ import {
     Outlet,
     Scripts,
     ScrollRestoration,
+    useLoaderData,
 } from "@remix-run/react";
 
 export const links: LinksFunction = () => [
     { rel: "stylesheet", href: styles },
     ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
+export const loader = ({ context }: LoaderFunctionArgs) => {
+    return json({ version: context.env.VERSION });
+};
+
 export default function App() {
+    const data = useLoaderData<typeof loader>();
+
     return (
         <html lang="en">
             <head>
@@ -72,6 +83,17 @@ export default function App() {
                     <main role="main" className="w-full">
                         <Outlet />
                     </main>
+
+                    <footer className="py-4 flex justify-end text-s">
+                        <div>
+                            Version{" "}
+                            <a
+                                href={`https://github.com/benvinegar/counterscale/commit/${data.version}`}
+                            >
+                                {data.version.slice(0, 7)}
+                            </a>
+                        </div>
+                    </footer>
                 </div>
                 <ScrollRestoration />
                 <Scripts />

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -46,7 +46,7 @@ export default function Index() {
                 </div>
             </div>
 
-            <div className="flex flex-wrap">
+            <div className="flex flex-wrap border-b-2 ">
                 <div className="md:basis-1/2 mb-8">
                     <h3 className="text-3xl mb-4">Free and open source</h3>
                     <p>

diff --git a/app/routes/dashboard.test.tsx b/app/routes/dashboard.test.tsx
@@ -47,6 +47,7 @@ describe("Dashboard route", () => {
                 loader({
                     context: {
                         env: {
+                            VERSION: "",
                             CF_BEARER_TOKEN: "",
                             CF_ACCOUNT_ID: "",
                         },
@@ -70,6 +71,7 @@ describe("Dashboard route", () => {
             const response = await loader({
                 context: {
                     env: {
+                        VERSION: "",
                         CF_BEARER_TOKEN: "fake",
                         CF_ACCOUNT_ID: "fake",
                     },
@@ -98,6 +100,7 @@ describe("Dashboard route", () => {
             const response = await loader({
                 context: {
                     env: {
+                        VERSION: "",
                         CF_BEARER_TOKEN: "fake",
                         CF_ACCOUNT_ID: "fake",
                     },
@@ -181,6 +184,7 @@ describe("Dashboard route", () => {
             const response = await loader({
                 context: {
                     env: {
+                        VERSION: "",
                         CF_BEARER_TOKEN: "fake",
                         CF_ACCOUNT_ID: "fake",
                     },
@@ -233,6 +237,7 @@ describe("Dashboard route", () => {
             const response = await loader({
                 context: {
                     env: {
+                        VERSION: "",
                         CF_BEARER_TOKEN: "fake",
                         CF_ACCOUNT_ID: "fake",
                     },

diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
@@ -26,6 +26,7 @@ export const meta: MetaFunction = () => {
 declare module "@remix-run/server-runtime" {
     export interface AppLoadContext {
         env: {
+            VERSION: string;
             CF_BEARER_TOKEN: string;
             CF_ACCOUNT_ID: string;
         };
@@ -179,10 +180,7 @@ export default function Dashboard() {
     const countByCountryName = convertCountryCodesToNames(data.countByCountry);
 
     return (
-        <div
-            style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}
-            className="mb-12"
-        >
+        <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
             <div className="w-full mb-4 flex gap-4">
                 <div className="w-1/2 sm:w-1/3 md:w-1/5">
                     <Select

diff --git a/package.json b/package.json
@@ -5,10 +5,10 @@
     "type": "module",
     "scripts": {
         "build": "remix build",
-        "deploy": "wrangler deploy",
+        "deploy": "wrangler deploy --var VERSION:$(git rev-parse HEAD)",
         "dev": "remix dev --manual -c \"npm start\"",
         "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
-        "start": "wrangler dev ./build/index.js",
+        "start": "wrangler dev ./build/index.js --var VERSION:$(git rev-parse HEAD)",
         "test": "TZ=EST vitest run",
         "test-ci": "TZ=EST vitest run --coverage",
         "typecheck": "tsc",

diff --git a/server.ts b/server.ts
@@ -20,7 +20,7 @@ if (process.env.NODE_ENV === "development") {
 export default {
     async fetch(
         request: Request,
-        env: Environment,
+        env: Environment & { VERSION: string },
         ctx: ExecutionContext,
     ): Promise<Response> {
         try {