aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/ConnectivityChecker.vue52
-rw-r--r--src/components/DarkMode.vue34
-rw-r--r--src/components/DynamicTheme.vue34
-rw-r--r--src/components/Message.vue41
-rw-r--r--src/components/Navbar.vue66
-rw-r--r--src/components/SearchInput.vue42
-rw-r--r--src/components/Service.vue40
-rw-r--r--src/components/SettingToggle.vue41
8 files changed, 350 insertions, 0 deletions
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 @@
1<template>
2 <div v-if="offline" class="offline-message">
3 <i class="far fa-dizzy"></i>
4 <h1>
5 You're offline bro.
6 <span @click="checkOffline"> <i class="fas fa-redo-alt"></i></span>
7 </h1>
8 </div>
9</template>
10
11<script>
12export default {
13 name: "ConnectivityChecker",
14 data: function () {
15 return {
16 offline: false,
17 };
18 },
19 created: function () {
20 let that = this;
21 this.checkOffline();
22
23 document.addEventListener(
24 "visibilitychange",
25 function () {
26 if (document.visibilityState == "visible") {
27 that.checkOffline();
28 }
29 },
30 false
31 );
32 },
33 methods: {
34 checkOffline: function () {
35 let that = this;
36 return fetch(window.location.href + "?alive", {
37 method: "HEAD",
38 cache: "no-store",
39 })
40 .then(function () {
41 that.offline = false;
42 })
43 .catch(function () {
44 that.offline = true;
45 })
46 .finally(function () {
47 that.$emit("network:status-update", that.offline);
48 });
49 },
50 },
51};
52</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 @@
1<template>
2 <a
3 v-on:click="toggleTheme()"
4 aria-label="Toggle dark mode"
5 class="navbar-item is-inline-block-mobile"
6 >
7 <i class="fas fa-adjust"></i>
8 </a>
9</template>
10
11<script>
12export default {
13 name: "Darkmode",
14 data: function () {
15 return {
16 isDark: null,
17 };
18 },
19 created: function () {
20 this.isDark =
21 "overrideDark" in localStorage
22 ? JSON.parse(localStorage.overrideDark)
23 : matchMedia("(prefers-color-scheme: dark)").matches;
24 this.$emit("updated", this.isDark);
25 },
26 methods: {
27 toggleTheme: function () {
28 this.isDark = !this.isDark;
29 localStorage.overrideDark = this.isDark;
30 this.$emit("updated", this.isDark);
31 },
32 },
33};
34</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 @@
1<template>
2 <DynamicStyle>
3 /* light / dark theme switch based on system pref if available */ body #app
4 {
5 {{ getVars(themes.light) }}
6 } @media (prefers-color-scheme: light), (prefers-color-scheme:
7 no-preference) { body #app {
8 {{ getVars(themes.light) }}
9 } } @media (prefers-color-scheme: dark) { body #app { } } /* light / dark
10 theme override base on user choice. */ body #app.is-dark {
11 {{ getVars(themes.dark) }}
12 } body #app.is-light {
13 {{ getVars(themes.light) }}
14 }
15 </DynamicStyle>
16</template>
17
18<script>
19export default {
20 name: "DynamicTheme",
21 props: {
22 themes: Object,
23 },
24 methods: {
25 getVars: function (theme) {
26 let vars = [];
27 for (const themeVars in theme) {
28 vars.push(`--${themeVars}: ${theme[themeVars]}`);
29 }
30 return vars.join(";");
31 },
32 },
33};
34</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 @@
1<template>
2 <article v-if="item" class="message" :class="item.style">
3 <div v-if="item.title" class="message-header">
4 <p>{{ item.title }}</p>
5 </div>
6 <div v-if="item.content" class="message-body" v-html="item.content"></div>
7 </article>
8</template>
9
10<script>
11export default {
12 name: "Message",
13 props: {
14 item: Object,
15 },
16 created: function () {
17 // Look for a new message if an endpoint is provided.
18 let that = this;
19 if (this.item && this.item.url) {
20 this.getMessage(this.item.url).then(function (message) {
21 // keep the original config value if no value is provided by the endpoint
22 for (const prop of ["title", "style", "content"]) {
23 if (prop in message && message[prop] !== null) {
24 that.item[prop] = message[prop];
25 }
26 }
27 });
28 }
29 },
30 methods: {
31 getMessage: function (url) {
32 return fetch(url).then(function (response) {
33 if (response.status != 200) {
34 return;
35 }
36 return response.json();
37 });
38 },
39 },
40};
41</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 @@
1<template>
2 <div v-cloak v-if="links" class="container-fluid">
3 <nav class="navbar" role="navigation" aria-label="main navigation">
4 <div class="container">
5 <div class="navbar-brand">
6 <a
7 role="button"
8 aria-label="menu"
9 aria-expanded="false"
10 class="navbar-burger"
11 :class="{ 'is-active': showMenu }"
12 v-on:click="$emit('navbar:toggle')"
13 >
14 <span aria-hidden="true"></span>
15 <span aria-hidden="true"></span>
16 <span aria-hidden="true"></span>
17 </a>
18 </div>
19 <div class="navbar-menu" :class="{ 'is-active': showMenu }">
20 <div class="navbar-start">
21 <a
22 class="navbar-item"
23 v-for="link in links"
24 :key="link.url"
25 :href="link.url"
26 :target="link.target"
27 >
28 <i
29 v-if="link.icon"
30 style="margin-right: 6px;"
31 :class="link.icon"
32 ></i>
33 {{ link.name }}
34 </a>
35 </div>
36 <div class="navbar-end">
37 <slot></slot>
38 </div>
39 </div>
40 </div>
41 </nav>
42 </div>
43</template>
44
45<script>
46export default {
47 name: "Navbar",
48 props: {
49 open: {
50 type: Boolean,
51 default: false,
52 },
53 links: Array,
54 },
55 computed: {
56 showMenu: function () {
57 return this.open && this.isSmallScreen();
58 },
59 },
60 methods: {
61 isSmallScreen: function () {
62 return window.matchMedia("screen and (max-width: 1023px)").matches;
63 },
64 },
65};
66</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 @@
1<template>
2 <div class="search-bar">
3 <label for="search" class="search-label"></label>
4 <input
5 type="text"
6 ref="search"
7 :value="value"
8 @input="$emit('input', $event.target.value.toLowerCase())"
9 @keyup.enter.exact="$emit('search:open')"
10 @keyup.alt.enter="$emit('search:open', '_blank')"
11 />
12 </div>
13</template>
14
15<script>
16export default {
17 name: "SearchInput",
18 props: ["value"],
19 mounted() {
20 this._keyListener = function (event) {
21 if (event.key === "/") {
22 event.preventDefault();
23 this.$emit("search:focus");
24 this.$nextTick(() => {
25 this.$refs.search.focus();
26 });
27 }
28 if (event.key === "Escape") {
29 this.$refs.search.value = "";
30 this.$refs.search.blur();
31 this.$emit("search:cancel");
32 }
33 };
34 document.addEventListener("keydown", this._keyListener.bind(this));
35 },
36 beforeDestroy() {
37 document.removeEventListener("keydown", this._keyListener);
38 },
39};
40</script>
41
42<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 @@
1<template>
2 <div>
3 <div class="card">
4 <a :href="item.url" :target="item.target">
5 <div class="card-content">
6 <div class="media">
7 <div v-if="item.logo" class="media-left">
8 <figure class="image is-48x48">
9 <img :src="item.logo" />
10 </figure>
11 </div>
12 <div v-if="item.icon" class="media-left">
13 <figure class="image is-48x48">
14 <i style="font-size: 35px;" :class="item.icon"></i>
15 </figure>
16 </div>
17 <div class="media-content">
18 <p class="title is-4">{{ item.name }}</p>
19 <p class="subtitle is-6">{{ item.subtitle }}</p>
20 </div>
21 </div>
22 <div class="tag" :class="item.tagstyle" v-if="item.tag">
23 <strong class="tag-text">#{{ item.tag }}</strong>
24 </div>
25 </div>
26 </a>
27 </div>
28 </div>
29</template>
30
31<script>
32export default {
33 name: "Service",
34 props: {
35 item: Object,
36 },
37};
38</script>
39
40<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 @@
1<template>
2 <a v-on:click="toggleSetting()" class="navbar-item is-inline-block-mobile">
3 <span v-show="value"><i :class="['fas', icon]"></i></span>
4 <span v-show="!value"><i :class="['fas', iconAlt]"></i></span>
5 <slot></slot>
6 </a>
7</template>
8
9<script>
10export default {
11 name: "SettingToggle",
12 props: {
13 name: String,
14 icon: String,
15 iconAlt: String,
16 },
17 data: function () {
18 return {
19 value: true,
20 };
21 },
22 created: function () {
23 if (!this.iconAlt) {
24 this.iconAlt = this.icon;
25 }
26
27 if (this.name in localStorage) {
28 this.value = JSON.parse(localStorage[this.name]);
29 }
30
31 this.$emit("updated", this.value);
32 },
33 methods: {
34 toggleSetting: function () {
35 this.value = !this.value;
36 localStorage[this.name] = this.value;
37 this.$emit("updated", this.value);
38 },
39 },
40};
41</script>
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-23 06:31:19 +0000