light/dark mode switch improvements and bugfix in search index (#29)

bb1950328

27.33.2021 a03f248319a982926788c5a72356eec408dc66fd

light/dark mode switch improvements and bugfix in search index (#29)

* Display link to source code repo as image if params.source.iconLight is specified
dont use hardcoded "images/" prefix in params.logo.lightMode and .darkMode

* don't use javascript template string in search index because it causes a js ReferenceError if a page contains something like ${variableWhichDoesntExistInJs}

* fix bug where light/dark mode switch isn't in the right position when the user loads the site the first time with preferred dark mode
add a sun icon on the switch in light mode and a moon icon in dark mode (icons are drawn by me so no copyright issues)

 assets/js/index.js

@@ -246,6 +246,9 @@
    return mode.join('');
  }

  /**
   * @param isDarkMode true means from dark to light, false means from light to dark
   */
  function changeMode(isDarkMode) {
    if(isDarkMode) {
      bank.setItem(storageKey, light)
@@ -301,6 +304,7 @@
  function setUserColorMode(mode = false) {
    const isDarkMode = currentMode() == dark;
    const storedMode = bank.getItem(storageKey);
    const sysMode = systemMode();
    if(storedMode) {
      if(mode) {
        changeMode(isDarkMode);
@@ -310,9 +314,10 @@
    } else {
      if(mode === true) {
        changeMode(isDarkMode)
      } else {
        changeMode(sysMode!==dark);
      }
    }
    const sysMode = systemMode();
    const userMode = doc.dataset.mode;
    doc.dataset.systemmode = sysMode;
    if(userMode) {

 assets/js/search.js

@@ -3,7 +3,7 @@
  {
    "link": "{{ .Permalink }}",
    "title": "{{ .Title }}",
    "body": `{{ .PlainWords }}`.toLowerCase(),
    "body": "{{ .PlainWords }}".toLowerCase(),
  },
  {{- end }}
];

 assets/sass/_components.sass

@@ -272,3 +272,12 @@
      transform-origin: 50% 50%
      transition: transform 0.5s cubic-bezier(.19,1,.22,1)
      will-change: transform

  &_icon
    height: 1rem
    width: 1rem
    margin: 0
    z-index: 4
    position: absolute
    transform: translateY(-50%)
    transition: transform 0.5s cubic-bezier(.19,1,.22,1)

 assets/sass/_variables.sass

@@ -32,6 +32,8 @@
      &_choice
        &::after
          transform: translateX(1.75rem) scale(1.67)
      &_icon
        transform: translateX(1.75rem) translateY(-50%)

  &.dark:not([data-mode="light"])
    @media (prefers-color-scheme: dark)

 layouts/partials/mode.html

@@ -1,4 +1,16 @@
{{- $s := .Site }}
{{- $sp := $s.Params }}
{{- $iconsPath := "icons/" }}
<div class = 'color_mode'>
  <label for = 'mode'></label>
  <label for = 'mode'>
    {{- $litPath := absURL (printf "%ssun.svg" $iconsPath) }}
    {{- $darkPath := absURL (printf "%smoon.svg" $iconsPath) }}
    <picture data-lit="{{ $litPath }}" data-dark="{{ $darkPath }}">
      {{ with $sp.enableDarkMode }}
        <source srcset = '{{ $darkPath }}' media="(prefers-color-scheme: dark)">
      {{ end }}
      <img srcset = '{{ $litPath }}' alt = 'Light/Dark Mode Icon' class="color_icon">
    </picture>
  </label>
  <input type = 'checkbox' class = 'color_choice' id = 'mode' title="Toggle Dark Mode">
</div>

 static/icons/moon.svg

New file
@@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="112px" height="124px" viewBox="-0.5 -0.5 112 124"><defs/><g><path d="M 54.06 11 C 29.34 21.72 18 50.39 28.76 75.05 C 39.51 99.7 68.27 111 93 100.28 C 73.61 96.94 57.21 84.1 49.36 66.11 C 41.52 48.13 43.28 27.41 54.06 11 Z" fill="#000000" stroke="none" transform="rotate(-25,55.5,61)" pointer-events="all"/><path d="M 45.5 31 L 53.5 29 L 55.5 21 L 57.5 29 L 65.5 31 L 57.5 33 L 55.5 41 L 53.5 33 Z" fill="#000000" stroke="none" pointer-events="all"/><path d="M 62 61 L 68 59.5 L 69.5 53.5 L 71 59.5 L 77 61 L 71 62.5 L 69.5 68.5 L 68 62.5 Z" fill="#000000" stroke="none" pointer-events="all"/><path d="M 77 41 L 85 39 L 87 31 L 89 39 L 97 41 L 89 43 L 87 51 L 85 43 Z" fill="#000000" stroke="none" pointer-events="all"/></g></svg>

 static/icons/sun.svg

New file
@@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="201px" height="201px" viewBox="-0.5 -0.5 201 201"><defs/><g><ellipse cx="100" cy="100" rx="50" ry="50" fill="#000000" stroke="none" pointer-events="all"/><path d="M 80 10 L 120 20 L 80 30 Z" fill="#000000" stroke="none" transform="rotate(270,100,20)" pointer-events="all"/><path d="M 80 170 L 120 180 L 80 190 Z" fill="#000000" stroke="none" transform="rotate(90,100,180)" pointer-events="all"/><path d="M 160 90 L 200 100 L 160 110 Z" fill="#000000" stroke="none" pointer-events="all"/><path d="M 0 90 L 40 100 L 0 110 Z" fill="#000000" stroke="none" transform="rotate(180,20,100)" pointer-events="all"/><path d="M 137 147 L 177 157 L 137 167 Z" fill="#000000" stroke="none" transform="rotate(45,157,157)" pointer-events="all"/><path d="M 23 147 L 63 157 L 23 167 Z" fill="#000000" stroke="none" transform="rotate(135,43,157)" pointer-events="all"/><path d="M 23 33 L 63 43 L 23 53 Z" fill="#000000" stroke="none" transform="rotate(225,43,43)" pointer-events="all"/><path d="M 137 33 L 177 43 L 137 53 Z" fill="#000000" stroke="none" transform="rotate(315,157,43)" pointer-events="all"/></g></svg>