feat: Support for rendering post content only. (#536)

src/app/site/[site]/[slug]/page.tsx

@@ -9,8 +9,8 @@ import { PostFooter } from "~/components/site/PostFooter"
 import PostMeta from "~/components/site/PostMeta"
 import { SITE_URL } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
-import { useTranslation } from "~/lib/i18n"
 import getQueryClient from "~/lib/query-client"
+import { isOnlyContent } from "~/lib/search-parser"
 import { fetchGetPage } from "~/queries/page.server"
 import { fetchGetSite } from "~/queries/site.server"
 
@@ -97,8 +97,7 @@ export default async function SitePagePage({
   }
 
   const dehydratedState = dehydrate(queryClient)
-
-  const { t } = await useTranslation("site")
+  const onlyContent = isOnlyContent()
 
   function addPageJsonLd() {
     return {
@@ -131,30 +130,34 @@ export default async function SitePagePage({
         dangerouslySetInnerHTML={addPageJsonLd()}
       />
       <article>
-        <div>
-          {page?.metadata?.content?.tags?.includes("post") ? (
-            <h2 className="xlog-post-title text-4xl font-bold">
-              {page.metadata?.content?.title}
-            </h2>
-          ) : (
-            <h2 className="xlog-post-title text-xl font-bold page-title">
-              {page?.metadata?.content?.title}
-            </h2>
-          )}
-          {page?.metadata?.content?.tags?.includes("post") && (
-            /* @ts-expect-error Async Server Component */
-            <PostMeta page={page} site={site} />
-          )}
-        </div>
+        {!onlyContent && (
+          <div>
+            {page?.metadata?.content?.tags?.includes("post") ? (
+              <h2 className="xlog-post-title text-4xl font-bold">
+                {page.metadata?.content?.title}
+              </h2>
+            ) : (
+              <h2 className="xlog-post-title text-xl font-bold page-title">
+                {page?.metadata?.content?.title}
+              </h2>
+            )}
+            {page?.metadata?.content?.tags?.includes("post") && (
+              /* @ts-expect-error Async Server Component */
+              <PostMeta page={page} site={site} />
+            )}
+          </div>
+        )}
         <PageContent
           className="mt-10"
           content={page?.metadata?.content?.content}
           toc={true}
-        ></PageContent>
+        />
       </article>
-      <Hydrate state={dehydratedState}>
-        {page?.metadata && <PostFooter page={page} site={site} />}
-      </Hydrate>
+      {!onlyContent && (
+        <Hydrate state={dehydratedState}>
+          {page?.metadata && <PostFooter page={page} site={site} />}
+        </Hydrate>
+      )}
     </>
   )
 }

src/app/site/[site]/layout.tsx

@@ -12,6 +12,7 @@ import { SiteHeader } from "~/components/site/SiteHeader"
 import { FABContainer } from "~/components/ui/FAB"
 import { SITE_URL } from "~/lib/env"
 import getQueryClient from "~/lib/query-client"
+import { isOnlyContent } from "~/lib/search-parser"
 import { ExpandedNote } from "~/lib/types"
 import { cn } from "~/lib/utils"
 import { fetchGetPage } from "~/queries/page.server"
@@ -93,6 +94,8 @@ export default async function SiteLayout({
   // https://github.com/vercel/next.js/issues/46618#issuecomment-1450416633
   // Issue: The type will not be updated when the page is redirected.
   const pathname = headers().get("x-pathname")
+  const onlyContent = isOnlyContent()
+
   let type: string
   switch (pathname) {
     case "/":
@@ -158,7 +161,7 @@ export default async function SiteLayout({
         className={`xlog-page xlog-page-${type} xlog-user xlog-deprecated-class`}
       >
         <Style content={site?.metadata?.content?.css} />
-        {site && <SiteHeader handle={params.site} />}
+        {site && !onlyContent && <SiteHeader handle={params.site} />}
         <main
           className={cn(
             `xlog-post-id-${page?.characterId}-${page?.noteId}`,
@@ -167,13 +170,13 @@ export default async function SiteLayout({
         >
           {children}
         </main>
-        {site && (
+        {site && !onlyContent && (
           <div className="xlog-blockchain-info max-w-screen-md mx-auto pt-12 pb-10">
             <BlockchainInfo site={site} page={page || undefined} />
           </div>
         )}
         {/* @ts-expect-error Async Server Component */}
-        <SiteFooter site={site || undefined} />
+        {!onlyContent && <SiteFooter site={site || undefined} />}
         <FABContainer>
           <BackToTopFAB />
         </FABContainer>

src/lib/search-parser.ts

@@ -0,0 +1,11 @@
+import { headers } from "next/headers"
+
+export const searchParser = () => {
+  const search = headers().get("x-search")
+
+  return new URLSearchParams(search?.substring(1) || "")
+}
+
+export const isOnlyContent = () => {
+  return searchParser().get("only-content")
+}

src/middleware.ts

@@ -83,6 +83,7 @@ export default async function middleware(req: NextRequest) {
   // https://github.com/vercel/next.js/issues/46618#issuecomment-1450416633
   const requestHeaders = new Headers(req.headers)
   requestHeaders.set("x-pathname", req.nextUrl.pathname)
+  requestHeaders.set("x-search", req.nextUrl.search)
 
   if (tenant?.subdomain) {
     const url = req.nextUrl.clone()