├── .editorconfig
├── .env.example
├── .eslintrc.js
├── .gitignore
├── README.md
├── assets
    └── README.md
├── components
    ├── AppLogo.vue
    └── README.md
├── layouts
    ├── README.md
    └── default.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    ├── README.md
    ├── _slug.vue
    └── index.vue
├── plugins
    ├── README.md
    └── contentful.js
├── static
    ├── README.md
    └── favicon.ico
└── store
    └── README.md


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_size = 2
 6 | indent_style = space
 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 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | CTF_SPACE_ID=
2 | CTF_ACCESS_TOKEN=
3 | 


--------------------------------------------------------------------------------
/.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 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13 |     'plugin:vue/essential'
14 |   ],
15 |   // required to lint *.vue files
16 |   plugins: [
17 |     'vue'
18 |   ],
19 |   // add your custom rules here
20 |   rules: {}
21 | }
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules
 3 | 
 4 | # logs
 5 | npm-debug.log
 6 | 
 7 | # Nuxt build
 8 | .nuxt
 9 | 
10 | # Nuxt generate
11 | dist
12 | 
13 | .env
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-static-blog
 2 | 
 3 | > A static blog built with Nuxt.js and Contentful
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | $ npm install # Or yarn install
10 | 
11 | # serve with hot reload at localhost:3000
12 | $ npm run dev
13 | 
14 | # generate static project
15 | $ npm run generate
16 | ```
17 | 
18 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
19 | 


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


--------------------------------------------------------------------------------
/components/AppLogo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="VueToNuxtLogo">
 3 |     <div class="Triangle Triangle--two"/>
 4 |     <div class="Triangle Triangle--one"/>
 5 |     <div class="Triangle Triangle--three"/>
 6 |     <div class="Triangle Triangle--four"/>
 7 |   </div>
 8 | </template>
 9 | 
10 | <style>
11 | .VueToNuxtLogo {
12 |   display: inline-block;
13 |   animation: turn 2s linear forwards 1s;
14 |   transform: rotateX(180deg);
15 |   position: relative;
16 |   overflow: hidden;
17 |   height: 180px;
18 |   width: 245px;
19 | }
20 | 
21 | .Triangle {
22 |   position: absolute;
23 |   top: 0;
24 |   left: 0;
25 |   width: 0;
26 |   height: 0;
27 | }
28 | 
29 | .Triangle--one {
30 |   border-left: 105px solid transparent;
31 |   border-right: 105px solid transparent;
32 |   border-bottom: 180px solid #41B883;
33 | }
34 | 
35 | .Triangle--two {
36 |   top: 30px;
37 |   left: 35px;
38 |   animation: goright 0.5s linear forwards 3.5s;
39 |   border-left: 87.5px solid transparent;
40 |   border-right: 87.5px solid transparent;
41 |   border-bottom: 150px solid #3B8070;
42 | }
43 | 
44 | .Triangle--three {
45 |   top: 60px;
46 |   left: 35px;
47 |   animation: goright 0.5s linear forwards 3.5s;
48 |   border-left: 70px solid transparent;
49 |   border-right: 70px solid transparent;
50 |   border-bottom: 120px solid #35495E;
51 | }
52 | 
53 | .Triangle--four {
54 |   top: 120px;
55 |   left: 70px;
56 |   animation: godown 0.5s linear forwards 3s;
57 |   border-left: 35px solid transparent;
58 |   border-right: 35px solid transparent;
59 |   border-bottom: 60px solid #fff;
60 | }
61 | 
62 | @keyframes turn {
63 |   100% {
64 |     transform: rotateX(0deg);
65 |   }
66 | }
67 | 
68 | @keyframes godown {
69 |   100% {
70 |     top: 180px;
71 |   }
72 | }
73 | 
74 | @keyframes goright {
75 |   100% {
76 |     left: 70px;
77 |   }
78 | }
79 | </style>
80 | 


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


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


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <section class="hero has-text-centered is-primary">
 4 |       <div class="hero-body">
 5 |         <div class="container">
 6 |           <h1 class="title">
 7 |             <nuxt-link to="/">Nuxt Blog</nuxt-link>
 8 |           </h1>
 9 |           <h2 class="subtitle">
10 |             Your all round tech blog
11 |           </h2>
12 |         </div>
13 |       </div>
14 |     </section>
15 | 
16 |     <nuxt/>
17 |   </div>
18 | </template>
19 | 
20 | <style>
21 | html {
22 |   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
23 |     Roboto, 'Helvetica Neue', Arial, sans-serif;
24 | }
25 | </style>
26 | 


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


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | require('dotenv').config()
 2 | const client = require('./plugins/contentful')
 3 | 
 4 | module.exports = {
 5 |   /*
 6 |   ** Headers of the page
 7 |   */
 8 |   head: {
 9 |     title: 'nuxt-static-blog-demo',
10 |     meta: [
11 |       { charset: 'utf-8' },
12 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
13 |       {
14 |         hid: 'description',
15 |         name: 'description',
16 |         content: 'A static blog built with Nuxt.js and Contentful'
17 |       }
18 |     ],
19 |     link: [
20 |       {
21 |         rel: 'stylesheet',
22 |         href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css'
23 |       },
24 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
25 |     ]
26 |   },
27 |   /*
28 |   ** Customize the progress bar color
29 |   */
30 |   loading: { color: '#3B8070' },
31 |   /*
32 |   ** Build configuration
33 |   */
34 |   build: {
35 |     /*
36 |     ** Run ESLint on save
37 |     */
38 |     extend (config, { isDev, isClient }) {
39 |       if (isDev && isClient) {
40 |         config.module.rules.push({
41 |           enforce: 'pre',
42 |           test: /\.(js|vue)$/,
43 |           loader: 'eslint-loader',
44 |           exclude: /(node_modules)/
45 |         })
46 |       }
47 |     }
48 |   },
49 |   plugins: ['~/plugins/contentful'],
50 |   modules: ['@nuxtjs/dotenv', '@nuxtjs/markdownit'],
51 |   markdownit: {
52 |     injected: true
53 |   },
54 |   generate: {
55 |     routes () {
56 |       return client.getEntries({ content_type: 'post' }).then(entries => {
57 |         return entries.items.map(entry => {
58 |           return {
59 |             route: entry.fields.slug,
60 |             payload: entry
61 |           }
62 |         })
63 |       })
64 |     }
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-static-blog",
 3 |   "version": "1.0.0",
 4 |   "description": "A static blog built with Nuxt.js and Contentful",
 5 |   "author": "Chimezie Enyinnaya <meziemichael@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13 |     "precommit": "npm run lint"
14 |   },
15 |   "dependencies": {
16 |     "@nuxtjs/dotenv": "^1.1.0",
17 |     "@nuxtjs/markdownit": "^1.2.0",
18 |     "contentful": "^5.1.3",
19 |     "nuxt": "^1.0.0"
20 |   },
21 |   "devDependencies": {
22 |     "babel-eslint": "^8.2.1",
23 |     "eslint": "^4.15.0",
24 |     "eslint-friendly-formatter": "^3.0.0",
25 |     "eslint-loader": "^1.7.1",
26 |     "eslint-plugin-vue": "^4.0.0"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/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:
7 | https://nuxtjs.org/guide/routing
8 | 


--------------------------------------------------------------------------------
/pages/_slug.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="section">
 3 |     <div class="container">
 4 |       <div class="columns">
 5 |         <div class="column is-offset-2 is-8">
 6 |           <p class="subtitle is-6">
 7 |             <nuxt-link to="/">Back to Blog home</nuxt-link>
 8 |           </p>
 9 |           <h1 class="title is-2">
10 |             {{ post.fields.title }}
11 |           </h1>
12 | 
13 |           <hr>
14 |           <div class="content" v-html="$md.render(post.fields.content)"></div>
15 |         </div>
16 |       </div>
17 |     </div>
18 |   </section>
19 | </template>
20 | 
21 | <script>
22 | import client from '~/plugins/contentful';
23 | 
24 | export default {
25 |   asyncData({ params, error, payload }) {
26 |     if (payload) return { post: payload };
27 | 
28 |     return client
29 |       .getEntries({
30 |         content_type: 'post',
31 |         'fields.slug': params.slug,
32 |       })
33 |       .then(entries => {
34 |         return { post: entries.items[0] };
35 |       })
36 |       .catch(e => console.log(e));
37 |   },
38 |   head() {
39 |     return {
40 |       title: this.post.fields.title,
41 |     };
42 |   },
43 | };
44 | </script>
45 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="section">
 3 |     <div class="container">
 4 |       <div class="columns">
 5 |         <div class="column is-offset-2 is-8">
 6 |           <h1 class="title is-2">Latest Posts</h1>
 7 |           <hr>
 8 | 
 9 |           <h2
10 |             class="title is-4"
11 |             v-for="(post, index) in posts"
12 |               :key="index">
13 |             <nuxt-link :to="post.fields.slug">
14 |               {{ post.fields.title }}
15 |             </nuxt-link>
16 |           </h2>
17 |         </div>
18 |       </div>
19 |     </div>
20 |   </section>
21 | </template>
22 | 
23 | <script>
24 | import client from '~/plugins/contentful';
25 | 
26 | export default {
27 |   asyncData({ params }) {
28 |     return client
29 |       .getEntries({
30 |         content_type: 'post',
31 |         order: '-sys.createdAt',
32 |       })
33 |       .then(entries => {
34 |         return { posts: entries.items };
35 |       })
36 |       .catch(e => console.log(e));
37 |   },
38 |   head: {
39 |     title: 'Latest Posts',
40 |   },
41 | };
42 | </script>
43 | 


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


--------------------------------------------------------------------------------
/plugins/contentful.js:
--------------------------------------------------------------------------------
1 | const contentful = require('contentful')
2 | 
3 | module.exports = contentful.createClient({
4 |   space: process.env.CTF_SPACE_ID,
5 |   accessToken: process.env.CTF_ACCESS_TOKEN
6 | })
7 | 


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


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutstack/nuxt-static-blog/083aff346cb33849f0aec1b571396e6bd8069e54/static/favicon.ico


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


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