Merge remote-tracking branch 'origin/feature/advance-nft' into feature/advance-nft

tanuj-aelf · tanuj-aelf · commit 363d01bb5017 · 2024-12-24T12:00:10.000+05:30
diff --git a/.env.example b/.env.example
@@ -1,3 +1 @@
-TYPESENSE_COLLECTION_NAME=
-TYPESENSE_SERVER_HOST=
-TYPESENSE_SEARCH_ONLY_APIKEY=
+FEEDBACK_CONTENT_SET_ID=
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -32,7 +32,5 @@ jobs:
       - name: create env file
         run: |
           touch .env
-          echo TYPESENSE_COLLECTION_NAME="test-collection" >> .env
-          echo TYPESENSE_SERVER_HOST="test-host" >> .env
-          echo TYPESENSE_SEARCH_ONLY_APIKEY="test-api-key" >> .env
+          echo FEEDBACK_CONTENT_SET_ID=${{ vars.FEEDBACK_CONTENT_SET_ID }} >> .env
       - run: npm run build
diff --git a/.github/workflows/s3.yml b/.github/workflows/s3.yml
@@ -22,9 +22,7 @@ jobs:
     - name: create env file
       run: |
         touch .env
-        echo TYPESENSE_COLLECTION_NAME=${{ vars.TYPESENSE_COLLECTION_NAME }} >> .env
-        echo TYPESENSE_SERVER_HOST=${{ vars.TYPESENSE_SERVER_HOST }} >> .env
-        echo TYPESENSE_SEARCH_ONLY_APIKEY=${{ vars.TYPESENSE_SEARCH_ONLY_APIKEY }} >> .env
+        echo FEEDBACK_CONTENT_SET_ID=${{ vars.FEEDBACK_CONTENT_SET_ID }} >> .env
     - run: npm run build
     
     - name: Configure AWS Credentials
diff --git a/docs/quick-start/advance-tutorials/_setup.md b/docs/quick-start/advance-tutorials/_setup.md
@@ -7,6 +7,14 @@ import TabItem from '@theme/TabItem';
 - Basic knowledge of terminal commands
 - **IDE** - Install [VS Code](https://code.visualstudio.com/)
 
+**Note for Apple Silicon users:**
+
+Ensure that Rosetta is installed, if it is not, use the following command:
+
+```bash title="Terminal"
+softwareupdate --install-rosetta
+```
+
 **Install Required Packages**
 
 - [Install dotnet 8.0.x SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0)
diff --git a/docs/quick-start/advance-tutorials/nft-indexer/index.md b/docs/quick-start/advance-tutorials/nft-indexer/index.md
@@ -1,7 +1,9 @@
 ---
-sidebar_position: 5
+sidebar_position: 1
+title: NFT AeIndexer
+description: Advance featured AeIndexer application 
 ---
-# NFT AeIndexer
+# NFT dApp with AeIndexer
 
 **Description**: This application demonstrates how to maintain account balances and transfer records by indexing aelf's NFT issued data.
 
@@ -183,7 +185,7 @@ public class NFTTransferredProcessor : LogEventProcessorBase<Issued>, ITransient
 }
 ```
 
-- Add files AccountDto.cs, TransferRecordDto.cs, GetAccountInput.cs, GetTransferRecordInput.cs to the directory src/nftIndexer/GraphQL.
+- Add files `AccountDto.cs`, `TransferRecordDto.cs`, `GetAccountInput.cs`, `GetTransferRecordInput.cs` to the directory `src/nftIndexer/GraphQL`.
 
 ```csharp title="AccountDto.cs"
 using AeFinder.Sdk.Dtos;
@@ -237,7 +239,7 @@ public class GetTransferRecordInput
 }
 ```
 
-  - Modify src/nftIndexer/GraphQL/Query.cs to add query logic.
+  - Modify `src/nftIndexer/GraphQL/Query.cs` to add query logic.
 
 ```csharp title="Query.cs"
 using AeFinder.Sdk;
@@ -301,7 +303,7 @@ public class Query
 
 - Register log event processor
 
-  Modify src/nftIndexer/nftIndexerModule.cs to register NFTTransferredProcessor.
+  Modify `src/nftIndexer/nftIndexerModule.cs` to register NFTTransferredProcessor.
 
 ```csharp title="nftIndexerModule.cs"
 using AeFinder.Sdk.Processor;
@@ -404,4 +406,4 @@ query{
           }
         }
       }
-}
+}
diff --git a/docs/quick-start/developers/_setup.md b/docs/quick-start/developers/_setup.md
@@ -7,6 +7,14 @@ import TabItem from '@theme/TabItem';
 - Basic knowledge of terminal commands
 - **IDE** - Install [VS Code](https://code.visualstudio.com/)
 
+**Note for Apple Silicon users:**
+
+Ensure that Rosetta is installed, if it is not, use the following command:
+
+```bash title="Terminal"
+softwareupdate --install-rosetta
+```
+
 **Install Required Packages**
 
 - [Install dotnet 8.0.x SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0)
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -110,6 +110,9 @@ const config: Config = {
       indexName: "aelf",
     },
   } satisfies Preset.ThemeConfig,
+  customFields: {
+    FEEDBACK_CONTENT_SET_ID: process.env.FEEDBACK_CONTENT_SET_ID || "",
+  },
   stylesheets: [
     {
       href: "/katex/katex.min.css",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@docusaurus/core": "3.4.0",
     "@docusaurus/preset-classic": "3.4.0",
+    "@feelback/react": "^0.3.4",
     "@mdx-js/react": "^3.0.0",
     "@sinm/react-file-tree": "^1.1.1",
     "chaingpt-component": "^0.2.0-beta.3",
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -70,4 +70,41 @@
   .mobile-only {
     display: none;
   }
+}
+
+/*
+Feedback widget CSS customization
+https://www.feelback.dev/docs/guides/stripe-like-documentation-feedback-for-docusaurus/
+*/
+@import "@feelback/react/styles/feelback.css";
+
+.feedback-component{
+  margin-top: 2rem;
+}
+
+.feedback-component .feelback-container .feelback-buttons{
+  gap: 10px;
+}
+
+.feedback-component .feelback-container .feelback-btn {
+    background-color: var(--ifm-color-primary);
+    color: white;
+    height: 37px;
+    padding-inline: 15px;
+    border-radius: 7px;
+}
+
+.feedback-component .feelback-container .feelback-btn:hover{
+  background-color: var(--ifm-color-primary-dark);
+
+}
+
+.feedback-component .feelback-container textarea {
+    border: 1px solid var(--ifm-color-primary-lightest);
+    border-radius: 10px;
+    padding: 0.7rem;
+}
+
+.feedback-component .feelback-radio-side label{
+  font-weight: 600;
 }
diff --git a/src/theme/DocPaginator/index.tsx b/src/theme/DocPaginator/index.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import Translate, { translate } from "@docusaurus/Translate";
+import PaginatorNavLink from "@theme/PaginatorNavLink";
+import type { Props } from "@theme/DocPaginator";
+import Feedback from "../Feedback";
+
+export default function DocPaginator(props: Props): JSX.Element {
+  const { previous, next } = props;
+  return (
+    <nav>
+      <div
+        className="pagination-nav docusaurus-mt-lg"
+        aria-label={translate({
+          id: "theme.docs.paginator.navAriaLabel",
+          message: "Docs pages",
+          description: "The ARIA label for the docs pagination",
+        })}
+      >
+        {previous && (
+          <PaginatorNavLink
+            {...previous}
+            subLabel={
+              <Translate
+                id="theme.docs.paginator.previous"
+                description="The label used to navigate to the previous doc"
+              >
+                Previous
+              </Translate>
+            }
+          />
+        )}
+        {next && (
+          <PaginatorNavLink
+            {...next}
+            subLabel={
+              <Translate
+                id="theme.docs.paginator.next"
+                description="The label used to navigate to the next doc"
+              >
+                Next
+              </Translate>
+            }
+            isNext
+          />
+        )}
+      </div>
+      <Feedback />
+    </nav>
+  );
+}
diff --git a/src/theme/Feedback/index.tsx b/src/theme/Feedback/index.tsx
@@ -0,0 +1,86 @@
+import { useState } from "react";
+import {
+  FeelbackTaggedMessage,
+  Question,
+  PRESET_YESNO_LIKE_DISLIKE,
+} from "@feelback/react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+const YES_TAGS = [
+  {
+    value: "accurate",
+    title: "Accurate",
+    description: "Accurately describes the product or feature.",
+  },
+  {
+    value: "problem-solved",
+    title: "Solved my problem",
+    description: "Helped me resolve an issue.",
+  },
+  {
+    value: "clear",
+    title: "Easy to understand",
+    description: "Easy to follow and comprehend.",
+  },
+  {
+    value: "product-chosen",
+    title: "Helped me decide to use the product",
+    description: "Convinced me to adopt the product or feature.",
+  },
+  { value: "other-yes", title: "Another reason" },
+];
+
+const NO_TAGS = [
+  {
+    value: "inaccurate",
+    title: "Inaccurate",
+    description: "Doesn't accurately describe the product or feature.",
+  },
+  {
+    value: "missing-info",
+    title: "Couldn't find what I was looking for",
+    description: "Missing important information.",
+  },
+  {
+    value: "unclear",
+    title: "Hard to understand",
+    description: "Too complicated or unclear.",
+  },
+  {
+    value: "bad-examples",
+    title: "Code samples errors",
+    description: "One or more code samples are incorrect.",
+  },
+  { value: "other-no", title: "Another reason" },
+];
+
+const Feedback = () => {
+  const [choice, setChoice] = useState<"y" | "n">();
+  const { siteConfig } = useDocusaurusContext();
+  const { FEEDBACK_CONTENT_SET_ID } = siteConfig.customFields;
+
+  return (
+    <div className="alert alert--info feedback-component">
+      <div className="feelback-container">
+        {!choice ? (
+          <Question
+            text="Was this page helpful?"
+            items={PRESET_YESNO_LIKE_DISLIKE}
+            showLabels
+            onClick={(option: "y" | "n") => setChoice(option)}
+          />
+        ) : (
+          <FeelbackTaggedMessage
+            contentSetId={FEEDBACK_CONTENT_SET_ID as string}
+            layout="radio-group"
+            tags={choice === "y" ? YES_TAGS : NO_TAGS}
+            title={choice === "y" ? "What did you like?" : "What went wrong?"}
+            placeholder="(optional) Please, further detail the feedback"
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Feedback;
