docs: make examples components

Author: DylanVann

packages/docs/components/change-favicon.js

@@ -0,0 +1,19 @@
+//----------------------------------------------------------
+// Change Favicon
+//----------------------------------------------------------
+
+var { mode } = window.__pdm__
+
+// For changing the tab icon.
+var changeFavicon = (src) => {
+  var oldLink = document.querySelector('link[rel="icon"]')
+  document.head.removeChild(oldLink)
+  var link = document.createElement('link')
+  link.rel = 'icon'
+  link.type = 'image/png'
+  link.href = src
+  document.head.appendChild(link)
+}
+
+// Listen to the color mode and update the UI.
+mode.subscribe((m) => changeFavicon(`images/${m}.png`))

packages/docs/components/cycle-button.js

@@ -0,0 +1,17 @@
+//----------------------------------------------------------
+// Cycle Button
+//----------------------------------------------------------
+
+var { mode } = window.__pdm__
+
+// Get some elements we will use.
+var cycleEls = document.querySelectorAll('.pdm-cycle')
+
+// These elements will cycle through all modes.
+cycleEls.forEach((el) => {
+  el.addEventListener('click', (e) =>
+    mode.update(
+      (mode, modes, modeIndex) => modes[(modeIndex + 1) % modes.length],
+    ),
+  )
+})

packages/docs/components/emoji.js

@@ -0,0 +1,17 @@
+//----------------------------------------------------------
+// Emoji
+//----------------------------------------------------------
+
+var { mode } = window.__pdm__
+
+// Get some elements we will use.
+var emojiEls = document.querySelectorAll('.pdm-emoji')
+
+// Listen to the color mode and update the UI.
+mode.subscribe((m) =>
+  emojiEls.forEach((el) => (el.className = `pdm-emoji emoji ${m}`)),
+)
+
+// At this point our callback will have been called,
+// so the text of these will be correct and we can show them.
+emojiEls.forEach((el) => (el.style.visibility = 'unset'))

packages/docs/form.js packages/docs/components/form.jspackages/docs/form.js renamed to packages/docs/components/form.js

@@ -1,11 +1,17 @@
-const subscribeButtons = document.querySelectorAll('.subscribe')
+//----------------------------------------------------------
+// Form
+//----------------------------------------------------------
 
+// Get the elements.
+var subscribeButtons = document.querySelectorAll('.subscribe')
+
+// Handle submit functions.
 subscribeButtons.forEach((el) => {
   el.addEventListener('submit', (e) => {
     e.preventDefault()
-    const formId = 1747454
-    const name = e.target.elements.name.value
-    const email = e.target.elements.email.value
+    var formId = 1747454
+    var name = e.target.elements.name.value
+    var email = e.target.elements.email.value
     document
       .querySelectorAll('.subscribed')
       .forEach((el) => el.classList.remove('hidden'))

packages/docs/components/label.js

@@ -0,0 +1,15 @@
+//----------------------------------------------------------
+// Label
+//----------------------------------------------------------
+
+var { mode } = window.__pdm__
+
+// Get some elements we will use.
+var labelEls = document.querySelectorAll('.pdm-label')
+
+// Listen to the color mode and update the UI.
+mode.subscribe((m) => labelEls.forEach((el) => (el.textContent = m)))
+
+// At this point our callback will have been called,
+// so the text of these will be correct and we can show them.
+labelEls.forEach((el) => (el.style.visibility = 'unset'))

packages/docs/components/mode.js

@@ -0,0 +1,19 @@
+//----------------------------------------------------------
+// Mode
+//----------------------------------------------------------
+
+var { modeSaved, modeOS } = window.__pdm__
+
+// Get some elements we will use.
+var modeSavedEls = document.querySelectorAll('.pdm-mode-saved')
+var modeOSEls = document.querySelectorAll('.pdm-mode-os')
+
+// Show the saved mode for debugging.
+modeSaved.subscribe((v) =>
+  modeSavedEls.forEach((el) => (el.textContent = `Saved Color Mode: ${v}`)),
+)
+
+// Show the OS mode for debugging.
+modeOS.subscribe((v) =>
+  modeOSEls.forEach((el) => (el.textContent = `OS Color Mode: ${v}`)),
+)

packages/docs/components/reset-button.js

@@ -0,0 +1,15 @@
+//----------------------------------------------------------
+// Reset Button
+//----------------------------------------------------------
+
+var { mode } = window.__pdm__
+
+// Get some elements we will use.
+var resetButtonEls = document.querySelectorAll('.pdm-reset')
+
+// These elements will clear the saved color mode,
+// which will cause the color mode to fallback to
+// the OS color mode.
+resetButtonEls.forEach((el) =>
+  el.addEventListener('click', () => mode.set(undefined)),
+)

packages/docs/components/root.js

@@ -0,0 +1,15 @@
+//----------------------------------------------------------
+// Root
+//----------------------------------------------------------
+
+// We want to make sure that if the OS mode is 'light'
+// and the saved mode is 'dark' that we do not transition
+// between the two, so we add the transition after a frame
+// has passed.
+requestAnimationFrame(() =>
+  requestAnimationFrame(
+    () =>
+      (document.documentElement.style.transition =
+        'background 0.5s, color 0.5s'),
+  ),
+)

packages/docs/components/select.js

@@ -0,0 +1,29 @@
+//----------------------------------------------------------
+// Select
+//----------------------------------------------------------
+
+var { mode, modes } = window.__pdm__
+
+// We can use a select element for choosing a color mode
+// instead of a toggle button.
+var selectEls = document.querySelectorAll('.pdm-select')
+
+// Update the select options with the modes.
+modes.subscribe((modes) => {
+  selectEls.forEach((el) => {
+    // Preserve the current selection by saving then re-assigning.
+    var prevValue = el.value
+    el.innerHTML = modes
+      .map((m) => `<option value="${m}">${m}</option>`)
+      .join('\n')
+    el.value = prevValue
+  })
+})
+
+// Set the mode on change.
+selectEls.forEach((el) =>
+  el.addEventListener('change', (e) => mode.set(e.target.value)),
+)
+
+// Set the value to mode.
+mode.subscribe((m) => selectEls.forEach((el) => (el.value = m)))

packages/docs/components/syntax-highlight.js

@@ -0,0 +1,21 @@
+//----------------------------------------------------------
+// Syntax Highlight
+//----------------------------------------------------------
+
+var { mode } = window.__pdm__
+
+// Get the color mode links.
+var colorModeLinks = document.querySelectorAll('.codestyle')
+
+// Disable color mode links we don't need.
+mode.subscribe((m) => {
+  colorModeLinks.forEach((link) => {
+    if (!link.className.includes(m)) {
+      link.disabled = true
+    } else {
+      // Enable the link we do need.
+      link.disabled = false
+      link.media = 'screen'
+    }
+  })
+})