├── static
    ├── .gitkeep
    └── img
    │   └── logo.png
├── .travis.yml
├── tamiatlogo.png
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   └── img
    │   │   ├── coast.jpg
    │   │   ├── hero.jpg
    │   │   ├── balloon.jpg
    │   │   ├── island.jpg
    │   │   └── mountain.jpg
    ├── App.vue
    ├── mixins
    │   ├── notifier.js
    │   └── image-loader.js
    ├── config.js
    ├── main.js
    ├── components
    │   ├── Admin
    │   │   ├── content
    │   │   │   ├── editor-options.js
    │   │   │   ├── Media.vue
    │   │   │   ├── UserNew.vue
    │   │   │   ├── Posts.vue
    │   │   │   ├── PostNew.vue
    │   │   │   ├── Users.vue
    │   │   │   ├── PostEdit.vue
    │   │   │   ├── Settings.vue
    │   │   │   └── Pages.vue
    │   │   ├── layout
    │   │   │   ├── Navbar.vue
    │   │   │   └── Sidebar.vue
    │   │   ├── Login.vue
    │   │   └── Signup.vue
    │   ├── Admin.vue
    │   ├── shared
    │   │   └── Modal.vue
    │   └── Home.vue
    └── router
    │   └── index.js
├── .editorconfig
├── .gitignore
├── .babelrc
├── .postcssrc.js
├── firebase.json
├── index.html
├── demo.txt
├── .eslintrc.js
├── LICENSE
├── database.rules.json
├── package.json
└── README.md


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | ---
2 | language: node_js
3 | node_js:
4 |   - "node"
5 | 


--------------------------------------------------------------------------------
/tamiatlogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdelaziz18003/tamiat/master/tamiatlogo.png


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


--------------------------------------------------------------------------------
/static/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdelaziz18003/tamiat/master/static/img/logo.png


--------------------------------------------------------------------------------
/src/assets/img/coast.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdelaziz18003/tamiat/master/src/assets/img/coast.jpg


--------------------------------------------------------------------------------
/src/assets/img/hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdelaziz18003/tamiat/master/src/assets/img/hero.jpg


--------------------------------------------------------------------------------
/src/assets/img/balloon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdelaziz18003/tamiat/master/src/assets/img/balloon.jpg


--------------------------------------------------------------------------------
/src/assets/img/island.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdelaziz18003/tamiat/master/src/assets/img/island.jpg


--------------------------------------------------------------------------------
/src/assets/img/mountain.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abdelaziz18003/tamiat/master/src/assets/img/mountain.jpg


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


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


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


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


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "dist",
 4 |     "ignore": [
 5 |       "firebase.json",
 6 |       "**/.*",
 7 |       "**/node_modules/**"
 8 |     ],
 9 |     "rewrites": [
10 |       {
11 |         "source": "**",
12 |         "destination": "/index.html"
13 |       }
14 |     ]
15 |   },
16 |   "database": {
17 |     "rules": "database.rules.json"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 | 	<title>Tamiat CMS | Front end focused CMS based on vue.js and firebase</title>
 7 |     <link rel="shortcut icon" type="image/x-icon" href="./src/assets/logo.png">
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <!-- built files will be auto injected -->
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'App'
10 | }
11 | </script>
12 | 
13 | <style lang="sass">
14 | 
15 | html,
16 | body,
17 | #app,
18 | .admin
19 |   background-color: #F1F1F1
20 |   height: 100%
21 |   width: 100%
22 |   margin: 0px
23 |   padding: 0px
24 | 
25 | .bulma
26 |   @import "../node_modules/bulma/bulma"
27 |   *
28 |     box-sizing: border-box
29 | 
30 | </style>
31 | 


--------------------------------------------------------------------------------
/demo.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
 3 | <script>
 4 |   // Initialize Firebase
 5 |   var config = {
 6 |     apiKey: "AIzaSyDN6vYIk-89PI1y1gmI8P-33hvZ8NxT3iI",
 7 |     authDomain: "tamiatcms.firebaseapp.com",
 8 |     databaseURL: "https://tamiatcms.firebaseio.com",
 9 |     projectId: "tamiatcms",
10 |     storageBucket: "tamiatcms.appspot.com",
11 |     messagingSenderId: "94963392700"
12 |   };
13 |   firebase.initializeApp(config);
14 | </script>
15 | 
16 | Username: demo@tamiat.org
17 | Password: password
18 | 


--------------------------------------------------------------------------------
/src/mixins/notifier.js:
--------------------------------------------------------------------------------
 1 | // USED BY TAMIAT CMS
 2 | 
 3 | export default {
 4 |   data () {
 5 |     return {
 6 |       notification: {
 7 |         type: '',
 8 |         message: ''
 9 |       }
10 |     }
11 |   },
12 |   methods: {
13 |     showNotification (type, message) {
14 |       this.notification.type = type
15 |       this.notification.message = message
16 |       setTimeout(() => {
17 |         this.hideNotifications()
18 |       }, 3000)
19 |     },
20 |     hideNotifications () {
21 |       // hide all notifications
22 |       this.notification.type = ''
23 |       this.notification.message = ''
24 |     }
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
 1 | /* This is the Firebase configuration file */
 2 | 
 3 | import Firebase from 'firebase'
 4 | 
 5 | let config = {
 6 |   apiKey: 'AIzaSyDN6vYIk-89PI1y1gmI8P-33hvZ8NxT3iI',
 7 |   authDomain: 'tamiatcms.firebaseapp.com',
 8 |   databaseURL: 'https://tamiatcms.firebaseio.com',
 9 |   projectId: 'tamiatcms',
10 |   storageBucket: 'tamiatcms.appspot.com',
11 |   messagingSenderId: '94963392700'
12 | }
13 | 
14 | let app = Firebase.initializeApp(config)
15 | let db = app.database()
16 | 
17 | // create a database references
18 | const settingsRef = db.ref('settings')
19 | const pagesRef = db.ref('pages')
20 | const postsRef = db.ref('posts')
21 | const usersRef = db.ref('users')
22 | const mediaRef = db.ref('media')
23 | 
24 | export { postsRef, usersRef, settingsRef, pagesRef, mediaRef }
25 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // https://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parserOptions: {
 6 |     parser: 'babel-eslint'
 7 |   },
 8 |   env: {
 9 |     browser: true,
10 |   },
11 |   extends: [
12 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
13 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
14 |     'plugin:vue/essential', 
15 |     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
16 |     'standard'
17 |   ],
18 |   // required to lint *.vue files
19 |   plugins: [
20 |     'vue'
21 |   ],
22 |   // add your custom rules here
23 |   rules: {
24 |     // allow async-await
25 |     'generator-star-spacing': 'off',
26 |     // allow debugger during development
27 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/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 App from './App'
 5 | import router from './router'
 6 | import VueFire from 'vuefire'
 7 | import VueQuillEditor from 'vue-quill-editor'
 8 | 
 9 | // import external stylesheets
10 | import '../node_modules/font-awesome/css/font-awesome.css'
11 | import '../node_modules/bulma/css/bulma.css'
12 | 
13 | // import vue-quill-editor styles
14 | import 'quill/dist/quill.core.css'
15 | import 'quill/dist/quill.snow.css'
16 | import 'quill/dist/quill.bubble.css'
17 | 
18 | Vue.use(VueFire) // activate vuefire plugin
19 | Vue.use(VueQuillEditor) // activate vue-quill-editor
20 | Vue.config.productionTip = false
21 | 
22 | /* eslint-disable no-new */
23 | new Vue({
24 |   el: '#app',
25 |   router,
26 |   components: { App },
27 |   template: '<App/>'
28 | })
29 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 tamiat
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/Admin/content/editor-options.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   debug: 'warn',
 3 |   modules: {
 4 |     toolbar: {
 5 |       container: [
 6 |         ['bold', 'italic', 'underline', 'strike'], // toggled buttons
 7 |         ['blockquote', 'code-block'],
 8 | 
 9 |         [{ 'header': 1 }, { 'header': 2 }], // custom button values
10 |         [{ 'list': 'ordered' }, { 'list': 'bullet' }],
11 |         [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
12 |         [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
13 |         [{ 'direction': 'rtl' }], // text direction
14 | 
15 |         [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
16 |         [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
17 | 
18 |         [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
19 |         [{ 'font': [] }],
20 |         [{ 'align': '' }, { 'align': 'center' }, { 'align': 'right' }],
21 | 
22 |         ['image', 'link']
23 |       ],
24 |       handlers: {
25 |         'image': function () {
26 |           document.getElementById('getImage').click()
27 |         }
28 |       }
29 |     }
30 |   },
31 |   placeholder: 'post body ...',
32 |   theme: 'snow'
33 | }
34 | 


--------------------------------------------------------------------------------
/src/mixins/image-loader.js:
--------------------------------------------------------------------------------
 1 | // USED BY TAMIAT CMS
 2 | 
 3 | import firebase from 'firebase'
 4 | import { mediaRef } from '../config'
 5 | 
 6 | export default {
 7 |   methods: {
 8 |     // upload image file
 9 |     uploadImage (e) {
10 |       let file = e.target.files[0]
11 |       let storageRef = firebase.storage().ref('images/' + file.name)
12 | 
13 |       storageRef.put(file).then((snapshot) => {
14 |         console.log('Image uploaded')
15 |         mediaRef.once('value')
16 |           .then(function (media) {
17 |             const existingEntry = Object.values(media.val()).find(e => e.path === snapshot.ref.fullPath)
18 |             if (existingEntry) {
19 |               console.log(existingEntry)
20 |               this.insertImage(existingEntry.src)
21 |             } else {
22 |               mediaRef.push({
23 |                 src: snapshot.downloadURL,
24 |                 path: snapshot.ref.fullPath,
25 |                 name: snapshot.metadata.name
26 |               })
27 |               this.insertImage(snapshot.downloadURL)
28 |             }
29 |           })
30 |       })
31 |     },
32 |     // insert the uploaded image as a DOM node in the editor
33 |     insertImage (url) {
34 |       let img = document.createElement('img')
35 |       img.src = url
36 |       document.getElementsByClassName('ql-editor')[0].appendChild(img)
37 |     }
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/database.rules.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     ".write": "auth.uid === 'YOURID'",    
 4 |     ".read": true,
 5 |     "posts": {
 6 |       "$id": {
 7 |         "author": {
 8 |           ".validate": "newData.isString()"
 9 |         },
10 |         "body": {
11 |           ".validate": "newData.isString()"
12 |         },
13 |         "title": {
14 |           ".validate": "newData.isString()"
15 |         },
16 |         "img": {
17 |           ".validate": "newData.isString()"
18 |         },
19 |         "created": {
20 |           // ".validate": "newData.val() < now"
21 |         }
22 |       }
23 |     },
24 |     "settings": {
25 |       ".validate": true
26 |     },
27 |     "pages": {
28 |       "$id": {
29 |         "name": {
30 |           ".validate": "newData.isString()"
31 |         },
32 |         "fields": {
33 |           ".validate": true
34 |         },
35 |         "$other": {
36 |           ".validate": false
37 |         }
38 |       }
39 |     },
40 |     "users": {
41 |       "$uid": {
42 |         // ".write": "auth != null && auth.uid == $uid && root.child('users').child(auth.uid).child('role').val() === 'admin' "
43 |       }
44 |     },
45 |     "media": {
46 |       "$id": {
47 |         // ".write": "auth != null && auth.uid == $uid && root.child('users').child(auth.uid).child('role').val() === 'admin' "
48 |       }
49 |     },
50 |     "$other": {
51 |       ".validate": false
52 |     }
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | // import app pages
 5 | import Home from '../components/Home'
 6 | import Admin from '../components/Admin'
 7 | import Login from '../components/Admin/Login'
 8 | 
 9 | // import admin page components
10 | import Posts from '../components/Admin/content/Posts'
11 | import PostNew from '../components/Admin/content/PostNew'
12 | import PostEdit from '../components/Admin/content/PostEdit'
13 | import Settings from '../components/Admin/content/Settings'
14 | import Pages from '../components/Admin/content/Pages'
15 | import Media from '../components/Admin/content/Media'
16 | 
17 | Vue.use(Router)
18 | 
19 | export default new Router({
20 |   mode: 'history',
21 |   routes: [
22 |     {
23 |       path: '/',
24 |       name: 'Home',
25 |       component: Home
26 |     },
27 |     {
28 |       path: '/login',
29 |       name: 'Login',
30 |       component: Login
31 |     },
32 |     {
33 |       path: '/admin',
34 |       name: 'Admin',
35 |       component: Admin,
36 |       children: [
37 |         {
38 |           path: 'posts',
39 |           component: Posts,
40 |           children: [
41 |             {
42 |               path: 'new',
43 |               component: PostNew
44 |             },
45 |             {
46 |               path: 'edit/:key',
47 |               component: PostEdit
48 |             }
49 |           ]
50 |         },
51 |         {
52 |           path: 'settings',
53 |           component: Settings
54 |         },
55 |         {
56 |           path: 'pages',
57 |           component: Pages
58 |         },
59 |         {
60 |           path: 'media',
61 |           component: Media
62 |         }
63 |       ]
64 |     },
65 |     {
66 |       path: '*',
67 |       name: 'default',
68 |       component: Home
69 |     }
70 |   ]
71 | })
72 | 


--------------------------------------------------------------------------------
/src/components/Admin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="admin bulma" id="admin">
 3 |     <!-- The admin page layout -->
 4 |     <navbar></navbar>
 5 |     <sidebar></sidebar>
 6 | 
 7 |     <!-- The admin page content -->
 8 |     <div class="wrapper">
 9 |       <router-view></router-view>
10 |     </div>
11 | 
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import Navbar from './Admin/layout/Navbar'
17 | import Sidebar from './Admin/layout/Sidebar'
18 | import firebase from 'firebase'
19 | 
20 | export default {
21 |   name: 'admin',
22 |   components: {
23 |     'navbar': Navbar,
24 |     'sidebar': Sidebar
25 |   },
26 |   // prevent unauthenticated users from accessing the admin area
27 |   // and direct them to the login page
28 |   beforeRouteEnter (to, from, next) {
29 |     // get the current logged in user
30 |     firebase.auth().onAuthStateChanged((user) => {
31 |       if (user) {
32 |         // continue to /admin
33 |         next()
34 |       } else {
35 |         // redirect to /login
36 |         next('/login')
37 |       }
38 |     })
39 |   }
40 | }
41 | 
42 | </script>
43 | 
44 | <style lang="sass">
45 | 
46 | #admin
47 |   font-family: 'Quicksand', sans-serif
48 |   .wrapper
49 |     width: calc(100% - 110px)
50 |     position: absolute
51 |     top: 52px
52 |     left: 100px
53 |     background-color: #F1F1F1
54 | 
55 |     .content-heading
56 |       justify-content: baseline
57 |       align-content: center
58 |       align-items: center
59 |       h3
60 |         margin: 1em 1em 1em 0em
61 | 
62 |   .actions
63 |     display: none
64 |     span
65 |       cursor: pointer
66 | 
67 |   tr:hover .actions
68 |     display: inline
69 |     span
70 |       padding: 0px 0px 0px 10px
71 | 
72 |   .notification
73 |     position: fixed
74 |     top: 60px
75 |     right: 10px
76 |     z-index: 2000
77 |     max-width: 90%
78 | 
79 | </style>
80 | 


--------------------------------------------------------------------------------
/src/components/Admin/layout/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="navbar" id="navbar">
 3 | 
 4 |     <!-- the navbar brand -->
 5 |     <div class="navbar-brand">
 6 |       <router-link class="navbar-item" to="/">
 7 |         <img src="/static/img/logo.png" alt="Tamiat CMS logo">
 8 |       </router-link>
 9 |       <div class="navbar-burger burger" data-target="navbar" @click="toggleMenu">
10 |         <span></span>
11 |         <span></span>
12 |         <span></span>
13 |       </div>
14 |     </div>
15 | 
16 |     <!-- the navbar right menu -->
17 |     <div class="navbar-menu" id="navbar" :class="{'is-active': mobileMenuIsActive}">
18 |       <div class="navbar-end">
19 |         <span class="navbar-item">
20 |           {{currentUser.email}}
21 |         </span>
22 |         <span class="navbar-item sign-out" @click="signOut">
23 |           <span class="icon is-medium has-text-centered">
24 |             <i class="fa fa-power-off"></i>
25 |           </span>
26 |         </span>
27 |       </div>
28 |     </div>
29 | 
30 |   </nav>
31 | </template>
32 | 
33 | <script>
34 | import firebase from 'firebase'
35 | import { usersRef } from '../../../config'
36 | 
37 | export default {
38 |   name: 'navbar',
39 |   data () {
40 |     return {
41 |       mobileMenuIsActive: false,
42 |       currentUser: firebase.auth().currentUser
43 |     }
44 |   },
45 |   firebase: {
46 |     users: usersRef
47 |   },
48 |   methods: {
49 |     signOut () {
50 |       // sign the current user out
51 |       firebase.auth().signOut()
52 |         .then(() => {
53 |           this.$router.push('/')
54 |         })
55 |         .catch(() => {
56 |           console.log('sign out fails')
57 |         })
58 |     },
59 |     toggleMenu () {
60 |       this.mobileMenuIsActive = !this.mobileMenuIsActive
61 |     }
62 |   }
63 | }
64 | 
65 | </script>
66 | 
67 | <style lang="scss">
68 | $navbarBg: #333;
69 | $navbarColor: #aaaaaa;
70 | 
71 | #navbar {
72 |   position: fixed;
73 |   z-index: 1024;
74 |   width: 100%;
75 |   background-color: $navbarBg;
76 | 
77 |   .navbar-item {
78 |     color: $navbarColor;
79 |     &:hover {
80 |       color: white;
81 |     }
82 |   }
83 | 
84 |   .sign-out {
85 |     cursor: pointer;
86 |   }
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: '/',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/src/components/Admin/content/Media.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="gallery" v-if="!media.hasOwnProperty('.value')">
 4 |       <a class="img-container" v-for="(img, key) in images" :key="key" v-if="img.src && img.path">
 5 |         <div @click="deleteImage(img.path, key)" class="delete delete-button"></div>
 6 |         <div class="image-div" :style="{ 'background-image': 'url(' + img.src + ')' }"></div>
 7 |         <div class="info-tab"> {{img.name}} </div>
 8 |       </a>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import firebase from 'firebase'
15 | 
16 | import { mediaRef } from '../../../config'
17 | 
18 | export default {
19 |   name: 'Media',
20 |   data: function () {
21 |     return {
22 |     }
23 |   },
24 |   firebase: {
25 |     // load settings as an object instead of array (default)
26 |     media: {
27 |       source: mediaRef,
28 |       asObject: true
29 |     }
30 |   },
31 |   computed: {
32 |     images () {
33 |       return this.media
34 |     }
35 |   },
36 |   methods: {
37 |     deleteImage (path, key) {
38 |       let storageRef = firebase.storage().ref(path)
39 |       var that = this
40 |       storageRef.delete().then(function () {
41 |         that.$firebaseRefs.media.child(key).remove()
42 |       }).catch(function (error) {
43 |         console.error(error)
44 |       })
45 |     }
46 |   }
47 | }
48 | </script>
49 | 
50 | <!-- Add "scoped" attribute to limit CSS to this component only -->
51 | <style lang="scss" scoped>
52 | .img-container {
53 |   margin: 10px;
54 |   position: relative;
55 |   background-color: white;
56 |   width: 400px;
57 |   height: 400px;
58 | }
59 | .delete-button {
60 |   position: absolute;
61 |   top: 20px;
62 |   right: 20px;
63 | }
64 | 
65 | .info-tab {
66 |   position: absolute;
67 |   bottom: 0px;
68 |   height: 28px;
69 |   width: 100%;
70 |   padding: 4px;
71 |   background-color: black;
72 |   color: white;
73 |   opacity: 0.71;
74 | }
75 | 
76 | .image-div {
77 |   height: 100%;
78 |   width: 100%;
79 |   background-size: cover;
80 | }
81 | 
82 | .gallery {
83 |   display: flex;
84 |   flex-wrap: wrap;
85 |   // align-content: flex-start;
86 |   align-items: flex-start;
87 |   height: 100vh;
88 | }
89 | 
90 | .gallery a {
91 |   flex-grow: 1;
92 |   margin: 5px;
93 | }
94 | </style>
95 | 


--------------------------------------------------------------------------------
/src/components/Admin/layout/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <aside class="menu sidebar" id="sidebar">
 3 | 
 4 |     <ul class="menu-list">
 5 |       <li v-for="(item, index) in menu" :key="index">
 6 |         <router-link :to="item.path" v-if="item.path">
 7 |           <span class="icon is-medium has-text-centered">
 8 |             <i :class="['fa', item.icon]"></i>
 9 |           </span>
10 |           <p class="has-text-centered">
11 |             {{ item.name }}
12 |           </p>
13 |         </router-link>
14 |       </li>
15 |     </ul>
16 | 
17 |   </aside>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: 'sidebar',
23 |   data () {
24 |     return {
25 |       // this array contains the all the links in the sidebar
26 |       menu: [
27 |         {
28 |           name: 'posts',
29 |           path: '/admin/posts',
30 |           icon: 'fa-file-text'
31 |         },
32 |         {
33 |           name: 'Pages',
34 |           path: '/admin/pages',
35 |           icon: 'fa-archive'
36 |         },
37 |         {
38 |           name: 'Media',
39 |           path: '/admin/media',
40 |           icon: 'fa-picture-o'
41 |         },
42 |         {
43 |           name: 'Settings',
44 |           path: '/admin/settings',
45 |           icon: 'fa-gear'
46 |         }
47 |       ]
48 |     }
49 |   }
50 | }
51 | 
52 | </script>
53 | 
54 | <style lang="scss">
55 | $sidebarBg: #384A5C;
56 | $sidebarColor: #B7B7B7;
57 | 
58 | #sidebar {
59 |   position: fixed;
60 |   top: 0px;
61 |   left: 0;
62 |   bottom: 0;
63 |   padding: 20px 0 50px;
64 |   width: 90px;
65 |   min-width: 45px;
66 |   max-height: 100vh;
67 |   height: calc(100%);
68 |   z-index: 1024 - 1;
69 |   background: $sidebarBg;
70 |   box-shadow: 0 2px 3px rgba(17, 17, 17, 0.1), 0 0 0 1px rgba(17, 17, 17, 0.1);
71 |   overflow-y: auto;
72 |   overflow-x: hidden;
73 |   padding-top: 65px;
74 | 
75 |   .menu-label {
76 |     padding-left: 5px;
77 |   }
78 | 
79 |   a {
80 |     color: $sidebarColor;
81 |     border-radius: 0px;
82 |     padding: 15px 0px;
83 | 
84 |     &:hover {
85 |       background: $sidebarBg;
86 |       color: white;
87 |     }
88 |   }
89 | 
90 |   .has-text-centered {
91 |     display: block !important;
92 |     width: 100% !important;
93 |     text-align: center !important;
94 |   }
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/src/components/Admin/content/UserNew.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="new-user box">
 3 | 
 4 |     <h4 class="is-size-4">New User</h4>
 5 |     <form class=" columns">
 6 | 
 7 |       <!-- the new user required fields -->
 8 |       <div class="column is-two-thirds">
 9 |         <div v-for="field in fields" class="field columns">
10 |           <div class="column">
11 |             <label class="label is-capitalized">{{field.label}}</label>
12 |           </div>
13 |           <div class="control column">
14 |             <input :type="field.type" class="input" :name="field.label">
15 |           </div>
16 |         </div>
17 |       </div>
18 | 
19 |       <!-- the new user role -->
20 |       <div class="field column is-one-third">
21 |         <label class="label">The New User Role:</label>
22 |         <label class="is-block">
23 |           <input type="radio" name="role" value="admin"> Administrator
24 |         </label>
25 |         <label class="is-block">
26 |           <input type="radio" name="role" value="admin"> Editor
27 |         </label>
28 |         <label class="is-block">
29 |           <input type="radio" name="role" value="admin"> User
30 |         </label>
31 |       </div>
32 | 
33 |     </form>
34 | 
35 |     <!-- the form buttons -->
36 |     <button type="submit" class="button is-info">Add</button>
37 |     <router-link to="/admin/users" class="button is-danger">Cancel</router-link>
38 |   </div>
39 | </template>
40 | 
41 | <script>
42 |   export default {
43 |     name: 'user-new',
44 |     data() {
45 |       return {
46 |         // this array contains all the required fields to add a new user
47 |         fields: [
48 |           {
49 |             label: 'username',
50 |             type: 'text'
51 |           },
52 |           {
53 |             label: 'email',
54 |             type: 'text'
55 |           },
56 |           {
57 |             label: 'first name',
58 |             type: 'text'
59 |           },
60 |           {
61 |             label: 'last name',
62 |             type: 'text'
63 |           },
64 |           {
65 |             label: 'password',
66 |             type: 'password'
67 |           },
68 |         ]
69 |       }
70 |     }
71 |   }
72 | 
73 | </script>
74 | 
75 | <style>
76 |   .new-user,
77 |   h4 {
78 |     margin-bottom: 1em;
79 |   }
80 | 
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/components/shared/Modal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="modal is-active">
 3 |   <div class="modal-background"></div>
 4 |   <div class="modal-card">
 5 |     <header class="modal-card-head">
 6 |         <p class="modal-card-title">{{ header }}</p>
 7 |         <button class="delete is-medium" aria-label="close" @click="$emit('close')"></button>
 8 |     </header>
 9 |     <section class="modal-card-body" v-if="kind == 'addField' || kind == 'addPage' || kind == 'addSetting'">
10 |        <input type="text" class="input" v-if="kind == 'addField'" :placeholder="'Property'" v-model="fieldName">
11 |        <input type="text" class="input" v-if="kind == 'addPage'" :placeholder="'Page'" v-model="pageName">
12 |        <input type="text" class="input" v-if="kind == 'addSetting'" :placeholder="'Setting'" v-model="settingName">
13 |     </section>
14 |     <footer class="modal-card-foot">
15 |       <template v-if="kind == 'deletePage' || kind == 'deleteField' || kind == 'deleteSetting' || kind == 'deletePost'">
16 |         <button class="button is-success" @click="deleteObj()">Confirm</button>
17 |       </template>
18 |       <template v-else>
19 |         <button class="button is-success" @click="add()">Add</button>
20 |       </template>
21 |       <button class="button" @click="$emit('close')">Cancel</button>
22 |     </footer>
23 |   </div>
24 | </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   name: 'modal',
30 |   data () {
31 |     return {
32 |       fieldName: '',
33 |       pageName: '',
34 |       settingName: ''
35 |     }
36 |   },
37 |   methods: {
38 |     add (event) {
39 |       if (this.kind === 'addField') { this.$emit('addField', this.fieldName) }
40 |       if (this.kind === 'addPage') { this.$emit('addPage', this.pageName) }
41 |       if (this.kind === 'addSetting') { this.$emit('addSetting', this.settingName) }
42 |     },
43 |     deleteObj () {
44 |       if (this.kind === 'deleteField') { this.$emit('confirmDeleteField') }
45 |       if (this.kind === 'deletePage') { this.$emit('confirmDeletePage') }
46 |       if (this.kind === 'deleteSetting') { this.$emit('confirmDeleteSetting') }
47 |       if (this.kind === 'deletePost') { this.$emit('confirmDeletePost') }
48 |     }
49 |   },
50 |   props: {
51 |     header: {
52 |       type: String,
53 |       required: true,
54 |       default: '!Error'
55 |     },
56 |     subHeader: {
57 |       type: String,
58 |       required: false,
59 |       default: '!Error'
60 |     },
61 |     kind: {
62 |       type: String
63 |     }
64 |   }
65 | }
66 | </script>
67 | 


--------------------------------------------------------------------------------
/src/components/Admin/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container login bulma">
 3 |     <div class="columns is-centered is-vertical-aligned is-fullheight is-flex">
 4 |       <div class="column box is-one-third">
 5 | 
 6 |         <!-- notification -->
 7 |         <div v-if="notification.message" :class="'notification is-' + notification.type">
 8 |           <button class="delete" @click="hideNotifications"></button>{{notification.message}}
 9 |         </div>
10 | 
11 |         <!-- tamiat CMS logo -->
12 |         <div class="columns is-flex is-centered is-mobile">
13 |           <figure class="column is-half">
14 |             <router-link to="/"><img src="/static/img/logo.png" alt="Tamiat logo"></router-link>
15 |           </figure>
16 |         </div>
17 | 
18 |         <!-- email -->
19 |         <div class="field columns">
20 |           <div class="control column">
21 |             <input type="email" class="input" placeholder="Email" v-model="email">
22 |           </div>
23 |         </div>
24 | 
25 |         <!-- password -->
26 |         <div class="field columns">
27 |           <div class="control column">
28 |             <input type="password" class="input" placeholder="Password" v-model="password">
29 |           </div>
30 |         </div>
31 | 
32 |         <!-- submit button -->
33 |         <button type="submit" class="button is-info is is-fullwidth" @click="login">Login</button>
34 | 
35 |       </div>
36 |     </div>
37 |   </div>
38 | </template>
39 | 
40 | <script>
41 | import firebase from 'firebase'
42 | import notifier from '../../mixins/notifier'
43 | 
44 | export default {
45 |   name: 'log-in',
46 |   data () {
47 |     return {
48 |       email: '',
49 |       password: ''
50 |     }
51 |   },
52 |   mixins: [notifier],
53 |   methods: {
54 |     login () {
55 |       // login to firebase with email and password
56 |       firebase.auth().signInWithEmailAndPassword(this.email, this.password)
57 |         .then((user) => {
58 |           // redirect to the admin page
59 |           this.$router.push('/admin')
60 |         })
61 |         .catch((error) => {
62 |           // display an warning notification
63 |           this.showNotification('warning', error.message)
64 |         })
65 |     }
66 |   }
67 | }
68 | 
69 | </script>
70 | 
71 | <style>
72 | .is-vertical-aligned {
73 |   align-items: center;
74 | }
75 | 
76 | .is-fullheight {
77 |   height: 100vh;
78 | }
79 | 
80 | .login>div {
81 |   padding: 20px;
82 | }
83 | 
84 | .login .box {
85 |   padding: 20px 10px;
86 | }
87 | 
88 | .login p {
89 |   margin-top: 1em;
90 |   font-size: 0.8em;
91 | }
92 | </style>
93 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tamiat",
 3 |   "version": "1.0.0",
 4 |   "description": "Tamiat CMS",
 5 |   "author": "Mahmoud_Nouman <mahmoud@nouman.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "bulma": "^0.6.2",
14 |     "firebase": "^4.9.0",
15 |     "font-awesome": "^4.7.0",
16 |     "moment": "^2.20.1",
17 |     "vue": "^2.5.2",
18 |     "vue-quill-editor": "^3.0.4",
19 |     "vue-router": "^3.0.1",
20 |     "vuefire": "^1.4.5"
21 |   },
22 |   "devDependencies": {
23 |     "autoprefixer": "^7.1.2",
24 |     "babel-core": "^6.22.1",
25 |     "babel-eslint": "^8.2.1",
26 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
27 |     "babel-loader": "^7.1.1",
28 |     "babel-plugin-syntax-jsx": "^6.18.0",
29 |     "babel-plugin-transform-runtime": "^6.22.0",
30 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
31 |     "babel-preset-env": "^1.3.2",
32 |     "babel-preset-stage-2": "^6.22.0",
33 |     "chalk": "^2.0.1",
34 |     "copy-webpack-plugin": "^4.0.1",
35 |     "css-loader": "^0.28.0",
36 |     "eslint": "^4.17.0",
37 |     "eslint-config-standard": "^11.0.0-beta.0",
38 |     "eslint-friendly-formatter": "^3.0.0",
39 |     "eslint-loader": "^1.9.0",
40 |     "eslint-plugin-import": "^2.8.0",
41 |     "eslint-plugin-node": "^6.0.0",
42 |     "eslint-plugin-promise": "^3.6.0",
43 |     "eslint-plugin-standard": "^3.0.1",
44 |     "eslint-plugin-vue": "^4.2.2",
45 |     "extract-text-webpack-plugin": "^3.0.0",
46 |     "file-loader": "^1.1.4",
47 |     "friendly-errors-webpack-plugin": "^1.6.1",
48 |     "html-webpack-plugin": "^2.30.1",
49 |     "node-notifier": "^5.1.2",
50 |     "node-sass": "^4.7.2",
51 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
52 |     "ora": "^1.2.0",
53 |     "portfinder": "^1.0.13",
54 |     "postcss-import": "^11.0.0",
55 |     "postcss-loader": "^2.0.8",
56 |     "postcss-url": "^7.2.1",
57 |     "rimraf": "^2.6.0",
58 |     "sass-loader": "^6.0.6",
59 |     "semver": "^5.3.0",
60 |     "shelljs": "^0.7.6",
61 |     "uglifyjs-webpack-plugin": "^1.1.1",
62 |     "url-loader": "^0.5.8",
63 |     "vue-loader": "^13.3.0",
64 |     "vue-style-loader": "^3.0.1",
65 |     "vue-template-compiler": "^2.5.2",
66 |     "webpack": "^3.6.0",
67 |     "webpack-bundle-analyzer": "^2.9.0",
68 |     "webpack-dev-server": "^2.9.1",
69 |     "webpack-merge": "^4.1.0"
70 |   },
71 |   "engines": {
72 |     "node": ">= 6.0.0",
73 |     "npm": ">= 3.0.0"
74 |   },
75 |   "browserslist": [
76 |     "> 1%",
77 |     "last 2 versions",
78 |     "not ie <= 8"
79 |   ]
80 | }
81 | 


--------------------------------------------------------------------------------
/src/components/Admin/Signup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container login">
  3 |     <div class="columns is-centered is-vertical-aligned is-fullheight is-flex">
  4 |       <div class="column box is-one-third">
  5 | 
  6 |         <!-- warning notification -->
  7 |         <div v-if="err.code" class="notification is-warning">
  8 |           <button class="delete" @click="hideNotif"></button>{{err.message}}
  9 |         </div>
 10 | 
 11 |         <!-- warning notification -->
 12 |         <div v-if="userUID" class="notification is-success">
 13 |           <button class="delete" @click="hideNotif"></button> You have successfully signed up. You will have access to the
 14 |           admin page once your account has been approved.
 15 |         </div>
 16 | 
 17 |         <!-- tamiat CMS logo -->
 18 |         <div class="columns is-flex is-centered is-mobile">
 19 |           <figure class="column is-half">
 20 |             <router-link to="/"><img src="../assets/logo.png" alt="Tamiat logo"></router-link>
 21 |           </figure>
 22 |         </div>
 23 | 
 24 |         <!-- username -->
 25 |         <div class="field columns">
 26 |           <div class="control column">
 27 |             <input type="text" class="input" placeholder="Username" v-model="username" @focus="hideNotif">
 28 |           </div>
 29 |         </div>
 30 | 
 31 |         <!-- email -->
 32 |         <div class="field columns">
 33 |           <div class="control column">
 34 |             <input type="email" class="input" placeholder="Email" v-model="email" @focus="hideNotif">
 35 |           </div>
 36 |         </div>
 37 | 
 38 |         <!-- password -->
 39 |         <div class="field columns">
 40 |           <div class="control column">
 41 |             <input type="password" class="input" placeholder="Password" v-model="password" @focus="hideNotif">
 42 |           </div>
 43 |         </div>
 44 | 
 45 |         <!-- submit button -->
 46 |         <button class="button is-info is is-fullwidth" @click="signUp">Sign Up</button>
 47 |         <p>
 48 |           You already have an account
 49 |           <router-link to="/login">Login</router-link>
 50 |         </p>
 51 | 
 52 |       </div>
 53 |     </div>
 54 |   </div>
 55 | </template>
 56 | 
 57 | <script>
 58 |   import firebase from 'firebase';
 59 | 
 60 |   export default {
 61 |     name: 'sign-up',
 62 |     data() {
 63 |       return {
 64 |         // All the fields required in the login page
 65 |         username: '',
 66 |         email: '',
 67 |         password: '',
 68 |         err: {
 69 |           code: '',
 70 |           message: ''
 71 |         },
 72 |         userUID: ''
 73 |       }
 74 |     },
 75 |     methods: {
 76 |       signUp() {
 77 |         // check if all fields are filled
 78 |         if (this.email && this.username && this.password) {
 79 |           // create a new user with the provided email and password
 80 |           firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
 81 |             .then((user) => {
 82 |               // if user created successfully add it to the db and display a success message
 83 |               this.userUID = user.uid;
 84 |               this.addUser(user.uid);
 85 |             })
 86 |             // if creating user fails display an error message
 87 |             .catch(err => this.err = Object.assign({}, err));
 88 |         } else {
 89 |           this.err.code = 'Empty Fields !!';
 90 |           this.err.message = 'please fill in all the fields !'
 91 |         }
 92 |       },
 93 |       hideNotif() {
 94 |         // hide all notifications
 95 |         this.err.code = '';
 96 |         this.err.message = '';
 97 |         this.userUID = '';
 98 |       },
 99 |       addUser(userUID) {
100 |         // add the new user credentiels to the database using the same ID
101 |         firebase.database().ref('users/' + userUID).set({
102 |           username: this.username,
103 |           email: this.email,
104 |           role: 'guest'
105 |         });
106 |       }
107 |     }
108 |   }
109 | 
110 | </script>
111 | 
112 | <style>
113 |   html,
114 |   body,
115 |   #app {
116 |     background-color: #F1F1F1;
117 |   }
118 | 
119 |   .is-vertical-aligned {
120 |     align-items: center;
121 |   }
122 | 
123 |   .is-fullheight {
124 |     height: 100vh;
125 |   }
126 | 
127 |   .login>div {
128 |     padding: 20px;
129 |   }
130 | 
131 |   .login .box {
132 |     padding: 20px 10px;
133 |   }
134 | 
135 |   .login p {
136 |     margin-top: 1em;
137 |     font-size: 0.8em;
138 |   }
139 | 
140 | </style>
141 | 


--------------------------------------------------------------------------------
/src/components/Admin/content/Posts.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container posts" id="posts">
  3 | 
  4 |     <!-- posts page title -->
  5 |     <div class="content-heading is-flex">
  6 |       <h3 class="is-size-3">Posts</h3>
  7 |       <router-link to="/admin/posts/new" class="button is-info">Add New</router-link>
  8 |     </div>
  9 | 
 10 |     <!-- notification -->
 11 |     <transition mode="out-in" name="fade">
 12 |       <div v-if="notification.message" :class="'notification is-' + notification.type">
 13 |         <button class="delete" @click="hideNotifications"></button>{{notification.message}}
 14 |       </div>
 15 |     </transition>
 16 | 
 17 |      <!-- modal for post delete -->
 18 |     <transition mode="out-in" name="fade">
 19 |       <modal @close="showModal = false" :kind="kind" @confirmDeletePost='confirmDeletePost()' v-if="showModal" :header="header"/>
 20 |     </transition>
 21 | 
 22 |     <!-- the new post form loaded via vue router -->
 23 |       <router-view :add-post="addPost" :update-post="updatePost" :posts="posts" :key="$route.name + ($route.params.key || '')"></router-view>
 24 | 
 25 |     <!-- posts list -->
 26 |     <div class="box">
 27 |       <table class="table is-fullwidth is-striped">
 28 |         <thead>
 29 |           <tr>
 30 |             <th>Title</th>
 31 |             <th>Author</th>
 32 |             <th>Created</th>
 33 |             <th>tags</th>
 34 |           </tr>
 35 |         </thead>
 36 |         <tbody>
 37 |           <tr v-for="(post, index) in posts" :key="index">
 38 |             <td class="post-title-cell">
 39 |               <router-link :to="'/admin/posts/edit/' + post['.key']">
 40 |                 {{post.title}}
 41 |               </router-link>
 42 | 
 43 |               <div class="actions">
 44 |                 <router-link :to="'/admin/posts/edit/' + post['.key']">
 45 |                   <span class="has-text-info">Edit</span>
 46 |                 </router-link>
 47 |                 <span @click="deletePost(post)" class="has-text-danger">Delete</span>
 48 |               </div>
 49 |             </td>
 50 | 
 51 |             <td class="post-author-cell">{{post.author}}</td>
 52 |             <td class="post-tags-cell">{{postDate(post.created)}}</td>
 53 |             <td class="post-tags-cell">
 54 |               <span v-if="post.tags">
 55 |                 {{joined(post.tags)}}
 56 |               </span>
 57 |             </td>
 58 |           </tr>
 59 |         </tbody>
 60 |       </table>
 61 |     </div>
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | import moment from 'moment'
 67 | import { postsRef } from '../../../config'
 68 | import notifier from '../../../mixins/notifier'
 69 | import modal from '@/components/shared/Modal'
 70 | export default {
 71 |   name: 'posts',
 72 |   data () {
 73 |     return {
 74 |       showModal: false,
 75 |       header: '',
 76 |       kind: '',
 77 |       post: ''
 78 |     }
 79 |   },
 80 |   firebase: {
 81 |     posts: postsRef
 82 |   },
 83 |   mixins: [notifier],
 84 |   methods: {
 85 |     addPost (post) {
 86 |       this.$firebaseRefs.posts.push(post).then(() => {
 87 |         this.showNotification('success', 'Post added successfully')
 88 |       })
 89 |     },
 90 |     deletePost (post) {
 91 |       // delete post form firebase
 92 |       this.header = 'Are you sure you want to delete this post?'
 93 |       this.kind = 'deletePost'
 94 |       this.showModal = true
 95 |       this.post = post
 96 |     },
 97 |     confirmDeletePost () {
 98 |       this.$firebaseRefs.posts.child(this.post['.key']).remove().then(() => {
 99 |         this.showNotification('success', 'Post deleted successfully')
100 |         this.showModal = false
101 |         this.post = ''
102 |       })
103 |     },
104 |     updatePost (post) {
105 |       console.log(JSON.stringify(post), post)
106 |       // create a copy of the item
107 |       let tempPost = { ...post }
108 |       // remove the .key attribute
109 |       delete tempPost['.key']
110 |       this.$firebaseRefs.posts.child(post['.key']).set(tempPost).then(() => {
111 |         this.showNotification('success', 'Post updated successfully')
112 |       })
113 |     },
114 |     postDate (epoch) {
115 |       if (!epoch) return // if no time return nothing
116 |       return moment(epoch).format('MM/DD/YY | hh:mm')
117 |     },
118 |     joined (t) {
119 |       return Object.values(t).join(', ')
120 |     }
121 |   },
122 |   components: {
123 |     modal
124 |   }
125 | }
126 | 
127 | </script>
128 | 
129 | <style lang="scss">
130 | #posts {
131 |   .post-title-cell {
132 |     width: 50%;
133 |   }
134 |   .post-author-cell {
135 |     width: 25%;
136 |   }
137 |   .post-tags-cell {
138 |     width: 25%;
139 |   }
140 | }
141 | </style>
142 | 


--------------------------------------------------------------------------------
/src/components/Admin/content/PostNew.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box">
  3 | 
  4 |     <h3>Add new post</h3>
  5 |     <div class="columns">
  6 | 
  7 |       <div class="column is-two-thirds">
  8 | 
  9 |         <!-- the new post title -->
 10 |         <div class="field">
 11 |           <label class="label">Post's title</label>
 12 |           <div class="control">
 13 |             <input type="text" class="input" v-model="title">
 14 |           </div>
 15 |         </div>
 16 | 
 17 |         <!-- rich text vue-quill-editor plugin -->
 18 |         <quill-editor v-model="body" :options="editorOptions">
 19 |         </quill-editor>
 20 |         <input type="file" id="getImage" style="display: none;" @change="uploadImage">
 21 | 
 22 |       </div>
 23 | 
 24 |       <!-- new post right sidebar -->
 25 |       <div class="column is-one-third">
 26 | 
 27 |         <!-- author -->
 28 |         <div class="field">
 29 |           <label class="label">Author</label>
 30 |           <div class="control">
 31 |             <input type="text" class="input" v-model="author" required>
 32 |             <p>this field is for demo purposes only</p>
 33 |           </div>
 34 |         </div>
 35 | 
 36 |         <!-- tags -->
 37 |         <div class="field">
 38 |           <label class="label">Tags</label>
 39 |           <div class="control">
 40 |             <input type="text" class="input" v-model="tags">
 41 |             <p>Seperate tags with commas</p>
 42 |           </div>
 43 |         </div>
 44 |         <div class="field">
 45 |           <label class="label">Image</label>
 46 |           <div class="control">
 47 |             <img :src="featuredImage">
 48 |             <div class="file">
 49 |               <label class="file-label">
 50 |                 <input @change="uploadFeaturedImage" class="file-input" type="file" name="resume">
 51 |                 <span class="file-cta">
 52 |                   <span class="file-icon">
 53 |                     <i class="fa fa-upload"></i>
 54 |                   </span>
 55 |                   <span class="file-label">
 56 |                     Choose a file…
 57 |                   </span>
 58 |                 </span>
 59 |               </label>
 60 |             </div>
 61 |           </div>
 62 |         </div>
 63 |       </div>
 64 |     </div>
 65 | 
 66 |     <!-- notification -->
 67 |     <div v-if="notification.message" :class="'notification is-' + notification.type">
 68 |       <button class="delete" @click="hideNotifications"></button>{{notification.message}}
 69 |     </div>
 70 | 
 71 |     <!-- the form buttons -->
 72 |     <button type="submit" class="button is-info" @click="add">Add</button>
 73 |     <router-link to="/admin/posts" class="button is-danger">Cancel</router-link>
 74 |   </div>
 75 | </template>
 76 | 
 77 | <script>
 78 | import firebase from 'firebase'
 79 | 
 80 | import { mediaRef } from '../../../config'
 81 | import editorOptions from './editor-options'
 82 | import imageLoader from '../../../mixins/image-loader'
 83 | import notifier from '../../../mixins/notifier'
 84 | 
 85 | export default {
 86 |   name: 'post-new',
 87 |   data () {
 88 |     return {
 89 |       title: '',
 90 |       body: '',
 91 |       author: '',
 92 |       tags: '',
 93 |       featuredImage: '',
 94 |       editorOptions
 95 |     }
 96 |   },
 97 |   firebase: {
 98 |     media: mediaRef
 99 |   },
100 |   props: ['add-post'],
101 |   mixins: [imageLoader, notifier],
102 |   methods: {
103 |     add () {
104 |       console.log(this.featuredImage)
105 |       if (this.title) {
106 |         this.addPost({
107 |           title: this.title,
108 |           body: this.body,
109 |           author: this.author,
110 |           tags: this.tags.replace(/ /g, '').split(','),
111 |           img: this.featuredImage,
112 |           created: Date.now()
113 |         })
114 |         this.$router.push({ path: '/admin/posts' })
115 |       } else {
116 |         this.showNotification('warning', 'The title field can not be empty')
117 |       }
118 |     },
119 |     uploadFeaturedImage (e) {
120 |       console.log(e)
121 |       let file = e.target.files[0]
122 |       let storageRef = firebase.storage().ref('images/' + file.name)
123 | 
124 |       storageRef.put(file).then((snapshot) => {
125 |         console.log(snapshot)
126 |         this.featuredImage = snapshot.downloadURL
127 |         if (Object.values(this.media).find(e => e.path === snapshot.ref.fullPath)) return // this prevents duplicate entries in the media object
128 |         this.$firebaseRefs.media.push({
129 |           src: snapshot.downloadURL,
130 |           path: snapshot.ref.fullPath,
131 |           name: snapshot.metadata.name
132 |         })
133 |       })
134 |     }
135 |   }
136 | }
137 | 
138 | </script>
139 | 


--------------------------------------------------------------------------------
/src/components/Admin/content/Users.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container users">
  3 | 
  4 |     <!-- users page title -->
  5 |     <div class="content-heading is-flex">
  6 |       <h3 class="is-size-3">Users</h3>
  7 |       <router-link to="/admin/users/new" class="button is-info">Add New</router-link>
  8 |     </div>
  9 | 
 10 |     <!-- the new user form loaded via vue loader -->
 11 |     <router-view></router-view>
 12 | 
 13 |     <h5 class="is-size-5">New Users</h5>
 14 |     <!-- guests' requests table -->
 15 |     <div class="box">
 16 |       <table class="table is-fullwidth is-striped">
 17 |         <thead>
 18 |           <tr>
 19 |             <th>username</th>
 20 |             <th>email</th>
 21 |             <th>role</th>
 22 |           </tr>
 23 |         </thead>
 24 |         <tbody>
 25 |           <tr v-for="(user, index) in guests" :key="index">
 26 |             <td class="username-cell">
 27 |               {{user.username}}
 28 |               <div class="actions">
 29 |                 <span @click="approve(user)" class="approve has-text-success">Approve</span>
 30 |               </div>
 31 |             </td>
 32 |             <td class="email-cell">{{user.email}}</td>
 33 |             <td class="role-cell">{{user.role}}</td>
 34 |           </tr>
 35 |         </tbody>
 36 |       </table>
 37 |     </div>
 38 | 
 39 |     <h5 class="is-size-5">Administrators</h5>
 40 |     <!-- the administrators table -->
 41 |     <div class="box">
 42 |       <table class="table is-fullwidth is-striped">
 43 |         <thead>
 44 |           <tr>
 45 |             <th>username</th>
 46 |             <th>email</th>
 47 |             <th>role</th>
 48 |           </tr>
 49 |         </thead>
 50 |         <tbody>
 51 |           <tr v-for="(user, index) in admins" :key="index" :class="{'logged-in' : currentUser.uid === user['.key']}">
 52 |             <td class="username-cell">
 53 |               {{user.username}}
 54 |               <div class="actions">
 55 |                 <!-- display a delete button below the current logged in user -->
 56 |                 <span v-if="currentUser.uid === user['.key']" @click="deleteCurrentUser" class=" has-text-danger">Delete</span>
 57 |                 <span v-else @click="ban(user)" class="ban has-text-danger">Ban</span>
 58 |               </div>
 59 |             </td>
 60 |             <td class="email-cell">{{user.email}}</td>
 61 |             <td class="role-cell">{{user.role}}</td>
 62 |           </tr>
 63 |         </tbody>
 64 | 
 65 |       </table>
 66 |     </div>
 67 | 
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | import firebase from 'firebase';
 73 | import { usersRef } from '../../../config';
 74 | 
 75 | export default {
 76 |   name: 'users',
 77 |   data() {
 78 |     return {
 79 |       currentUser: firebase.auth().currentUser
 80 |     }
 81 |   },
 82 |   firebase() {
 83 |     return {
 84 |       users: usersRef
 85 |     }
 86 |   },
 87 |   methods: {
 88 |     // approve a new user method
 89 |     approve(user) {
 90 |       this.$firebaseRefs.users.child(user['.key']).set({
 91 |         username: user.username,
 92 |         email: user.email,
 93 |         role: 'admin'
 94 |       })
 95 |     },
 96 |     // ban an existing admin
 97 |     ban(user) {
 98 |       this.$firebaseRefs.users.child(user['.key']).set({
 99 |         username: user.username,
100 |         email: user.email,
101 |         role: 'guest'
102 |       })
103 |     },
104 |     // delete the current user
105 |     deleteCurrentUser() {
106 |       let vm = this;
107 |       // delete the current user from the firebase auth
108 |       this.currentUser.delete()
109 |         .then(function() {
110 |           // delete the current user from the real time database
111 |           vm.$firebaseRefs.users.child(vm.currentUser.uid).remove();
112 |           console.log('user deleted successfuly');
113 |         })
114 |         .catch(function(error) {
115 |           console.log(error.message);
116 |         });
117 | 
118 |     }
119 |   },
120 |   computed: {
121 |     admins() {
122 |       return this.users.filter((user) => {
123 |         return user.role === 'admin';
124 |       })
125 |     },
126 |     guests() {
127 |       return this.users.filter((user) => {
128 |         return user.role === 'guest';
129 |       })
130 |     }
131 |   }
132 | }
133 | 
134 | </script>
135 | 
136 | <style lang="scss" scoped>
137 | .users {
138 | 
139 |   .content-heading {
140 |     justify-content: baseline;
141 |     align-content: center;
142 |     align-items: center;
143 |     h3 {
144 |       margin: 1em 1em 1em 0em;
145 |     }
146 |   }
147 | 
148 |   .username-cell {
149 |     width: 35%;
150 |   }
151 | 
152 |   .email-cell {
153 |     width: 45%;
154 |   }
155 | 
156 |   .role-cell {
157 |     width: 20%;
158 |   }
159 | 
160 |   h5 {
161 |     padding-bottom: 10px;
162 |   }
163 | 
164 |   .logged-in {
165 |     background-color: #C1FFD7 !important;
166 |   }
167 | }
168 | </style>
169 | 


--------------------------------------------------------------------------------
/src/components/Admin/content/PostEdit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box">
  3 | 
  4 |     <h3>Edit post</h3>
  5 |     <div class="columns">
  6 | 
  7 |       <div class="column is-two-thirds">
  8 | 
  9 |         <!-- edit post title -->
 10 |         <div class="field">
 11 |           <label class="label">Post's title</label>
 12 |           <div class="control">
 13 |             <input type="text" class="input" v-model="post.title">
 14 |           </div>
 15 |         </div>
 16 | 
 17 |         <!-- rich text vue-quill-editor plugin -->
 18 |         <quill-editor v-model="post.body" :options="editorOptions">
 19 |         </quill-editor>
 20 |         <input type="file" id="getImage" style="display: none;" @change="uploadImage">
 21 | 
 22 |       </div>
 23 | 
 24 |       <!-- post right sidebar -->
 25 |       <div class="column is-one-third">
 26 | 
 27 |         <!-- edit author -->
 28 |         <div class="field">
 29 |           <label class="label">Author</label>
 30 |           <div class="control">
 31 |             <input type="text" class="input" v-model="post.author">
 32 |             <p>this field is for demo purposes only</p>
 33 |           </div>
 34 |         </div>
 35 | 
 36 |         <!-- edit tags -->
 37 |         <div class="field">
 38 |           <label class="label">Tags</label>
 39 |           <div class="control">
 40 |             <input type="text" class="input" v-model="tagString">
 41 |             <p>Seperate tags with commas</p>
 42 |           </div>
 43 |         </div>
 44 |         <div class="field">
 45 |           <label class="label">Image</label>
 46 |           <div class="control">
 47 |             <img :src="post.img">
 48 |             <div class="file">
 49 |               <label class="file-label">
 50 |                 <input @change="uploadFeaturedImage" class="file-input" type="file" name="resume">
 51 |                 <span class="file-cta">
 52 |                   <span class="file-icon">
 53 |                     <i class="fa fa-upload"></i>
 54 |                   </span>
 55 |                   <span class="file-label">
 56 |                     Choose a file…
 57 |                   </span>
 58 |                 </span>
 59 |               </label>
 60 |             </div>
 61 |           </div>
 62 |         </div>
 63 |       </div>
 64 | 
 65 |     </div>
 66 | 
 67 |     <!-- warning notification -->
 68 |     <div v-if="notification.message" :class="'notification is-' + notification.type">
 69 |       <button class="delete" @click="hideNotifications"></button>{{notification.message}}
 70 |     </div>
 71 | 
 72 |     <!-- the form buttons -->
 73 |     <button type="submit" class="button is-info" @click="update">Update</button>
 74 |     <router-link to="/admin/posts" class="button is-danger">Cancel</router-link>
 75 |   </div>
 76 | </template>
 77 | 
 78 | <script>
 79 | import firebase from 'firebase'
 80 | 
 81 | import { mediaRef } from '../../../config'
 82 | import editorOptions from './editor-options'
 83 | import imageLoader from '../../../mixins/image-loader'
 84 | import notifier from '../../../mixins/notifier'
 85 | 
 86 | export default {
 87 |   name: 'post-edit',
 88 |   data () {
 89 |     return {
 90 |       /* Here we are filtering out the post containing the provided key in the router params
 91 |        * we are using Object.assign to copy the post by value not by reference
 92 |        * to prevent updating the poste when typing */
 93 |       post: Object.assign(
 94 |         {},
 95 |         (this.posts.filter((post) => {
 96 |           return (post['.key'] === this.$route.params.key)
 97 |         }))[0]
 98 |       ),
 99 |       editorOptions
100 |     }
101 |   },
102 |   firebase: {
103 |     media: mediaRef
104 |   },
105 |   props: ['posts', 'update-post'],
106 |   mixins: [imageLoader, notifier],
107 |   methods: {
108 |     // call the updatePost method passed through props
109 |     update () {
110 |       if (this.post.title) {
111 |         this.updatePost(this.post)
112 |       } else {
113 |         this.showNotification('warning', 'The title field can not be empty')
114 |       }
115 |     },
116 |     uploadFeaturedImage (e) {
117 |       let file = e.target.files[0]
118 |       let storageRef = firebase.storage().ref('images/' + file.name)
119 | 
120 |       storageRef.put(file).then((snapshot) => {
121 |         this.post.img = snapshot.downloadURL
122 |         if (Object.values(this.media).find(e => e.path === snapshot.ref.fullPath)) return // this prevents duplicate entries in the media object
123 |         this.$firebaseRefs.media.push({
124 |           src: snapshot.downloadURL,
125 |           path: snapshot.ref.fullPath,
126 |           name: snapshot.metadata.name
127 |         })
128 |       })
129 |     }
130 |   },
131 |   computed: {
132 |     tagString: {
133 |       get: function () {
134 |         return this.post.tags && this.post.tags.join(',') // if no tags present join is undefined
135 |       },
136 |       set: function (newValue) {
137 |         this.post.tags = newValue.split(',')
138 |       }
139 |     }
140 |   }
141 | }
142 | 
143 | </script>
144 | 


--------------------------------------------------------------------------------
/src/components/Admin/content/Settings.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container settings" id="settings">
  3 | 
  4 |     <!-- notification -->
  5 |     <transition mode="out-in" name="fade">
  6 |       <div v-if="notification.message" :class="'notification is-' + notification.type">
  7 |         <button class="delete" @click="hideNotifications"></button>{{notification.message}}
  8 |       </div>
  9 |     </transition>
 10 |     <!-- modal for add setting -->
 11 |     <transition mode="out-in" name="fade">
 12 |       <modal @close="showModal = false" :kind="kind" @addSetting='confirmAddSetting' @confirmDeleteSetting="confirmDeleteSetting()" v-if="showModal" :header="header"/>
 13 |     </transition>
 14 | 
 15 |     <h3 class="is-size-3">General settings</h3>
 16 |     <div class="box">
 17 |       <div class="columns">
 18 | 
 19 |         <div class="column is-multiline">
 20 | 
 21 |           <div v-for="(field, key) in settings" class="field columns" :key="key" v-if="key !== '.key'">
 22 |             <div class="column is-one-third">
 23 |               <span class="tag">
 24 |                 {{key}}
 25 |                 <button class="delete is-small" @click="deleteSettingsField(key)"></button>
 26 |               </span>
 27 |             </div>
 28 | 
 29 |             <div class="control column is-two-thirds">
 30 |               <input type="text" class="input" :name="field" :placeholder="field" v-model="settings[key]">
 31 |             </div>
 32 |           </div>
 33 |           <!-- Main container -->
 34 |           <nav class="level">
 35 |             <!-- Left side -->
 36 |             <div class="level-left">
 37 |               <!--<div class="level-item"></div>-->
 38 |             </div>
 39 |             <!-- Right side -->
 40 |             <div class="level-right">
 41 |               <div class="level-item">
 42 |                 <button type="button" class="button is-pulled-right" @click="addSettingField">
 43 |                   Add Settings field
 44 |                 </button>
 45 |               </div>
 46 |               <div class="level-item">
 47 |                 <button type="button" class="button is-info is-pulled-right" @click="saveSettings">
 48 |                   Save Settings
 49 |                 </button>
 50 |               </div>
 51 |             </div>
 52 |           </nav>
 53 | 
 54 |         </div>
 55 |       </div>
 56 |     </div>
 57 |   </div>
 58 | </template>
 59 | 
 60 | <script>
 61 | import { settingsRef } from '../../../config'
 62 | import notifier from '../../../mixins/notifier'
 63 | import modal from '@/components/shared/Modal'
 64 | export default {
 65 |   name: 'settings',
 66 |   data () {
 67 |     return {
 68 |       updatesCounter: 0,
 69 |       // this array contains settings form fields
 70 |       fields: [
 71 |         {
 72 |           label: 'Site Title',
 73 |           name: 'title',
 74 |           value: ''
 75 |         },
 76 |         {
 77 |           label: 'Site Description',
 78 |           name: 'description',
 79 |           value: ''
 80 |         }
 81 |       ],
 82 |       showModal: false,
 83 |       header: '',
 84 |       kind: '',
 85 |       deleteKey: ''
 86 |     }
 87 |   },
 88 |   firebase: {
 89 |     // load settings as an object instead of array (default)
 90 |     settings: {
 91 |       source: settingsRef,
 92 |       asObject: true
 93 |     }
 94 |   },
 95 |   mixins: [notifier],
 96 |   methods: {
 97 |     saveSettings () {
 98 |       delete this.settings['.key'] // This is a bit weird but no problem
 99 |       this.$firebaseRefs.settings.update(this.settings).then(() => {
100 |         this.showNotification('success', 'Settings Successfully saved')
101 |       })
102 |     },
103 |     // display the loaded settings
104 |     displaySettings () {
105 |       for (let key in this.settings) {
106 |         this.fields.map((field) => {
107 |           if (field.name === key) {
108 |             field.value = this.settings[key]
109 |             return this.settings[key]
110 |           }
111 |         })
112 |       }
113 |     },
114 |     addSettingField () {
115 |       this.header = 'Name for a new setting: '
116 |       this.kind = 'addSetting'
117 |       this.showModal = true
118 |     },
119 |     confirmAddSetting (value) {
120 |       if (value === '') {
121 |         this.showNotification('danger', 'Please input the name of the setting first')
122 |         return
123 |       }
124 |       if (this.settings.hasOwnProperty(value)) {
125 |         this.showNotification('danger', 'This setting already exist')
126 |         return
127 |       }
128 | 
129 |       this.$firebaseRefs.settings.update({
130 |         [value]: ''
131 |       }).then(() => {
132 |         this.showNotification('success', 'Setting Successfully added')
133 |         this.showModal = false
134 |       }).catch(() => {
135 |         this.showNotification('error', 'Setting not added')
136 |       })
137 |     },
138 |     deleteSettingsField (key) {
139 |       this.header = 'Are you sure you want to delete this setting?'
140 |       this.kind = 'deleteSetting'
141 |       this.showModal = true
142 |       this.deleteKey = key
143 |     },
144 |     confirmDeleteSetting () {
145 |       this.$firebaseRefs.settings
146 |         .child(this.deleteKey)
147 |         .remove()
148 |         .then(() => {
149 |           this.showNotification('success', 'Setting successfully removed')
150 |           this.showModal = false
151 |           this.deleteKey = ''
152 |           this.kind = ''
153 |         })
154 |         .catch((e) => {
155 |           this.showNotification('error', 'Setting not removed')
156 |         })
157 |     }
158 |   },
159 |   updated () {
160 |     // run the loaded settings once
161 |     if (this.updatesCounter === 0) {
162 |       this.displaySettings()
163 |     }
164 |     this.updatesCounter++
165 |   },
166 |   components: {
167 |     modal
168 |   }
169 | }
170 | 
171 | </script>
172 | 
173 | <style lang="scss">
174 | #settings {
175 |   h3 {
176 |     margin: 1em 1em 1em 0em;
177 |   }
178 | }
179 | </style>
180 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 | 
  3 | <p><img src="https://github.com/tamiat/tamiat/blob/master/tamiatlogo.png" width="48%"></p>
  4 | 
  5 | <p align="center">
  6 |   <a href="https://www.tamiat.org"><img src="https://img.shields.io/github/tag/tamiat/tamiat.svg?label=Version" alt="Version"></a>
  7 |   <a href="https://travis-ci.org/tamiat/tamiat"><img src="https://travis-ci.org/tamiat/tamiat.svg?branch=master" alt="Build Status"></a>
  8 |   <a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs Welcome"></a>
  9 |   <a href="https://www.tamiat.org"><img src="https://img.shields.io/website-up-down-green-red/https/www.tamiat.org.svg?label=tamiat.org" alt="Tamiat.org"></a>
 10 |   <a href="https://demo.tamiat.org"><img src="https://img.shields.io/website-up-down-green-red/https/demo.tamiat.org.svg?label=Online-Demo" alt="Online Demo"></a>
 11 | </p>
 12 | 
 13 | <h1>Tamiat CMS</h1>
 14 | 
 15 | <p>
 16 |   <strong>Tamiat headless CMS</strong>
 17 | </p>
 18 | 
 19 | <p>
 20 |   <sub>Made with ❤︎ by
 21 |     <a href="https://github.com/mahnouman">Mahmoud Nouman</a> and 
 22 |     <a href="https://github.com/tamiat/tamiat/graphs/contributors">contributors</a>
 23 |   </sub>
 24 | </p>
 25 | 
 26 | </div>
 27 | 
 28 | ---
 29 | 
 30 | <p align="center">
 31 |   <strong>Support our development with </strong>
 32 |   <a href="https://patreon.com/tamiatcms" target="_blank"><img src="https://s3.amazonaws.com/patreon_public_assets/toolbox/patreon.png" target="_blank" alt-text="patreon link" width="15%" margin-left="1.5em"></a>
 33 | </p>
 34 | 
 35 | 
 36 | [Vue]: http://vuejs.org/
 37 | [Firebase]: https://firebase.google.com/
 38 | 
 39 | ---
 40 | 
 41 | 
 42 | # Features
 43 | 
 44 | * Front end focused CMS
 45 | * Powered by [Vue][] **2.0** & [Firebase]
 46 | 
 47 | <br>
 48 | 
 49 | <h1 text-align="center"> What It Looks Like </h1>
 50 | 
 51 | ![posts section](https://i.imgur.com/Kstbzxu.png)
 52 | ![pages section](https://i.imgur.com/XDyOayH.png)
 53 | ![media section](https://i.imgur.com/54vjwey.jpg)
 54 | 
 55 | 
 56 | <br>
 57 | 
 58 | # Getting Started
 59 | 
 60 | 
 61 | To get started with Tamiat CMS, you have two options:
 62 | 
 63 |   - Making Tamiat your starting point.
 64 |   - Integrating Tamiat into an existing project.
 65 | 
 66 | <br>
 67 | 
 68 | ## Making Tamiat Your Starting Point
 69 | 
 70 |   1. Clone the CMS repository and install the dependencies. 
 71 | 
 72 | ```bash
 73 | # clone the repo
 74 | git clone https://github.com/tamiat/tamiat.git
 75 | 
 76 | # install the dependencies
 77 | npm install
 78 | # or
 79 | yarn
 80 | ```
 81 | 
 82 |   2. Log in to firebase console using your google account and create a new firebase project.
 83 | 
 84 | 
 85 |   3. In the authentication section, add a new user by providing an email and a password.
 86 | 
 87 | 
 88 |   4. Setup your database basic security rules by going to the `database.rules.json` file in your project and fill in your UID.
 89 | 
 90 | 
 91 | ```js
 92 | {
 93 |   "rules": {
 94 |     ".write": "(auth.uid === yourUID) || (auth.uid === anOtherUID)" // you can chain these together like so
 95 | ```
 96 | 
 97 | 
 98 | > yourUID and anOtherUID are the uids of users with permission to write to the database. They look something like this "Lxgqp3FmcPVU6UYO6gNdkn1i0ok1". You can obtain a user uid from the authentication section in the firebase console.
 99 | 
100 | 
101 |   5. Copy your project configurations from WEB SETUP (*in `authentication` section of the firebase console*) and paste them in `config.js` file by replacing the existing ones.
102 | 
103 | 
104 | ```js
105 | // replace the existing config object below
106 | let config = {
107 |   apiKey: "AIzaSyCnxuLX6AgMduDMLtSJVDNJhR8xuMNvs4Y",
108 |   authDomain: "tamiat-demo.firebaseapp.com",
109 |   databaseURL: "https://tamiat-demo.firebaseio.com/",
110 |   projectId: "tamiat-demo",
111 |   storageBucket: "",
112 |   messagingSenderId: "188459960333"
113 | };
114 | ```
115 | 
116 | 
117 |   6. Run the `firebase init` command (if you haven't installed firebase yet, do so), select your project from the list, use the default database rules already present `database.rules.json`, choose `dist` as your public directory and configure the project as a single-page app.
118 | 
119 | 
120 |   7. You can now use `firebase deploy` to deploy the security rules you just entered (to deploy the actual web app you must first use `npm run build` or `yarn build`).
121 | 
122 | 
123 |   8. Run the local dev server with `npm run dev` or `yarn dev`.
124 | 
125 | 
126 |   9. Access the admin interface by navigating to `localhost:8080/admin`.
127 | 
128 | 
129 |   10. Sign in with your previous email and password.
130 | 
131 | 
132 |   11. Enjoy! 
133 | 
134 | <br>
135 | 
136 | ## Integrating Tamiat Into an Existing Project
137 | 
138 |   1. Create a new vue.js project based on webpack template.
139 | 
140 | ```bash
141 | vue init webpack my-project
142 | # install webpack template dependencies
143 | npm install
144 | ```
145 | 
146 |   2. Install the required dependencies by Tamiat.
147 | 
148 | ```bash
149 | cd my-project
150 | 
151 | # install development dependencies
152 | npm install node-sass sass-loader --save-dev
153 | 
154 | # install production dependencies
155 | npm install moment vue-router bulma firebase vuefire font-awesome vue-quill-editor 
156 | ```
157 | 
158 |   3. In `main.js` file, import the external stylesheets and the necessary plugins and activate them.
159 | 
160 | ```js
161 | import router from './router'
162 | import VueFire from 'vuefire'
163 | import VueQuillEditor from 'vue-quill-editor'
164 | 
165 | // import external stylesheets
166 | import fontAwesome from '../node_modules/font-awesome/css/font-awesome.css'
167 | import bulma from '../node_modules/bulma/css/bulma.css'
168 | 
169 | Vue.use(VueFire)  // activate vuefire plugin
170 | Vue.use(VueQuillEditor)  // activate vue-quill-editor
171 | ```
172 | 
173 | > **Remember, don't forget to add the `router` property to the vue instance.**
174 | 
175 | ```js
176 | new Vue({
177 |   el: '#app',
178 |   router,  // this property should be added to the vue instance
179 |   template: '<App/>',
180 |   components: { App }
181 | })
182 | ```
183 | 
184 |   4. Clean up your `App.vue` file by deleting the extra content and making it similar to that:
185 | 
186 | ```html
187 | <template>
188 |   <div id="app">
189 |     <router-view></router-view>
190 |   </div>
191 | </template>
192 | ```
193 | 
194 |   5. Now, open the Tamiat CMS repo and copy the following folders and files:
195 | 
196 | ##### Folders to be copied:
197 | 
198 | | Source | Target | Description |
199 | |--------|--------|---------|
200 | | Tamiat/src/components | my-project/src/components | The building blocks components of the admin interface |
201 | | Tamiat/src/mixins | my-project/src/mixins | The shared functionalities between components |
202 | | Tamiat/src/router | my-project/src/router | The routing logic of the CMS |
203 | 
204 | 
205 | ##### Files to be copied:
206 | 
207 | | Source | Target | Description |
208 | |--------|--------|---------|
209 | | Tamiat/src/Admin.vue | my-project/src/Admin.vue |  The admin's interface main view |
210 | | Tamiat/src/Home.vue | my-project/src/Home.vue | The default home page |
211 | | Tamiat/src/config.js | my-project/src/config.js | The firebase configuration file |
212 | 
213 | 
214 |   6. Once this is done, you can just follow the same instructions of the first option above starting from `step 2`.
215 | 
216 |   7. Enjoy! 
217 | 


--------------------------------------------------------------------------------
/src/components/Admin/content/Pages.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container settings" id="settings">
  3 | 
  4 |     <!-- notification -->
  5 |     <transition mode="out-in" name="fade">
  6 |       <div v-if="notification.message" :class="'notification is-' + notification.type">
  7 |         <button class="delete" @click="hideNotifications"></button>{{notification.message}}
  8 |       </div>
  9 |     </transition>
 10 | 
 11 |     <!-- modal for page and field -->
 12 |     <transition mode="out-in" name="fade">
 13 |       <modal @close="showModal = false" :kind="kind" @addField='confirmAddField' @addPage='confirmAddPage' @confirmDeleteField='confirmDeletePageField()' @confirmDeletePage='confirmDeletePage()' v-if="showModal" :header="header"/>
 14 |     </transition>
 15 | 
 16 |     <h3 class="is-size-3">Pages</h3>
 17 |     <div class="box">
 18 |       <div class="columns">
 19 | 
 20 |         <div class="column is-multiline">
 21 |           <!-- Main container -->
 22 |           <nav class="level">
 23 |             <!-- Left side -->
 24 |             <div class="level-left">
 25 |               <!--<div class="level-item"></div>-->
 26 |             </div>
 27 |             <!-- Right side -->
 28 |             <div class="level-right">
 29 |               <div class="level-item">
 30 |                 <div class="dropdown" :class="{'is-active': dropdownActive}" @click="toggleDropdown">
 31 |                   <div class="dropdown-trigger">
 32 |                     <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
 33 |                       <span>{{currentPage.name || dropDownLabel}}</span>
 34 |                       <span class="icon is-small">
 35 |                         <i class="fa fa-angle-down" aria-hidden="true"></i>
 36 |                       </span>
 37 |                     </button>
 38 |                   </div>
 39 |                   <div class="dropdown-menu" id="dropdown-menu" role="menu">
 40 |                     <div class="dropdown-content">
 41 |                       <a class="dropdown-item" v-if="page && page.name" v-for="(page, key) in pages" :key="page.name" @click="selectPage(key)">
 42 |                         {{page.name}}
 43 |                       </a>
 44 |                       <hr class="dropdown-divider">
 45 |                       <a @click="addPage" class="dropdown-item">
 46 |                         New Page
 47 |                       </a>
 48 |                     </div>
 49 |                   </div>
 50 |                 </div>
 51 |               </div>
 52 |             </div>
 53 |           </nav>
 54 |           <div v-for="(field, key) in currentPage.fields" class="field columns" :key="key">
 55 |             <div class="column is-one-third">
 56 |               <span class="tag">
 57 |                 {{key}}
 58 |                 <button class="delete is-small" @click="deletePageField(key)"></button>
 59 |               </span>
 60 |             </div>
 61 | 
 62 |             <div class="control column is-two-thirds">
 63 |               <input type="text" class="input" :name="field" :placeholder="field" v-model="currentPage.fields[key]">
 64 |             </div>
 65 |           </div>
 66 |           <p v-if="!currentPage.fields && currentPage.name">
 67 |             Add a property to get started!
 68 |           </p>
 69 |           <!-- Main container -->
 70 |           <nav class="level" v-if="currentPage.name">
 71 |             <!-- Left side -->
 72 |             <div class="level-left">
 73 |               <!--<div class="level-item"></div>-->
 74 |             </div>
 75 |             <!-- Right side -->
 76 |             <div class="level-right">
 77 |               <div class="level-item">
 78 |                 <button type="button" class="button is-pulled-right" @click="addPageField">
 79 |                   Add field
 80 |                 </button>
 81 |               </div>
 82 |               <div class="level-item">
 83 |                 <button @click="savePage" type="button" class="button is-info is-pulled-right">
 84 |                   Save Changes
 85 |                 </button>
 86 |               </div>
 87 |               <div class="level-item">
 88 |                 <button @click="deletePage()" type="button" title="delete" class="button is-danger is-pulled-right">
 89 |                   <i class="fa fa-trash" aria-hidden="true"></i>
 90 |                 </button>
 91 |               </div>
 92 |             </div>
 93 |           </nav>
 94 | 
 95 |         </div>
 96 |       </div>
 97 |     </div>
 98 |   </div>
 99 | </template>
100 | 
101 | <script>
102 | import { pagesRef } from '../../../config'
103 | import notifier from '../../../mixins/notifier'
104 | import modal from '@/components/shared/Modal'
105 | export default {
106 |   name: 'pages',
107 |   data () {
108 |     return {
109 |       dropdownActive: false,
110 |       currentPageKey: '',
111 |       dropDownLabel: 'Select Page',
112 |       showModal: false,
113 |       deleteKey: '',
114 |       header: '',
115 |       kind: ''
116 |     }
117 |   },
118 |   firebase: {
119 |     // load settings as an object instead of array (default)
120 |     pages: {
121 |       source: pagesRef,
122 |       asObject: true
123 |     }
124 |   },
125 |   mixins: [notifier],
126 |   computed: {
127 |     currentPage () {
128 |       return this.pages[this.currentPageKey] || {}
129 |     },
130 |     currentPageRef () {
131 |       return this.$firebaseRefs.pages.child(this.currentPageKey)
132 |     }
133 |   },
134 |   components: {
135 |     modal
136 |   },
137 |   methods: {
138 |     selectPage (key) {
139 |       this.currentPageKey = key
140 |     },
141 |     toggleDropdown () {
142 |       this.dropdownActive = !this.dropdownActive
143 |     },
144 |     savePage () {
145 |       delete this.currentPage['.key'] // This is a bit weird but no problem
146 |       this.currentPageRef.update(this.currentPage).then(() => {
147 |         this.showNotification('success', 'Page successfully saved')
148 |       })
149 |     },
150 |     addPageField () {
151 |       this.header = 'Name for a new property: '
152 |       this.kind = 'addField'
153 |       this.showModal = true
154 |     },
155 |     confirmAddField (value) {
156 |       if (this.currentPage.fields && this.currentPage.fields.hasOwnProperty(value)) {
157 |         this.showNotification('danger', 'This property already exist')
158 |         return
159 |       }
160 |       this.currentPageRef
161 |         .child('fields')
162 |         .update({
163 |           [value]: ''
164 |         })
165 |         .then(() => {
166 |           this.showNotification('success', 'Property Successfully added')
167 |           this.showModal = false
168 |         })
169 |         .catch(() => {
170 |           this.showNotification('danger', 'Property not added')
171 |         })
172 |     },
173 |     addPage () {
174 |       this.header = 'Name for a new page: '
175 |       this.kind = 'addPage'
176 |       this.showModal = true
177 |     },
178 |     confirmAddPage (value) {
179 |       let name = value
180 |       if (name === '') {
181 |         this.showNotification('danger', 'Please input the name of the page first')
182 |         return
183 |       }
184 |       if (this.pages.hasOwnProperty(name)) {
185 |         this.showNotification('danger', 'This page already exist')
186 |         return
187 |       }
188 | 
189 |       let key = this.$firebaseRefs.pages.push().key
190 |       this.$firebaseRefs.pages
191 |         .child(key)
192 |         .update({name})
193 |         .then(() => {
194 |           this.selectPage(key)
195 |           this.showNotification('success', 'Page Successfully added')
196 |           this.showModal = false
197 |         })
198 |         .catch(() => {
199 |           this.showNotification('danger', 'Page not added')
200 |         })
201 |     },
202 |     deletePageField (key) {
203 |       this.header = 'Are you sure you want to delete this field?'
204 |       this.kind = 'deleteField'
205 |       this.showModal = true
206 |       this.deleteKey = key
207 |     },
208 |     confirmDeletePageField () {
209 |       this.currentPageRef
210 |         .child('fields')
211 |         .child(this.deleteKey)
212 |         .remove()
213 |         .then(() => {
214 |           // this.selectPage(this.deleteKey)
215 |           this.showNotification('success', 'Property successfully removed')
216 |           this.showModal = false
217 |           this.deleteKey = ''
218 |           this.kind = ''
219 |         })
220 |         .catch(() => {
221 |           this.showNotification('danger', 'Property not removed')
222 |         })
223 |     },
224 |     deletePage () {
225 |       this.header = 'Are you sure you want to delete this page?'
226 |       this.kind = 'deletePage'
227 |       this.showModal = true
228 |     },
229 |     confirmDeletePage () {
230 |       const key = this.currentPageKey
231 |       this.$firebaseRefs.pages
232 |         .child(key)
233 |         .remove()
234 |         .then(() => {
235 |           this.selectPage(key)
236 |           this.showNotification('success', 'Page successfully removed')
237 |           this.showModal = false
238 |           this.header = ''
239 |           this.kind = ''
240 |         })
241 |         .catch(() => {
242 |           this.showNotification('danger', 'Page not removed')
243 |         })
244 |     }
245 |   }
246 | }
247 | 
248 | </script>
249 | 
250 | <style lang="scss">
251 | #settings {
252 |   h3 {
253 |     margin: 1em 1em 1em 0em;
254 |   }
255 | }
256 | 
257 | .fade-enter-active, .fade-leave-active {
258 |   transition: opacity .5s
259 | }
260 | 
261 | .fade-enter, .fade-leave-to {
262 |   opacity: 0
263 | }
264 | </style>
265 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 | 
  4 |     <header>
  5 |       <h2 class="is-title is-size-4">
  6 |         <a href="#">Website Logo</a>
  7 |       </h2>
  8 |       <nav>
  9 |         <li>
 10 |           <a href="#">Home</a>
 11 |         </li>
 12 |         <li>
 13 |           <a href="#">Products</a>
 14 |         </li>
 15 |         <li>
 16 |           <a href="#">About</a>
 17 |         </li>
 18 |         <li>
 19 |           <a href="#">Contacts</a>
 20 |         </li>
 21 |       </nav>
 22 |     </header>
 23 | 
 24 |     <section class="hero">
 25 |       <div class="background-image" :style="{'background-image': `url(${require('../assets/img/hero.jpg')})`}"></div>
 26 |       <h1>
 27 |         {{settings.title}}
 28 |       </h1>
 29 |       <h3>{{settings.description}}</h3>
 30 |       <div class="cta">
 31 |         <a href="http://tutorialzine.com/2016/06/freebie-landing-page-template-with-flexbox/" class="btn">Download it Here</a>
 32 |       </div>
 33 |     </section>
 34 | 
 35 |     <section class="our-work">
 36 |       <h3 class="title">Some of our work</h3>
 37 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices. Morbi vitae pulvinar velit. Sed aliquam dictum sapien, id sagittis augue malesuada eu.</p>
 38 |       <hr>
 39 |       <ul class="grid">
 40 |         <li class="small" :style="{'background-image': `url(${require('../assets/img/coast.jpg')})`}"></li>
 41 |         <li class="large" :style="{'background-image': `url(${require('../assets/img/island.jpg')})`}"></li>
 42 |         <li class="large" :style="{'background-image': `url(${require('../assets/img/balloon.jpg')})`}"></li>
 43 |         <li class="small" :style="{'background-image': `url(${require('../assets/img/mountain.jpg')})`}"></li>
 44 |       </ul>
 45 |     </section>
 46 | 
 47 |     <section class="features">
 48 |       <h3 class="title">Features and services</h3>
 49 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices. Morbi vitae pulvinar velit. Sed aliquam dictum sapien, id sagittis augue malesuada eu.</p>
 50 |       <hr>
 51 |       <ul class="grid">
 52 |         <li>
 53 |           <i class="fa fa-camera-retro"></i>
 54 |           <h4>Photography</h4>
 55 |           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices vitae pulvinar velit.
 56 |           </p>
 57 |         </li>
 58 |         <li>
 59 |           <i class="fa fa-cubes"></i>
 60 |           <h4>Web Development</h4>
 61 |           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices vitae pulvinar velit.
 62 |           </p>
 63 |         </li>
 64 |         <li>
 65 |           <i class="fa fa-newspaper-o"></i>
 66 |           <h4>Content Editing</h4>
 67 |           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices vitae pulvinar velit.
 68 |           </p>
 69 |         </li>
 70 |       </ul>
 71 |     </section>
 72 | 
 73 |     <section>
 74 |       <h3 class="title">Our blog posts</h3>
 75 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices. Morbi vitae pulvinar velit. Sed aliquam dictum sapien, id sagittis augue malesuada eu.</p>
 76 |       <hr>
 77 | 
 78 |       <div class="wrapper">
 79 |         <div class="card radius shadowDepth1" v-if="post" v-for="post in posts" :key="post.created">
 80 |           <div class="card__image border-tlr-radius">
 81 |             <img :src="post.img" alt="image" class="border-tlr-radius">
 82 |           </div>
 83 |           <div class="card__content card__padding">
 84 |             <article class="card__article">
 85 |               <h2><a href="#">{{post.title}}</a></h2>
 86 |               <p v-html="post.body"></p>
 87 |             </article>
 88 |           </div>
 89 |           <div class="card__action">
 90 |             <div class="card__author">
 91 |               <div class="card__author-content">
 92 |                 By <a href="#">{{post.author}}</a>
 93 |               </div>
 94 |             </div>
 95 |           </div>
 96 |         </div>
 97 |       </div>
 98 |     </section>
 99 | 
100 |     <section class="reviews">
101 |       <h3 class="title">What others say:</h3>
102 | 
103 |       <p class="quote">Mauris sit amet mauris a arcu eleifend ultricies eget ut dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
104 |       <p class="author">— Patrick Farrell</p>
105 | 
106 |       <p class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices. Morbi vitae pulvinar velit. Sed aliquam dictum sapien, id sagittis augue malesuada eu.</p>
107 |       <p class="author">— George Smith</p>
108 | 
109 |       <p class="quote">Donec commodo dolor augue, vitae faucibus tortor tincidunt in. Aliquam vitae leo quis mi pulvinar ornare. Integer eu iaculis metus.</p>
110 |       <p class="author">— Kevin Blake</p>
111 |     </section>
112 | 
113 |     <section class="contact">
114 |       <h3 class="title">Join our newsletter</h3>
115 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices. Morbi vitae pulvinar velit. Sed aliquam dictum sapien, id sagittis augue malesuada eu.</p>
116 |       <hr>
117 | 
118 |       <form>
119 |         <input type="email" placeholder="Email">
120 |         <a href="#" class="btn">Subscribe now</a>
121 |       </form>
122 |     </section>
123 | 
124 |     <footer>
125 |       <ul>
126 |         <li>
127 |           <a href="#">
128 |             <i class="fa fa-twitter-square"></i>
129 |           </a>
130 |         </li>
131 |         <li>
132 |           <a href="#">
133 |             <i class="fa fa-facebook-square"></i>
134 |           </a>
135 |         </li>
136 |         <li>
137 |           <a href="#">
138 |             <i class="fa fa-snapchat-square"></i>
139 |           </a>
140 |         </li>
141 |         <li>
142 |           <a href="#">
143 |             <i class="fa fa-pinterest-square"></i>
144 |           </a>
145 |         </li>
146 |         <li>
147 |           <a href="#">
148 |             <i class="fa fa-github-square"></i>
149 |           </a>
150 |         </li>
151 |       </ul>
152 |       <p>Made by
153 |         <a href="http://tutorialzine.com/" target="_blank">tutorialzine</a>. images courtesy to
154 |         <a href="http://unsplash.com/" target="_blank">unsplash</a>.</p>
155 |       <p>No attribution required. you can remove this footer.</p>
156 |     </footer>
157 |   </div>
158 | </template>
159 | 
160 | <script>
161 | import { settingsRef, postsRef } from '../config'
162 | 
163 | export default {
164 |   name: 'home',
165 |   firebase: {
166 |     // load settings as object instead of array (default)
167 |     settings: {
168 |       source: settingsRef,
169 |       asObject: true
170 |     },
171 |     posts: {
172 |       source: postsRef,
173 |       asObject: true
174 |     }
175 |   }
176 | }
177 | 
178 | </script>
179 | 
180 | <style>
181 | * {
182 |   margin: 0;
183 |   padding: 0;
184 |   box-sizing: border-box;
185 | }
186 | 
187 | html {
188 |   font: normal 16px sans-serif;
189 |   color: #555;
190 | }
191 | 
192 | ul,
193 | nav {
194 |   list-style: none;
195 | }
196 | 
197 | a {
198 |   text-decoration: none;
199 |   color: inherit;
200 |   cursor: pointer;
201 |   opacity: 0.9;
202 | }
203 | 
204 | a:hover {
205 |   opacity: 1;
206 | }
207 | 
208 | a.btn {
209 |   color: #fff;
210 |   border-radius: 4px;
211 |   text-transform: uppercase;
212 |   background-color: #2196F3;
213 |   font-weight: 800;
214 |   text-align: center;
215 | }
216 | 
217 | hr {
218 |   width: 150px;
219 |   height: 2px;
220 |   background-color: #2196F3;
221 |   border: 0;
222 |   margin-bottom: 80px;
223 | }
224 | 
225 | section {
226 |   display: flex;
227 |   flex-direction: column;
228 |   align-items: center;
229 | 
230 |   padding: 125px 100px;
231 | }
232 | 
233 | @media (max-width: 1000px) {
234 | 
235 |   section {
236 |     padding: 100px 50px;
237 |   }
238 | }
239 | 
240 | @media (max-width: 600px) {
241 | 
242 |   section {
243 |     padding: 80px 30px;
244 |   }
245 | }
246 | 
247 | section h3.title {
248 |   color: #414a4f;
249 |   text-transform: capitalize;
250 |   font: bold 32px 'Open Sans', sans-serif;
251 |   margin-bottom: 35px;
252 |   text-align: center;
253 | }
254 | 
255 | section p {
256 |   max-width: 800px;
257 |   text-align: center;
258 |   margin-bottom: 35px;
259 |   padding: 0 20px;
260 |   line-height: 2;
261 | }
262 | 
263 | ul.grid {
264 |   width: 100%;
265 |   display: flex;
266 |   flex-wrap: wrap;
267 |   justify-content: center;
268 | }
269 | 
270 | /*-------------
271 |        Header
272 |   -------------*/
273 | 
274 | header {
275 |   position: absolute;
276 |   top: 0;
277 |   left: 0;
278 |   z-index: 10;
279 |   width: 100%;
280 |   display: flex;
281 |   justify-content: space-between;
282 |   align-items: center;
283 |   color: #fff;
284 |   padding: 30px 100px 0;
285 | }
286 | 
287 | header h2 {
288 |   font-family: 'Quicksand', sans-serif;
289 | }
290 | 
291 | header nav {
292 |   display: flex;
293 | }
294 | 
295 | header a,
296 | header a:hover {
297 |   color: white;
298 | }
299 | 
300 | header nav li {
301 |   margin: 0 15px;
302 | }
303 | 
304 | header nav li:first-child {
305 |   margin-left: 0;
306 | }
307 | 
308 | header nav li:last-child {
309 |   margin-right: 0;
310 | }
311 | 
312 | @media (max-width: 1000px) {
313 |   header {
314 |     padding: 20px 50px;
315 |   }
316 | }
317 | 
318 | @media (max-width: 700px) {
319 |   header {
320 |     flex-direction: column;
321 |   }
322 | 
323 |   header h2 {
324 |     margin-bottom: 15px;
325 |   }
326 | }
327 | 
328 | /*----------------
329 |        Hero Section
330 |   ----------------*/
331 | 
332 | .hero {
333 |   position: relative;
334 |   justify-content: center !important;
335 |   min-height: 100vh;
336 |   color: #fff;
337 |   text-align: center;
338 |   z-index: 0;
339 | }
340 | 
341 | .hero .background-image {
342 |   position: absolute;
343 |   top: 0;
344 |   left: 0;
345 |   width: 100%;
346 |   height: 100%;
347 |   background-size: cover;
348 |   background-color: #2196F3;
349 |   z-index: -1;
350 | }
351 | 
352 | .hero .background-image:after {
353 |   content: '';
354 |   position: absolute;
355 |   top: 0;
356 |   left: 0;
357 |   width: 100%;
358 |   height: 100%;
359 |   background-color: #414a4f;
360 |   opacity: 0.75;
361 | }
362 | 
363 | .hero h1 {
364 |   font: bold 60px 'Open Sans', sans-serif;
365 |   margin-bottom: 15px;
366 | }
367 | 
368 | .hero h3 {
369 |   font: normal 28px 'Open Sans', sans-serif;
370 |   margin-bottom: 40px;
371 | }
372 | 
373 | .cta {
374 |   padding-top: 15px;
375 | }
376 | 
377 | .hero a.btn {
378 |   padding: 20px 48px;
379 | }
380 | 
381 | @media (max-width: 800px) {
382 | 
383 |   .hero {
384 |     min-height: 600px;
385 |   }
386 | 
387 |   .hero h1 {
388 |     font-size: 48px;
389 |   }
390 | 
391 |   .hero h3 {
392 |     font-size: 24px;
393 |   }
394 | 
395 |   .hero a.btn {
396 |     padding: 15px 40px;
397 |   }
398 | }
399 | 
400 | /*--------------------
401 |        Our Work Section
402 |   ---------------------*/
403 | 
404 | .оur-work {
405 |   background-color: #fff;
406 | }
407 | 
408 | .our-work .grid li {
409 |   padding: 20px;
410 |   height: 350px;
411 |   border-radius: 3px;
412 | 
413 |   background-clip: content-box;
414 |   background-size: cover;
415 |   background-position: center;
416 |   background-color: #333;
417 | }
418 | 
419 | .our-work .grid li.small {
420 |   flex-basis: 40%;
421 | }
422 | 
423 | .our-work .grid li.large {
424 |   flex-basis: 60%;
425 | }
426 | 
427 | @media (max-width: 1000px) {
428 | 
429 |   .our-work .grid li.small,
430 |   .our-work .grid li.large {
431 |     flex-basis: 100%;
432 |   }
433 | }
434 | 
435 | /*----------------------
436 |        Features Section
437 |   ----------------------*/
438 | 
439 | .features {
440 |   background-color: #f7f7f7;
441 | }
442 | 
443 | .features .grid li {
444 |   padding: 0 30px;
445 |   flex-basis: 33%;
446 |   text-align: center;
447 | }
448 | 
449 | .features .grid li i {
450 |   font-size: 50px;
451 |   color: #2196F3;
452 |   margin-bottom: 25px;
453 | }
454 | 
455 | .features .grid li h4 {
456 |   color: #555;
457 |   font-size: 20px;
458 |   margin-bottom: 25px;
459 | }
460 | 
461 | .features .grid li p {
462 |   margin: 0;
463 | }
464 | 
465 | @media (max-width: 1000px) {
466 | 
467 |   .features .grid li {
468 |     flex-basis: 70%;
469 |     margin-bottom: 65px;
470 |   }
471 | 
472 |   .features .grid li:last-child {
473 |     margin-bottom: 0;
474 |   }
475 | }
476 | 
477 | @media (max-width: 600px) {
478 | 
479 |   .features .grid li {
480 |     flex-basis: 100%;
481 |   }
482 | }
483 | 
484 | /*--------------------
485 |        Reviews Section
486 |   --------------------*/
487 | 
488 | .reviews {
489 |   background-color: #fff;
490 | }
491 | 
492 | .reviews .quote {
493 |   text-align: center;
494 |   width: 80%;
495 |   font-size: 22px;
496 |   font-weight: 300;
497 |   line-height: 1.5;
498 |   margin-bottom: 20px;
499 |   padding: 0;
500 | }
501 | 
502 | .reviews .author {
503 |   font-size: 18px;
504 |   margin-bottom: 50px;
505 | }
506 | 
507 | .reviews .author:last-child {
508 |   margin-bottom: 0;
509 | }
510 | 
511 | @media (max-width: 1000px) {
512 | 
513 |   .reviews .quote {
514 |     font-size: 20px;
515 |   }
516 | 
517 |   .reviews .author {
518 |     font-size: 16px;
519 |   }
520 | }
521 | 
522 | /**
523 |  * https://codepen.io/mithicher/pen/azQKNN
524 |  *
525 |  * Card Styles
526 |  */
527 |  .wrapper {
528 |    text-align: center;
529 |  }
530 | 
531 | .card {
532 |   background-color: #fff;
533 |   margin-bottom: 1.6rem;
534 |   width: 300px;
535 |   display: inline-block;
536 |   margin: 30px;
537 |   box-shadow: 0px 10px 7px 3px lightgray;
538 | }
539 | 
540 | .card__padding {
541 |   padding: 1rem;
542 | }
543 | 
544 | .card__image {
545 |   min-height: 100px;
546 |   background-color: #eee;
547 | }
548 |   .card__image img {
549 |     width: 100%;
550 |     max-width: 100%;
551 |     display: block;
552 |   }
553 | 
554 | .card__content {
555 |   position: relative;
556 | }
557 | 
558 | /* card meta */
559 | .card__meta time {
560 |   font-size: 1.5rem;
561 |   color: #bbb;
562 |   margin-left: 0.8rem;
563 | }
564 | 
565 | /* card article */
566 | .card__article p {
567 |   height: 100px;
568 |   overflow: hidden;
569 |   margin-bottom: 0px;
570 | }
571 | .card__article a {
572 |   text-decoration: none;
573 |   color: #444;
574 |   transition: all 0.5s ease;
575 | }
576 |   .card__article a:hover {
577 |     color: #2980b9;
578 |   }
579 | 
580 | /* card action */
581 | .card__action {
582 |   overflow: hidden;
583 |   padding-right: 1.6rem;
584 |   padding-left: 1.6rem;
585 |   padding-bottom: 1.6rem;
586 | }
587 | 
588 | .card__author img,
589 | .card__author-content {
590 |   display: inline-block;
591 |   vertical-align: middle;
592 | }
593 | 
594 | .card__author img{
595 |   border-radius: 50%;
596 |   margin-right: 0.6em;
597 | }
598 | 
599 | .card__share {
600 |   float: right;
601 |   position: relative;
602 |   margin-top: -42px;
603 | }
604 | 
605 | .card__social {
606 |   position: absolute;
607 |   top: 0;
608 |   right: 0;
609 |   visibility: hidden;
610 |   width: 160px;
611 |   transform: translateZ(0);
612 |     transform: translateX(0px);
613 |     transition: transform 0.35s ease;
614 | }
615 |   .card__social--active {
616 |     visibility: visible;
617 |     /*z-index: 3;*/
618 |     transform: translateZ(0);
619 |      transform: translateX(-48px);
620 |       transition: transform 0.35s ease;
621 |   }
622 | 
623 | /*---------------------
624 |        Contact Section
625 |   ---------------------*/
626 | 
627 | .contact {
628 |   background-color: #f7f7f7;
629 | }
630 | 
631 | .contact form {
632 |   display: flex;
633 |   align-items: center;
634 |   justify-content: center;
635 |   flex-wrap: wrap;
636 | 
637 |   max-width: 800px;
638 |   width: 80%;
639 | }
640 | 
641 | .contact form input {
642 |   padding: 15px;
643 |   flex: 1;
644 |   margin-right: 30px;
645 |   font-size: 18px;
646 |   color: #555;
647 | }
648 | 
649 | .contact form .btn {
650 |   padding: 18px 42px;
651 | }
652 | 
653 | @media (max-width: 800px) {
654 | 
655 |   .contact form input {
656 |     flex-basis: 100%;
657 |     margin: 0 0 20px 0;
658 |   }
659 | }
660 | 
661 | /*-------------
662 |        Footer
663 |   -------------*/
664 | 
665 | footer {
666 |   display: flex;
667 |   flex-direction: column;
668 |   align-items: center;
669 |   text-align: center;
670 |   color: #fff;
671 |   background-color: #414a4f;
672 |   padding: 60px 0;
673 | }
674 | 
675 | footer ul {
676 |   display: flex;
677 |   margin-bottom: 25px;
678 |   font-size: 32px;
679 | }
680 | 
681 | footer ul li {
682 |   margin: 0 8px;
683 | }
684 | 
685 | footer ul li:first-child {
686 |   margin-left: 0;
687 | }
688 | 
689 | footer ul li:last-child {
690 |   margin-right: 0;
691 | }
692 | 
693 | footer p {
694 |   text-transform: uppercase;
695 |   font-size: 14px;
696 |   color: rgba(255, 255, 255, 0.6);
697 |   margin-bottom: 10px;
698 | }
699 | 
700 | footer p a {
701 |   color: #fff;
702 | }
703 | 
704 | @media (max-width: 700px) {
705 | 
706 |   footer {
707 |     padding: 80px 15px;
708 |   }
709 | }
710 | 
711 | /* -- Demo ads -- */
712 | 
713 | @media (max-width: 1200px) {
714 |   #bsaHolder {
715 |     display: none;
716 |   }
717 | }
718 | </style>
719 | 


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