[Feature] vanilla js template (#746)

* copy vite template * simple execute and key function working * adding root package and prettier, aleo branding * prettier * moving and updating create script * version bump * updating docs
ProvableHQ · Sep 21, 2023 · bdfe1c1 · bdfe1c1
1 parent 2b864a7
commit bdfe1c1
Show file tree

Hide file tree

Showing 16 changed files with 370 additions and 39 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "proseWrap": "always"
+}
diff --git a/create-aleo-app/README.md b/create-aleo-app/README.md
@@ -8,7 +8,7 @@
 With NPM:
 
 ```bash
-$ npm create aleo-app@latest
+npm create aleo-app@latest
 ```
 
 Then follow the prompts!
@@ -25,6 +25,7 @@ npm create aleo-app@latest my-aleo-app -- --template react
 
 Currently supported template presets include:
 
+- `vanilla`
 - `react`
 - `react-leo`
 

diff --git a/create-aleo-app/package.json b/create-aleo-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-aleo-app",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "license": "GPL-3.0",
   "collaborators": [

diff --git a/create-aleo-app/src/index.ts b/create-aleo-app/src/index.ts
@@ -3,7 +3,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import minimist from "minimist";
 import prompts from "prompts";
-import { lightGreen, cyan, red, reset, yellow } from "kolorist";
+import {lightGreen, cyan, red, reset, yellow, blue} from "kolorist";
 
 const argv = minimist<{
   t?: string;
@@ -26,57 +26,35 @@ type FrameworkVariant = {
 };
 
 const FRAMEWORKS: Framework[] = [
-  // {
-  //   name: 'vanilla',
-  //   display: 'Vanilla',
-  //   color: yellow,
-  //   variants: [
-  //     {
-  //       name: 'vanilla-ts',
-  //       display: 'TypeScript',
-  //       color: blue,
-  //     },
-  //     {
-  //       name: 'vanilla',
-  //       display: 'JavaScript',
-  //       color: yellow,
-  //     },
-  //   ],
-  // },
+  {
+    name: 'vanilla',
+    display: 'Vanilla',
+    color: yellow,
+    variants: [
+      {
+        name: 'vanilla',
+        display: 'JavaScript',
+        color: yellow,
+      },
+    ],
+  },
   {
     name: "react",
     display: "React",
     color: cyan,
     variants: [
-      // {
-      //   name: 'react-ts',
-      //   display: 'TypeScript',
-      //   color: blue,
-      // },
       {
         name: "react",
         display: "JavaScript",
-        color: yellow,
+        color: blue,
       },
       {
         name: "react-leo",
         display: "JavaScript + Leo",
         color: lightGreen,
       },
     ],
-  },
-  // {
-  //   name: 'node',
-  //   display: 'Node.js',
-  //   color: lightBlue,
-  //   variants: [
-  //     {
-  //       name: 'node',
-  //       display: 'Node.js',
-  //       color: lightBlue,
-  //     },
-  //   ],
-  // },
+  }
 ];
 
 const TEMPLATES = FRAMEWORKS.map(

diff --git a/create-aleo-app/template-vanilla/_gitignore b/create-aleo-app/template-vanilla/_gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/create-aleo-app/template-vanilla/_headers b/create-aleo-app/template-vanilla/_headers
@@ -0,0 +1,3 @@
+/*
+  Cross-Origin-Opener-Policy: same-origin
+  Cross-Origin-Embedder-Policy: require-corp
diff --git a/create-aleo-app/template-vanilla/index.html b/create-aleo-app/template-vanilla/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/aleo.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Aleo App</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/main.js"></script>
+    </body>
+</html>
diff --git a/create-aleo-app/template-vanilla/javascript.svg b/create-aleo-app/template-vanilla/javascript.svg
diff --git a/create-aleo-app/template-vanilla/main.js b/create-aleo-app/template-vanilla/main.js
@@ -0,0 +1,43 @@
+import "./style.css";
+import javascriptLogo from "./javascript.svg";
+import aleoLogo from "/aleo.svg";
+import viteLogo from "/vite.svg";
+
+const worker = new Worker("worker.js", {
+    type: "module",
+});
+
+worker.onmessage = function (e) {
+    console.log(e.data);
+    alert(e.data);
+};
+
+window.execute = () => {
+    worker.postMessage("execute");
+};
+
+window.key = () => {
+    worker.postMessage("key");
+};
+
+document.querySelector("#app").innerHTML = `
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://aleo.org/" target="_blank">
+      <img src="${aleoLogo}" class="logo" alt="Aleo logo" />
+    </a>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+    </a>
+    <h1>Hello Aleo!</h1>
+    <div class="card">
+      <button onclick="window.execute()">Call Execute Function</button>
+      <button onclick="window.key()">Get Private Key</button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Aleo logo to learn more
+    </p>
+  </div>
+`;
diff --git a/create-aleo-app/template-vanilla/package.json b/create-aleo-app/template-vanilla/package.json
@@ -0,0 +1,18 @@
+{
+    "name": "aleo-starter",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "peerDependencies": {
+        "tslib": "^2.6.1"
+    },
+    "devDependencies": {
+        "@aleohq/sdk": "^0.5.10",
+        "vite": "^4.4.5"
+    }
+}
diff --git a/create-aleo-app/template-vanilla/public/aleo.svg b/create-aleo-app/template-vanilla/public/aleo.svg
diff --git a/create-aleo-app/template-vanilla/public/vite.svg b/create-aleo-app/template-vanilla/public/vite.svg
diff --git a/create-aleo-app/template-vanilla/style.css b/create-aleo-app/template-vanilla/style.css
@@ -0,0 +1,97 @@
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+a:hover {
+    color: #535bf2;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+}
+.logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+    filter: drop-shadow(0 0 2em #f7df1eaa);
+}
+
+.card {
+    padding: 2em;
+}
+
+.read-the-docs {
+    color: #888;
+}
+
+button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
+}
+button:hover {
+    border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+    a:hover {
+        color: #747bff;
+    }
+    button {
+        background-color: #f9f9f9;
+    }
+}