feat: prepare pagination

chore: add vue-a11y

chore: bump tailwindcss / get rid of purgeCSS

chore: bump all dependencies

.eslintrc.js

@@ -2,6 +2,8 @@ module.exports = {
   root: true,
   parserOptions: {
     parser: '@typescript-eslint/parser',
+    project: './tsconfig.json',
+    extraFileExtensions: ['.vue'],
   },
   env: {
     browser: true,
@@ -10,13 +12,14 @@ module.exports = {
   },
   extends: [
     'airbnb-typescript/base',
+    'plugin:vue-a11y/recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:vue/strongly-recommended',
     'prettier',
     'prettier/vue',
     'prettier/@typescript-eslint',
   ],
-  plugins: ['@typescript-eslint', 'prettier', 'vue'],
+  plugins: ['@typescript-eslint', 'vue-a11y', 'prettier', 'vue'],
   // add your custom rules here
   rules: {
     'prettier/prettier': ['error', { singleQuote: true, trailingComma: 'es5', printWidth: 100 }],

app/components/partials/header.vue

@@ -7,7 +7,7 @@
     </div>
 
     <nav class="nav ml-auto">
-      <ul class=" flex flex-row items-center sm:mt-4 sm:pt-4 md:mt-0 md:pt-0 md:mr-4 lg:mr-8">
+      <ul class="flex flex-row items-center sm:mt-4 sm:pt-4 md:mt-0 md:pt-0 md:mr-4 lg:mr-8">
         <li>
           <nuxt-link to="/blog" class="block font-medium px-4 py-1 md:p-2 lg:px-4">
             Blog

app/pages/blog/index.vue

@@ -12,6 +12,7 @@
         <div class="post">
           <nuxt-link :to="`/blog/${post.slug}`">
             <img
+              :alt="post.title"
               class="w-full"
               :src="post.featuredImage || 'https://source.unsplash.com/random/640x340'"
             />
@@ -36,6 +37,23 @@ import { Component, Vue } from 'vue-property-decorator';
 import { MetaInfo } from 'vue-meta';
 
 @Component({
+  async asyncData({ params, store }) {
+    const page: number = params.page ? parseInt(params.page, 10) : 1;
+    const { perPage }: { perPage: number } = store.state;
+    const range = page * perPage;
+
+    const posts = store.state.posts.filter((post, index) => {
+      const indexPage = index + 1;
+      return range - perPage < indexPage && indexPage <= range;
+    });
+
+    return {
+      currentPage: page,
+      totalPages: Math.ceil(store.state.posts / perPage),
+      posts: posts || [],
+    };
+  },
+
   head(): MetaInfo {
     return {
       title: 'Blog',
@@ -50,8 +68,13 @@ import { MetaInfo } from 'vue-meta';
   },
 })
 export default class BlogIndex extends Vue {
-  get posts(): Post[] {
-    return [...this.$store.state.posts];
+  currentPage!: number;
+
+  posts: Post[] = [];
+
+  handlePagination(value): void {
+    const path = value === 1 ? '/blog' : `/blog/page/${value}`;
+    this.$router.push(path);
   }
 }
 </script>

app/pages/blog/page/_page.vue

@@ -0,0 +1,7 @@
+<script>
+import Blog from '../index.vue';
+
+export default {
+  extends: Blog,
+};
+</script>

app/pages/index.vue

@@ -34,7 +34,11 @@
         </div>
       </div>
       <div class="flex flex-col w-full xl:w-2/5">
-        <img class="rounded shadow-xl" src="https://source.unsplash.com/random/720x400" />
+        <img
+          alt="Hero"
+          class="rounded shadow-xl"
+          src="https://source.unsplash.com/random/720x400"
+        />
       </div>
     </div>
   </section>
@@ -65,7 +69,7 @@ export default class Home extends Vue {
 
   encode(data): string {
     return Object.keys(data)
-      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
+      .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
       .join('&');
   }
 

app/store/index.ts

@@ -4,13 +4,15 @@ import Vue from 'vue';
 import { getContent } from '@/utils';
 
 export interface State {
+  perPage: number;
   pages: Page[];
   posts: Post[];
   route?: Route;
 }
 
 // Initial State
 export const appState = {
+  perPage: 4,
   pages: [],
   posts: [],
 };

app/utils.ts

@@ -1,8 +1,5 @@
 export function createExcerpt({ text, length = 150 }: { text: string; length?: number }): string {
-  return text
-    .split('', length)
-    .concat(['...'])
-    .join('');
+  return text.split('', length).concat(['...']).join('');
 }
 
 export async function getContent({ context, prefix }): Promise<{ slug: string; title: string }[]> {

nuxt.config.ts

@@ -76,9 +76,6 @@ const nuxtConfig: Configuration = {
    */
   modules: ['@nuxtjs/pwa', '@nuxtjs/style-resources', '@nuxtjs/markdownit'],
 
-  purgeCSS: {
-    whitelist: [/.*-(enter|enter-active|enter-to|leave|leave-active|leave-to)/],
-  },
 
   markdownit: {
     preset: 'default',

package.json

@@ -27,47 +27,49 @@
     "not dead"
   ],
   "dependencies": {
-    "@nuxt/typescript-runtime": "^0.3.8",
-    "@nuxtjs/eslint-module": "^1.1.0",
-    "@nuxtjs/markdownit": "^1.2.7",
-    "@nuxtjs/pwa": "^3.0.0-beta.19",
+    "@nuxt/typescript-runtime": "^0.4.6",
+    "@nuxtjs/eslint-module": "^2.0.0",
+    "@nuxtjs/markdownit": "^1.2.9",
+    "@nuxtjs/pwa": "^3.0.0-beta.20",
     "@nuxtjs/style-resources": "^1.0.0",
-    "fast-glob": "^3.1.1",
-    "nuxt": "^2.11.0",
-    "ts-node": "^8.6.2",
-    "vue-property-decorator": "^8.3.0"
+    "fast-glob": "^3.2.2",
+    "nuxt": "^2.12.2",
+    "ts-node": "^8.10.1",
+    "vue-property-decorator": "^8.4.2"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.3",
-    "@babel/runtime-corejs2": "^7.8.3",
+    "@babel/helper-call-delegate": "^7.8.7",
+    "@babel/plugin-transform-runtime": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/runtime-corejs2": "^7.9.6",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@nuxt/typescript-build": "^0.5.6",
-    "@nuxtjs/tailwindcss": "^1.3.1",
-    "@types/node": "^13.5.1",
-    "@typescript-eslint/eslint-plugin": "^2.18.0",
-    "@typescript-eslint/parser": "^2.18.0",
-    "@vue/test-utils": "^1.0.0-beta.31",
-    "babel-eslint": "^10.0.3",
+    "@nuxt/typescript-build": "^0.6.6",
+    "@nuxtjs/tailwindcss": "^2.0.0",
+    "@types/node": "^13.13.5",
+    "@typescript-eslint/eslint-plugin": "^2.31.0",
+    "@typescript-eslint/parser": "^2.31.0",
+    "@vue/test-utils": "^1.0.2",
+    "babel-eslint": "^10.1.0",
     "core-js": "2.6.9",
-    "cross-env": "^7.0.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-typescript": "^6.3.1",
-    "eslint-config-prettier": "^6.10.0",
+    "cross-env": "^7.0.2",
+    "eslint": "^7.0.0",
+    "eslint-config-airbnb-typescript": "^7.2.1",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-import-resolver-webpack": "^0.12.1",
-    "eslint-plugin-import": "^2.20.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-vue": "^6.1.2",
-    "husky": "^4.2.1",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue-a11y": "^0.0.31",
+    "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^25.1.0",
+    "jest": "^26.0.1",
     "jest-serializer-vue": "^2.0.2",
     "jest-static-stubs": "0.0.1",
-    "node-sass": "^4.13.1",
-    "prettier": "^1.19.1",
+    "node-sass": "^4.14.1",
+    "prettier": "^2.0.5",
     "sass-loader": "^8.0.2",
-    "ts-jest": "^25.0.0",
+    "ts-jest": "^25.5.1",
     "vue-jest": "^4.0.0-beta.2"
   }
 }

tsconfig.json

@@ -1,11 +1,12 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "es2018",
     "module": "esnext",
     "moduleResolution": "node",
     "lib": ["esnext", "esnext.asynciterable", "dom"],
     "esModuleInterop": true,
     "experimentalDecorators": true,
+    "resolveJsonModule": true,
     "allowJs": true,
     "sourceMap": true,
     "strict": true,
@@ -15,13 +16,12 @@
     "noImplicitReturns": true,
     "noUnusedLocals": true,
     "skipLibCheck": true,
-    "resolveJsonModule": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"],
       "@/*": ["./app/*"]
     },
-    "types": ["@types/node", "@nuxt/types"]
+    "types": ["@types/node", "@types/jest", "@nuxt/types"]
   },
   "include": ["./app/**/*.ts", "./app/**/*.vue"],
   "exclude": ["node_modules"]