diff --git a/apps/playground/package.json b/apps/playground/package.json
index e815de1d1..e8bbc59b8 100644
--- a/apps/playground/package.json
+++ b/apps/playground/package.json
@@ -20,6 +20,7 @@
"@meshsdk/react": "*",
"@next/mdx": "^14.2.3",
"@next/third-parties": "^14.2.5",
+ "@vercel/og": "^0.6.3",
"copy-to-clipboard": "^3.3.3",
"flowbite": "^2.5.1",
"flowbite-react": "^0.9.0",
diff --git a/apps/playground/src/components/sections/hero-two-sections.tsx b/apps/playground/src/components/sections/hero-two-sections.tsx
index 6b525d7cf..33ec15fb1 100644
--- a/apps/playground/src/components/sections/hero-two-sections.tsx
+++ b/apps/playground/src/components/sections/hero-two-sections.tsx
@@ -42,7 +42,7 @@ export default function HeroTwoSections({
{code && }
- {children && children}
+ {children &&
{children}
}
{typeof image === "string" ?
: image}
diff --git a/apps/playground/src/components/site/metatags.tsx b/apps/playground/src/components/site/metatags.tsx
index 10d0911e0..86e302c7e 100644
--- a/apps/playground/src/components/site/metatags.tsx
+++ b/apps/playground/src/components/site/metatags.tsx
@@ -4,7 +4,7 @@ export default function Metatags({
title,
keywords,
description,
- image = "/logo-mesh/mesh.png",
+ image,
}: {
title?: string;
keywords?: string;
@@ -38,20 +38,30 @@ export default function Metatags({
- {image && (
+ {image ? (
+ ) : (
+
)}
- {image &&
}
+
- {image && (
+ {image ? (
+ ) : (
+
)}
- {image &&
}
+
{
Whoops! This page doesn't exist.
+
+ Check the links below to find what you're looking for.
diff --git a/apps/playground/src/pages/api/og.tsx b/apps/playground/src/pages/api/og.tsx
new file mode 100644
index 000000000..b28f9bc63
--- /dev/null
+++ b/apps/playground/src/pages/api/og.tsx
@@ -0,0 +1,77 @@
+import { NextRequest } from "next/server";
+import { ImageResponse } from "@vercel/og";
+
+export const config = {
+ runtime: "edge",
+};
+
+export default function handler(request: NextRequest) {
+ try {
+ const { searchParams } = new URL(request.url);
+
+ // ?title=
+ const hasTitle = searchParams.has("title");
+ const title = hasTitle
+ ? searchParams.get("title")?.slice(0, 100)
+ : "Mesh JS - Cardano Web3 TypeScript SDK & off-chain Framework";
+
+ return new ImageResponse(
+ (
+
+ ),
+ {
+ width: 1200,
+ height: 630,
+ },
+ );
+ } catch (e: any) {
+ console.log(`${e.message}`);
+ return new Response(`Failed to generate the image`, {
+ status: 500,
+ });
+ }
+}
diff --git a/apps/playground/src/pages/apis/transaction/common.tsx b/apps/playground/src/pages/apis/transaction/common.tsx
index eaa6b7de2..ebe2c55cd 100644
--- a/apps/playground/src/pages/apis/transaction/common.tsx
+++ b/apps/playground/src/pages/apis/transaction/common.tsx
@@ -3,7 +3,7 @@ import Codeblock from "~/components/text/codeblock";
export function Intro() {
let example = ``;
example += `import { Transaction } from '@meshsdk/core';\n\n`;
- example += `const tx = new Transaction({ initiator: wallet, verbose: true });\n`;
+ example += `const tx = new Transaction({ initiator: wallet, fetcher: blockchainProvider, verbose: true });\n`;
example += `tx.foo(...); // add transaction methods\n`;
example += `tx.bar(...); // add transaction methods\n\n`;
example += `const unsignedTx = await tx.build();\n`;
diff --git a/apps/playground/src/pages/guides/aiken.mdx b/apps/playground/src/pages/guides/aiken.mdx
index 51a105bd6..44281f821 100644
--- a/apps/playground/src/pages/guides/aiken.mdx
+++ b/apps/playground/src/pages/guides/aiken.mdx
@@ -2,12 +2,20 @@ import LayoutImageHeaderAndBody from "~/components/layouts/image-header-and-body
import { guideaiken } from "~/data/links-guides";
export default function MDXPage({ children }) {
+ const sidebarItems = [
+ { label: 'System setup', to: 'systemsetup' },
+ { label: 'Writing a smart contract with Aiken', to: 'writingasmartcontractwithaiken' },
+ { label: 'Creating locking transaction', to: 'creatinglockingtransaction' },
+ { label: 'Unlocking assets', to: 'unlockingassets' },
+ ]
+
return (
{children}
diff --git a/apps/playground/src/pages/guides/custom-provider.mdx b/apps/playground/src/pages/guides/custom-provider.mdx
index a5283c494..64ea93240 100644
--- a/apps/playground/src/pages/guides/custom-provider.mdx
+++ b/apps/playground/src/pages/guides/custom-provider.mdx
@@ -2,12 +2,22 @@ import LayoutImageHeaderAndBody from "~/components/layouts/image-header-and-body
import { guideprovider } from "~/data/links-guides";
export default function MDXPage({ children }) {
+ const sidebarItems = [
+ { label: 'How does it work?', to: 'howdoesitwork' },
+ { label: 'Implement your own provider', to: 'implementyourownprovider' },
+ {
+ label: 'Implement Constructor and Functions',
+ to: 'implementconstructorandfunctions'
+ }
+ ]
+
return (
{children}
diff --git a/apps/playground/src/pages/guides/minting-on-nodejs.mdx b/apps/playground/src/pages/guides/minting-on-nodejs.mdx
index 11a0974c7..e0d0f76f6 100644
--- a/apps/playground/src/pages/guides/minting-on-nodejs.mdx
+++ b/apps/playground/src/pages/guides/minting-on-nodejs.mdx
@@ -2,12 +2,18 @@ import LayoutImageHeaderAndBody from "~/components/layouts/image-header-and-body
import { guidenodejs } from "~/data/links-guides";
export default function MDXPage({ children }) {
+ const sidebarItems = [
+ { label: 'System setup', to: 'systemsetup' },
+ { label: 'Build the minting transaction', to: 'buildthemintingtransaction' },
+ ];
+
return (
{children}
diff --git a/apps/playground/src/pages/guides/multisig-minting/demo.tsx b/apps/playground/src/pages/guides/multisig-minting/demo.tsx
index 64a096a83..f340b98fe 100644
--- a/apps/playground/src/pages/guides/multisig-minting/demo.tsx
+++ b/apps/playground/src/pages/guides/multisig-minting/demo.tsx
@@ -112,7 +112,6 @@ export default function Demo() {
return (
<>
- Demo
Connect your wallet and click on the button to mint a token.