add analytics + notice

packages/website/app/modules/app/app-footer.tsx

@@ -0,0 +1,27 @@
+import { HeartIcon } from "@heroicons/react/solid"
+import clsx from "clsx"
+import { ExternalLink } from "~/modules/dom/external-link"
+import { linkClass, maxWidthContainer } from "~/modules/ui/components"
+
+export function AppFooter() {
+  return (
+    <footer className={clsx(maxWidthContainer, "text-xs opacity-75")}>
+      <address className="not-italic">
+        &copy; {new Date().getFullYear()} itsMapleLeaf
+      </address>
+      <p>
+        Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}
+        <ExternalLink className={linkClass} href="https://remix.run">
+          Remix
+        </ExternalLink>
+      </p>
+      <p>
+        Uses{" "}
+        <ExternalLink className={linkClass} href="https://umami.is/">
+          umami
+        </ExternalLink>{" "}
+        for simple, non-identifying analytics.
+      </p>
+    </footer>
+  )
+}

packages/website/app/modules/dom/external-link.tsx

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef } from "react"
+
+export function ExternalLink({
+  children,
+  ...props
+}: ComponentPropsWithoutRef<"a">) {
+  return (
+    <a target="_blank" rel="noopener noreferrer" {...props}>
+      {children}
+    </a>
+  )
+}

packages/website/app/modules/navigation/app-link.tsx

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from "react"
 import { Link } from "remix"
+import { ExternalLink } from "~/modules/dom/external-link"
 
 export type AppLinkProps = ComponentPropsWithoutRef<"a"> & {
   type: "internal" | "external" | "router"
@@ -17,9 +18,9 @@ export function AppLink({ type, to, children, ...props }: AppLinkProps) {
 
   if (type === "external") {
     return (
-      <a href={to} target="_blank" rel="noopener noreferrer" {...props}>
+      <ExternalLink href={to} {...props}>
         {children}
-      </a>
+      </ExternalLink>
     )
   }