update website

README.md

@@ -25,6 +25,12 @@ Mesh is an open-source library designed to make building dApps accessible. Wheth
 
 Explore the features on [Mesh Playground](https://meshjs.dev/).
 
+Instant setup a new project with a single command using Mesh CLI and start building:
+
+```
+npx meshjs your-app-name
+```
+
 ## What's inside?
 
 ### Architecture Overview
@@ -109,15 +115,7 @@ Here's a list of open-source smart contracts, complete with documentation, live
 | Swap | Facilitates the exchange of assets between two parties | [[demo](https://meshjs.dev/smart-contracts/swap)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/swap)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshSwapContract)] |
 | Vesting | Allows users to lock tokens for a period of time and withdraw the funds after the lockup period | [[demo](https://meshjs.dev/smart-contracts/vesting)] [[source](https://github.com/MeshJS/mesh/tree/main/packages/mesh-contract/src/vesting)] [[docs](https://docs.meshjs.dev/contracts/classes/MeshVestingContract)] |
 
-## Getting Started
-
-### Usage
-
-To use Mesh in your project, run the following command to install the core package:
-
-```
-npm install @meshsdk/core
-```
+## Usage
 
 ### Install
 

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

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

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

@@ -90,7 +90,7 @@ export default function Navbar() {
             {!isSSR && (
               <button
                 type="button"
-                className="rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none dark:text-gray-400 dark:hover:bg-gray-700"
+                className="rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                 onClick={() => {
                   toggle();
                 }}

apps/playground/src/components/site/navbar/menu-item-dropdown.tsx

@@ -21,7 +21,7 @@ export default function MenuItemDropdown({
     >
       <button
         type="button"
-        className="lg:hover:text-primary-600 lg:dark:hover:text-primary-500 dark:hover:text-primary-500 flex w-full items-center justify-between border-b border-gray-100 py-2 pl-3 pr-4 font-medium text-gray-700 hover:bg-gray-50 lg:w-auto lg:border-0 lg:p-0 lg:hover:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 lg:dark:hover:bg-transparent"
+        className="dark:text-white lg:hover:text-black lg:dark:hover:text-white dark:hover:text-white flex w-full items-center justify-between border-b border-gray-100 py-2 pl-3 pr-4 font-medium text-gray-700 hover:bg-gray-50 lg:w-auto lg:border-0 lg:p-0 lg:hover:bg-transparent dark:border-gray-700 dark:hover:bg-gray-700 lg:dark:hover:bg-transparent"
         aria-label="More"
       >
         {title}

apps/playground/src/components/site/navbar/menu-item.tsx

@@ -11,7 +11,7 @@ export default function MenuItem({
     <li>
       <Link
         href={link}
-        className="lg:hover:text-primary-600 lg:dark:hover:text-primary-500 dark:hover:text-primary-500 block border-b border-gray-100 py-2 pl-3 pr-4 text-gray-700 hover:bg-gray-50 lg:border-0 lg:p-0 lg:hover:bg-transparent dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 lg:dark:hover:bg-transparent"
+        className="lg:hover:text-black lg:dark:hover:text-white dark:hover:text-white block border-b border-gray-100 py-2 pl-3 pr-4 text-gray-700 hover:bg-gray-50 lg:border-0 lg:p-0 lg:hover:bg-transparent dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 lg:dark:hover:bg-transparent hover:no-underline"
       >
         {title}
       </Link>

apps/playground/src/components/site/navbar/submenu-item-dropdown.tsx

@@ -26,7 +26,7 @@ export default function SubmenuItemDropdown({
       <Link href={link ?? "#"}>
         <button
           type="button"
-          className="hover:text-primary-600 dark:hover:text-primary-500 flex w-full items-center justify-between px-4 py-2"
+          className="hover:text-black dark:hover:text-white flex w-full items-center justify-between px-4 py-2"
         >
           <span className="flex items-center">
             {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}
@@ -71,7 +71,7 @@ function Item({
     <li>
       <Link
         href={link}
-        className="hover:text-primary-600 dark:hover:text-primary-500 flex w-full items-center px-4 py-2"
+        className="hover:text-black dark:hover:text-white flex w-full items-center px-4 py-2"
       >
         {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}
         {title}

apps/playground/src/components/site/navbar/submenu-item.tsx

@@ -15,7 +15,7 @@ export default function SubmenuItem({
     <li>
       <Link
         href={link}
-        className="hover:text-primary-600 dark:hover:text-primary-500 flex w-full items-center px-4 py-2"
+        className="hover:text-black dark:hover:text-white flex w-full items-center px-4 py-2"
         target={link.startsWith("http") ? "_blank" : "_self"}
       >
         {icon && React.createElement(icon, { className: "mr-2 w-4 h-4" })}

apps/playground/src/data/catalyst.ts

@@ -110,9 +110,11 @@ export const fund12 = [
       "Mesh application wallet",
       "Modular CSL library",
       "Wallet support for private blockchain networks (e.g. Yaci)",
+      "CIP 45",
+      "Improve error messages",
     ],
-    tobecompleted: ["CIP 45", "Improve error messages"],
-    status: "In Progress",
+    tobecompleted: [],
+    status: "Closing",
   },
   {
     title: "Mesh Software as a Service",
@@ -153,7 +155,8 @@ export const fund11 = [
       "Escrow",
       "Vesting",
       "Gift card",
-      "Coupon bond guaranteed",
+      "Swap",
+      "Payment splitter",
       "Content ownership",
       "NFT minting machine",
     ],
@@ -193,7 +196,7 @@ export const fund10 = [
       "Demos and tutorials repository",
       "Mesh PBL Season #1",
     ],
-    tobecompleted: ["Student projects"],
+    tobecompleted: [],
     status: "Closing",
   },
 ];

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

@@ -10,8 +10,8 @@ import { metaWallets } from "./links-wallets";
 
 export const linksApi: MenuItem[] = [
   metaWallets,
-  metaTransaction,
   metaTxbuilder,
+  metaTransaction,
   metaData,
   metaReact,
   metaSvelte,

apps/playground/src/pages/guides/nextjs.mdx

@@ -3,9 +3,9 @@ import { guidenextjs } from "~/data/links-guides";
 
 export default function MDXPage({ children }) {
   const sidebarItems = [
-    { label: 'System setup', to: 'systemsetup' },
+    { label: 'Setup Next.js', to: 'setupnextjs' },
     { label: 'Setup Mesh', to: 'setupmesh' },
-    { label: 'See it in action', to: 'seeitinaction' },
+    { label: 'Connect wallet and view assets', to: 'connectwalletandviewassets' },
   ];
 
   return (
@@ -21,23 +21,21 @@ export default function MDXPage({ children }) {
   );
 }
 
-In this guide, you will get your application running, [check this demo](https://starter-template.meshjs.dev/) to see the final result.
+In this guide, we will set up a Next.js application and connect it to the Cardano blockchain using Mesh. We will create a simple application that allows users to connect their wallets and view the assets in their wallets.
 
-[Next.js](https://nextjs.org/) is a web development framework built on top of Node.js enabling React-based web applications functionalities such as server-side rendering and generating static websites.
-
-Next.js and Mesh are JavaScript libraries, and so we will assume that you have some familiarity with HTML and JavaScript language, but you should be able to follow along even if you are coming from a different programming language. If you don't feel very confident, we recommend going through this [JS tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript), or the [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) or my preferred method, by watch a few [videos from YouTube](https://www.youtube.com/results?search_query=get+started+with+nextjs).
+Though this guide is focused on Next.js which uses [Mesh React](/react) you can also use Mesh with other frameworks like Remix, React, and Vue. Mesh SDK has [Svelte UI components](/svelte) too.
 
-## System setup
+You may follow this guide to setup your project or use the [Mesh CLI](https://meshjs.dev/) to scaffold a new project.
 
-### 1. Visual Studio Code
-
-Visual Studio Code is a code editor made by Microsoft. Download and install [Visual Studio Code](https://code.visualstudio.com/) for code editing.
+```bash
+npx meshjs your-app-name
+```
 
-### 2. Node.js
+## Setup Next.js
 
-Node.js is a cross-platform JavaScript runtime environment that runs on the V8 engine and executes JavaScript code. Install the Long-Term Support (LTS) version of [Node.js](https://nodejs.org/) (as of writing v16.16.0).
+[Next.js](https://nextjs.org/) is a web development framework built on top of Node.js enabling React-based web applications functionalities such as server-side rendering and generating static websites.
 
-## Setup Next.js
+Next.js and Mesh are JavaScript libraries, and so we will assume that you have some familiarity with HTML and JavaScript language, but you should be able to follow along even if you are coming from a different programming language. If you don't feel very confident, we recommend going through this [JS tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript), or the [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) or my preferred method, by watch a few [videos from YouTube](https://www.youtube.com/results?search_query=get+started+with+nextjs).
 
 ### 1. Create project folder and open Visual Studio Code
 
@@ -75,6 +73,8 @@ Visit [http://localhost:3000](http://localhost:3000/) to view your application.
 
 ## Setup Mesh
 
+Mesh is a JavaScript library that provides a simple way to interact with the Cardano blockchain. It provides a set of APIs that allow you to interact with the Cardano blockchain without having to deal with the complexities of the Cardano blockchain.
+
 ### 1. Install MeshJS package
 
 Install the latest version of Mesh with npm:
@@ -85,7 +85,7 @@ npm install @meshsdk/core @meshsdk/react
 
 ### 2. Add webpack in **next.config.js**
 
-Open **next.config.mjs** and append **webpack** configurations. Your **next.config.mjs** should look like this:
+Open **next.config.ts** and append **webpack** configurations. Your **next.config.ts** should look like this:
 
 ```
 /** @type {import('next').NextConfig} */
@@ -107,7 +107,7 @@ export default nextConfig;
 
 You just saved a few weeks of learning and a number days trying to get started. Your Next.js application is ready to connect wallet, browse assets and make some transactions.
 
-## See it in action
+## Connect wallet and view assets
 
 ### 1. Add **MeshProvider**
 

apps/playground/src/pages/home/intro.tsx

@@ -58,8 +58,8 @@ export default function SectionIntro() {
           </h2>
           <p className="mb-8 font-light lg:text-xl"></p>
           <div className="mb-6 border-b border-t border-gray-200 py-8 dark:border-gray-700">
-            {features.map((feature) => (
-              <div className="flex pb-8">
+            {features.map((feature, i) => (
+              <div className="flex pb-8" key={i}>
                 <div className="bg-primary-100 dark:bg-primary-900 mr-4 flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
                   <feature.icon className="text-primary-600 dark:text-primary-300 h-5 w-5" />
                 </div>

apps/playground/src/pages/react/getting-started/index.tsx

@@ -6,12 +6,12 @@ import Metatags from "~/components/site/metatags";
 import { metaReactGettingstarted } from "~/data/links-react";
 import ReactConnectWallet from "../ui-components/connect-wallet";
 import ReactHookUseWallet from "../wallet-hooks/use-wallet";
-import ReactInstall from "./install";
+import ReactSetup from "./setup";
 import MeshProvider from "./mesh-provider";
 
 const ReactPage: NextPage = () => {
   const sidebarItems = [
-    { label: "Install", to: "reactInstall" },
+    { label: "Setup", to: "reactSetup" },
     { label: "Mesh Provider", to: "meshProvider" },
     { label: "Connect Wallet", to: "connectWallet" },
     { label: "useWallet Hook", to: "useWallet" },
@@ -36,7 +36,7 @@ const ReactPage: NextPage = () => {
           </p>
         </TitleIconDescriptionBody>
 
-        <ReactInstall />
+        <ReactSetup />
         <MeshProvider />
         <ReactConnectWallet />
         <ReactHookUseWallet />

apps/playground/src/pages/react/getting-started/setup.tsx

@@ -0,0 +1,41 @@
+import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
+import Codeblock from "~/components/text/codeblock";
+
+export default function ReactSetup() {
+  return (
+    <TwoColumnsScroll
+      sidebarTo="reactSetup"
+      title="Setup"
+      leftSection={Left()}
+    />
+  );
+}
+
+function Left() {
+  return (
+    <>
+      <p>
+        The fastest way to get started a new project with React is to use the
+        Mesh-CLI, which will scaffold a new project for you. To do this, run the
+        following:
+      </p>
+      <Codeblock data={`npx meshjs your-app-name`} />
+
+      <p>
+        During the installation process, you will be asked to choose a template.
+        Choose the React template. This will scaffold a new React project with
+        Mesh pre-installed.
+      </p>
+
+      <p>To manually, install the Mesh React package, run the following:</p>
+      <Codeblock data={`npm install @meshsdk/react`} />
+
+      <p>
+        Next, add the Mesh CSS to your application, doing so will apply the
+        default styles to the components. You can add this in{" "}
+        <code>/pages/_app.tsx</code>.
+      </p>
+      <Codeblock data={`import "@meshsdk/react/styles.css";`} />
+    </>
+  );
+}

apps/playground/src/pages/svelte/getting-started/index.tsx

@@ -5,12 +5,12 @@ import TitleIconDescriptionBody from "~/components/sections/title-icon-descripti
 import Metatags from "~/components/site/metatags";
 import { metaSvelteGettingstarted } from "~/data/links-svelte";
 import SvelteConnectWallet from "../ui-components/connect-wallet";
-import SvelteInstall from "./install";
+import SvelteSetup from "./setup";
 import SvelteState from "./state";
 
 const SveltePage: NextPage = () => {
   const sidebarItems = [
-    { label: "Install", to: "SvelteInstall" },
+    { label: "Setup", to: "SvelteSetup" },
     { label: "Connect Wallet", to: "connectWallet" },
     { label: "Get Wallet State", to: "svelteState" },
   ];
@@ -34,7 +34,7 @@ const SveltePage: NextPage = () => {
           </p>
         </TitleIconDescriptionBody>
 
-        <SvelteInstall />
+        <SvelteSetup />
         <SvelteConnectWallet />
         <SvelteState />
       </SidebarFullwidth>

apps/playground/src/pages/svelte/getting-started/install.tsx → apps/playground/src/pages/svelte/getting-started/setup.tsx

@@ -1,11 +1,11 @@
 import TwoColumnsScroll from "~/components/sections/two-columns-scroll";
 import Codeblock from "~/components/text/codeblock";
 
-export default function SvelteInstall() {
+export default function SvelteSetup() {
   return (
     <TwoColumnsScroll
-      sidebarTo="svelteInstall"
-      title="Install"
+      sidebarTo="svelteSetup"
+      title="Setup"
       leftSection={Left()}
     />
   );
@@ -22,7 +22,20 @@ function Left() {
 
   return (
     <>
-      <p>To start, install:</p>
+      <p>
+        The fastest way to get started a new project with Svelte is to use the
+        Mesh-CLI, which will scaffold a new project for you. To do this, run the
+        following:
+      </p>
+      <Codeblock data={`npx meshjs your-app-name`} />
+
+      <p>
+        During the installation process, you will be asked to choose a template.
+        Choose the Svelte template. This will scaffold a new Svelte project with
+        Mesh pre-installed.
+      </p>
+
+      <p>To manually, install the Mesh Svelte package, run the following:</p>
       <Codeblock data={`npm install @meshsdk/svelte`} />
 
       <p>