feat: add sugar, links, css & content to /everything page

src/tour/widgets.gleam

@@ -1,4 +1,5 @@
-import htmb.{type Html, h}
+import gleam/list
+import htmb.{type Html, h, text}
 
 pub fn icon_moon() -> Html {
   h("svg", [#("id", "icon-moon"), #("viewBox", "0 0 24 24")], [
@@ -60,48 +61,163 @@ pub fn icon_toggle_right() -> Html {
   ])
 }
 
+pub fn theme_picker() -> Html {
+  h("div", [#("class", "theme-picker")], [
+    h(
+      "button",
+      [
+        #("type", "button"),
+        #("alt", "Switch to light mode"),
+        #("title", "Switch to light mode"),
+        #("class", "theme-button -light"),
+        #("data-light-theme-toggle", ""),
+      ],
+      [icon_moon(), icon_toggle_left()],
+    ),
+    h(
+      "button",
+      [
+        #("type", "button"),
+        #("alt", "Switch to dark mode"),
+        #("title", "Switch to dark mode"),
+        #("class", "theme-button -dark"),
+        #("data-dark-theme-toggle", ""),
+      ],
+      [icon_sun(), icon_toggle_right()],
+    ),
+  ])
+}
+
 // This script is inlined in the response to avoid FOUC when applying the theme
 pub const theme_picker_js = "
-const mediaPrefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)')
+const mediaPrefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
+const themeStorageKey = 'theme';
 
-function selectTheme(selectedTheme) {
-  // Apply and remember the specified theme.
-  applyTheme(selectedTheme)
-  if ((selectedTheme === 'dark') === mediaPrefersDarkTheme.matches) {
+function getPreferredTheme() {
+  return mediaPrefersDarkTheme.matches ? 'dark' : 'light';
+}
+
+function getAppliedTheme() {
+  return document.documentElement.classList.contains('theme-dark')
+    ? 'dark'
+    : 'light';
+}
+
+function getStoredTheme() {
+  return localStorage.getItem(themeStorageKey);
+}
+
+function storeTheme(selectedTheme) {
+  localStorage.setItem(themeStorageKey, selectedTheme);
+}
+
+function syncStoredTheme(theme) {
+  if (theme === getPreferredTheme()) {
     // Selected theme is the same as the device's preferred theme, so we can forget this setting.
-    localStorage.removeItem('theme')
+    localStorage.removeItem(themeStorageKey);
   } else {
     // Remember the selected theme to apply it on the next visit
-    localStorage.setItem('theme', selectedTheme)
+    storeTheme(theme);
   }
 }
 
-function applyTheme(theme) {
-  document.documentElement.classList.toggle('theme-dark', theme === 'dark')
-  document.documentElement.classList.toggle('theme-light', theme !== 'dark')
+function applyTheme(theme, initial = false) {
+  // abort if theme is already applied
+  if (theme === getAppliedTheme()) return;
+  // apply theme css class
+  document.documentElement.classList.toggle('theme-dark', theme === 'dark');
+  document.documentElement.classList.toggle('theme-light', theme !== 'dark');
 }
 
-// If user had selected a theme, load it. Otherwise, use device's preferred theme
-const selectedTheme = localStorage.getItem('theme')
-if (selectedTheme) {
-  applyTheme(selectedTheme)
-} else {
-  applyTheme(mediaPrefersDarkTheme.matches ? 'dark' : 'light')
+function setTheme(theme) {
+  syncStoredTheme(theme);
+  applyTheme(theme);
 }
 
-// Watch the device's preferred theme and update theme if user did not select a theme
-mediaPrefersDarkTheme.addEventListener('change', () => {
-  const selectedTheme = localStorage.getItem('theme')
-  if (!selectedTheme) {
-    applyTheme(mediaPrefersDarkTheme.matches ? 'dark' : 'light')
-  }
-})
-
-// Add handlers for theme selection buttons.
-document.querySelector('[data-light-theme-toggle]').addEventListener('click', () => {
-  selectTheme('light')
-})
-document.querySelector('[data-dark-theme-toggle]').addEventListener('click', () => {
-  selectTheme('dark')
-})
+function toggleTheme() {
+  setTheme(getAppliedTheme() === 'dark' ? 'light' : 'dark');
+}
+
+function reEnableTransitions() {
+  // re-enable transitions when triggered after first-render to avoid fouc
+  // setTimeout(fn, 0) needed to give CSS at lease 1 frame without transitions and thus avoid FOUC
+  setTimeout(() => {
+    // executed after css has loaded & theme swiching has occured
+    document.documentElement.classList.toggle('theme-init', false);
+  }, 0);
+}
+
+function initThemeEvents() {
+  // Watch the device's preferred theme and update theme if user did not select a theme
+  mediaPrefersDarkTheme.addEventListener('change', () => {
+    // abort if the user already selected a theme
+    if (!!getStoredTheme()) return;
+    // update applied theme accordingly
+    applyTheme(getPreferredTheme());
+  });
+  // Add handlers for theme selection button
+  document
+    .querySelector('.theme-picker')
+    ?.addEventListener('click', toggleTheme);
+  // Re-enable transitons only when all content has loaded
+  window.addEventListener('DOMContentLoaded', reEnableTransitions);
+}
+
+function initTheme() {
+  // apply stored or preferred theme
+  applyTheme(getStoredTheme() ?? getPreferredTheme());
+  initThemeEvents();
+}
+
+initTheme();
 "
+
+/// Renders an HTML anhor tag
+pub fn anchor(
+  to href: String,
+  attrs attributes: List(#(String, String)),
+  with content: List(Html),
+) -> Html {
+  h("a", [#("href", href), ..attributes], content)
+}
+
+pub type Link {
+  Link(label: String, to: String)
+}
+
+/// Renders a styled text link
+pub fn text_link(
+  for link: Link,
+  attributes attributes: List(#(String, String)),
+) -> Html {
+  let link_attributes = [#("class", "link"), ..attributes]
+
+  anchor(link.to, link_attributes, [text(link.label)])
+}
+
+/// Renders the tour's navbar as html
+pub fn navbar(titled title: String, links links: List(Link)) -> Html {
+  let links = list.map(links, fn(l) { text_link(l, []) })
+
+  let nav_right_items = list.flatten([links, [theme_picker()]])
+
+  h("nav", [#("class", "navbar")], [
+    anchor("/", [#("class", "logo")], [
+      h(
+        "img",
+        [
+          #("src", "https://gleam.run/images/lucy/lucy.svg"),
+          #("alt", "Lucy the star, Gleam's mascot"),
+        ],
+        [],
+      ),
+      text(title),
+    ]),
+    h("div", [#("class", "nav-right")], nav_right_items),
+  ])
+}
+
+/// Renders a horizontal separator
+pub fn separator(class: String) -> Html {
+  h("hr", [#("class", class <> "-separator")], [])
+}

static/css/code/color-schemes/atom-one.css

@@ -0,0 +1,76 @@
+/*
+
+Atom One Dark & Light by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+Tweaked for compat with light / dark themes
+
+*/
+
+:root {
+  /*
+  Atom One Dark
+
+  base:    #282c34
+  mono-1:  #abb2bf
+  mono-2:  #818896
+  mono-3:  #5c6370
+  hue-1:   #56b6c2
+  hue-2:   #61aeee
+  hue-3:   #c678dd
+  hue-4:   #98c379
+  hue-5:   #e06c75
+  hue-5-2: #be5046
+  hue-6:   #d19a66
+  hue-6-2: #e6c07b
+  */
+
+  --code-background-dark: #282c34; /* base */
+  --code-token-base-dark: #abb2bf; /* mono-1 */
+  --code-token-punctuation-dark: #818896; /* mono-2 */
+  --code-token-operator-dark: #c678dd; /* hue-3 */
+  --code-token-keyword-dark: #c678dd; /* hue-3 */
+  --code-token-string-dark: #98c379; /* hue-4 */
+  --code-token-comment-dark: #5c6370; /* mono-3 */
+  --code-token-attribute-dark: #818896; /* mono-2 */
+  --code-token-function-dark: #61aeee; /* hue-2 */
+  --code-token-function-name-dark: #61aeee; /* hue-2 */
+  --code-token-function-param-dark: #abb2bf; /* mono-1 */
+  --code-token-boolean-dark: #d19a66; /* hue-6 */
+  --code-token-number-dark: #d19a66; /* hue-6 */
+  --code-token-selector-dark: #e6c07b; /* hue-6-2 */
+  --code-token-type-dark: #56b6c2; /* hue-1 */
+
+  /*
+  Atom One Light
+
+  base:    #fafafa
+  mono-1:  #383a42
+  mono-2:  #686b77
+  mono-3:  #a0a1a7
+  hue-1:   #0184bb
+  hue-2:   #4078f2
+  hue-3:   #a626a4
+  hue-4:   #50a14f
+  hue-5:   #e45649
+  hue-5-2: #c91243
+  hue-6:   #986801
+  hue-6-2: #c18401
+  */
+
+  --code-background-light: #fafafa; /* base */
+  --code-token-base-light: #383a42; /* mono-1 */
+  --code-token-punctuation-light: #686b77; /* mono-2 */
+  --code-token-operator-light: #a626a4; /* hue-3 */
+  --code-token-keyword-light: #a626a4; /* hue-3 */
+  --code-token-string-light: #50a14f; /* hue-4 */
+  --code-token-comment-light: #a0a1a7; /* mono-3 */
+  --code-token-attribute-light: #686b77; /* mono-2 */
+  --code-token-function-light: #4078f2; /* hue-2 */
+  --code-token-function-name-light: #4078f2; /* hue-2 */
+  --code-token-function-param-light: #383a42; /* mono-1 */
+  --code-token-boolean-light: #986801; /* hue-6 */
+  --code-token-number-light: #986801; /* hue-6 */
+  --code-token-selector-light: #c18401; /* hue-6-2 */
+  --code-token-type-light: #0184bb; /* hue-1 */
+}