Version 1.2.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "meteostat-webapp",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "type": "module",
   "engines": {
     "node": ">=14.17"

src/components/CookieModal.vue

@@ -1,39 +1,37 @@
 <template>
   <div id="cookieModal" class="modal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">
-            {{ t('$title') }}
-          </h5>
-        </div>
-        <div class="modal-body">
-          {{ t('$description') }}
-        </div>
-        <div class="modal-footer">
-          <a :href="t('$privacyLink')">
-            {{ t('privacyPolicy') }}
-          </a>
-          <button type="button" class="btn btn-light ms-auto" data-bs-dismiss="modal" @click="dismiss">
-            {{ t('reject') }}
-          </button>
-          <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="accept">
-            {{ t('accept') }}
-          </button>
-        </div>
-      </div>
-    </div>
+    <Modal :title="t('$title')">
+      <template v-slot:body>
+        {{ t('$description') }}
+      </template>
+      <template v-slot:footer>
+        <a :href="t('$privacyLink')">
+          {{ t('privacyPolicy') }}
+        </a>
+        <button type="button" class="btn btn-light ms-auto" data-bs-dismiss="modal" @click="dismiss">
+          {{ t('reject') }}
+        </button>
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="accept">
+          {{ t('accept') }}
+        </button>
+      </template>
+    </Modal>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSettingsStore } from '../stores/settings';
+import Modal from './Modal.vue';
 
 export default defineComponent({
   name: 'CookieModal',
 
+  components: {
+    Modal
+  },
+
   setup() {
     const { t } = useI18n();
     const settings = useSettingsStore();

src/components/Donation.vue

@@ -1,11 +1,5 @@
 <template>
-  <div class="offcanvas-header">
-    <h5 id="offcanvasExampleLabel" class="offcanvas-title">
-      {{ t('donation') }}
-    </h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" />
-  </div>
-  <div class="offcanvas-body">
+  <Offcanvas :title="t('donation')">
     <div class="mb-4">
       {{ t('donationText') }}
       <small class="d-block text-muted mt-2">
@@ -102,16 +96,21 @@
         <img src="https://media.meteostat.net/assets/qr-ethereum.png" class="img-fluid img-thumbnail" />
       </div>
     </div>
-  </div>
+  </Offcanvas>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
+import Offcanvas from './Offcanvas.vue';
 
 export default defineComponent({
   name: 'Donation',
 
+  components: {
+    Offcanvas
+  },
+
   setup(): Record<string, any> {
     const { t } = useI18n();
 

src/components/Footer.vue

@@ -13,9 +13,9 @@
           </a>
         </li>
         <li class="d-inline-block ms-3">
-          <a href="https://blog.meteostat.net">
+          <router-link to="/blog">
             {{ t('blog') }}
-          </a>
+          </router-link>
         </li>
         <li class="d-block mt-3 my-md-0 ms-md-4">
           <router-link

src/components/LocationNavbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav id="location-navbar" class="navbar navbar-expand-lg navbar-light bg-light py-0 sticky-top">
+  <nav id="location-navbar" class="navbar navbar-expand-lg navbar-light bg-light py-1 py-lg-0 sticky-top">
     <div class="container-fluid">
       <!-- Location Name -->
       <div class="navbar-brand d-flex align-items-center overflow-hidden py-2" @click="scrollTop()">
@@ -43,6 +43,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { scrollToElement } from '~/utils/spy';
 
 export default defineComponent({
   name: 'Subnav',
@@ -91,14 +92,7 @@ export default defineComponent({
       const collapse = this.$bs.Collapse.default.getInstance(subnav);
       // Scroll to element & remove event listener if set
       const scrollTo = () => {
-        const el = document.getElementById(id);
-        if (el) {
-          const top = el.getBoundingClientRect().top + window.pageYOffset - 78;
-          window.scrollTo({
-            top: top,
-            behavior: 'smooth'
-          });
-        }
+        scrollToElement(id)
         if (collapse) {
           subnav.removeEventListener('hidden.bs.collapse', scrollTo);
         }
@@ -162,6 +156,7 @@ export default defineComponent({
 
 .navbar {
   z-index: 1021;
+  box-shadow: 0 0.5rem 0.8rem rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 10%);
 
   .navbar-brand {
     cursor: pointer;

src/components/Modal.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">
+          {{ title }}
+        </h5>
+      </div>
+      <div class="modal-body">
+        <slot name="body" />
+      </div>
+      <div class="modal-footer">
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: 'Modal',
+
+  props: {
+    id: String,
+    title: String
+  }
+});
+</script>

src/components/Navbar.vue

@@ -263,6 +263,8 @@ export default defineComponent({
 @import '../node_modules/bootstrap/scss/mixins';
 
 .navbar {
+  border-bottom: 1px solid $gray-200;
+
   .search {
     flex: 1;
     max-width: 420px;

src/components/Offcanvas.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="offcanvas-header">
+    <h5 id="offcanvasExampleLabel" class="offcanvas-title">
+      {{ title }}
+    </h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" :aria-label="t('close')" />
+  </div>
+  <div class="offcanvas-body">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent({
+  name: 'Offcanvas',
+
+  props: {
+    title: String
+  },
+
+  setup(): Record<string, any> {
+    const { t } = useI18n();
+
+    return { t };
+  }
+});
+</script>

src/components/Settings.vue

@@ -1,11 +1,5 @@
 <template>
-  <div class="offcanvas-header">
-    <h5 id="offcanvasExampleLabel" class="offcanvas-title">
-      {{ t('settings') }}
-    </h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" />
-  </div>
-  <div class="offcanvas-body">
+  <Offcanvas :title="t('settings')">
     <div class="form-check form-switch">
       <input id="imperial" v-model="settings.imperial" class="form-check-input" type="checkbox" />
       <label for="imperial">{{ t('imperialUnits') }}</label>
@@ -42,19 +36,24 @@
         {{ t('reset') }}
       </button>
     </div>
-  </div>
+  </Offcanvas>
 </template>
 
 <script lang="ts">
 import { defineComponent, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSettingsStore } from '../stores/settings';
+import Offcanvas from './Offcanvas.vue';
 
 export default defineComponent({
   name: 'Settings',
 
   emits: ['change'],
 
+  components: {
+    Offcanvas
+  },
+
   setup(props, { emit }): Record<string, any> {
     const { t } = useI18n();
     const settings = useSettingsStore();

src/components/charts/ColorStripe.plugin.ts

@@ -34,7 +34,7 @@ export default {
           5
         );
         if (!exists) {
-          ctx.fillStyle = '#ffffff';
+          ctx.fillStyle = 'rgba(0, 0, 0, 0)';
         } else {
           // Convert value to metric if necessary
           const scaleLabel = chart.options.scales.y.title.text;