feat: add tos and privacy, refactor markdown support

.changeset/nervous-dancers-remain.md

@@ -0,0 +1,5 @@
+---
+'website': minor
+---
+
+Content now renders as GitHub flavored markdown and supports nesting and tables.

.changeset/wild-pans-watch.md

@@ -0,0 +1,5 @@
+---
+'website': minor
+---
+
+ToS and Privacy Policy are now linked in the website footer.

apps/website/components/Layout/Footer.tsx

@@ -36,18 +36,24 @@ export function Footer() {
             </Link>
           </div>
           <div className="flex-1 flex items-center gap-4">
-            {/* <Link
+            <Link
               href={routes.terms.index}
               size="12"
               color="subtle"
               underline="hover"
               noWrap
             >
               Terms of Service
-            </Link> */}
-            {/* <Link size="12" color="subtle" underline="hover" noWrap>
+            </Link>
+            <Link
+              href={routes.privacy.index}
+              size="12"
+              color="subtle"
+              underline="hover"
+              noWrap
+            >
               Privacy Policy
-            </Link> */}
+            </Link>
             <div className="flex-1" />
             <ThemeRadio className="hidden md:flex" />
           </div>

apps/website/config/mdx.tsx

@@ -1,12 +1,16 @@
 import {
+  Checkbox,
   Code,
   Li,
   Link,
   Ol,
+  panelStyles,
   Paragraph,
   SectionHeading,
+  Text,
   Ul,
 } from '@siafoundation/design-system'
+import { cx } from 'class-variance-authority'
 
 // Components used in mardown rendering
 export const components = {
@@ -16,23 +20,55 @@ export const components = {
     </SectionHeading>
   ),
   h2: ({ children }) => (
-    <SectionHeading size="24" className="pb-3 pt-12">
+    <SectionHeading size="24" className="pb-4 pt-12">
       {children}
     </SectionHeading>
   ),
   h3: ({ children }) => (
-    <SectionHeading size="20" className="pb-3 pt-10">
+    <SectionHeading size="20" className="pb-2 pt-10">
       {children}
     </SectionHeading>
   ),
   p: ({ children }) => (
-    <Paragraph size="16" className="block py-2">
+    <Paragraph size="16" className="block pt-3">
       {children}
     </Paragraph>
   ),
   a: (props) => <Link {...props} target="_blank" />,
   code: (props) => <Code {...props} />,
   ol: Ol,
   ul: Ul,
-  li: Li,
+  li: (props) => <Li {...props} />,
+  table: ({ children }) => (
+    <table className={cx('table-auto border-collapse my-4', panelStyles())}>
+      {children}
+    </table>
+  ),
+  thead: ({ children }) => <thead className="">{children}</thead>,
+  tr: ({ children }) => (
+    <tr className="border border-gray-400 dark:border-graydark-400">
+      {children}
+    </tr>
+  ),
+  th: ({ children }) => (
+    <th className="px-4 py-2 border border-gray-400 dark:border-graydark-400">
+      <Text noWrap>{children}</Text>
+    </th>
+  ),
+  tbody: ({ children }) => <tbody>{children}</tbody>,
+  td: ({ children }) => (
+    <td className="px-4 py-2 border border-gray-400 dark:border-graydark-400">
+      <Text color="subtle">{children}</Text>
+    </td>
+  ),
+  input: (props) => {
+    if (props.type === 'checkbox') {
+      return (
+        <div className="inline-block relative top-[3px]">
+          <Checkbox {...props} />
+        </div>
+      )
+    }
+    return <input {...props} />
+  },
 }

apps/website/config/routes.ts

@@ -72,6 +72,9 @@ export const routes = {
   terms: {
     index: '/terms-of-service',
   },
+  privacy: {
+    index: '/privacy-policy',
+  },
   letter: {
     index: '/letter',
   },

apps/website/content/prs.ts

@@ -3,6 +3,7 @@ import { MDXRemoteSerializeResult } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 import { getCacheValue } from '../lib/cache'
 import { getMinutesInSeconds } from '../lib/time'
+import remarkGfm from 'remark-gfm'
 
 const maxAge = getMinutesInSeconds(5)
 
@@ -16,7 +17,11 @@ export async function getPrs() {
           let source: MDXRemoteSerializeResult = null
           try {
             // as md, dont need the mdx components and allows <img> style tags, vs <img />
-            source = await serialize(pr.body, { mdxOptions: { format: 'md' } })
+            source = await serialize(pr.body, {
+              mdxOptions: {
+                remarkPlugins: [remarkGfm],
+              },
+            })
           } catch (e) {
             console.log(e)
           }

apps/website/lib/notion.ts

@@ -1,15 +1,25 @@
 import { isFullBlock, isFullPage } from '@notionhq/client'
+import { TableBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints'
 import { Notion } from '@siafoundation/data-sources'
 import matter from 'gray-matter'
 import { serialize } from 'next-mdx-remote/serialize'
+import remarkGfm from 'remark-gfm'
 
 export async function getNotionPage(pageId: string) {
   const p = await Notion.pages.retrieve({ page_id: pageId })
+  const title = isFullPage(p)
+    ? (p.properties.title['title'][0].plain_text as string)
+    : null
   const date = isFullPage(p) ? p.last_edited_time : null
   const markdown = await notionToMarkdown(pageId)
-  const source = await serialize(matter(markdown).content)
+  const source = await serialize(matter(markdown).content, {
+    mdxOptions: {
+      remarkPlugins: [remarkGfm],
+    },
+  })
 
   return {
+    title,
     date,
     source,
   }
@@ -36,8 +46,7 @@ function richTextToMarkdown(richText) {
     .join('')
 }
 
-// Function to convert Notion blocks to markdown
-async function notionToMarkdown(pageId) {
+async function notionToMarkdown(pageId, indent = '') {
   const response = await Notion.blocks.children.list({
     block_id: pageId,
     page_size: 50,
@@ -48,33 +57,84 @@ async function notionToMarkdown(pageId) {
     if (!isFullBlock(block)) {
       continue
     }
+
+    if (block.has_children) {
+      const childMarkdown = await notionToMarkdown(block.id, indent + '     ')
+      markdown += childMarkdown
+    }
+
     switch (block.type) {
       case 'paragraph':
-        markdown += richTextToMarkdown(block.paragraph.rich_text) + '\n\n'
+        markdown +=
+          indent + richTextToMarkdown(block.paragraph.rich_text) + '\n\n'
         break
       case 'heading_1':
         markdown +=
-          '# ' + richTextToMarkdown(block.heading_1.rich_text) + '\n\n'
+          indent + '# ' + richTextToMarkdown(block.heading_1.rich_text) + '\n\n'
         break
       case 'heading_2':
         markdown +=
-          '## ' + richTextToMarkdown(block.heading_2.rich_text) + '\n\n'
+          indent +
+          '## ' +
+          richTextToMarkdown(block.heading_2.rich_text) +
+          '\n\n'
         break
       case 'heading_3':
         markdown +=
-          '### ' + richTextToMarkdown(block.heading_3.rich_text) + '\n\n'
+          indent +
+          '### ' +
+          richTextToMarkdown(block.heading_3.rich_text) +
+          '\n\n'
         break
       case 'bulleted_list_item':
         markdown +=
-          '* ' + richTextToMarkdown(block.bulleted_list_item.rich_text) + '\n'
+          indent +
+          '* ' +
+          richTextToMarkdown(block.bulleted_list_item.rich_text) +
+          '\n'
         break
       case 'numbered_list_item':
         markdown +=
-          '1. ' + richTextToMarkdown(block.numbered_list_item.rich_text) + '\n'
+          indent +
+          '1. ' +
+          richTextToMarkdown(block.numbered_list_item.rich_text) +
+          '\n'
+        break
+      case 'table':
+        markdown = await tableToMarkdown(block, markdown)
         break
-      // Additional cases can be added here for other block types...
     }
   }
 
   return markdown
 }
+
+async function tableToMarkdown(
+  block: TableBlockObjectResponse,
+  markdown: string
+): Promise<string> {
+  const tableData = await Notion.blocks.children.list({
+    block_id: block.id,
+    page_size: 100,
+  })
+
+  const rows = []
+  for (const rowBlock of tableData.results) {
+    const row = []
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    for (const cell of (rowBlock as any).table_row.cells) {
+      const cellMarkdown = richTextToMarkdown(cell).trim()
+      row.push(cellMarkdown)
+    }
+    rows.push(row)
+  }
+
+  rows.forEach((row, i) => {
+    markdown += `| ${row.join(' | ')} |\n`
+    if (i === 0) {
+      markdown += `| ${row.map(() => '---').join(' | ')} |\n`
+    }
+  })
+  markdown += '\n\n'
+  return markdown
+}