add version information

Dockerfile

@@ -22,6 +22,10 @@ RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store pnpm i
 FROM node:current-alpine AS builder
 WORKDIR /app
 
+ARG BUILDTIME
+ARG VERSION
+ARG REVISION
+
 COPY --link --from=deps /app/node_modules ./node_modules/
 COPY . .
 
@@ -29,7 +33,7 @@ RUN <<EOF
     set -xe
     yarn next telemetry disable
     mkdir config && echo '-' > config/settings.yaml
-    npm run build
+    NEXT_PUBLIC_BUILDTIME=$BUILDTIME NEXT_PUBLIC_VERSION=$VERSION NEXT_PUBLIC_REVISION=$REVISION npm run build
 EOF
 
 # Production image, copy all the files and run next

package.json

@@ -13,6 +13,7 @@
     "@headlessui/react": "^1.7.0",
     "@tailwindcss/forms": "^0.5.3",
     "classnames": "^2.3.1",
+    "compare-versions": "^5.0.1",
     "dockerode": "^3.3.4",
     "follow-redirects": "^1.15.2",
     "i18next": "^21.9.1",

pnpm-lock.yaml

@@ -5,6 +5,7 @@ specifiers:
   '@tailwindcss/forms': ^0.5.3
   autoprefixer: ^10.4.9
   classnames: ^2.3.1
+  compare-versions: ^5.0.1
   dockerode: ^3.3.4
   eslint: ^8.23.1
   eslint-config-airbnb: ^19.0.4
@@ -45,6 +46,7 @@ dependencies:
   '@headlessui/react': 1.7.0_biqbaboplfbrettd7655fr4n2y
   '@tailwindcss/forms': 0.5.3_tailwindcss@3.1.8
   classnames: 2.3.1
+  compare-versions: 5.0.1
   dockerode: 3.3.4
   follow-redirects: 1.15.2
   i18next: 21.9.1
@@ -715,6 +717,10 @@ packages:
       delayed-stream: 1.0.0
     dev: false
 
+  /compare-versions/5.0.1:
+    resolution: {integrity: sha512-v8Au3l0b+Nwkp4G142JcgJFh1/TUhdxut7wzD1Nq1dyp5oa3tXaqb03EXOAB6jS4gMlalkjAUPZBMiAfKUixHQ==}
+    dev: false
+
   /concat-map/0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true

src/components/version.jsx

@@ -0,0 +1,47 @@
+import { useTranslation } from "react-i18next";
+import useSWR from "swr";
+import { compareVersions } from "compare-versions";
+import { MdNewReleases } from "react-icons/md";
+
+export default function Version() {
+  const { t, i18n } = useTranslation();
+
+  const buildTime = process.env.NEXT_PUBLIC_BUILDTIME ?? new Date().toISOString();
+  const revision = process.env.NEXT_PUBLIC_REVISION ?? "dev";
+  const version = process.env.NEXT_PUBLIC_VERSION ?? "dev";
+
+  const { data: releaseData } = useSWR("https://api.github.com/repos/benphelps/homepage/releases");
+
+  // use Intl.DateTimeFormat to format the date
+  const formatDate = (date) => {
+    const options = {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    };
+    return new Intl.DateTimeFormat(i18n.language, options).format(new Date(date));
+  };
+
+  const latestRelease = releaseData?.[0];
+
+  return (
+    <div className="flex flex-row items-center">
+      <span className="text-xs text-theme-500 opacity-50">
+        {version} ({revision.substring(0, 7)}, {formatDate(buildTime)})
+      </span>
+      {version === "main" || version === "dev"
+        ? null
+        : releaseData &&
+          compareVersions(latestRelease.tag_name, version) > 0 && (
+            <a
+              href={latestRelease.html_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="ml-2 text-xs text-theme-500 opacity-50 flex flex-row items-center"
+            >
+              <MdNewReleases className="mr-1" /> {t("Update Available")}
+            </a>
+          )}
+    </div>
+  );
+}

src/pages/index.jsx

@@ -24,12 +24,16 @@ const ColorToggle = dynamic(() => import("components/color-toggle"), {
   ssr: false,
 });
 
+const Version = dynamic(() => import("components/version"), {
+  ssr: false,
+});
+
 const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search", "datetime"];
 
 export function getStaticProps() {
   let logger;
   try {
-    logger = createLogger('index');
+    logger = createLogger("index");
     const { providers, ...settings } = getSettings();
 
     return {
@@ -38,7 +42,9 @@ export function getStaticProps() {
       },
     };
   } catch (e) {
-    if (logger) { logger.error(e); }
+    if (logger) {
+      logger.error(e);
+    }
     return {
       props: {
         initialSettings: {},
@@ -157,11 +163,15 @@ function Home({ initialSettings }) {
           </div>
         )}
 
-        <div className="rounded-full flex p-8 w-full justify-end">
+        <div className="flex p-8 pb-0 w-full justify-end">
           {!settings?.color && <ColorToggle />}
           <Revalidate />
           {!settings?.theme && <ThemeToggle />}
         </div>
+
+        <div className="flex p-8 pt-4 w-full justify-end">
+          <Version />
+        </div>
       </div>
     </>
   );