5 files changed, 224 insertions, 0 deletions
diff --git a/app/components/analytics.tsx b/app/components/analytics.tsx
new file mode 100644
index 0000000..ef6a2ae
--- /dev/null
+++ b/app/components/analytics.tsx
@@ -0,0 +1,22 @@
+"use client";
+import { Analytics as VercelAnalytics } from "@vercel/analytics/react";
+
+const track = ["/", "/share", "/deploy", "/unseal"];
+
+export function Analytics() {
+  return (
+    <VercelAnalytics
+      beforeSend={(event) => {
+        const url = new URL(event.url);
+        if (!track.includes(url.pathname)) {
+          url.pathname = "/__redacted";
+          return {
+            ...event,
+            url: url.href,
+          };
+        }
+        return event;
+      }}
+    />
+  );
+}
diff --git a/app/components/error.tsx b/app/components/error.tsx
new file mode 100644
index 0000000..acf36d7
--- /dev/null
+++ b/app/components/error.tsx
@@ -0,0 +1,11 @@
+type Props = {
+  message: string;
+};
+
+export const ErrorMessage: React.FC<Props> = ({ message }) => {
+  return (
+    <div className="flex items-center justify-center my-8 lg:my-16">
+      <span className="px-4 py-2 text-red-500 border rounded border-red-500/50 bg-red-500/10"> {message}</span>
+    </div>
+  );
+};
diff --git a/app/components/stats.tsx b/app/components/stats.tsx
new file mode 100644
index 0000000..31d74bc
--- /dev/null
+++ b/app/components/stats.tsx
@@ -0,0 +1,57 @@
+import { Redis } from "@upstash/redis";
+
+const redis = Redis.fromEnv();
+export const revalidate = 60;
+
+export const Stats = asyncComponent(async () => {
+  const [reads, writes] = await redis
+    .pipeline()
+    .get("envshare:metrics:reads")
+    .get("envshare:metrics:writes")
+    .exec<[number, number]>();
+  const stars = await fetch("https://api.github.com/repos/chronark/envshare")
+    .then((res) => res.json())
+    .then((json) => json.stargazers_count as number);
+
+  const stats = [
+    {
+      label: "Documents Encrypted",
+      value: writes,
+    },
+    {
+      label: "Documents Decrypted",
+      value: reads,
+    },
+  ] satisfies { label: string; value: number }[];
+
+  if (stars) {
+    stats.push({
+      label: "GitHub Stars",
+      value: stars,
+    });
+  }
+
+  return (
+    <section className="container mx-auto">
+      <ul className="grid grid-cols-1 gap-4 sm:grid-cols-3 ">
+        {stats.map(({ label, value }) => (
+          <li
+            key={label}
+            className="flex items-center justify-between gap-2 px-4 py-3 overflow-hidden rounded m sm:flex-col"
+          >
+            <dd className="text-2xl font-bold tracking-tight text-center sm:text-5xl text-zinc-200">
+              {Intl.NumberFormat("en-US", { notation: "compact" }).format(value)}
+            </dd>
+            <dt className="leading-6 text-center text-zinc-500">{label}</dt>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+});
+
+// stupid hack to make "server components" actually work with components
+// https://www.youtube.com/watch?v=h_9Vx6kio2s
+function asyncComponent<T, R>(fn: (arg: T) => Promise<R>): (arg: T) => R {
+  return fn as (arg: T) => R;
+}
diff --git a/app/components/testimony.tsx b/app/components/testimony.tsx
new file mode 100644
index 0000000..757a953
--- /dev/null
+++ b/app/components/testimony.tsx
@@ -0,0 +1,125 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import { Props } from "next/script";
+import React, { PropsWithChildren } from "react";
+
+const TwitterHandle: React.FC<PropsWithChildren> = ({ children }) => {
+  return <span className="text-blue-500">{children}</span>;
+};
+
+const Author: React.FC<PropsWithChildren<{ href: string }>> = ({ children, href }) => (
+  <Link target="_blank" rel="noopener noreferrer" href={href} className="duration-150 text-zinc-200 hover:text-zinc-50">
+    {children}
+  </Link>
+);
+
+const Title: React.FC<PropsWithChildren<{ href: string }>> = ({ children, href }) => (
+  <Link
+    target="_blank"
+    rel="noopener noreferrer"
+    href={href}
+    className="text-sm duration-150 text-zinc-500 hover:text-zinc-300"
+  >
+    {children}
+  </Link>
+);
+
+export const Testimonials = () => {
+  const posts: {
+    content: React.ReactNode;
+    link: string;
+    author: {
+      name: React.ReactNode;
+      title?: React.ReactNode;
+      image: string;
+    };
+  }[] = [
+    {
+      content: (
+        <div>
+          <p>
+            My cursory audit of <TwitterHandle>@chronark_</TwitterHandle>'s envshare:
+          </p>
+          <p>
+            It is light, extremely functional, and does its symmetric block cipher correctly, unique initialization
+            vectors, decryption keys derived securely.
+          </p>
+          <br />
+          <p>Easily modified to remove minimal analytics. Superior to Privnote.</p>
+          <br />
+          <p>Self-hosting is easy. 👏</p>
+        </div>
+      ),
+      link: "https://twitter.com/FrederikMarkor/status/1615299856205250560",
+      author: {
+        name: <Author href="https://twitter.com/FrederikMarkor">Frederik Markor</Author>,
+        title: <Title href="https://discreet.net">CEO @discreet</Title>,
+        image: "https://pbs.twimg.com/profile_images/1438061314010664962/NecuMIGR_400x400.jpg",
+      },
+    },
+    {
+      content: (
+        <div>
+          <p>I'm particularly chuffed about this launch, for a couple of reasons:</p>
+          <ul>
+            <li>
+              ◆ Built on <TwitterHandle>@nextjs</TwitterHandle> + <TwitterHandle>@upstash</TwitterHandle>, hosted on{" "}
+              <TwitterHandle>@vercel</TwitterHandle>
+            </li>
+            <li>◆ 100% free to use & open source</li>
+            <li>◆ One-click deploy via Vercel + Upstash integration</li>
+          </ul>
+          <p>Deploy your own → http://vercel.fyi/envshare</p>
+        </div>
+      ),
+      link: "https://twitter.com/steventey/status/1615035241772482567?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1615035241772482567%7Ctwgr%5E1db44bb10c690189e24c980fcd787299961c34c6%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2Fsteventey2Fstatus2F1615035241772482567widget%3DTweet",
+      author: {
+        name: <Author href="https://twitter.com/steventey">Steven Tey</Author>,
+        title: <Title href="https://vercel.com">Senior Developer Advocate at Vercel</Title>,
+        image: "https://pbs.twimg.com/profile_images/1506792347840888834/dS-r50Je_400x400.jpg",
+      },
+    },
+    {
+      content: (
+        <div>
+          <p>
+            Congratulations on the launch <TwitterHandle>@chronark_</TwitterHandle>👏! This is such a valuable product
+            for developers. Icing on the cake is that it's open source! ✨
+          </p>
+        </div>
+      ),
+      link: "https://twitter.com/DesignSiddharth/status/1615293209164546048",
+      author: {
+        name: <Author href="https://twitter.com/DesignSiddharth">@DesignSiddharth</Author>,
+        image: "https://pbs.twimg.com/profile_images/1613772710009765888/MbSblJYf_400x400.jpg",
+      },
+    },
+  ];
+
+  return (
+    <section className="container mx-auto">
+      <ul role="list" className="grid max-w-2xl grid-cols-1 gap-16 mx-auto sm:gap-8 lg:max-w-none lg:grid-cols-3">
+        {posts.map((post, i) => (
+          <div
+            key={i}
+            className="flex flex-col justify-between duration-150 border rounded border-zinc-500/30 hover:border-zinc-300/30 hover:bg-zinc-900/30 group"
+          >
+            <Link href={post.link} className="whitespace-pre-line text text-zinc-500 p-6">
+              {post.content}
+            </Link>
+            <div className="relative flex items-start justify-between p-6 duration-150 border-t bg-zinc-900/40 border-zinc-500/30 group-hover:border-zinc-300/30">
+              <div>
+                <div className="text-base font-display text-zinc-200">{post.author.name}</div>
+                <div className="mt-1 text-sm text-zinc-500">{post.author.title}</div>
+              </div>
+              <div className="overflow-hidden rounded-full bg-zinc-50">
+                <Image className="object-cover h-14 w-14" src={post.author.image} alt="" width={56} height={56} />
+              </div>
+            </div>
+          </div>
+        ))}
+      </ul>
+    </section>
+  );
+};
diff --git a/app/components/title.tsx b/app/components/title.tsx
new file mode 100644
index 0000000..b9b7f3c
--- /dev/null
+++ b/app/components/title.tsx
@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from "react";
+
+export const Title: React.FC<PropsWithChildren> = ({ children }): JSX.Element => {
+  return (
+    <h1 className="py-4 text-5xl font-bold text-center text-transparent bg-gradient-to-t bg-clip-text from-zinc-100/60 to-white">
+      {children}
+    </h1>
+  );
+};