Fontawesome, tweaks to lang

Author: dazecoop

README.md

@@ -6,6 +6,7 @@
 - [Numeral](http://numeraljs.com/)
 - [Vue I18n](https://kazupon.github.io/vue-i18n/)
 - [Vue2 smooth scroll](https://www.npmjs.com/package/vue2-smooth-scroll)
+- [FortAwesome / FontAwesome](https://github.com/FortAwesome/vue-fontawesome)
 - ... and some others, probably. See [package.json](https://github.com/dazecoop/vue-template/blob/master/package.json) file for more
 
 ## ⚙️ Installation

package-lock.json

@@ -8,6 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^2.0.6",
     "@tailwindcss/forms": "^0.3.4",
     "@tailwindcss/postcss7-compat": "^2.0.2",
     "autoprefixer": "^9",

package.json

@@ -39,6 +39,7 @@ import './assets/main.scss'
  */
 import './modules/filters'
 import './modules/tailwind'
+import './modules/fontawesome'
 
 /**
  * Global variables

src/main.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+/**
+ * Standard icons
+ */
+import {
+  faUserSecret,
+} from '@fortawesome/free-solid-svg-icons'
+library.add(
+  faUserSecret,
+)
+
+/**
+ * Brand icons
+ */
+import {
+  faGithub,
+  faTwitter,
+} from '@fortawesome/free-brands-svg-icons'
+library.add(
+  faGithub,
+  faTwitter,
+)
+
+Vue.component('FontAwesomeIcon', FontAwesomeIcon)

src/modules/fontawesome.js

@@ -30,13 +30,7 @@ Vue.prototype.$languages = languages;
 
 // Default language
 const fallbackLocale = 'en';
-
-// Attempt to grab language from URL
 let locale = fallbackLocale;
-const localeFromURL = window.location.pathname.replace(/^\/([^\/]+).*/i,'$1');
-if (localeFromURL.trim().length && localeFromURL !== '/') {
-  locale = localeFromURL;
-}
 
 // Detect users language
 let userLanguage = window.navigator.userLanguage || window.navigator.language;
@@ -45,9 +39,8 @@ userLanguage = userLanguage.substr(0, 2);
 // If users language exists in our locates, redirect to show them the correct language
 // only if locale doesn't already exist in URL
 const langs = languages.map((e) => e.value);
-if (localeFromURL.trim().length < 2 && langs.includes(userLanguage)) {
+if (langs.includes(userLanguage)) {
   locale = userLanguage;
-  router.push(`/${userLanguage}`);
 }
 
 // Create VueI18n instance with options

src/modules/i18n.js

@@ -9,7 +9,7 @@ const router = new Router({
   mode: 'history',
   routes: [
     {
-      path: '/:locale?',
+      path: '/',
       name: 'index',
       component: Index
     },

src/router.js

@@ -7,7 +7,7 @@
       <h2 class="text-xl">
         Sorry, page not found!
       </h2>
-      <p>
+      <p class="max-w-lg mx-auto">
         The page you are looking for might have been
         removed, had its name changed, or is temporarily unavailable.
       </p>

src/views/errors/404.vue

@@ -11,6 +11,10 @@
         :href="$siteDomain"
         class="hover:text-blue-500"
       >
+        <font-awesome-icon
+          :icon="['fab', 'github']"
+          class="mr-1"
+        />
         {{ $siteDomain }}
       </a>
     </p>