Updates

Author: devcoderoad

assets/css/tailwind.css

@@ -39,10 +39,35 @@ body {
   @apply min-h-screen flex justify-center items-center text-center mx-auto text-white;
 }
 
+/* themes */
+
 .btn {
-  @apply rounded-full text-sm font-medium capitalize focus:to-gray-700 px-5;
+  @apply rounded-full text-sm font-light mt-2 px-3 py-1 capitalize text-gray-400 hover:text-gray-700 focus:to-gray-900 hover:border-gray-700;
 }
 
 .btn-xs {
-  @apply rounded-full text-xs font-medium capitalize focus:to-gray-700 px-2;
+  @apply rounded-full text-xs px-2;
+}
+
+.btn-lg {
+  @apply text-lg px-5 uppercase;
+}
+
+.btn-outline {
+  @apply border border-gray-400;
+}
+
+/* forms */
+
+form {
+  @apply my-4;
+}
+
+input,
+textarea {
+  @apply text-gray-400 border border-gray-400 px-2 py-1 focus:text-gray-500 hover:border-gray-700;
+}
+
+label {
+  @apply inline-block my-2;
 }

components/cards/Article.vue

@@ -1,11 +1,14 @@
 <template>
-  <div v-if="items && items.length > 0" class="lg:container mx-auto my-12">
-    <div class="row">
+  <div class="lg:container mx-auto">
+    <div
+      v-if="items && items.length > 0"
+      class="mx-auto my-12 lg:flex space-x-4"
+    >
       <Nuxt-Link
         v-for="(item, index) in items"
         :key="item.slug"
         :to="localePath({ name: 'article-slug', params: { slug: item.slug } })"
-        class="col-12 mb-4 shadow-lg hover:shadow-xl"
+        class="mb-4 shadow-lg hover:shadow-xl lg:flex-1"
       >
         <figure class="md:flex bg-gray-100 p-8 md:p-0" :rel="`card-${index}`">
           <img
@@ -25,12 +28,15 @@
           <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
             <blockquote>
               <p class="text-lg font-semibold">
-                {{ item.description }}
+                {{ item.description.slice(0, 50) }}...
               </p>
             </blockquote>
             <figcaption class="font-medium">
               <div class="text-cyan-600">{{ item.author.name }}</div>
-              <div class="text-gray-500">Posted: {{ item.createdAt }}</div>
+              <div class="text-gray-500">
+                Posted:
+                {{ $dateFns.format(item.createdAt, 'MMMM dd, yyyy') }}
+              </div>
             </figcaption>
           </div>
         </figure>

components/cards/ArticleHeadline.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="item" class="lg:container mx-auto my-12">
-    <div class="row">
+  <div v-if="items && items.length" class="lg:container mx-auto my-12">
+    <div v-for="item in items" :key="item.slug" class="row">
       <Nuxt-Link
         :to="localePath({ name: 'article-slug', params: { slug: item.slug } })"
         class="col-12 mb-4 shadow-lg hover:shadow-xl"
@@ -31,7 +31,10 @@
               <div class="text-cyan-600">
                 {{ item.author && item.author.name }}
               </div>
-              <div class="text-gray-500">Posted: {{ item.createdAt }}</div>
+              <div class="text-gray-500">
+                Posted:
+                {{ $dateFns.format(item.createdAt, 'MMMM dd, yyyy') }}
+              </div>
             </figcaption>
           </div>
         </figure>
@@ -43,7 +46,7 @@
 <script>
 export default {
   props: {
-    item: { type: Object, required: true, default: () => {} }
+    items: { type: Array, required: true, default: () => [] }
   }
 }
 </script>

components/global/Languages.vue

@@ -29,6 +29,7 @@
     "@nuxt/content": "^1.14.0",
     "@nuxtjs/color-mode": "^2.0.5",
     "@nuxtjs/date-fns": "^1.5.0",
+    "@nuxtjs/device": "^2.1.0",
     "@nuxtjs/eslint-config": "^5.0.0",
     "@nuxtjs/eslint-module": "^3.0.2",
     "@nuxtjs/stylelint-module": "4.0.0",

package.json

@@ -1,39 +1,26 @@
 <template>
   <div>
     <Header />
-    <CardsArticleHeadline :item="storeArticle" />
-    <CardsArticle :items="storeArticles" />
+    <CardsArticleHeadline :items="articleHeadlines" />
+    <CardsArticle :items="articles" />
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
-
 export default {
-  async fetch({ app, params, store, store: { dispatch, getters } }) {
-    const lang =
-      app.i18n.locale === app.i18n.defaultLocale ? '' : app.i18n.locale
-
-    await dispatch('article/list/getList', { status: 'publish' })
-    await dispatch('article/listQuery/getListQuery', {
-      where: { headline: true },
-      limit: 1
-    })
-
-    await dispatch('article/detail/getDetail', {
-      where: { headline: true },
-      lang
-    })
-  },
-  computed: {
-    ...mapState({
-      storeArticles: (state) => state.article.list.data,
-      storeArticle: (state) => state.article.detail.data,
-      storeArticleLatest: (state) => state.article.listQuery.data
-    })
-  },
-  mounted() {
-    // console.log(this.storeArticle)
+  async asyncData({ $content }) {
+    const articles = await $content('articles')
+      .where({ headline: { $ne: true } })
+      .limit(10)
+      .fetch()
+    const articleHeadlines = await $content('articles')
+      .where({ headline: true })
+      .limit(4)
+      .fetch()
+    return {
+      articles,
+      articleHeadlines
+    }
   }
 }
 </script>

pages/index.vue

@@ -35,17 +35,21 @@ const mutations = {
 // top level actions
 const actions = {
   async nuxtServerInit({ commit, context }, { req }) {
-    commit('GET_MENU', 'loading')
-    const storeItems = await this.$content('pages')
-      .only(['title', 'slug'])
-      .where({ slug: { $ne: 'home' }, showInMenu: true, status: 'publish' })
-      .sortBy('indexOrder', 'asc')
-      .limit(5)
-      .fetch()
-      .catch((err) => {
-        commit('SET_MENU_ERROR', err)
-      })
-    commit('SET_MENU', storeItems)
+    try {
+      commit('GET_MENU', 'loading')
+      const storeItems = await this.$content('pages')
+        .only(['title', 'slug'])
+        .where({ slug: { $ne: 'home' }, showInMenu: true, status: 'publish' })
+        .sortBy('indexOrder', 'asc')
+        .limit(5)
+        .fetch()
+        .catch((err) => {
+          commit('SET_MENU_ERROR', err)
+        })
+      commit('SET_MENU', storeItems)
+    } catch (error) {
+      commit('SET_MENU_ERROR', error)
+    }
   }
 }
 

store/article/detail.js

@@ -1672,6 +1672,13 @@
   dependencies:
     date-fns "^2.19.0"
 
+"@nuxtjs/device@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/device/-/device-2.1.0.tgz#552c668b2d82dc982d18429845777c19d48d87d6"
+  integrity sha512-TYBdt1w2bmCCWp+MhgcBATZtqyUBi3nSdNpcLGILw5USLwCsC/yZtIkq9YisuEzuRnod9w/RZpoE80MxLftEuA==
+  dependencies:
+    defu "^3.2.2"
+
 "@nuxtjs/eslint-config@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@nuxtjs/eslint-config/-/eslint-config-5.0.0.tgz#d66143ee4ada9d944de0bfbe2d7e4693a2e20d60"