create-turniza-app 1.0.5 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -1
- package/package.json +1 -1
- package/templates/web/astro.config.mjs +2 -0
- package/templates/web/e2e/homepage.spec.ts +1 -1
- package/templates/web/package.json.hbs +3 -0
- package/templates/web/public/icon-192.svg +7 -0
- package/templates/web/public/icon-512.svg +7 -0
- package/templates/web/public/manifest.json.hbs +24 -0
- package/templates/web/src/layouts/Layout.astro.hbs +50 -0
- package/templates/web/src/pages/index.astro.hbs +27 -0
- package/templates/web/src/styles/global.css +152 -0
- package/templates/web/src/pages/index.astro +0 -17
package/README.md
CHANGED
|
@@ -9,7 +9,10 @@ A production-ready monorepo with:
|
|
|
9
9
|
| Feature | Details |
|
|
10
10
|
|---------|---------|
|
|
11
11
|
| **Flutter mobile** | iOS + Android with 90+ lint rules + DCM |
|
|
12
|
-
| **Astro web** | SSR on Cloudflare Workers |
|
|
12
|
+
| **Astro web** | SSR on Cloudflare Workers, Preact islands |
|
|
13
|
+
| **PWA** | Installable, standalone display, manifest, offline-ready |
|
|
14
|
+
| **View Transitions** | SPA-like animated navigation between pages |
|
|
15
|
+
| **App-native CSS** | Dark theme, safe areas, no bounce, glassmorphism |
|
|
13
16
|
| **Makefile** | Single source of truth for all commands |
|
|
14
17
|
| **Pre-commit hooks** | Lefthook → secrets, format, lint |
|
|
15
18
|
| **Testing** | flutter_test, Vitest, Playwright |
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// @ts-check
|
|
2
2
|
import { defineConfig } from 'astro/config';
|
|
3
3
|
import cloudflare from '@astrojs/cloudflare';
|
|
4
|
+
import preact from '@astrojs/preact';
|
|
4
5
|
|
|
5
6
|
// https://astro.build/config
|
|
6
7
|
export default defineConfig({
|
|
@@ -10,4 +11,5 @@ export default defineConfig({
|
|
|
10
11
|
enabled: true,
|
|
11
12
|
},
|
|
12
13
|
}),
|
|
14
|
+
integrations: [preact()],
|
|
13
15
|
});
|
|
@@ -17,8 +17,11 @@
|
|
|
17
17
|
"typecheck": "astro check"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
+
"@astrojs/check": "^0.9.4",
|
|
20
21
|
"@astrojs/cloudflare": "^12.6.12",
|
|
22
|
+
"@astrojs/preact": "^4.0.10",
|
|
21
23
|
"astro": "^5.17.1",
|
|
24
|
+
"preact": "^10.25.4",
|
|
22
25
|
"wrangler": "^4.65.0"
|
|
23
26
|
},
|
|
24
27
|
"devDependencies": {
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
|
|
2
|
+
<rect width="192" height="192" rx="32" fill="#0f172a"/>
|
|
3
|
+
<rect x="16" y="16" width="160" height="160" rx="24" fill="#1e293b"/>
|
|
4
|
+
<circle cx="96" cy="80" r="28" fill="#6366f1"/>
|
|
5
|
+
<rect x="56" y="120" width="80" height="8" rx="4" fill="#6366f1" opacity="0.6"/>
|
|
6
|
+
<rect x="68" y="136" width="56" height="6" rx="3" fill="#94a3b8" opacity="0.4"/>
|
|
7
|
+
</svg>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
|
|
2
|
+
<rect width="512" height="512" rx="80" fill="#0f172a"/>
|
|
3
|
+
<rect x="40" y="40" width="432" height="432" rx="64" fill="#1e293b"/>
|
|
4
|
+
<circle cx="256" cy="210" r="72" fill="#6366f1"/>
|
|
5
|
+
<rect x="148" y="316" width="216" height="20" rx="10" fill="#6366f1" opacity="0.6"/>
|
|
6
|
+
<rect x="176" y="352" width="160" height="14" rx="7" fill="#94a3b8" opacity="0.4"/>
|
|
7
|
+
</svg>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "{{projectTitle}}",
|
|
3
|
+
"short_name": "{{projectTitle}}",
|
|
4
|
+
"description": "{{projectDescription}}",
|
|
5
|
+
"start_url": "/",
|
|
6
|
+
"display": "standalone",
|
|
7
|
+
"background_color": "#0f172a",
|
|
8
|
+
"theme_color": "#0f172a",
|
|
9
|
+
"orientation": "portrait-primary",
|
|
10
|
+
"icons": [
|
|
11
|
+
{
|
|
12
|
+
"src": "/icon-192.svg",
|
|
13
|
+
"sizes": "192x192",
|
|
14
|
+
"type": "image/svg+xml",
|
|
15
|
+
"purpose": "any"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"src": "/icon-512.svg",
|
|
19
|
+
"sizes": "512x512",
|
|
20
|
+
"type": "image/svg+xml",
|
|
21
|
+
"purpose": "any maskable"
|
|
22
|
+
}
|
|
23
|
+
]
|
|
24
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
---
|
|
2
|
+
import { ViewTransitions } from 'astro:transitions';
|
|
3
|
+
import '../styles/global.css';
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
title?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const { title = '{{projectTitle}}', description = '{{projectDescription}}' } = Astro.props;
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
<html lang="en">
|
|
14
|
+
<head>
|
|
15
|
+
<meta charset="utf-8" />
|
|
16
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
17
|
+
|
|
18
|
+
<!-- SEO -->
|
|
19
|
+
<title>{title}</title>
|
|
20
|
+
<meta name="description" content={description} />
|
|
21
|
+
|
|
22
|
+
<!-- PWA / App-like -->
|
|
23
|
+
<meta name="theme-color" content="#0f172a" />
|
|
24
|
+
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
25
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
26
|
+
<meta name="mobile-web-app-capable" content="yes" />
|
|
27
|
+
<link rel="manifest" href="/manifest.json" />
|
|
28
|
+
|
|
29
|
+
<!-- Icons -->
|
|
30
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
31
|
+
<link rel="icon" href="/favicon.ico" />
|
|
32
|
+
<link rel="apple-touch-icon" href="/icon-192.svg" />
|
|
33
|
+
|
|
34
|
+
<!-- View Transitions -->
|
|
35
|
+
<ViewTransitions />
|
|
36
|
+
|
|
37
|
+
<!-- Fonts -->
|
|
38
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
39
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
40
|
+
<link
|
|
41
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
42
|
+
rel="stylesheet"
|
|
43
|
+
/>
|
|
44
|
+
|
|
45
|
+
<meta name="generator" content={Astro.generator} />
|
|
46
|
+
</head>
|
|
47
|
+
<body>
|
|
48
|
+
<slot />
|
|
49
|
+
</body>
|
|
50
|
+
</html>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
---
|
|
2
|
+
import Layout from '../layouts/Layout.astro';
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<Layout>
|
|
6
|
+
<main
|
|
7
|
+
style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;gap:1.5rem;padding:2rem;text-align:center;"
|
|
8
|
+
>
|
|
9
|
+
<div
|
|
10
|
+
class="glass"
|
|
11
|
+
style="padding:2.5rem;border-radius:var(--radius-lg);max-width:28rem;width:100%;"
|
|
12
|
+
>
|
|
13
|
+
<h1 style="margin-bottom:0.5rem;">{{projectTitle}}</h1>
|
|
14
|
+
<p style="color:var(--color-text-muted);margin-bottom:1.5rem;">
|
|
15
|
+
{{projectDescription}}
|
|
16
|
+
</p>
|
|
17
|
+
<a
|
|
18
|
+
href="https://docs.astro.build/"
|
|
19
|
+
target="_blank"
|
|
20
|
+
rel="noopener noreferrer"
|
|
21
|
+
style="display:inline-block;padding:0.625rem 1.5rem;background:var(--color-primary);color:var(--color-text);border-radius:var(--radius-md);font-weight:500;transition:background 150ms ease;"
|
|
22
|
+
>
|
|
23
|
+
Read the docs
|
|
24
|
+
</a>
|
|
25
|
+
</div>
|
|
26
|
+
</main>
|
|
27
|
+
</Layout>
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
/* ──────────────────────────────────────────────────────
|
|
2
|
+
Global styles — app-native feel for the Astro PWA
|
|
3
|
+
────────────────────────────────────────────────────── */
|
|
4
|
+
|
|
5
|
+
/* ── Reset ──────────────────────────────────────────── */
|
|
6
|
+
*,
|
|
7
|
+
*::before,
|
|
8
|
+
*::after {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* ── Root variables ─────────────────────────────────── */
|
|
15
|
+
:root {
|
|
16
|
+
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
17
|
+
|
|
18
|
+
/* Palette — dark mode first */
|
|
19
|
+
--color-bg: #0f172a;
|
|
20
|
+
--color-surface: #1e293b;
|
|
21
|
+
--color-surface-hover: #334155;
|
|
22
|
+
--color-text: #f1f5f9;
|
|
23
|
+
--color-text-muted: #94a3b8;
|
|
24
|
+
--color-primary: #6366f1;
|
|
25
|
+
--color-primary-hover: #818cf8;
|
|
26
|
+
--color-accent: #22d3ee;
|
|
27
|
+
--color-border: rgba(148, 163, 184, 0.12);
|
|
28
|
+
|
|
29
|
+
/* Spacing */
|
|
30
|
+
--safe-top: env(safe-area-inset-top, 0px);
|
|
31
|
+
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
32
|
+
--safe-left: env(safe-area-inset-left, 0px);
|
|
33
|
+
--safe-right: env(safe-area-inset-right, 0px);
|
|
34
|
+
|
|
35
|
+
/* Transitions */
|
|
36
|
+
--transition-fast: 150ms ease;
|
|
37
|
+
--transition-normal: 250ms ease;
|
|
38
|
+
|
|
39
|
+
/* Radius */
|
|
40
|
+
--radius-sm: 0.375rem;
|
|
41
|
+
--radius-md: 0.75rem;
|
|
42
|
+
--radius-lg: 1rem;
|
|
43
|
+
--radius-full: 9999px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* ── Base ────────────────────────────────────────────── */
|
|
47
|
+
html {
|
|
48
|
+
font-family: var(--font-sans);
|
|
49
|
+
font-size: 16px;
|
|
50
|
+
line-height: 1.5;
|
|
51
|
+
color: var(--color-text);
|
|
52
|
+
background: var(--color-bg);
|
|
53
|
+
-webkit-font-smoothing: antialiased;
|
|
54
|
+
-moz-osx-font-smoothing: grayscale;
|
|
55
|
+
text-rendering: optimizeLegibility;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
body {
|
|
59
|
+
min-height: 100dvh;
|
|
60
|
+
padding-top: var(--safe-top);
|
|
61
|
+
padding-bottom: var(--safe-bottom);
|
|
62
|
+
padding-left: var(--safe-left);
|
|
63
|
+
padding-right: var(--safe-right);
|
|
64
|
+
|
|
65
|
+
/* ── App-native behaviors ──────────────────────────── */
|
|
66
|
+
overscroll-behavior: none;
|
|
67
|
+
-webkit-tap-highlight-color: transparent;
|
|
68
|
+
-webkit-touch-callout: none;
|
|
69
|
+
user-select: text; /* allow text selection by default, disable per-component */
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* ── Headings ────────────────────────────────────────── */
|
|
73
|
+
h1, h2, h3, h4, h5, h6 {
|
|
74
|
+
font-weight: 600;
|
|
75
|
+
line-height: 1.25;
|
|
76
|
+
letter-spacing: -0.025em;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
h1 { font-size: 2rem; }
|
|
80
|
+
h2 { font-size: 1.5rem; }
|
|
81
|
+
h3 { font-size: 1.25rem; }
|
|
82
|
+
|
|
83
|
+
/* ── Links ───────────────────────────────────────────── */
|
|
84
|
+
a {
|
|
85
|
+
color: var(--color-primary);
|
|
86
|
+
text-decoration: none;
|
|
87
|
+
transition: color var(--transition-fast);
|
|
88
|
+
}
|
|
89
|
+
a:hover {
|
|
90
|
+
color: var(--color-primary-hover);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* ── Buttons (base) ──────────────────────────────────── */
|
|
94
|
+
button {
|
|
95
|
+
font-family: inherit;
|
|
96
|
+
font-size: inherit;
|
|
97
|
+
cursor: pointer;
|
|
98
|
+
border: none;
|
|
99
|
+
border-radius: var(--radius-md);
|
|
100
|
+
padding: 0.625rem 1.25rem;
|
|
101
|
+
font-weight: 500;
|
|
102
|
+
background: var(--color-primary);
|
|
103
|
+
color: var(--color-text);
|
|
104
|
+
transition:
|
|
105
|
+
background var(--transition-fast),
|
|
106
|
+
transform var(--transition-fast);
|
|
107
|
+
-webkit-user-select: none;
|
|
108
|
+
user-select: none;
|
|
109
|
+
}
|
|
110
|
+
button:hover {
|
|
111
|
+
background: var(--color-primary-hover);
|
|
112
|
+
}
|
|
113
|
+
button:active {
|
|
114
|
+
transform: scale(0.97);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* ── Smooth page transitions ─────────────────────────── */
|
|
118
|
+
::view-transition-old(root),
|
|
119
|
+
::view-transition-new(root) {
|
|
120
|
+
animation-duration: 200ms;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* ── Scrollbar (subtle) ──────────────────────────────── */
|
|
124
|
+
::-webkit-scrollbar {
|
|
125
|
+
width: 6px;
|
|
126
|
+
}
|
|
127
|
+
::-webkit-scrollbar-track {
|
|
128
|
+
background: transparent;
|
|
129
|
+
}
|
|
130
|
+
::-webkit-scrollbar-thumb {
|
|
131
|
+
background: var(--color-border);
|
|
132
|
+
border-radius: var(--radius-full);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* ── Selection ───────────────────────────────────────── */
|
|
136
|
+
::selection {
|
|
137
|
+
background: rgba(99, 102, 241, 0.3);
|
|
138
|
+
color: var(--color-text);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* ── Utilities ───────────────────────────────────────── */
|
|
142
|
+
.no-select {
|
|
143
|
+
-webkit-user-select: none;
|
|
144
|
+
user-select: none;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.glass {
|
|
148
|
+
background: rgba(30, 41, 59, 0.6);
|
|
149
|
+
backdrop-filter: blur(12px);
|
|
150
|
+
-webkit-backdrop-filter: blur(12px);
|
|
151
|
+
border: 1px solid var(--color-border);
|
|
152
|
+
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
<html lang="en">
|
|
6
|
-
<head>
|
|
7
|
-
<meta charset="utf-8" />
|
|
8
|
-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
9
|
-
<link rel="icon" href="/favicon.ico" />
|
|
10
|
-
<meta name="viewport" content="width=device-width" />
|
|
11
|
-
<meta name="generator" content={Astro.generator} />
|
|
12
|
-
<title>Astro</title>
|
|
13
|
-
</head>
|
|
14
|
-
<body>
|
|
15
|
-
<h1>Astro</h1>
|
|
16
|
-
</body>
|
|
17
|
-
</html>
|