From b9c5fcf085bed9c6100283133531b36bfbb06cf0 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Mon, 25 May 2020 15:07:03 -0700
Subject: Build system integration using vue-cli.

---
 src/components/ConnectivityChecker.vue | 52 +++++++++++++++++++++++++++
 src/components/DarkMode.vue            | 34 ++++++++++++++++++
 src/components/DynamicTheme.vue        | 34 ++++++++++++++++++
 src/components/Message.vue             | 41 +++++++++++++++++++++
 src/components/Navbar.vue              | 66 ++++++++++++++++++++++++++++++++++
 src/components/SearchInput.vue         | 42 ++++++++++++++++++++++
 src/components/Service.vue             | 40 +++++++++++++++++++++
 src/components/SettingToggle.vue       | 41 +++++++++++++++++++++
 8 files changed, 350 insertions(+)
 create mode 100644 src/components/ConnectivityChecker.vue
 create mode 100644 src/components/DarkMode.vue
 create mode 100644 src/components/DynamicTheme.vue
 create mode 100644 src/components/Message.vue
 create mode 100644 src/components/Navbar.vue
 create mode 100644 src/components/SearchInput.vue
 create mode 100644 src/components/Service.vue
 create mode 100644 src/components/SettingToggle.vue

(limited to 'src/components')

diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue
new file mode 100644
index 0000000..a91a809
--- /dev/null
+++ b/src/components/ConnectivityChecker.vue
@@ -0,0 +1,52 @@
+<template>
+  <div v-if="offline" class="offline-message">
+    <i class="far fa-dizzy"></i>
+    <h1>
+      You're offline bro.
+      <span @click="checkOffline"> <i class="fas fa-redo-alt"></i></span>
+    </h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ConnectivityChecker",
+  data: function () {
+    return {
+      offline: false,
+    };
+  },
+  created: function () {
+    let that = this;
+    this.checkOffline();
+
+    document.addEventListener(
+      "visibilitychange",
+      function () {
+        if (document.visibilityState == "visible") {
+          that.checkOffline();
+        }
+      },
+      false
+    );
+  },
+  methods: {
+    checkOffline: function () {
+      let that = this;
+      return fetch(window.location.href + "?alive", {
+        method: "HEAD",
+        cache: "no-store",
+      })
+        .then(function () {
+          that.offline = false;
+        })
+        .catch(function () {
+          that.offline = true;
+        })
+        .finally(function () {
+          that.$emit("network:status-update", that.offline);
+        });
+    },
+  },
+};
+</script>
diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
new file mode 100644
index 0000000..0bcde0f
--- /dev/null
+++ b/src/components/DarkMode.vue
@@ -0,0 +1,34 @@
+<template>
+  <a
+    v-on:click="toggleTheme()"
+    aria-label="Toggle dark mode"
+    class="navbar-item is-inline-block-mobile"
+  >
+    <i class="fas fa-adjust"></i>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "Darkmode",
+  data: function () {
+    return {
+      isDark: null,
+    };
+  },
+  created: function () {
+    this.isDark =
+      "overrideDark" in localStorage
+        ? JSON.parse(localStorage.overrideDark)
+        : matchMedia("(prefers-color-scheme: dark)").matches;
+    this.$emit("updated", this.isDark);
+  },
+  methods: {
+    toggleTheme: function () {
+      this.isDark = !this.isDark;
+      localStorage.overrideDark = this.isDark;
+      this.$emit("updated", this.isDark);
+    },
+  },
+};
+</script>
diff --git a/src/components/DynamicTheme.vue b/src/components/DynamicTheme.vue
new file mode 100644
index 0000000..cf9963b
--- /dev/null
+++ b/src/components/DynamicTheme.vue
@@ -0,0 +1,34 @@
+<template>
+  <DynamicStyle>
+    /* light / dark theme switch based on system pref if available */ body #app
+    {
+    {{ getVars(themes.light) }}
+    } @media (prefers-color-scheme: light), (prefers-color-scheme:
+    no-preference) { body #app {
+    {{ getVars(themes.light) }}
+    } } @media (prefers-color-scheme: dark) { body #app { } } /* light / dark
+    theme override base on user choice. */ body #app.is-dark {
+    {{ getVars(themes.dark) }}
+    } body #app.is-light {
+    {{ getVars(themes.light) }}
+    }
+  </DynamicStyle>
+</template>
+
+<script>
+export default {
+  name: "DynamicTheme",
+  props: {
+    themes: Object,
+  },
+  methods: {
+    getVars: function (theme) {
+      let vars = [];
+      for (const themeVars in theme) {
+        vars.push(`--${themeVars}: ${theme[themeVars]}`);
+      }
+      return vars.join(";");
+    },
+  },
+};
+</script>
diff --git a/src/components/Message.vue b/src/components/Message.vue
new file mode 100644
index 0000000..fcb0fbb
--- /dev/null
+++ b/src/components/Message.vue
@@ -0,0 +1,41 @@
+<template>
+  <article v-if="item" class="message" :class="item.style">
+    <div v-if="item.title" class="message-header">
+      <p>{{ item.title }}</p>
+    </div>
+    <div v-if="item.content" class="message-body" v-html="item.content"></div>
+  </article>
+</template>
+
+<script>
+export default {
+  name: "Message",
+  props: {
+    item: Object,
+  },
+  created: function () {
+    // Look for a new message if an endpoint is provided.
+    let that = this;
+    if (this.item && this.item.url) {
+      this.getMessage(this.item.url).then(function (message) {
+        // keep the original config value if no value is provided by the endpoint
+        for (const prop of ["title", "style", "content"]) {
+          if (prop in message && message[prop] !== null) {
+            that.item[prop] = message[prop];
+          }
+        }
+      });
+    }
+  },
+  methods: {
+    getMessage: function (url) {
+      return fetch(url).then(function (response) {
+        if (response.status != 200) {
+          return;
+        }
+        return response.json();
+      });
+    },
+  },
+};
+</script>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..a64ff3b
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,66 @@
+<template>
+  <div v-cloak v-if="links" class="container-fluid">
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+      <div class="container">
+        <div class="navbar-brand">
+          <a
+            role="button"
+            aria-label="menu"
+            aria-expanded="false"
+            class="navbar-burger"
+            :class="{ 'is-active': showMenu }"
+            v-on:click="$emit('navbar:toggle')"
+          >
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+          </a>
+        </div>
+        <div class="navbar-menu" :class="{ 'is-active': showMenu }">
+          <div class="navbar-start">
+            <a
+              class="navbar-item"
+              v-for="link in links"
+              :key="link.url"
+              :href="link.url"
+              :target="link.target"
+            >
+              <i
+                v-if="link.icon"
+                style="margin-right: 6px;"
+                :class="link.icon"
+              ></i>
+              {{ link.name }}
+            </a>
+          </div>
+          <div class="navbar-end">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Navbar",
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    links: Array,
+  },
+  computed: {
+    showMenu: function () {
+      return this.open && this.isSmallScreen();
+    },
+  },
+  methods: {
+    isSmallScreen: function () {
+      return window.matchMedia("screen and (max-width: 1023px)").matches;
+    },
+  },
+};
+</script>
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
new file mode 100644
index 0000000..22b5eef
--- /dev/null
+++ b/src/components/SearchInput.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="search-bar">
+    <label for="search" class="search-label"></label>
+    <input
+      type="text"
+      ref="search"
+      :value="value"
+      @input="$emit('input', $event.target.value.toLowerCase())"
+      @keyup.enter.exact="$emit('search:open')"
+      @keyup.alt.enter="$emit('search:open', '_blank')"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SearchInput",
+  props: ["value"],
+  mounted() {
+    this._keyListener = function (event) {
+      if (event.key === "/") {
+        event.preventDefault();
+        this.$emit("search:focus");
+        this.$nextTick(() => {
+          this.$refs.search.focus();
+        });
+      }
+      if (event.key === "Escape") {
+        this.$refs.search.value = "";
+        this.$refs.search.blur();
+        this.$emit("search:cancel");
+      }
+    };
+    document.addEventListener("keydown", this._keyListener.bind(this));
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener);
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/Service.vue b/src/components/Service.vue
new file mode 100644
index 0000000..d27b17b
--- /dev/null
+++ b/src/components/Service.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div class="card">
+      <a :href="item.url" :target="item.target">
+        <div class="card-content">
+          <div class="media">
+            <div v-if="item.logo" class="media-left">
+              <figure class="image is-48x48">
+                <img :src="item.logo" />
+              </figure>
+            </div>
+            <div v-if="item.icon" class="media-left">
+              <figure class="image is-48x48">
+                <i style="font-size: 35px;" :class="item.icon"></i>
+              </figure>
+            </div>
+            <div class="media-content">
+              <p class="title is-4">{{ item.name }}</p>
+              <p class="subtitle is-6">{{ item.subtitle }}</p>
+            </div>
+          </div>
+          <div class="tag" :class="item.tagstyle" v-if="item.tag">
+            <strong class="tag-text">#{{ item.tag }}</strong>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Service",
+  props: {
+    item: Object,
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/SettingToggle.vue b/src/components/SettingToggle.vue
new file mode 100644
index 0000000..94655bc
--- /dev/null
+++ b/src/components/SettingToggle.vue
@@ -0,0 +1,41 @@
+<template>
+  <a v-on:click="toggleSetting()" class="navbar-item is-inline-block-mobile">
+    <span v-show="value"><i :class="['fas', icon]"></i></span>
+    <span v-show="!value"><i :class="['fas', iconAlt]"></i></span>
+    <slot></slot>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "SettingToggle",
+  props: {
+    name: String,
+    icon: String,
+    iconAlt: String,
+  },
+  data: function () {
+    return {
+      value: true,
+    };
+  },
+  created: function () {
+    if (!this.iconAlt) {
+      this.iconAlt = this.icon;
+    }
+
+    if (this.name in localStorage) {
+      this.value = JSON.parse(localStorage[this.name]);
+    }
+
+    this.$emit("updated", this.value);
+  },
+  methods: {
+    toggleSetting: function () {
+      this.value = !this.value;
+      localStorage[this.name] = this.value;
+      this.$emit("updated", this.value);
+    },
+  },
+};
+</script>
-- 
cgit v1.2.3