tracker

3.6 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. parent './main.hl'
11. import { appTitle } from '../project.hl'
12. import { userIdOfSession } from '../users.hl'
13. import { latestMovies, latestSeries } from '../catalog.hl'
15. session = null
16. signedIn = userIdOfSession(session) != null
17. signedOut = !signedIn
19. movieTiles = latestMovies(10)
20. seriesTiles = latestSeries(10)
22. __title = appTitle
24. View {
25. home {
26. if (signedIn) {
27. homeNav {
28. a { class = "hometile" href = "/my/unwatched"
29. svg { viewBox = "0 0 24 24" width = "40" height = "40" "aria-hidden" = "true"
30. circle { cx = "12" cy = "12" r = "10" }
31. path { d = "M7 12.5 L10.5 16 L17 8.5" }
32. }
33. span { "Unwatched" }
34. }
35. a { class = "hometile" href = "/my/schedule"
36. svg { viewBox = "0 0 24 24" width = "40" height = "40" "aria-hidden" = "true"
37. rect { x = "3" y = "5" width = "18" height = "16" rx = "2" }
38. 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" }
39. }
40. span { "Schedule" }
41. }
42. a { class = "hometile" href = "/my/shows"
43. svg { viewBox = "0 0 24 24" width = "40" height = "40" "aria-hidden" = "true"
44. rect { x = "2" y = "7" width = "20" height = "14" rx = "2" }
45. path { d = "M8 3 L12 7 L16 3" }
46. }
47. span { "Shows" }
48. }
49. a { class = "hometile" href = "/my/movies"
50. svg { viewBox = "0 0 24 24" width = "40" height = "40" "aria-hidden" = "true"
51. rect { x = "3" y = "3" width = "18" height = "18" rx = "2" }
52. 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" }
53. }
54. span { "Movies" }
55. }
56. }
57. }
58. homeIntro {
59. 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." }
60. if (signedOut) { p { "Log in with ident (top right) to follow shows and mark what you have seen." } }
61. p { "tracker installs as an app on your phone or computer: use your browser's \"Install\" or \"Add to Home Screen\"." }
62. }
63. homeSection { id = "home-movies"
64. h2 { a { href = "/movies" "Movies" } }
65. tileRow {
66. for (t of movieTiles) {
67. a { class = "tile" href = t.href
68. img { class = "tile-poster" src = t.posterUrl alt = t.title loading = "lazy" }
69. tileTitle { t.title }
70. tileYear { t.year }
71. }
72. }
73. }
74. }
75. homeSection { id = "home-shows"
76. h2 { a { href = "/shows" "Shows" } }
77. tileRow {
78. for (t of seriesTiles) {
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. }
88. }