feat: landing page + smart components

components/smart/Anchor.vue

@@ -0,0 +1,74 @@
+<template>
+  <SmartLink
+    :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
+    :exact="exact"
+    :blank="blank"
+    class="inline-flex items-center justify-center focus:outline-none"
+    :class="[
+      color
+        ? `text-${color}-500 transition hover:text-${color}-600 focus:text-${color}-600`
+        : 'transition hover:text-secondaryDark focus:text-secondaryDark',
+      { 'opacity-50 cursor-not-allowed': disabled },
+      { 'flex-row-reverse': reverse },
+    ]"
+    :disabled="disabled"
+  >
+    <i
+      v-if="icon"
+      :class="label ? (reverse ? 'ml-2' : 'mr-2') : ''"
+      class="material-icons"
+    >
+      {{ icon }}
+    </i>
+    <SmartIcon
+      v-if="svg"
+      :name="svg"
+      :class="label ? (reverse ? 'ml-2' : 'mr-2') : ''"
+      class="svg-icons"
+    />
+    {{ label }}
+  </SmartLink>
+</template>
+
+<script>
+export default {
+  props: {
+    to: {
+      type: String,
+      default: "",
+    },
+    exact: {
+      type: Boolean,
+      default: true,
+    },
+    blank: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    svg: {
+      type: String,
+      default: "",
+    },
+    color: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

components/smart/ChangeLanguage.vue

@@ -0,0 +1,51 @@
+<template>
+  <span>
+    <tippy
+      ref="language"
+      trigger="click"
+      theme="popover"
+      arrow
+      interactive
+      :animate-fill="false"
+    >
+      <template #trigger>
+        <button
+          v-tippy="{ animateFill: false, theme: 'tooltip' }"
+          :title="$t('choose_language')"
+        >
+          <span class="mr-2 text-lg">
+            {{
+              $i18n.locales.find(({ code }) => code == $i18n.locale).country
+                | formatCountry
+            }}
+          </span>
+          {{ $i18n.locales.find(({ code }) => code == $i18n.locale).name }}
+        </button>
+      </template>
+      <NuxtLink
+        v-for="locale in $i18n.locales.filter(
+          ({ code }) => code !== $i18n.locale
+        )"
+        :key="locale.code"
+        class="
+          inline-flex
+          items-center
+          px-4
+          py-2
+          transition
+          rounded-lg
+          hover:bg-accentLight hover:text-secondaryDark
+          focus:bg-accentLight focus:text-secondaryDark focus:outline-none
+        "
+        :to="switchLocalePath(locale.code)"
+      >
+        <span class="mr-2 text-lg">
+          {{ locale.country | formatCountry }}
+        </span>
+        <span class="font-semibold">
+          {{ locale.name }}
+        </span>
+      </NuxtLink>
+    </tippy>
+  </span>
+</template>

components/smart/Link.js

@@ -0,0 +1,67 @@
+/* Vue 2 Functional Component: https://vuejs.org/v2/guide/render-function.html#Functional-Components */
+import { mergeData } from "vue-functional-data-merge"
+import getLinkTag, { ANCHOR_TAG, FRAMEWORK_LINK } from "~/assets/js/getLinkTag"
+
+const SmartLink = {
+  functional: true,
+  props: {
+    to: {
+      type: String,
+      default: "",
+    },
+    exact: {
+      type: Boolean,
+      default: false,
+    },
+    blank: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  // It's a convention to rename `createElement` to `h`
+  render(h, context) {
+    const tag = getLinkTag(context.props)
+
+    // Map our attributes correctly
+    const attrs = {}
+    let on = {}
+    switch (tag) {
+      case ANCHOR_TAG:
+        // Map `to` prop to the correct attribute
+        attrs.href = context.props.to
+
+        // Handle `blank` prop
+        if (context.props.blank) {
+          attrs.target = "_blank"
+          attrs.rel = "noopener"
+        }
+
+        // Transform native events to regular events for HTML anchor tag
+        on = { ...context.data.nativeOn }
+        delete context.data.nativeOn
+        break
+
+      case FRAMEWORK_LINK:
+        // Map `to` prop to the correct attribute
+        attrs.to = context.props.to
+
+        // Handle `exact` prop
+        if (context.props.exact) {
+          attrs.exact = true
+        }
+
+        break
+
+      default:
+        break
+    }
+
+    // Merge our new data with existing ones
+    const data = mergeData(context.data, { attrs, on })
+
+    // Return a new virtual node
+    return h(tag, data, context.children)
+  },
+}
+
+export default SmartLink