From bea1aea16d9ea5d717330c011a0d98d9c267d1de Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 7 Feb 2023 12:10:45 +0000
Subject: [PATCH] feat: add page type classes

---
 src/components/site/SiteLayout.tsx        | 23 ++++++++++++++---------
 src/pages/404.tsx                         |  2 +-
 src/pages/_site/[site]/[page].tsx         |  6 +++++-
 src/pages/_site/[site]/archives.tsx       |  6 +++++-
 src/pages/_site/[site]/index.tsx          |  6 +++++-
 src/pages/_site/[site]/nft.tsx            |  2 +-
 src/pages/_site/[site]/preview/[page].tsx |  2 +-
 src/pages/_site/[site]/tag/[tag].tsx      |  2 +-
 8 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/components/site/SiteLayout.tsx b/src/components/site/SiteLayout.tsx
index 6a9a73ca..8217566b 100644
--- a/src/components/site/SiteLayout.tsx
+++ b/src/components/site/SiteLayout.tsx
@@ -21,6 +21,7 @@ export type SiteLayoutProps = {
   title?: string | null
   siteId?: string
   useStat?: boolean
+  type: "index" | "post" | "tag" | "nft" | "404" | "archive"
 }
 
 export const SiteLayout: React.FC<SiteLayoutProps> = ({
@@ -28,6 +29,7 @@ export const SiteLayout: React.FC<SiteLayoutProps> = ({
   title,
   siteId,
   useStat,
+  type,
 }) => {
   const router = useRouter()
   const domainOrSubdomain = (router.query.site || siteId) as string
@@ -64,15 +66,18 @@ export const SiteLayout: React.FC<SiteLayoutProps> = ({
 
   return (
     <div
-      className={clsx({
-        "xlog-user": true,
-        "xlog-user-login": isConnected,
-        "xlog-user-site-owner": userRole?.data === "owner",
-        "xlog-user-site-operator": userRole?.data === "operator",
-        "xlog-user-site-follower": subscription?.data,
-        "xlog-user-post-liker": isLike.data?.count,
-        "xlog-user-post-minter": isMint?.data?.count,
-      })}
+      className={clsx(
+        {
+          "xlog-user": true,
+          "xlog-user-login": isConnected,
+          "xlog-user-site-owner": userRole?.data === "owner",
+          "xlog-user-site-operator": userRole?.data === "operator",
+          "xlog-user-site-follower": subscription?.data,
+          "xlog-user-post-liker": isLike.data?.count,
+          "xlog-user-post-minter": isMint?.data?.count,
+        },
+        `xlog-page-${type}`,
+      )}
     >
       <SEOHead
         title={title || tag || page.data?.title || ""}
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 62e3cad2..309715a8 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -17,7 +17,7 @@ export default function Custom404() {
   } catch (error) {}
 
   return (
-    <SiteLayout siteId={siteId}>
+    <SiteLayout siteId={siteId} type="404">
       <SitePage
         page={
           {
diff --git a/src/pages/_site/[site]/[page].tsx b/src/pages/_site/[site]/[page].tsx
index 03637e21..51e263a2 100644
--- a/src/pages/_site/[site]/[page].tsx
+++ b/src/pages/_site/[site]/[page].tsx
@@ -46,7 +46,11 @@ function SitePagePage({
 }
 
 SitePagePage.getLayout = (page: ReactElement) => {
-  return <SiteLayout useStat={true}>{page}</SiteLayout>
+  return (
+    <SiteLayout useStat={true} type="post">
+      {page}
+    </SiteLayout>
+  )
 }
 
 export default SitePagePage
diff --git a/src/pages/_site/[site]/archives.tsx b/src/pages/_site/[site]/archives.tsx
index 0a3c135d..24767cc0 100644
--- a/src/pages/_site/[site]/archives.tsx
+++ b/src/pages/_site/[site]/archives.tsx
@@ -52,7 +52,11 @@ function SiteArchivesPage({
 }
 
 SiteArchivesPage.getLayout = (page: ReactElement) => {
-  return <SiteLayout title="Archives">{page}</SiteLayout>
+  return (
+    <SiteLayout title="Archives" type="archive">
+      {page}
+    </SiteLayout>
+  )
 }
 
 export default SiteArchivesPage
diff --git a/src/pages/_site/[site]/index.tsx b/src/pages/_site/[site]/index.tsx
index 64231b8b..e9edc777 100644
--- a/src/pages/_site/[site]/index.tsx
+++ b/src/pages/_site/[site]/index.tsx
@@ -41,7 +41,11 @@ function SiteIndexPage({ domainOrSubdomain }: { domainOrSubdomain: string }) {
 }
 
 SiteIndexPage.getLayout = (page: ReactElement) => {
-  return <SiteLayout useStat={true}>{page}</SiteLayout>
+  return (
+    <SiteLayout useStat={true} type="index">
+      {page}
+    </SiteLayout>
+  )
 }
 
 export default SiteIndexPage
diff --git a/src/pages/_site/[site]/nft.tsx b/src/pages/_site/[site]/nft.tsx
index 09b5db1d..410febbc 100644
--- a/src/pages/_site/[site]/nft.tsx
+++ b/src/pages/_site/[site]/nft.tsx
@@ -77,7 +77,7 @@ function SiteNFTPage({ domainOrSubdomain }: { domainOrSubdomain: string }) {
 }
 
 SiteNFTPage.getLayout = (page: ReactElement) => {
-  return <SiteLayout>{page}</SiteLayout>
+  return <SiteLayout type="nft">{page}</SiteLayout>
 }
 
 export default SiteNFTPage
diff --git a/src/pages/_site/[site]/preview/[page].tsx b/src/pages/_site/[site]/preview/[page].tsx
index 63e98e95..ba73c6f1 100644
--- a/src/pages/_site/[site]/preview/[page].tsx
+++ b/src/pages/_site/[site]/preview/[page].tsx
@@ -21,7 +21,7 @@ function SitePagePage() {
 }
 
 SitePagePage.getLayout = (page: ReactElement) => {
-  return <SiteLayout>{page}</SiteLayout>
+  return <SiteLayout type="post">{page}</SiteLayout>
 }
 
 export default SitePagePage
diff --git a/src/pages/_site/[site]/tag/[tag].tsx b/src/pages/_site/[site]/tag/[tag].tsx
index 184dfe92..ddc89efc 100644
--- a/src/pages/_site/[site]/tag/[tag].tsx
+++ b/src/pages/_site/[site]/tag/[tag].tsx
@@ -58,7 +58,7 @@ function SiteTagPage({
 }
 
 SiteTagPage.getLayout = (page: ReactElement) => {
-  return <SiteLayout>{page}</SiteLayout>
+  return <SiteLayout type="tag">{page}</SiteLayout>
 }
 
 export default SiteTagPage