feat: add some semantic class (#526)

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

@@ -159,16 +159,16 @@ export default async function SiteLayout({
       >
         <Style content={site?.metadata?.content?.css} />
         {site && <SiteHeader handle={params.site} />}
-        <div
+        <main
           className={cn(
             `xlog-post-id-${page?.characterId}-${page?.noteId}`,
             "xlog-deprecated-class xlog-post-area max-w-screen-md mx-auto px-5 pt-12 relative",
           )}
         >
           {children}
-        </div>
+        </main>
         {site && (
-          <div className="max-w-screen-md mx-auto pt-12 pb-10">
+          <div className="xlog-blockchain-info max-w-screen-md mx-auto pt-12 pb-10">
             <BlockchainInfo site={site} page={page || undefined} />
           </div>
         )}

src/components/common/DarkModeSwitch.tsx

@@ -3,6 +3,7 @@
 import { Switch } from "@headlessui/react"
 
 import { useDarkModeSwitch, useIsDark } from "~/hooks/useDarkMode"
+import { cn } from "~/lib/utils"
 
 export const DarkModeSwitch = () => {
   const toggle = useDarkModeSwitch()
@@ -11,9 +12,10 @@ export const DarkModeSwitch = () => {
     <Switch
       checked={isDark || false}
       onChange={toggle}
-      className={`${
-        isDark ? "bg-accent" : "bg-gray-200"
-      } relative inline-flex h-6 w-11 items-center rounded-full text-base dark:text-always-gray-200 text-always-gray-700 align-middle`}
+      className={cn(
+        `${isDark ? "bg-accent" : "bg-gray-200"}`,
+        ` relative inline-flex h-6 w-11 items-center rounded-full text-base dark:text-always-gray-200 text-always-gray-700 align-middle`,
+      )}
     >
       <span className="sr-only">Switch Dark Mode</span>
       <span

src/components/site/SiteFooter.tsx

@@ -50,7 +50,7 @@ export default async function SiteFooter({
             />
           </div>
           {site?.metadata?.content?.connected_accounts && (
-            <div className="sm:-mr-5 sm:block inline-block align-middle mr-4">
+            <div className="xlog-social-platforms sm:-mr-5 sm:block inline-block align-middle mr-4">
               {site?.metadata?.content?.connected_accounts.map(
                 (
                   account:

src/components/site/SiteHeader.tsx

@@ -333,7 +333,7 @@ export const SiteHeader: React.FC<{
               return <HeaderLink link={link} key={`${link.label}${i}`} />
             })}
           </div>
-          <div className="pl-1">
+          <div className="xlog-connect-account pl-1">
             <ConnectButton variant="text" mobileSimplification={true} />
           </div>
         </div>