Close #27

.changeset/old-forks-beg.md

@@ -0,0 +1,5 @@
+---
+"evolu.me": minor
+---
+
+Add changelog page

components/MainNav.tsx

@@ -52,6 +52,7 @@ const Links: FC = () => {
       <NavLink href="/">Home</NavLink>
       <NavLink href="/settings">Settings</NavLink>
       <NavLink href="/about">About</NavLink>
+      <NavLink href="/changelog">Changelog</NavLink>
       <NavLink href="/privacy">Privacy</NavLink>
     </div>
   );

components/Text.tsx

@@ -5,7 +5,7 @@ import { colors, fontSizes, fonts, spacing } from "../lib/Tokens.stylex";
 import { RNfW } from "../lib/Types";
 
 export interface TextProps {
-  tag?: "h1" | "h2" | "p";
+  tag?: "h1" | "h2" | "h3" | "p";
   style?: StyleXStyles;
   children: ReactNode;
   "aria-hidden"?: boolean;
@@ -40,6 +40,11 @@ const styles = create({
     lineHeight: spacing.xl,
     textWrap: "balance",
   },
+  h3: {
+    fontSize: fontSizes.step1,
+    lineHeight: spacing.m,
+    textWrap: "balance",
+  },
   p: {},
 });
 
@@ -49,6 +54,8 @@ const tagToRnProps = (tag: TextProps["tag"]): RnTextProps => {
       return { role: "heading" };
     case "h2":
       return { role: "heading", "aria-level": 2 } as RnTextProps;
+    case "h3":
+      return { role: "heading", "aria-level": 3 } as RnTextProps;
     case "p":
       return { role: "paragraph" as RnTextProps["role"] };
     case undefined:

package.json

@@ -26,6 +26,7 @@
     "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
     "react-native": "~0.73.6",
     "react-native-web": "^0.19.10",
     "temporal-polyfill": "^0.2.3"

pages/about/index.tsx

@@ -13,12 +13,9 @@ export default function About() {
       <Text tag="p">
         Apps are just artificial and arbitrary boundaries within data.
       </Text>
-      {/* <Text tag="h2">Links:</Text> */}
-      <Link href="https://github.com/evoluhq/evolu.me/blob/main/CHANGELOG.md">
-        Changelog
+      <Link href="https://github.com/evoluhq/evolu.me">
+        github.com/evoluhq/evolu.me
       </Link>
-      <Link href="https://github.com/evoluhq/evolu.me/issues">Issues</Link>
-      <Link href="https://github.com/evoluhq/evolu.me">GitHub repository</Link>
     </PageWithTitle>
   );
 }

pages/changelog/index.tsx

@@ -0,0 +1,70 @@
+import { promises as fs } from "fs";
+import type { GetStaticProps, InferGetStaticPropsType } from "next";
+import path from "path";
+import Markdown from "react-markdown";
+import { PageWithTitle } from "../../components/PageWithTitle";
+import { Text } from "../../components/Text";
+import { create } from "@stylexjs/stylex";
+
+export const getStaticProps = (async () => {
+  const rawMarkdown = await fs.readFile(
+    path.join(process.cwd(), "CHANGELOG.md"),
+    "utf8",
+  );
+
+  const markdown = rawMarkdown
+    .replace("# evolu.me", "")
+    .replaceAll("### Minor Changes", "")
+    .replace(/[a-zA-Z0-9]{7}: /g, "")
+    .trim();
+
+  return {
+    props: {
+      markdown,
+    },
+  };
+}) satisfies GetStaticProps<{
+  markdown: string;
+}>;
+
+export default function Changelog({
+  markdown,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <PageWithTitle title="Changelog">
+      <Markdown
+        components={{
+          h2({ children }) {
+            return (
+              <Text tag="h3" style={styles.p}>
+                {children}
+              </Text>
+            );
+          },
+          ul({ children }) {
+            return <>{children}</>;
+          },
+          li({ children }) {
+            return (
+              <Text tag="p" style={styles.p}>
+                {children}
+              </Text>
+            );
+          },
+          p({ children }) {
+            if (typeof children !== "string") return null;
+            return <>{children.trim()}</>;
+          },
+        }}
+      >
+        {markdown}
+      </Markdown>
+    </PageWithTitle>
+  );
+}
+
+const styles = create({
+  p: {
+    whiteSpace: "normal",
+  },
+});