feat: add page type classes

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 || ""}

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={
           {

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

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

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

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

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

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