├── example.env
├── .prettierrc
├── static
    ├── favicon.ico
    └── README.md
├── assets
    ├── fonts
    │   ├── open-sans-v18-latin-600.woff
    │   ├── open-sans-v18-latin-600.woff2
    │   ├── open-sans-v18-latin-regular.woff
    │   └── open-sans-v18-latin-regular.woff2
    ├── README.md
    └── css
    │   └── main.css
├── pages
    ├── articles
    │   ├── index.vue
    │   ├── page
    │   │   └── _page.vue
    │   └── _slug.vue
    ├── README.md
    ├── index.vue
    └── tags
    │   ├── index.vue
    │   └── _tag.vue
├── components
    ├── README.md
    ├── svg
    │   ├── Coffee.vue
    │   ├── SingleBack.vue
    │   ├── SingleFwd.vue
    │   ├── RSS.vue
    │   ├── DoubleBack.vue
    │   ├── Twitter.vue
    │   ├── DoubleFwd.vue
    │   └── Github.vue
    ├── Footer.vue
    ├── PrevNext.vue
    ├── Header.vue
    ├── ArticleList.vue
    └── Pagination.vue
├── utils
    ├── getRoutes.js
    ├── global.js
    ├── getContent.js
    └── getSiteMeta.js
├── .editorconfig
├── layouts
    ├── README.md
    └── default.vue
├── plugins
    └── README.md
├── middleware
    └── README.md
├── .eslintrc.js
├── README.md
├── store
    └── README.md
├── tailwind.config.js
├── package.json
├── content
    └── articles
    │   ├── article-1.md
    │   ├── article-2.md
    │   ├── article-3.md
    │   ├── article-4.md
    │   ├── article-5.md
    │   ├── hello.md
    │   └── kitchen-sink.md
├── .gitignore
└── nuxt.config.js


/example.env:
--------------------------------------------------------------------------------
1 | BASE_URL=https://www.example.com


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": true,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/garethredfern/nuxt-basic-blog/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/assets/fonts/open-sans-v18-latin-600.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/garethredfern/nuxt-basic-blog/HEAD/assets/fonts/open-sans-v18-latin-600.woff


--------------------------------------------------------------------------------
/assets/fonts/open-sans-v18-latin-600.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/garethredfern/nuxt-basic-blog/HEAD/assets/fonts/open-sans-v18-latin-600.woff2


--------------------------------------------------------------------------------
/assets/fonts/open-sans-v18-latin-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/garethredfern/nuxt-basic-blog/HEAD/assets/fonts/open-sans-v18-latin-regular.woff


--------------------------------------------------------------------------------
/assets/fonts/open-sans-v18-latin-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/garethredfern/nuxt-basic-blog/HEAD/assets/fonts/open-sans-v18-latin-regular.woff2


--------------------------------------------------------------------------------
/pages/articles/index.vue:
--------------------------------------------------------------------------------
1 | <script>
2 | export default {
3 |   middleware({ redirect }) {
4 |     return redirect('301', '/articles/page/1');
5 |   },
6 | };
7 | </script>
8 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/utils/getRoutes.js:
--------------------------------------------------------------------------------
1 | export default async () => {
2 |   const { $content } = require('@nuxt/content');
3 |   const files = await $content({ deep: true }).only(['path']).fetch();
4 | 
5 |   return files.map((file) => (file.path === '/index' ? '/' : file.path));
6 | };
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true,
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint',
 9 |   },
10 |   extends: [
11 |     '@nuxtjs',
12 |     'prettier',
13 |     'prettier/vue',
14 |     'plugin:prettier/recommended',
15 |     'plugin:nuxt/recommended',
16 |   ],
17 |   plugins: ['prettier'],
18 |   // add your custom rules here
19 |   rules: {},
20 | };
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-basic-blog
 2 | 
 3 | ## Build Setup
 4 | 
 5 | ```bash
 6 | # install dependencies
 7 | $ npm install
 8 | 
 9 | # serve with hot reload at localhost:3000
10 | $ npm run dev
11 | 
12 | # build for production and launch server
13 | $ npm run build
14 | $ npm run start
15 | 
16 | # generate static project
17 | $ npm run generate
18 | ```
19 | 
20 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
21 | 


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/components/svg/Coffee.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     class="fill-current w-5 h-5"
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     viewBox="0 0 20 20"
 6 |   >
 7 |     <title>Buy Me a Coffee</title>
 8 |     <path
 9 |       d="M4 11H2a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h2V1h14v10a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4zm0-2V5H2v4h2zm-2 8v-1h18v1l-4 2H6l-4-2z"
10 |     />
11 |   </svg>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'Coffee',
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="bg-black text-white">
 3 |     <div class="container mx-auto p-4 text-center">
 4 |       <small>&copy; {{ new Date().getFullYear() }} {{ siteName }}</small>
 5 |     </div>
 6 |   </footer>
 7 | </template>
 8 | 
 9 | <script>
10 | import global from '@/utils/global';
11 | 
12 | export default {
13 |   name: 'Footer',
14 |   computed: {
15 |     siteName() {
16 |       return global.siteName;
17 |     },
18 |   },
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Header />
 4 |     <main class="bg-gray-100 pt-5">
 5 |       <div class="container mx-auto p-4">
 6 |         <Nuxt />
 7 |       </div>
 8 |     </main>
 9 | 
10 |     <Footer />
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import Header from '@/components/Header';
16 | import Footer from '@/components/Footer';
17 | 
18 | export default {
19 |   name: 'MainLayout',
20 |   components: {
21 |     Header,
22 |     Footer,
23 |   },
24 | };
25 | </script>
26 | 


--------------------------------------------------------------------------------
/components/svg/SingleBack.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     class="fill-current w-5 h-5"
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     viewBox="0 0 20 20"
 6 |   >
 7 |     <title>Back</title>
 8 |     <path
 9 |       fill-rule="evenodd"
10 |       d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
11 |       clip-rule="evenodd"
12 |     />
13 |   </svg>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: 'SingleBack',
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/components/svg/SingleFwd.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     class="fill-current w-5 h-5"
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     viewBox="0 0 20 20"
 6 |   >
 7 |     <title>Forward</title>
 8 |     <path
 9 |       fill-rule="evenodd"
10 |       d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
11 |       clip-rule="evenodd"
12 |     />
13 |   </svg>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: 'SingleFwd',
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/components/svg/RSS.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     class="fill-current w-5 h-5"
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     viewBox="0 0 20 20"
 6 |   >
 7 |     <title>RSS Feed</title>
 8 |     <path
 9 |       d="M5 3a1 1 0 000 2c5.523 0 10 4.477 10 10a1 1 0 102 0C17 8.373 11.627 3 5 3z"
10 |     />
11 |     <path
12 |       d="M4 9a1 1 0 011-1 7 7 0 017 7 1 1 0 11-2 0 5 5 0 00-5-5 1 1 0 01-1-1zM3 15a2 2 0 114 0 2 2 0 01-4 0z"
13 |     />
14 |   </svg>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: 'RSS',
20 | };
21 | </script>
22 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ArticleList :articles="paginatedArticles" :total="allArticles.length" />
 3 | </template>
 4 | 
 5 | <script>
 6 | import getContent from '@/utils/getContent';
 7 | import ArticleList from '@/components/ArticleList';
 8 | 
 9 | export default {
10 |   name: 'HomePage',
11 |   components: {
12 |     ArticleList,
13 |   },
14 |   async asyncData({ $content, app, params, error }) {
15 |     const content = await getContent($content, params, error);
16 |     return {
17 |       allArticles: content.allArticles,
18 |       paginatedArticles: content.paginatedArticles,
19 |     };
20 |   },
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/components/svg/DoubleBack.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     class="fill-current w-5 h-5"
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     viewBox="0 0 20 20"
 6 |   >
 7 |     <title>First Page</title>
 8 |     <path
 9 |       fill-rule="evenodd"
10 |       d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z"
11 |       clip-rule="evenodd"
12 |     />
13 |   </svg>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: 'DoubleBack',
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/utils/global.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   these are the global variables, make sure to change them for yours
 3 |   you can add anything you like here, just import this file and
 4 |   access any variable via object syntax global.yourVarName
 5 | */
 6 | export default {
 7 |   siteUrl: 'https://example.com',
 8 |   siteName: 'Starter Blog',
 9 |   author: 'Joe Blogs',
10 |   twitterHandle: '@joeblogs',
11 |   twitterURL: 'https://twitter.com/garethredfern',
12 |   githubURL: 'https://github.com/garethredfern',
13 |   siteTitle: 'Add Your Main Site Title Here',
14 |   siteDesc:
15 |     'A description for your site here, this will show on the home page.',
16 |   mainImage: '',
17 |   siteType: 'website',
18 | };
19 | 


--------------------------------------------------------------------------------
/components/svg/Twitter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     class="fill-current w-5 h-5"
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     viewBox="0 0 20 20"
 6 |   >
 7 |     <title>Twitter</title>
 8 |     <path
 9 |       d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"
10 |     ></path>
11 |   </svg>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'Twitter',
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/components/svg/DoubleFwd.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     class="fill-current w-5 h-5"
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     viewBox="0 0 20 20"
 6 |   >
 7 |     <title>Last Page</title>
 8 |     <path
 9 |       fill-rule="evenodd"
10 |       d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z"
11 |       clip-rule="evenodd"
12 |     />
13 |     <path
14 |       fill-rule="evenodd"
15 |       d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z"
16 |       clip-rule="evenodd"
17 |     />
18 |   </svg>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   name: 'DoubleFwd',
24 | };
25 | </script>
26 | 


--------------------------------------------------------------------------------
/components/svg/Github.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     class="fill-current w-5 h-5"
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     viewBox="0 0 20 20"
 6 |   >
 7 |     <title>GitHub</title>
 8 |     <path
 9 |       d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"
10 |     ></path>
11 |   </svg>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'Github',
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme');
 2 | /*
 3 |  ** TailwindCSS Configuration File
 4 |  **
 5 |  ** Docs: https://tailwindcss.com/docs/configuration
 6 |  ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
 7 |  */
 8 | module.exports = {
 9 |   theme: {
10 |     extend: {
11 |       fontFamily: {
12 |         sans: ['Open Sans', ...defaultTheme.fontFamily.sans],
13 |       },
14 |     },
15 |   },
16 |   variants: {},
17 |   plugins: [require('@tailwindcss/ui'), require('@tailwindcss/typography')],
18 |   purge: {
19 |     // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
20 |     enabled: process.env.NODE_ENV === 'production',
21 |     content: [
22 |       'components/**/*.vue',
23 |       'layouts/**/*.vue',
24 |       'pages/**/*.vue',
25 |       'plugins/**/*.js',
26 |       'nuxt.config.js',
27 |     ],
28 |   },
29 | };
30 | 


--------------------------------------------------------------------------------
/components/PrevNext.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="prev || next" class="flex justify-between">
 3 |     <NuxtLink
 4 |       v-if="prev"
 5 |       :to="{ name: 'articles-slug', params: { slug: prev.slug } }"
 6 |       :class="linkStyles"
 7 |     >
 8 |       {{ prev.title }}
 9 |     </NuxtLink>
10 |     <span v-else>&nbsp;</span>
11 |     <NuxtLink
12 |       v-if="next"
13 |       :to="{ name: 'articles-slug', params: { slug: next.slug } }"
14 |       :class="linkStyles"
15 |     >
16 |       {{ next.title }}
17 |     </NuxtLink>
18 |     <span v-else>&nbsp;</span>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   name: 'PrevNext',
25 |   props: {
26 |     prev: {
27 |       type: Object,
28 |       default: null,
29 |     },
30 |     next: {
31 |       type: Object,
32 |       default: null,
33 |     },
34 |   },
35 |   computed: {
36 |     linkStyles() {
37 |       return 'bg-indigo-400 text-white px-4 py-1 hover:bg-indigo-500 transform duration-500 ease-in-out';
38 |     },
39 |   },
40 | };
41 | </script>
42 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-basic-blog",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "nuxt",
 7 |     "build": "nuxt build",
 8 |     "start": "nuxt start",
 9 |     "generate": "nuxt generate",
10 |     "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
11 |     "lint": "npm run lint:js"
12 |   },
13 |   "dependencies": {
14 |     "@nuxt/content": "^1.9.0",
15 |     "@nuxtjs/feed": "^2.0.0",
16 |     "@nuxtjs/sitemap": "^2.4.0",
17 |     "@tailwindcss/typography": "^0.2.0",
18 |     "@tailwindcss/ui": "^0.5.0",
19 |     "nuxt": "^2.14.5",
20 |     "prism-themes": "^1.4.0",
21 |     "core-js": "^3.6.5"
22 |   },
23 |   "devDependencies": {
24 |     "@nuxtjs/eslint-config": "^3.1.0",
25 |     "@nuxtjs/eslint-module": "^2.0.0",
26 |     "@nuxtjs/tailwindcss": "^3.0.2",
27 |     "babel-eslint": "^10.1.0",
28 |     "eslint": "^7.8.1",
29 |     "eslint-config-prettier": "^6.11.0",
30 |     "eslint-plugin-nuxt": "^1.0.0",
31 |     "eslint-plugin-prettier": "^3.1.4",
32 |     "prettier": "^2.1.1"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
 1 | .page-enter-active,
 2 | .page-leave-active {
 3 |   transition: opacity 0.5s;
 4 | }
 5 | .page-enter,
 6 | .page-leave-to {
 7 |   opacity: 0;
 8 | }
 9 | 
10 | /* open-sans-regular - latin */
11 | @font-face {
12 |   font-family: 'Open Sans';
13 |   font-style: normal;
14 |   font-weight: 400;
15 |   src: local('Open Sans Regular'), local('OpenSans-Regular'),
16 |     url('../fonts/open-sans-v18-latin-regular.woff2') format('woff2'),
17 |     /* Chrome 26+, Opera 23+, Firefox 39+ */
18 |       url('../fonts/open-sans-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
19 | }
20 | 
21 | /* open-sans-600 - latin */
22 | @font-face {
23 |   font-family: 'Open Sans';
24 |   font-style: normal;
25 |   font-weight: 600;
26 |   src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
27 |     url('../fonts/open-sans-v18-latin-600.woff2') format('woff2'),
28 |     /* Chrome 26+, Opera 23+, Firefox 39+ */
29 |       url('../fonts/open-sans-v18-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
30 | }
31 | 


--------------------------------------------------------------------------------
/content/articles/article-1.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Article One
 3 | description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 4 | image: 'https://res.cloudinary.com/redfern-web/image/upload/v1599840408/redfern-dev/png/nuxt.png'
 5 | tags: ['VueJS', 'Nuxt']
 6 | published: '2020-09-01'
 7 | ---
 8 | 
 9 | ## Getting started
10 | 
11 | Empower your NuxtJS application with `@nuxtjs/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
12 | 
13 | ## Writing content
14 | 
15 | Learn how to write your `content/`, supporting Markdown, YAML, CSV and JSON: https://content.nuxtjs.org/writing.
16 | 
17 | ## Fetching content
18 | 
19 | Learn how to fetch your content with `$content`: https://content.nuxtjs.org/fetching.
20 | 
21 | ## Displaying content
22 | 
23 | Learn how to display your Markdown content with the `<nuxt-content>` component directly in your template: https://content.nuxtjs.org/displaying.
24 | 


--------------------------------------------------------------------------------
/content/articles/article-2.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Article Two
 3 | description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 4 | image: 'https://res.cloudinary.com/redfern-web/image/upload/v1599840408/redfern-dev/png/nuxt.png'
 5 | tags: ['VueJS', 'Nuxt']
 6 | published: '2020-09-02'
 7 | ---
 8 | 
 9 | ## Getting started
10 | 
11 | Empower your NuxtJS application with `@nuxtjs/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
12 | 
13 | ## Writing content
14 | 
15 | Learn how to write your `content/`, supporting Markdown, YAML, CSV and JSON: https://content.nuxtjs.org/writing.
16 | 
17 | ## Fetching content
18 | 
19 | Learn how to fetch your content with `$content`: https://content.nuxtjs.org/fetching.
20 | 
21 | ## Displaying content
22 | 
23 | Learn how to display your Markdown content with the `<nuxt-content>` component directly in your template: https://content.nuxtjs.org/displaying.
24 | 


--------------------------------------------------------------------------------
/content/articles/article-3.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Article Three
 3 | description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 4 | image: 'https://res.cloudinary.com/redfern-web/image/upload/v1599840408/redfern-dev/png/nuxt.png'
 5 | tags: ['VueJS', 'Nuxt']
 6 | published: '2020-09-03'
 7 | ---
 8 | 
 9 | ## Getting started
10 | 
11 | Empower your NuxtJS application with `@nuxtjs/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
12 | 
13 | ## Writing content
14 | 
15 | Learn how to write your `content/`, supporting Markdown, YAML, CSV and JSON: https://content.nuxtjs.org/writing.
16 | 
17 | ## Fetching content
18 | 
19 | Learn how to fetch your content with `$content`: https://content.nuxtjs.org/fetching.
20 | 
21 | ## Displaying content
22 | 
23 | Learn how to display your Markdown content with the `<nuxt-content>` component directly in your template: https://content.nuxtjs.org/displaying.
24 | 


--------------------------------------------------------------------------------
/content/articles/article-4.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Article Four
 3 | description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 4 | image: 'https://res.cloudinary.com/redfern-web/image/upload/v1599840408/redfern-dev/png/nuxt.png'
 5 | tags: ['VueJS', 'Nuxt']
 6 | published: '2020-09-04'
 7 | ---
 8 | 
 9 | ## Getting started
10 | 
11 | Empower your NuxtJS application with `@nuxtjs/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
12 | 
13 | ## Writing content
14 | 
15 | Learn how to write your `content/`, supporting Markdown, YAML, CSV and JSON: https://content.nuxtjs.org/writing.
16 | 
17 | ## Fetching content
18 | 
19 | Learn how to fetch your content with `$content`: https://content.nuxtjs.org/fetching.
20 | 
21 | ## Displaying content
22 | 
23 | Learn how to display your Markdown content with the `<nuxt-content>` component directly in your template: https://content.nuxtjs.org/displaying.
24 | 


--------------------------------------------------------------------------------
/content/articles/article-5.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Article Five
 3 | description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 4 | image: 'https://res.cloudinary.com/redfern-web/image/upload/v1599840408/redfern-dev/png/nuxt.png'
 5 | tags: ['VueJS', 'Nuxt']
 6 | published: '2020-09-05'
 7 | ---
 8 | 
 9 | ## Getting started
10 | 
11 | Empower your NuxtJS application with `@nuxtjs/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
12 | 
13 | ## Writing content
14 | 
15 | Learn how to write your `content/`, supporting Markdown, YAML, CSV and JSON: https://content.nuxtjs.org/writing.
16 | 
17 | ## Fetching content
18 | 
19 | Learn how to fetch your content with `$content`: https://content.nuxtjs.org/fetching.
20 | 
21 | ## Displaying content
22 | 
23 | Learn how to display your Markdown content with the `<nuxt-content>` component directly in your template: https://content.nuxtjs.org/displaying.
24 | 


--------------------------------------------------------------------------------
/content/articles/hello.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Getting started
 3 | description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.'
 4 | image: 'https://res.cloudinary.com/redfern-web/image/upload/v1599840408/redfern-dev/png/nuxt.png'
 5 | tags: ['VueJS', 'Nuxt']
 6 | published: '2020-08-01'
 7 | ---
 8 | 
 9 | ## Getting started
10 | 
11 | Empower your NuxtJS application with `@nuxtjs/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**.
12 | 
13 | ## Writing content
14 | 
15 | Learn how to write your `content/`, supporting Markdown, YAML, CSV and JSON: https://content.nuxtjs.org/writing.
16 | 
17 | ## Fetching content
18 | 
19 | Learn how to fetch your content with `$content`: https://content.nuxtjs.org/fetching.
20 | 
21 | ## Displaying content
22 | 
23 | Learn how to display your Markdown content with the `<nuxt-content>` component directly in your template: https://content.nuxtjs.org/displaying.
24 | 


--------------------------------------------------------------------------------
/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="bg-black text-white px-4 py-2">
 3 |     <div class="container mx-auto p-4">
 4 |       <div class="flex justify-between items-center">
 5 |         <h1 class="uppercase font-bold">
 6 |           <a href="/" class="hover:no-underline">Nuxt Basic Blog</a>
 7 |         </h1>
 8 |         <div class="flex">
 9 |           <a
10 |             href="/articles/rss.xml"
11 |             target="_blank"
12 |             class="hover:no-underline mx-2"
13 |           >
14 |             <RSS />
15 |           </a>
16 |           <a href="" target="_blank" class="hover:no-underline mx-2">
17 |             <Twitter />
18 |           </a>
19 |           <a href="" target="_blank" class="hover:no-underline mx-2">
20 |             <Github />
21 |           </a>
22 |         </div>
23 |       </div>
24 |     </div>
25 |   </header>
26 | </template>
27 | 
28 | <script>
29 | import RSS from '@/components/svg/RSS';
30 | import Github from '@/components/svg/Github';
31 | import Twitter from '@/components/svg/Twitter';
32 | 
33 | export default {
34 |   name: 'Header',
35 |   components: { Twitter, Github, RSS },
36 | };
37 | </script>
38 | 


--------------------------------------------------------------------------------
/pages/articles/page/_page.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="flex justify-center">
 4 |       <h2
 5 |         class="text-center text-3xl mb-4 uppercase bg-black text-white inline-block mx-auto px-2"
 6 |       >
 7 |         All Articles ({{ allArticles.length }})
 8 |       </h2>
 9 |     </div>
10 |     <ArticleList :articles="paginatedArticles" :total="allArticles.length" />
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import getContent from '@/utils/getContent';
16 | import ArticleList from '@/components/ArticleList';
17 | 
18 | export default {
19 |   name: 'ArticleListPage',
20 |   components: {
21 |     ArticleList,
22 |   },
23 |   async asyncData({ $content, app, params, error }) {
24 |     const content = await getContent($content, params, error);
25 |     return {
26 |       allArticles: content.allArticles,
27 |       paginatedArticles: content.paginatedArticles,
28 |     };
29 |   },
30 |   head() {
31 |     return {
32 |       title: `Articles Page ${this.$route.params.page} - Learning Laravel and VueJS`,
33 |       link: [
34 |         {
35 |           hid: 'canonical',
36 |           rel: 'canonical',
37 |           href: `${this.$config.baseUrl}/articles/page/${this.$route.params.page}`,
38 |         },
39 |       ],
40 |     };
41 |   },
42 | };
43 | </script>
44 | 


--------------------------------------------------------------------------------
/utils/getContent.js:
--------------------------------------------------------------------------------
 1 | export default async ($content, params, error) => {
 2 |   const currentPage = parseInt(params.page);
 3 | 
 4 |   // Set how many articles to show per page
 5 |   const perPage = 5;
 6 | 
 7 |   const allArticles = await $content('articles').fetch();
 8 | 
 9 |   const totalArticles = allArticles.length;
10 | 
11 |   // use Math.ceil to round up to the nearest whole number
12 |   const lastPage = Math.ceil(totalArticles / perPage);
13 | 
14 |   // use the % (modulus) operator to get a whole remainder
15 |   const lastPageCount = totalArticles % perPage === 0 ? perPage : totalArticles % perPage;
16 | 
17 |   const skipNumber = () => {
18 |     if (currentPage === 1) {
19 |       return 0;
20 |     }
21 |     if (currentPage === lastPage) {
22 |       return totalArticles - lastPageCount;
23 |     }
24 |     return (currentPage - 1) * perPage;
25 |   };
26 | 
27 |   const paginatedArticles = await $content('articles')
28 |     .only(['title', 'description', 'image', 'slug', 'published'])
29 |     .sortBy('published', 'desc')
30 |     .limit(perPage)
31 |     .skip(skipNumber())
32 |     .fetch();
33 | 
34 |   if (currentPage === 0 || !paginatedArticles.length) {
35 |     return error({ statusCode: 404, message: 'No articles found!' });
36 |   }
37 | 
38 |   return {
39 |     allArticles,
40 |     paginatedArticles,
41 |   };
42 | };
43 | 


--------------------------------------------------------------------------------
/pages/tags/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="flex justify-center">
 4 |       <h2
 5 |         class="text-center text-3xl mb-4 uppercase bg-black text-white inline-block mx-auto px-2"
 6 |       >
 7 |         All Tags
 8 |       </h2>
 9 |     </div>
10 |     <ul>
11 |       <li v-for="tag in tags" :key="tag" class="text-center mb-2">
12 |         <nuxt-link
13 |           :to="{ name: 'tags-tag', params: { tag: tag.toLowerCase() } }"
14 |           class="text-4xl hover:underline"
15 |           >{{ tag }}</nuxt-link
16 |         >
17 |       </li>
18 |     </ul>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   name: 'TagListPage',
25 |   async asyncData({ $content }) {
26 |     function onlyUnique(value, index, self) {
27 |       return self.indexOf(value) === index;
28 |     }
29 |     const articles = await $content('articles').only(['tags']).fetch();
30 |     const tags = articles.flatMap((article) => article.tags).filter(onlyUnique);
31 |     return {
32 |       tags,
33 |     };
34 |   },
35 |   head() {
36 |     return {
37 |       title: 'Article Tags - Learning Laravel and VueJS',
38 |       link: [
39 |         {
40 |           hid: 'canonical',
41 |           rel: 'canonical',
42 |           href: `${this.$config.baseUrl}/tags`,
43 |         },
44 |       ],
45 |     };
46 |   },
47 | };
48 | </script>
49 | 


--------------------------------------------------------------------------------
/pages/tags/_tag.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="flex justify-center">
 4 |       <h2
 5 |         class="text-center text-3xl mb-4 uppercase bg-black text-white inline-block mx-auto px-2"
 6 |       >
 7 |         Tag: {{ $route.params.tag }}
 8 |       </h2>
 9 |     </div>
10 |     <ArticleList :articles="articlesByTag" />
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import ArticleList from '@/components/ArticleList';
16 | 
17 | export default {
18 |   name: 'TagPage',
19 |   components: {
20 |     ArticleList,
21 |   },
22 |   async asyncData({ $content, params }) {
23 |     const articles = await $content('articles')
24 |       .only(['title', 'description', 'image', 'slug', 'published', 'tags'])
25 |       .sortBy('published', 'desc')
26 |       .fetch();
27 |     const articlesByTag = articles.filter((article) => {
28 |       const articleTags = article.tags.map((x) => x.toLowerCase());
29 |       return articleTags.includes(params.tag);
30 |     });
31 |     return {
32 |       articlesByTag,
33 |     };
34 |   },
35 |   methods: {
36 |     captialise(text) {
37 |       return text.charAt(0).toUpperCase() + text.slice(1);
38 |     },
39 |   },
40 |   head() {
41 |     return {
42 |       title: `Articles Tagged - ${this.captialise(this.$route.params.tag)}`,
43 |       link: [
44 |         {
45 |           hid: 'canonical',
46 |           rel: 'canonical',
47 |           href: `${this.$config.baseUrl}/tags/${this.$route.params.tag}`,
48 |         },
49 |       ],
50 |     };
51 |   },
52 | };
53 | </script>
54 | 


--------------------------------------------------------------------------------
/components/ArticleList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul class="text-gray-500 max-w-5xl mx-auto">
 4 |       <li
 5 |         v-for="article of articles"
 6 |         :key="article.slug"
 7 |         class="mb-12 bg-white p-5 rounded shadow"
 8 |       >
 9 |         <NuxtLink
10 |           :to="{ name: 'articles-slug', params: { slug: article.slug } }"
11 |           class="md:grid md:gap-4 md:grid-cols-2"
12 |         >
13 |           <img
14 |             v-if="article.image"
15 |             :src="article.image"
16 |             alt=""
17 |             class="mb-4 border rounded"
18 |           />
19 |           <div>
20 |             <h2 class="font-bold text-gray-900 text-2xl mb-2">
21 |               {{ article.title }}
22 |             </h2>
23 |             <p class="text-lg">{{ article.description }}</p>
24 |             <p class="font-bold text-indigo-600 mt-2">
25 |               Read more<span class="text-indigo-600">&hellip;</span>
26 |             </p>
27 |           </div>
28 |         </NuxtLink>
29 |       </li>
30 |     </ul>
31 |     <div v-if="total" class="constainer mx-auto my-5 max-w-5xl">
32 |       <Pagination v-if="total > 5" :total="total" />
33 |     </div>
34 |   </div>
35 | </template>
36 | 
37 | <script>
38 | import Pagination from '@/components/Pagination';
39 | 
40 | export default {
41 |   name: 'ArticleList',
42 |   components: {
43 |     Pagination,
44 |   },
45 |   props: {
46 |     articles: {
47 |       type: Array,
48 |       default: Array,
49 |     },
50 |     total: {
51 |       type: Number,
52 |       default: 0,
53 |     },
54 |   },
55 | };
56 | </script>
57 | 


--------------------------------------------------------------------------------
/utils/getSiteMeta.js:
--------------------------------------------------------------------------------
 1 | import global from './global';
 2 | 
 3 | export default (meta) => {
 4 |   return [
 5 |     {
 6 |       hid: 'description',
 7 |       name: 'description',
 8 |       content: (meta && meta.description) || global.siteDesc,
 9 |     },
10 |     {
11 |       hid: 'og:type',
12 |       property: 'og:type',
13 |       content: (meta && meta.type) || global.siteType,
14 |     },
15 |     {
16 |       hid: 'og:url',
17 |       property: 'og:url',
18 |       content: (meta && meta.url) || global.siteUrl,
19 |     },
20 |     {
21 |       hid: 'og:title',
22 |       property: 'og:title',
23 |       content: (meta && meta.title) || global.siteTitle,
24 |     },
25 |     {
26 |       hid: 'og:description',
27 |       property: 'og:description',
28 |       content: (meta && meta.description) || global.siteDesc,
29 |     },
30 |     {
31 |       hid: 'og:image',
32 |       property: 'og:image',
33 |       content: (meta && meta.mainImage) || global.mainImage,
34 |     },
35 |     {
36 |       hid: 'twitter:url',
37 |       name: 'twitter:url',
38 |       content: (meta && meta.url) || global.siteUrl,
39 |     },
40 |     {
41 |       hid: 'twitter:title',
42 |       name: 'twitter:title',
43 |       content: (meta && meta.title) || global.siteTitle,
44 |     },
45 |     {
46 |       hid: 'twitter:description',
47 |       name: 'twitter:description',
48 |       content: (meta && meta.description) || global.siteDesc,
49 |     },
50 |     {
51 |       hid: 'twitter:image',
52 |       name: 'twitter:image',
53 |       content: (meta && meta.mainImage) || global.mainImage,
54 |     },
55 |   ];
56 | };
57 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/content/articles/kitchen-sink.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Kitchen Sink
 3 | description: "This is the kitchen sink, all the common markdown elements laid out for you to add styling, really helpful to make sure you don't miss any styles."
 4 | image: 'https://res.cloudinary.com/redfern-web/image/upload/v1599840408/redfern-dev/png/nuxt.png'
 5 | tags: ['VueJS', 'Nuxt']
 6 | published: '2020-08-02'
 7 | ---
 8 | 
 9 | # Heading Level 1
10 | 
11 | ## Heading Level 2
12 | 
13 | ### Heading Level 3
14 | 
15 | #### Heading Level 4
16 | 
17 | ##### Heading Level 5
18 | 
19 | ###### Heading Level 6
20 | 
21 | ### A Paragraph
22 | 
23 | This is a paragraph of text which has all the most common html elements in it such as the **strong element** which is used to give text strong importance. You could of course use the <b>b element</b> which represents a span of text stylistically different from normal text, without conveying any special importance or relevance. The <mark>mark element</mark> which represents highlighted text, i.e., a run of text marked for reference purposes. _The HTML em element marks text that has stress emphasis._ You could of course use the <i>i element</i> which represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. <i>It is typically displayed in italic type</i>. The next piece of text is marked up using the code element `function()` and finally links will be styled [like this](https://developer.mozilla.org/en-US/docs/HTML/Element/a).
24 | 
25 | ### An Ordered list
26 | 
27 | 1. List item one
28 | 2. List item two
29 | 3. List item three
30 | 
31 | ### A Definition List
32 | 
33 | <dl>
34 |   <dt>Firefox</dt>
35 |   <dd>A free, open source, cross-platform, graphical web browser
36 |       developed by the Mozilla Corporation and hundreds of volunteer
37 |   </dd>
38 | </dl>
39 | 
40 | ### A Blockquote
41 | 
42 | > Design is the fundamental soul of a human-made creation that ends
43 | > up expressing itself in successive outer layers of the product or
44 | > service.
45 | 
46 | ### An Unordered list
47 | 
48 | - List item one
49 | - List item two
50 | - List item three
51 | 
52 | ### A Code Block
53 | 
54 | ```css
55 | header h1 a {
56 |   display: block;
57 |   width: 300px;
58 |   height: 80px;
59 | }
60 | ```
61 | 
62 | This wraps your code in a `pre` tags and `code` tags.
63 | 
64 | ### A Table
65 | 
66 | <table>
67 |   <thead>
68 |     <tr>
69 |       <th>Heading (th)</th>
70 |       <th>Heading (th)</th>
71 |       <th>Heading (th)</th>
72 |       <th>Heading (th)</th>
73 |     </tr>
74 |   </thead>
75 |   <tbody>
76 |     <tr>
77 |       <td>data</td>
78 |       <td>data</td>
79 |       <td>data</td>
80 |       <td>data</td>
81 |     </tr>
82 |     <tr>
83 |       <td>data</td>
84 |       <td>data</td>
85 |       <td>data</td>
86 |       <td>data</td>
87 |     </tr>
88 |     <tr>
89 |       <td>data</td>
90 |       <td>data</td>
91 |       <td>data</td>
92 |       <td>data</td>
93 |     </tr>
94 |   </tbody>
95 | </table>
96 | 


--------------------------------------------------------------------------------
/pages/articles/_slug.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <article>
  3 |     <header class="text-white mx-auto text-xs">
  4 |       <div class="p-5 bg-indigo-500 md:inline-block">
  5 |         <p>
  6 |           <span class="uppercase">Published:</span>
  7 |           <span>{{ article.published }}</span>
  8 |         </p>
  9 |         <div class="flex">
 10 |           <span class="mr-1 uppercase">Filed under:</span>
 11 |           <ul class="flex">
 12 |             <li v-for="tag in article.tags" :key="tag" class="mr-2">
 13 |               <nuxt-link
 14 |                 :to="{ name: 'tags-tag', params: { tag: tag.toLowerCase() } }"
 15 |                 class="hover:underline"
 16 |               >
 17 |                 {{ tag }}
 18 |               </nuxt-link>
 19 |             </li>
 20 |           </ul>
 21 |         </div>
 22 |       </div>
 23 |     </header>
 24 |     <div class="prose prose-lg text-gray-500 bg-white p-5 rounded mx-auto">
 25 |       <nuxt-content :document="article" />
 26 |     </div>
 27 |     <footer class="py-5 mt-5">
 28 |       <prev-next :prev="prev" :next="next" />
 29 |     </footer>
 30 |   </article>
 31 | </template>
 32 | 
 33 | <script>
 34 | import global from '@/utils/global';
 35 | import getSiteMeta from '@/utils/getSiteMeta';
 36 | 
 37 | export default {
 38 |   name: 'ArticlePage',
 39 |   async asyncData({ $content, params }) {
 40 |     const article = await $content('articles', params.slug).fetch();
 41 | 
 42 |     const [prev, next] = await $content('articles')
 43 |       .only(['title', 'slug', 'published'])
 44 |       .sortBy('published', 'desc')
 45 |       .surround(params.slug)
 46 |       .fetch();
 47 | 
 48 |     return {
 49 |       article,
 50 |       prev,
 51 |       next,
 52 |     };
 53 |   },
 54 |   computed: {
 55 |     meta() {
 56 |       const metaData = {
 57 |         type: 'article',
 58 |         title: this.article.title,
 59 |         description: this.article.description,
 60 |         url: `${this.$config.baseUrl}/articles/${this.$route.params.slug}`,
 61 |         mainImage: this.article.image,
 62 |       };
 63 |       return getSiteMeta(metaData);
 64 |     },
 65 |   },
 66 |   head() {
 67 |     return {
 68 |       title: this.article.title,
 69 |       meta: [
 70 |         ...this.meta,
 71 |         {
 72 |           property: 'article:published_time',
 73 |           content: this.article.createdAt,
 74 |         },
 75 |         {
 76 |           property: 'article:modified_time',
 77 |           content: this.article.updatedAt,
 78 |         },
 79 |         {
 80 |           property: 'article:tag',
 81 |           content: this.article.tags ? this.article.tags.toString() : '',
 82 |         },
 83 |         { name: 'twitter:label1', content: 'Written by' },
 84 |         { name: 'twitter:data1', content: global.author || '' },
 85 |         { name: 'twitter:label2', content: 'Filed under' },
 86 |         {
 87 |           name: 'twitter:data2',
 88 |           content: this.article.tags ? this.article.tags.toString() : '',
 89 |         },
 90 |       ],
 91 |       link: [
 92 |         {
 93 |           hid: 'canonical',
 94 |           rel: 'canonical',
 95 |           href: `${this.$config.baseUrl}/articles/${this.$route.params.slug}`,
 96 |         },
 97 |       ],
 98 |     };
 99 |   },
100 | };
101 | </script>
102 | 


--------------------------------------------------------------------------------
/components/Pagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="grid gap-4 grid-cols-4">
  3 |     <div v-if="currentPage === 1" :class="disabledStyle">
  4 |       <span class="hidden sm:inline">First</span>
  5 |       <SingleBack />
  6 |     </div>
  7 | 
  8 |     <nuxt-link
  9 |       v-else
 10 |       :to="{ name: 'articles-page-page', params: { page: 1 } }"
 11 |       :class="buttonStyles"
 12 |     >
 13 |       <DoubleBack />
 14 |       <span class="hidden sm:inline">First</span>
 15 |     </nuxt-link>
 16 | 
 17 |     <div v-if="currentPage === 1" :class="disabledStyle">
 18 |       <span class="hidden sm:inline">Prev</span>
 19 |       <SingleBack />
 20 |     </div>
 21 | 
 22 |     <nuxt-link
 23 |       v-else
 24 |       :to="{ name: 'articles-page-page', params: { page: prevPage } }"
 25 |       :class="buttonStyles"
 26 |     >
 27 |       <SingleBack />
 28 |       <span class="hidden sm:inline">Prev</span>
 29 |     </nuxt-link>
 30 | 
 31 |     <div v-if="currentPage === totalPages" :class="disabledStyle">
 32 |       <span class="hidden sm:inline">Next</span>
 33 |       <SingleFwd />
 34 |     </div>
 35 | 
 36 |     <nuxt-link
 37 |       v-else
 38 |       :to="{ name: 'articles-page-page', params: { page: nextPage } }"
 39 |       :class="buttonStyles"
 40 |     >
 41 |       <span class="hidden sm:inline">Next</span>
 42 |       <SingleFwd />
 43 |     </nuxt-link>
 44 | 
 45 |     <div v-if="currentPage === totalPages" :class="disabledStyle">
 46 |       <span class="hidden sm:inline">Last</span>
 47 |       <DoubleFwd />
 48 |     </div>
 49 | 
 50 |     <nuxt-link
 51 |       v-else
 52 |       :to="{ name: 'articles-page-page', params: { page: totalPages } }"
 53 |       :class="buttonStyles"
 54 |     >
 55 |       <span class="hidden sm:inline">Last</span>
 56 |       <DoubleFwd />
 57 |     </nuxt-link>
 58 |   </div>
 59 | </template>
 60 | 
 61 | <script>
 62 | import DoubleFwd from '@/components/svg/DoubleFwd';
 63 | import DoubleBack from '@/components/svg/DoubleBack';
 64 | import SingleFwd from '@/components/svg/SingleFwd';
 65 | import SingleBack from '@/components/svg/SingleBack';
 66 | 
 67 | export default {
 68 |   name: 'Pagination',
 69 |   components: {
 70 |     DoubleFwd,
 71 |     DoubleBack,
 72 |     SingleFwd,
 73 |     SingleBack,
 74 |   },
 75 |   props: {
 76 |     total: {
 77 |       type: Number,
 78 |       default: 0,
 79 |     },
 80 |     perPage: {
 81 |       type: Number,
 82 |       default: 5,
 83 |     },
 84 |   },
 85 |   computed: {
 86 |     buttonStyles() {
 87 |       return 'border rounded px-4 py-1 text-sm bg-white flex justify-center items-center sm:uppercase hover:bg-blue-500 hover:text-white transform duration-500 ease-in-out';
 88 |     },
 89 |     disabledStyle() {
 90 |       return 'border rounded px-4 py-1 text-sm bg-white flex justify-center items-center sm:uppercase text-gray-300';
 91 |     },
 92 |     totalPages() {
 93 |       return Math.ceil(this.total / this.perPage);
 94 |     },
 95 |     currentPage() {
 96 |       return parseInt(this.$route.params.page) || 1;
 97 |     },
 98 |     prevPage() {
 99 |       return this.currentPage > 1 ? this.currentPage - 1 : 1;
100 |     },
101 |     nextPage() {
102 |       return this.currentPage < this.totalPages
103 |         ? this.currentPage + 1
104 |         : this.totalPages;
105 |     },
106 |   },
107 | };
108 | </script>
109 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
  1 | import global from './utils/global';
  2 | import getRoutes from './utils/getRoutes';
  3 | import getSiteMeta from './utils/getSiteMeta';
  4 | 
  5 | const meta = getSiteMeta();
  6 | 
  7 | export default {
  8 |   // Target (https://go.nuxtjs.dev/config-target)
  9 |   target: 'static',
 10 | 
 11 |   // Global page headers (https://go.nuxtjs.dev/config-head)
 12 |   head: {
 13 |     htmlAttrs: {
 14 |       lang: 'en-GB',
 15 |       class: 'bg-black',
 16 |     },
 17 |     title: 'Nuxt Basic Blog',
 18 |     meta: [
 19 |       ...meta,
 20 |       { charset: 'utf-8' },
 21 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
 22 |       {
 23 |         hid: 'description',
 24 |         name: 'description',
 25 |         content: global.siteDesc || '',
 26 |       },
 27 |       { property: 'og:site_name', content: global.siteName || '' },
 28 |       {
 29 |         hid: 'description',
 30 |         name: 'description',
 31 |         content: global.siteDesc || '',
 32 |       },
 33 |       { property: 'og:image:width', content: '740' },
 34 |       { property: 'og:image:height', content: '300' },
 35 |       { name: 'twitter:site', content: global.siteName || '' },
 36 |       { name: 'twitter:card', content: 'summary_large_image' },
 37 |     ],
 38 |     link: [
 39 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
 40 |       {
 41 |         hid: 'canonical',
 42 |         rel: 'canonical',
 43 |         href: global.siteUrl,
 44 |       },
 45 |     ],
 46 |   },
 47 | 
 48 |   // Global CSS (https://go.nuxtjs.dev/config-css)
 49 |   css: ['~/assets/css/main.css'],
 50 | 
 51 |   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
 52 |   plugins: [],
 53 | 
 54 |   // Auto import components (https://go.nuxtjs.dev/config-components)
 55 |   components: true,
 56 | 
 57 |   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
 58 |   buildModules: [
 59 |     // https://go.nuxtjs.dev/eslint
 60 |     '@nuxtjs/eslint-module',
 61 |     // https://go.nuxtjs.dev/tailwindcss
 62 |     '@nuxtjs/tailwindcss',
 63 |   ],
 64 | 
 65 |   // Modules (https://go.nuxtjs.dev/config-modules)
 66 |   modules: [
 67 |     // https://go.nuxtjs.dev/content
 68 |     '@nuxt/content',
 69 |     '@nuxtjs/feed',
 70 |     '@nuxtjs/sitemap',
 71 |   ],
 72 | 
 73 |   // Content module configuration (https://go.nuxtjs.dev/content-config)
 74 |   content: {
 75 |     markdown: {
 76 |       prism: {
 77 |         theme: 'prism-themes/themes/prism-material-oceanic.css',
 78 |       },
 79 |     },
 80 |   },
 81 | 
 82 |   // Build Configuration (https://go.nuxtjs.dev/config-build)
 83 |   build: {},
 84 | 
 85 |   // Sitemap Configuration (https://github.com/nuxt-community/sitemap-module)
 86 |   sitemap: {
 87 |     hostname: global.siteUrl,
 88 |     routes() {
 89 |       return getRoutes();
 90 |     },
 91 |   },
 92 | 
 93 |   // RSS Feed Configuration (https://github.com/nuxt-community/feed-module)
 94 |   feed() {
 95 |     const baseUrlArticles = `${global.siteUrl}/articles`;
 96 |     const baseLinkFeedArticles = '/articles';
 97 |     const feedFormats = {
 98 |       rss: { type: 'rss2', file: 'rss.xml' },
 99 |       json: { type: 'json1', file: 'feed.json' },
100 |     };
101 |     const { $content } = require('@nuxt/content');
102 | 
103 |     const createFeedArticles = async function (feed) {
104 |       feed.options = {
105 |         title: global.siteName || '',
106 |         description: global.siteDesc || '',
107 |         link: baseUrlArticles,
108 |       };
109 |       const articles = await $content('articles').fetch();
110 | 
111 |       articles.forEach((article) => {
112 |         const url = `${baseUrlArticles}/${article.slug}`;
113 | 
114 |         feed.addItem({
115 |           title: article.title,
116 |           id: url,
117 |           link: url,
118 |           date: new Date(article.published),
119 |           description: article.description,
120 |           content: article.description,
121 |           author: global.twitterHandle,
122 |         });
123 |       });
124 |     };
125 | 
126 |     return Object.values(feedFormats).map(({ file, type }) => ({
127 |       path: `${baseLinkFeedArticles}/${file}`,
128 |       type,
129 |       create: createFeedArticles,
130 |     }));
131 |   },
132 | 
133 |   publicRuntimeConfig: {
134 |     baseUrl: process.env.BASE_URL || 'http://localhost:3000',
135 |   },
136 | };
137 | 


--------------------------------------------------------------------------------