feat: custom 404 page

src/components/site/SiteLayout.tsx

@@ -13,11 +13,16 @@ import { IS_PROD } from "~/lib/constants"
 export type SiteLayoutProps = {
   children: React.ReactNode
   title?: string | null
+  siteId?: string
 }
 
-export const SiteLayout: React.FC<SiteLayoutProps> = ({ children, title }) => {
+export const SiteLayout: React.FC<SiteLayoutProps> = ({
+  children,
+  title,
+  siteId,
+}) => {
   const router = useRouter()
-  const domainOrSubdomain = router.query.site as string
+  const domainOrSubdomain = (router.query.site || siteId) as string
   const pageSlug = router.query.page as string
   const tag = router.query.tag as string
 
@@ -54,16 +59,18 @@ export const SiteLayout: React.FC<SiteLayoutProps> = ({ children, title }) => {
         image={page.data?.cover || getUserContentsUrl(site.data?.avatars?.[0])}
         icon={getUserContentsUrl(site.data?.avatars?.[0])}
       />
-      <SiteHeader site={site.data} />
+      {site.data && <SiteHeader site={site.data} />}
       <style>{site.data?.css}</style>
       <div
         className={`xlog-post-id-${page.data?.id} max-w-screen-md mx-auto px-5 pt-12 relative`}
       >
         {children}
       </div>
-      <div className="max-w-screen-md mx-auto pt-12 pb-10">
-        <BlockchainInfo site={site.data} page={page.data} />
-      </div>
+      {site.data && (
+        <div className="max-w-screen-md mx-auto pt-12 pb-10">
+          <BlockchainInfo site={site.data} page={page.data} />
+        </div>
+      )}
       <SiteFooter site={site.data} page={page.data} />
     </>
   )

src/markdown/index.ts

@@ -144,7 +144,9 @@ export const renderPageContent = (
       .processSync(content)
 
     contentHTML = result.toString()
-  } catch (error) {}
+  } catch (error) {
+    console.error(error)
+  }
   return {
     contentHTML,
     element: result?.result,

src/markdown/rehype-image.ts

@@ -4,6 +4,7 @@ import { visit } from "unist-util-visit"
 import { getUserContentsUrl } from "~/lib/user-contents"
 import { toGateway } from "~/lib/ipfs-parser"
 import { MarkdownEnv } from "."
+import { IS_PROD } from "~/lib/constants"
 
 const isExternLink = (url: string) => /^https?:\/\//.test(url)
 
@@ -31,7 +32,7 @@ export const rehypeImage: Plugin<Array<{ env: MarkdownEnv }>, Root> = ({
       }
 
       if (isExternLink(url)) {
-        if (!url.startsWith("https:")) {
+        if (!url.startsWith("https:") && IS_PROD) {
           throw new Error(`External image url must start with https`)
         }
         return

src/pages/404.tsx

@@ -0,0 +1,41 @@
+import { useRouter } from "next/router"
+import { SitePage } from "~/components/site/SitePage"
+import { SITE_URL } from "~/lib/env"
+import { SiteLayout } from "~/components/site/SiteLayout"
+import { useState } from "react"
+
+export default function Custom404() {
+  const router = useRouter()
+
+  const [siteId, setSiteId] = useState("")
+
+  try {
+    fetch(`/api/host2handle?host=${window.location.host}`)
+      .then((res) => res.json())
+      .then((tenant) => {
+        if (tenant.subdomain) {
+          setSiteId(tenant.subdomain)
+        }
+      })
+  } catch (error) {}
+
+  return (
+    <SiteLayout siteId={siteId}>
+      <SitePage
+        page={
+          {
+            title: "404 - Whoops, this page is gone.",
+            body: {
+              content: `
+- [Back to Home](/)
+- [All posts](/archives)
+
+![image](${SITE_URL}/404.svg)
+`,
+            },
+          } as any
+        }
+      />
+    </SiteLayout>
+  )
+}