From 9612b7817fdc2ca9165723c3bf4a3a01bcff2fda Mon Sep 17 00:00:00 2001
From: "Hong Jing (Jingles)" <jinglescode@gmail.com>
Date: Mon, 11 Nov 2024 13:33:57 +0800
Subject: [PATCH] attempt fix og title

---
 .../src/components/site/metatags.tsx          | 16 ++--
 apps/playground/src/pages/_app.tsx            |  2 -
 apps/playground/src/pages/about/index.tsx     |  2 +
 apps/playground/src/pages/home/index.tsx      | 85 ++++++++++---------
 packages/mesh-provider/src/blockfrost.ts      | 10 ---
 5 files changed, 56 insertions(+), 59 deletions(-)

diff --git a/apps/playground/src/components/site/metatags.tsx b/apps/playground/src/components/site/metatags.tsx
index 9bfb2de3..c5270fe8 100644
--- a/apps/playground/src/components/site/metatags.tsx
+++ b/apps/playground/src/components/site/metatags.tsx
@@ -15,14 +15,14 @@ export default function Metatags({
     description =
       "Intuitive and easy-to-use Web3 development framework to build amazing applications on Cardano.";
   }
+
   if (keywords === undefined) {
     keywords =
       "developer, tools, cardano, blockchain, sdk, plutus, crypto, web3, metaverse, gaming, ecommerce, nfts, apis, aiken";
   }
 
-  let _title = title;
   if (title === undefined) {
-    _title = "Mesh JS - Cardano Web3 TypeScript SDK & Off-Chain Framework";
+    title = "Mesh JS - Cardano Web3 TypeScript SDK & Off-Chain Framework";
   } else {
     title = title + " - Mesh JS";
   }
@@ -32,12 +32,12 @@ export default function Metatags({
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta charSet="utf-8" />
 
-      <title>{title ? title : _title}</title>
+      {title && <title>{title}</title>}
       <meta name="description" content={description} />
       <meta name="keywords" content={keywords} />
 
-      <meta property="og:title" content={_title} />
-      <meta property="og:site_name" content={_title} />
+      {title && <meta property="og:title" content={title} />}
+      {title && <meta property="og:site_name" content={title} />}
       <meta property="og:type" content="website" />
       <meta property="og:description" content={description} />
       {image && (
@@ -49,11 +49,11 @@ export default function Metatags({
           content={`https://meshjs.dev/api/og?title=${title}`}
         />
       )}
-      <meta property="og:image:alt" content={_title} />
+      {title && <meta property="og:image:alt" content={title} />}
 
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:site" content="@meshsdk" />
-      <meta name="twitter:title" content={_title} />
+      {title && <meta name="twitter:title" content={title} />}
       <meta name="twitter:description" content={description} />
       <meta name="twitter:creator" content="@meshsdk" />
       {image && (
@@ -65,7 +65,7 @@ export default function Metatags({
           content={`https://meshjs.dev/api/og?title=${title}`}
         />
       )}
-      <meta name="twitter:image:alt" content={_title} />
+      {title && <meta name="twitter:image:alt" content={title} />}
 
       <link
         rel="apple-touch-icon"
diff --git a/apps/playground/src/pages/_app.tsx b/apps/playground/src/pages/_app.tsx
index e2ffc9d8..e646e218 100644
--- a/apps/playground/src/pages/_app.tsx
+++ b/apps/playground/src/pages/_app.tsx
@@ -9,7 +9,6 @@ import { Toaster } from "react-hot-toast";
 import { MeshProvider } from "@meshsdk/react";
 
 import Footer from "~/components/site/footer";
-import Metatags from "~/components/site/metatags";
 import Navbar from "~/components/site/navbar";
 import Providers from "~/contexts/providers";
 
@@ -19,7 +18,6 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <MeshProvider>
       <Providers>
-        <Metatags />
         <div className="cursor-default">
           <header>
             <Navbar />
diff --git a/apps/playground/src/pages/about/index.tsx b/apps/playground/src/pages/about/index.tsx
index 580c41c8..c0d2c690 100644
--- a/apps/playground/src/pages/about/index.tsx
+++ b/apps/playground/src/pages/about/index.tsx
@@ -1,3 +1,4 @@
+import Metatags from "~/components/site/metatags";
 import AboutHero from "./about-us/hero";
 import AboutIncorporation from "./about-us/incorporation";
 import AboutMeeting from "./about-us/meeting";
@@ -8,6 +9,7 @@ import AboutWhatWorkingOn from "./about-us/what-working-on";
 export default function AboutPage() {
   return (
     <>
+      <Metatags title="About Mesh SDK" />
       <AboutHero />
       <AboutTeam />
       <AboutMeeting />
diff --git a/apps/playground/src/pages/home/index.tsx b/apps/playground/src/pages/home/index.tsx
index 9628ba66..826378b2 100644
--- a/apps/playground/src/pages/home/index.tsx
+++ b/apps/playground/src/pages/home/index.tsx
@@ -3,6 +3,7 @@ import { DocumentCheckIcon } from "@heroicons/react/24/solid";
 
 import Link from "~/components/link";
 import HeroTwoSections from "~/components/sections/hero-two-sections";
+import Metatags from "~/components/site/metatags";
 
 export default function HomePage() {
   const [isSSR, setIsSSR] = useState(true);
@@ -11,44 +12,50 @@ export default function HomePage() {
   }, []);
 
   return (
-    <div className="flex flex-col gap-4">
-      <HeroTwoSections
-        title="Web3 TypeScript SDK & off-chain Framework"
-        description="Mesh is a TypeScript open-source library providing numerous tools to easily build powerful dApps on the Cardano blockchain."
-        link={{ label: "Get started", href: "/getting-started" }}
-        image={
-          <div className="col-span-6 hidden h-96 lg:block">
-            {!isSSR ? (
-              <video className="w-full" autoPlay muted>
-                <source src="/home/starter-template-cli.mp4" type="video/mp4" />
-                Your browser does not support the video tag.
-              </video>
-            ) : (
-              <>
-                <img
-                  src="/logo-mesh/black/logo-mesh-black-512x512.png"
-                  className="dark:hidden"
-                  alt="mockup"
-                />
-                <img
-                  src="/logo-mesh/white/logo-mesh-white-512x512.png"
-                  className="hidden dark:block"
-                  alt="mockup dark"
-                />
-              </>
-            )}
-          </div>
-        }
-        children={
-          <Link
-            href={`/about/catalyst`}
-            className="mr-3 inline-flex items-center justify-center rounded-lg bg-gray-700 px-5 py-3 text-center text-base font-medium text-white hover:bg-gray-800"
-          >
-            Catalyst Proposals
-            <DocumentCheckIcon className="-mr-1 ml-2 h-5 w-5" />
-          </Link>
-        }
-      />
-    </div>
+    <>
+      <Metatags />
+      <div className="flex flex-col gap-4">
+        <HeroTwoSections
+          title="Web3 TypeScript SDK & off-chain Framework"
+          description="Mesh is a TypeScript open-source library providing numerous tools to easily build powerful dApps on the Cardano blockchain."
+          link={{ label: "Get started", href: "/getting-started" }}
+          image={
+            <div className="col-span-6 hidden h-96 lg:block">
+              {!isSSR ? (
+                <video className="w-full" autoPlay muted>
+                  <source
+                    src="/home/starter-template-cli.mp4"
+                    type="video/mp4"
+                  />
+                  Your browser does not support the video tag.
+                </video>
+              ) : (
+                <>
+                  <img
+                    src="/logo-mesh/black/logo-mesh-black-512x512.png"
+                    className="dark:hidden"
+                    alt="mockup"
+                  />
+                  <img
+                    src="/logo-mesh/white/logo-mesh-white-512x512.png"
+                    className="hidden dark:block"
+                    alt="mockup dark"
+                  />
+                </>
+              )}
+            </div>
+          }
+          children={
+            <Link
+              href={`/about/catalyst`}
+              className="mr-3 inline-flex items-center justify-center rounded-lg bg-gray-700 px-5 py-3 text-center text-base font-medium text-white hover:bg-gray-800"
+            >
+              Catalyst Proposals
+              <DocumentCheckIcon className="-mr-1 ml-2 h-5 w-5" />
+            </Link>
+          }
+        />
+      </div>
+    </>
   );
 }
diff --git a/packages/mesh-provider/src/blockfrost.ts b/packages/mesh-provider/src/blockfrost.ts
index 15f50ab8..2a662109 100644
--- a/packages/mesh-provider/src/blockfrost.ts
+++ b/packages/mesh-provider/src/blockfrost.ts
@@ -473,16 +473,6 @@ export class BlockfrostProvider
     }
   }
 
-  async fetchUTxO(hash: string, index?: number): Promise<UTxO | undefined> {
-    try {
-      const utxos = await this.fetchUTxOs(hash);
-      const utxo = utxos.find((utxo) => utxo.input.outputIndex === index);
-      return utxo;
-    } catch (error) {
-      throw parseHttpError(error);
-    }
-  }
-
   async fetchUTxOs(hash: string, index?: number): Promise<UTxO[]> {
     try {
       const { data, status } = await this._axiosInstance.get(