please don't ask 😳

.dockerignore

@@ -0,0 +1,2 @@
+.env
+node_modules

.gitignore

@@ -1,7 +1,8 @@
+.env
 node_modules
 
 /.cache
 /server/build
 /public/build
 /build
-/app/styles
+/app/styles

Dockerfile

@@ -0,0 +1,75 @@
+# base node image
+FROM node:16-bullseye-slim as base
+
+ARG COMMIT_SHA
+
+# Install openssl for Prisma
+RUN apt-get update && apt-get install -y openssl
+
+# Install all node_modules, including dev dependencies
+FROM base as deps
+
+ARG COMMIT_SHA
+
+RUN mkdir /app
+WORKDIR /app
+
+ADD package.json package-lock.json ./
+RUN npm install --production=false
+
+# Setup production node_modules
+FROM base as production-deps
+
+ARG COMMIT_SHA
+
+RUN mkdir /app
+WORKDIR /app
+
+COPY --from=deps /app/node_modules /app/node_modules
+ADD package.json package-lock.json ./
+RUN npm prune --production
+
+# Build the app
+FROM base as build
+
+ARG COMMIT_SHA
+# RUN echo "build stage :>>>>>>>>>>>>>>>> COMMIT_SHA=$COMMIT_SHA"
+# RUN echo "build stage :>>>>>>>>>>>>>>>> CSRF_KEY=$CSRF_KEY"
+
+# todo: KCD sets it only in last step?
+ENV NODE_ENV=production
+
+RUN mkdir /app
+WORKDIR /app
+
+COPY --from=deps /app/node_modules /app/node_modules
+
+# If we're using Prisma, uncomment to cache the prisma schema
+# ADD prisma .
+# RUN npx prisma generate
+
+ADD . .
+RUN npm run build
+
+# Finally, build the production image with minimal footprint
+FROM base
+
+ARG COMMIT_SHA
+ENV COMMIT_SHA=$COMMIT_SHA
+# ENV CSRF_KEY=$CSRF_KEY
+
+ENV NODE_ENV=production
+
+RUN mkdir /app
+WORKDIR /app
+
+COPY --from=production-deps /app/node_modules /app/node_modules
+
+# Uncomment if using Prisma
+# COPY --from=build /app/node_modules/.prisma /app/node_modules/.prisma
+
+COPY --from=build /app/build /app/build
+COPY --from=build /app/public /app/public
+ADD . .
+
+CMD ["npm", "run", "start"]

app/app-context.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+export const AppContext = createContext({
+  // totalPathVisits: 0,
+  // path: "",
+  // setPageViewCountForPath: (path: string, visits: number) => {},
+  setPageViewCountForPath: (visits: number) => {},
+});

app/components/age.tsx

@@ -0,0 +1,28 @@
+import differenceInYears from "date-fns/differenceInYears";
+
+type Props = {
+  year: number;
+  // note: JS Date so month starts at 0=January
+  month: number;
+  day: number;
+};
+
+export const Age = ({ year, month, day }: Props) => {
+  // based on https://stackoverflow.com/a/62375248/3484824
+  // const years = Math.floor(
+  //   (new Date().getTime() - new Date(1988, 0, 17).getTime()) /
+  //     (1000 * 60 * 60 * 24 * 365),
+  // );
+  // done: get birthday from some config or sthg?
+  const years = differenceInYears(new Date(), new Date(year, month, day));
+  // return <time>{years}</time>; // todo: Research if `<time>` makes sense to represent a persons age
+  return <span>{years}</span>;
+};
+
+// alternative from https://stackoverflow.com/a/53568674/3484824
+// const getAge = (dateOfBirth: string, dateToCalculate = new Date()) => {
+//   const dob = new Date(dateOfBirth).getTime();
+//   const dateToCompare = new Date(dateToCalculate).getTime();
+//   const age = (dateToCompare - dob) / (365 * 24 * 60 * 60 * 1000);
+//   return Math.floor(age);
+// };

app/components/icons/rss.tsx

@@ -0,0 +1,32 @@
+// by https://commons.wikimedia.org/wiki/File:Generic_Feed-icon.svg
+
+export const RssIcon = (
+  { size, inline }: { size: number | string; inline: boolean } = {
+    size: 256,
+    inline: false,
+  },
+) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    id="RSSicon"
+    viewBox="0 0 8 8"
+    width={size}
+    height={size}
+    style={{ display: inline ? "inline-block" : "block" }}
+  >
+    <title>RSS feed icon</title>
+
+    <rect width="8" height="8" rx="1.5" fill="orange" stroke="none" />
+    <circle stroke="none" fill="white" cx="2" cy="6" r="1" />
+    <path
+      stroke="none"
+      fill="white"
+      d="m 1,4 a 3,3 0 0 1 3,3 h 1 a 4,4 0 0 0 -4,-4 z"
+    />
+    <path
+      stroke="none"
+      fill="white"
+      d="m 1,2 a 5,5 0 0 1 5,5 h 1 a 6,6 0 0 0 -6,-6 z"
+    />
+  </svg>
+);