Updates

Author: devcoderoad

components/Languages.vue

@@ -1,25 +1,25 @@
 <template>
   <span class="lang-switcher">
-    <nuxt-link
+    <!-- <nuxt-link
       v-for="(locale, i) in showLocales"
       :key="i"
       :to="switchLocalePath(locale.code)"
       class="font-bold"
     >
       i18n: {{ locale.name }}
-    </nuxt-link>
+    </nuxt-link> -->
   </span>
 </template>
 
 <script>
 export default {
-  name: 'Languages',
-  computed: {
-    showLocales() {
-      return this.$i18n.locales.filter(
-        (locale) => locale.code !== this.$i18n.locale
-      )
-    }
-  }
+  name: 'Languages'
+  // computed: {
+  //   showLocales() {
+  //     return this.$i18n.locales.filter(
+  //       (locale) => locale.code !== this.$i18n.locale
+  //     )
+  //   }
+  // }
 }
 </script>

components/Logo.vue

@@ -1,37 +1,16 @@
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="150"
-    height="33.863"
-    viewBox="0 0 150 33.863"
+    width="38.58"
+    height="34.008"
+    viewBox="0 0 38.58 34.008"
   >
-    <g
-      id="Group_11"
-      data-name="Group 11"
-      transform="translate(-1037.089 -621.083)"
-    >
-      <path
-        id="Path_7"
-        data-name="Path 7"
-        d="M17.584,28.954V13.909a3.844,3.844,0,0,1,3.922-3.766H39.6V8.266A3.829,3.829,0,0,0,35.716,4.5H7.416A3.9,3.9,0,0,0,3.375,8.2V34.659a3.9,3.9,0,0,0,4.041,3.7H149.49a3.823,3.823,0,0,0,3.885-3.766V32.719H21.5A3.842,3.842,0,0,1,17.584,28.954Z"
-        transform="translate(1033.714 616.583)"
-        fill="#28a745"
-      />
-      <path
-        id="Path_8"
-        data-name="Path 8"
-        d="M17.227,13.425V26.3A1.476,1.476,0,0,0,18.7,27.773H35.9A1.476,1.476,0,0,0,37.37,26.3V13.425A1.476,1.476,0,0,0,35.9,11.953H18.7A1.476,1.476,0,0,0,17.227,13.425ZM24.318,22.8a2.945,2.945,0,1,1,2.75-2.75A2.945,2.945,0,0,1,24.318,22.8Z"
-        transform="translate(1037.983 618.045)"
-        fill="#ffc107"
-      />
-      <path
-        id="Path_11"
-        data-name="Path 11"
-        d="M5.32-55.98h6.385l1.843-9.381c.362-1.679.592-3.357.823-5.069H14.5c.2,1.712.428,3.39.79,5.069l1.942,9.381h6.484L27.5-77.407H22.633L21.185-67.6c-.263,2.205-.56,4.476-.79,6.846h-.132c-.395-2.37-.823-4.674-1.251-6.846L16.84-77.407H12.429L10.191-67.6c-.428,2.238-.856,4.509-1.251,6.846H8.809c-.23-2.337-.494-4.575-.79-6.846L6.669-77.407h-5.2Zm27.121.395a6.846,6.846,0,0,0,4.674-2.041h.132l.362,1.646h4.147v-9.282c0-5.135-2.37-7.472-6.583-7.472a13.31,13.31,0,0,0-7.044,2.139L29.907-67.3a8.75,8.75,0,0,1,4.279-1.382,2.154,2.154,0,0,1,2.5,2.139c-6.451.658-9.117,2.534-9.117,5.99A4.744,4.744,0,0,0,32.441-55.585Zm1.744-3.95c-1.119,0-1.744-.461-1.744-1.415,0-1.152.987-2.041,4.246-2.469v2.6A3.408,3.408,0,0,1,34.186-59.535Zm14.877,3.95a6.783,6.783,0,0,0,2.534-.428l-.592-3.752a2.031,2.031,0,0,1-.592.066c-.395,0-.922-.329-.922-1.382V-78.987H44.422v17.708C44.422-57.856,45.574-55.585,49.063-55.585Zm8.229,0a6.783,6.783,0,0,0,2.534-.428l-.592-3.752a2.031,2.031,0,0,1-.592.066c-.395,0-.922-.329-.922-1.382V-78.987H52.651v17.708C52.651-57.856,53.8-55.585,57.292-55.585Zm10.96,0a10.546,10.546,0,0,0,5.892-1.843L72.5-60.489a7.1,7.1,0,0,1-3.522,1.02,3.764,3.764,0,0,1-4.081-3.16h9.644a11.872,11.872,0,0,0,.2-2.238c0-4.443-2.3-7.867-7.044-7.867-3.917,0-7.735,3.259-7.735,8.558C59.958-58.712,63.578-55.585,68.252-55.585ZM64.829-66.052a3.014,3.014,0,0,1,3-2.831c1.843,0,2.567,1.218,2.567,2.831ZM84.051-55.585a10.546,10.546,0,0,0,5.892-1.843L88.3-60.489a7.1,7.1,0,0,1-3.522,1.02,3.763,3.763,0,0,1-4.081-3.16h9.644a11.872,11.872,0,0,0,.2-2.238c0-4.443-2.3-7.867-7.044-7.867-3.917,0-7.735,3.259-7.735,8.558C75.757-58.712,79.377-55.585,84.051-55.585ZM80.628-66.052a3.014,3.014,0,0,1,3-2.831c1.843,0,2.567,1.218,2.567,2.831ZM91.391-55.98h13.232v-3.983H97.743l6.682-9.644v-2.732H92.181v3.983h5.892l-6.682,9.644Z"
-        transform="translate(1077.475 701.215)"
-        fill="#28a745"
-      />
-    </g>
+    <path
+      id="Exclusion_3"
+      data-name="Exclusion 3"
+      d="M34.753,34.008H4.822a4.773,4.773,0,0,1-3.41-1.423A4.845,4.845,0,0,1,0,29.15V4.858A4.845,4.845,0,0,1,1.412,1.423,4.773,4.773,0,0,1,4.822,0h27.73a3.635,3.635,0,0,1,3.617,3.644,1.211,1.211,0,0,1-1.206,1.214H6.028a1.215,1.215,0,0,0,0,2.429H34.753a3.743,3.743,0,0,1,3.828,3.643V30.364A3.743,3.743,0,0,1,34.753,34.008ZM32.18,25.355a2.429,2.429,0,1,0,2.411,2.429A2.423,2.423,0,0,0,32.18,25.355ZM19.175,16.586h0l2.7,10.088c.218.782.391,1.344.513,1.67a2.119,2.119,0,0,0,.65.878,1.881,1.881,0,0,0,1.242.39,1.852,1.852,0,0,0,1.271-.4,2.251,2.251,0,0,0,.638-.936c.125-.353.284-.919.473-1.682l2.78-11.33a7.273,7.273,0,0,0,.251-1.5,1.476,1.476,0,0,0-.462-1.108,1.569,1.569,0,0,0-1.122-.442,1.379,1.379,0,0,0-1.009.345,1.941,1.941,0,0,0-.49.78,11.837,11.837,0,0,0-.3,1.206L24.12,24.369l-2.473-9.195c-.2-.755-.369-1.3-.49-1.63a2.3,2.3,0,0,0-.655-.912,1.945,1.945,0,0,0-1.328-.419,2.051,2.051,0,0,0-1.333.4,2.33,2.33,0,0,0-.707.953,14.932,14.932,0,0,0-.49,1.607L14.2,24.369l-2.188-9.826a6.8,6.8,0,0,0-.558-1.733,1.282,1.282,0,0,0-1.242-.6,1.553,1.553,0,0,0-1.128.448,1.491,1.491,0,0,0-.456,1.1,6.7,6.7,0,0,0,.251,1.5l2.78,11.33c.085.341.181.709.285,1.1a4.2,4.2,0,0,0,.41,1.022,1.8,1.8,0,0,0,.655.666,2.041,2.041,0,0,0,1.031.235,1.865,1.865,0,0,0,1.242-.4,2.2,2.2,0,0,0,.655-.9c.125-.333.3-.887.507-1.647l2.734-10.088Z"
+      fill="#28a745"
+    />
   </svg>
 </template>
 

components/MetaHead.vue renamed to components/OgMetaHead.vue

@@ -1,8 +1,6 @@
 <template>
   <section v-if="items && items.length && items.length > 0">
-    <h3 class="font-black text-2xl uppercase text-left mb-6">
-      {{ $t('label.topics') }}
-    </h3>
+    <h3 class="font-black text-2xl uppercase text-left mb-6">Topics</h3>
     <nav>
       <ul class="flex flex-wrap md:mb-4 text-left">
         <li
@@ -19,7 +17,12 @@
             border-l-2 border-gray-300
           "
         >
-          <NuxtLink :to="`/article/tag/${item.slug}`">
+          <NuxtLink
+            :to="{
+              name: 'article-tag-slug',
+              params: { slug: item.slug }
+            }"
+          >
             <p
               class="text-gray-500 uppercase tracking-wider font-medium text-ss"
             >

components/Topics.vue

@@ -8,7 +8,11 @@
       >
         <div class="boxed-bottom-content xl:space-y-6" :rel="`card-${index}`">
           <div class="inline-block">
-            <span
+            <Nuxt-Link
+              :to="{
+                name: 'article-category-slug',
+                params: { slug: item.category }
+              }"
               class="
                 px-3
                 py-1
@@ -21,16 +25,15 @@
                 uppercase
                 text-xs
               "
-              >{{ item.category }}</span
             >
+              {{ item.category }}
+            </Nuxt-Link>
           </div>
           <Nuxt-Link
-            :to="
-              localePath({
-                name: 'article-slug',
-                params: { slug: item.slug }
-              })
-            "
+            :to="{
+              name: 'article-slug',
+              params: { slug: item.slug }
+            }"
           >
             <img
               :src="item.img"
@@ -48,12 +51,10 @@
 
           <h4 class="headline text-muted leading-tight">
             <Nuxt-Link
-              :to="
-                localePath({
-                  name: 'article-slug',
-                  params: { slug: item.slug }
-                })
-              "
+              :to="{
+                name: 'article-slug',
+                params: { slug: item.slug }
+              }"
               >{{ item.title }}</Nuxt-Link
             >
           </h4>
@@ -88,12 +89,10 @@
           </div> -->
           <div>
             <Nuxt-Link
-              :to="
-                localePath({
-                  name: 'article-slug',
-                  params: { slug: item.slug }
-                })
-              "
+              :to="{
+                name: 'article-slug',
+                params: { slug: item.slug }
+              }"
               class="btn btn-sm btn-default btn-hidden text-muted"
               ><span class="underline hover:no-underline">read more</span>
               <span>
@@ -109,16 +108,16 @@
 </template>
 
 <script>
-import { fas } from '@fortawesome/free-solid-svg-icons'
+// import { fas } from '@fortawesome/free-solid-svg-icons'
 
 export default {
   props: {
     items: { type: Array, required: true, default: () => [] }
-  },
-  computed: {
-    fas() {
-      return fas
-    }
   }
+  // computed: {
+  //   fas() {
+  //     return fas
+  //   }
+  // }
 }
 </script>

components/cards/Article.vue

@@ -55,18 +55,13 @@
             >
               {{ item.description }}
             </p>
-            <figcaption class="font-medium">
+            <figcaption
+              v-if="item.author && item.author.length > 0"
+              class="font-medium"
+            >
               <div class="text-gray-500 text-sm flex flex-initial">
                 <span class="flex-1"
                   >By:
-                  <!-- <Nuxt-Link
-                    :to="
-                      localePath({
-                        name: 'article-author',
-                        params: { slug: item.author.name }
-                      })
-                    "
-                    > -->
                   <Nuxt-Link :to="`/article/author/${item.author.name}`">
                     {{ item.author.name }}</Nuxt-Link
                   ></span
@@ -78,35 +73,11 @@
               </div>
             </figcaption>
             <div class="relative flex flex-col sm:flex-row sm:space-x-4">
-              <!-- <Nuxt-Link
-                :to="
-                  localePath({
-                    name: 'article-slug',
-                    params: { slug: item.slug }
-                  })
-                "
-                class="
-                  flex
-                  items-center
-                  w-full
-                  px-5
-                  py-2
-                  mb-3
-                  text-lg text-white
-                  bg-indigo-600
-                  rounded-md
-                  sm:mb-0
-                  hover:bg-indigo-700
-                  sm:w-auto
-                "
-              > -->
               <Nuxt-Link
-                :to="
-                  localePath({
-                    name: 'article-slug',
-                    params: { slug: item.slug }
-                  })
-                "
+                :to="{
+                  name: 'article-slug',
+                  params: { slug: item.slug }
+                }"
                 class="
                   flex
                   items-center
@@ -152,12 +123,10 @@
             "
           >
             <Nuxt-Link
-              :to="
-                localePath({
-                  name: 'article-slug',
-                  params: { slug: item.slug }
-                })
-              "
+              :to="{
+                name: 'article-slug',
+                params: { slug: item.slug }
+              }"
             >
               <img
                 :src="item.img"

components/cards/ArticleHeadline.vue

@@ -23,8 +23,8 @@
         <div class="nav-content">
           <nav class="flex flex-row justify-end">
             <a href="#facebook" title="Facebook" class="w-6">
-              <span class="sr-only">Facebook</span
-              ><font-awesome-icon :icon="['fab', 'facebook']" />
+              <span class="sr-only">Facebook</span>
+              <font-awesome-icon :icon="['fab', 'facebook']" />
             </a>
             <a href="#twitter" title="Twitter" class="w-6">
               <span class="sr-only">Twitter</span>

components/footer/Footer.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="block container mx-auto">
       <ColorMode />
-      <Languages class="my-3 block" />
+      <!-- <Languages class="my-3 block" /> -->
     </div>
   </div>
 </template>

components/navigation/Bottom.vue

@@ -11,26 +11,13 @@
             </div>
             <div v-if="items && items.length > 0" class="hidden md:block">
               <div class="ml-10 flex items-baseline">
-                <!-- <NuxtLink
-                  v-for="(item, index) in items"
-                  :key="item.slug"
-                  :to="{ name: 'page-slug', params: { slug: item.slug } }"
-                  :rel="`rel-${index}`"
-                  :class="`${
-                    index === 0
-                      ? `px-3 py-2 text-white bg-gray-900 focus:outline-none focus:text-white`
-                      : `ml-4 px-3 py-2 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white`
-                  } btn`"
-                  > -->
                 <NuxtLink
                   v-for="(item, index) in items"
                   :key="item.slug"
-                  :to="
-                    localePath({
-                      name: 'page-slug',
-                      params: { slug: item.slug }
-                    })
-                  "
+                  :to="{
+                    name: 'page-slug',
+                    params: { slug: item.slug }
+                  }"
                   :rel="`rel-${index}`"
                   :class="`${`ml-4 px-3 py-2 text-gray-400 hover:text-gray-500 focus:text-white capitalize font-bold text-sm`}`"
                 >
@@ -83,6 +70,7 @@
                       w-48
                       rounded-md
                       shadow-lg
+                      z-10
                     "
                   >
                     <div

components/navigation/Top.vue

@@ -1,5 +1,5 @@
 import ROUTES from './routes'
 import CONSTANTS from './constants'
-import I18N from './i18n'
+// import I18N from './i18n'
 
-export { ROUTES, CONSTANTS, I18N }
+export { ROUTES, CONSTANTS /* I18N */ }

config/index.js

@@ -7,7 +7,7 @@ author:
   name: CodeRoad
   bio: Web Developer and Tech Writer
   img: ../img/logo.jpg
-category: StartUp
+category: startup
 tags:
   - web development
   - vuejs