fix: Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

Author: Chasen-Zhang

website/src/components/CustomBlog/BlogList.js

@@ -3,11 +3,15 @@ import styles from "./styles.module.scss";
 import clsx from "clsx";
 import WeeklyCover from "./WeeklyCover";
 import DefaultCover from "./DefaultCover";
-import useBaseUrl from "@docusaurus/useBaseUrl";
 
 const BlogList = (metadatas) => {
   const items = metadatas.metadatas.items.map((item) => {
     const metadata = item.content.metadata;
+    function innerTagAction(e, permalink) {
+      e.stopPropagation();
+      e.preventDefault();
+      window.open(permalink, '_self')
+    }
     return (
       <li
         className={clsx("post-list-item", styles.postListItem)}
@@ -30,7 +34,7 @@ const BlogList = (metadatas) => {
             {metadata.tags.map((tag, index) => {
               return (
                 <span className={clsx("tag", styles.Tag)} key={index}>
-                  <a href={tag.permalink}># {tag.label}</a>
+                  <span onClick={(e)=> innerTagAction(e, tag.permalink)}># {tag.label}</span>
                 </span>
               );
             })}
@@ -52,9 +56,9 @@ const BlogList = (metadatas) => {
             className={clsx("post-list-item-description", styles.postListDesc)}
           >
             By{" "}
-            <a href={metadata.authors[0].url}>
+            <span onClick={(e)=> innerTagAction(e, metadata.authors[0].url)}>
               <strong>{metadata.authors[0].name}</strong>
-            </a>{" "}
+            </span>{" "}
             on {metadata.formattedDate}
           </p>
         </a>

website/src/components/CustomBlog/BlogPostDetails.js

@@ -34,7 +34,6 @@ const BlogPostNav = ({ nextPost, prevPost }) => {
 const BlogPostDetails = (props) => {
   const metadata = props.content.metadata;
   const BlogPostContent = props.content;
-  console.log(BlogPostContent, 'BlogPostContent')
   return (
     <Layout title={`${metadata.title} | Blog`}>
       <section className={clsx("blog-page", styles.blogPage, styles.blogPost)}>

website/src/components/CustomBlog/styles.module.scss

@@ -138,6 +138,10 @@
                 .postListDesc {
                     color: var(--color-text-2) !important;
                     font-size: 14px;
+                    span{
+                      color: var(--color-primary);
+                      font-weight: bold;
+                    }
                 }
 
                 @include media{

website/src/css/_mixins.scss

@@ -83,29 +83,6 @@ $phoneW:997px;
   -webkit-line-clamp: $line-num;
   overflow: hidden;
 }
-
-%scroll{
-  &::-webkit-scrollbar {width: 7px !important;border-radius: 7px;display: block !important;}
-
-  /* px-to-viewport-ignore */
-
-  /* Handle style */
-  &::-webkit-scrollbar-thumb {border-radius: 7px;background-color: #333;}
-
-  /* px-to-viewport-ignore */
-
-  /* hover*/
-  &::-webkit-scrollbar-thumb:vertical:hover {background-color: darken(#333,5%);}
-
-  /* press */
-  &::-webkit-scrollbar-thumb:vertical:active {background-color: darken(#333,10%);}
-}
-
-%clearfix{zoom:1;
-  &::before,&::after{content:"";display:table;}
-  &::after {clear:both;}
-}
-
 .fontSize12{
   font-size: 12px;
 }