@arkstack/inertia 0.16.0 → 0.16.1

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arkstack/inertia",
3
- "version": "0.16.0",
3
+ "version": "0.16.1",
4
4
  "type": "module",
5
5
  "description": "InertiaJS server-side adapter for Arkstack, building the modern monolith with server-driven SPAs.",
6
6
  "homepage": "https://arkstack.toneflix.net/guide/inertia",
@@ -33,13 +33,13 @@
33
33
  "./package.json": "./package.json"
34
34
  },
35
35
  "dependencies": {
36
- "@arkstack/common": "^0.16.0"
36
+ "@arkstack/common": "^0.16.1"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "@h3ravel/musket": "^2.2.1",
40
- "@arkstack/http": "^0.16.0",
41
- "@arkstack/contract": "^0.16.0",
42
- "@arkstack/view": "^0.16.0"
40
+ "@arkstack/contract": "^0.16.1",
41
+ "@arkstack/http": "^0.16.1",
42
+ "@arkstack/view": "^0.16.1"
43
43
  },
44
44
  "peerDependenciesMeta": {
45
45
  "@arkstack/view": {
@@ -1,7 +1,120 @@
1
- export default function Index({appName}: {appName: string}) {
2
- return (
3
- <div>
4
- <h1>Hello, {appName}!</h1>
5
- </div>
6
- );
1
+ export default function Index({
2
+ message,
3
+ appName,
4
+ title,
5
+ }: {
6
+ appName: string;
7
+ title: string;
8
+ message: string;
9
+ }) {
10
+ const root = document.documentElement
11
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
12
+ root.setAttribute('data-theme', prefersDark ? 'dark' : 'light')
13
+
14
+ return (
15
+ <div className="page">
16
+ <div className="brand">
17
+ <div className="logo-wrap">
18
+ <div className="halo"></div>
19
+ <img
20
+ src="https://arkstack.toneflix.net/logo.png"
21
+ alt="Arkstack logo"
22
+ />
23
+ </div>
24
+ <div className="brand-text">
25
+ <h1 className="wordmark">
26
+ Ark<span>stack</span>
27
+ </h1>
28
+ <p className="tagline">
29
+ Node.js Framework &mdash; Runtime Agnostic
30
+ </p>
31
+ </div>
32
+ </div>
33
+
34
+ <div className="status-row">
35
+ <div className="dot"></div>
36
+ {message}
37
+ </div>
38
+
39
+ <div className="divider"></div>
40
+
41
+ <div className="cards">
42
+ <div className="card">
43
+ <div className="card-icon">
44
+ <svg
45
+ xmlns="http://www.w3.org/2000/svg"
46
+ viewBox="0 0 24 24"
47
+ fill="currentColor"
48
+ >
49
+ <path d="M13 10H20L11 23V14H4L13 1V10Z"></path>
50
+ </svg>
51
+ </div>
52
+ <div className="card-title">Fast by default</div>
53
+ <div className="card-desc">
54
+ Zero-bloat core. Ships only what you need.
55
+ </div>
56
+ </div>
57
+ <div className="card">
58
+ <div className="card-icon">
59
+ <svg
60
+ xmlns="http://www.w3.org/2000/svg"
61
+ viewBox="0 0 24 24"
62
+ fill="currentColor"
63
+ >
64
+ <path d="M13 18V20H19V22H13C11.8954 22 11 21.1046 11 20V18H8C5.79086 18 4 16.2091 4 14V10H20V14C20 16.2091 18.2091 18 16 18H13ZM16 6H19C19.5523 6 20 6.44772 20 7V9H4V7C4 6.44772 4.44772 6 5 6H8V2H10V6H14V2H16V6ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5Z"></path>
65
+ </svg>
66
+ </div>
67
+ <div className="card-title">Adapters</div>
68
+ <div className="card-desc">
69
+ Express, Fastify, Hono, Koa — swap runtimes freely.
70
+ </div>
71
+ </div>
72
+ <div className="card">
73
+ <div className="card-icon">
74
+ <svg
75
+ xmlns="http://www.w3.org/2000/svg"
76
+ viewBox="0 0 24 24"
77
+ fill="currentColor"
78
+ >
79
+ <path d="M20.0833 10.4999L21.2854 11.2212C21.5221 11.3633 21.5989 11.6704 21.4569 11.9072C21.4146 11.9776 21.3557 12.0365 21.2854 12.0787L11.9999 17.6499L2.71451 12.0787C2.47772 11.9366 2.40093 11.6295 2.54301 11.3927C2.58523 11.3223 2.64413 11.2634 2.71451 11.2212L3.9166 10.4999L11.9999 15.3499L20.0833 10.4999ZM20.0833 15.1999L21.2854 15.9212C21.5221 16.0633 21.5989 16.3704 21.4569 16.6072C21.4146 16.6776 21.3557 16.7365 21.2854 16.7787L12.5144 22.0412C12.1977 22.2313 11.8021 22.2313 11.4854 22.0412L2.71451 16.7787C2.47772 16.6366 2.40093 16.3295 2.54301 16.0927C2.58523 16.0223 2.64413 15.9634 2.71451 15.9212L3.9166 15.1999L11.9999 20.0499L20.0833 15.1999ZM12.5144 1.30864L21.2854 6.5712C21.5221 6.71327 21.5989 7.0204 21.4569 7.25719C21.4146 7.32757 21.3557 7.38647 21.2854 7.42869L11.9999 12.9999L2.71451 7.42869C2.47772 7.28662 2.40093 6.97949 2.54301 6.7427C2.58523 6.67232 2.64413 6.61343 2.71451 6.5712L11.4854 1.30864C11.8021 1.11864 12.1977 1.11864 12.5144 1.30864Z"></path>
80
+ </svg>
81
+ </div>
82
+ <div className="card-title">Structured</div>
83
+ <div className="card-desc">Modular conventions for Node.js.</div>
84
+ </div>
85
+ </div>
86
+
87
+ <div className="snippet">
88
+ <div className="snippet-label">get started</div>
89
+
90
+ <code>
91
+ <span className="cm">// src/routes/api.ts</span>
92
+ <br />
93
+ <span className="kw">import</span> {'{ Router }'}{' '}
94
+ <span className="kw">from</span>{' '}
95
+ <span className="str">'@arkstack/driver-express'</span>
96
+ <br />
97
+ <br />
98
+ Router.<span className="fn">get</span>(
99
+ <span className="str">'/'</span>, () =&gt; {'{'}
100
+ <br />
101
+ &nbsp;&nbsp;<span className="kw">return</span> {'{'} status:{' '}
102
+ <span className="str">'ok'</span> {'}'}
103
+ <br />
104
+ {'}'})
105
+ </code>
106
+ </div>
107
+
108
+ <p className="footer">
109
+ <a href="https://arkstack.toneflix.net/">Docs</a>{' '}
110
+ &nbsp;&middot;&nbsp;
111
+ <a href="https://github.com/arkstack-hq/arkstack">GitHub</a>{' '}
112
+ &nbsp;&middot;&nbsp;
113
+ <a href="https://discord.gg/jmQybxKQ7R">Discord</a>
114
+ <br />
115
+ Arkstack &copy; {new Date().getFullYear()} &mdash; By Toneflix
116
+ Technologies
117
+ </p>
118
+ </div>
119
+ )
7
120
  }
@@ -1,7 +1,136 @@
1
1
  <script lang="ts">
2
- export let appName: string;
2
+ import { onMount } from 'svelte'
3
+
4
+ export let appName: string
5
+ export let title: string
6
+ export let message: string
7
+
8
+ const currentYear = new Date().getFullYear()
9
+
10
+ onMount(() => {
11
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
12
+
13
+ document.documentElement.setAttribute(
14
+ 'data-theme',
15
+ prefersDark ? 'dark' : 'light',
16
+ )
17
+ })
3
18
  </script>
4
19
 
5
- <div>
6
- <h1>Hello, {appName}!</h1>
7
- </div>
20
+ <div class="page">
21
+ <div class="brand">
22
+ <div class="logo-wrap">
23
+ <div class="halo"></div>
24
+
25
+ <img
26
+ src="https://arkstack.toneflix.net/logo.png"
27
+ alt="Arkstack logo"
28
+ />
29
+ </div>
30
+
31
+ <div class="brand-text">
32
+ <h1 class="wordmark">
33
+ Ark<span>stack</span>
34
+ </h1>
35
+
36
+ <p class="tagline">
37
+ Node.js Framework &mdash; Runtime Agnostic
38
+ </p>
39
+ </div>
40
+ </div>
41
+
42
+ <div class="status-row">
43
+ <div class="dot"></div>
44
+ {message}
45
+ </div>
46
+
47
+ <div class="divider"></div>
48
+
49
+ <div class="cards">
50
+ <div class="card">
51
+ <div class="card-icon">
52
+ <svg
53
+ xmlns="http://www.w3.org/2000/svg"
54
+ viewBox="0 0 24 24"
55
+ fill="currentColor"
56
+ >
57
+ <path d="M13 10H20L11 23V14H4L13 1V10Z" />
58
+ </svg>
59
+ </div>
60
+
61
+ <div class="card-title">Fast by default</div>
62
+
63
+ <div class="card-desc">
64
+ Zero-bloat core. Ships only what you need.
65
+ </div>
66
+ </div>
67
+
68
+ <div class="card">
69
+ <div class="card-icon">
70
+ <svg
71
+ xmlns="http://www.w3.org/2000/svg"
72
+ viewBox="0 0 24 24"
73
+ fill="currentColor"
74
+ >
75
+ <path d="M13 18V20H19V22H13C11.8954 22 11 21.1046 11 20V18H8C5.79086 18 4 16.2091 4 14V10H20V14C20 16.2091 18.2091 18 16 18H13ZM16 6H19C19.5523 6 20 6.44772 20 7V9H4V7C4 6.44772 4.44772 6 5 6H8V2H10V6H14V2H16V6ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5Z" />
76
+ </svg>
77
+ </div>
78
+
79
+ <div class="card-title">Adapters</div>
80
+
81
+ <div class="card-desc">
82
+ Express, Fastify, Hono, Koa — swap runtimes freely.
83
+ </div>
84
+ </div>
85
+
86
+ <div class="card">
87
+ <div class="card-icon">
88
+ <svg
89
+ xmlns="http://www.w3.org/2000/svg"
90
+ viewBox="0 0 24 24"
91
+ fill="currentColor"
92
+ >
93
+ <path d="M20.0833 10.4999L21.2854 11.2212C21.5221 11.3633 21.5989 11.6704 21.4569 11.9072C21.4146 11.9776 21.3557 12.0365 21.2854 12.0787L11.9999 17.6499L2.71451 12.0787C2.47772 11.9366 2.40093 11.6295 2.54301 11.3927C2.58523 11.3223 2.64413 11.2634 2.71451 11.2212L3.9166 10.4999L11.9999 15.3499L20.0833 10.4999ZM20.0833 15.1999L21.2854 15.9212C21.5221 16.0633 21.5989 16.3704 21.4569 16.6072C21.4146 16.6776 21.3557 16.7365 21.2854 16.7787L12.5144 22.0412C12.1977 22.2313 11.8021 22.2313 11.4854 22.0412L2.71451 16.7787C2.47772 16.6366 2.40093 16.3295 2.54301 16.0927C2.58523 16.0223 2.64413 15.9634 2.71451 15.9212L3.9166 15.1999L11.9999 20.0499L20.0833 15.1999ZM12.5144 1.30864L21.2854 6.5712C21.5221 6.71327 21.5989 7.0204 21.4569 7.25719C21.4146 7.32757 21.3557 7.38647 21.2854 7.42869L11.9999 12.9999L2.71451 7.42869C2.47772 7.28662 2.40093 6.97949 2.54301 6.7427C2.58523 6.67232 2.64413 6.61343 2.71451 6.5712L11.4854 1.30864C11.8021 1.11864 12.1977 1.11864 12.5144 1.30864Z" />
94
+ </svg>
95
+ </div>
96
+
97
+ <div class="card-title">Structured</div>
98
+
99
+ <div class="card-desc">
100
+ Modular conventions for Node.js.
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <div class="snippet">
106
+ <div class="snippet-label">
107
+ get started
108
+ </div>
109
+
110
+ <code>
111
+ <span class="cm">// src/routes/api.ts</span>
112
+ <br />
113
+ <span class="kw">import</span> {'{ Router }'}
114
+ <span class="kw"> from </span>
115
+ <span class="str">'@arkstack/driver-express'</span>
116
+ <br />
117
+ <br />
118
+ Router.<span class="fn">get</span>(<span class="str">'/'</span>, () =&gt; {'{'}
119
+ <br />
120
+ &nbsp;&nbsp;<span class="kw">return</span> {'{'} status:
121
+ <span class="str">'ok'</span> {'}'}
122
+ <br />
123
+ {'}'})
124
+ </code>
125
+ </div>
126
+
127
+ <p class="footer">
128
+ <a href="https://arkstack.toneflix.net/">Docs</a>
129
+ &nbsp;&middot;&nbsp;
130
+ <a href="https://github.com/arkstack-hq/arkstack">GitHub</a>
131
+ &nbsp;&middot;&nbsp;
132
+ <a href="https://discord.gg/jmQybxKQ7R">Discord</a>
133
+ <br />
134
+ Arkstack &copy; {currentYear} &mdash; By Toneflix Technologies
135
+ </p>
136
+ </div>
@@ -1,12 +1,27 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
+
3
4
  <head>
4
5
  <meta charset="utf-8">
5
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>
8
+ {appName} - {title}
9
+ </title>
10
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
11
+ <link
12
+ rel="preconnect"
13
+ href="https://fonts.gstatic.com"
14
+ crossOrigin="use-credentials"
15
+ />
16
+ <link
17
+ href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Mono:wght@400;500&display=swap"
18
+ rel="stylesheet"
19
+ />
6
20
  @inertiaHead
7
21
  {{reactRefresh}}@vite(['resources/js/app.{{ext}}', 'resources/css/app.css'])
8
- </head>
22
+ </head>
9
23
  <body>
10
24
  @inertia
11
25
  </body>
26
+
12
27
  </html>
@@ -1,11 +1,146 @@
1
1
  <script setup lang="ts">
2
+ import { onMounted } from 'vue'
3
+
2
4
  defineProps<{
3
5
  appName: string
6
+ title: string
7
+ message: string
4
8
  }>()
9
+
10
+ onMounted(() => {
11
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
12
+
13
+ document.documentElement.setAttribute(
14
+ 'data-theme',
15
+ prefersDark ? 'dark' : 'light',
16
+ )
17
+ })
18
+
19
+ const currentYear = new Date().getFullYear()
5
20
  </script>
6
21
 
7
22
  <template>
8
- <div>
9
- <h1>Hello, {{ appName }}!</h1>
23
+ <div class="page">
24
+ <div class="brand">
25
+ <div class="logo-wrap">
26
+ <div class="halo" />
27
+
28
+ <img
29
+ src="https://arkstack.toneflix.net/logo.png"
30
+ alt="Arkstack logo"
31
+ />
32
+ </div>
33
+
34
+ <div class="brand-text">
35
+ <h1 class="wordmark">
36
+ Ark<span>stack</span>
37
+ </h1>
38
+
39
+ <p class="tagline">
40
+ Node.js Framework &mdash; Runtime Agnostic
41
+ </p>
42
+ </div>
43
+ </div>
44
+
45
+ <div class="status-row">
46
+ <div class="dot" />
47
+ {{ message }}
48
+ </div>
49
+
50
+ <div class="divider" />
51
+
52
+ <div class="cards">
53
+ <div class="card">
54
+ <div class="card-icon">
55
+ <svg
56
+ xmlns="http://www.w3.org/2000/svg"
57
+ viewBox="0 0 24 24"
58
+ fill="currentColor"
59
+ >
60
+ <path d="M13 10H20L11 23V14H4L13 1V10Z" />
61
+ </svg>
62
+ </div>
63
+
64
+ <div class="card-title">
65
+ Fast by default
66
+ </div>
67
+
68
+ <div class="card-desc">
69
+ Zero-bloat core. Ships only what you need.
70
+ </div>
71
+ </div>
72
+
73
+ <div class="card">
74
+ <div class="card-icon">
75
+ <svg
76
+ xmlns="http://www.w3.org/2000/svg"
77
+ viewBox="0 0 24 24"
78
+ fill="currentColor"
79
+ >
80
+ <path d="M13 18V20H19V22H13C11.8954 22 11 21.1046 11 20V18H8C5.79086 18 4 16.2091 4 14V10H20V14C20 16.2091 18.2091 18 16 18H13ZM16 6H19C19.5523 6 20 6.44772 20 7V9H4V7C4 6.44772 4.44772 6 5 6H8V2H10V6H14V2H16V6ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5Z" />
81
+ </svg>
82
+ </div>
83
+
84
+ <div class="card-title">
85
+ Adapters
86
+ </div>
87
+
88
+ <div class="card-desc">
89
+ Express, Fastify, Hono, Koa — swap runtimes freely.
90
+ </div>
91
+ </div>
92
+
93
+ <div class="card">
94
+ <div class="card-icon">
95
+ <svg
96
+ xmlns="http://www.w3.org/2000/svg"
97
+ viewBox="0 0 24 24"
98
+ fill="currentColor"
99
+ >
100
+ <path d="M20.0833 10.4999L21.2854 11.2212C21.5221 11.3633 21.5989 11.6704 21.4569 11.9072C21.4146 11.9776 21.3557 12.0365 21.2854 12.0787L11.9999 17.6499L2.71451 12.0787C2.47772 11.9366 2.40093 11.6295 2.54301 11.3927C2.58523 11.3223 2.64413 11.2634 2.71451 11.2212L3.9166 10.4999L11.9999 15.3499L20.0833 10.4999ZM20.0833 15.1999L21.2854 15.9212C21.5221 16.0633 21.5989 16.3704 21.4569 16.6072C21.4146 16.6776 21.3557 16.7365 21.2854 16.7787L12.5144 22.0412C12.1977 22.2313 11.8021 22.2313 11.4854 22.0412L2.71451 16.7787C2.47772 16.6366 2.40093 16.3295 2.54301 16.0927C2.58523 16.0223 2.64413 15.9634 2.71451 15.9212L3.9166 15.1999L11.9999 20.0499L20.0833 15.1999ZM12.5144 1.30864L21.2854 6.5712C21.5221 6.71327 21.5989 7.0204 21.4569 7.25719C21.4146 7.32757 21.3557 7.38647 21.2854 7.42869L11.9999 12.9999L2.71451 7.42869C2.47772 7.28662 2.40093 6.97949 2.54301 6.7427C2.58523 6.67232 2.64413 6.61343 2.71451 6.5712L11.4854 1.30864C11.8021 1.11864 12.1977 1.11864 12.5144 1.30864Z" />
101
+ </svg>
102
+ </div>
103
+
104
+ <div class="card-title">
105
+ Structured
106
+ </div>
107
+
108
+ <div class="card-desc">
109
+ Modular conventions for Node.js.
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="snippet">
115
+ <div class="snippet-label">
116
+ get started
117
+ </div>
118
+
119
+ <code>
120
+ <span class="cm">// src/routes/api.ts</span>
121
+ <br />
122
+ <span class="kw">import</span> { Router }
123
+ <span class="kw"> from </span>
124
+ <span class="str">'@arkstack/driver-express'</span>
125
+ <br />
126
+ <br />
127
+ Router.<span class="fn">get</span>(<span class="str">'/'</span>, () =&gt; {
128
+ <br />
129
+ &nbsp;&nbsp;<span class="kw">return</span> { status:
130
+ <span class="str">'ok'</span> }
131
+ <br />
132
+ })
133
+ </code>
134
+ </div>
135
+
136
+ <p class="footer">
137
+ <a href="https://arkstack.toneflix.net/">Docs</a>
138
+ &nbsp;&middot;&nbsp;
139
+ <a href="https://github.com/arkstack-hq/arkstack">GitHub</a>
140
+ &nbsp;&middot;&nbsp;
141
+ <a href="https://discord.gg/jmQybxKQ7R">Discord</a>
142
+ <br />
143
+ Arkstack &copy; {{ currentYear }} &mdash; By Toneflix Technologies
144
+ </p>
10
145
  </div>
11
- </template>
146
+ </template>