Update SEO in front end (#103)

tupui · Dec 2, 2024 · 7145006 · 7145006
1 parent d970cd7
commit 7145006
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 87 deletions.
diff --git a/dapp/public/icons/logos/twitter-x.svg b/dapp/public/icons/logos/twitter-x.svg
diff --git a/dapp/src/components/page/project/ProjectInfo.astro b/dapp/src/components/page/project/ProjectInfo.astro
@@ -900,7 +900,7 @@ import DonateModal from "./DonateModal.astro";
       const icons: { [key: string]: string } = {
         web: "/icons/logos/web.svg",
         github: "/icons/logos/github.svg",
-        twitter: "/icons/logos/twitter.svg",
+        twitter: "/icons/logos/twitter-x.svg",
         telegram: "/icons/logos/telegram.svg",
         discord: "/icons/logos/discord.svg",
       };

diff --git a/dapp/src/components/page/proposal/ProposalPage.tsx b/dapp/src/components/page/proposal/ProposalPage.tsx
@@ -21,6 +21,7 @@ import {
 } from "@service/ProposalService";
 import { getProjectFromName } from "@service/ReadContractService";
 import type { ProposalOutcome, ProposalView, VoteType } from "types/proposal";
+import Loading from "components/utils/Loading";
 
 const ProposalPage: React.FC = () => {
   const id = useStore(proposalId);
@@ -35,6 +36,7 @@ const ProposalPage: React.FC = () => {
   const [outcome, setOutcome] = useState<ProposalOutcome | null>(null);
   const [voteType, setVoteType] = useState<VoteType>();
   const [projectMaintainers, setProjectMaintainers] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
 
   const openVotersModal = (voteType: VoteType) => {
     if (proposal?.status !== "active") {
@@ -64,6 +66,7 @@ const ProposalPage: React.FC = () => {
   };
   const getProposalDetails = async () => {
     if (id && projectName) {
+      setIsLoading(true);
       const proposal = demoProposalData.find((p) => p.id === id);
       const projectInfo = await getProjectFromName(projectName);
       if (projectInfo && projectInfo.maintainers) {
@@ -80,60 +83,69 @@ const ProposalPage: React.FC = () => {
       } else {
         alert("Proposal not found");
       }
+      setIsLoading(false);
     } else {
       alert("Project name or proposal id is not provided");
     }
   };
 
   useEffect(() => {
     getProposalDetails();
-  }, [id]);
+  }, [id, projectName]);
 
   return (
-    <div>
-      <ProposalPageTitle
-        id={proposal?.id.toString() || ""}
-        title={proposal?.title || ""}
-        submitVote={() => openVotingModal()}
-        executeProposal={() => openExecuteProposalModal()}
-        status={proposal?.status || null}
-        maintainers={projectMaintainers}
-      />
-      <div className="flex flex-col gap-3 sm:gap-5 md:gap-7">
-        <ProposalStatusSection
-          status={proposal?.status || null}
-          endDate={proposal?.endDate || null}
-        />
-        <VoteStatusBar
-          approve={proposal?.voteStatus?.approve?.score || 0}
-          reject={proposal?.voteStatus?.reject?.score || 0}
-          abstain={proposal?.voteStatus?.abstain?.score || 0}
-          onClick={(voteType) => openVotersModal(voteType)}
-        />
-        <ProposalDetail
-          ipfsLink={proposal?.ipfsLink || null}
-          description={description}
-          outcome={outcome}
-          status={proposal?.status || null}
-        />
-      </div>
-      {isVotersModalOpen && proposal?.voteStatus && (
-        <VotersModal
-          NQGScore={proposal?.nqg || 0}
-          voteData={(voteType && proposal?.voteStatus?.[voteType]) || null}
-          onClose={() => setIsVotersModalOpen(false)}
-        />
+    <>
+      {isLoading ? (
+        <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          <Loading />
+        </div>
+      ) : (
+        <>
+          <ProposalPageTitle
+            id={proposal?.id.toString() || ""}
+            title={proposal?.title || ""}
+            submitVote={() => openVotingModal()}
+            executeProposal={() => openExecuteProposalModal()}
+            status={proposal?.status || null}
+            maintainers={projectMaintainers}
+          />
+          <div className="flex flex-col gap-3 sm:gap-5 md:gap-7">
+            <ProposalStatusSection
+              status={proposal?.status || null}
+              endDate={proposal?.endDate || null}
+            />
+            <VoteStatusBar
+              approve={proposal?.voteStatus?.approve?.score || 0}
+              reject={proposal?.voteStatus?.reject?.score || 0}
+              abstain={proposal?.voteStatus?.abstain?.score || 0}
+              onClick={(voteType) => openVotersModal(voteType)}
+            />
+            <ProposalDetail
+              ipfsLink={proposal?.ipfsLink || null}
+              description={description}
+              outcome={outcome}
+              status={proposal?.status || null}
+            />
+          </div>
+          {isVotersModalOpen && proposal?.voteStatus && (
+            <VotersModal
+              NQGScore={proposal?.nqg || 0}
+              voteData={(voteType && proposal?.voteStatus?.[voteType]) || null}
+              onClose={() => setIsVotersModalOpen(false)}
+            />
+          )}
+          {isVotingModalOpen && (
+            <VotingModal onClose={() => setIsVotingModalOpen(false)} />
+          )}
+          {isExecuteProposalModalOpen && (
+            <ExecuteProposalModal
+              xdr={outcome?.approved.xdr ?? ""}
+              onClose={() => setIsExecuteProposalModalOpen(false)}
+            />
+          )}
+        </>
       )}
-      {isVotingModalOpen && (
-        <VotingModal onClose={() => setIsVotingModalOpen(false)} />
-      )}
-      {isExecuteProposalModalOpen && (
-        <ExecuteProposalModal
-          xdr={outcome?.approved.xdr ?? ""}
-          onClose={() => setIsExecuteProposalModalOpen(false)}
-        />
-      )}
-    </div>
+    </>
   );
 };
 

diff --git a/dapp/src/constants/demoConfigData.js b/dapp/src/constants/demoConfigData.js
@@ -31,41 +31,6 @@ export const demoConfigData = [
       "GCMFQP44AR32S7IRIUKNOEJW5PNWOCLRHLQWSHUCSV4QZOMUXZOVA7Q2",
     ],
   },
-  // {
-  //   projectName: "salib",
-  //   logoImageLink: "https://raw.githubusercontent.com/SALib/SALib/main/docs/assets/logo.png",
-  //   description: "Python implementations of commonly used sensitivity analysis methods. Useful in systems modeling to calculate the effects of model inputs or exogenous factors on outputs of interest.",
-  //   organizationName: " SALib",
-  //   officials: {
-  //     websiteLink: "http://salib.github.io/SALib/",
-  //     githubLink: "https://github.com/SALib/SALib",
-  //   },
-  //   socialLinks: {
-  //     twitter: "https://twitter.com/",
-  //     instagram: "https://instagram.com/",
-  //   },
-  //   authorGithubNames: ["ConnectedSystems","tupui"],
-  //   maintainersAddresses: [
-  //     "GCUDW6ZF5SCGCMS3QUTELZ6LSAH6IVVXNRPRLAUNJ2XYLCA7KH7ZCVQS",
-  //     "GDQP2KPQGKIHYJGXNUIYOMHARUARCA7DJT5FO2FFOOKY3B2WSQHG4W37"
-  //   ],
-  // },
-  // {
-  //   projectName: "fff",
-  //   logoImageLink: "https://github.com/0xExp-po/soroban-versioning/blob/main/website/static/img/logo.svg",
-  //   description: "Bringing Git hashes onto Stellar’s blockchain",
-  //   organizationName: "Consulting Manao GmbH",
-  //   officials: {
-  //     websiteLink: "https://tansu.dev",
-  //     githubLink: "https://github.com/0xExp-po/soroban-versioning",
-  //   },
-  //   socialLinks: {
-  //   },
-  //   authorGithubNames: ["0xExp-po"],
-  //   maintainersAddresses: [
-  //     "GALDGLKIXR52A5EZTIRZ2IWEZ5PWN55IY2TLA7ORFPG2VVSFVV5PYNOB",
-  //   ],
-  // },
 ];
 
 export function getDemoConfigData() {

diff --git a/dapp/src/layouts/Layout.astro b/dapp/src/layouts/Layout.astro
@@ -36,22 +36,20 @@ const { title } = Astro.props;
           image: "https://testnet.tansu.dev/logo.svg",
         },
       }}
-      twitter={{
-        creator: "@PamphileRoy",
-        card: "summary_large_image",
-      }}
       extend={{
         // extending the default link tags
         link: [{ rel: "icon", href: "/logo.svg" }],
         // extending the default meta tags
         meta: [
+          { name: "x:creator", content: "@PamphileRoy" },
+          { name: "x:card", content: "summary_large_image" },
           {
-            name: "twitter:image",
+            name: "x:image",
             content: "https://testnet.tansu.dev/logo.svg",
           },
-          { name: "twitter:title", content: "Tansu" },
+          { name: "x:title", content: "Tansu" },
           {
-            name: "twitter:description",
+            name: "x:description",
             content:
               "Bringing open source software development onto the Stellar blockchain",
           },

diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
@@ -57,6 +57,20 @@ const config: Config = {
   themeConfig: {
     // Replace with your project's social card
     image: 'https://tansu.dev/img/logo.png',
+    metadata: [
+      { name: "x:creator", content: "@PamphileRoy" },
+      { name: "x:card", content: "summary_large_image" },
+      {
+        name: "x:image",
+        content: "https://testnet.tansu.dev/logo.svg",
+      },
+      { name: "x:title", content: "Tansu" },
+      {
+        name: "x:description",
+        content:
+          "Bringing open source software development onto the Stellar blockchain",
+      },
+    ],
     navbar: {
       title: 'Tansu',
       logo: {