Reorder blog post footer to render Share/Author before Giscus comments

src/components/giscus.tsx

@@ -70,11 +70,24 @@
 // export default GiscusComments;
 
 import React, { useEffect, useRef } from "react";
+import { useLocation } from "@docusaurus/router";
 import { useColorMode } from "@docusaurus/theme-common";
 
-const GiscusComments: React.FC = () => {
+type GiscusCommentsProps = {
+  forceRender?: boolean;
+};
+
+const GiscusComments: React.FC<GiscusCommentsProps> = ({
+  forceRender = false,
+}) => {
   const ref = useRef<HTMLDivElement>(null);
+  const { pathname } = useLocation();
   const { colorMode } = useColorMode(); // colorMode is 'light' or 'dark'
+  const isBlogPostPage = pathname.startsWith("/blog/");
+
+  if (isBlogPostPage && !forceRender) {
+    return null;
+  }
 
   // 1. This useEffect handles the initial script loading ONCE.
   useEffect(() => {

src/theme/BlogPostItem/Footer/index.tsx

@@ -5,6 +5,7 @@ import { useBlogPost } from "@docusaurus/plugin-content-blog/client";
 import BlogPostItemFooterOriginal from "@theme-original/BlogPostItem/Footer";
 import type BlogPostItemFooterType from "@theme/BlogPostItem/Footer";
 import type { WrapperProps } from "@docusaurus/types";
+import GiscusComments from "../../../components/giscus";
 import SocialShare from "../../../components/SocialShare";
 import { getAuthorProfile } from "../../../utils/authors";
 
@@ -149,6 +150,7 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
           </div>
         </section>
       )}
+      {isBlogPostPage && <GiscusComments forceRender />}
     </>
   );
 }