├── .editorconfig
├── .env
├── .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
    └── index.vue
├── plugins
    └── README.md
├── static
    ├── README.md
    ├── favicon.ico
    └── icon.png
└── 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:
--------------------------------------------------------------------------------
1 | API_KEY=5deec62aa3594850bca10dc2f4f1410d
2 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | API_KEY=enter your news API key
2 | 


--------------------------------------------------------------------------------
/.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 | sw.*
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # pwa-news
 2 | 
 3 | > A PWA news app
 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 | # build for production and launch server
15 | $ npm run build
16 | $ npm start
17 | 
18 | # generate static project
19 | $ npm run generate
20 | ```
21 | 
22 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
23 | 


--------------------------------------------------------------------------------
/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">PWA News</h1>
 7 |           <h2 class="subtitle">
 8 |             All the headlines making the wavy!
 9 |           </h2>
10 |         </div>
11 |       </div>
12 |     </section>
13 |     <nuxt/>
14 |   </div>
15 | </template>
16 | 
17 | <style>
18 | html {
19 |   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
20 |     Roboto, 'Helvetica Neue', Arial, sans-serif;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/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 | module.exports = {
 2 |   /*
 3 |   ** Headers of the page
 4 |   */
 5 |   head: {
 6 |     title: 'pwa-news',
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |       { hid: 'description', name: 'description', content: 'A PWA news app' }
11 |     ],
12 |     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
13 |   },
14 |   /*
15 |   ** Customize the progress bar color
16 |   */
17 |   loading: { color: '#3B8070' },
18 |   /*
19 |   ** Build configuration
20 |   */
21 |   build: {
22 |     /*
23 |     ** Run ESLint on save
24 |     */
25 |     extend (config, { isDev, isClient }) {
26 |       if (isDev && isClient) {
27 |         config.module.rules.push({
28 |           enforce: 'pre',
29 |           test: /\.(js|vue)$/,
30 |           loader: 'eslint-loader',
31 |           exclude: /(node_modules)/
32 |         })
33 |       }
34 |     },
35 |     postcss: {
36 |       plugins: {
37 |         'postcss-custom-properties': false
38 |       }
39 |     }
40 |   },
41 |   modules: ['@nuxtjs/axios', '@nuxtjs/pwa', '@nuxtjs/dotenv', '@nuxtjs/bulma']
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pwa-news",
 3 |   "version": "1.0.0",
 4 |   "description": "A PWA news app",
 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/axios": "^5.1.1",
17 |     "@nuxtjs/bulma": "^1.1.0",
18 |     "@nuxtjs/dotenv": "^1.1.1",
19 |     "@nuxtjs/pwa": "^2.0.8",
20 |     "nuxt": "^1.0.0"
21 |   },
22 |   "devDependencies": {
23 |     "babel-eslint": "^8.2.1",
24 |     "eslint": "^4.15.0",
25 |     "eslint-friendly-formatter": "^3.0.0",
26 |     "eslint-loader": "^1.7.1",
27 |     "eslint-plugin-vue": "^4.0.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/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/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="section">
 3 |     <div class="container">
 4 |       <div class="columns is-multiline">
 5 |         <div
 6 |           class="column is-one-quarter"
 7 |           v-for="(article, index) in articles"
 8 |           :key="index">
 9 |           <a :href="article.url" target="_blank">
10 |             <div class="card">
11 |               <div class="card-image">
12 |                 <figure class="image is-3by2">
13 |                   <img :src="article.urlToImage" :alt="article.title">
14 |                 </figure>
15 |               </div>
16 |               <div class="card-content">
17 |                 <div class="content">{{ article.title }}</div>
18 |               </div>
19 |             </div>
20 |           </a>
21 |         </div>
22 |       </div>
23 |     </div>
24 |   </section>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   async asyncData({ app }) {
30 |     const { articles } = await app.$axios.$get(
31 |       `https://newsapi.org/v2/top-headlines?sources=cnn&apiKey=${
32 |         process.env.API_KEY
33 |       }`
34 |     );
35 | 
36 |     return { articles };
37 |   },
38 | };
39 | </script>
40 | 


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


--------------------------------------------------------------------------------
/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/ammezie/pwa-news/70436854cb0afa6e49981815dc49400d7cfb4e93/static/favicon.ico


--------------------------------------------------------------------------------
/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ammezie/pwa-news/70436854cb0afa6e49981815dc49400d7cfb4e93/static/icon.png


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


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