├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── FRONTEND_INSTRUCTIONS.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── dev-client.js
    ├── dev-server.js
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    ├── webpack.prod.conf.js
    └── webpack.test.conf.js
├── circle.yml
├── config
    ├── dev.env.js
    ├── index.js
    ├── prod.env.js
    └── test.env.js
├── index.html
├── logo.png
├── package.json
├── readme.md
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Article.vue
    │   ├── Editor.vue
    │   ├── Favorites.vue
    │   ├── Footer.vue
    │   ├── Header.vue
    │   ├── Home.vue
    │   ├── Login.vue
    │   ├── PostPreview.vue
    │   ├── Profile.vue
    │   ├── Register.vue
    │   ├── Settings.vue
    │   └── TagList.vue
    ├── constants
    │   └── Home.constants.js
    ├── main.js
    ├── router
    │   └── index.js
    ├── services
    │   ├── postsService.js
    │   └── tagsService.js
    └── store
    │   ├── actionTypes.js
    │   ├── index.js
    │   ├── modules
    │       └── home.js
    │   └── mutationTypes.js
├── static
    └── .gitkeep
├── test
    ├── e2e
    │   ├── custom-assertions
    │   │   └── elementCount.js
    │   ├── nightwatch.conf.js
    │   ├── runner.js
    │   └── specs
    │   │   └── home.e2e.js
    └── unit
    │   ├── .eslintrc
    │   ├── index.js
    │   ├── karma.conf.js
    │   └── specs
    │       ├── Home.spec.js
    │       ├── postsService.spec.js
    │       └── store
    │           └── modules
    │               └── home.spec.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", { "modules": false }],
 4 |     "stage-2"
 5 |   ],
 6 |   "plugins": ["transform-runtime"],
 7 |   "comments": false,
 8 |   "env": {
 9 |     "test": {
10 |       "presets": ["env", "stage-2"],
11 |       "plugins": [ "istanbul" ]
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | config/*.js
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // http://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parser: 'babel-eslint',
 6 |   parserOptions: {
 7 |     sourceType: 'module'
 8 |   },
 9 |   env: {
10 |     browser: true,
11 |   },
12 |   extends: 'airbnb-base',
13 |   // required to lint *.vue files
14 |   plugins: [
15 |     'html'
16 |   ],
17 |   // check if imports actually resolve
18 |   'settings': {
19 |     'import/resolver': {
20 |       'webpack': {
21 |         'config': 'build/webpack.base.conf.js'
22 |       }
23 |     }
24 |   },
25 |   // add your custom rules here
26 |   'rules': {
27 |     // don't require .vue extension when importing
28 |     'import/extensions': ['error', 'always', {
29 |       'js': 'never',
30 |       'vue': 'never'
31 |     }],
32 |     // allow optionalDependencies
33 |     'import/no-extraneous-dependencies': ['error', {
34 |       'optionalDependencies': ['test/unit/index.js']
35 |     }],
36 |     // allow debugger during development
37 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
38 |     'no-unused-expressions': process.env.NODE_ENV === 'production' ? 2 : 0
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /bower_components
 6 | 
 7 | # Tooling Logs
 8 | npm-debug.log*
 9 | yarn-debug.log*
10 | yarn-error.log*
11 | selenium-debug.log
12 | 
13 | # IDEs and editors
14 | /.idea
15 | .project
16 | .classpath
17 | *.launch
18 | .settings/
19 | 
20 | # System Files
21 | .DS_Store
22 | Thumbs.db
23 | 
24 | # Generated Files
25 | dist/
26 | test/unit/coverage
27 | test/e2e/reports
28 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserlist" field in package.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/FRONTEND_INSTRUCTIONS.md:
--------------------------------------------------------------------------------
  1 | > *Note: Delete this file before publishing your app!*
  2 | 
  3 | ### Using the hosted API
  4 | 
  5 | Simply point your [API requests](../api/) to `https://conduit.productionready.io/api` and you're good to go!
  6 | 
  7 | ### Routing Guidelines
  8 | 
  9 | - Home page (URL: /#/ )
 10 |     - List of tags
 11 |     - List of articles pulled from either Feed, Global, or by Tag
 12 |     - Pagination for list of articles
 13 | - Sign in/Sign up pages (URL: /#/login, /#/register )
 14 |     - Uses JWT (store the token in localStorage)
 15 |     - Authentication can be easily switched to session/cookie based
 16 | - Settings page (URL: /#/settings )
 17 | - Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here )
 18 | - Article page (URL: /#/article/article-slug-here )
 19 |     - Delete article button (only shown to article's author)
 20 |     - Render markdown from server client side
 21 |     - Comments section at bottom of page
 22 |     - Delete comment button (only shown to comment's author)
 23 | - Profile page (URL: /#/profile/:username, /#/profile/:username/favorites )
 24 |     - Show basic user info
 25 |     - List of articles populated from author's created articles or author's favorited articles
 26 | 
 27 | # Styles
 28 | 
 29 | Instead of having the Bootstrap theme included locally, we recommend loading the precompiled theme from our CDN (our [header template](#header) does this by default):
 30 | 
 31 | ```html
 32 | <link rel="stylesheet" href="//demo.productionready.io/main.css">
 33 | ```
 34 | 
 35 | Alternatively, if you want to make modifications to the theme, check out the [theme's repo](https://github.com/gothinkster/conduit-bootstrap-template).
 36 | 
 37 | 
 38 | # Templates
 39 | 
 40 | - [Layout](#layout)
 41 |   - [Header](#header)
 42 |   - [Footer](#footer)
 43 | - [Pages](#pages)
 44 |   - [Home](#home)
 45 |   - [Login/Register](#loginregister)
 46 |   - [Profile](#profile)
 47 |   - [Settings](#settings)
 48 |   - [Create/Edit Article](#createedit-article)
 49 |   - [Article](#article)
 50 |   
 51 | 
 52 | ## Layout
 53 | 
 54 | 
 55 | ### Header
 56 | 
 57 | ```html
 58 | <!DOCTYPE html>
 59 | <html>
 60 |   <head>
 61 |     <meta charset="utf-8">
 62 |     <title>Conduit</title>
 63 |     <!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
 64 |     <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
 65 |     <link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
 66 |     <!-- Import the custom Bootstrap 4 theme from our hosted CDN -->
 67 |     <link rel="stylesheet" href="//demo.productionready.io/main.css">
 68 |   </head>
 69 |   <body>
 70 | 
 71 |     <nav class="navbar navbar-light">
 72 |       <div class="container">
 73 |         <a class="navbar-brand" href="index.html">conduit</a>
 74 |         <ul class="nav navbar-nav pull-xs-right">
 75 |           <li class="nav-item">
 76 |             <a class="nav-link" href="">
 77 |               <i class="ion-compose"></i>&nbsp;New Post
 78 |             </a>
 79 |           </li>
 80 |           <li class="nav-item">
 81 |             <a class="nav-link" href="">Sign up</a>
 82 |           </li>
 83 |           <li class="nav-item">
 84 |             <a class="nav-link" href="">Settings</a>
 85 |           </li>
 86 |           <!-- Add "active" class when you're on that page" -->
 87 |           <li class="nav-item active">
 88 |             <a class="nav-link" href="">Home</a>
 89 |           </li>
 90 |         </ul>
 91 |       </div>
 92 |     </nav>
 93 | ```
 94 | 
 95 | ### Footer
 96 | ```html
 97 |     <footer>
 98 |       <div class="container">
 99 |         <a href="/" class="logo-font">conduit</a>
100 |         <span class="attribution">
101 |           An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp; design licensed under MIT.
102 |         </span>
103 |       </div>
104 |     </footer>
105 | 
106 |   </body>
107 | </html>
108 | ```
109 | 
110 | ## Pages
111 | 
112 | ### Home
113 | ```html
114 | <div class="home-page">
115 | 
116 |   <div class="banner">
117 |     <div class="container">
118 |       <h1 class="logo-font">conduit</h1>
119 |       <p>A place to share your knowledge.</p>
120 |     </div>
121 |   </div>
122 | 
123 |   <div class="container page">
124 |     <div class="row">
125 | 
126 |       <div class="col-md-9">
127 |         <div class="feed-toggle">
128 |           <ul class="nav nav-pills outline-active">
129 |             <li class="nav-item">
130 |               <a class="nav-link disabled" href="">Your Feed</a>
131 |             </li>
132 |             <li class="nav-item">
133 |               <a class="nav-link active" href="">Global Feed</a>
134 |             </li>
135 |           </ul>
136 |         </div>
137 | 
138 |         <div class="post-preview">
139 |           <div class="post-meta">
140 |             <a href="profile.html"><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
141 |             <div class="info">
142 |               <a href="" class="author">Eric Simons</a>
143 |               <span class="date">January 20th</span>
144 |             </div>
145 |             <button class="btn btn-outline-primary btn-sm pull-xs-right">
146 |               <i class="ion-heart"></i> 29
147 |             </button>
148 |           </div>
149 |           <a href="" class="preview-link">
150 |             <h1>How to build webapps that scale</h1>
151 |             <p>This is the description for the post.</p>
152 |             <span>Read more...</span>
153 |           </a>
154 |         </div>
155 | 
156 |         <div class="post-preview">
157 |           <div class="post-meta">
158 |             <a href="profile.html"><img src="http://i.imgur.com/N4VcUeJ.jpg" /></a>
159 |             <div class="info">
160 |               <a href="" class="author">Albert Pai</a>
161 |               <span class="date">January 20th</span>
162 |             </div>
163 |             <button class="btn btn-outline-primary btn-sm pull-xs-right">
164 |               <i class="ion-heart"></i> 32
165 |             </button>
166 |           </div>
167 |           <a href="" class="preview-link">
168 |             <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
169 |             <p>This is the description for the post.</p>
170 |             <span>Read more...</span>
171 |           </a>
172 |         </div>
173 | 
174 |       </div>
175 | 
176 |       <div class="col-md-3">
177 |         <div class="sidebar">
178 |           <p>Popular Tags</p>
179 | 
180 |           <div class="tag-list">
181 |             <a href="" class="label label-pill label-default">programming</a>
182 |             <a href="" class="label label-pill label-default">javascript</a>
183 |             <a href="" class="label label-pill label-default">angularjs</a>
184 |             <a href="" class="label label-pill label-default">react</a>
185 |             <a href="" class="label label-pill label-default">mean</a>
186 |             <a href="" class="label label-pill label-default">node</a>
187 |             <a href="" class="label label-pill label-default">rails</a>
188 |           </div>
189 |         </div>
190 |       </div>
191 | 
192 |     </div>
193 |   </div>
194 | 
195 | </div>
196 | ```
197 | 
198 | ### Login/Register
199 | 
200 | ```html
201 | <div class="auth-page">
202 |   <div class="container page">
203 |     <div class="row">
204 | 
205 |       <div class="col-md-6 col-md-offset-3 col-xs-12">
206 |         <h1 class="text-xs-center">Sign up</h1>
207 |         <p class="text-xs-center">
208 |           <a href="">Have an account?</a>
209 |         </p>
210 | 
211 |         <ul class="error-messages">
212 |           <li>That email is already taken</li>
213 |         </ul>
214 | 
215 |         <form>
216 |           <fieldset class="form-group">
217 |             <input class="form-control form-control-lg" type="text" placeholder="Your Name">
218 |           </fieldset>
219 |           <fieldset class="form-group">
220 |             <input class="form-control form-control-lg" type="text" placeholder="Email">
221 |           </fieldset>
222 |           <fieldset class="form-group">
223 |             <input class="form-control form-control-lg" type="password" placeholder="Password">
224 |           </fieldset>
225 |           <button class="btn btn-lg btn-primary pull-xs-right">
226 |             Sign up
227 |           </button>
228 |         </form>
229 |       </div>
230 | 
231 |     </div>
232 |   </div>
233 | </div>
234 | ```
235 | 
236 | ### Profile
237 | 
238 | ```html
239 | <div class="profile-page">
240 | 
241 |   <div class="user-info">
242 |     <div class="container">
243 |       <div class="row">
244 | 
245 |         <div class="col-md-10 col-md-offset-1">
246 |           <img src="http://i.imgur.com/Qr71crq.jpg" class="user-img" />
247 |           <h4>Eric Simons</h4>
248 |           <p>
249 |             Cofounder @GoThinkster, lived in Aol's HQ for a few months, kinda looks like Peeta from the Hunger Games
250 |           </p>
251 |           <button class="btn btn-sm btn-outline-secondary action-btn">
252 |             <i class="ion-plus-round"></i>
253 |             &nbsp;
254 |             Follow Eric Simons <span class="counter">(10)</span>
255 |           </button>
256 |         </div>
257 | 
258 |       </div>
259 |     </div>
260 |   </div>
261 | 
262 |   <div class="container">
263 |     <div class="row">
264 | 
265 |       <div class="col-md-10 col-md-offset-1">
266 |         <div class="posts-toggle">
267 |           <ul class="nav nav-pills outline-active">
268 |             <li class="nav-item">
269 |               <a class="nav-link active" href="">My Posts</a>
270 |             </li>
271 |             <li class="nav-item">
272 |               <a class="nav-link" href="">Favorited Posts</a>
273 |             </li>
274 |           </ul>
275 |         </div>
276 | 
277 |         <div class="post-preview">
278 |           <div class="post-meta">
279 |             <a href=""><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
280 |             <div class="info">
281 |               <a href="" class="author">Eric Simons</a>
282 |               <span class="date">January 20th</span>
283 |             </div>
284 |             <button class="btn btn-outline-primary btn-sm pull-xs-right">
285 |               <i class="ion-heart"></i> 29
286 |             </button>
287 |           </div>
288 |           <a href="" class="preview-link">
289 |             <h1>How to build webapps that scale</h1>
290 |             <p>This is the description for the post.</p>
291 |             <span>Read more...</span>
292 |           </a>
293 |         </div>
294 | 
295 |         <div class="post-preview">
296 |           <div class="post-meta">
297 |             <a href=""><img src="http://i.imgur.com/N4VcUeJ.jpg" /></a>
298 |             <div class="info">
299 |               <a href="" class="author">Albert Pai</a>
300 |               <span class="date">January 20th</span>
301 |             </div>
302 |             <button class="btn btn-outline-primary btn-sm pull-xs-right">
303 |               <i class="ion-heart"></i> 32
304 |             </button>
305 |           </div>
306 |           <a href="" class="preview-link">
307 |             <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
308 |             <p>This is the description for the post.</p>
309 |             <span>Read more...</span>
310 |           </a>
311 |         </div>
312 | 
313 | 
314 |       </div>
315 | 
316 |     </div>
317 |   </div>
318 | 
319 | </div>
320 | ```
321 | 
322 | ### Settings
323 | 
324 | ```html
325 | <div class="settings-page">
326 |   <div class="container page">
327 |     <div class="row">
328 | 
329 |       <div class="col-md-6 col-md-offset-3 col-xs-12">
330 |         <h1 class="text-xs-center">Your Settings</h1>
331 | 
332 |         <form>
333 |           <fieldset class="form-group">
334 |             <input class="form-control" type="text" placeholder="URL of profile picture">
335 |           </fieldset>
336 |           <fieldset class="form-group">
337 |             <input class="form-control form-control-lg" type="text" placeholder="Your Name">
338 |           </fieldset>
339 |           <fieldset class="form-group">
340 |             <textarea class="form-control form-control-lg" rows="8" placeholder="Short bio about you"></textarea>
341 |           </fieldset>
342 |           <fieldset class="form-group">
343 |             <input class="form-control form-control-lg" type="text" placeholder="Email">
344 |           </fieldset>
345 |           <fieldset class="form-group">
346 |             <input class="form-control form-control-lg" type="password" placeholder="Password">
347 |           </fieldset>
348 |           <button class="btn btn-lg btn-primary pull-xs-right">
349 |             Update Settings
350 |           </button>
351 |         </form>
352 |       </div>
353 | 
354 |     </div>
355 |   </div>
356 | </div>
357 | ```
358 | 
359 | ### Create/Edit Article
360 | 
361 | ```html
362 | <div class="editor-page">
363 |   <div class="container page">
364 |     <div class="row">
365 | 
366 |       <div class="col-md-10 col-md-offset-1 col-xs-12">
367 |         <form>
368 |           <fieldset class="form-group">
369 |             <input class="form-control form-control-lg" type="text" placeholder="Post Title">
370 |           </fieldset>
371 |           <fieldset class="form-group">
372 |             <textarea class="form-control" rows="8" placeholder="Write your post (in markdown)"></textarea>
373 |           </fieldset>
374 |           <fieldset class="form-group">
375 |             <input class="form-control" type="text" placeholder="Enter tags">
376 |             <div class="tag-list">
377 |               <span class="label label-pill label-default"><i class="ion-close-round"></i> programming</span>
378 |               <span class="label label-pill label-default"><i class="ion-close-round"></i> javascript</span>
379 |               <span class="label label-pill label-default"><i class="ion-close-round"></i> webdev</span>
380 |             </div>
381 |           </fieldset>
382 |           <button class="btn btn-lg btn-primary pull-xs-right">
383 |             Create Post
384 |           </button>
385 |         </form>
386 |       </div>
387 | 
388 |     </div>
389 |   </div>
390 | </div>
391 | 
392 | 
393 | <%= footer %>
394 | ```
395 | 
396 | ### Article
397 | 
398 | ```html
399 | <div class="post-page">
400 | 
401 |   <div class="banner">
402 |     <div class="container">
403 | 
404 |       <h1>How to build webapps that scale</h1>
405 | 
406 |       <div class="post-meta">
407 |         <a href=""><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
408 |         <div class="info">
409 |           <a href="" class="author">Eric Simons</a>
410 |           <span class="date">January 20th</span>
411 |         </div>
412 |         <button class="btn btn-sm btn-outline-secondary">
413 |           <i class="ion-plus-round"></i>
414 |           &nbsp;
415 |           Follow Eric Simons <span class="counter">(10)</span>
416 |         </button>
417 |         &nbsp;&nbsp;
418 |         <button class="btn btn-sm btn-outline-primary">
419 |           <i class="ion-heart"></i>
420 |           &nbsp;
421 |           Favorite Post <span class="counter">(29)</span>
422 |         </button>
423 |       </div>
424 | 
425 |     </div>
426 |   </div>
427 | 
428 |   <div class="container page">
429 | 
430 |     <div class="row post-content">
431 |       <div class="col-md-12">
432 |         <p>
433 |         Web development technologies have evolved at an incredible clip over the past few years.
434 |         </p>
435 |         <h2 id="introducing-ionic">Introducing RealWorld.</h2>
436 |         <p>It's a great solution for learning how other frameworks work.</p>
437 |       </div>
438 |     </div>
439 | 
440 |     <hr />
441 | 
442 |     <div class="post-actions">
443 |       <div class="post-meta">
444 |         <a href="profile.html"><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
445 |         <div class="info">
446 |           <a href="" class="author">Eric Simons</a>
447 |           <span class="date">January 20th</span>
448 |         </div>
449 | 
450 |         <button class="btn btn-sm btn-outline-secondary">
451 |           <i class="ion-plus-round"></i>
452 |           &nbsp;
453 |           Follow Eric Simons <span class="counter">(10)</span>
454 |         </button>
455 |         &nbsp;
456 |         <button class="btn btn-sm btn-outline-primary">
457 |           <i class="ion-heart"></i>
458 |           &nbsp;
459 |           Favorite Post <span class="counter">(29)</span>
460 |         </button>
461 |       </div>
462 |     </div>
463 | 
464 |     <div class="row">
465 | 
466 |       <div class="col-md-8 col-md-offset-2">
467 | 
468 |         <div class="card">
469 |           <div class="card-block">
470 |             <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
471 |           </div>
472 |           <div class="card-footer">
473 |             <a href="" class="comment-author">
474 |               <img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
475 |             </a>
476 |             &nbsp;
477 |             <a href="" class="comment-author">Jacob Schmidt</a>
478 |             <span class="date-posted">Dec 29th</span>
479 |           </div>
480 |         </div>
481 | 
482 |         <div class="card">
483 |           <div class="card-block">
484 |             <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
485 |           </div>
486 |           <div class="card-footer">
487 |             <a href="" class="comment-author">
488 |               <img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
489 |             </a>
490 |             &nbsp;
491 |             <a href="" class="comment-author">Jacob Schmidt</a>
492 |             <span class="date-posted">Dec 29th</span>
493 |             <span class="mod-options">
494 |               <i class="ion-edit"></i>
495 |               <i class="ion-trash-a"></i>
496 |             </span>
497 |           </div>
498 |         </div>
499 | 
500 |         <form class="card comment-form">
501 |           <div class="card-block">
502 |             <textarea class="form-control" placeholder="Write a comment..." rows="3"></textarea>
503 |           </div>
504 |           <div class="card-footer">
505 |             <img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
506 |             <button class="btn btn-sm btn-primary">
507 |              Post Comment
508 |             </button>
509 |           </div>
510 |         </form>
511 | 
512 |       </div>
513 | 
514 |     </div>
515 | 
516 |   </div>
517 | 
518 | </div>
519 | ```
520 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | require('./check-versions')()
 2 | 
 3 | process.env.NODE_ENV = 'production'
 4 | 
 5 | var ora = require('ora')
 6 | var rm = require('rimraf')
 7 | var path = require('path')
 8 | var chalk = require('chalk')
 9 | var webpack = require('webpack')
10 | var config = require('../config')
11 | var webpackConfig = require('./webpack.prod.conf')
12 | 
13 | var spinner = ora('building for production...')
14 | spinner.start()
15 | 
16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
17 |   if (err) throw err
18 |   webpack(webpackConfig, function (err, stats) {
19 |     spinner.stop()
20 |     if (err) throw err
21 |     process.stdout.write(stats.toString({
22 |       colors: true,
23 |       modules: false,
24 |       children: false,
25 |       chunks: false,
26 |       chunkModules: false
27 |     }) + '\n\n')
28 | 
29 |     console.log(chalk.cyan('  Build complete.\n'))
30 |     console.log(chalk.yellow(
31 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
32 |       '  Opening index.html over file:// won\'t work.\n'
33 |     ))
34 |   })
35 | })
36 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | var chalk = require('chalk')
 2 | var semver = require('semver')
 3 | var packageConfig = require('../package.json')
 4 | var shell = require('shelljs')
 5 | function exec (cmd) {
 6 |   return require('child_process').execSync(cmd).toString().trim()
 7 | }
 8 | 
 9 | var versionRequirements = [
10 |   {
11 |     name: 'node',
12 |     currentVersion: semver.clean(process.version),
13 |     versionRequirement: packageConfig.engines.node
14 |   },
15 | ]
16 | 
17 | if (shell.which('npm')) {
18 |   versionRequirements.push({
19 |     name: 'npm',
20 |     currentVersion: exec('npm --version'),
21 |     versionRequirement: packageConfig.engines.npm
22 |   })
23 | }
24 | 
25 | module.exports = function () {
26 |   var warnings = []
27 |   for (var i = 0; i < versionRequirements.length; i++) {
28 |     var mod = versionRequirements[i]
29 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
30 |       warnings.push(mod.name + ': ' +
31 |         chalk.red(mod.currentVersion) + ' should be ' +
32 |         chalk.green(mod.versionRequirement)
33 |       )
34 |     }
35 |   }
36 | 
37 |   if (warnings.length) {
38 |     console.log('')
39 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
40 |     console.log()
41 |     for (var i = 0; i < warnings.length; i++) {
42 |       var warning = warnings[i]
43 |       console.log('  ' + warning)
44 |     }
45 |     console.log()
46 |     process.exit(1)
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/build/dev-client.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | require('eventsource-polyfill')
 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 4 | 
 5 | hotClient.subscribe(function (event) {
 6 |   if (event.action === 'reload') {
 7 |     window.location.reload()
 8 |   }
 9 | })
10 | 


--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
 1 | require('./check-versions')()
 2 | 
 3 | var config = require('../config')
 4 | if (!process.env.NODE_ENV) {
 5 |   process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 6 | }
 7 | 
 8 | var opn = require('opn')
 9 | var path = require('path')
10 | var express = require('express')
11 | var webpack = require('webpack')
12 | var proxyMiddleware = require('http-proxy-middleware')
13 | var webpackConfig = process.env.NODE_ENV === 'testing'
14 |   ? require('./webpack.prod.conf')
15 |   : require('./webpack.dev.conf')
16 | 
17 | // default port where dev server listens for incoming traffic
18 | var port = process.env.PORT || config.dev.port
19 | // automatically open browser, if not set will be false
20 | var autoOpenBrowser = !!config.dev.autoOpenBrowser
21 | // Define HTTP proxies to your custom API backend
22 | // https://github.com/chimurai/http-proxy-middleware
23 | var proxyTable = config.dev.proxyTable
24 | 
25 | var app = express()
26 | var compiler = webpack(webpackConfig)
27 | 
28 | var devMiddleware = require('webpack-dev-middleware')(compiler, {
29 |   publicPath: webpackConfig.output.publicPath,
30 |   quiet: true
31 | })
32 | 
33 | var hotMiddleware = require('webpack-hot-middleware')(compiler, {
34 |   log: () => {}
35 | })
36 | // force page reload when html-webpack-plugin template changes
37 | compiler.plugin('compilation', function (compilation) {
38 |   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
39 |     hotMiddleware.publish({ action: 'reload' })
40 |     cb()
41 |   })
42 | })
43 | 
44 | // proxy api requests
45 | Object.keys(proxyTable).forEach(function (context) {
46 |   var options = proxyTable[context]
47 |   if (typeof options === 'string') {
48 |     options = { target: options }
49 |   }
50 |   app.use(proxyMiddleware(options.filter || context, options))
51 | })
52 | 
53 | // handle fallback for HTML5 history API
54 | app.use(require('connect-history-api-fallback')())
55 | 
56 | // serve webpack bundle output
57 | app.use(devMiddleware)
58 | 
59 | // enable hot-reload and state-preserving
60 | // compilation error display
61 | app.use(hotMiddleware)
62 | 
63 | // serve pure static assets
64 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
65 | app.use(staticPath, express.static('./static'))
66 | 
67 | var uri = 'http://localhost:' + port
68 | 
69 | var _resolve
70 | var readyPromise = new Promise(resolve => {
71 |   _resolve = resolve
72 | })
73 | 
74 | console.log('> Starting dev server...')
75 | devMiddleware.waitUntilValid(() => {
76 |   console.log('> Listening at ' + uri + '\n')
77 |   // when env is testing, don't need open it
78 |   if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
79 |     opn(uri)
80 |   }
81 |   _resolve()
82 | })
83 | 
84 | var server = app.listen(port)
85 | 
86 | module.exports = {
87 |   ready: readyPromise,
88 |   close: () => {
89 |     server.close()
90 |   }
91 | }
92 | 


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var config = require('../config')
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 4 | 
 5 | exports.assetsPath = function (_path) {
 6 |   var assetsSubDirectory = process.env.NODE_ENV === 'production'
 7 |     ? config.build.assetsSubDirectory
 8 |     : config.dev.assetsSubDirectory
 9 |   return path.posix.join(assetsSubDirectory, _path)
10 | }
11 | 
12 | exports.cssLoaders = function (options) {
13 |   options = options || {}
14 | 
15 |   var cssLoader = {
16 |     loader: 'css-loader',
17 |     options: {
18 |       minimize: process.env.NODE_ENV === 'production',
19 |       sourceMap: options.sourceMap
20 |     }
21 |   }
22 | 
23 |   // generate loader string to be used with extract text plugin
24 |   function generateLoaders (loader, loaderOptions) {
25 |     var loaders = [cssLoader]
26 |     if (loader) {
27 |       loaders.push({
28 |         loader: loader + '-loader',
29 |         options: Object.assign({}, loaderOptions, {
30 |           sourceMap: options.sourceMap
31 |         })
32 |       })
33 |     }
34 | 
35 |     // Extract CSS when that option is specified
36 |     // (which is the case during production build)
37 |     if (options.extract) {
38 |       return ExtractTextPlugin.extract({
39 |         use: loaders,
40 |         fallback: 'vue-style-loader'
41 |       })
42 |     } else {
43 |       return ['vue-style-loader'].concat(loaders)
44 |     }
45 |   }
46 | 
47 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
48 |   return {
49 |     css: generateLoaders(),
50 |     postcss: generateLoaders(),
51 |     less: generateLoaders('less'),
52 |     sass: generateLoaders('sass', { indentedSyntax: true }),
53 |     scss: generateLoaders('sass'),
54 |     stylus: generateLoaders('stylus'),
55 |     styl: generateLoaders('stylus')
56 |   }
57 | }
58 | 
59 | // Generate loaders for standalone style files (outside of .vue)
60 | exports.styleLoaders = function (options) {
61 |   var output = []
62 |   var loaders = exports.cssLoaders(options)
63 |   for (var extension in loaders) {
64 |     var loader = loaders[extension]
65 |     output.push({
66 |       test: new RegExp('\\.' + extension + '$'),
67 |       use: loader
68 |     })
69 |   }
70 |   return output
71 | }
72 | 


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | var utils = require('./utils')
 2 | var config = require('../config')
 3 | var isProduction = process.env.NODE_ENV === 'production'
 4 | 
 5 | module.exports = {
 6 |   loaders: utils.cssLoaders({
 7 |     sourceMap: isProduction
 8 |       ? config.build.productionSourceMap
 9 |       : config.dev.cssSourceMap,
10 |     extract: isProduction
11 |   })
12 | }
13 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var utils = require('./utils')
 3 | var config = require('../config')
 4 | var vueLoaderConfig = require('./vue-loader.conf')
 5 | 
 6 | function resolve (dir) {
 7 |   return path.join(__dirname, '..', dir)
 8 | }
 9 | 
10 | module.exports = {
11 |   entry: {
12 |     app: './src/main.js'
13 |   },
14 |   output: {
15 |     path: config.build.assetsRoot,
16 |     filename: '[name].js',
17 |     publicPath: process.env.NODE_ENV === 'production'
18 |       ? config.build.assetsPublicPath
19 |       : config.dev.assetsPublicPath
20 |   },
21 |   resolve: {
22 |     extensions: ['.js', '.vue', '.json'],
23 |     alias: {
24 |       'vue$': 'vue/dist/vue.esm.js',
25 |       '@': resolve('src')
26 |     }
27 |   },
28 |   module: {
29 |     rules: [
30 |       {
31 |         test: /\.(js|vue)$/,
32 |         loader: 'eslint-loader',
33 |         enforce: 'pre',
34 |         include: [resolve('src'), resolve('test')],
35 |         options: {
36 |           formatter: require('eslint-friendly-formatter')
37 |         }
38 |       },
39 |       {
40 |         test: /\.vue$/,
41 |         loader: 'vue-loader',
42 |         options: vueLoaderConfig
43 |       },
44 |       {
45 |         test: /\.js$/,
46 |         loader: 'babel-loader',
47 |         include: [resolve('src'), resolve('test')]
48 |       },
49 |       {
50 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
51 |         loader: 'url-loader',
52 |         options: {
53 |           limit: 10000,
54 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
55 |         }
56 |       },
57 |       {
58 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
59 |         loader: 'url-loader',
60 |         options: {
61 |           limit: 10000,
62 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
63 |         }
64 |       }
65 |     ]
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | var utils = require('./utils')
 2 | var webpack = require('webpack')
 3 | var config = require('../config')
 4 | var merge = require('webpack-merge')
 5 | var baseWebpackConfig = require('./webpack.base.conf')
 6 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 8 | 
 9 | // add hot-reload related code to entry chunks
10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) {
11 |   baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
12 | })
13 | 
14 | module.exports = merge(baseWebpackConfig, {
15 |   module: {
16 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
17 |   },
18 |   // cheap-module-eval-source-map is faster for development
19 |   devtool: '#cheap-module-eval-source-map',
20 |   plugins: [
21 |     new webpack.DefinePlugin({
22 |       'process.env': config.dev.env
23 |     }),
24 |     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.NoEmitOnErrorsPlugin(),
27 |     // https://github.com/ampedandwired/html-webpack-plugin
28 |     new HtmlWebpackPlugin({
29 |       filename: 'index.html',
30 |       template: 'index.html',
31 |       inject: true
32 |     }),
33 |     new FriendlyErrorsPlugin()
34 |   ]
35 | })
36 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | var path = require('path')
  2 | var utils = require('./utils')
  3 | var webpack = require('webpack')
  4 | var config = require('../config')
  5 | var merge = require('webpack-merge')
  6 | var baseWebpackConfig = require('./webpack.base.conf')
  7 | var CopyWebpackPlugin = require('copy-webpack-plugin')
  8 | var HtmlWebpackPlugin = require('html-webpack-plugin')
  9 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 10 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 11 | 
 12 | var env = process.env.NODE_ENV === 'testing'
 13 |   ? require('../config/test.env')
 14 |   : config.build.env
 15 | 
 16 | var webpackConfig = merge(baseWebpackConfig, {
 17 |   module: {
 18 |     rules: utils.styleLoaders({
 19 |       sourceMap: config.build.productionSourceMap,
 20 |       extract: true
 21 |     })
 22 |   },
 23 |   devtool: config.build.productionSourceMap ? '#source-map' : false,
 24 |   output: {
 25 |     path: config.build.assetsRoot,
 26 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 27 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 28 |   },
 29 |   plugins: [
 30 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 31 |     new webpack.DefinePlugin({
 32 |       'process.env': env
 33 |     }),
 34 |     new webpack.optimize.UglifyJsPlugin({
 35 |       compress: {
 36 |         warnings: false
 37 |       },
 38 |       sourceMap: true
 39 |     }),
 40 |     // extract css into its own file
 41 |     new ExtractTextPlugin({
 42 |       filename: utils.assetsPath('css/[name].[contenthash].css')
 43 |     }),
 44 |     // Compress extracted CSS. We are using this plugin so that possible
 45 |     // duplicated CSS from different components can be deduped.
 46 |     new OptimizeCSSPlugin({
 47 |       cssProcessorOptions: {
 48 |         safe: true
 49 |       }
 50 |     }),
 51 |     // generate dist index.html with correct asset hash for caching.
 52 |     // you can customize output by editing /index.html
 53 |     // see https://github.com/ampedandwired/html-webpack-plugin
 54 |     new HtmlWebpackPlugin({
 55 |       filename: process.env.NODE_ENV === 'testing'
 56 |         ? 'index.html'
 57 |         : config.build.index,
 58 |       template: 'index.html',
 59 |       inject: true,
 60 |       minify: {
 61 |         removeComments: true,
 62 |         collapseWhitespace: true,
 63 |         removeAttributeQuotes: true
 64 |         // more options:
 65 |         // https://github.com/kangax/html-minifier#options-quick-reference
 66 |       },
 67 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 68 |       chunksSortMode: 'dependency'
 69 |     }),
 70 |     // split vendor js into its own file
 71 |     new webpack.optimize.CommonsChunkPlugin({
 72 |       name: 'vendor',
 73 |       minChunks: function (module, count) {
 74 |         // any required modules inside node_modules are extracted to vendor
 75 |         return (
 76 |           module.resource &&
 77 |           /\.js$/.test(module.resource) &&
 78 |           module.resource.indexOf(
 79 |             path.join(__dirname, '../node_modules')
 80 |           ) === 0
 81 |         )
 82 |       }
 83 |     }),
 84 |     // extract webpack runtime and module manifest to its own file in order to
 85 |     // prevent vendor hash from being updated whenever app bundle is updated
 86 |     new webpack.optimize.CommonsChunkPlugin({
 87 |       name: 'manifest',
 88 |       chunks: ['vendor']
 89 |     }),
 90 |     // copy custom static assets
 91 |     new CopyWebpackPlugin([
 92 |       {
 93 |         from: path.resolve(__dirname, '../static'),
 94 |         to: config.build.assetsSubDirectory,
 95 |         ignore: ['.*']
 96 |       }
 97 |     ])
 98 |   ]
 99 | })
100 | 
101 | if (config.build.productionGzip) {
102 |   var CompressionWebpackPlugin = require('compression-webpack-plugin')
103 | 
104 |   webpackConfig.plugins.push(
105 |     new CompressionWebpackPlugin({
106 |       asset: '[path].gz[query]',
107 |       algorithm: 'gzip',
108 |       test: new RegExp(
109 |         '\\.(' +
110 |         config.build.productionGzipExtensions.join('|') +
111 |         ')$'
112 |       ),
113 |       threshold: 10240,
114 |       minRatio: 0.8
115 |     })
116 |   )
117 | }
118 | 
119 | if (config.build.bundleAnalyzerReport) {
120 |   var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
121 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
122 | }
123 | 
124 | module.exports = webpackConfig
125 | 


--------------------------------------------------------------------------------
/build/webpack.test.conf.js:
--------------------------------------------------------------------------------
 1 | // This is the webpack config used for unit tests.
 2 | 
 3 | var utils = require('./utils')
 4 | var webpack = require('webpack')
 5 | var merge = require('webpack-merge')
 6 | var baseConfig = require('./webpack.base.conf')
 7 | 
 8 | var webpackConfig = merge(baseConfig, {
 9 |   // use inline sourcemap for karma-sourcemap-loader
10 |   module: {
11 |     rules: utils.styleLoaders()
12 |   },
13 |   devtool: '#inline-source-map',
14 |   resolveLoader: {
15 |     alias: {
16 |       // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 
17 |       // see discussion at https://github.com/vuejs/vue-loader/issues/724
18 |       'scss-loader': 'sass-loader'
19 |     }
20 |   },
21 |   plugins: [
22 |     new webpack.DefinePlugin({
23 |       'process.env': require('../config/test.env')
24 |     })
25 |   ]
26 | })
27 | 
28 | // no need for app entry during tests
29 | delete webpackConfig.entry
30 | 
31 | module.exports = webpackConfig
32 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
1 | machine:
2 |   node:
3 |     version: 7.5.0
4 | 
5 | test:
6 |   override:
7 |     - npm run unit
8 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: '/',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 8080,
27 |     autoOpenBrowser: true,
28 |     assetsSubDirectory: 'static',
29 |     assetsPublicPath: '/',
30 |     proxyTable: {},
31 |     // CSS Sourcemaps off by default because relative paths are "buggy"
32 |     // with this option, according to the CSS-Loader README
33 |     // (https://github.com/webpack/css-loader#sourcemaps)
34 |     // In our experience, they generally work as expected,
35 |     // just be aware of this issue when enabling this option.
36 |     cssSourceMap: false
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/config/test.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var devEnv = require('./dev.env')
3 | 
4 | module.exports = merge(devEnv, {
5 |   NODE_ENV: '"testing"'
6 | })
7 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Conduit</title>
 6 |     <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
 7 |     <link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
 8 |     <link rel="stylesheet" href="//demo.productionready.io/main.css">
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <!-- built files will be auto injected -->
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mchandleraz/realworld-vue/9ed0542d661c58bdfc1596cff156dbfd10859cf6/logo.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "realworld-vue",
  3 |   "version": "1.0.0",
  4 |   "description": "A Vue.js project",
  5 |   "author": "Matt Chandler <mcaz689@gmail.com>",
  6 |   "private": true,
  7 |   "scripts": {
  8 |     "dev": "node build/dev-server.js",
  9 |     "start": "node build/dev-server.js",
 10 |     "build": "node build/build.js",
 11 |     "unit": "cross-env BABEL_ENV=test NODE_ENV=test karma start test/unit/karma.conf.js --single-run",
 12 |     "e2e": "node test/e2e/runner.js",
 13 |     "test": "npm run unit && npm run e2e",
 14 |     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
 15 |     "report-coverage": "codecov"
 16 |   },
 17 |   "dependencies": {
 18 |     "axios": "^0.16.1",
 19 |     "babel-runtime": "^6.23.0",
 20 |     "moment": "^2.18.1",
 21 |     "vue": "^2.3.3",
 22 |     "vue-axios": "^2.0.2",
 23 |     "vue-router": "^2.5.3",
 24 |     "vuex": "^2.3.1"
 25 |   },
 26 |   "devDependencies": {
 27 |     "autoprefixer": "^6.7.2",
 28 |     "babel-core": "^6.24.1",
 29 |     "babel-eslint": "^7.1.1",
 30 |     "babel-loader": "^6.4.1",
 31 |     "babel-plugin-istanbul": "^4.1.1",
 32 |     "babel-plugin-transform-runtime": "^6.23.0",
 33 |     "babel-polyfill": "^6.23.0",
 34 |     "babel-preset-env": "^1.5.1",
 35 |     "babel-preset-stage-2": "^6.22.0",
 36 |     "babel-register": "^6.22.0",
 37 |     "chai": "^3.5.0",
 38 |     "chalk": "^1.1.3",
 39 |     "chromedriver": "^2.27.2",
 40 |     "connect-history-api-fallback": "^1.3.0",
 41 |     "copy-webpack-plugin": "^4.0.1",
 42 |     "cross-env": "^4.0.0",
 43 |     "cross-spawn": "^5.0.1",
 44 |     "css-loader": "^0.28.0",
 45 |     "eslint": "^3.19.0",
 46 |     "eslint-config-airbnb-base": "^11.1.3",
 47 |     "eslint-friendly-formatter": "^2.0.7",
 48 |     "eslint-import-resolver-webpack": "^0.8.1",
 49 |     "eslint-loader": "^1.7.1",
 50 |     "eslint-plugin-html": "^2.0.0",
 51 |     "eslint-plugin-import": "^2.2.0",
 52 |     "eventsource-polyfill": "^0.9.6",
 53 |     "express": "^4.14.1",
 54 |     "extract-text-webpack-plugin": "^2.0.0",
 55 |     "file-loader": "^0.11.1",
 56 |     "friendly-errors-webpack-plugin": "^1.1.3",
 57 |     "html-webpack-plugin": "^2.28.0",
 58 |     "http-proxy-middleware": "^0.17.3",
 59 |     "inject-loader": "^3.0.0",
 60 |     "karma": "^1.4.1",
 61 |     "karma-coverage": "^1.1.1",
 62 |     "karma-mocha": "^1.3.0",
 63 |     "karma-phantomjs-launcher": "^1.0.2",
 64 |     "karma-phantomjs-shim": "^1.4.0",
 65 |     "karma-sinon-chai": "^1.3.1",
 66 |     "karma-sourcemap-loader": "^0.3.7",
 67 |     "karma-spec-reporter": "0.0.30",
 68 |     "karma-webpack": "^2.0.2",
 69 |     "lolex": "^1.5.2",
 70 |     "mocha": "^3.2.0",
 71 |     "nightwatch": "^0.9.12",
 72 |     "opn": "^4.0.2",
 73 |     "optimize-css-assets-webpack-plugin": "^1.3.0",
 74 |     "ora": "^1.2.0",
 75 |     "phantomjs-prebuilt": "^2.1.14",
 76 |     "rimraf": "^2.6.0",
 77 |     "selenium-server": "^3.0.1",
 78 |     "semver": "^5.3.0",
 79 |     "shelljs": "^0.7.6",
 80 |     "sinon": "^2.1.0",
 81 |     "sinon-chai": "^2.8.0",
 82 |     "url-loader": "^0.5.8",
 83 |     "vue-loader": "^11.3.4",
 84 |     "vue-style-loader": "^2.0.5",
 85 |     "vue-template-compiler": "^2.3.3",
 86 |     "webpack": "^2.6.0",
 87 |     "webpack-bundle-analyzer": "^2.2.1",
 88 |     "webpack-dev-middleware": "^1.10.0",
 89 |     "webpack-hot-middleware": "^2.18.0",
 90 |     "webpack-merge": "^4.1.0"
 91 |   },
 92 |   "engines": {
 93 |     "node": ">= 4.0.0",
 94 |     "npm": ">= 3.0.0"
 95 |   },
 96 |   "browserslist": [
 97 |     "> 1%",
 98 |     "last 2 versions",
 99 |     "not ie <= 8"
100 |   ]
101 | }
102 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # ![RealWorld Example App](logo.png)
 2 | 
 3 | > ### Vue.js codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld-example-apps) spec and API.
 4 | 
 5 | 
 6 | ### [Demo]()&nbsp;&nbsp;&nbsp;&nbsp;[RealWorld](https://github.com/gothinkster/realworld)
 7 | 
 8 | 
 9 | This codebase was created to demonstrate a fully fledged fullstack application built with **Vue.js** including CRUD operations, authentication, routing, pagination, and more.
10 | 
11 | We've gone to great lengths to adhere to the **Vue.js** community styleguides & best practices.
12 | 
13 | For more information on how to this works with other frontends/backends, head over to the [RealWorld](https://github.com/gothinkster/realworld) repo.
14 | 
15 | 
16 | # How it works
17 | 
18 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
19 | 
20 | # Getting started
21 | 
22 | 
23 | [![CircleCI](https://circleci.com/gh/mchandleraz/realworld-vue/tree/master.svg?style=svg)](https://circleci.com/gh/mchandleraz/realworld-vue/tree/master)
24 | 
25 | 
26 | ``` bash
27 | # install dependencies
28 | npm install
29 | 
30 | # serve with hot reload at localhost:8080
31 | npm run dev
32 | 
33 | # build for production with minification
34 | npm run build
35 | 
36 | # build for production and view the bundle analyzer report
37 | npm run build --report
38 | 
39 | # run unit tests
40 | npm run unit
41 | 
42 | # run e2e tests
43 | npm run e2e
44 | 
45 | # run all tests
46 | npm test
47 | ```
48 | 
49 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <real-world-header />
 4 |     <router-view></router-view>
 5 |     <real-world-footer />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import RealWorldHeader from '@/components/Header';
11 | import RealWorldFooter from '@/components/Footer';
12 | 
13 | 
14 | export default {
15 |   name: 'app',
16 |   components: {
17 |     RealWorldHeader, RealWorldFooter,
18 |   },
19 | };
20 | </script>
21 | 
22 | <style>
23 | </style>
24 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mchandleraz/realworld-vue/9ed0542d661c58bdfc1596cff156dbfd10859cf6/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Article.vue:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mchandleraz/realworld-vue/9ed0542d661c58bdfc1596cff156dbfd10859cf6/src/components/Article.vue


--------------------------------------------------------------------------------
/src/components/Editor.vue:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mchandleraz/realworld-vue/9ed0542d661c58bdfc1596cff156dbfd10859cf6/src/components/Editor.vue


--------------------------------------------------------------------------------
/src/components/Favorites.vue:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mchandleraz/realworld-vue/9ed0542d661c58bdfc1596cff156dbfd10859cf6/src/components/Favorites.vue


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer id="RealWorldFooter">
 3 |       <div class="container">
 4 |         <router-link :to="{ name: 'home' }" class="logo-font">conduit</router-link>
 5 |         <span class="attribution">
 6 |           An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp; design licensed under MIT.
 7 |         </span>
 8 |       </div>
 9 |     </footer>
10 | </template>
11 | <script>
12 |   export default {
13 |     name: 'RealWorldFooter',
14 |   };
15 | </script>
16 | <style scoped>
17 | </style>
18 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav id="RealWorldHeader" class="navbar navbar-light">
 3 |     <div class="container">
 4 |       <a class="navbar-brand" href="index.html">conduit</a>
 5 |       <ul class="nav navbar-nav pull-xs-right">
 6 |         <li class="nav-item">
 7 |           <a class="nav-link" href="">
 8 |             <i class="ion-compose"></i>&nbsp;New Post
 9 |           </a>
10 |         </li>
11 |         <li class="nav-item">
12 |           <router-link to="/register" class="nav-link" href="">Sign up</router-link>
13 |         </li>
14 |          <li class="nav-item">
15 |           <router-link to="/login" class="nav-link">Sign in</router-link>
16 |         </li>
17 |         <li class="nav-item">
18 |           <router-link to="/settings" class="nav-link" href="">Settings</router-link>
19 |         </li>
20 |         <!-- Add "active" class when you're on that page" -->
21 |         <li class="nav-item active">
22 |           <router-link to="/" class="nav-link" href="">Home</router-link>
23 |         </li>
24 |       </ul>
25 |     </div>
26 |   </nav>
27 | </template>
28 | 
29 | <script>
30 | export default {
31 |   name: 'RealWorldHeader',
32 | };
33 | </script>
34 | 
35 | <style scoped>
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home-page">
 3 |     <div class="banner">
 4 |       <div class="container">
 5 |         <h1 class="logo-font">conduit</h1>
 6 |         <p>{{bannerMessage}}</p>
 7 |       </div>
 8 |     </div>
 9 |     <div class="container page">
10 |       <div class="row">
11 |         <div class="col-md-9">
12 |           <div class="feed-toggle">
13 |             <ul class="nav nav-pills outline-active">
14 |               <li class="nav-item">
15 |                 <a class="nav-link disabled" href="">Your Feed</a>
16 |               </li>
17 |               <li class="nav-item">
18 |                 <a class="nav-link active" href="">Global Feed</a>
19 |               </li>
20 |             </ul>
21 |           </div>
22 |           <real-world-post-preview
23 |             v-for="(article, index) in articles"
24 |             v-bind:article="article"
25 |             v-bind:index="index"
26 |             v-bind:key="article.title">
27 |           </real-world-post-preview>
28 |         </div>
29 |         <div class="col-md-3">
30 |           <div class="sidebar">
31 |             <p>Popular Tags</p>
32 |             <real-world-tag-list
33 |               v-bind:tags="tags"
34 |             ></real-world-tag-list>
35 |           </div>
36 |         </div>
37 |       </div>
38 |     </div>
39 |   </div>
40 | </template>
41 | 
42 | <script>
43 | /* eslint no-unused-vars: "off" */
44 | import { mapMutations } from 'vuex';
45 | import CONSTANTS from '@/constants/Home.constants';
46 | import RealWorldPostPreview from './PostPreview';
47 | import RealWorldTagList from './TagList';
48 | import { FETCH_ARTICLES, FETCH_TAGS } from '../store/actionTypes';
49 | 
50 | export default {
51 |   name: 'home',
52 |   beforeMount() {
53 |     this.$store.dispatch(FETCH_ARTICLES);
54 |     this.$store.dispatch(FETCH_TAGS);
55 |   },
56 |   data() {
57 |     return {
58 |       bannerMessage: CONSTANTS.BANNER_MESSAGE,
59 |     };
60 |   },
61 |   computed: {
62 |     articles() {
63 |       return this.$store.state.home.articles;
64 |     },
65 |     tags() {
66 |       return this.$store.state.home.tags;
67 |     },
68 |   },
69 |   components: {
70 |     RealWorldPostPreview,
71 |     RealWorldTagList,
72 |   },
73 | };
74 | </script>
75 | 
76 | <!-- Add "scoped" attribute to limit CSS to this component only -->
77 | <style scoped>
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="auth-page">
 3 |     <div class="container page">
 4 |       <div class="row">
 5 |         <div class="col-md-6 offset-md-3 col-xs-12">
 6 |           <h1 class="text-xs-center">Sign In</h1>
 7 |           <p class="text-xs-center">
 8 |             <router-link to="register">Need an account?</router-link>
 9 |           </p>
10 |           <form>
11 |             <fieldset>
12 |               <fieldset class="form-group">
13 |                 <input type="email" class="form-control form-control-lg" placeholder="Email" autocomplete="off">
14 |               </fieldset>
15 |               <fieldset class="form-group">
16 |                 <input type="password" class="form-control form-control-lg" placeholder="Password" autocomplete="off">
17 |               </fieldset>
18 |               <button class="btn btn-lg btn-primary pull-xs-right" type="submit">Sign in</button>
19 |             </fieldset>
20 |           </form>
21 |         </div>
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   name: 'RealWorldLogin',
30 | };
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/components/PostPreview.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="article-preview">
 3 |     <div class="article-meta">
 4 |       <a href="profile.html"><img v-bind:src="article.author.image" /></a>
 5 |       <div class="info">
 6 |         <a href="" class="author">{{article.author.username}}</a>
 7 |         <span class="date">{{article.createdAt | date}}</span>
 8 |       </div>
 9 |       <button class="btn btn-outline-primary btn-sm pull-xs-right">
10 |         <i class="ion-heart"></i> {{article.favoritesCount}}
11 |       </button>
12 |     </div>
13 |     <a href="" class="preview-link">
14 |       <h1>{{article.title}}</h1>
15 |       <p>{{article.description}}</p>
16 |       <span>Read more...</span>
17 |     </a>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | 
23 | export default {
24 |   name: 'RealWorldPostPreview',
25 |   data() {
26 |     return {};
27 |   },
28 |   props: ['article'],
29 | };
30 | </script>
31 | 
32 | <!-- Add "scoped" attribute to limit CSS to this component only -->
33 | <style scoped>
34 | </style>
35 | 


--------------------------------------------------------------------------------
/src/components/Profile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="profile-page">
 3 |     <div class="user-info">
 4 |       <div class="container">
 5 |         <div class="row">
 6 |           <div class="col-xs-12 col-md-10 offset-md-1">
 7 |             <img src="http://i.imgur.com/Qr71crq.jpg" class="user-img" />
 8 |             <h4>Eric Simons</h4>
 9 |             <p>
10 |               Cofounder @GoThinkster, lived in Aol's HQ for a few months, kinda looks like Peeta from the Hunger Games
11 |             </p>
12 |             <button class="btn btn-sm btn-outline-secondary action-btn">
13 |               <i class="ion-plus-round"></i>
14 |               &nbsp; Follow Eric Simons
15 |               <span class="counter">(10)</span>
16 |             </button>
17 |           </div>
18 | 
19 |         </div>
20 |       </div>
21 |     </div>
22 |     <div class="container">
23 |       <div class="row">
24 |         <div class="col-xs-12 col-md-10 offset-md-1">
25 |           <div class="posts-toggle">
26 |             <ul class="nav nav-pills outline-active">
27 |               <li class="nav-item">
28 |                 <a class="nav-link active" href="">My Posts</a>
29 |               </li>
30 |               <li class="nav-item">
31 |                 <a class="nav-link" href="">Favorited Posts</a>
32 |               </li>
33 |             </ul>
34 |           </div>
35 |           <real-world-post-preview
36 |             v-for="(article, index) in articles"
37 |             v-bind:article="article"
38 |             v-bind:index="index"
39 |             v-bind:key="article.title">
40 |           </real-world-post-preview>
41 |         </div>
42 |       </div>
43 |     </div>
44 |   </div>
45 | </template>
46 | 
47 | <script>
48 | import RealWorldPostPreview from './PostPreview';
49 | 
50 | export default {
51 |   name: 'RealWorldProfile',
52 |   components: {
53 |     RealWorldPostPreview,
54 |   },
55 | };
56 | </script>
57 | 


--------------------------------------------------------------------------------
/src/components/Register.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="auth-page">
 3 |     <div class="container page">
 4 |       <div class="row">
 5 |         <div class="col-md-6 offset-md-3 col-xs-12">
 6 |           <h1 class="text-xs-center">Sign up</h1>
 7 |           <p class="text-xs-center">
 8 |             <router-link to="login">Have an account?</router-link>
 9 |           </p>
10 |           <!--<ul class="error-messages">
11 |             <li>That email is already taken</li>
12 |           </ul>-->
13 |           <form>
14 |             <fieldset class="form-group">
15 |               <input class="form-control form-control-lg" type="text" placeholder="Your Name">
16 |             </fieldset>
17 |             <fieldset class="form-group">
18 |               <input class="form-control form-control-lg" type="text" placeholder="Email">
19 |             </fieldset>
20 |             <fieldset class="form-group">
21 |               <input class="form-control form-control-lg" type="password" placeholder="Password">
22 |             </fieldset>
23 |             <button class="btn btn-lg btn-primary pull-xs-right">
24 |               Sign up
25 |             </button>
26 |           </form>
27 |         </div>
28 | 
29 |       </div>
30 |     </div>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | export default {
36 |   name: 'RealWorldRegister',
37 | };
38 | </script>
39 | 


--------------------------------------------------------------------------------
/src/components/Settings.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="settings-page">
 3 |     <div class="container page">
 4 |       <div class="row">
 5 |         <div class="col-md-6 offset-md-3 col-xs-12">
 6 |           <h1 class="text-xs-center">Your Settings</h1>
 7 |           <form>
 8 |             <fieldset class="form-group">
 9 |               <input class="form-control" type="text" placeholder="URL of profile picture">
10 |             </fieldset>
11 |             <fieldset class="form-group">
12 |               <input class="form-control form-control-lg" type="text" placeholder="Your Name">
13 |             </fieldset>
14 |             <fieldset class="form-group">
15 |               <textarea class="form-control form-control-lg" rows="8" placeholder="Short bio about you"></textarea>
16 |             </fieldset>
17 |             <fieldset class="form-group">
18 |               <input class="form-control form-control-lg" type="text" placeholder="Email">
19 |             </fieldset>
20 |             <fieldset class="form-group">
21 |               <input class="form-control form-control-lg" type="password" placeholder="Password">
22 |             </fieldset>
23 |             <button class="btn btn-lg btn-primary pull-xs-right">
24 |               Update Settings
25 |             </button>
26 |           </form>
27 |         </div>
28 |       </div>
29 |     </div>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'RealWorldSettings',
36 | };
37 | </script>
38 | 


--------------------------------------------------------------------------------
/src/components/TagList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="tag-list">
 3 |     <a v-for="(tag, index) in tags" href="" class="tag-pill tag-default">{{tag}}</a>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'RealWorldTagList',
10 |   props: ['tags'],
11 | };
12 | </script>
13 | 
14 | <!-- Add "scoped" attribute to limit CSS to this component only -->
15 | <style scoped>
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/constants/Home.constants.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   BANNER_MESSAGE: 'A place to share your knowledge.',
3 |   HTTP_OK: 200,
4 | };
5 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue';
 4 | import axios from 'axios';
 5 | import VueAxios from 'vue-axios';
 6 | import moment from 'moment';
 7 | 
 8 | 
 9 | import App from './App';
10 | import router from './router';
11 | import store from './store';
12 | 
13 | Vue.use(VueAxios, axios);
14 | 
15 | Vue.config.productionTip = false;
16 | 
17 | Vue.filter('date', date => moment(date).format('MMMM DD, YYYY'));
18 | 
19 | /* eslint-disable no-new */
20 | new Vue({
21 |   el: '#app',
22 |   router,
23 |   template: '<App/>',
24 |   components: { App },
25 |   store,
26 | });
27 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import Home from '@/components/Home';
 4 | import Login from '@/components/Login';
 5 | import Register from '@/components/Register';
 6 | import Settings from '@/components/Settings';
 7 | import Editor from '@/components/Editor';
 8 | import Article from '@/components/Article';
 9 | import Profile from '@/components/Profile';
10 | import Favorites from '@/components/Favorites';
11 | 
12 | Vue.use(Router);
13 | 
14 | export default new Router({
15 |   routes: [
16 |     { path: '/', name: 'home', component: Home },
17 |     { path: '/login', name: 'login', component: Login },
18 |     { path: '/register', name: 'register', component: Register },
19 |     { path: '/settings', name: 'settings', component: Settings },
20 |     { path: '/editor', name: 'create-article', component: Editor },
21 |     { path: '/editor/:id', name: 'edit-article', component: Editor },
22 |     { path: '/article/:id', name: 'article', component: Article },
23 |     { path: '/profile/:username', name: 'user', component: Profile },
24 |     { path: '/article/:username/favorites', name: 'favorites', component: Favorites },
25 |     { path: '*', redirect: { name: 'home' } },
26 |   ],
27 | });
28 | 


--------------------------------------------------------------------------------
/src/services/postsService.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | export default {
 4 |   get() {
 5 |     return Vue.axios.get('https://conduit.productionready.io/api/articles')
 6 |       .catch((error) => {
 7 |         throw new Error(error);
 8 |       });
 9 |   },
10 | };
11 | 


--------------------------------------------------------------------------------
/src/services/tagsService.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | export default {
 4 |   get() {
 5 |     return Vue.axios.get('https://conduit.productionready.io/api/tags')
 6 |       .catch((error) => {
 7 |         throw new Error(error);
 8 |       });
 9 |   },
10 | };
11 | 


--------------------------------------------------------------------------------
/src/store/actionTypes.js:
--------------------------------------------------------------------------------
1 | export const FETCH_ARTICLES = 'fetchProjects';
2 | export const FETCH_TAGS = 'fetchTags';
3 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | 
 4 | import home from './modules/home';
 5 | 
 6 | Vue.use(Vuex);
 7 | 
 8 | export default new Vuex.Store({
 9 |   modules: {
10 |     home,
11 |   },
12 | });
13 | 


--------------------------------------------------------------------------------
/src/store/modules/home.js:
--------------------------------------------------------------------------------
 1 | import PostsService from '@/services/postsService';
 2 | import TagsService from '@/services/tagsService';
 3 | import { FETCH_ARTICLES, FETCH_TAGS } from '../actionTypes';
 4 | import { SET_ARTICLES, SET_TAGS } from '../mutationTypes';
 5 | 
 6 | export const state = {
 7 |   tags: [],
 8 |   articles: [],
 9 | };
10 | 
11 | export const actions = {
12 |   [FETCH_ARTICLES]({ commit }) {
13 |     return PostsService.get()
14 |       .then(({ data }) => {
15 |         commit(SET_ARTICLES, data.articles);
16 |       })
17 |       .catch((error) => {
18 |         throw new Error(error);
19 |       });
20 |   },
21 |   [FETCH_TAGS]({ commit }) {
22 |     return TagsService.get()
23 |       .then(({ data }) => {
24 |         commit(SET_TAGS, data.tags);
25 |       })
26 |       .catch((error) => {
27 |         throw new Error(error);
28 |       });
29 |   },
30 | };
31 | 
32 | /* eslint no-param-reassign: ["error", { "props": false }] */
33 | export const mutations = {
34 |   [SET_ARTICLES](currentState, articles) {
35 |     currentState.articles = articles;
36 |   },
37 |   [SET_TAGS](currentState, tags) {
38 |     currentState.tags = tags;
39 |   },
40 | };
41 | 
42 | export default {
43 |   state,
44 |   actions,
45 |   mutations,
46 | };
47 | 


--------------------------------------------------------------------------------
/src/store/mutationTypes.js:
--------------------------------------------------------------------------------
1 | export const SET_ARTICLES = 'setArticles';
2 | export const SET_TAGS = 'setTags';
3 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mchandleraz/realworld-vue/9ed0542d661c58bdfc1596cff156dbfd10859cf6/static/.gitkeep


--------------------------------------------------------------------------------
/test/e2e/custom-assertions/elementCount.js:
--------------------------------------------------------------------------------
 1 | // A custom Nightwatch assertion.
 2 | // the name of the method is the filename.
 3 | // can be used in tests like this:
 4 | //
 5 | //   browser.assert.elementCount(selector, count)
 6 | //
 7 | // for how to write custom assertions see
 8 | // http://nightwatchjs.org/guide#writing-custom-assertions
 9 | exports.assertion = function (selector, count) {
10 |   this.message = 'Testing if element <' + selector + '> has count: ' + count;
11 |   this.expected = count;
12 |   this.pass = function (val) {
13 |     return val === this.expected;
14 |   }
15 |   this.value = function (res) {
16 |     return res.value;
17 |   }
18 |   this.command = function (cb) {
19 |     var self = this;
20 |     return this.api.execute(function (selector) {
21 |       return document.querySelectorAll(selector).length;
22 |     }, [selector], function (res) {
23 |       cb.call(self, res);
24 |     });
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/test/e2e/nightwatch.conf.js:
--------------------------------------------------------------------------------
 1 | require('babel-register')
 2 | var config = require('../../config')
 3 | 
 4 | // http://nightwatchjs.org/gettingstarted#settings-file
 5 | module.exports = {
 6 |   src_folders: ['test/e2e/specs'],
 7 |   output_folder: 'test/e2e/reports',
 8 |   custom_assertions_path: ['test/e2e/custom-assertions'],
 9 | 
10 |   selenium: {
11 |     start_process: true,
12 |     server_path: require('selenium-server').path,
13 |     host: '127.0.0.1',
14 |     port: 4444,
15 |     cli_args: {
16 |       'webdriver.chrome.driver': require('chromedriver').path
17 |     }
18 |   },
19 | 
20 |   test_settings: {
21 |     default: {
22 |       selenium_port: 4444,
23 |       selenium_host: 'localhost',
24 |       silent: true,
25 |       globals: {
26 |         devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
27 |       }
28 |     },
29 | 
30 |     chrome: {
31 |       desiredCapabilities: {
32 |         browserName: 'chrome',
33 |         javascriptEnabled: true,
34 |         acceptSslCerts: true
35 |       }
36 |     },
37 | 
38 |     firefox: {
39 |       desiredCapabilities: {
40 |         browserName: 'firefox',
41 |         javascriptEnabled: true,
42 |         acceptSslCerts: true
43 |       }
44 |     }
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/test/e2e/runner.js:
--------------------------------------------------------------------------------
 1 | // 1. start the dev server using production config
 2 | process.env.NODE_ENV = 'testing';
 3 | var server = require('../../build/dev-server.js');
 4 | 
 5 | server.ready.then(() => {
 6 |   // 2. run the nightwatch test suite against it
 7 |   // to run in additional browsers:
 8 |   //    1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
 9 |   //    2. add it to the --env flag below
10 |   // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
11 |   // For more information on Nightwatch's config file, see
12 |   // http://nightwatchjs.org/guide#settings-file
13 |   var opts = process.argv.slice(2);
14 |   if (opts.indexOf('--config') === -1) {
15 |     opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']);
16 |   }
17 |   if (opts.indexOf('--env') === -1) {
18 |     opts = opts.concat(['--env', 'chrome']);
19 |   }
20 | 
21 |   var spawn = require('cross-spawn');
22 |   var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' });
23 | 
24 |   runner.on('exit', function (code) {
25 |     server.close();
26 |     process.exit(code);
27 |   });
28 | 
29 |   runner.on('error', function (err) {
30 |     server.close();
31 |     throw err;
32 |   });
33 | });
34 | 


--------------------------------------------------------------------------------
/test/e2e/specs/home.e2e.js:
--------------------------------------------------------------------------------
 1 | // For authoring Nightwatch tests, see
 2 | // http://nightwatchjs.org/guide#usage
 3 | 
 4 | module.exports = {
 5 |   home: function test(browser) {
 6 |     // automatically uses dev Server port from /config.index.js
 7 |     // default: http://localhost:8080
 8 |     // see nightwatch.conf.js
 9 |     const devServer = browser.globals.devServerURL;
10 | 
11 |     browser
12 |       .url(devServer)
13 |       .waitForElementVisible('#app', 5000)
14 |       .assert.elementPresent('#RealWorldHeader')
15 |       .assert.elementPresent('#RealWorldFooter')
16 |       .end();
17 |   },
18 | };
19 | 


--------------------------------------------------------------------------------
/test/unit/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "mocha": true
 4 |   },
 5 |   "globals": {
 6 |     "expect": true,
 7 |     "sinon": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/test/unit/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import axios from 'axios';
 3 | import VueAxios from 'vue-axios';
 4 | 
 5 | Vue.use(VueAxios, axios);
 6 | Vue.config.productionTip = false;
 7 | 
 8 | // require all test files (files that ends with .spec.js)
 9 | const testsContext = require.context('./specs', true, /\.spec$/);
10 | testsContext.keys().forEach(testsContext);
11 | 
12 | // require all src files except main.js for coverage.
13 | // you can also change this to match only the subset of files that
14 | // you want coverage for.
15 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/);
16 | srcContext.keys().forEach(srcContext);
17 | 


--------------------------------------------------------------------------------
/test/unit/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // This is a karma config file. For more details see
 2 | //   http://karma-runner.github.io/0.13/config/configuration-file.html
 3 | // we are also using it with karma-webpack
 4 | //   https://github.com/webpack/karma-webpack
 5 | 
 6 | var webpackConfig = require('../../build/webpack.test.conf');
 7 | 
 8 | module.exports = function (config) {
 9 |   config.set({
10 |     // to run in additional browsers:
11 |     // 1. install corresponding karma launcher
12 |     //    http://karma-runner.github.io/0.13/config/browsers.html
13 |     // 2. add it to the `browsers` array below.
14 |     browsers: ['PhantomJS'],
15 |     frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
16 |     reporters: ['spec', 'coverage'],
17 |     files: [
18 |       '../../node_modules/babel-polyfill/dist/polyfill.js',
19 |       './index.js'
20 |     ],
21 |     preprocessors: {
22 |       './index.js': ['webpack', 'sourcemap']
23 |     },
24 |     webpack: webpackConfig,
25 |     webpackMiddleware: {
26 |       noInfo: true,
27 |     },
28 |     coverageReporter: {
29 |       dir: './coverage',
30 |       reporters: [
31 |         { type: 'lcov', subdir: '.' },
32 |         { type: 'text-summary' },
33 |         { type:'json', subdir: '.' },
34 |       ]
35 |     },
36 |   });
37 | };
38 | 


--------------------------------------------------------------------------------
/test/unit/specs/Home.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Home from '@/components/Home';
 3 | 
 4 | describe('Home.vue', () => {
 5 |   it('should mount without errors', () => {
 6 |     const Constructor = Vue.extend(Home);
 7 |     const vm = new Constructor().$mount();
 8 | 
 9 |     expect(vm.$el).to.not.be.null;
10 |   });
11 | });
12 | 


--------------------------------------------------------------------------------
/test/unit/specs/postsService.spec.js:
--------------------------------------------------------------------------------
 1 | import postsService from '@/services/postsService';
 2 | 
 3 | describe('Posts Service', () => {
 4 |   describe('get', () => {
 5 |     describe('when given no params', () => {
 6 |       it('returns all posts', () => {
 7 |         postsService.get().then((response) => {
 8 |           expect(response.data.articles).to.be.a('array');
 9 |         });
10 |       });
11 |     });
12 |   });
13 | });
14 | 


--------------------------------------------------------------------------------
/test/unit/specs/store/modules/home.spec.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable import/no-webpack-loader-syntax */
 2 | import { expect } from 'chai';
 3 | import { FETCH_ARTICLES, FETCH_TAGS } from '@/store/actionTypes';
 4 | import { SET_ARTICLES, SET_TAGS } from '@/store/mutationTypes';
 5 | 
 6 | const homeModuleInjector = require('inject-loader!@/store/modules/home');
 7 | 
 8 | const expectedPayload = 'foo!';
 9 | const homeModule = homeModuleInjector({
10 |   '@/services/postsService': {
11 |     get() {
12 |       return Promise.resolve({
13 |         data: {
14 |           articles: expectedPayload,
15 |         },
16 |       });
17 |     },
18 |   },
19 |   '@/services/tagsService': {
20 |     get() {
21 |       return Promise.resolve({
22 |         data: {
23 |           tags: expectedPayload,
24 |         },
25 |       });
26 |     },
27 |   },
28 | });
29 | const actions = homeModule.actions;
30 | const mutations = homeModule.mutations;
31 | 
32 | const testAction = (action, actionPayload, state, expectedMutations, done) => {
33 |   let count = 0;
34 | 
35 |   // mock commit
36 |   const commit = (type, payload) => {
37 |     const mutation = expectedMutations[count];
38 |     expect(mutation.type).to.equal(type);
39 |     if (payload) {
40 |       expect(mutation.payload).to.deep.equal(payload);
41 |     }
42 |     count += 1;
43 |     if (count >= expectedMutations.length) {
44 |       done();
45 |     }
46 |   };
47 | 
48 |   // call the action with mocked store and arguments
49 |   action({ commit, state }, actionPayload);
50 | 
51 |   // check if no mutations should have been dispatched
52 |   if (expectedMutations.length === 0) {
53 |     expect(count).to.equal(0);
54 |     done();
55 |   }
56 | };
57 | 
58 | 
59 | describe('Store: Home Module', () => {
60 |   describe('Actions should call appropriate mutations with proper payload: ', () => {
61 |     it('FETCH_ARTICLES action', (done) => {
62 |       testAction(actions[FETCH_ARTICLES], null, {}, [{
63 |         type: SET_ARTICLES, payload: expectedPayload,
64 |       }], done);
65 |     });
66 |     it('FETCH_TAGS action', (done) => {
67 |       testAction(actions[FETCH_TAGS], null, {}, [{
68 |         type: SET_TAGS, payload: expectedPayload,
69 |       }], done);
70 |     });
71 |   });
72 |   describe('Mutations should update state accordingly', () => {
73 |     it('SET_ARTICLES mutation', () => {
74 |       const state = {
75 |         articles: [],
76 |       };
77 |       const payload = ['foo', 'bar', 'baz'];
78 |       mutations[SET_ARTICLES](state, payload);
79 |       expect(state.articles).to.deep.equal(payload);
80 |     });
81 |     it('SET_TAGS mutation', () => {
82 |       const state = {
83 |         tags: [],
84 |       };
85 |       const payload = ['foo', 'bar', 'baz'];
86 |       mutations[SET_TAGS](state, payload);
87 |       expect(state.tags).to.deep.equal(payload);
88 |     });
89 |   });
90 | });
91 | 


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