components

1.0 KB

1. // components/main.hl — THE SHELL: the header (the site's name, a link home) and the slot every page renders into.
2. // All CSS is in components/styles.hl.
3. import { siteName } from '../project.hl'
5. slot = null
6. // OFFLINE (mission 046, as tracker.worldapi.org#10): the service worker opens `/` from its cache without a network; the
7. // shell then says so. hl:web gives a page no connection state and no "mounted" hook, so a tick asks the browser:
8. // `netProbe` runs an endless 1 s CSS animation (styles.hl), and each `animationiteration` reads navigator.onLine — a
9. // write only when it changed.
10. offline = false
12. View {
13. body {
14. applicationHeader {
15. a { class = "brand" href = "/" siteName }
16. p { "Hybriel components, developed standalone" }
17. }
18. if (offline) { offlineNote { id = "offline" "You are offline. The demos need the network." } }
19. netProbe { "aria-hidden" = "true" on animationiteration(e) { emit netTick(e) } }
20. main { slot }
21. }
22. }
24. on netTick(e) {
25. down = window.navigator.onLine == false
26. if (down != offline) { offline = down }
27. }