From 07f808a39681ffc7ad8da7ce3844b226bc0db032 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 24 Aug 2022 01:38:43 +0100
Subject: [PATCH] feat: add xlog-label for custom css

---
 src/components/common/Comment.tsx     |   8 +-
 src/components/common/PageContent.tsx |   1 +
 src/components/site/PostFooter.tsx    | 173 ++++++++++++++------------
 src/components/site/PostMeta.tsx      |   5 +-
 src/components/site/SiteHeader.tsx    |  21 +++-
 src/components/site/SiteHome.tsx      |  18 ++-
 src/components/site/SitePage.tsx      |   8 +-
 src/components/ui/UniLink.tsx         |   3 +-
 8 files changed, 138 insertions(+), 99 deletions(-)

diff --git a/src/components/common/Comment.tsx b/src/components/common/Comment.tsx
index 3e2d1314..d02dffd1 100644
--- a/src/components/common/Comment.tsx
+++ b/src/components/common/Comment.tsx
@@ -78,14 +78,14 @@ export const Comment: React.FC<{
   }, [commentPage.isSuccess, form])
 
   return (
-    <div className={clsx("comment", className)}>
-      <div className="border-b pb-2 mb-6">
+    <div className={clsx("comment", className)} xlog-label="comment">
+      <div className="border-b pb-2 mb-6" xlog-label="comment-count">
         <span>
           {comments.data?.length || "0"} Comment
           {comments.data?.length && comments.data.length > 1 ? "s" : ""}
         </span>
       </div>
-      <div className="flex">
+      <div className="flex" xlog-label="comment-input">
         <Avatar
           className="align-middle mr-3"
           images={viewer?.avatars || []}
@@ -144,7 +144,7 @@ export const Comment: React.FC<{
           </div>
         </form>
       </div>
-      <div>
+      <div xlog-label="comment-list">
         {comments.data?.map((comment) => (
           <div
             key={comment.transactionHash}
diff --git a/src/components/common/PageContent.tsx b/src/components/common/PageContent.tsx
index 600caeec..a8cc33bb 100644
--- a/src/components/common/PageContent.tsx
+++ b/src/components/common/PageContent.tsx
@@ -9,6 +9,7 @@ export const PageContent: React.FC<{
 
   return (
     <div
+      xlog-label="post-content"
       className={clsx(`prose`, className)}
       dangerouslySetInnerHTML={{ __html: contentHTML }}
     ></div>
diff --git a/src/components/site/PostFooter.tsx b/src/components/site/PostFooter.tsx
index 9f0d26e7..08607764 100644
--- a/src/components/site/PostFooter.tsx
+++ b/src/components/site/PostFooter.tsx
@@ -158,90 +158,99 @@ export const PostFooter: React.FC<{
 
   return (
     <>
-      <div className="flex fill-gray-400 text-gray-500 mt-14 mb-12 items-center">
-        <Button
-          variant="like"
-          className={`flex items-center mr-2 ${
-            isLike.isSuccess && isLike.data.count && "active"
-          }`}
-          isAutoWidth={true}
-          onClick={like}
-          isLoading={
-            userSite.isLoading ||
-            likePage.isLoading ||
-            unlikePage.isLoading ||
-            likeProgress
-          }
-        >
-          <LikeIcon className="mr-1 w-10 h-10" />
-          <span>{likes.data?.count || 0}</span>
-        </Button>
-        <ul
-          className="-space-x-4 mr-10 cursor-pointer"
-          onClick={() => setIsLikeListOpen(true)}
-        >
-          {likes.data?.list
-            ?.sort((a, b) =>
-              b.fromCharacter?.metadata?.content?.avatars ? 1 : -1,
-            )
-            .slice(0, 3)
-            ?.map((like: any, index) => (
-              <li className="inline-block" key={index}>
-                <Avatar
-                  className="align-middle border-2 border-white"
-                  images={like.fromCharacter?.metadata?.content?.avatars || []}
-                  name={like.fromCharacter?.metadata?.content?.name}
-                  size={40}
-                />
+      <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">
+          <Button
+            variant="like"
+            className={`flex items-center mr-2 ${
+              isLike.isSuccess && isLike.data.count && "active"
+            }`}
+            isAutoWidth={true}
+            onClick={like}
+            isLoading={
+              userSite.isLoading ||
+              likePage.isLoading ||
+              unlikePage.isLoading ||
+              likeProgress
+            }
+          >
+            <LikeIcon className="mr-1 w-10 h-10" />
+            <span>{likes.data?.count || 0}</span>
+          </Button>
+          <ul
+            className="-space-x-4 mr-10 cursor-pointer"
+            onClick={() => setIsLikeListOpen(true)}
+          >
+            {likes.data?.list
+              ?.sort((a, b) =>
+                b.fromCharacter?.metadata?.content?.avatars ? 1 : -1,
+              )
+              .slice(0, 3)
+              ?.map((like: any, index) => (
+                <li className="inline-block" key={index}>
+                  <Avatar
+                    className="align-middle border-2 border-white"
+                    images={
+                      like.fromCharacter?.metadata?.content?.avatars || []
+                    }
+                    name={like.fromCharacter?.metadata?.content?.name}
+                    size={40}
+                  />
+                </li>
+              ))}
+            {(likes.data?.count || 0) > 3 && (
+              <li className="inline-block">
+                <div className="align-middle border-2 border-white w-10 h-10 rounded-full inline-flex bg-gray-100 items-center justify-center text-gray-400 font-medium">
+                  +{likes.data!.count - 3}
+                </div>
               </li>
-            ))}
-          {(likes.data?.count || 0) > 3 && (
-            <li className="inline-block">
-              <div className="align-middle border-2 border-white w-10 h-10 rounded-full inline-flex bg-gray-100 items-center justify-center text-gray-400 font-medium">
-                +{likes.data!.count - 3}
-              </div>
-            </li>
-          )}
-        </ul>
-        <Button
-          variant="collect"
-          className={`flex items-center mr-2 ${
-            isMint.isSuccess && isMint.data.count && "active"
-          }`}
-          isAutoWidth={true}
-          onClick={mint}
-          isLoading={mintPage.isLoading || likeProgress}
-        >
-          <MintIcon className="mr-2 w-8 h-8" />
-          <span>{mints.data?.count || 0}</span>
-        </Button>
-        <ul
-          className="-space-x-4 cursor-pointer"
-          onClick={() => setIsMintListOpen(true)}
-        >
-          {mints.data?.list
-            ?.sort((a, b: any) =>
-              b.character?.metadata?.content?.avatars ? 1 : -1,
-            )
-            .slice(0, 3)
-            .map((mint: any, index) => (
-              <li className="inline-block" key={index}>
-                <Avatar
-                  className="align-middle border-2 border-white"
-                  images={mint.character?.metadata?.content?.avatars || []}
-                  name={mint.character?.metadata?.content?.name}
-                  size={40}
-                />
+            )}
+          </ul>
+        </div>
+        <div className="flex items-center" xlog-label="post-mint">
+          <Button
+            variant="collect"
+            className={`flex items-center mr-2 ${
+              isMint.isSuccess && isMint.data.count && "active"
+            }`}
+            isAutoWidth={true}
+            onClick={mint}
+            isLoading={mintPage.isLoading || likeProgress}
+          >
+            <MintIcon className="mr-2 w-8 h-8" />
+            <span>{mints.data?.count || 0}</span>
+          </Button>
+          <ul
+            className="-space-x-4 cursor-pointer"
+            onClick={() => setIsMintListOpen(true)}
+          >
+            {mints.data?.list
+              ?.sort((a, b: any) =>
+                b.character?.metadata?.content?.avatars ? 1 : -1,
+              )
+              .slice(0, 3)
+              .map((mint: any, index) => (
+                <li className="inline-block" key={index}>
+                  <Avatar
+                    className="align-middle border-2 border-white"
+                    images={mint.character?.metadata?.content?.avatars || []}
+                    name={mint.character?.metadata?.content?.name}
+                    size={40}
+                  />
+                </li>
+              ))}
+            {(mints.data?.count || 0) > 3 && (
+              <li className="inline-block">
+                <div className="align-middle border-2 border-white w-10 h-10 rounded-full inline-flex bg-gray-100 items-center justify-center text-gray-400 font-medium">
+                  +{mints.data!.count - 3}
+                </div>
               </li>
-            ))}
-          {(mints.data?.count || 0) > 3 && (
-            <li className="inline-block">
-              <div className="align-middle border-2 border-white w-10 h-10 rounded-full inline-flex bg-gray-100 items-center justify-center text-gray-400 font-medium">
-                +{mints.data!.count - 3}
-              </div>
-            </li>
-          )}
-        </ul>
+            )}
+          </ul>
+        </div>
         <Modal
           open={isLikeOpen}
           setOpen={setIsLikeOpen}
diff --git a/src/components/site/PostMeta.tsx b/src/components/site/PostMeta.tsx
index afd0f5d6..d0972471 100644
--- a/src/components/site/PostMeta.tsx
+++ b/src/components/site/PostMeta.tsx
@@ -9,9 +9,12 @@ export const PostMeta: React.FC<{
 }> = ({ page }) => {
   return (
     <div className="text-zinc-400 mt-2">
-      <span className="align-middle">{formatDate(page.date_published)}</span>
+      <span className="align-middle" xlog-label="post-date">
+        {formatDate(page.date_published)}
+      </span>
       <span className="align-middle mx-1"> · </span>
       <UniLink
+        xlog-label="post-blockchain"
         className="align-middle inline-block"
         href={
           page.related_urls?.filter((url) =>
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index cee89341..a2aafcff 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -166,24 +166,34 @@ 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 className="flex space-x-6 items-center">
+          <div xlog-label="site-info" className="flex space-x-6 items-center">
             {site?.avatars?.[0] && (
               <Avatar
+                xlog-label="site-icon"
                 images={[getUserContentsUrl(site?.avatars?.[0])]}
                 size={100}
                 name={site?.name}
               />
             )}
             <div>
-              <div className="text-2xl font-bold text-zinc-900">
+              <div
+                xlog-label="site-name"
+                className="text-2xl font-bold text-zinc-900"
+              >
                 {site?.name}
               </div>
               {site?.bio && (
-                <div className="text-gray-500 text-sm">{site?.bio}</div>
+                <div
+                  xlog-label="site-description"
+                  className="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"
                     onClick={() => setIsFollowListOpen(true)}
                   >
@@ -270,7 +280,10 @@ export const SiteHeader: React.FC<{
           </div>
         </div>
         <div className="text-sm text-gray-400 flex items-center justify-between">
-          <div className="flex items-center space-x-5">
+          <div
+            xlog-label="site-navigation"
+            className="flex items-center space-x-5"
+          >
             {leftLinks.map((link, i) => {
               return <HeaderLink link={link} key={`${link.label}${i}`} />
             })}
diff --git a/src/components/site/SiteHome.tsx b/src/components/site/SiteHome.tsx
index 4241b812..03b21553 100644
--- a/src/components/site/SiteHome.tsx
+++ b/src/components/site/SiteHome.tsx
@@ -12,17 +12,25 @@ export const SiteHome: React.FC<{
     <div className="">
       {posts.total === 0 && <EmptyState />}
       {posts.total > 0 && (
-        <div className="space-y-3">
+        <div className="space-y-3" xlog-label="posts">
           {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">
-                  <h3 className="text-2xl font-bold">{post.title}</h3>
-                  <div className="text-sm text-zinc-400 mt-1">
+                <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">
+                    {post.title}
+                  </h3>
+                  <div
+                    className="text-sm text-zinc-400 mt-1"
+                    xlog-label="post-date"
+                  >
                     {formatDate(post.date_published)}
                   </div>
-                  <div className="mt-3 text-zinc-500">
+                  <div className="mt-3 text-zinc-500" xlog-label="post-excerpt">
                     {excerpt}
                     {excerpt && "..."}
                   </div>
diff --git a/src/components/site/SitePage.tsx b/src/components/site/SitePage.tsx
index 376d8933..977a1791 100644
--- a/src/components/site/SitePage.tsx
+++ b/src/components/site/SitePage.tsx
@@ -13,9 +13,13 @@ export const SitePage: React.FC<{
     <>
       <div className="">
         {page?.tags?.includes("post") ? (
-          <h2 className="text-4xl font-bold">{page.title}</h2>
+          <h2 className="text-4xl font-bold" xlog-label="post-title">
+            {page.title}
+          </h2>
         ) : (
-          <h2 className="text-xl font-bold page-title">{page?.title}</h2>
+          <h2 className="text-xl font-bold page-title" xlog-label="post-title">
+            {page?.title}
+          </h2>
         )}
         {page?.tags?.includes("post") && <PostMeta page={page} />}
       </div>
diff --git a/src/components/ui/UniLink.tsx b/src/components/ui/UniLink.tsx
index e6c751f1..1ab03034 100644
--- a/src/components/ui/UniLink.tsx
+++ b/src/components/ui/UniLink.tsx
@@ -5,7 +5,7 @@ export const UniLink: React.FC<{
   onClick?: () => void
   children: React.ReactNode
   className?: string
-}> = ({ href, onClick, children, className }) => {
+}> = ({ href, onClick, children, className, ...props }) => {
   if (onClick) {
     return (
       <button className={className} onClick={onClick}>
@@ -23,6 +23,7 @@ export const UniLink: React.FC<{
   if (isExternal) {
     return (
       <a
+        {...props}
         className={className}
         href={href}
         target="_blank"