Add landing page for Svelte UI project [Do not merge until landing pages for all supported frameworks are complete]

.eslintrc.js

@@ -14,5 +14,12 @@ module.exports = {
   rules: {
     'no-constant-condition': 'off',
   },
-  ignorePatterns: ['*.md'],
+  ignorePatterns: [
+    '*.md',
+    '**/*.css',
+    '**/*.png',
+    '**/*.svg',
+    '**/*.woff',
+    '**/*.woff2',
+  ],
 };

src/lib/project.js

@@ -8,6 +8,9 @@ const { prompt, Select } = require('enquirer');
 const { spawnSync } = require('child_process');
 const { red, green, reset } = require('chalk');
 const customNextIndex = require('../lib/ui/next/customNextIndex');
+const customPageSvelte = require('../lib/ui/svelte/customPageSvelte');
+const customLayoutSvelte = require('../lib/ui/svelte/customLayoutSvelte');
+const gradientBackground = require('./ui/svelte/gradientBackground');
 
 const shExec = util.promisify(sh.exec);
 
@@ -282,6 +285,7 @@ function scaffoldSvelte() {
     stdio: 'inherit',
     shell: true,
   });
+
   sh.cp(
     path.join(__dirname, 'ui', 'svelte', 'hooks.server.js'),
     path.join('ui', 'src')
@@ -314,79 +318,77 @@ function scaffoldSvelte() {
 	// from the referenced tsconfig.json - TypeScript does not merge them in
 }
   `;
-
+  let useTypescript = true;
   try {
     // Determine if generated project is a ts project by looking for a tsconfig file
+    fs.readFileSync(path.join('ui', 'tsconfig.json'));
     fs.writeFileSync(path.join('ui', 'tsconfig.json'), customTsConfig);
   } catch (err) {
     if (err.code !== 'ENOENT') {
       console.error(err);
     }
+    useTypescript = false;
   }
 
-  const vitConfig = fs.readFileSync(path.join('ui', 'vite.config.js'), 'utf8');
+  const viteConfigFileName = useTypescript
+    ? 'vite.config.ts'
+    : 'vite.config.js';
+
+  const vitConfig = fs.readFileSync(
+    path.join('ui', viteConfigFileName),
+    'utf8'
+  );
 
   const customViteConfig = vitConfig.replace(
     /^}(.*?)$/gm, // Search for the last '}' in the file.
     `,
     optimizeDeps: { esbuildOptions: { target: 'es2020' } }
-  };`
+  });`
   );
 
-  fs.writeFileSync(path.join('ui', 'vite.config.js'), customViteConfig);
+  fs.writeFileSync(path.join('ui', viteConfigFileName), customViteConfig);
 
-  const pageSvelte = fs.readFileSync(
+  // Remove Sveltekit demo pages and components if found
+  fs.emptyDirSync(path.join('ui', 'src', 'routes'));
+
+  fs.writeFileSync(
     path.join('ui', 'src', 'routes', '+page.svelte'),
-    'utf8'
+    customPageSvelte
   );
 
-  const contractImport = `
-  import { onMount } from "svelte";
-  import { isReady, Mina, PublicKey } from 'snarkyjs';
+  fs.writeFileSync(
+    path.join('ui', 'src', 'routes', '+layout.svelte'),
+    customLayoutSvelte
+  );
 
-  onMount(async () => {
-    await isReady;  
+  fs.writeFileSync(
+    path.join('ui', 'src', 'routes', 'GradientBG.svelte'),
+    gradientBackground
+  );
 
-    const { Add } = await import('../../../contracts/build/src/')
-    // Update this to use the address (public key) for your zkApp account
-    // To try it out, you can try this address for an example "Add" smart contract that we've deployed to
-    // Berkeley Testnet B62qisn669bZqsh8yMWkNyCA7RvjrL6gfdr3TQxymDHNhTc97xE5kNV
-    const zkAppAddress = ''
-    // This should be removed once the zkAppAddress is updated.
-    if (!zkAppAddress) {
-      console.error(
-        'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Berkeley Testnet: B62qqkb7hD1We6gEfrcqosKt9C398VLp1WXeTo1i9boPoqF7B1LxHg4',
-      );
-    }
-    const zkApp = new Add(PublicKey.fromBase58(zkAppAddress))
-  });
-`;
+  fs.mkdirsSync(path.join('ui', 'src', 'styles'));
 
-  let customPageSvelte;
-  // A script tag will be added if a user generates a skelton project from the svelte prompt
-  if (!pageSvelte.includes('<script>')) {
-    customPageSvelte = pageSvelte.replace(
-      '<h1>',
-      `
-    <script>
-    ${contractImport}
-    </script>
+  // Adds landing page styles directory and files to SvelteKit project.
+  fs.copySync(
+    path.join(__dirname, 'ui', 'svelte', 'styles'),
+    path.join('ui', 'src', 'styles')
+  );
 
-    <h1>
-    `
-    );
-  } else {
-    customPageSvelte = pageSvelte.replace(
-      '</script>',
-      `
-${contractImport}
-</script>`
-    );
-  }
+  // Remove Sveltkit demo lib and assets if found
+  fs.emptyDirSync(path.join('ui', 'src', 'lib'));
 
-  fs.writeFileSync(
-    path.join('ui', 'src', 'routes', '+page.svelte'),
-    customPageSvelte
+  // Adds landing page lib directory and files to SvelteKit project.
+  fs.copySync(
+    path.join(__dirname, 'ui', 'svelte', 'lib'),
+    path.join('ui', 'src', 'lib')
+  );
+
+  // Removes Sveltekit static assets
+  fs.emptydirSync(path.join('ui', 'static'));
+
+  fs.copySync(
+    path.join(__dirname, 'ui', 'svelte', 'favicon.png'),
+    path.join('ui', 'static', 'favicon.png')
   );
 }
 
@@ -498,6 +500,7 @@ async function scaffoldNext(projectName) {
     path.join('ui', 'src/pages', '_app.tsx'),
     path.join('ui', 'src/pages', '_app.page.tsx')
   );
+
   sh.mv(
     path.join('ui', 'src/pages', 'index.tsx'),
     path.join('ui', 'src/pages', 'index.page.tsx')

src/lib/ui/svelte/customLayoutSvelte.js

@@ -0,0 +1,6 @@
+module.exports = `
+<script>
+  import '../styles/globals.css'
+</script>
+<slot/>
+`;

src/lib/ui/svelte/customPageSvelte.js

@@ -0,0 +1,134 @@
+module.exports = `
+<script>
+  import heroMinaLogo from '$lib/assets/HeroMinaLogo.svg'
+  import arrowRightSmall from '$lib/assets/arrow-right-small.svg'
+  import GradientBG from './GradientBG.svelte'
+  import { onMount } from 'svelte'
+  import { isReady, Mina, PublicKey } from 'snarkyjs'
+
+  onMount(async () => {
+    const { Add } = await import('../../../contracts/build/src/')
+
+    await isReady
+    // Update this to use the address (public key) for your zkApp account.
+    // To try it out, you can try this address for an example "Add" smart contract that we've deployed to
+    // Berkeley Testnet B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA .
+    const zkAppAddress = ''
+    // This should be removed once the zkAppAddress is updated.
+    if (!zkAppAddress) {
+      console.error(
+        'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Berkeley Testnet: B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA',
+      )
+    }
+    //const zkApp = new Add(PublicKey.fromBase58(zkAppAddress))
+  })
+</script>
+
+<style global>
+  @import '../styles/Home.module.css';
+</style>
+
+<svelte:head>
+  <title>Mina zkApp UI</title>
+</svelte:head>
+<GradientBG>
+  <main class="main">
+    <div class="center">
+      <a
+        href="https://minaprotocol.com/"
+        target="_blank"
+        rel="noopener noreferrer">
+        <img
+          class="logo"
+          src={heroMinaLogo}
+          alt="Mina Logo"
+          width="191"
+          height="174"
+          priority />
+      </a>
+      <p class="tagline">
+        built with
+        <code class="code">SnarkyJS</code>
+      </p>
+    </div>
+    <p class="start">
+      Get started by editing
+      <code class="code">src/routes/+page.svelte</code>
+    </p>
+    <div class="grid">
+      <a
+        href="https://docs.minaprotocol.com/zkapps"
+        class="card"
+        target="_blank"
+        rel="noopener noreferrer">
+        <h2>
+          <span>DOCS</span>
+          <div>
+            <img
+              src={arrowRightSmall}
+              alt="Mina Logo"
+              width={16}
+              height={16}
+              priority />
+          </div>
+        </h2>
+        <p>Explore zkApps, how to build one, and in-depth references</p>
+      </a>
+      <a
+        href="https://docs.minaprotocol.com/zkapps/tutorials/hello-world"
+        class="card"
+        target="_blank"
+        rel="noopener noreferrer">
+        <h2>
+          <span>TUTORIALS</span>
+          <div>
+            <img
+              src={arrowRightSmall}
+              alt="Mina Logo"
+              width={16}
+              height={16}
+              priority />
+          </div>
+        </h2>
+        <p>Learn with step-by-step SnarkyJS tutorials</p>
+      </a>
+      <a
+        href="https://discord.gg/minaprotocol"
+        class="card"
+        target="_blank"
+        rel="noopener noreferrer">
+        <h2>
+          <span>QUESTIONS</span>
+          <div>
+            <img
+              src={arrowRightSmall}
+              alt="Mina Logo"
+              width={16}
+              height={16}
+              priority />
+          </div>
+        </h2>
+        <p>Ask questions on our Discord server</p>
+      </a>
+      <a
+        href="https://docs.minaprotocol.com/zkapps/how-to-deploy-a-zkapp"
+        class="card"
+        target="_blank"
+        rel="noopener noreferrer">
+        <h2>
+          <span>DEPLOY</span>
+          <div>
+            <img
+              src={arrowRightSmall}
+              alt="Mina Logo"
+              width={16}
+              height={16}
+              priority />
+          </div>
+        </h2>
+        <p>Deploy a zkApp to Berkeley Testnet</p>
+      </a>
+    </div>
+  </main>
+</GradientBG>
+`;