├── .gitignore
├── README.md
├── assets
    ├── README.md
    └── scss
    │   └── main.scss
├── assignments.txt
├── components
    ├── Logo.vue
    ├── Navbar.vue
    ├── PostCreate.vue
    ├── PostItem.vue
    ├── PostManage.vue
    ├── README.md
    └── shared
    │   └── Modal.vue
├── layouts
    ├── README.md
    └── default.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
    ├── README.md
    ├── index.vue
    ├── manage.vue
    └── posts
    │   └── _id.vue
├── plugins
    ├── README.md
    └── filters.js
├── resources
    ├── 1_Index-page.html
    ├── 2_Checkbox.html
    ├── 3_manage.html
    ├── 4_Modal.html
    ├── 5_Modal_Form.html
    ├── 6_Post_Update.html
    ├── 7_delete_button.html
    └── 8_PostDetail.html
├── server
    ├── index.js
    └── routes
    │   └── index.js
├── static
    ├── README.md
    └── favicon.ico
└── store
    ├── README.md
    ├── index.js
    ├── initial_data.json
    └── post.js


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-posts
 2 | 
 3 | > My awe-inspiring Nuxt.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | $ npm run 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 run start
17 | 
18 | # generate static project
19 | $ npm run generate
20 | ```
21 | 
22 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).
23 | 


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


--------------------------------------------------------------------------------
/assets/scss/main.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | .markdown {
 4 |   p {
 5 |     margin: 5px 0;
 6 |   }
 7 | 
 8 |   h1, h2, h3 {
 9 |     font-weight: bold;
10 |   }
11 | 
12 |   h1 {
13 |     font-size: 23px;
14 |   }
15 | 
16 |   h2 {
17 |     font-size: 20px;
18 |   }
19 | 
20 |   h3 {
21 |     font-size: 17px;
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/assignments.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | --------------SERVER----------------
 3 | 
 4 | 1. Update server endpoint to remove post
 5 |    HINT: is very similiar to patch endpoint, you don't need to send any data
 6 |          just provide post "id" in request params.
 7 | 2. find index of post in array and remove post
 8 | 3. to remove post from array you can use funtion "splice"
 9 | 4. write file with initialData...
10 | 
11 | --------------CLIENT----------------
12 | 
13 | 1. Create new action "deletePost" expect to receive "id" of post in arguments of  this function.
14 | 2. Find post index in array and if index is found send request to delete post
15 |    HINT: this.$axios.$delete('endpoint')
16 | 3. In "then" block after promise is resolved commit mutation to remove post from list, use "splice" once more
17 | 4. after delete button is clicked dispatch action "deletePost"
18 | 
19 | NOTE: One issue is expected. After post will be deleted, activePost will have still old value of deleted post.
20 | Don't worry about this issue right now. Bonus points if you can resolve it. In any case we will fix it in next lecture.
21 | 


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


--------------------------------------------------------------------------------
/components/Navbar.vue:
--------------------------------------------------------------------------------
  1 | 
  2 | <template>
  3 |   <nav class="navbar has-shadow">
  4 |     <div class="container">
  5 |       <div class="navbar-brand">
  6 |         <a class="navbar-item" href="../">
  7 |         <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox">
  8 |         </a>
  9 |         <div @click="toggleIsActive"
 10 |              class="navbar-burger burger"
 11 |              aria-label="menu"
 12 |              aria-expanded="false"
 13 |              data-target="navMenu">
 14 |           <span></span>
 15 |           <span></span>
 16 |           <span></span>
 17 |         </div>
 18 |       </div>
 19 |       <div @click="toggleIsActive"
 20 |            id="navMenu"
 21 |            :class="{'is-active': isActive}"
 22 |            class="navbar-menu">
 23 |         <div class="navbar-end">
 24 |           <div
 25 |             :class="{'is-active': isActive}"
 26 |             class="navbar-item has-dropdown">
 27 |             <a class="navbar-link">
 28 |             Menu
 29 |             </a>
 30 |             <div class="navbar-dropdown">
 31 |               <nuxt-link to="/" class="navbar-item">
 32 |               Home
 33 |               </nuxt-link>
 34 |               <!-- <div @click="navigateTo('/manage')" class="navbar-item">
 35 |               Manage
 36 |               </div> -->
 37 |               <nuxt-link to="/manage" class="navbar-item">
 38 |               Manage
 39 |               </nuxt-link>
 40 |             </div>
 41 |           </div>
 42 |         </div>
 43 |       </div>
 44 |     </div>
 45 |   </nav>
 46 | </template>
 47 | <script>
 48 | export default {
 49 |   data() {
 50 |     return {
 51 |       isActive: false,
 52 |       test1Var: 'Some Test Value',
 53 |       test2Var: 23182,
 54 |       test3Var: () => {
 55 |         console.log('Calling test3Var')
 56 |         console.log(this.test2Var)
 57 |       },
 58 |       test4Var: true
 59 |     }
 60 |   },
 61 |   methods: {
 62 |     navigateTo(path) {
 63 |       this.$router.push(path)
 64 |     },
 65 |     toggleIsActive() {
 66 |       this.isActive = !this.isActive
 67 |       // this.test1()
 68 |       // console.log(this.test1Var)
 69 |       // console.log(this.test2Var)
 70 |       // console.log(this.test3Var)
 71 |       // console.log(this.test4Var)
 72 |     },
 73 |     test1() {
 74 |       console.log('calling test1 function')
 75 |       this.test1Var = 'Changed Valued!'
 76 |       this.test2()
 77 |     },
 78 |     test2() {
 79 |       console.log('calling test2 function')
 80 |       this.test2Var = 123897213792137
 81 |       this.test3()
 82 |     },
 83 |     test3() {
 84 |       console.log('calling test3 function')
 85 |       this.test3Var()
 86 |       this.test4Var = false
 87 |     }
 88 |   }
 89 | }
 90 | </script>
 91 | 
 92 | 
 93 | 
 94 | 
 95 | 
 96 | 
 97 | 
 98 | 
 99 | 
100 | 
101 | 
102 | 


--------------------------------------------------------------------------------
/components/PostCreate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <modal @modalSubmitted="createPost">
 3 |     <template #actionButton>
 4 |       <a class="button is-danger is-block is-bold">
 5 |         <span class="compose">Create</span>
 6 |       </a>
 7 |     </template>
 8 |     <form class="post-form">
 9 |       <div class="field">
10 |         <label class="label">Title</label>
11 |         <div class="control">
12 |           <input
13 |             v-model="form.title"
14 |             class="input"
15 |             type="text"
16 |             placeholder="Awesome Title">
17 |         </div>
18 |       </div>
19 | 
20 |       <div class="field">
21 |         <label class="label">Subtitle</label>
22 |         <div class="control">
23 |           <input
24 |             v-model="form.subtitle"
25 |             class="input"
26 |             type="text"
27 |             placeholder="Awesome subtitle">
28 |         </div>
29 |       </div>
30 |       <div class="field">
31 |         <label class="label">Content</label>
32 |         <div class="control">
33 |           <textarea
34 |             v-model="form.content"
35 |             class="textarea"
36 |             placeholder="Awesome Content">
37 |           </textarea>
38 |         </div>
39 |       </div>
40 |       <div class="markdown">
41 |         <label class="label">Contet Preview</label>
42 |         <div v-html="compiledMarkdown"></div>
43 |       </div>
44 |     </form>
45 |   </modal>
46 | </template>
47 | 
48 | <script>
49 | import Modal from '~/components/shared/Modal'
50 | export default {
51 |   components: {
52 |     Modal
53 |   },
54 |   data() {
55 |     return {
56 |       form: {
57 |         title: '',
58 |         subtitle: '',
59 |         content: ''
60 |       }
61 |     }
62 |   },
63 |   computed: {
64 |     compiledMarkdown() {
65 |       if (process.client) {
66 |         return marked(this.form.content, {sanitize: true})
67 |       }
68 | 
69 |       return ''
70 |     }
71 |   },
72 |   methods: {
73 |     createPost({closeModal, data}) {
74 |       this.$store.dispatch('post/createPost', {...this.form})
75 |       closeModal()
76 |       this.resetForm()
77 |     },
78 |     resetForm() {
79 |       this.form.title = ''
80 |       this.form.subtitle = ''
81 |       this.form.content = ''
82 |     }
83 |   }
84 | }
85 | </script>
86 | 
87 | 
88 | 
89 | 
90 | 
91 | 
92 | 
93 | 
94 | 
95 | 
96 | 


--------------------------------------------------------------------------------
/components/PostItem.vue:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 | <template>
  5 |   <div class="post">
  6 |     <div class="post-content">
  7 |       <nuxt-link :to="`/posts/${id}`" class="post-header post-header-link clickable">
  8 |         <h4 class="title is-4">{{title}}</h4>
  9 |         <h5 class="subtitle is-5">{{subtitle}}</h5>
 10 |       </nuxt-link>
 11 |       <div class="post-footer">
 12 |         by Filip Jerga, {{date | formatDate}}
 13 |       </div>
 14 |     </div>
 15 |     <div class="post-right">
 16 |       <label class="checkbox">
 17 |         <input
 18 |           @change="togglePost"
 19 |           type="checkbox"
 20 |           :checked="isArchived">
 21 |         Read
 22 |       </label>
 23 |     </div>
 24 |   </div>
 25 | </template>
 26 | 
 27 | <script>
 28 | import moment from 'moment'
 29 | export default {
 30 |   props: {
 31 |     id: {
 32 |       type: String,
 33 |       required: true
 34 |     },
 35 |     title: {
 36 |       type: String,
 37 |       required: true
 38 |     },
 39 |     subtitle: {
 40 |       type: String,
 41 |       required: false
 42 |     },
 43 |     date: {
 44 |       type: Number,
 45 |       required: false,
 46 |       default: new Date()
 47 |     },
 48 |     isRead: {
 49 |       type: Boolean,
 50 |       required: false
 51 |     }
 52 |   },
 53 |   computed: {
 54 |     archivedPosts() {
 55 |       return this.$store.state.post.archivedItems
 56 |     },
 57 |     isArchived() {
 58 |       return this.archivedPosts.includes(this.id)
 59 |     }
 60 |   },
 61 |   methods: {
 62 |     togglePost() {
 63 |       debugger
 64 |       this.$store.dispatch('post/togglePost', this.id)
 65 |     }
 66 |   }
 67 | }
 68 | </script>
 69 | 
 70 | <style scoped lang="scss">
 71 |   .post {
 72 |     margin-bottom: 20px;
 73 |     padding: 5px;
 74 |     border-bottom: 2px solid transparent;
 75 |     display: flex;
 76 |     flex-direction: row;
 77 | 
 78 |     &-footer {
 79 |       font-style: italic;
 80 |     }
 81 | 
 82 |     &-content {
 83 |       flex: 1;
 84 |     }
 85 | 
 86 |     &-right {
 87 |       float: right;
 88 |       justify-content: flex-end;
 89 |       align-self: center;
 90 |     }
 91 | 
 92 |     &:hover {
 93 |       border-bottom: 2px solid #e8e8e8;
 94 |     }
 95 |   }
 96 | </style>
 97 | 
 98 | 
 99 | 
100 | 
101 | 
102 | 
103 | 
104 | 
105 | 
106 | 
107 | 
108 | 
109 | 


--------------------------------------------------------------------------------
/components/PostManage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form class="post-form">
 3 |     <div class="field">
 4 |       <label class="label">Title</label>
 5 |       <div class="control">
 6 |         <input
 7 |           v-model="post.title"
 8 |           class="input"
 9 |           type="text"
10 |           placeholder="Awesome Title">
11 |       </div>
12 |     </div>
13 |     <div class="field">
14 |       <label class="label">Subtitle</label>
15 |       <div class="control">
16 |         <input
17 |           v-model="post.subtitle"
18 |           class="input"
19 |           type="text"
20 |           placeholder="Awesome subtitle">
21 |       </div>
22 |     </div>
23 |     <div class="field">
24 |       <label class="label">Content</label>
25 |       <div class="control">
26 |         <textarea
27 |           v-model="post.content"
28 |           class="textarea"
29 |           placeholder="Awesome Content"></textarea>
30 |       </div>
31 |     </div>
32 |     <div class="markdown">
33 |       <label class="label">Contet Preview</label>
34 |       <div v-html="compiledMarkdown"></div>
35 |     </div>
36 |     <button
37 |       @click.prevent="updatePost"
38 |       class="button is-primary">Update</button>
39 |   </form>
40 | </template>
41 | 
42 | <script>
43 | export default {
44 |   props: ['postData'],
45 |   data() {
46 |     return {
47 |       post: {...this.postData}
48 |     }
49 |   },
50 |   watch: {
51 |     postData(data) {
52 |       this.post = {...data}
53 |     }
54 |   },
55 |   computed: {
56 |     compiledMarkdown() {
57 |       if (process.client) {
58 |         return marked(this.post.content, {sanitize: true})
59 |       }
60 | 
61 |       return ''
62 |     }
63 |   },
64 |   methods: {
65 |     updatePost() {
66 |       debugger
67 |       this.$store.dispatch('post/updatePost', {...this.post})
68 |     }
69 |   }
70 | }
71 | </script>
72 | 
73 | 
74 | 
75 | 
76 | 
77 | 
78 | 
79 | 
80 | 
81 | 


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


--------------------------------------------------------------------------------
/components/shared/Modal.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | <template>
 4 |   <div>
 5 |     <div @click="isActive = true">
 6 |       <slot name="actionButton">
 7 |         <button class="button is-primary">Open</button>
 8 |       </slot>
 9 |     </div>
10 |     <!-- Toggle Class Here -->
11 |     <div :class="{'is-active': isActive}" class="modal">
12 |       <div class="modal-background"></div>
13 |       <div class="modal-card">
14 |         <header class="modal-card-head">
15 |           <p class="modal-card-title">Modal title</p>
16 |           <!-- Close Modal Here -->
17 |           <button @click="isActive = false" class="delete" aria-label="close"></button>
18 |         </header>
19 |         <section class="modal-card-body">
20 |           <slot></slot>
21 |         </section>
22 |         <footer class="modal-card-foot">
23 |           <button
24 |             @click="emitModalSubmit"
25 |             class="button is-success">Save changes
26 |           </button>
27 |           <!-- Close Modal -->
28 |           <button @click="isActive = false" class="button">Cancel</button>
29 |         </footer>
30 |       </div>
31 |     </div>
32 |   </div>
33 | </template>
34 | <script>
35 | export default {
36 |   data() {
37 |     return {
38 |       isActive: false
39 |     }
40 |   },
41 |   methods: {
42 |     emitModalSubmit() {
43 |       this.$emit('modalSubmitted', {closeModal: this.closeModal, data: 'Just some data'})
44 |     },
45 |     closeModal() {
46 |       this.isActive = false
47 |     }
48 |   }
49 | }
50 | </script>
51 | 
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 


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


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nuxt />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | html {
 9 |   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
10 |     Roboto, 'Helvetica Neue', Arial, sans-serif;
11 |   font-size: 16px;
12 |   word-spacing: 1px;
13 |   -ms-text-size-adjust: 100%;
14 |   -webkit-text-size-adjust: 100%;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   -webkit-font-smoothing: antialiased;
17 |   box-sizing: border-box;
18 | }
19 | 
20 | *,
21 | *:before,
22 | *:after {
23 |   box-sizing: border-box;
24 |   margin: 0;
25 | }
26 | 
27 | .button--green {
28 |   display: inline-block;
29 |   border-radius: 4px;
30 |   border: 1px solid #3b8070;
31 |   color: #3b8070;
32 |   text-decoration: none;
33 |   padding: 10px 30px;
34 | }
35 | 
36 | .button--green:hover {
37 |   color: #fff;
38 |   background-color: #3b8070;
39 | }
40 | 
41 | .button--grey {
42 |   display: inline-block;
43 |   border-radius: 4px;
44 |   border: 1px solid #35495e;
45 |   color: #35495e;
46 |   text-decoration: none;
47 |   padding: 10px 30px;
48 |   margin-left: 15px;
49 | }
50 | 
51 | .button--grey:hover {
52 |   color: #fff;
53 |   background-color: #35495e;
54 | }
55 | </style>
56 | 


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


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | module.exports = {
 3 |   mode: 'universal',
 4 |   /*
 5 |   ** Headers of the page
 6 |   */
 7 |   head: {
 8 |     title: process.env.npm_package_name || '',
 9 |     meta: [
10 |       { charset: 'utf-8' },
11 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
12 |       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
13 |     ],
14 |     link: [
15 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
16 |     ],
17 |     script: [
18 |       { src: 'https://cdn.jsdelivr.net/npm/marked/marked.min.js'}
19 |     ]
20 |   },
21 |   /*
22 |   ** Customize the progress-bar color
23 |   */
24 |   loading: { color: '#fff' },
25 |   /*
26 |   ** Global CSS
27 |   */
28 |   css: [
29 |     '@/assets/scss/main.scss'
30 |   ],
31 |   /*
32 |   ** Plugins to load before mounting the App
33 |   */
34 |   plugins: [
35 |     {src: '~/plugins/filters.js'}
36 |   ],
37 |   /*
38 |   ** Nuxt.js modules
39 |   */
40 |   modules: [
41 |     // Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
42 |     '@nuxtjs/bulma',
43 |     // Doc: https://axios.nuxtjs.org/usage
44 |     '@nuxtjs/axios',
45 |   ],
46 |   /*
47 |   ** Axios module configuration
48 |   ** See https://axios.nuxtjs.org/options
49 |   */
50 |   axios: {
51 |   },
52 |   /*
53 |   ** Build configuration
54 |   */
55 |   serverMiddleware: [
56 |     '~/server/routes/index'
57 |   ],
58 |   build: {
59 |     postcss: {
60 |       preset: {
61 |         features: {
62 |           customProperties: false
63 |         }
64 |       }
65 |     },
66 |     /*
67 |     ** You can extend webpack config here
68 |     */
69 |     extend(config, ctx) {
70 |     }
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-posts",
 3 |   "version": "1.0.0",
 4 |   "description": "My awe-inspiring Nuxt.js project",
 5 |   "author": "Filip Jerga",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
 9 |     "build": "nuxt build",
10 |     "start": "cross-env NODE_ENV=production node server/index.js",
11 |     "generate": "nuxt generate"
12 |   },
13 |   "dependencies": {
14 |     "@nuxtjs/axios": "^5.3.6",
15 |     "@nuxtjs/bulma": "^1.2.1",
16 |     "body-parser": "^1.19.0",
17 |     "cross-env": "^5.2.0",
18 |     "express": "^4.16.4",
19 |     "moment": "^2.24.0",
20 |     "node-sass": "^4.12.0",
21 |     "nuxt": "^2.0.0",
22 |     "sass-loader": "^7.1.0"
23 |   },
24 |   "devDependencies": {
25 |     "nodemon": "^1.18.9"
26 |   }
27 | }
28 | 


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


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <navbar />
 4 |     <div class="blogs-page">
 5 |       <div class="main-content">
 6 |         <div class="container">
 7 |           <div class="columns is-mobile">
 8 |             <div class="column is-8 is-offset-2">
 9 |               <div class="section">
10 |                 <div class="title">
11 |                   <h1>Newest Posts</h1>
12 |                   <hr>
13 |                 </div>
14 |                 <div v-if="posts && posts.length > 0">
15 |                   <post-item
16 |                     v-for="post in posts"
17 |                     :key="post._id"
18 |                     :title="post.title"
19 |                     :subtitle="post.subtitle"
20 |                     :date="post.createdAt"
21 |                     :isRead="post.isRead"
22 |                     :id="post._id"
23 |                   />
24 |                 </div>
25 |                 <div v-else>
26 |                   No Posts :(
27 |                 </div>
28 |               </div>
29 |             </div>
30 |           </div>
31 |         </div>
32 |       </div>
33 |       <!-- <form>
34 |         <input type="text" v-model="form.title">
35 |         <input type="text" v-model="form.subtitle">
36 |       </form>
37 |       {{isFormValid()}} -->
38 |     </div>
39 |   </div>
40 | </template>
41 | 
42 | <script>
43 | import Navbar from '~/components/Navbar'
44 | import PostItem from '~/components/PostItem'
45 | import { fetchPostsAPI } from '~/store/post'
46 | export default {
47 |   components: {
48 |     Navbar, PostItem
49 |   },
50 |   data() {
51 |     return {
52 |       title: 'My Title From Page',
53 |       form: {
54 |         title: 'some title',
55 |         subtitle: 'some subtitle'
56 |       }
57 |     }
58 |   },
59 |   fetch({store}) {
60 |     if (store.getters['post/hasEmptyItems']) {
61 |       return store.dispatch('post/fetchPosts')
62 |     }
63 |   },
64 |   mounted() {
65 |     this.$store.dispatch('post/getArchivedPosts')
66 |   },
67 |   computed: {
68 |     posts() {
69 |       return this.$store.state.post.items
70 |     },
71 |     archivedPosts() {
72 |       debugger
73 |       return this.$store.state.post.archivedItems
74 |     }
75 |   },
76 |   methods: {
77 |     isFormValid() {
78 |       console.log('isFormValid has been called')
79 |       if (this.form.title) {
80 |         return true
81 |       }
82 | 
83 |       return false
84 |     }
85 |   }
86 | }
87 | </script>
88 | <style scoped>
89 | </style>
90 | 
91 | 
92 | 
93 | 
94 | 
95 | 
96 | 
97 | 
98 | 


--------------------------------------------------------------------------------
/pages/manage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <navbar />
  4 |     <div class="manage-page">
  5 |       <div class="columns mail-app">
  6 |         <aside class="column is-2 aside hero">
  7 |           <post-create />
  8 |         </aside>
  9 |         <div class="column is-4 messages hero is-fullheight" id="message-feed">
 10 |           <div v-if="posts && posts.length > 0" class="inbox-messages" id="inbox-messages">
 11 |             <!-- card Starts -->
 12 |             <div
 13 |               v-for="post in posts"
 14 |               :key="post._id"
 15 |               @click="activatePost(post)"
 16 |               :class="{'is-active': activePost && post._id === activePost._id}"
 17 |               class="card">
 18 |               <div class="card-content">
 19 |                 <div class="msg-header">
 20 |                   <span class="msg-from"><small>From Filip Jerga</small></span>
 21 |                   <span class="msg-timestamp"></span>
 22 |                   <span class="msg-attachment"><i class="fa fa-paperclip"></i></span>
 23 |                 </div>
 24 |                 <div class="msg-subject">
 25 |                   <span class="msg-subject"><strong id="fake-subject-1">{{post.title}}</strong></span>
 26 |                 </div>
 27 |                 <div class="msg-snippet">
 28 |                   <p id="fake-snippet-1">{{post.subtitle}}</p>
 29 |                 </div>
 30 |               </div>
 31 |             </div>
 32 |             <!-- card Starts -->
 33 |           </div>
 34 |           <div class="inbox-messages no-posts-title" v-else>
 35 |             There are no posts :(
 36 |           </div>
 37 |         </div>
 38 |         <div class="column is-6 message hero is-fullheight" id="message-pane">
 39 |           <div v-if="activePost" class="box message-preview">
 40 |             <button @click="deletePost" class="button is-danger delete-button">Delete</button>
 41 |             <post-manage :postData="activePost" />
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |       <footer class="footer">
 46 |         <div class="container">
 47 |           <div class="content has-text-centered">
 48 |             <p>
 49 |               <strong>Bulma Templates</strong> by <a href="https://github.com/dansup">Daniel Supernault</a>. The source code is licensed
 50 |               <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
 51 |             </p>
 52 |             <p>
 53 |               <a class="icon" href="https://github.com/dansup/bulma-templates">
 54 |               <i class="fa fa-github"></i>
 55 |               </a>
 56 |             </p>
 57 |           </div>
 58 |         </div>
 59 |       </footer>
 60 |     </div>
 61 |   </div>
 62 | </template>
 63 | <script>
 64 | import Navbar from '~/components/Navbar'
 65 | import PostCreate from '~/components/PostCreate'
 66 | import PostManage from '~/components/PostManage'
 67 | import { mapState } from 'vuex'
 68 | export default {
 69 |   components: {
 70 |     Navbar, PostCreate, PostManage
 71 |   },
 72 |   data() {
 73 |     return {
 74 |       activePost: null
 75 |     }
 76 |   },
 77 |   computed: {
 78 |     ...mapState({
 79 |       posts: (state) => state.post.items
 80 |     })
 81 |   },
 82 |   fetch({store}) {
 83 |     if (store.getters['post/hasEmptyItems']) {
 84 |       return store.dispatch('post/fetchPosts')
 85 |     }
 86 |   },
 87 |   created() {
 88 |     this.setInitialActivePost()
 89 |   },
 90 |   methods: {
 91 |     activatePost(post) {
 92 |       this.activePost = post
 93 |     },
 94 |     setInitialActivePost() {
 95 |       if (this.posts && this.posts.length > 0) {
 96 |         this.activePost = this.posts[0]
 97 |       } else {
 98 |         this.activePost = null
 99 |       }
100 |     },
101 |     deletePost() {
102 |       debugger
103 |       if (this.activePost) {
104 |         this.$store.dispatch('post/deletePost', this.activePost._id)
105 |           .then(() => {
106 |             debugger
107 |             this.setInitialActivePost()
108 |           })
109 |       }
110 |     }
111 |   }
112 | }
113 | </script>
114 | <style scoped lang="scss">
115 |   .manage-page {
116 |     padding: 30px;
117 |   }
118 | 
119 |   .card {
120 |     margin-bottom: 10px;
121 | 
122 |     &.is-active {
123 |       background-color: #eeeeee;
124 |     }
125 | 
126 |     &:hover {
127 |       cursor: pointer;
128 |       background-color: #eeeeee;
129 |     }
130 |   }
131 | 
132 |   .no-posts-title {
133 |     font-size: 30px;
134 |   }
135 | 
136 |   .delete-button {
137 |     display: block;
138 |     width: 100px;
139 |     margin-left: auto;
140 |     margin-right: 0;
141 |   }
142 | </style>
143 | 
144 | 
145 | 
146 | 
147 | 
148 | 
149 | 
150 | 


--------------------------------------------------------------------------------
/pages/posts/_id.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="blogs-page">
 4 |       <div class="main-content">
 5 |         <div class="container">
 6 |           <div class="columns is-mobile">
 7 |             <div class="column is-8 is-offset-2">
 8 |               <div class="section">
 9 |                 <div class="title">
10 |                   <h1>Detail View</h1>
11 |                   <hr>
12 |                 </div>
13 |                 <div class="post-content">
14 |                   <h1 class="title">{{post.title}}</h1>
15 |                   <h2 class="subtitle">{{post.subtitle}}</h2>
16 |                   <div class="markdown">
17 |                     <!-- Post Markdown content -->
18 |                     <div v-html="compiledMarkdown"></div>
19 |                   </div>
20 |                 </div>
21 |               </div>
22 |               <!-- end of post -->
23 |             </div>
24 |             <!-- end of side bar -->
25 |           </div>
26 |         </div>
27 |       </div>
28 |     </div>
29 |   </div>
30 | </template>
31 | <script>
32 | export default {
33 |   computed: {
34 |     post() {
35 |       return this.$store.state.post.item
36 |     },
37 |     compiledMarkdown() {
38 |       if (process.client) {
39 |         return marked(this.post.content, {sanitize: true})
40 |       }
41 | 
42 |       return ''
43 |     }
44 |   },
45 |   fetch({params, store}) {
46 |     return store.dispatch('post/fetchPostById', params.id)
47 |   }
48 | }
49 | </script>
50 | 
51 | 
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 


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


--------------------------------------------------------------------------------
/plugins/filters.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import moment from 'moment'
 3 | 
 4 | 
 5 | Vue.filter('formatDate', (date, dateFormat = 'LL') => {
 6 |   if (!date) {
 7 |     return ''
 8 |   }
 9 | 
10 |   return moment(date).format(dateFormat)
11 | })
12 | 


--------------------------------------------------------------------------------
/resources/1_Index-page.html:
--------------------------------------------------------------------------------
 1 | <div>
 2 |   <nav class="navbar has-shadow">
 3 |     <div class="container">
 4 |       <div class="navbar-brand">
 5 |         <a class="navbar-item" href="../">
 6 |         <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox">
 7 |         </a>
 8 |         <div class="navbar-burger burger"
 9 |              aria-label="menu"
10 |              aria-expanded="false"
11 |              data-target="navMenu">
12 |           <span></span>
13 |           <span></span>
14 |           <span></span>
15 |         </div>
16 |       </div>
17 |       <div id="navMenu" class="navbar-menu">
18 |         <div class="navbar-end">
19 |           <div class="navbar-item has-dropdown">
20 |             <a class="navbar-link">
21 |             Menu
22 |             </a>
23 |             <div class="navbar-dropdown">
24 |               <a class="navbar-item">
25 |               Dashboard
26 |               </a>
27 |               <a class="navbar-item">
28 |               Profile
29 |               </a>
30 |               <a class="navbar-item">
31 |               Settings
32 |               </a>
33 |               <hr class="navbar-divider">
34 |               <div class="navbar-item">
35 |                 Logout
36 |               </div>
37 |             </div>
38 |           </div>
39 |         </div>
40 |       </div>
41 |     </div>
42 |   </nav>
43 |   <div class="blogs-page">
44 |     <div class="main-content">
45 |       <div class="container">
46 |         <div class="columns is-mobile">
47 |           <div class="column is-8 is-offset-2">
48 |             <div class="section">
49 |               <div class="title">
50 |                 <h1>Newest Posts</h1>
51 |                 <hr>
52 |               </div>
53 |               <div class="post">
54 |                 <a class="post-header post-header-link clickable">
55 |                   <h4 class="title is-4">Some Title</h4>
56 |                   <h5 class="subtitle is-5">Some Subtitle</h5>
57 |                 </a>
58 |                 <div class="post-content">
59 |                   by Filip Jerga, 27th Jan, 2019
60 |                 </div>
61 |               </div>
62 |               <div class="post">
63 |                 <a class="post-header post-header-link clickable">
64 |                   <h4 class="title is-4">Some Title</h4>
65 |                   <h5 class="subtitle is-5">Some Subtitle</h5>
66 |                 </a>
67 |                 <div class="post-content">
68 |                   by Filip Jerga, 27th Jan, 2019
69 |                 </div>
70 |               </div>
71 |             </div>
72 |             <!-- end of post -->
73 |           </div>
74 |           <!-- end of side bar -->
75 |         </div>
76 |       </div>
77 |     </div>
78 |   </div>
79 | </div>
80 | 
81 | <!-- Styles -->
82 | .post-content {
83 |   font-style: italic;
84 | }
85 | 
86 | .post {
87 |   margin-bottom: 20px;
88 |   padding: 5px;
89 |   border-bottom: 2px solid transparent;
90 | }
91 | 
92 | .post:hover {
93 |   border-bottom: 2px solid #e8e8e8;
94 | }
95 | 


--------------------------------------------------------------------------------
/resources/2_Checkbox.html:
--------------------------------------------------------------------------------
 1 | <div class="post-right">
 2 |   <label class="checkbox">
 3 |     <input type="checkbox">
 4 |     Read
 5 |   </label>
 6 | </div>
 7 | 
 8 | 
 9 | <!-- Styles -->
10 | .post-footer {
11 |   font-style: italic;
12 | }
13 | .post {
14 |   margin-bottom: 20px;
15 |   padding: 5px;
16 |   border-bottom: 2px solid transparent;
17 |   display: flex;
18 |   flex-direction: row;
19 | }
20 | .post-content {
21 |   flex: 1;
22 | }
23 | .post-right {
24 |   float: right;
25 |   justify-content: flex-end;
26 |   align-self: center;
27 | }
28 | 


--------------------------------------------------------------------------------
/resources/3_manage.html:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="manage-page">
  3 |     <nav class="navbar has-shadow">
  4 |       <div class="container">
  5 |         <div class="navbar-brand">
  6 |           <a class="navbar-item" href="../">
  7 |           <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox">
  8 |           </a>
  9 |           <div class="navbar-burger burger"
 10 |                aria-label="menu"
 11 |                aria-expanded="false"
 12 |                data-target="navMenu">
 13 |             <span></span>
 14 |             <span></span>
 15 |             <span></span>
 16 |           </div>
 17 |         </div>
 18 |         <div id="navMenu" class="navbar-menu">
 19 |           <div class="navbar-end">
 20 |             <div class="navbar-item has-dropdown">
 21 |               <a class="navbar-link">
 22 |               Menu
 23 |               </a>
 24 |               <div class="navbar-dropdown">
 25 |                 <a class="navbar-item">
 26 |                 Dashboard
 27 |                 </a>
 28 |                 <a class="navbar-item">
 29 |                 Profile
 30 |                 </a>
 31 |                 <a class="navbar-item">
 32 |                 Settings
 33 |                 </a>
 34 |                 <hr class="navbar-divider">
 35 |                 <div class="navbar-item">
 36 |                   Logout
 37 |                 </div>
 38 |               </div>
 39 |             </div>
 40 |           </div>
 41 |         </div>
 42 |       </div>
 43 |     </nav>
 44 |     <div class="columns mail-app">
 45 |       <aside class="column is-2 aside hero">
 46 |         <div>
 47 |           <div class="compose has-text-centered">
 48 |             <a class="button is-danger is-block is-bold">
 49 |             <span class="compose">Create</span>
 50 |             </a>
 51 |           </div>
 52 |           <div class="main">
 53 |           </div>
 54 |         </div>
 55 |       </aside>
 56 |       <div class="column is-4 messages hero is-fullheight" id="message-feed">
 57 |         <div class="inbox-messages" id="inbox-messages">
 58 |           <div class="card">
 59 |             <div class="card-content">
 60 |               <div class="msg-header">
 61 |                 <span class="msg-from"><small>From Filip Jerga</small></span>
 62 |                 <span class="msg-timestamp"></span>
 63 |                 <span class="msg-attachment"><i class="fa fa-paperclip"></i></span>
 64 |               </div>
 65 |               <div class="msg-subject">
 66 |                 <span class="msg-subject"><strong id="fake-subject-1">Some Title</strong></span>
 67 |               </div>
 68 |               <div class="msg-snippet">
 69 |                 <p id="fake-snippet-1">Some Subtitle</p>
 70 |               </div>
 71 |             </div>
 72 |           </div>
 73 |           <div class="card">
 74 |             <div class="card-content">
 75 |               <div class="msg-header">
 76 |                 <span class="msg-from"><small>From Filip Jerga </small></span>
 77 |                 <span class="msg-timestamp"></span>
 78 |                 <span class="msg-attachment"><i class="fa fa-paperclip"></i></span>
 79 |               </div>
 80 |               <div class="msg-subject">
 81 |                 <span class="msg-subject"><strong id="fake-subject-1">Some Title 2</strong></span>
 82 |               </div>
 83 |               <div class="msg-snippet">
 84 |                 <p id="fake-snippet-1">Some Subtitle 2</p>
 85 |               </div>
 86 |             </div>
 87 |           </div>
 88 |         </div>
 89 |       </div>
 90 |       <div class="column is-6 message hero is-fullheight is-hidden" id="message-pane">
 91 |         <div class="box message-preview">
 92 |           <div class="top">
 93 |             <div class="avatar">
 94 |               <img src="https://placehold.it/128x128">
 95 |             </div>
 96 |             <div class="address">
 97 |               <div class="name">John Smith</div>
 98 |               <div class="email">someone@gmail.com</div>
 99 |             </div>
100 |             <hr>
101 |             <div class="content">
102 |             </div>
103 |           </div>
104 |         </div>
105 |       </div>
106 |     </div>
107 |     <footer class="footer">
108 |       <div class="container">
109 |         <div class="content has-text-centered">
110 |           <p>
111 |             <strong>Bulma Templates</strong> by <a href="https://github.com/dansup">Daniel Supernault</a>. The source code is licensed
112 |             <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
113 |           </p>
114 |           <p>
115 |             <a class="icon" href="https://github.com/dansup/bulma-templates">
116 |             <i class="fa fa-github"></i>
117 |             </a>
118 |           </p>
119 |         </div>
120 |       </div>
121 |     </footer>
122 |   </div>
123 | </template>
124 | 
125 | <script>
126 | 
127 | </script>
128 | 
129 | <style>
130 |   .manage-page {
131 |     padding: 30px;
132 |   }
133 | 
134 |   .card {
135 |     margin-bottom: 10px;
136 |   }
137 | 
138 |   .card:hover {
139 |     cursor: pointer;
140 |     background-color: #eeeeee;
141 |   }
142 | </style>
143 | 


--------------------------------------------------------------------------------
/resources/4_Modal.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <template>
 3 |   <div>
 4 |     <a class="button is-danger is-block is-bold">
 5 |       <span class="compose">Create</span>
 6 |     </a>
 7 |     <div class="modal is-active">
 8 |       <div class="modal-background"></div>
 9 |       <div class="modal-card">
10 |         <header class="modal-card-head">
11 |           <p class="modal-card-title">Modal title</p>
12 |           <button class="delete" aria-label="close"></button>
13 |         </header>
14 |         <section class="modal-card-body">
15 |           <!-- Content ... -->
16 |         </section>
17 |         <footer class="modal-card-foot">
18 |           <button class="button is-success">Save changes</button>
19 |           <button class="button">Cancel</button>
20 |         </footer>
21 |       </div>
22 |     </div>
23 |   </div>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/resources/5_Modal_Form.html:
--------------------------------------------------------------------------------
 1 | <form class="post-form">
 2 |   <div class="field">
 3 |     <label class="label">Title</label>
 4 |     <div class="control">
 5 |       <input class="input" type="text" placeholder="Awesome Title">
 6 |     </div>
 7 |   </div>
 8 | 
 9 |   <div class="field">
10 |     <label class="label">Subtitle</label>
11 |     <div class="control">
12 |       <input class="input" type="email" placeholder="Awesome subtitle">
13 |     </div>
14 |   </div>
15 |   <div class="field">
16 |     <label class="label">Content</label>
17 |     <div class="control">
18 |       <textarea class="textarea" placeholder="Awesome Content"></textarea>
19 |     </div>
20 |   </div>
21 | </form>
22 | 


--------------------------------------------------------------------------------
/resources/6_Post_Update.html:
--------------------------------------------------------------------------------
 1 | <form class="post-form">
 2 |   <div class="field">
 3 |     <label class="label">Title</label>
 4 |     <div class="control">
 5 |       <input
 6 |         class="input"
 7 |         type="text"
 8 |         placeholder="Awesome Title">
 9 |     </div>
10 |   </div>
11 |   <div class="field">
12 |     <label class="label">Subtitle</label>
13 |     <div class="control">
14 |       <input
15 |         class="input"
16 |         type="email"
17 |         placeholder="Awesome subtitle">
18 |     </div>
19 |   </div>
20 |   <div class="field">
21 |     <label class="label">Content</label>
22 |     <div class="control">
23 |       <textarea
24 |         class="textarea"
25 |          placeholder="Awesome Content"></textarea>
26 |     </div>
27 |   </div>
28 |   <button class="button is-primary" >Update</button>
29 | </form>
30 | 


--------------------------------------------------------------------------------
/resources/7_delete_button.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <button @click="deletePost" class="button is-danger delete-button">Delete</button>
 3 | 
 4 | .delete-button {
 5 |     display: block;
 6 |     width: 100px;
 7 |     margin-left: auto;
 8 |     margin-right: 0;
 9 | }
10 | 


--------------------------------------------------------------------------------
/resources/8_PostDetail.html:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="blogs-page">
 4 |       <div class="main-content">
 5 |         <div class="container">
 6 |           <div class="columns is-mobile">
 7 |             <div class="column is-8 is-offset-2">
 8 |               <div class="section">
 9 |                 <div class="title">
10 |                   <h1>Detail View</h1>
11 |                   <hr>
12 |                 </div>
13 |                 <div class="post-content">
14 |                   <h1 class="title">Some Title</h1>
15 |                   <h2 class="subtitle">Some Subtitle</h2>
16 |                   <div class="markdown">
17 |                     <!-- Post Markdown content -->
18 |                     <div></div>
19 |                   </div>
20 |                 </div>
21 |               </div>
22 |               <!-- end of post -->
23 |             </div>
24 |             <!-- end of side bar -->
25 |           </div>
26 |         </div>
27 |       </div>
28 |     </div>
29 |   </div>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const consola = require('consola')
 3 | const { Nuxt, Builder } = require('nuxt')
 4 | const app = express()
 5 | 
 6 | // Import and Set Nuxt.js options
 7 | const config = require('../nuxt.config.js')
 8 | config.dev = !(process.env.NODE_ENV === 'production')
 9 | 
10 | async function start() {
11 |   // Init Nuxt.js
12 |   const nuxt = new Nuxt(config)
13 | 
14 |   const { host, port } = nuxt.options.server
15 | 
16 |   // Build only in dev mode
17 |   if (config.dev) {
18 |     const builder = new Builder(nuxt)
19 |     await builder.build()
20 |   } else {
21 |     await nuxt.ready()
22 |   }
23 | 
24 |   // Give nuxt middleware to express
25 |   app.use(nuxt.render)
26 | 
27 |   // Listen the server
28 |   app.listen(port, host)
29 |   consola.ready({
30 |     message: `Server listening on http://${host}:${port}`,
31 |     badge: true
32 |   })
33 | }
34 | start()
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 


--------------------------------------------------------------------------------
/server/routes/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const app = express()
 3 | const bodyParser = require('body-parser')
 4 | 
 5 | const fs = require('fs')
 6 | const path = require('path')
 7 | const filePath = '../../store/initial_data.json'
 8 | const initialData = require(filePath)
 9 | 
10 | app.use(bodyParser.json())
11 | 
12 | app.get('/posts', function(req, res) {
13 |   return res.json(initialData.posts)
14 | })
15 | 
16 | app.post('/posts', function(req, res) {
17 |   const post = req.body
18 |   initialData.posts.push(post)
19 | 
20 |   fs.writeFile(path.join(__dirname, filePath), JSON.stringify(initialData, null, 2), function(err) {
21 |     if (err) {
22 |       return res.status(422).send(err)
23 |     }
24 | 
25 |     return res.json('File Sucesfully updated')
26 |   })
27 | })
28 | 
29 | app.patch('/posts/:id', function(req, res) {
30 |   const id = req.params.id
31 |   const post = req.body
32 |   const index = initialData.posts.findIndex(p => p._id === post._id)
33 |   initialData.posts[index] = post
34 | 
35 |   if (index !== -1) {
36 |     fs.writeFile(path.join(__dirname, filePath), JSON.stringify(initialData, null, 2), function(err) {
37 |       if (err) {
38 |         return res.status(422).send(err)
39 |       }
40 | 
41 |       return res.json('File Sucesfully Updated')
42 |     })
43 |   } else {
44 |     return res.status(422).send({error: 'Post cannot be updated!'})
45 |   }
46 | })
47 | 
48 | //
49 | app.delete('/posts/:id', function(req, res) {
50 |   const id = req.params.id
51 |   const index = initialData.posts.findIndex(p => p._id === id)
52 | 
53 |   if (index !== -1) {
54 |     initialData.posts.splice(index, 1)
55 | 
56 |     fs.writeFile(path.join(__dirname, filePath), JSON.stringify(initialData, null, 2), function(err) {
57 |       if (err) {
58 |         return res.status(422).send(err)
59 |       }
60 | 
61 |       return res.json({message: 'File Sucesfully Updated'})
62 |     })
63 |   } else {
64 |     return res.status(422).send({error: 'Post cannot be updated!'})
65 |   }
66 | })
67 | 
68 | 
69 | 
70 | 
71 | module.exports = {
72 |   path: '/api',
73 |   handler: app
74 | }
75 | 
76 | 
77 | 
78 | 


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


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jerga99/nuxt-posts/232ada0ce60800fe9aa91a909f4c28890d59c8ac/static/favicon.ico


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


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jerga99/nuxt-posts/232ada0ce60800fe9aa91a909f4c28890d59c8ac/store/index.js


--------------------------------------------------------------------------------
/store/initial_data.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "posts": [
 3 |     {
 4 |       "title": "sdasdasdadasd",
 5 |       "subtitle": "adadadad",
 6 |       "content": "adadadda",
 7 |       "_id": "jg4stma",
 8 |       "createdAt": 1563560226848
 9 |     },
10 |     {
11 |       "title": "asdada",
12 |       "subtitle": "dadada",
13 |       "content": "dasdadd",
14 |       "_id": "jgx0htk",
15 |       "createdAt": 1563560230288
16 |     },
17 |     {
18 |       "title": "New Post",
19 |       "subtitle": "New post with markdown",
20 |       "content": "# h1 Heading 8-)\n## h2 Heading\n### h3 Heading\n#### h4 Heading\n##### h5 Heading\n",
21 |       "_id": "m9cafnc",
22 |       "createdAt": 1563567352609
23 |     },
24 |     {
25 |       "title": "Amazing New Post! UPDATED",
26 |       "subtitle": "Amazing new post subtitle",
27 |       "content": "---\n__Advertisement :)__\n\n- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image\n  resize in browser.\n- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly\n  i18n with plurals support and easy syntax.\n\nYou will like those projects!\n\n---\n\n# h1 Heading 8-)\n## h2 Heading\n### h3 Heading\n#### h4 Heading\n##### h5 Heading\n###### h6 Heading\n\n\n## Horizontal Rules\n\n___\n\n---\n\n***\n\n\n## Typographic replacements\n\nEnable typographer option to see result.\n\n(c) (C) (r) (R) (tm) (TM) (p) (P) +-\n\ntest.. test... test..... test?..... test!....\n\n!!!!!! ???? ,,  -- ---\n\n\"Smartypants, double quotes\" and 'single quotes'",
28 |       "_id": "vidi2j3",
29 |       "createdAt": 1563612079853
30 |     }
31 |   ]
32 | }


--------------------------------------------------------------------------------
/store/post.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import INITIAL_DATA from './initial_data.json'
  3 | import Vue from 'vue'
  4 | 
  5 | 
  6 | export function fetchPostsAPI() {
  7 |   return new Promise((resolve, reject) => {
  8 |     setTimeout(() => {
  9 |       resolve(INITIAL_DATA.posts)
 10 |     }, 0)
 11 |   })
 12 | }
 13 | 
 14 | 
 15 | export const state = () => {
 16 |   return {
 17 |     items: [],
 18 |     archivedItems: [],
 19 |     item: {}
 20 |   }
 21 | }
 22 | 
 23 | // Getters are like computed properties but for Vuex
 24 | export const getters = {
 25 |   hasEmptyItems(state) {
 26 |     return state.items.length === 0
 27 |   }
 28 | }
 29 | 
 30 | // Very good spot to send a request to a server. Usualy Actions resolve into some data
 31 | export const actions = {
 32 |   getArchivedPosts({commit}) {
 33 |     const archivedPosts = localStorage.getItem('archived_posts')
 34 |     if (archivedPosts) {
 35 |       commit('setArchivedPosts', JSON.parse(archivedPosts))
 36 |       return archivedPosts
 37 |     } else {
 38 |       localStorage.setItem('archived_posts', JSON.stringify([]))
 39 |       return []
 40 |     }
 41 |   },
 42 |   togglePost({state, commit, dispatch}, postId) {
 43 |     if (state.archivedItems.includes(postId)) {
 44 |       // remove post id
 45 |       const index = state.archivedItems.findIndex(pId => pId === postId)
 46 |       commit('removeArchivedPost', index)
 47 |       dispatch('persistArchivedPosts')
 48 |       return postId
 49 |     } else {
 50 |       // add Post id
 51 |       commit('addArchivedPost', postId)
 52 |       dispatch('persistArchivedPosts')
 53 |       return postId
 54 |     }
 55 |   },
 56 |   persistArchivedPosts({state}) {
 57 |     localStorage.setItem('archived_posts', JSON.stringify(state.archivedItems))
 58 |   },
 59 |   fetchPosts({commit}) {
 60 |     return this.$axios.$get('/api/posts')
 61 |       .then((posts) => {
 62 |         commit('setPosts', posts)
 63 |         return posts
 64 |       })
 65 |   },
 66 |   fetchPostById({commit}, postId) {
 67 |     return this.$axios.$get('/api/posts')
 68 |       .then((posts) => {
 69 |         const selectedPost = posts.find((p) => p._id === postId)
 70 |         commit('setPost', selectedPost)
 71 |         return selectedPost
 72 |       })
 73 |   },
 74 |   createPost({commit}, postData) {
 75 |     postData._id = Math.random().toString(36).substr(2, 7)
 76 |     postData.createdAt = (new Date()).getTime()
 77 | 
 78 |     return this.$axios.$post('/api/posts', postData)
 79 |       .then((res) => {
 80 |         commit('addPost', postData)
 81 |         return postData
 82 |       })
 83 |   },
 84 |   updatePost({commit, state}, postData) {
 85 |     const index = state.items.findIndex((post) => {
 86 |       return post._id === postData._id
 87 |     })
 88 | 
 89 |     if (index !== -1) {
 90 |       return this.$axios.$patch(`/api/posts/${postData._id}`, postData)
 91 |         .then((res) => {
 92 |           commit('replacePost', {post: postData, index})
 93 |           return postData
 94 |         })
 95 |     }
 96 |   },
 97 |   deletePost({commit, state}, postId) {
 98 |     const index = state.items.findIndex((post) => {
 99 |       return post._id === postId
100 |     })
101 | 
102 |     if (index !== -1) {
103 |       return this.$axios.$delete(`/api/posts/${postId}`)
104 |         .then((res) => {
105 |           commit('deletePost', index)
106 |           return postId
107 |         })
108 |     }
109 |   }
110 | }
111 | 
112 | // Mutations are simple functions that have access to a state.
113 | // Mutations are used to assign values to a state
114 | export const mutations = {
115 |   setArchivedPosts(state, archivedPosts) {
116 |     state.archivedItems = archivedPosts
117 |   },
118 |   addArchivedPost(state, postId) {
119 |     state.archivedItems.push(postId)
120 |   },
121 |   removeArchivedPost(state, index) {
122 |     state.archivedItems.splice(index, 1)
123 |   },
124 |   setPosts(state, posts) {
125 |     state.items = posts
126 |   },
127 |   setPost(state, post) {
128 |     state.item = post
129 |   },
130 |   addPost(state, post) {
131 |     state.items.push(post)
132 |   },
133 |   replacePost(state, {post, index}) {
134 |     Vue.set(state.items, index, post)
135 |   },
136 |   deletePost(state, postIndex) {
137 |     state.items.splice(postIndex, 1)
138 |   }
139 | }
140 | 
141 | 
142 | 
143 | 
144 | 
145 | 
146 | 
147 | 
148 | 
149 | 
150 | 


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