Add basic index page

Author: GearsDatapacks

src/build.gleam

@@ -17,6 +17,7 @@ pub fn main() {
   let build =
     ssg.new("./priv")
     |> ssg.add_static_route("/", index.view())
+    |> ssg.add_static_dir("./static")
     // |> ssg.add_static_route("/blog", blog.view(posts.all()))
     // |> ssg.add_dynamic_route("/blog", posts, post.view)
     |> ssg.build

src/website/components.gleam

@@ -0,0 +1,36 @@
+import lustre/attribute.{attribute}
+import lustre/element.{type Element}
+import lustre/element/html
+
+pub fn head(page: String) -> Element(a) {
+  html.head([], [
+    html.meta([attribute("charset", "UTF-8")]),
+    html.title([], "Gears | " <> page),
+    html.link([attribute.href("/style.css"), attribute.rel("stylesheet")]),
+    html.link([attribute.href("https://rsms.me/"), attribute.rel("preconnect")]),
+    html.link([
+      attribute.href("https://rsms.me/inter/inter.css"),
+      attribute.rel("stylesheet"),
+    ]),
+    html.link([
+      attribute.type_("image/svg+xml"),
+      attribute.href("/favicon.svg"),
+      attribute.rel("icon"),
+    ]),
+    html.link([
+      attribute("sizes", "48x48"),
+      attribute.type_("image/png"),
+      attribute.href("/favicon.ico"),
+      attribute.rel("alternate icon"),
+    ]),
+    html.link([
+      attribute("sizes", "192x192"),
+      attribute.href("/apple-touch-icon.png"),
+      attribute.rel("apple-touch-icon"),
+    ]),
+  ])
+}
+
+pub fn page(name: String, body: List(Element(a))) -> Element(a) {
+  html.html([attribute("lang", "en")], [head(name), html.body([], body)])
+}

src/website/page/index.gleam

@@ -1,5 +1,34 @@
-import lustre/element
+import lustre/attribute.{attribute}
+import lustre/element/html
+import website/components
 
 pub fn view() {
-  element.text("Hello!")
+  components.page("Home", [
+    html.main([], [
+      html.div([], [
+        html.h1([], [html.text("Hello and welcome to my website!")]),
+      ]),
+      html.div([], [
+        html.p([], [
+          html.text("I am Gears, a software developer and Minecraft YouTuber."),
+          html.br([]),
+          html.text("More about me in the "),
+          html.a([attribute.href("/about/")], [html.text("about")]),
+          html.text(" section."),
+          html.br([]),
+          html.text("You can check out my finished and ongoing projects in "),
+          html.a([attribute.href("/projects/")], [html.text("projects")]),
+          html.text("."),
+          html.br([]),
+          html.text("For information on Minecraft datapack commissions, see "),
+          html.a([attribute.href("/commissions/")], [html.text("commissions")]),
+          html.text("."),
+          html.br([]),
+          html.text("If you have more questions, you can "),
+          html.a([attribute.href("/contact/")], [html.text("contact me")]),
+          html.text("."),
+        ]),
+      ]),
+    ]),
+  ])
 }

static/style.css

@@ -0,0 +1,47 @@
+:root {
+  font-family: Inter, sans-serif;
+  font-feature-settings: 'liga' 1, 'calt' 1;
+  /* fix for Chrome */
+}
+
+@supports (font-variation-settings: normal) {
+  :root {
+    font-family: InterVariable, sans-serif;
+  }
+}
+
+body {
+  min-height: 100vh;
+  background-color: rgb(30, 41, 59);
+  color: white;
+}
+
+main {
+  padding: 3rem 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+h1 {
+  font-weight: bold;
+  text-align: center;
+}
+
+div {
+  margin: auto 0;
+  max-width: 48rem;
+  padding: 1rem;
+}
+
+p {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+a {
+  color: white;
+  text-decoration: underline;
+  font-weight: bold;
+}