update playground content

apps/playground/src/components/link/index.tsx

@@ -17,7 +17,7 @@ export default function Link({
   return (
     <NextLink
       href={href}
-      className={className}
+      className={`hover:underline ${className}`}
       target={target ? target : href.startsWith("http") ? "_blank" : "_self"}
       rel="noreferrer"
     >

apps/playground/src/components/site/footer/sitemap.tsx

@@ -1,17 +1,18 @@
 import Link from "~/components/link";
-
 import { linksAbout } from "~/data/links-about";
 import { linksApi } from "~/data/links-api";
 import { metaGetStarted } from "~/data/links-get-started";
 import { metaGuides } from "~/data/links-guides";
 import { metaSmartContract } from "~/data/links-smart-contracts";
+import { metaSolutions } from "~/data/links-solutions";
 import { MenuItem } from "~/types/menu-item";
 
 export default function Sitemap() {
   return (
     <div className="mx-auto max-w-screen-xl p-4 py-6 md:p-8 lg:p-10">
       <div className="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-4">
         <Section menuItem={metaGetStarted} />
+        <Section menuItem={metaSolutions} />
 
         {linksApi.map((api, i) => (
           <Section menuItem={api} key={i} />

apps/playground/src/components/site/navbar/index.tsx

@@ -12,7 +12,7 @@ import SvgMesh from "~/components/svgs/mesh";
 import { linksAbout } from "~/data/links-about";
 import { linksApi } from "~/data/links-api";
 import { linksGetStarted } from "~/data/links-get-started";
-import { linksSmartContracts } from "~/data/links-smart-contracts";
+import { linksSolutions } from "~/data/links-solutions";
 import { socials } from "~/data/social";
 import { useDarkmode } from "~/hooks/useDarkmode";
 import MenuItem from "./menu-item";
@@ -124,11 +124,8 @@ export default function Navbar() {
           >
             <ul className="mt-4 flex flex-col font-medium lg:mt-0 lg:flex-row lg:space-x-8">
               <MenuItemDropdown title="Get Started" items={linksGetStarted} />
-              <MenuItemDropdown title="API" items={linksApi} />
-              <MenuItemDropdown
-                title="Smart Contracts"
-                items={linksSmartContracts}
-              />
+              <MenuItemDropdown title="SDK" items={linksApi} />
+              <MenuItemDropdown title="Solutions" items={linksSolutions} />
               <MenuItem title="Docs" link="https://docs.meshjs.dev/" />
               <MenuItemDropdown title="About" items={linksAbout} />
             </ul>

apps/playground/src/data/links-get-started.ts

@@ -9,11 +9,8 @@ import { metaAiken } from "./links-aiken";
 import { metaGuides } from "./links-guides";
 import { metaYaci } from "./links-yaci";
 
-// import { metaFrameworks } from "./links-frameworks";
-
 export const linksGetStarted: MenuItem[] = [
   metaGuides,
-  // metaFrameworks,
   {
     link: `https://github.com/MeshJS/examples`,
     title: "Examples",
@@ -28,18 +25,6 @@ export const linksGetStarted: MenuItem[] = [
   },
   metaAiken,
   metaYaci,
-  // {
-  //   link: `/getting-started/starter-templates`,
-  //   title: "Starter Templates",
-  //   desc: "Kick start your projects with our templates using CLI",
-  //   icon: RocketLaunchIcon,
-  // },
-  // {
-  //   link: `/getting-started/migration-manual-installation`,
-  //   title: "Migration / Manual Installation",
-  //   desc: "Install Mesh into your existing project",
-  //   icon: WrenchScrewdriverIcon,
-  // },
 ];
 
 export const metaGetStarted: MenuItem = {

apps/playground/src/data/links-solutions.ts

@@ -0,0 +1,28 @@
+import { CloudIcon, FireIcon, UserGroupIcon } from "@heroicons/react/24/solid";
+
+import { MenuItem } from "~/types/menu-item";
+import { metaSmartContract } from "./links-smart-contracts";
+
+export const linksSolutions: MenuItem[] = [
+  metaSmartContract,
+  {
+    link: `https://multisig.meshjs.dev/`,
+    title: "Multisig platform",
+    desc: "Secure your treasury and participant in Cardano governance as a team with multi-signature",
+    icon: UserGroupIcon,
+  },
+  {
+    link: `https://cloud.meshjs.dev/`,
+    title: "Cloud Services",
+    desc: "Hosted services for your blockchain applications",
+    icon: CloudIcon,
+  },
+];
+
+export const metaSolutions: MenuItem = {
+  title: "Solutions",
+  desc: "Mesh provides a set of solutions to help you build blockchain applications",
+  link: "/solutions",
+  icon: FireIcon,
+  items: linksSolutions,
+};

apps/playground/src/pages/about/about-us/what-working-on.tsx

@@ -0,0 +1,21 @@
+import Link from "~/components/link";
+import { AboutSection } from "../";
+
+export default function AboutWhatWorkingOn() {
+  return (
+    <AboutSection
+      title="What are we working on?"
+      description={
+        <>
+          Check out our{" "}
+          <Link href="https://github.com/MeshJS/mesh/milestones">
+            GitHub milestones
+          </Link>{" "}
+          to see what we are currently working on.
+        </>
+      }
+    >
+      <></>
+    </AboutSection>
+  );
+}

apps/playground/src/pages/about/index.tsx

@@ -3,13 +3,15 @@ import AboutIncorporation from "./about-us/incorporation";
 // import AboutMeeting from "./about-us/meeting";
 import AboutStatus from "./about-us/status";
 import AboutTeam from "./about-us/team";
+import AboutWhatWorkingOn from "./about-us/what-working-on";
 
 export default function AboutPage() {
   return (
     <>
       <AboutHero />
-      {/* <AboutMeeting /> */}
       <AboutTeam />
+      {/* <AboutMeeting /> */}
+      <AboutWhatWorkingOn />
       <AboutIncorporation />
       <AboutStatus />
     </>
@@ -23,7 +25,7 @@ export function AboutSection({
 }: {
   children: React.ReactNode;
   title: string;
-  description: string;
+  description: React.ReactNode;
 }) {
   return (
     <section className="bg-white dark:bg-gray-900">
@@ -32,9 +34,9 @@ export function AboutSection({
           <h2 className="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white">
             {title}
           </h2>
-          <p className="font-light text-gray-500 sm:text-xl dark:text-gray-400">
+          <div className="font-light text-gray-500 sm:text-xl dark:text-gray-400">
             {description}
-          </p>
+          </div>
         </div>
         {children}
       </div>

apps/playground/src/pages/apis/transaction/minting/asset-metadata.tsx

@@ -0,0 +1,54 @@
+import Link from "~/components/link";
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import Codeblock from "~/components/text/codeblock";
+import { demoAssetMetadata } from "~/data/cardano";
+
+export default function MintingAssetMetadata() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="assetMetadata"
+      title="Define Asset Metadata"
+      leftSection={Left()}
+    />
+  );
+}
+
+function Left() {
+  let codeSnippet1 = `const assetMetadata: AssetMetadata = ${JSON.stringify(
+    demoAssetMetadata,
+    null,
+    2,
+  )};`;
+
+  let codeSnippet2 = `const assetMetadata: AssetMetadata = ${JSON.stringify(
+    {
+      ...demoAssetMetadata,
+      description: [
+        "This NFT was minted by Mesh",
+        "Learn how you can do it at https://meshjs.dev/",
+      ],
+    },
+    null,
+    2,
+  )};`;
+
+  return (
+    <>
+      <p>
+        There are many ways to define asset metadata, the best way to find all
+        is looking at the source code{" "}
+        <Link href="https://github.com/MeshJS/mesh/blob/main/packages/mesh-common/src/types/asset-metadata.ts">
+          asset-metadata.ts
+        </Link>{" "}
+        file.
+      </p>
+      <p>The most common is to define it as a JSON object with description:</p>
+      <Codeblock data={codeSnippet1} />
+      <p>
+        For string values that are longer than 64 length, you can break it into
+        a list of strings:
+      </p>
+      <Codeblock data={codeSnippet2} />
+    </>
+  );
+}

apps/playground/src/pages/apis/transaction/minting/index.tsx

@@ -6,7 +6,9 @@ import TitleIconDescriptionBody from "~/components/sections/title-icon-descripti
 import Metatags from "~/components/site/metatags";
 import { metaMinting } from "~/data/links-transactions";
 import { Intro } from "../common";
+import MintingAssetMetadata from "./asset-metadata";
 import BurningOneSignature from "./burning-one-signature";
+import MintingMaskMetadata from "./mask-metadata";
 import MintingCip68 from "./minting-cip68";
 import MintingNativeScript from "./minting-native-script";
 import MintingOneSignature from "./minting-one-signature";
@@ -16,6 +18,7 @@ import MintingRoyaltyToken from "./minting-royalty-token";
 const ReactPage: NextPage = () => {
   const sidebarItems = [
     { label: "Mint with One Signature", to: "mintingOneSignature" },
+    { label: "Asset Metadata", to: "assetMetadata" },
     { label: "Burn asset", to: "burningOneSignature" },
     { label: "Mint with Native Script", to: "mintingNativeScript" },
     { label: "Mint with Plutus Script", to: "mintingPlutusScript" },
@@ -49,11 +52,13 @@ const ReactPage: NextPage = () => {
         <ButtonFloatDocumentation href="https://docs.meshjs.dev/transactions/classes/Transaction" />
 
         <MintingOneSignature />
+        <MintingAssetMetadata />
         <BurningOneSignature />
         <MintingNativeScript />
         <MintingPlutusScript />
         <MintingCip68 />
         <MintingRoyaltyToken />
+        <MintingMaskMetadata />
       </SidebarFullwidth>
     </>
   );