├── .gitignore
├── README.md
├── api
    └── posts.js
├── assets
    ├── README.md
    └── scss
    │   └── _colors.scss
├── components
    ├── Logo.vue
    └── README.md
├── layouts
    ├── README.md
    └── default.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package.json
├── pages
    ├── README.md
    ├── _slug
    │   └── index.vue
    ├── index.vue
    └── who
    │   └── index.vue
├── plugins
    └── README.md
├── static
    ├── README.md
    └── favicon.ico
├── store
    └── README.md
└── yarn.lock


/.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 | .editorconfig
83 | 
84 | # Service worker
85 | sw.*
86 | 
87 | # Mac OSX
88 | .DS_Store
89 | 
90 | # Vim swap files
91 | *.swp
92 | 


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


--------------------------------------------------------------------------------
/api/posts.js:
--------------------------------------------------------------------------------
 1 | import GhostContentAPI from "@tryghost/content-api";
 2 | 
 3 | const api = new GhostContentAPI({
 4 |     url: 'https://garysimon.ghost.io',
 5 |     key: '6e7be9d5da6109f99fa4e57f57',
 6 |     version: "v2"
 7 |   });
 8 | 
 9 | export async function getPosts() {
10 |     return await api.posts
11 |         .browse({
12 |             limit: "all",
13 |             include: "tags,authors"
14 |         })
15 |         .catch(err => {
16 |             console.error(err);
17 |         })
18 | }
19 | 
20 | export async function getSinglePost(postSlug) {
21 |     return await api.posts
22 |         .read({
23 |             slug: postSlug
24 |         })
25 |         .catch(err => {
26 |             console.error(err);
27 |         })
28 | }
29 | 
30 | export async function getPage(pageSlug) {
31 |     return await api.pages
32 |         .read({
33 |             slug: pageSlug
34 |         })
35 |         .catch(err => {
36 |             console.error(err);
37 |         })
38 | }


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/assets/scss/_colors.scss:
--------------------------------------------------------------------------------
1 | 
2 | $primary-color: #8800FF;
3 | $accent-color: #FFFF00;


--------------------------------------------------------------------------------
/components/Logo.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 | **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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <header>
 4 |       <div class="container">
 5 |         <div class="navbar">
 6 |           <nuxt-link to="/" class="logo">Gary Simon</nuxt-link>
 7 | 
 8 |           <nav>
 9 |             <ul>
10 |               <li><nuxt-link to="/who">Who?</nuxt-link></li>
11 |               <li><nuxt-link to="/posts">Posts</nuxt-link></li>
12 |               <li><nuxt-link to="/contact">Contact</nuxt-link></li>
13 |             </ul>
14 |           </nav>
15 |         </div>
16 |       </div>
17 |     </header>
18 |     <nuxt />
19 |   </div>
20 | </template>
21 | 
22 | <style lang="scss">
23 | 
24 | html {
25 |   font-family: 'Nunito', Arial, sans-serif;
26 |   font-size: 16px;
27 |   word-spacing: 1px;
28 |   -ms-text-size-adjust: 100%;
29 |   -webkit-text-size-adjust: 100%;
30 |   -moz-osx-font-smoothing: grayscale;
31 |   -webkit-font-smoothing: antialiased;
32 |   box-sizing: border-box;
33 | }
34 |  body {
35 |    background: #ECECEC;
36 |  }
37 | *,
38 | *:before,
39 | *:after {
40 |   box-sizing: border-box;
41 |   margin: 0;
42 | }
43 | 
44 | .container {
45 |   margin: 0 auto;
46 |   width: 90%;
47 | }
48 | 
49 | header {
50 |   background: $primary-color;
51 |   padding: 1em 0;
52 |   text-align: center;
53 | 
54 |   .navbar {
55 |     display: flex;
56 |     justify-content: space-between;
57 |     font-weight: bold;
58 |   }
59 | 
60 |   a {
61 |     color: white;
62 |     text-decoration: none;
63 |   }
64 | 
65 |   nav {
66 |     display: flex;
67 | 
68 |     ul {
69 |       list-style-type: none;
70 |       padding: 0;
71 |       display: flex;
72 | 
73 |       li a {
74 |         font-weight: normal;
75 |         padding: .5em;
76 |       }
77 |     }
78 |   }
79 | }
80 | 
81 | @media only screen and (min-width: 768px) {
82 |   body { 
83 |     font-size: 18px;
84 |   }
85 | }
86 | 
87 | 
88 | </style>
89 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default {
 3 |   mode: 'universal',
 4 |   /*
 5 |   ** Headers of the page
 6 |   */
 7 |   head: {
 8 |     title: process.env.npm_package_name || '',
 9 |     meta: [
10 |       { charset: 'utf-8' },
11 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
12 |       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
13 |     ],
14 |     link: [
15 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
16 |     ]
17 |   },
18 |   /*
19 |   ** Customize the progress-bar color
20 |   */
21 |   loading: { color: '#fff' },
22 |   /*
23 |   ** Global CSS
24 |   */
25 |   css: [
26 |   ],
27 |   /*
28 |   ** Plugins to load before mounting the App
29 |   */
30 |   plugins: [
31 |   ],
32 |   /*
33 |   ** Nuxt.js dev-modules
34 |   */
35 |   buildModules: [
36 |   ],
37 |   /*
38 |   ** Nuxt.js modules
39 |   */
40 |   modules: [
41 |     '@nuxtjs/style-resources'
42 |   ],
43 |   styleResources: {
44 |     scss: [
45 |       '~assets/scss/_colors.scss'
46 |     ]
47 |   },
48 |   /*
49 |   ** Build configuration
50 |   */
51 |   build: {
52 |     /*
53 |     ** You can extend webpack config here
54 |     */
55 |     extend (config, ctx) {
56 |     }
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "myblog",
 3 |   "version": "1.0.0",
 4 |   "description": "My phenomenal Nuxt.js project",
 5 |   "author": "Gary Simon",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate"
12 |   },
13 |   "dependencies": {
14 |     "@tryghost/content-api": "^1.2.9",
15 |     "nuxt": "^2.0.0"
16 |   },
17 |   "devDependencies": {
18 |     "@nuxtjs/style-resources": "^1.0.0",
19 |     "node-sass": "^4.12.0",
20 |     "sass-loader": "^8.0.0"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/pages/_slug/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <main>
 4 |             <h1>{{ post.title }}</h1>
 5 |             <div class="content">
 6 |                 <div v-html="post.html">{{ post.html }}</div>
 7 |             </div>
 8 |         </main>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 | 
14 | import { getSinglePost } from '~/api/posts';
15 | 
16 | export default {
17 |   async asyncData ({params}) {
18 |     const post = await getSinglePost(params.slug);
19 |     return { post: post }
20 |   }
21 | }
22 | </script>
23 | 
24 | <style lang="scss">
25 |     header {
26 |         height: 15em;
27 |     }
28 | 
29 |     h1 {
30 |         color: white;
31 |         margin-bottom: 1em;
32 |     }
33 | 
34 |     .content {
35 |         background: white;
36 |         border-radius: 1em;
37 |         padding: 1em;
38 |     }
39 | 
40 |     main {
41 |         margin-top: -9em;
42 |     }
43 | 
44 |     .content img {
45 |         width: 100%;
46 |     }
47 | 
48 | @media only screen and (min-width: 768px) {
49 |     .content {
50 |         padding: 2em;
51 |     }
52 | }
53 | 
54 | </style>
55 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="hero">
  4 |       <div class="container">
  5 |         <h1>Welcome to My Blog</h1>
  6 |         <p class="subtitle">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi, modi. Maxime explicabo neque odio facilis.</p>
  7 |         <nuxt-link to="/contact" class="hire">Hire me</nuxt-link>
  8 |       </div>
  9 |     </div>
 10 | 
 11 |     <div class="container">
 12 |       <main>
 13 |         <h2>Latest thoughts</h2>
 14 |         <ul>
 15 |           <li v-for="(post, index) in posts" :key="index">
 16 |             <img :src="post.feature_image">
 17 |             <div class="content">
 18 |               <span>{{ post.authors[0].name }}</span>
 19 |               <nuxt-link :to="{ path: post.slug }">{{ post.title }}</nuxt-link>
 20 |               <p>{{ post.excerpt }}</p>
 21 |             </div>
 22 |           </li>
 23 |         </ul>
 24 |       </main>
 25 |     </div>
 26 | 
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | 
 32 | import { getPosts } from '~/api/posts';
 33 | 
 34 | export default {
 35 |   async asyncData () {
 36 |     const posts = await getPosts();
 37 |     return { posts: posts }
 38 |   }
 39 | }
 40 | </script>
 41 | 
 42 | <style lang="scss">
 43 | 
 44 |   .hero {
 45 |     background-color: $primary-color;
 46 |     color: white;
 47 |     text-align: center;
 48 |     padding-top: 2em;
 49 | 
 50 |     h1 {
 51 |       margin-bottom: 1em;
 52 |     }
 53 | 
 54 |     .hire {
 55 |       background: darken($primary-color, 10%);
 56 |       padding: .5em 3em;
 57 |       margin: 2em 0 3em;
 58 |       display: inline-block;
 59 |       border-radius: 10px;
 60 |       color: $accent-color;
 61 |       text-decoration: none;
 62 |     }
 63 |   }
 64 | 
 65 |   .container ul {
 66 |     list-style-type: none;
 67 |     padding: 0;
 68 |   }
 69 | 
 70 |   main {
 71 | 
 72 |     li {
 73 |       background: white;
 74 |       border-radius: 1em;
 75 |       padding: .8em;
 76 |       margin: 1em 0;
 77 |       box-shadow: 15px 21px 40px 0px rgba(0,0,0,0.04);
 78 |     }
 79 | 
 80 |     img {
 81 |       width: 100%;
 82 |       border-radius: .5em;
 83 |     }
 84 | 
 85 |     .content {
 86 |       padding: .5em;
 87 |     }
 88 | 
 89 |     a {
 90 |       font-size: 1.5em;
 91 |       text-decoration: none;
 92 |       color: black;
 93 |       font-weight: bold;
 94 |       display: block;
 95 |       margin: -.1em 0 .2em;
 96 |     }
 97 | 
 98 |     h2 {
 99 |       margin-top: 3em;
100 |       text-transform: uppercase;
101 |       font-size: .8em;
102 |     }
103 | 
104 |     span {
105 |       color: $primary-color;
106 |       text-transform: uppercase;
107 |     }
108 | 
109 |   }
110 | 
111 | @media only screen and (min-width: 768px) {
112 |   main li {
113 |     display: grid;
114 |     grid-template-columns: 180px auto;
115 |     grid-column-gap: 1em;
116 |   }
117 | }
118 | 
119 | </style>
120 | 


--------------------------------------------------------------------------------
/pages/who/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <main>
 4 |       <h1>{{page.title}}</h1>
 5 |       <div class="content">
 6 |         <div v-html="page.html">{{ page.html }}</div>
 7 |       </div>
 8 |     </main>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   import Logo from '~/components/Logo.vue'
14 |   import { getPage } from '~/api/posts';
15 | 
16 | 
17 |   export default {
18 |       async asyncData () {
19 |         const page = await getPage('who-am-i');
20 |         return { page: page }
21 |       },
22 |       head () {
23 |         return {
24 |           title: this.page.meta_title,
25 |           meta: [
26 |             // hid is used as unique identifier. Do not use `vmid` for it as it will not work
27 |             { hid: 'description', name: 'description', content: this.page.meta_description }
28 |           ]
29 |         }
30 |       }
31 |   }
32 | </script>
33 | 
34 | <style>
35 |   header {
36 |     height: 15em;
37 |   }
38 | 
39 |   h1 {
40 |     color: white;
41 |     margin-bottom: 1em;
42 |   }
43 | 
44 |   .content {
45 |     background: white;
46 |     border-radius: 1em;
47 |     padding: 1em;
48 |   }
49 | 
50 |   main {
51 |     margin-top: -9em;
52 |   }
53 | 
54 |   .content img {
55 |     width: 100%;
56 |   }
57 | 
58 | @media only screen and (min-width: 768px) {
59 |   .content {
60 |     padding: 2em;
61 |   }
62 | }
63 | 
64 | </style>
65 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/designcourse/nuxt-ghost/57ca4f3751cb9a2b1ac780219439e433e0d85f17/static/favicon.ico


--------------------------------------------------------------------------------
/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 | 


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