feat: change xlog-label to class

src/components/common/Comment.tsx

@@ -78,14 +78,14 @@ export const Comment: React.FC<{
   }, [commentPage.isSuccess, form])
 
   return (
-    <div className={clsx("comment", className)} xlog-label="comment">
-      <div className="border-b pb-2 mb-6" xlog-label="comment-count">
+    <div className={clsx("xlog-comment", "comment", className)}>
+      <div className="xlog-comment-count border-b pb-2 mb-6">
         <span>
           {comments.data?.length || "0"} Comment
           {comments.data?.length && comments.data.length > 1 ? "s" : ""}
         </span>
       </div>
-      <div className="flex" xlog-label="comment-input">
+      <div className="xlog-comment-input flex">
         <Avatar
           className="align-middle mr-3"
           images={viewer?.avatars || []}
@@ -144,7 +144,7 @@ export const Comment: React.FC<{
           </div>
         </form>
       </div>
-      <div xlog-label="comment-list">
+      <div className="xlog-comment-list">
         {comments.data?.map((comment) => (
           <div
             key={comment.transactionHash}

src/components/common/PageContent.tsx

@@ -9,8 +9,7 @@ export const PageContent: React.FC<{
 
   return (
     <div
-      xlog-label="post-content"
-      className={clsx(`prose`, className)}
+      className={clsx("xlog-post-content", `prose`, className)}
       dangerouslySetInnerHTML={{ __html: contentHTML }}
     ></div>
   )

src/components/site/PostFooter.tsx

@@ -158,11 +158,8 @@ export const PostFooter: React.FC<{
 
   return (
     <>
-      <div
-        className="flex fill-gray-400 text-gray-500 mt-14 mb-12 items-center"
-        xlog-label="post-footer"
-      >
-        <div className="flex items-center" xlog-label="post-like">
+      <div className="xlog-post-footer flex fill-gray-400 text-gray-500 mt-14 mb-12 items-center">
+        <div className="xlog-post-like flex items-center">
           <Button
             variant="like"
             className={`flex items-center mr-2 ${
@@ -210,7 +207,7 @@ export const PostFooter: React.FC<{
             )}
           </ul>
         </div>
-        <div className="flex items-center" xlog-label="post-mint">
+        <div className="xlog-post-mint flex items-center">
           <Button
             variant="collect"
             className={`flex items-center mr-2 ${

src/components/site/PostMeta.tsx

@@ -9,13 +9,12 @@ export const PostMeta: React.FC<{
 }> = ({ page }) => {
   return (
     <div className="text-zinc-400 mt-2">
-      <span className="align-middle" xlog-label="post-date">
+      <span className="xlog-post-date align-middle">
         {formatDate(page.date_published)}
       </span>
       <span className="align-middle mx-1"> · </span>
       <UniLink
-        xlog-label="post-blockchain"
-        className="align-middle inline-block"
+        className="xlog-post-blockchain align-middle inline-block"
         href={
           page.related_urls?.filter((url) =>
             url.startsWith(CSB_SCAN + "/tx/"),

src/components/site/SiteHeader.tsx

@@ -166,35 +166,28 @@ export const SiteHeader: React.FC<{
     <header className="border-b">
       <div className="px-5 max-w-screen-md mx-auto">
         <div className="flex py-10">
-          <div xlog-label="site-info" className="flex space-x-6 items-center">
+          <div className="xlog-site-info flex space-x-6 items-center">
             {site?.avatars?.[0] && (
               <Avatar
-                xlog-label="site-icon"
+                className="xlog-site-icon"
                 images={[getUserContentsUrl(site?.avatars?.[0])]}
                 size={100}
                 name={site?.name}
               />
             )}
             <div>
-              <div
-                xlog-label="site-name"
-                className="text-2xl font-bold text-zinc-900"
-              >
+              <div className="xlog-site-name text-2xl font-bold text-zinc-900">
                 {site?.name}
               </div>
               {site?.bio && (
-                <div
-                  xlog-label="site-description"
-                  className="text-gray-500 text-sm"
-                >
+                <div className="xlog-site-description text-gray-500 text-sm">
                   {site?.bio}
                 </div>
               )}
               <div className="mt-3 text-sm">
                 {siteSubscriptions.data ? (
                   <span
-                    xlog-label="site-followers"
-                    className="mr-2 align-middle text-zinc-500 text-sm cursor-pointer"
+                    className="xlog-site-followers mr-2 align-middle text-zinc-500 text-sm cursor-pointer"
                     onClick={() => setIsFollowListOpen(true)}
                   >
                     <span className="font-bold text-zinc-700">
@@ -280,10 +273,7 @@ export const SiteHeader: React.FC<{
           </div>
         </div>
         <div className="text-sm text-gray-400 flex items-center justify-between">
-          <div
-            xlog-label="site-navigation"
-            className="flex items-center space-x-5"
-          >
+          <div className="xlog-site-navigation flex items-center space-x-5">
             {leftLinks.map((link, i) => {
               return <HeaderLink link={link} key={`${link.label}${i}`} />
             })}

src/components/site/SiteHome.tsx

@@ -12,25 +12,19 @@ export const SiteHome: React.FC<{
     <div className="">
       {posts.total === 0 && <EmptyState />}
       {posts.total > 0 && (
-        <div className="space-y-3" xlog-label="posts">
+        <div className="xlog-posts space-y-3">
           {posts.list.map((post) => {
             const excerpt = post.summary?.content
             return (
               <Link key={post.slug} href={`/${post.slug}`}>
-                <a
-                  className="block hover:bg-zinc-100 transition-colors p-5 -mx-5 first:-mt-5 md:rounded-xl"
-                  xlog-label="post"
-                >
-                  <h3 className="text-2xl font-bold" xlog-label="post-title">
+                <a className="xlog-post block hover:bg-zinc-100 transition-colors p-5 -mx-5 first:-mt-5 md:rounded-xl">
+                  <h3 className="xlog-post-title text-2xl font-bold">
                     {post.title}
                   </h3>
-                  <div
-                    className="text-sm text-zinc-400 mt-1"
-                    xlog-label="post-date"
-                  >
+                  <div className="xlog-post-date text-sm text-zinc-400 mt-1">
                     {formatDate(post.date_published)}
                   </div>
-                  <div className="mt-3 text-zinc-500" xlog-label="post-excerpt">
+                  <div className="xlog-post-excerpt mt-3 text-zinc-500">
                     {excerpt}
                     {excerpt && "..."}
                   </div>

src/components/site/SitePage.tsx

@@ -13,11 +13,9 @@ export const SitePage: React.FC<{
     <>
       <div className="">
         {page?.tags?.includes("post") ? (
-          <h2 className="text-4xl font-bold" xlog-label="post-title">
-            {page.title}
-          </h2>
+          <h2 className="xlog-post-title text-4xl font-bold">{page.title}</h2>
         ) : (
-          <h2 className="text-xl font-bold page-title" xlog-label="post-title">
+          <h2 className="xlog-post-title text-xl font-bold page-title">
             {page?.title}
           </h2>
         )}