components

5.7 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. import WebFramework from 'hl:web'
5. import { env } from 'hl:proc'
7. import { dark, darker } from './shared/tokens.hl'
9. import Styles from './styles.hl'
10. import Index from './components/index.hl'
11. import MonthViewDemo from './components/month-view/demo.hl'
12. import DatePickerDemo from './components/date-picker/demo.hl'
13. import RangePickerDemo from './components/range-picker/demo.hl'
14. import PaginationDemo from './components/pagination/demo.hl'
15. import MdEditorDemo from './components/md-editor/demo.hl'
16. import CodeEditorDemo from './components/code-editor/demo.hl'
17. import FileUploadDemo from './components/file-upload/demo.hl'
18. import ModalDemo from './components/modal/demo.hl'
20. static siteName = "Hybriel components"
22. appTitle = siteName
24. // ---- THE INSTALLABLE APP (mission 046), the same way calendar.worldapi.org / tracker.worldapi.org do it: hl:web's own
25. // web app manifest (/__hl/manifest.webmanifest, linked from every head with the apple-touch-icon and theme-color) and
26. // service worker (/__hl/sw.js) from these settings — no JavaScript of ours. Icons in icons/ (icon.svg is the source,
27. // the PNGs are rendered from it with rsvg-convert, README "PWA"). The theme colour is the header's background
28. // (darker), the splash background the page's (dark) — both off the tokens, not written out again.
29. appShortName = 'Components' // the name under the home-screen icon (the full one is too long there)
30. appThemeColor = darker.value
31. appBackgroundColor = dark.value
32. appIcons = [
33. { src = '/icons/icon-192.png' sizes = '192x192' purpose = 'any' }
34. { src = '/icons/icon-512.png' sizes = '512x512' purpose = 'any' }
35. { src = '/icons/icon-192.png' sizes = '192x192' purpose = 'maskable' }
36. { src = '/icons/icon-512.png' sizes = '512x512' purpose = 'maskable' }
37. ]
38. appTouchIcon = '/icons/apple-touch-icon.png'
39. appFavicon = '/icons/favicon.svg'
40. // OFFLINE: only the shell — the header and the home list `/` (components/main.hl says "You are offline" while the
41. // browser has no network). The demo pages are not kept: without a network they get hl:web's "Unavailable offline" page.
42. offline = [ Index ]
43. styles = Styles
45. // the component's README is plain Markdown, served as it is
46. routes = [
47. { pattern = "/favicon.ico" file = "./icons/favicon.ico" headers = { 'Cache-Control' = 'no-cache' } }
48. // the installable app (mission 046): the icons (manifest and service worker are hl:web's own, from appIcons / offline)
49. { pattern = "/icons/icon-192.png" file = "./icons/icon-192.png" headers = { 'Cache-Control' = 'no-cache' } }
50. { pattern = "/icons/icon-512.png" file = "./icons/icon-512.png" headers = { 'Cache-Control' = 'no-cache' } }
51. { pattern = "/icons/apple-touch-icon.png" file = "./icons/apple-touch-icon.png" headers = { 'Cache-Control' = 'no-cache' } }
52. { pattern = "/icons/favicon.svg" file = "./icons/favicon.svg" headers = { 'Cache-Control' = 'no-cache' } }
53. { pattern = "/" component = Index }
54. { pattern = "/month-view" component = MonthViewDemo }
55. { pattern = "/month-view/README.md" file = "./components/month-view/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
56. { pattern = "/date-picker" component = DatePickerDemo }
57. { pattern = "/date-picker/README.md" file = "./components/date-picker/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
58. { pattern = "/range-picker" component = RangePickerDemo }
59. { pattern = "/range-picker/README.md" file = "./components/range-picker/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
60. { pattern = "/md-editor" component = MdEditorDemo }
61. { pattern = "/md-editor/README.md" file = "./components/md-editor/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
62. { pattern = "/md-editor/files/*" directory = "./storage/md-files" headers = { 'X-Content-Type-Options' = 'nosniff' 'Content-Security-Policy' = "sandbox" } }
63. { pattern = "/code-editor" component = CodeEditorDemo }
64. { pattern = "/code-editor/README.md" file = "./components/code-editor/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
65. { pattern = "/file-upload" component = FileUploadDemo }
66. { pattern = "/file-upload/README.md" file = "./components/file-upload/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
67. { pattern = "/modal" component = ModalDemo }
68. { pattern = "/modal/README.md" file = "./components/modal/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
69. { pattern = "/pagination" component = PaginationDemo }
70. { pattern = "/pagination/README.md" file = "./components/pagination/README.md" headers = { 'Content-Type' = 'text/markdown; charset=utf-8' 'Cache-Control' = 'no-cache' } }
71. ]
73. sessionDir = env('COMPONENTS_SESSIONS') != null ? env('COMPONENTS_SESSIONS') : null
74. port = env('COMPONENTS_PORT') != null ? toNumber(env('COMPONENTS_PORT')) : 8380
75. // HL_HOST = the interface hl:web binds: 127.0.0.1 on Byrodin behind nginx; unset = 0.0.0.0 (dev on Loreana).
76. // COMPONENTS_WATCH=0 = no dev watcher.
77. watching = env('COMPONENTS_WATCH') != '0'
78. sessionCookie = 'componentssid'
79. server = new WebFramework(routes = routes, styles = styles, minify = true, port = port, watchMode = watching, sessionCookie = sessionCookie, uploadMax = 5242880)
81. on Error(e) { console.log('error absorbed: ' + e.message) }