tokono.ma
1module About.Layout exposing (..)
2
3import Transmutable.Html as Html exposing ( Html )
4import Transmutable.Html.Attributes as A
5
6
7layout :
8 { pathToRoot : String
9 }
10 -> Array (Html msg)
11 -> Array (Html msg)
12layout { pathToRoot } contents =
13 [ Html.doctype
14 , Html.html
15 [ A.lang "en"
16 ]
17 [ Html.head
18 []
19 [ Html.meta
20 [ A.charset "utf8"
21 ]
22 , Html.title
23 [ Html.text "About | Diffuse"
24 ]
25 , Html.meta
26 [ A.name "description"
27 , A.content "A music player that connects to your cloud/distributed storage, in the form of a static, serverless, web application."
28 ]
29
30 , -- Viewport
31 Html.meta
32 [ A.name "viewport"
33 , A.content "width=device-width, initial-scale=1"
34 ]
35
36 , -- Favicons & Mobile
37 Html.link
38 [ A.rel "apple-touch-icon"
39 , A.href (pathToRoot ++ "apple-touch-icon.png")
40 , A.attribute "sizes" "180x180"
41 ]
42 , Html.link
43 [ A.rel "icon"
44 , A.href (pathToRoot ++ "favicon-32x32.png")
45 , A.attribute "sizes" "32x32"
46 ]
47 , Html.link
48 [ A.rel "icon"
49 , A.type_ "image/png"
50 , A.href (pathToRoot ++ "favicon-16x16.png")
51 , A.attribute "sizes" "16x16"
52 ]
53 , Html.link
54 [ A.rel "manifest"
55 , A.href (pathToRoot ++ "site.webmanifest")
56 ]
57 , Html.link
58 [ A.rel "mask-icon"
59 , A.href (pathToRoot ++ "safari-pinned-tab.svg")
60 , A.attribute "color" "#8a90a9"
61 ]
62 , Html.meta
63 [ A.name "msapplication-TileColor"
64 , A.content "#8a90a9"
65 ]
66 , Html.meta
67 [ A.name "theme-color"
68 , A.content "#8a90a9"
69 ]
70
71 , -- Styles
72 Html.meta
73 [ A.name "color-scheme"
74 , A.content "dark light"
75 ]
76 , Html.link
77 [ A.rel "stylesheet"
78 , A.href (pathToRoot ++ "about.css")
79 ]
80 ]
81
82 , --
83 Html.body
84 [ A.class "font-body text-base01 dark:bg-darkest-hour my-16 bg-white px-4 dark:text-gray-600"
85 ]
86 [ Html.main_
87 [ A.class "mx-auto max-w-2xl"
88 ]
89 [ Html.a
90 [ A.class "logo inline-block"
91 , A.href pathToRoot
92 ]
93 [ Html.img
94 [ A.class "block dark:hidden"
95 , A.src (pathToRoot ++ "images/diffuse-dark.svg")
96 ]
97 []
98 , Html.img
99 [ A.class "hidden dark:block"
100 , A.src (pathToRoot ++ "images/diffuse-light.svg")
101 ]
102 []
103 , Html.h1
104 []
105 [ Html.text "Diffuse"
106 ]
107 ]
108
109 , --
110 Html.article [] contents
111 ]
112
113 , --
114 Html.node
115 "script"
116 [ A.src "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"
117 ]
118 []
119 , Html.node
120 "script"
121 []
122 [ Html.text "hljs.initHighlightingOnLoad();"
123 ]
124 , Html.node
125 "script"
126 []
127 [ Html.text "if (\"serviceWorker\" in navigator) {\n"
128 , Html.text " navigator.serviceWorker.register(\""
129 , Html.text pathToRoot
130 , Html.text "service-worker.js\", { type: \"module\" });\n"
131 , Html.text "}"
132 ]
133 ]
134 ]
135 ]