components

6.6 KB

1. // project.hl — components.hybriel.worldapi.org: THE SITE. Hybriel components developed standalone: the home
2. // lists them, each has a demo page (`/<component>`) and its README (`/<component>/README.md`). No login, no data.
3. // Apps vendor a component by copying its folder (README of the component says which files).
4. // THE MAP — which file handles what:
5. // components/main.hl the shell: header, offline note, the slot every page renders into
6. // components/index.hl `/`: the list of components (a new component adds one entry there)
7. // components/styles.hl the site's own CSS (/__hl/app.css); every component carries its own Style
8. // components/<name>/<name>.hl a component (the public file apps copy; layouts.worldapi.org themes it)
9. // components/<name>/demo.hl its demo page `/<name>`; README.md is served at `/<name>/README.md`
10. // lib/uploads.hl where the demos keep uploaded files (file upload, Markdown editor), one day
11. // shared/base.hl THE BASE LOOK: black, white, four greys (#15) — the site's colours and every component's fallbacks
12. // shared/tokens.hl the WorldAPI colour tokens (verbatim copy; not used by the site since #15 — the theme's business)
13. import WebFramework from 'hl:web'
14. import { env } from 'hl:proc'
16. import { black, white } from './shared/base.hl'
18. import Styles from './components/styles.hl'
19. import Index from './components/index.hl'
20. import MonthViewDemo from './components/month-view/demo.hl'
21. import DatePickerDemo from './components/date-picker/demo.hl'
22. import RangePickerDemo from './components/range-picker/demo.hl'
23. import PaginationDemo from './components/pagination/demo.hl'
24. import MdEditorDemo from './components/md-editor/demo.hl'
25. import CodeEditorDemo from './components/code-editor/demo.hl'
26. import FileUploadDemo from './components/file-upload/demo.hl'
27. import ModalDemo from './components/modal/demo.hl'
29. static siteName = "Hybriel components"
31. appTitle = siteName
33. // ---- THE INSTALLABLE APP (mission 046), the same way calendar.worldapi.org / tracker.worldapi.org do it: hl:web's own
34. // web app manifest (/__hl/manifest.webmanifest, linked from every head with the apple-touch-icon and theme-color) and
35. // service worker (/__hl/sw.js) from these settings — no JavaScript of ours. Icons in icons/ (icon.svg is the source,
36. // the PNGs are rendered from it with rsvg-convert, README "PWA"). The theme colour is the header's background
37. // (black), the splash background the page's (white) — both off shared/base.hl, not written out again.
38. appShortName = 'Components' // the name under the home-screen icon (the full one is too long there)
39. appThemeColor = black.value
40. appBackgroundColor = white.value
41. appIcons = [
42. { src = '/icons/icon-192.png' sizes = '192x192' purpose = 'any' }
43. { src = '/icons/icon-512.png' sizes = '512x512' purpose = 'any' }
44. { src = '/icons/icon-192.png' sizes = '192x192' purpose = 'maskable' }
45. { src = '/icons/icon-512.png' sizes = '512x512' purpose = 'maskable' }
46. ]
47. appTouchIcon = '/icons/apple-touch-icon.png'
48. appFavicon = '/icons/favicon.svg'
49. // OFFLINE: only the shell — the header and the home list `/` (components/main.hl says "You are offline" while the
50. // browser has no network). The demo pages are not kept: without a network they get hl:web's "Unavailable offline" page.
51. offline = [ Index ]
52. styles = Styles
54. // the component's README is plain Markdown, served as it is
55. routes = [
56. { pattern = "/favicon.ico" file = "./icons/favicon.ico" headers = { 'Cache-Control' = 'no-cache' } }
57. // the installable app (mission 046): the icons (manifest and service worker are hl:web's own, from appIcons / offline)
58. { pattern = "/icons/icon-192.png" file = "./icons/icon-192.png" headers = { 'Cache-Control' = 'no-cache' } }
59. { pattern = "/icons/icon-512.png" file = "./icons/icon-512.png" headers = { 'Cache-Control' = 'no-cache' } }
60. { pattern = "/icons/apple-touch-icon.png" file = "./icons/apple-touch-icon.png" headers = { 'Cache-Control' = 'no-cache' } }
61. { pattern = "/icons/favicon.svg" file = "./icons/favicon.svg" headers = { 'Cache-Control' = 'no-cache' } }
62. { pattern = "/" component = Index }
63. { pattern = "/month-view" component = MonthViewDemo }
64. { pattern = "/month-view/README.md" file = "./components/month-view/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
65. { pattern = "/date-picker" component = DatePickerDemo }
66. { pattern = "/date-picker/README.md" file = "./components/date-picker/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
67. { pattern = "/range-picker" component = RangePickerDemo }
68. { pattern = "/range-picker/README.md" file = "./components/range-picker/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
69. { pattern = "/md-editor" component = MdEditorDemo }
70. { pattern = "/md-editor/README.md" file = "./components/md-editor/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
71. { pattern = "/md-editor/files/*" directory = "./storage/md-files" headers = { 'X-Content-Type-Options' = 'nosniff' 'Content-Security-Policy' = "sandbox" } }
72. { pattern = "/code-editor" component = CodeEditorDemo }
73. { pattern = "/code-editor/README.md" file = "./components/code-editor/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
74. { pattern = "/file-upload" component = FileUploadDemo }
75. { pattern = "/file-upload/README.md" file = "./components/file-upload/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
76. { pattern = "/modal" component = ModalDemo }
77. { pattern = "/modal/README.md" file = "./components/modal/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
78. { pattern = "/pagination" component = PaginationDemo }
79. { pattern = "/pagination/README.md" file = "./components/pagination/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
80. ]
82. sessionDir = env('COMPONENTS_SESSIONS') != null ? env('COMPONENTS_SESSIONS') : null
83. port = env('COMPONENTS_PORT') != null ? toNumber(env('COMPONENTS_PORT')) : 8380
84. // HL_HOST = the interface hl:web binds: 127.0.0.1 on Byrodin behind nginx; unset = 0.0.0.0 (dev on Loreana).
85. // COMPONENTS_WATCH=0 = no dev watcher.
86. watching = env('COMPONENTS_WATCH') != '0'
87. sessionCookie = 'componentssid'
88. server = new WebFramework(routes = routes, styles = styles, minify = true, port = port, watchMode = watching, sessionCookie = sessionCookie, uploadMax = 5242880)
90. on Error(e) { console.log('error absorbed: ' + e.message) }