tracker

4.7 KB

1. // components/home.hl — `/` (tracker.worldapi.org#13; empty since step 1). Creator: "on the homepage when you are logged in
2. // you see 4 icons leading to unwatched scheudle shows and movies. below that then same as logged out: first a text
3. // describing what the site does then last released 10 movies and last aired 10 shows. movies and shows headings are links
4. // to /movies and /shows". Architect's readings: the icons go to /my/unwatched, /my/schedule, /my/shows, /my/movies; "last
5. // aired shows" = the series whose newest RELEASED episode is newest.
6. //
7. // The two rows come from catalog.hl (built once at start, no scan per request): poster + title + year, each a link to the
8. // show page (a movie's too — it has the same page and Follow button). Phone: each row scrolls sideways inside itself;
9. // from 40rem a grid (styles.hl). Sign in/out stays the header's job (components/main.hl).
10. //
11. // tracker.worldapi.org#21 (mission 068): series and shows are split — FIVE icon tiles (Unwatched, Schedule, Series → /my/series,
12. // Shows → /my/shows, Movies) and THREE rows (Movies, Series → /series, Shows → /shows). #20: each row heading in its type's colour.
13. parent './main.hl'
14. import { appTitle } from '../project.hl'
15. import { userIdOfSession } from '../lib/users.hl'
16. import { latestMovies, latestSeries, latestShows } from '../lib/catalog.hl'
18. session = null
19. signedIn = userIdOfSession(session) != null
20. signedOut = !signedIn
22. movieTiles = latestMovies(10)
23. seriesTiles = latestSeries(10)
24. showTiles = latestShows(10)
26. __title = appTitle
28. View {
29. home {
30. if (signedIn) {
31. homeNav {
32. a { class = "hometile" href = "/my/unwatched"
33. svg { viewBox = "0 0 24 24" width = "40" height = "40" "aria-hidden" = "true"
34. circle { cx = "12" cy = "12" r = "10" }
35. path { d = "M7 12.5 L10.5 16 L17 8.5" }
36. }
37. span { "Unwatched" }
38. }
39. a { class = "hometile" href = "/my/schedule"
40. svg { viewBox = "0 0 24 24" width = "40" height = "40" "aria-hidden" = "true"
41. rect { x = "3" y = "5" width = "18" height = "16" rx = "2" }
42. path { d = "M3 10 H21 M8 3 V7 M16 3 V7 M7 14 H9 M11 14 H13 M15 14 H17 M7 17.5 H9 M11 17.5 H13" }
43. }
44. span { "Schedule" }
45. }
46. a { class = "hometile" href = "/my/series"
47. svg { viewBox = "0 0 24 24" width = "40" height = "40" "aria-hidden" = "true"
48. rect { x = "2" y = "7" width = "20" height = "14" rx = "2" }
49. path { d = "M8 3 L12 7 L16 3" }
50. }
51. span { "Series" }
52. }
53. // a show: a microphone (talk, news, reality)
54. a { class = "hometile" href = "/my/shows"
55. svg { viewBox = "0 0 24 24" width = "40" height = "40" "aria-hidden" = "true"
56. rect { x = "9" y = "2" width = "6" height = "12" rx = "3" }
57. path { d = "M5 11 A7 7 0 0 0 19 11 M12 18 V22 M8 22 H16" }
58. }
59. span { "Shows" }
60. }
61. a { class = "hometile" href = "/my/movies"
62. svg { viewBox = "0 0 24 24" width = "40" height = "40" "aria-hidden" = "true"
63. rect { x = "3" y = "3" width = "18" height = "18" rx = "2" }
64. path { d = "M7.5 3 V21 M16.5 3 V21 M3 7.5 H7.5 M3 12 H7.5 M3 16.5 H7.5 M16.5 7.5 H21 M16.5 12 H21 M16.5 16.5 H21" }
65. }
66. span { "Movies" }
67. }
68. }
69. }
70. homeIntro {
71. p { "tracker keeps track of the series and movies you follow and of every episode you have watched. Follow a show and its new episodes show up under Unwatched once they are out, and under Schedule before that — new episodes and posters come in from TMDB every day." }
72. if (signedOut) { p { "Log in with ident (top right: choose ident) to follow shows and mark what you have seen." } }
73. p { "tracker installs as an app on your phone or computer: use your browser's \"Install\" or \"Add to Home Screen\"." }
74. }
75. homeSection { id = "home-movies"
76. h2 { a { href = "/movies" class = "type-word type-movie" "Movies" } }
77. tileRow {
78. for (t of movieTiles) {
79. a { class = "tile" href = t.href
80. img { class = "tile-poster" src = t.posterUrl alt = t.title loading = "lazy" }
81. tileTitle { t.title }
82. tileYear { t.year }
83. }
84. }
85. }
86. }
87. homeSection { id = "home-series"
88. h2 { a { href = "/series" class = "type-word type-series" "Series" } }
89. tileRow {
90. for (t of seriesTiles) {
91. a { class = "tile" href = t.href
92. img { class = "tile-poster" src = t.posterUrl alt = t.title loading = "lazy" }
93. tileTitle { t.title }
94. tileYear { t.year }
95. }
96. }
97. }
98. }
99. homeSection { id = "home-shows"
100. h2 { a { href = "/shows" class = "type-word type-show" "Shows" } }
101. tileRow {
102. for (t of showTiles) {
103. a { class = "tile" href = t.href
104. img { class = "tile-poster" src = t.posterUrl alt = t.title loading = "lazy" }
105. tileTitle { t.title }
106. tileYear { t.year }
107. }
108. }
109. }
110. }
111. }
112. }