add version information

Dockerfile

@@ -22,14 +22,18 @@ 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 . .
 
 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",

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>
     </>
   );