feat: Add policy pages (#165)

package.json

@@ -33,6 +33,7 @@
     "astro-font": "^0.1.81",
     "dayjs": "^1.11.13",
     "fathom-client": "^3.7.2",
+    "marked": "^15.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",

src/components/Footer.astro

@@ -33,6 +33,14 @@ const linkGroups: LinkGroup[] = [
       { href: "/status", label: "System Status" },
     ],
   },
+  {
+    title: "Legal",
+    links: [
+      { href: "/terms", label: "Terms of Service" },
+      { href: "/privacy", label: "Privacy Policy" },
+      { href: "/abuse", label: "Restricted Use" },
+    ],
+  },
 ];
 ---
 
@@ -65,9 +73,7 @@ const linkGroups: LinkGroup[] = [
     <div class="copyright">
       <span>{siteInfo.fullName} &copy; {year}</span>
       <span class="disclaimer"
-        ><RiHeart3Line /> T4T. <a href="https://notlegaladvice.law/"
-          >We’re not lawyers.</a
-        ></span
+        ><RiHeart3Line /> T4T. <a href="/terms">We’re not lawyers.</a></span
       >
     </div>
     <div class="social">

src/content/config.ts

@@ -11,10 +11,13 @@ export const collections = {
         role: z.string(),
         bio: z.string(),
         avatar: image(),
-        socialLinks: z.object({
-          name: z.string(),
-          url: z.string().url()
-        }).array().optional(),
+        socialLinks: z
+          .object({
+            name: z.string(),
+            url: z.string().url(),
+          })
+          .array()
+          .optional(),
       }),
   }),
 

src/helpers/helpers.ts

@@ -1,3 +1,5 @@
+import { marked } from "marked";
+
 export const smartquotes = (str: string) => {
   return str
     .replace(/(^|[-\u2014\s(\["])'/g, "$1\u2018") // opening singles
@@ -7,3 +9,13 @@ export const smartquotes = (str: string) => {
     .replace(/--/g, "\u2014") // em-dashes
     .replace(/\.\.\./g, "\u2026"); // ellipses
 };
+
+export const fetchPolicy = async (slug: string) => {
+  const response = await fetch(
+    `https://raw.githubusercontent.com/namesakefyi/policies/main/${slug}.md`,
+  );
+  const markdown = await response.text();
+  const markdownWithoutH1 = markdown.replace(/^# .*\n/gm, "");
+  const content = marked.parse(markdownWithoutH1);
+  return content;
+};

src/layouts/ProseLayout.astro

@@ -52,6 +52,10 @@ const { title, date, description, ogImage, ogAlt, annotation, color } =
       text-wrap: balance;
     }
 
+    *:first-child {
+      margin-block-start: 0;
+    }
+
     p,
     ul,
     ol,
@@ -74,6 +78,13 @@ const { title, date, description, ogImage, ogAlt, annotation, color } =
       }
     }
 
+    ul ul,
+    ol ul,
+    ul ol,
+    ol ol {
+      margin-block: 0;
+    }
+
     img:not(.no-filter) {
       filter: grayscale(100%) contrast(120%) brightness(130%);
       opacity: 0.9;

src/pages/abuse.astro

@@ -0,0 +1,14 @@
+---
+import { fetchPolicy } from "~/helpers/helpers";
+import ProseLayout from "~/layouts/ProseLayout.astro";
+
+const content = await fetchPolicy("abuse");
+---
+
+<ProseLayout
+  title="Use Restrictions Policy"
+  description="It is not okay to use Namesake for these restricted purposes."
+  color="brown"
+>
+  <article set:html={content} />
+</ProseLayout>

src/pages/privacy.astro

@@ -0,0 +1,14 @@
+---
+import { fetchPolicy } from "~/helpers/helpers";
+import ProseLayout from "~/layouts/ProseLayout.astro";
+
+const content = await fetchPolicy("privacy");
+---
+
+<ProseLayout
+  title="Privacy"
+  description="The privacy of your data—and it is your data, not ours!—is a big deal to us. Here’s the rundown of what we collect and why, when we access your information, and your rights."
+  color="brown"
+>
+  <article set:html={content} />
+</ProseLayout>

src/pages/subprocessors.astro

@@ -0,0 +1,14 @@
+---
+import { fetchPolicy } from "~/helpers/helpers";
+import ProseLayout from "~/layouts/ProseLayout.astro";
+
+const content = await fetchPolicy("subprocessors");
+---
+
+<ProseLayout
+  title="Subprocessors"
+  description="All the third-party subprocessors that we use to run Namesake."
+  color="brown"
+>
+  <article set:html={content} />
+</ProseLayout>

src/pages/terms.astro

@@ -0,0 +1,14 @@
+---
+import { fetchPolicy } from "~/helpers/helpers";
+import ProseLayout from "~/layouts/ProseLayout.astro";
+
+const content = await fetchPolicy("terms");
+---
+
+<ProseLayout
+  title="Terms of Service"
+  description="All the terms that you agree to when you sign up for Namesake."
+  color="brown"
+>
+  <article set:html={content} />
+</ProseLayout>