Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions _backup/apps/playground/src/data/links-frameworks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import { MenuItem } from "~/types/menu-item";
export const metaNextjs = {
title: "Next.js",
desc: "React-based web applications with server-side rendering and static website generation",
link: "/getting-started/frameworks/nextjs",
link: "/resources/platforms/nextjs",
};

export const metaSvelte = {
title: "Svelte",
desc: "Cybernetically enhanced web apps",
link: "/getting-started/frameworks/svelte",
link: "/svelte/getting-started",
};

// vite
Expand All @@ -28,7 +28,7 @@ export const linksFrameworks: MenuItem[] = [metaNextjs, metaSvelte];
export const metaFrameworks: MenuItem = {
title: "Setup on Frameworks",
desc: "Get started with Mesh on different frameworks",
link: "/getting-started/frameworks",
link: "/resources/platforms",
items: linksFrameworks,
icon: CpuChipIcon,
};
8 changes: 8 additions & 0 deletions _backup/apps/playground/src/data/links-resources.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
import {
AcademicCapIcon,
CubeIcon,
DocumentTextIcon,
Squares2X2Icon,
StarIcon,
} from "@heroicons/react/24/solid";

import { MenuItem } from "~/types/menu-item";
import { metaGuides } from "./links-guides";
import { metaStarterTemplates } from "./links-starter-templates";

export const linksResources: MenuItem[] = [
metaGuides,
{
title: metaStarterTemplates.title,
desc: metaStarterTemplates.desc,
link: metaStarterTemplates.link,
icon: CubeIcon,
},
{
title: "Documentation",
desc: "Full documentation for MeshJS",
Expand Down
58 changes: 58 additions & 0 deletions _backup/apps/playground/src/data/links-starter-templates.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/**
* Starter templates from https://github.com/MeshJS?q=template&type=all
* Each template can have a live demo at https://<repo-name>.meshjs.dev
*/

export type StarterTemplate = {
name: string;
description: string;
githubUrl: string;
liveUrl?: string;
};

export const starterTemplates: StarterTemplate[] = [
{
name: "Next.js",
description:
"Start a new project on Next.js with connect wallet button and wallet integration.",
githubUrl: "https://github.com/MeshJS/mesh-nextjs-template",
liveUrl: "https://starter-template.meshjs.dev",
},
{
name: "Svelte",
description: "Start a new project with Svelte and Mesh.",
githubUrl: "https://github.com/MeshJS/mesh-svelte-template",
liveUrl: "https://mesh-svelte-template.meshjs.dev",
},
{
name: "Aiken",
description: "Build with Aiken smart contracts and Mesh.",
githubUrl: "https://github.com/MeshJS/mesh-aiken-template",
liveUrl: "https://aiken-template.meshjs.dev",
},
{
name: "Midnight",
description: "Mesh Midnight starter template with counter contract and Vite React frontend.",
githubUrl: "https://github.com/MeshJS/midnight-starter-template",
},
{
name: "Minting",
description: "Sell native tokens with multi-sig minting.",
githubUrl: "https://github.com/MeshJS/minting-template",
liveUrl: "https://minting-template.meshjs.dev",
},
{
name: "Standalone",
description: "Execute a standalone script to manage wallets and create transactions.",
githubUrl: "https://github.com/MeshJS/standalone-template",
},
];

export const metaStarterTemplates = {
title: "Starter Templates",
desc: "Scaffold a new project with Mesh using our starter templates. Each template includes wallet connection and integration to get you building quickly.",
link: "/starter-templates",
};

export const GITHUB_TEMPLATES_URL =
"https://github.com/MeshJS?q=template&type=all&language=&sort=";
73 changes: 73 additions & 0 deletions _backup/apps/playground/src/pages/starter-templates/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import type { NextPage } from "next";

import Link from "~/components/link";
import Metatags from "~/components/site/metatags";
import {
starterTemplates,
metaStarterTemplates,
GITHUB_TEMPLATES_URL,
} from "~/data/links-starter-templates";
import CenterPadded from "~/components/layouts/root/center-padded";
import CenterAlignHeaderParagraph from "~/components/sections/center-align-header-paragraph";

const StarterTemplatesPage: NextPage = () => {
return (
<>
<Metatags
title={metaStarterTemplates.title}
description={metaStarterTemplates.desc}
/>
<CenterPadded>
<CenterAlignHeaderParagraph headerTitle={metaStarterTemplates.title}>
{metaStarterTemplates.desc}
</CenterAlignHeaderParagraph>

<p className="mb-8 text-center text-neutral-500 dark:text-neutral-400">
All starter templates are available on{" "}
<Link href={GITHUB_TEMPLATES_URL} className="font-medium">
GitHub
</Link>
. Use{" "}
<code className="rounded bg-neutral-200 px-1.5 py-0.5 dark:bg-neutral-700">
npx meshjs your-app-name
</code>{" "}
to scaffold with the Mesh CLI.
</p>

<div className="grid gap-6 sm:grid-cols-1 lg:grid-cols-2">
{starterTemplates.map((template) => (
<div
key={template.githubUrl}
className="flex flex-col rounded-lg border border-neutral-200 bg-white p-6 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
>
<h3 className="mb-2 text-lg font-bold text-neutral-900 dark:text-white">
{template.name}
</h3>
<p className="mb-4 flex-1 text-sm text-neutral-500 dark:text-neutral-400">
{template.description}
</p>
<div className="flex flex-wrap gap-4">
<Link
href={template.githubUrl}
className="inline-flex items-center text-sm font-medium text-primary-600 hover:underline dark:text-primary-400"
>
Source on GitHub
</Link>
{template.liveUrl && (
<Link
href={template.liveUrl}
className="inline-flex items-center text-sm font-medium text-primary-600 hover:underline dark:text-primary-400"
>
Live demo
</Link>
)}
</div>
</div>
))}
</div>
</CenterPadded>
</>
);
};

export default StarterTemplatesPage;