Skip to content

Commit 447ab69

Browse files
peterpeterparkerpeterpeterparker
authored
feat: vanilla js example (#36)
1 parent bb375f1 commit 447ab69

24 files changed

+760
-2
lines changed

‎src/constants/templates.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,5 +81,12 @@ export const TEMPLATES: Template[] = [
8181
type: 'Example',
8282
description: APP_DESCRIPTION_EXAMPLE,
8383
kind: 'app'
84+
},
85+
{
86+
framework: `Vanilla JavaScript`,
87+
key: `vanilla-js-example`,
88+
type: 'Example',
89+
description: APP_DESCRIPTION_EXAMPLE,
90+
kind: 'app'
8491
}
8592
];

‎src/services/generate.services.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ const removeLocalConfig = async ({where, template}: PopulateInputFn) => {
159159
? 'astro.config.mjs'
160160
: template.framework === 'Next.js'
161161
? 'next.config.mjs'
162-
: template.framework === 'React'
162+
: ['React', 'Vanilla JavaScript'].includes(template.framework)
163163
? 'vite.config.js'
164164
: 'vite.config.ts'
165165
);

‎src/types/template.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,13 @@ export interface Template {
88
kind: ProjectKind;
99
}
1010

11-
export type TemplateFramework = 'Angular' | 'Astro' | 'Next.js' | 'React' | 'SvelteKit' | 'Vue';
11+
export type TemplateFramework =
12+
| 'Angular'
13+
| 'Astro'
14+
| 'Next.js'
15+
| 'React'
16+
| 'SvelteKit'
17+
| 'Vue'
18+
| 'Vanilla JavaScript';
1219

1320
export type TemplateType = 'Starter' | 'Example';

‎templates/vanilla-js-example/.gitignore

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
public/workers

‎templates/vanilla-js-example/docker-compose.yml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
services:
2+
juno-satellite:
3+
image: junobuild/satellite:latest
4+
ports:
5+
- 5987:5987
6+
volumes:
7+
- juno_satellite:/juno/.juno
8+
- ./juno.dev.config.js:/juno/juno.dev.config.js
9+
- ./target/deploy:/juno/target/deploy/
10+
11+
volumes:
12+
juno_satellite:

‎templates/vanilla-js-example/index.html

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Juno / Vanilla JavaScript Example</title>
8+
9+
<!-- Font preloads -->
10+
<link
11+
rel="preload"
12+
href="/fonts/jetbrainsmono-regular.woff2"
13+
as="font"
14+
type="font/woff"
15+
crossorigin />
16+
<link
17+
rel="preload"
18+
href="/fonts/jetbrainsmono-bold.woff2"
19+
as="font"
20+
type="font/woff"
21+
crossorigin />
22+
</head>
23+
<body class="bg-white dark:bg-black">
24+
<div class="relative isolate min-h-[100dvh]">
25+
<main class="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 tall:min-h-[calc(100dvh-128px)]">
26+
<h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
27+
Example App
28+
</h1>
29+
<p class="dark:text-white py-4 md:max-w-lg">
30+
Explore this demo app built with vanilla JavaScript, Tailwind, and
31+
<a href="https://juno.build" rel="noopener noreferrer" target="_blank" class="underline">
32+
Juno</a
33+
>, showcasing a practical application of these technologies.
34+
</p>
35+
36+
<div id="app" class="contents"></div>
37+
</main>
38+
39+
<footer
40+
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">
41+
<span class="flex gap-2 items-baseline">
42+
<svg
43+
id="Layer_2"
44+
xmlns="http://www.w3.org/2000/svg"
45+
viewBox="0 0 1000 220.39"
46+
width="80"
47+
fill="currentColor">
48+
<g>
49+
<path
50+
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>
51+
<path
52+
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>
53+
<rect x="725.65" y="0" width="220.39" height="220.39" rx="110.19" ry="110.19"></rect>
54+
<path
55+
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>
56+
<circle class="cls-1" cx="931.86" cy="68.14" r="68.14" fill="#7888ff"></circle>
57+
</g>
58+
</svg>
59+
<small class="hidden md:block">Blockchainless Platform</small>
60+
</span>
61+
62+
<div class="flex gap-2">
63+
<a
64+
href="https://juno.build"
65+
aria-label="Go to Juno website and documentation"
66+
class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
67+
target="_blank"
68+
rel="noopener noreferrer">
69+
<svg
70+
width="32"
71+
xmlns="http://www.w3.org/2000/svg"
72+
viewBox="0 0 49 49"
73+
fill="currentColor">
74+
<g>
75+
<path
76+
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>
77+
<path
78+
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>
79+
<path
80+
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>
81+
<path
82+
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>
83+
<path
84+
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>
85+
<path
86+
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>
87+
<path
88+
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>
89+
<path
90+
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>
91+
<path
92+
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>
93+
<path
94+
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>
95+
<path
96+
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>
97+
<path
98+
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>
99+
<path
100+
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>
101+
<path
102+
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>
103+
<path
104+
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>
105+
<path
106+
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>
107+
<path
108+
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>
109+
</g>
110+
</svg>
111+
</a>
112+
113+
<a
114+
href="https://github.com/junobuild/juno"
115+
aria-label="Juno is open source on GitHub"
116+
class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
117+
target="_blank"
118+
rel="noopener noreferrer">
119+
<svg
120+
width="32"
121+
xmlns="http://www.w3.org/2000/svg"
122+
viewBox="0 0 49 49"
123+
fill="currentColor">
124+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 47.47">
125+
<g>
126+
<g>
127+
<g>
128+
<path
129+
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>
130+
</g>
131+
</g>
132+
</g>
133+
</svg>
134+
</svg>
135+
</a>
136+
137+
<a
138+
href="https://discord.gg/wHZ57Z2RAG"
139+
aria-label="Join our channel on Discord to chat or ask questions"
140+
class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
141+
target="_blank"
142+
rel="noopener noreferrer">
143+
<svg
144+
width="32"
145+
xmlns="http://www.w3.org/2000/svg"
146+
viewBox="0 0 49 49"
147+
fill="currentColor">
148+
<g>
149+
<g>
150+
<g>
151+
<path
152+
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>
153+
<path
154+
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>
155+
<path
156+
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>
157+
</g>
158+
</g>
159+
</g>
160+
</svg>
161+
</a>
162+
163+
<a
164+
href="https://twitter.com/junobuild"
165+
aria-label="Follow Juno on X/Twitter"
166+
class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
167+
target="_blank"
168+
rel="noopener noreferrer">
169+
<svg
170+
width="32"
171+
xmlns="http://www.w3.org/2000/svg"
172+
viewBox="0 0 49 49"
173+
fill="currentColor">
174+
<g>
175+
<path
176+
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>
177+
<polygon
178+
points="15.46 14.38 29.96 34.62 33.55 34.62 19.05 14.38 15.46 14.38"></polygon>
179+
</g>
180+
</svg>
181+
</a>
182+
</div>
183+
</footer>
184+
185+
<div
186+
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">
187+
<img
188+
src="./juno_illustration.svg"
189+
role="presentation"
190+
loading="lazy"
191+
alt="An astronaut floating in space around planet Juno orbited by satellites, stars in the background." />
192+
</div>
193+
</div>
194+
<script type="module" src="/src/main.js"></script>
195+
</body>
196+
</html>

‎templates/vanilla-js-example/juno.dev.config.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {defineDevConfig} from '@junobuild/config';
2+
3+
/** @type {import('@junobuild/config').JunoDevConfig} */
4+
export default defineDevConfig(() => ({
5+
satellite: {
6+
collections: {
7+
db: [
8+
{
9+
collection: 'notes',
10+
read: 'managed',
11+
write: 'managed',
12+
memory: 'stable',
13+
mutablePermissions: true
14+
}
15+
],
16+
storage: [
17+
{
18+
collection: 'images',
19+
read: 'managed',
20+
write: 'managed',
21+
memory: 'stable',
22+
mutablePermissions: true
23+
}
24+
]
25+
}
26+
}
27+
}));

‎templates/vanilla-js-example/package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "vanilla-js-example",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"format": "prettier --write .",
11+
"postinstall:copy-auth": "node -e \"require('fs').cpSync('node_modules/@junobuild/core/dist/workers/', './public/workers', {recursive: true});\"",
12+
"postinstall": "npm run postinstall:copy-auth"
13+
},
14+
"devDependencies": {
15+
"@junobuild/config": "^0.0.6",
16+
"@junobuild/vite-plugin": "^0.0.12",
17+
"autoprefixer": "^10.4.19",
18+
"prettier": "^3.2.5",
19+
"tailwindcss": "^3.4.3",
20+
"vite": "^5.2.0"
21+
},
22+
"dependencies": {
23+
"@junobuild/core": "^0.0.49",
24+
"nanoid": "^5.0.7"
25+
}
26+
}

‎templates/vanilla-js-example/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {}
5+
}
6+
};

‎templates/vanilla-js-example/public/fonts/jetbrainsmono-bold.woff2

92.4 KB
Binary file not shown.

‎templates/vanilla-js-example/public/fonts/jetbrainsmono-regular.woff2

90 KB
Binary file not shown.

‎templates/vanilla-js-example/public/juno_illustration.svg

Lines changed: 1 addition & 0 deletions
Loading

‎templates/vanilla-js-example/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎templates/vanilla-js-example/src/components/content.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {renderLogout} from './logout';
2+
import {renderModal} from './modal';
3+
import {renderTable} from './table';
4+
5+
export const renderContent = (app) => {
6+
app.innerHTML = `<div>
7+
8+
${renderTable(app)}
9+
10+
${renderModal(app)}
11+
12+
${renderLogout(app)}
13+
</div>`;
14+
};

0 commit comments

Comments
 (0)