Merge pull request #748 from Web3Auth/feat/add-post-comments-into-guides

shahbaz17 · web-flow · commit cb9478832ad3 · 2024-05-24T12:19:20.000+05:30
Feat/Add post comments to guides
diff --git a/docs/sdk/pnp/flutter/usage.mdx b/docs/sdk/pnp/flutter/usage.mdx
@@ -635,11 +635,11 @@ method currently supports only the signing methods.
 
 ### Arguments
 
-| Arguments       | Description                                                                                                                                                                                                                                                          |
-| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `chainConfig`   | Defines the chain to be used for signature.                                                                                                                                                                                                                          |
-| `method`        | JSON RPC method name in `String`. Currently, the request method only supports the singing methods.                                                                                                                                                                   |
-| `requestParams` | Parameters for the corresponding method. The parameters should be in the list and correct sequence. Take a look at [RPC methods](<[https://docs.metamask.io/wallet/reference/json-rpc-api/](https://docs.metamask.io/wallet/reference/json-rpc-api/)>) to know more. |
+| Arguments       | Description                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `chainConfig`   | Defines the chain to be used for signature.                                                                                                                                                            |
+| `method`        | JSON RPC method name in `String`. Currently, the request method only supports the singing methods.                                                                                                     |
+| `requestParams` | Parameters for the corresponding method. The parameters should be in the list and correct sequence. Take a look at [RPC methods](https://docs.metamask.io/wallet/reference/json-rpc-api) to know more. |
 
 ### Usage
 
diff --git a/src/components/DiscourseComment/index.jsx b/src/components/DiscourseComment/index.jsx
@@ -1,20 +1,29 @@
 import { useEffect } from "react";
 
 export default function DiscourseComment(props) {
+  // Get the current page URL
+  // const url = window.location.href;
   // eslint-disable-next-line react/prop-types
-  const { topicId } = props;
+  // const { topicId } = props;
   useEffect(() => {
     window.DiscourseEmbed = {
       discourseUrl: "https://web3auth.io/community/",
-      topicId,
+      discourseEmbedUrl: `${window.location.href}`,
     };
 
     const d = document.createElement("script");
     d.type = "text/javascript";
     d.async = true;
     d.src = `${window.DiscourseEmbed.discourseUrl}javascripts/embed.js`;
-    (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(d);
+    (
+      document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]
+    ).appendChild(d);
   }, []);
 
-  return <div id="discourse-comments" />;
+  return (
+    <>
+      <meta name="discourse-username" content="shahbaz"></meta>
+      <div id="discourse-comments" />
+    </>
+  );
 }
diff --git a/src/pages/guides/flutter-wallet.mdx b/src/pages/guides/flutter-wallet.mdx
@@ -26,9 +26,9 @@ Flutter. The wallet will support the Ethereum and Solana ecosystem.
 As an overview, the app is quite simple, with functionality to log in, display user details, and
 perform blockchain interactions. The signing of the blockchain transactions is done through the
 Web3Auth embedded wallet. You can check out the infrastructure docs,
-["Web3Auth Wallet Management Infrastructure"](/docs/infrastructure/infrastructure) for a high-level
-overview of the Web3Auth architecture and implementation. For those who want to skip straight to the
-code, you can find it on
+["Web3Auth Wallet Management Infrastructure"](/docs/infrastructure) for a high-level overview of the
+Web3Auth architecture and implementation. For those who want to skip straight to the code, you can
+find it on
 [GitHub](https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/flutter/flutter-playground).
 
 Here are few screenshots of the application.
@@ -290,7 +290,7 @@ and `SolanaProvider`. If you wish to support any additional ecosystem, you can e
 `ChainProvider` and implement the methods.
 
 If you want to learn, how you can integrate different blockchain with Web3Auth, you can checkout our
-[Connect Blockchain resources](docs/connect-blockchain).
+[Connect Blockchain resources](/docs/connect-blockchain/).
 
 ```dart
 abstract class ChainProvider {
diff --git a/src/pages/guides/sfa-android-firebase.mdx b/src/pages/guides/sfa-android-firebase.mdx
@@ -28,9 +28,9 @@ Android application.
 As an overview, the guide is quite simple, with functionality to log in, display user details, and
 perform blockchain interactions. The signing of the blockchain transactions is done through the
 Web3Auth embedded wallet. You can check out the infrastructure docs,
-["Web3Auth Wallet Management Infrastructure"](/docs/infrastructure/infrastructure) for a high-level
-overview of the Web3Auth architecture and implementation. For those who want to skip straight to the
-code, you can find it on
+["Web3Auth Wallet Management Infrastructure"](/docs/infrastructure) for a high-level overview of the
+Web3Auth architecture and implementation. For those who want to skip straight to the code, you can
+find it on
 [GitHub](https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-android/sfa-android-quick-start).
 
 ## How to set up Web3Auth Dashboard
diff --git a/src/pages/guides/sfa-flutter-firebase.mdx b/src/pages/guides/sfa-flutter-firebase.mdx
@@ -28,9 +28,9 @@ Flutter application.
 As an overview, the guide is quite simple, with functionality to log in, display user details, and
 perform blockchain interactions. The signing of the blockchain transactions is done through the
 Web3Auth embedded wallet. You can check out the infrastructure docs,
-["Web3Auth Wallet Management Infrastructure"](/docs/infrastructure/infrastructure) for a high-level
-overview of the Web3Auth architecture and implementation. For those who want to skip straight to the
-code, you can find it on
+["Web3Auth Wallet Management Infrastructure"](/docs/infrastructure) for a high-level overview of the
+Web3Auth architecture and implementation. For those who want to skip straight to the code, you can
+find it on
 [GitHub](https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-flutter/sfa-flutter-quick-start).
 
 ## How to set up Web3Auth Dashboard
diff --git a/src/pages/guides/sfa-ios-firebase.mdx b/src/pages/guides/sfa-ios-firebase.mdx
@@ -28,9 +28,9 @@ application.
 As an overview, the guide is quite simple, with functionality to log in, display user details, and
 perform blockchain interactions. The signing of the blockchain transactions is done through the
 Web3Auth embedded wallet. You can check out the infrastructure docs,
-["Web3Auth Wallet Management Infrastructure"](/docs/infrastructure/infrastructure) for a high-level
-overview of the Web3Auth architecture and implementation. For those who want to skip straight to the
-code, you can find it on
+["Web3Auth Wallet Management Infrastructure"](/docs/infrastructure) for a high-level overview of the
+Web3Auth architecture and implementation. For those who want to skip straight to the code, you can
+find it on
 [GitHub](https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-ios/sfa-ios-quick-start).
 
 ## How to set up Web3Auth Dashboard
diff --git a/src/theme/MDXPage/index.tsx b/src/theme/MDXPage/index.tsx
@@ -1,3 +1,4 @@
+import * as React from "react";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import Link from "@docusaurus/Link";
 import { MDXProvider } from "@mdx-js/react";
@@ -26,7 +27,17 @@ export default function MDXPage(props: ComponentProps<typeof OriginalMDXPage>) {
   //   return <OriginalMDXPage {...props} />;
   // }
 
-  const { title, image, description, type, tags, author, date, wrapperClassName, communityPortalTopicId } = frontMatter;
+  const {
+    title,
+    image,
+    description,
+    type,
+    tags,
+    author,
+    date,
+    wrapperClassName,
+    communityPortalTopicId,
+  } = frontMatter;
   const url = `https://web3auth.io${permalink}`;
   const facebookLink = `https://www.facebook.com/sharer/sharer.php?${url}`;
   const twitterLink = `http://twitter.com/share?text=Checkout ${title} published by @Web3Auth&url=${url}`;
@@ -77,7 +88,13 @@ export default function MDXPage(props: ComponentProps<typeof OriginalMDXPage>) {
                   <div className={styles.socialButtonContainer}>
                     <Link to={facebookLink}>
                       <button type="button" className={styles.socialButton}>
-                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
                           <g clipPath="url(#clip0_1_9)">
                             <path
                               d="M16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 11.993 2.92547 15.3027 6.75 15.9028V10.3125H4.71875V8H6.75V6.2375C6.75 4.2325 7.94438 3.125 9.77172 3.125C10.6467 3.125 11.5625 3.28125 11.5625 3.28125V5.25H10.5538C9.56 5.25 9.25 5.86672 9.25 6.5V8H11.4688L11.1141 10.3125H9.25V15.9028C13.0745 15.3027 16 11.993 16 8Z"
@@ -95,7 +112,13 @@ export default function MDXPage(props: ComponentProps<typeof OriginalMDXPage>) {
                     </Link>
                     <Link to={twitterLink}>
                       <button type="button" className={styles.socialButton}>
-                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
                           <path
                             d="M5.03168 14.5003C11.0694 14.5003 14.3718 9.4981 14.3718 5.16018C14.3718 5.0181 14.3718 4.87666 14.3622 4.73586C15.0047 4.27117 15.5593 3.69579 16 3.03666C15.4009 3.30227 14.7654 3.47637 14.1146 3.55314C14.7999 3.14294 15.3128 2.49767 15.5578 1.73746C14.9134 2.11987 14.2084 2.38935 13.4733 2.53426C12.9783 2.00798 12.3237 1.65949 11.6108 1.54272C10.8978 1.42595 10.1663 1.54741 9.52931 1.8883C8.89234 2.22919 8.38548 2.77051 8.08716 3.4285C7.78884 4.08648 7.71569 4.82444 7.87904 5.52818C6.57393 5.46272 5.29717 5.12354 4.13164 4.53267C2.9661 3.9418 1.93784 3.11244 1.1136 2.09842C0.693819 2.82109 0.565248 3.67658 0.754066 4.49071C0.942885 5.30484 1.43489 6.01639 2.12992 6.4805C1.60749 6.4652 1.09643 6.32426 0.64 6.06962V6.11122C0.640207 6.86912 0.902567 7.60362 1.38258 8.19014C1.86259 8.77665 2.53071 9.17907 3.2736 9.32914C2.79032 9.46097 2.28325 9.48024 1.79136 9.38546C2.00121 10.0377 2.40962 10.608 2.95949 11.0168C3.50937 11.4255 4.17322 11.6522 4.85824 11.6651C4.17763 12.2001 3.39821 12.5957 2.56458 12.8291C1.73096 13.0626 0.859476 13.1294 0 13.0258C1.50122 13.9891 3.24795 14.5001 5.03168 14.4978"
                             fill="currentColor"
@@ -105,7 +128,13 @@ export default function MDXPage(props: ComponentProps<typeof OriginalMDXPage>) {
                       </button>
                     </Link>
                     <button type="button" className={styles.socialButton} onClick={handleClick}>
-                      <svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <svg
+                        width="13"
+                        height="14"
+                        viewBox="0 0 13 14"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
                         <path
                           fillRule="evenodd"
                           clipRule="evenodd"
@@ -119,7 +148,13 @@ export default function MDXPage(props: ComponentProps<typeof OriginalMDXPage>) {
                   <BrowserOnly>
                     {() => (
                       <Bookmark className={styles.bookmarkButton} href={url} title={title}>
-                        <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg
+                          width="16"
+                          height="20"
+                          viewBox="0 0 16 20"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
                           <path
                             d="M1.58579 1.58579C1.21071 1.96086 1 2.46957 1 3V19L8 15.5L15 19V3C15 2.46957 14.7893 1.96086 14.4142 1.58579C14.0391 1.21071 13.5304 1 13 1H3C2.46957 1 1.96086 1.21071 1.58579 1.58579Z"
                             stroke="currentColor"
@@ -132,7 +167,7 @@ export default function MDXPage(props: ComponentProps<typeof OriginalMDXPage>) {
                     )}
                   </BrowserOnly>
                 </div>
-                {communityPortalTopicId && <DiscourseComment topicId={communityPortalTopicId} />}
+                <DiscourseComment />
               </div>
               {MDXPageContent.toc && (
                 <div className="col col--3" style={{ paddingRight: "30px" }}>
