feat: vanilla js example (#36)

junobuild · May 16, 2024 · 447ab69 · 447ab69
1 parent bb375f1
commit 447ab69
Show file tree

Hide file tree

Showing 24 changed files with 760 additions and 2 deletions.
diff --git a/src/constants/templates.ts b/src/constants/templates.ts
@@ -81,5 +81,12 @@ export const TEMPLATES: Template[] = [
     type: 'Example',
     description: APP_DESCRIPTION_EXAMPLE,
     kind: 'app'
+  },
+  {
+    framework: `Vanilla JavaScript`,
+    key: `vanilla-js-example`,
+    type: 'Example',
+    description: APP_DESCRIPTION_EXAMPLE,
+    kind: 'app'
   }
 ];
diff --git a/src/services/generate.services.ts b/src/services/generate.services.ts
@@ -159,7 +159,7 @@ const removeLocalConfig = async ({where, template}: PopulateInputFn) => {
       ? 'astro.config.mjs'
       : template.framework === 'Next.js'
         ? 'next.config.mjs'
-        : template.framework === 'React'
+        : ['React', 'Vanilla JavaScript'].includes(template.framework)
           ? 'vite.config.js'
           : 'vite.config.ts'
   );

diff --git a/src/types/template.ts b/src/types/template.ts
@@ -8,6 +8,13 @@ export interface Template {
   kind: ProjectKind;
 }
 
-export type TemplateFramework = 'Angular' | 'Astro' | 'Next.js' | 'React' | 'SvelteKit' | 'Vue';
+export type TemplateFramework =
+  | 'Angular'
+  | 'Astro'
+  | 'Next.js'
+  | 'React'
+  | 'SvelteKit'
+  | 'Vue'
+  | 'Vanilla JavaScript';
 
 export type TemplateType = 'Starter' | 'Example';
diff --git a/templates/vanilla-js-example/.gitignore b/templates/vanilla-js-example/.gitignore
@@ -0,0 +1,26 @@
+# 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?
+
+public/workers
diff --git a/templates/vanilla-js-example/docker-compose.yml b/templates/vanilla-js-example/docker-compose.yml
@@ -0,0 +1,12 @@
+services:
+  juno-satellite:
+    image: junobuild/satellite:latest
+    ports:
+      - 5987:5987
+    volumes:
+      - juno_satellite:/juno/.juno
+      - ./juno.dev.config.js:/juno/juno.dev.config.js
+      - ./target/deploy:/juno/target/deploy/
+
+volumes:
+  juno_satellite:
diff --git a/templates/vanilla-js-example/index.html b/templates/vanilla-js-example/index.html
@@ -0,0 +1,196 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Juno / Vanilla JavaScript Example</title>
+
+    <!-- Font preloads -->
+    <link
+      rel="preload"
+      href="/fonts/jetbrainsmono-regular.woff2"
+      as="font"
+      type="font/woff"
+      crossorigin />
+    <link
+      rel="preload"
+      href="/fonts/jetbrainsmono-bold.woff2"
+      as="font"
+      type="font/woff"
+      crossorigin />
+  </head>
+  <body class="bg-white dark:bg-black">
+    <div class="relative isolate min-h-[100dvh]">
+      <main class="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 tall:min-h-[calc(100dvh-128px)]">
+        <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
+          Example App
+        </h1>
+        <p class="dark:text-white py-4 md:max-w-lg">
+          Explore this demo app built with vanilla JavaScript, Tailwind, and
+          <a href="https://juno.build" rel="noopener noreferrer" target="_blank" class="underline">
+            Juno</a
+          >, showcasing a practical application of these technologies.
+        </p>
+
+        <div id="app" class="contents"></div>
+      </main>
+
+      <footer
+        class="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white">
+        <span class="flex gap-2 items-baseline">
+          <svg
+            id="Layer_2"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 1000 220.39"
+            width="80"
+            fill="currentColor">
+            <g>
+              <path
+                d="m238.29,0h220.39v110.19c0,60.82-49.38,110.19-110.19,110.19h0c-60.82,0-110.19-49.38-110.19-110.19V0h0Z"></path>
+              <path
+                d="m487.36,214.99h220.39v-104.8c0-60.86-49.34-110.19-110.19-110.19h-110.19s0,214.99,0,214.99Z"></path>
+              <rect x="725.65" y="0" width="220.39" height="220.39" rx="110.19" ry="110.19"></rect>
+              <path
+                d="m101.31,0c0,55.96-45.36,101.32-101.31,101.32v119.07C121.72,220.39,220.39,121.72,220.39,0h0s-119.07,0-119.07,0Z"></path>
+              <circle class="cls-1" cx="931.86" cy="68.14" r="68.14" fill="#7888ff"></circle>
+            </g>
+          </svg>
+          <small class="hidden md:block">Blockchainless Platform</small>
+        </span>
+
+        <div class="flex gap-2">
+          <a
+            href="https://juno.build"
+            aria-label="Go to Juno website and documentation"
+            class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
+            target="_blank"
+            rel="noopener noreferrer">
+            <svg
+              width="32"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 49 49"
+              fill="currentColor">
+              <g>
+                <path
+                  d="M18.56,33.53h0c-1.07.48-2.08,1.09-3.01,1.81,1.97,1.69,4.38,2.8,6.95,3.19-1.59-1.43-2.92-3.12-3.93-5Z"></path>
+                <path
+                  d="M16.31,25.43h-5.69c.17,3.3,1.52,6.44,3.79,8.84,1.06-.85,2.23-1.56,3.46-2.11-.94-2.12-1.48-4.41-1.57-6.73Z"></path>
+                <path
+                  d="M17.85,25.43c.1,2.13.59,4.21,1.46,6.16,1.48-.51,3.02-.81,4.58-.88v-5.27h-6.04Z"></path>
+                <path
+                  d="M23.89,37.72v-5.48c-1.32.07-2.63.32-3.88.73,1,1.8,2.32,3.41,3.88,4.74Z"></path>
+                <path
+                  d="M23.89,23.89v-6.2c-1.43-.07-2.85-.33-4.21-.77h0c-1.1,2.16-1.72,4.54-1.83,6.97h6.04Z"></path>
+                <path
+                  d="M23.89,16.15v-4.55h0c-1.34,1.13-2.49,2.47-3.43,3.95,1.12.33,2.27.54,3.43.6Z"></path>
+                <path
+                  d="M22.49,10.79c-2.3.36-4.48,1.29-6.33,2.71.88.61,1.83,1.13,2.82,1.53.96-1.58,2.14-3.01,3.51-4.24Z"></path>
+                <path
+                  d="M18.23,16.38c-1.16-.49-2.27-1.11-3.29-1.86-2.57,2.46-4.12,5.81-4.32,9.36h5.69c.11-2.61.76-5.17,1.92-7.51Z"></path>
+                <path
+                  d="M30.34,15.03h0c.99-.41,1.94-.92,2.82-1.53-1.85-1.41-4.03-2.35-6.34-2.71,1.37,1.23,2.55,2.66,3.51,4.24Z"></path>
+                <path
+                  d="M31.08,16.39c1.16,2.34,1.81,4.9,1.92,7.51h5.69c-.2-3.56-1.74-6.9-4.32-9.36-1.02.74-2.12,1.37-3.29,1.86Z"></path>
+                <path
+                  d="M31.44,32.15c1.24.56,2.4,1.27,3.47,2.11,2.28-2.4,3.62-5.54,3.79-8.84h-5.69c-.09,2.32-.63,4.6-1.57,6.73Z"></path>
+                <path
+                  d="M25.43,11.6v4.55c1.16-.06,2.32-.27,3.43-.6-.94-1.48-2.09-2.82-3.43-3.95Z"></path>
+                <path
+                  d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM40.25,24.66c-.01,8.5-6.83,15.43-15.33,15.58h-.07c-.06,0-.12,0-.19,0s-.13,0-.19,0h-.07c-4.41-.07-8.58-2-11.48-5.32-5.66-6.48-5.01-16.32,1.47-21.98h.01s0-.01,0-.01c2.77-2.43,6.32-3.79,10-3.85h.07c.06,0,.12,0,.18,0s.12,0,.18.01h.07c3.68.06,7.23,1.43,10,3.85h0s0,.02,0,.02c3.38,2.96,5.32,7.22,5.32,11.71h0Z"></path>
+                <path
+                  d="M30.75,33.53c-1.02,1.88-2.35,3.57-3.93,5,2.57-.4,4.97-1.5,6.95-3.19-.93-.72-1.94-1.33-3.01-1.81h0Z"></path>
+                <path
+                  d="M29.64,16.92c-1.36.44-2.78.7-4.21.77v6.2h6.04c-.11-2.42-.73-4.8-1.83-6.97Z"></path>
+                <path
+                  d="M30.01,31.58c.87-1.94,1.37-4.03,1.46-6.16h-6.04v5.27c1.56.07,3.1.37,4.58.88h0Z"></path>
+                <path
+                  d="M25.43,32.24v5.48c1.57-1.34,2.88-2.94,3.88-4.74-1.26-.42-2.56-.66-3.88-.73Z"></path>
+              </g>
+            </svg>
+          </a>
+
+          <a
+            href="https://github.com/junobuild/juno"
+            aria-label="Juno is open source on GitHub"
+            class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
+            target="_blank"
+            rel="noopener noreferrer">
+            <svg
+              width="32"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 49 49"
+              fill="currentColor">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 47.47">
+                <g>
+                  <g>
+                    <g>
+                      <path
+                        d="M24.45,0C11.02-.07.07,10.76,0,24.19c-.06,10.56,6.71,19.95,16.74,23.24,1.19.22,1.61-.53,1.61-1.19v-4.55c-6.76,1.47-8.17-2.87-8.17-2.87-.44-1.47-1.4-2.73-2.7-3.56-2.2-1.52.18-1.48.18-1.48,1.57.21,2.95,1.13,3.75,2.5,2.17,3.72,5.69,2.65,7.11,2.03.1-1.23.65-2.39,1.54-3.25-5.41-.62-11.09-2.7-11.09-12.02-.03-2.41.87-4.74,2.5-6.52-.74-2.1-.65-4.39.24-6.43,0,0,2.04-.65,6.69,2.49,3.99-1.09,8.19-1.09,12.18,0,4.64-3.14,6.67-2.49,6.67-2.49.9,2.03.99,4.33.24,6.43,1.64,1.78,2.53,4.12,2.5,6.54,0,9.33-5.69,11.39-11.1,11.99,1.17,1.19,1.78,2.83,1.66,4.51v6.7c0,.64.39,1.4,1.62,1.19,12.77-4.14,19.77-17.84,15.63-30.61C44.54,6.71,35.08-.1,24.45,0"></path>
+                    </g>
+                  </g>
+                </g>
+              </svg>
+            </svg>
+          </a>
+
+          <a
+            href="https://discord.gg/wHZ57Z2RAG"
+            aria-label="Join our channel on Discord to chat or ask questions"
+            class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
+            target="_blank"
+            rel="noopener noreferrer">
+            <svg
+              width="32"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 49 49"
+              fill="currentColor">
+              <g>
+                <g>
+                  <g>
+                    <path
+                      d="M24.5,0C10.97,0,0,10.97,0,24.5h0c0,13.53,10.97,24.5,24.5,24.5h0c13.53,0,24.5-10.97,24.5-24.5S38.03,0,24.5,0M40.24,32.57c-2.41,1.8-5.12,3.16-8,4.04-.65-.87-1.22-1.8-1.72-2.77.94-.35,1.84-.78,2.7-1.29-.22-.17-.44-.34-.66-.51-5.06,2.4-10.94,2.4-16,0-.21.17-.43.34-.65.51.86.51,1.76.94,2.7,1.29-.49.97-1.07,1.9-1.71,2.78-2.88-.88-5.58-2.24-8-4.04-.66-6.37,1-12.77,4.67-18.02,2.08-.96,4.27-1.64,6.53-2.02.32.56.6,1.13.86,1.71,2.4-.36,4.83-.36,7.23,0,.25-.59.52-1.16.83-1.71,2.25.38,4.44,1.06,6.52,2.01,3.69,5.25,5.36,11.65,4.7,18.03"></path>
+                    <path
+                      d="M19.32,22.57c-1.76.21-3.02,1.8-2.81,3.56.17,1.48,1.34,2.64,2.81,2.81,1.66-.1,2.93-1.53,2.84-3.19.1-1.66-1.16-3.08-2.82-3.18,0,0-.01,0-.02,0"></path>
+                    <path
+                      d="M29.82,22.57c-1.76-.2-3.35,1.06-3.56,2.82-.2,1.76,1.06,3.35,2.82,3.56s3.35-1.06,3.56-2.82c.01-.12.02-.25.02-.37.09-1.66-1.18-3.09-2.84-3.19"></path>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </a>
+
+          <a
+            href="https://twitter.com/junobuild"
+            aria-label="Follow Juno on X/Twitter"
+            class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
+            target="_blank"
+            rel="noopener noreferrer">
+            <svg
+              width="32"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 49 49"
+              fill="currentColor">
+              <g>
+                <path
+                  d="M24.5,0C10.97,0,0,10.97,0,24.5s10.97,24.5,24.5,24.5,24.5-10.97,24.5-24.5S38.03,0,24.5,0ZM28.56,37.35l-6.35-8.87-8.29,8.87h-3.77l10.42-11.15-10.42-14.56h10.29l5.96,8.32,7.78-8.32h3.76l-9.91,10.6,10.82,15.1h-10.29Z"></path>
+                <polygon
+                  points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"></polygon>
+              </g>
+            </svg>
+          </a>
+        </div>
+      </footer>
+
+      <div
+        class="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+        <img
+          src="./juno_illustration.svg"
+          role="presentation"
+          loading="lazy"
+          alt="An astronaut floating in space around planet Juno orbited by satellites, stars in the background." />
+      </div>
+    </div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/templates/vanilla-js-example/juno.dev.config.js b/templates/vanilla-js-example/juno.dev.config.js
@@ -0,0 +1,27 @@
+import {defineDevConfig} from '@junobuild/config';
+
+/** @type {import('@junobuild/config').JunoDevConfig} */
+export default defineDevConfig(() => ({
+  satellite: {
+    collections: {
+      db: [
+        {
+          collection: 'notes',
+          read: 'managed',
+          write: 'managed',
+          memory: 'stable',
+          mutablePermissions: true
+        }
+      ],
+      storage: [
+        {
+          collection: 'images',
+          read: 'managed',
+          write: 'managed',
+          memory: 'stable',
+          mutablePermissions: true
+        }
+      ]
+    }
+  }
+}));
diff --git a/templates/vanilla-js-example/package.json b/templates/vanilla-js-example/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "vanilla-js-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "format": "prettier --write .",
+    "postinstall:copy-auth": "node -e \"require('fs').cpSync('node_modules/@junobuild/core/dist/workers/', './public/workers', {recursive: true});\"",
+    "postinstall": "npm run postinstall:copy-auth"
+  },
+  "devDependencies": {
+    "@junobuild/config": "^0.0.6",
+    "@junobuild/vite-plugin": "^0.0.12",
+    "autoprefixer": "^10.4.19",
+    "prettier": "^3.2.5",
+    "tailwindcss": "^3.4.3",
+    "vite": "^5.2.0"
+  },
+  "dependencies": {
+    "@junobuild/core": "^0.0.49",
+    "nanoid": "^5.0.7"
+  }
+}
diff --git a/templates/vanilla-js-example/postcss.config.js b/templates/vanilla-js-example/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
diff --git a/templates/vanilla-js-example/public/fonts/jetbrainsmono-bold.woff2 b/templates/vanilla-js-example/public/fonts/jetbrainsmono-bold.woff2
diff --git a/templates/vanilla-js-example/public/fonts/jetbrainsmono-regular.woff2 b/templates/vanilla-js-example/public/fonts/jetbrainsmono-regular.woff2
diff --git a/templates/vanilla-js-example/public/juno_illustration.svg b/templates/vanilla-js-example/public/juno_illustration.svg
diff --git a/templates/vanilla-js-example/public/vite.svg b/templates/vanilla-js-example/public/vite.svg
diff --git a/templates/vanilla-js-example/src/components/content.js b/templates/vanilla-js-example/src/components/content.js
@@ -0,0 +1,14 @@
+import {renderLogout} from './logout';
+import {renderModal} from './modal';
+import {renderTable} from './table';
+
+export const renderContent = (app) => {
+  app.innerHTML = `<div>
+
+    ${renderTable(app)}
+
+    ${renderModal(app)}
+
+    ${renderLogout(app)}
+</div>`;
+};