-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
212 lines (200 loc) · 9.48 KB
/
Copy pathindex.html
File metadata and controls
212 lines (200 loc) · 9.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!doctype html>
<html lang="en" data-navigating="false">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="HTML-first client navigation for complete HTML pages, with nested layouts and intent prefetch."
/>
<meta name="theme-color" content="#e2ad00" />
<title>HTML-first client navigation – Aura Router</title>
<link rel="canonical" href="https://aura-ui.github.io/router-preview/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Aura Router" />
<meta property="og:title" content="HTML-first client navigation – Aura Router" />
<meta
property="og:description"
content="HTML-first client navigation for complete HTML pages, with nested layouts and intent prefetch."
/>
<meta property="og:url" content="https://aura-ui.github.io/router-preview/" />
<meta property="og:image" content="https://aura-ui.github.io/router-preview/og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="HTML-first client navigation – Aura Router" />
<meta
name="twitter:description"
content="HTML-first client navigation for complete HTML pages, with nested layouts and intent prefetch."
/>
<meta name="twitter:image" content="https://aura-ui.github.io/router-preview/og.jpg" />
<link rel="stylesheet" href="/src/styles.css" />
</head>
<body>
<header class="site-header">
<div class="site-header__inner">
<a class="brand" href="/router-preview/" data-aura-link>
<span class="brand__mark" aria-hidden="true">A</span>
<span>Aura Router</span>
</a>
<nav class="site-nav" data-site-nav aria-label="Primary navigation">
<a href="/router-preview/" data-aura-link>Home</a>
<a href="/router-preview/about/" data-aura-link>How it works</a>
<a href="/router-preview/migration/" data-aura-link>Migration</a>
<a href="/router-preview/workspace/" data-aura-link>Nested demo</a>
</nav>
<a class="github-link" href="https://github.com/aura-ui/router">View on GitHub ↗</a>
</div>
<div class="navigation-progress" aria-hidden="true"></div>
</header>
<section class="demo-status" aria-label="Live navigation proof">
<div class="demo-status__topline">
<span class="demo-status__label">
<span class="demo-status__dot" aria-hidden="true"></span>
Live navigation proof
</span>
<span class="demo-status__hint">Click around. If the Load ID stays put, Aura handled it.</span>
</div>
<dl class="demo-status__grid">
<div class="status-value"><dt>Full page loads</dt><dd data-document-load>–</dd></div>
<div class="status-value"><dt>Load ID</dt><dd data-boot-token>–</dd></div>
<div class="status-value"><dt>Started at</dt><dd data-boot-time>–</dd></div>
<div class="status-value"><dt>Client transitions</dt><dd data-spa-count>0</dd></div>
<div class="status-value"><dt>Last update</dt><dd data-last-navigation>Static HTML loaded</dd></div>
</dl>
</section>
<noscript>
<p class="noscript">
JavaScript is disabled. Good: every link still opens a real HTML page.
</p>
</noscript>
<main id="content" class="page">
<div class="hero-grid">
<div>
<p class="eyebrow">MPA first. SPA when ready.</p>
<h1>Keep the HTML. Upgrade the navigation.</h1>
<p class="lede">
Turn the HTML you already ship into an SPA experience – with nested layouts
and route lifecycle, but without rebuilding it as an app shell.
</p>
<div class="actions">
<a class="button button--primary" href="/router-preview/about/" data-aura-link>Try it. No reload.</a>
<a class="button" href="/router-preview/migration/" data-aura-link>See the three-step migration</a>
</div>
</div>
<aside class="proof-panel" aria-label="Ways to verify the demo">
<p class="proof-panel__title">This demo is honest HTML.</p>
<ul class="proof-list">
<li><span class="check">✓</span><span><strong>View source:</strong> the content is already there.</span></li>
<li><span class="check">✓</span><span><strong>Disable JavaScript:</strong> every link still works.</span></li>
<li><span class="check">✓</span><span><strong>Enable JavaScript:</strong> pages change without a full reload.</span></li>
</ul>
</aside>
</div>
<section class="section">
<div class="section-heading">
<div>
<p class="eyebrow">The upgrade path</p>
<h2>Progressive by default</h2>
</div>
<p>
On the first visit, the browser loads a complete page from your host. Aura then
adopts the rendered content and enhances marked same-origin links.
</p>
</div>
<div class="card-grid">
<article class="card">
<span class="card__index">01 / HTML</span>
<h3>Real pages</h3>
<p>Each URL returns useful HTML for people, search crawlers and browsers without JavaScript.</p>
</article>
<article class="card">
<span class="card__index">02 / REUSE</span>
<h3>No duplicate first fetch</h3>
<p>On flat routes, Aura adopts the <code>#content</code> already on screen and skips the pointless second fetch.</p>
</article>
<article class="card">
<span class="card__index">03 / NAVIGATE</span>
<h3>SPA after boot</h3>
<p>Later links fetch HTML, extract the next view, and update browser history.</p>
</article>
</div>
</section>
<section class="section">
<div class="section-heading">
<div>
<p class="eyebrow">Minimal setup</p>
<h2>Routes stay in HTML</h2>
</div>
<p>No framework adapter is required. Use plain HTML, vanilla Custom Elements or Lit.</p>
</div>
<div class="code-window">
<div class="code-window__bar">
<span>index.html</span>
<button class="copy-button" type="button" data-copy="#quick-start" aria-label="Copy quick start">Copy</button>
</div>
<pre id="quick-start"><code class="language-html"><aura-outlet></aura-outlet>
<aura-router extract="#content">
<aura-route path="/" view="/"></aura-route>
<aura-route path="/about/" view="/about/"></aura-route>
</aura-router>
<a href="/about/" data-aura-link>About</a>
<script type="module">
import { AuraRouter } from '@auraui/router';
AuraRouter.install();
</script></code></pre>
</div>
</section>
</main>
<aura-outlet></aura-outlet>
<aura-router
extract="#content"
prefetch="intent"
scroll="auto"
link-active-class="is-active"
>
<aura-route path="/router-preview/" view="/router-preview/"></aura-route>
<aura-route path="/router-preview/about/" view="/router-preview/about/"></aura-route>
<aura-route path="/router-preview/migration/" view="/router-preview/migration/"></aura-route>
<aura-route path="/router-preview/workspace/" layout="workspace-shell" scroll="none">
<aura-route path="." view="/router-preview/workspace/"></aura-route>
<aura-route path="settings" view="/router-preview/workspace/settings/"></aura-route>
</aura-route>
<aura-route path="*" view="template::not-found"></aura-route>
</aura-router>
<template id="workspace-shell">
<section class="workspace-shell" data-workspace-shell>
<aside class="workspace-sidebar">
<p class="workspace-sidebar__brand">Shared workspace layout</p>
<nav aria-label="Workspace navigation">
<a href="/router-preview/workspace/" data-aura-link>Overview</a>
<a href="/router-preview/workspace/settings/" data-aura-link>Settings</a>
</nav>
<p class="shell-proof">Layout ID<code data-shell-instance>Starting…</code></p>
</aside>
<aura-outlet class="workspace-content"></aura-outlet>
</section>
</template>
<template id="not-found">
<main id="content" class="page">
<p class="eyebrow">404</p>
<h1>Lost route. No reload.</h1>
<p class="lede">Aura caught it without reloading. Open this URL directly and the host still returns a real 404.</p>
<a class="button button--primary" href="/router-preview/" data-aura-link>Return home</a>
</main>
</template>
<p class="sr-only" aria-live="polite" data-route-announcer></p>
<footer class="site-footer">
<div class="site-footer__inner">
<p>Aura Router 0.3.0 · HTML-first client navigation</p>
<nav aria-label="Resources">
<a href="https://www.npmjs.com/package/@auraui/router">npm</a>
<a href="https://github.com/aura-ui/router/blob/main/docs/guide.md">Docs</a>
<a href="https://dev.to/aura-ui/why-i-built-an-spa-router-for-html-and-web-components-25dm">Article</a>
<a href="https://github.com/aura-ui/router">GitHub</a>
</nav>
</div>
</footer>
<script type="module" src="/src/main.ts"></script>
</body>
</html>