├── static ├── favicon.ico ├── image │ ├── logo.png │ ├── a1-min.jpg │ ├── a2-min.jpg │ ├── a3-min.jpg │ ├── a4-min.jpg │ ├── a5-min.jpg │ ├── a6-min.jpg │ └── auth-bg-min.jpg └── README.md ├── plugins ├── Vuelidate.js ├── README.md └── firebase.js ├── middleware ├── authmid.js ├── session-control.js └── README.md ├── components ├── Admin │ ├── Todo │ │ ├── Alert.vue │ │ ├── Todos.vue │ │ ├── TodoForm.vue │ │ ├── Todo.vue │ │ ├── UpdateTodo.vue │ │ └── MainTodo.vue │ ├── Chart │ │ ├── LineChart.js │ │ ├── BarChart.js │ │ ├── PieChart.js │ │ ├── PieChartComponent.vue │ │ ├── BarComponent.vue │ │ └── LineChartComponent.vue │ ├── comments.vue │ ├── commentUser.vue │ ├── AdminPhoto │ │ ├── PhotoUpload.vue │ │ └── Photos.vue │ ├── AdminCard │ │ ├── AdminPhoto.vue │ │ ├── CreateAdmin.vue │ │ ├── EditAdmin.vue │ │ └── AdminCard.vue │ ├── Table.vue │ ├── BoxProg.vue │ ├── Info.vue │ └── UserList.vue ├── README.md ├── Blog │ ├── BlogPage.vue │ ├── Likes.vue │ ├── Blog.vue │ ├── BlogDetail.vue │ ├── Comments.vue │ ├── LeftColum.vue │ ├── RightColumn.vue │ └── NewBlog.vue ├── Common │ ├── errorComponent.vue │ ├── Contact.vue │ ├── Footer.vue │ └── About.vue ├── Navigation │ ├── DefaultNavigation │ │ ├── NavigationTop.vue │ │ └── NavigationMobile.vue │ └── AdminNavigation │ │ ├── NavigationTop.vue │ │ ├── NavigationMobile.vue │ │ └── NavigationLeft.vue └── Auth │ └── AuthPage.vue ├── layouts ├── error.vue ├── README.md ├── authLayout.vue ├── default.vue └── adminLayout.vue ├── pages ├── README.md ├── auth │ └── index.vue ├── Category │ ├── index.vue │ └── _categoryBlog │ │ └── index.vue ├── index.vue ├── Admin │ ├── profile.vue │ ├── todos.vue │ ├── comments.vue │ ├── settings.vue │ ├── photos.vue │ ├── editAdmin.vue │ ├── createAdmin.vue │ ├── analysis.vue │ ├── Blog │ │ ├── new-blog.vue │ │ ├── index.vue │ │ └── _blogId │ │ │ └── index.vue │ ├── index.vue │ └── message.vue ├── Blog │ ├── _blogId │ │ └── index.vue │ └── index.vue ├── about.vue └── contact.vue ├── assets └── README.md ├── app.yaml ├── store ├── README.md └── index.js ├── package.json ├── nuxt.config.js └── README.md /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thrbttl/NuxtJs-Blog/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /static/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thrbttl/NuxtJs-Blog/HEAD/static/image/logo.png -------------------------------------------------------------------------------- /plugins/Vuelidate.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuelidate from 'vuelidate' 3 | Vue.use(Vuelidate) -------------------------------------------------------------------------------- /static/image/a1-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thrbttl/NuxtJs-Blog/HEAD/static/image/a1-min.jpg -------------------------------------------------------------------------------- /static/image/a2-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thrbttl/NuxtJs-Blog/HEAD/static/image/a2-min.jpg -------------------------------------------------------------------------------- /static/image/a3-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thrbttl/NuxtJs-Blog/HEAD/static/image/a3-min.jpg -------------------------------------------------------------------------------- /static/image/a4-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thrbttl/NuxtJs-Blog/HEAD/static/image/a4-min.jpg -------------------------------------------------------------------------------- /static/image/a5-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thrbttl/NuxtJs-Blog/HEAD/static/image/a5-min.jpg -------------------------------------------------------------------------------- /static/image/a6-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thrbttl/NuxtJs-Blog/HEAD/static/image/a6-min.jpg -------------------------------------------------------------------------------- /static/image/auth-bg-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thrbttl/NuxtJs-Blog/HEAD/static/image/auth-bg-min.jpg -------------------------------------------------------------------------------- /middleware/authmid.js: -------------------------------------------------------------------------------- 1 | export default function(context) { 2 | if (!context.store.getters.isAuthenticated) { 3 | context.redirect("/auth"); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /components/Admin/Todo/Alert.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /middleware/session-control.js: -------------------------------------------------------------------------------- 1 | export default function(context) { 2 | if (process.client) { 3 | context.store.dispatch("initAuth"); 4 | } else { 5 | context.store.dispatch("initAuth", context.req); 6 | 7 | } 8 | 9 | } 10 | -------------------------------------------------------------------------------- /components/Blog/BlogPage.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | -------------------------------------------------------------------------------- /layouts/error.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 15 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/auth/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | -------------------------------------------------------------------------------- /components/Admin/Chart/LineChart.js: -------------------------------------------------------------------------------- 1 | import { Line, mixins } from 'vue-chartjs' 2 | const { reactiveProp } = mixins 3 | 4 | export default { 5 | extends: Line, 6 | mixins: [reactiveProp], 7 | props: ['options', "chartData"], 8 | mounted () { 9 | this.renderChart(this.chartData, this.options) 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /pages/Category/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 22 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /layouts/authLayout.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 24 | -------------------------------------------------------------------------------- /components/Admin/Chart/BarChart.js: -------------------------------------------------------------------------------- 1 | import { Bar, mixins } from 'vue-chartjs' 2 | const { reactiveProp } = mixins 3 | 4 | export default { 5 | extends: Bar, 6 | mixins: [reactiveProp], 7 | props: ['options', "chartData"], 8 | mounted () { 9 | // this.chartData is created in the mixin. 10 | // If you want to pass options please create a local options object 11 | this.renderChart(this.chartData, this.options) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /components/Admin/Chart/PieChart.js: -------------------------------------------------------------------------------- 1 | import { Pie, mixins } from 'vue-chartjs' 2 | const { reactiveProp } = mixins 3 | 4 | export default { 5 | extends: Pie, 6 | mixins: [reactiveProp], 7 | props: ['options', "chartData"], 8 | mounted () { 9 | // this.chartData is created in the mixin. 10 | // If you want to pass options please create a local options object 11 | this.renderChart(this.chartData, this.options) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /pages/Admin/profile.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | -------------------------------------------------------------------------------- /app.yaml: -------------------------------------------------------------------------------- 1 | runtime: nodejs10 2 | 3 | instance_class: F2 4 | 5 | handlers: 6 | - url: /_nuxt 7 | static_dir: .nuxt/dist/client 8 | secure: always 9 | 10 | - url: /(.*\.(gif|png|jpg|ico|txt))$ 11 | static_files: static/\1 12 | upload: static/.*\.(gif|png|jpg|ico|txt)$ 13 | secure: always 14 | 15 | - url: /.* 16 | script: auto 17 | secure: always 18 | 19 | env_variables: 20 | HOST: '0.0.0.0' 21 | NODE_ENV: 'production' -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /components/Admin/Todo/Todos.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /pages/Admin/todos.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 26 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /pages/Admin/comments.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blogmilog", 3 | "version": "1.0.0", 4 | "description": "blog nuxtjs bilogmilog vuejs ", 5 | "author": "Tahir Battal", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate" 12 | }, 13 | "dependencies": { 14 | "@nuxtjs/axios": "^5.3.6", 15 | "chart.js": "^2.9.3", 16 | "firebase": "^7.19.1", 17 | "js-cookie": "^2.2.1", 18 | "moment": "^2.27.0", 19 | "nuxt": "^2.0.0", 20 | "vue-chartjs": "^3.5.1", 21 | "vuelidate": "^0.7.5" 22 | }, 23 | "devDependencies": {} 24 | } 25 | -------------------------------------------------------------------------------- /pages/Blog/_blogId/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | -------------------------------------------------------------------------------- /plugins/firebase.js: -------------------------------------------------------------------------------- 1 | import firebase from "firebase/app"; 2 | import "firebase/firestore"; 3 | if (!firebase.apps.length) { 4 | const config = { 5 | apiKey: process.env.firebaseAPIKey, 6 | authDomain: process.env.firebaseAuthDomain, 7 | databaseURL: process.env.firebaseDatabaseURL, 8 | projectId: process.env.firebaseProjectId, 9 | storageBucket: process.env.firebaseStorageBucket, 10 | messagingSenderId: process.env.firebaseMessagingSenderId, 11 | appId: process.env.firebaseAppId, 12 | measurementId: process.env.firebaseMeasurementId 13 | }; 14 | firebase.initializeApp(config); 15 | } 16 | const fireDb = firebase.firestore(); 17 | export { fireDb }; 18 | -------------------------------------------------------------------------------- /components/Common/errorComponent.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 21 | 22 | 28 | -------------------------------------------------------------------------------- /pages/Admin/settings.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | 31 | -------------------------------------------------------------------------------- /pages/Admin/photos.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /pages/Blog/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 34 | 39 | -------------------------------------------------------------------------------- /components/Admin/Todo/TodoForm.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /pages/Admin/editAdmin.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /pages/Admin/createAdmin.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /pages/about.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /pages/contact.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /components/Admin/Todo/Todo.vue: -------------------------------------------------------------------------------- 1 | 15 | 26 | 27 | -------------------------------------------------------------------------------- /components/Blog/Likes.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /components/Admin/Todo/UpdateTodo.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | -------------------------------------------------------------------------------- /pages/Admin/analysis.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 35 | 36 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /components/Admin/comments.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 49 | 50 | -------------------------------------------------------------------------------- /pages/Admin/Blog/new-blog.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | 37 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /components/Navigation/DefaultNavigation/NavigationTop.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 | -------------------------------------------------------------------------------- /pages/Admin/Blog/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 34 | 35 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /pages/Admin/Blog/_blogId/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 44 | 45 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /components/Admin/commentUser.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 60 | 82 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | mode: "universal", 3 | /* 4 | ** Headers of the page 5 | */ 6 | head: { 7 | title: "NuxtJs Blog", 8 | meta: [ 9 | { charset: "utf-8" }, 10 | { name: "viewport", content: "width=device-width, initial-scale=1" }, 11 | { 12 | hid: "description", 13 | name: "description", 14 | content: "Baştan sona NuxtJs (VueJs) ile geliştirilmiş blog sitesi. (Tahir Battal tarafından geliştirildi: https://blog.tahirbattal.com.tr)" 15 | }, 16 | { name: "robots", content: "index, follow" }, 17 | {name:"keywords", content:"JavaScript, NuxtJs, VueJs, blog, expressJs, node.js, Tahir Battal"}, 18 | {name:"author", content:"Tahir Battal"} 19 | ], 20 | link: [ 21 | { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }, 22 | { 23 | rel: "stylesheet", 24 | href: 25 | "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 26 | } 27 | ], 28 | script: [ 29 | { 30 | src: "https://kit.fontawesome.com/07bab029bf.js", 31 | type: "text/javascript" 32 | } 33 | ] 34 | }, 35 | /* 36 | ** Customize the progress-bar color 37 | */ 38 | loading: { color: "#fff" }, 39 | /* 40 | ** Global CSS 41 | */ 42 | css: [], 43 | /* 44 | ** Plugins to load before mounting the App 45 | */ 46 | plugins: ["~/plugins/firebase.js", { src: "~/plugins/Vuelidate" }], 47 | /* 48 | ** Nuxt.js dev-modules 49 | */ 50 | buildModules: [], 51 | /* 52 | ** Nuxt.js modules 53 | */ 54 | modules: ["@nuxtjs/axios"], 55 | axios: {}, 56 | /* 57 | ** Build configuration 58 | */ 59 | build: { 60 | /* 61 | ** You can extend webpack config here 62 | */ 63 | extend(config, ctx) {} 64 | }, 65 | env: { 66 | firebaseAPIKey: "", 67 | firebaseAuthDomain: "", 68 | firebaseDatabaseURL: "", 69 | firebaseProjectId: "", 70 | firebaseStorageBucket: "", 71 | firebaseMessagingSenderId: "", 72 | firebaseAppId: "", 73 | firebaseMeasurementId: "" 74 | } 75 | }; 76 | -------------------------------------------------------------------------------- /components/Admin/Todo/MainTodo.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 67 | 68 | 85 | -------------------------------------------------------------------------------- /components/Admin/Chart/PieChartComponent.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 77 | 78 | 84 | -------------------------------------------------------------------------------- /components/Admin/AdminPhoto/PhotoUpload.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 68 | -------------------------------------------------------------------------------- /components/Admin/AdminCard/AdminPhoto.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 67 | -------------------------------------------------------------------------------- /components/Admin/Table.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 56 | 57 | -------------------------------------------------------------------------------- /pages/Admin/index.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 75 | 76 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /pages/Admin/message.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 57 | 58 | -------------------------------------------------------------------------------- /pages/Category/_categoryBlog/index.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 54 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NuxtJs Blog 2 | 3 | - Baştan sona NuxtJs (dolayısıyla VueJs) ile geliştirilmiş ve geliştirilmeye devam eden bir Blog sitesi. 4 | - Database ve Authentication işlemleri için Firebase kullanıldı. 5 | - Gerçek hayattaki örneği ve demosu için : [NuxtJs Blog](https://blognuxt1.ey.r.appspot.com/) 6 | - Ziyaret ederek sayfa tasarımını, admin panelini gözden geçirebilirsiniz. 7 | 8 | ### Gereksinimler 9 | 10 | * Sisteminizde [Node.Js](https://nodejs.org) kurulu olması gerekmektedir. 11 | * Firebase bağlantısı yapacağımız için [gmail](https://mail.google.com) adresi gerekmektedir. 12 | 13 | ## Projede kullanılan paketler : 14 | "@nuxtjs/axios": "^5.3.6", 15 | "chart.js": "^2.9.3", 16 | "firebase": "^7.19.1", 17 | "js-cookie": "^2.2.1", 18 | "moment": "^2.27.0", 19 | "nuxt": "^2.0.0", 20 | "vue-chartjs": "^3.5.1", 21 | "vuelidate": "^0.7.5" 22 | 23 | *** Bu paketler $ npm install komutu ile otamatik olarak yüklenecektir. 24 | 25 | Projede CDN (İçerik Dağıtım Ağı) olarak "Bootstrap" ve "Fontawesome" Kullanıldı. 26 | 27 | ## Kurulum 28 | 29 | - Kurulum için öncelikle Firebase işlemlerini gerçekleştirmeniz gerekmektedir. Bunun için kullanabileceğiniz dökümanlar : 30 | [NuxtJs Blog Sistesinin Kurulumu Ve Firebase Işlemleri (2/1)](https://blog.tahirbattal.com.tr/Blog/-MHGcC94Ri0xXmNi2765), [NuxtJs Blog Sitesinin Local Kurulumu Ve Auth Işlemleri (2/2)](https://blog.tahirbattal.com.tr/Blog/-MHISmcydA_DGXdxsG7K) 31 | - Proje deploy işlemi için : [NustJs Deploy Google App Engine](https://blog.tahirbattal.com.tr/Blog/-MIB6QKCFik91OIimkS7) 32 | - Firebase Web App ayarlarındaki "firebaseConfig" objesinin içeriğini, gitHub'dan indirdiğiniz projenin "nuxt.config.js" dosyasının içerisindeki "env" objesinde karşılık gelen yerlere yazınız. 33 | - Firebase "Storage" bağlantısı için, firebase sayfasından "Storage" sekmesine gidin ve başlatın. "Storage" içerisinden "Rules" sekmesine giderek ``` "allow read, write: if request.auth != null;" ``` kodundaki "null" silip yerine "true" yazınız. 34 | 35 | #### Proje Klasöründe Terminal Üzerinden 36 | (Projeyi açtığınız editörün (Visual Studio Code gibi) terminali kullanılabilir.) 37 | 38 | ``` bash 39 | # bağımlılıkları yüklemek için: 40 | $ npm install 41 | 42 | # localhost:3000 üzerinden yayınlamak için: 43 | $ npm run dev 44 | ``` 45 | 46 | #### Firebase Sayfasından 47 | 48 | - Firebase "Authentication" işlemi için, firebase sayfasından "Authentication" sekmesine gidin ve "E-posta/Şifre" yazan başlığı seçerek kaydetme işlemini yapınız. 49 | - Authentication sekmesinden kullanıcı ekleyiniz. 50 | 51 | #### Projeyi Açtığınız Localhost bağlantısından 52 | (Genellikle tarayıcıda http://localhost:3000 üzerinden yayına alınır) 53 | 54 | - Admin girişi ve "Authentication" işlemini gerçekleştirmek için sayfanın en altında "Admin" yazan buton ile admin paneline gidiniz. 55 | 56 | ![Admin](https://firebasestorage.googleapis.com/v0/b/blognuxt1.appspot.com/o/npm%20auth%2FEkran%20Resmi%202020-09-16%2010.44.01.png?alt=media&token=4febefed-fcde-4bde-b09c-aad381e24ad0) 57 | 58 | - E-posta ve Şifreniz ile giriş yapınız. 59 | - Admin panelinden Profil bilgilerinizi eksiksiz olarak girip kaydediniz. 60 | - Panelden istediğiniz gibi içerik ekleyerek, düzenlemeler yaparak Blog sitesini kullanabilirsiniz. 61 | 62 | ``` bash 63 | # build for production and launch server 64 | $ npm run build 65 | $ npm run start 66 | ``` 67 | 68 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 69 | -------------------------------------------------------------------------------- /components/Navigation/AdminNavigation/NavigationTop.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 63 | 64 | 65 | 66 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /components/Blog/Blog.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 83 | 84 | -------------------------------------------------------------------------------- /components/Admin/AdminPhoto/Photos.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 84 | 85 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /components/Admin/BoxProg.vue: -------------------------------------------------------------------------------- 1 | 64 | 65 | 68 | 69 | -------------------------------------------------------------------------------- /components/Navigation/AdminNavigation/NavigationMobile.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 80 | 81 | 82 | 148 | -------------------------------------------------------------------------------- /components/Admin/AdminCard/CreateAdmin.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | 131 | 147 | -------------------------------------------------------------------------------- /components/Admin/AdminCard/EditAdmin.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 121 | 141 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 24 | 59 | 60 | 61 | 165 | -------------------------------------------------------------------------------- /layouts/adminLayout.vue: -------------------------------------------------------------------------------- 1 | 21 | 62 | 63 | 64 | 163 | -------------------------------------------------------------------------------- /components/Admin/AdminCard/AdminCard.vue: -------------------------------------------------------------------------------- 1 | 78 | 79 | 112 | 113 | -------------------------------------------------------------------------------- /components/Auth/AuthPage.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 101 | 102 | 183 | -------------------------------------------------------------------------------- /components/Admin/Info.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 91 | 92 | -------------------------------------------------------------------------------- /components/Admin/Chart/BarComponent.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 161 | 162 | 167 | -------------------------------------------------------------------------------- /components/Admin/Chart/LineChartComponent.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 161 | 162 | 167 | -------------------------------------------------------------------------------- /components/Navigation/DefaultNavigation/NavigationMobile.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 42 | 43 | 44 | 191 | -------------------------------------------------------------------------------- /components/Blog/BlogDetail.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 127 | 128 | 189 | 190 | -------------------------------------------------------------------------------- /components/Admin/UserList.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | -------------------------------------------------------------------------------- /components/Common/Contact.vue: -------------------------------------------------------------------------------- 1 | 103 | 104 | 107 | 108 | -------------------------------------------------------------------------------- /components/Common/Footer.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | -------------------------------------------------------------------------------- /components/Blog/Comments.vue: -------------------------------------------------------------------------------- 1 | 81 | 82 | 125 | 126 | -------------------------------------------------------------------------------- /components/Navigation/AdminNavigation/NavigationLeft.vue: -------------------------------------------------------------------------------- 1 | 87 | 88 | 91 | 92 | -------------------------------------------------------------------------------- /components/Blog/LeftColum.vue: -------------------------------------------------------------------------------- 1 | 76 | 77 | 119 | 120 | 260 | -------------------------------------------------------------------------------- /components/Blog/RightColumn.vue: -------------------------------------------------------------------------------- 1 | 91 | 92 | 155 | 156 | 237 | -------------------------------------------------------------------------------- /components/Common/About.vue: -------------------------------------------------------------------------------- 1 | 124 | 125 | 128 | 129 | 207 | -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | import Vuex from "vuex"; 2 | import Cookie from "js-cookie"; 3 | import axios from "axios"; 4 | 5 | const createStore = () => { 6 | return new Vuex.Store({ 7 | state: { 8 | fetchedBlog: [], 9 | fetchedAdminData: [], 10 | blogIndex: null, 11 | authKey: null, 12 | adminId: null, 13 | adminName: "Admin", 14 | adminEmail: null, 15 | comments: [], 16 | todos: [] 17 | }, 18 | mutations: { 19 | addBlog(state, blog) { 20 | state.fetchedBlog.push(blog); 21 | }, 22 | setBlogs(state, blogs) { 23 | state.fetchedBlog = blogs; 24 | }, 25 | 26 | updateBlog(state, edittedBlog) { 27 | let blog_index = state.fetchedBlog.findIndex( 28 | blog => blog.id == edittedBlog.id 29 | ); 30 | state.fetchedBlog[blog_index] = edittedBlog; 31 | }, 32 | deleteBlog(state, deleteBlog) { 33 | let blogId_index = state.fetchedBlog.findIndex( 34 | blog => blog.id == deleteBlog.id 35 | ); 36 | state.fetchedBlog[blogId_index] = {}; 37 | }, 38 | 39 | setAuthKey(state, authKey) { 40 | state.authKey = authKey; 41 | }, 42 | createAdminData(state, createdAdminData) { 43 | state.fetchedAdminData.push(createdAdminData); 44 | }, 45 | editAdminData(state, editedAdminData) { 46 | let admin_index = state.fetchedAdminData.findIndex( 47 | adminData => adminData.id == editedAdminData.id 48 | ); 49 | state.fetchedAdminData[admin_index] = editedAdminData; 50 | }, 51 | setAdminId(state, adminId) { 52 | state.adminId = adminId; 53 | }, 54 | setAdminData(state, adminData) { 55 | state.fetchedAdminData = adminData; 56 | }, 57 | setAdminEmail(state, adminEmail) { 58 | state.adminEmail = adminEmail; 59 | }, 60 | 61 | addComments(state, comments) { 62 | state.comments.push(comments); 63 | }, 64 | 65 | addLike(state, likes) { 66 | let blog_index = state.fetchedBlog.findIndex( 67 | blog => blog.id == likes.id 68 | ); 69 | state.fetchedBlog[blog_index].likes = likes 70 | }, 71 | 72 | deleteComment(state, deleteComment) { 73 | let blogId_index = state.fetchedBlog.findIndex( 74 | blog => blog.id == deleteComment.id 75 | ); 76 | state.fetchedBlog[blogId_index] = {}; 77 | }, 78 | 79 | setTodos(state, todos) { 80 | state.todos = todos; 81 | }, 82 | addTodo(state, todos) { 83 | state.todos.push(todos); 84 | }, 85 | deleteTodo(state, todo) { 86 | let todoIndex = state.todos.findIndex(t => t.id == todo.id); 87 | state.todos.splice(todoIndex, 1); 88 | }, 89 | updateTodo(state, todo) { 90 | let todoIndex = state.todos.findIndex(t => t.id == todo.id); 91 | if (todoIndex > -1) { 92 | state.todos.splice(todoIndex, 1, todo); 93 | } 94 | } 95 | }, 96 | actions: { 97 | async nuxtServerInit(vuexcontext, context) { 98 | const res = await axios.get( 99 | process.env.firebaseDatabaseURL + "/blogs.json" 100 | ); 101 | let data = res.data; 102 | let blogArray = []; 103 | for (let key in data) { 104 | blogArray.push({ id: key, ...data[key] }); 105 | } 106 | vuexcontext.commit("setBlogs", blogArray); 107 | 108 | const resAuth = await axios.get( 109 | process.env.firebaseDatabaseURL + "/adminData.json" 110 | ); 111 | let adminData = resAuth.data; 112 | let adminDataArray = []; 113 | for (let key in adminData) { 114 | adminDataArray.push({ id: key, ...adminData[key] }); 115 | } 116 | vuexcontext.commit("setAdminData", adminDataArray); 117 | 118 | const resTodo = await axios.get( 119 | process.env.firebaseDatabaseURL + "/todos.json" 120 | ); 121 | let todoData = resTodo.data; 122 | let todoArray = []; 123 | for (let key in todoData) { 124 | todoArray.push({ id: key, ...todoData[key] }); 125 | } 126 | vuexcontext.commit("setTodos", todoArray); 127 | }, 128 | 129 | addBlog(vuexcontext, blog) { 130 | return axios 131 | .post(process.env.firebaseDatabaseURL + "/blogs.json", blog) 132 | .then(res => { 133 | vuexcontext.commit("addBlog", { ...blog, id: res.data.name }); 134 | }); 135 | }, 136 | updateBlog(vuexcontext, edittedBlog) { 137 | return axios 138 | .put( 139 | process.env.firebaseDatabaseURL + "/blogs/" + 140 | edittedBlog.id + 141 | ".json", 142 | edittedBlog 143 | ) 144 | .then(res => { 145 | vuexcontext.commit("updateBlog", edittedBlog); 146 | }) 147 | .catch(e => { 148 | console.log(e); 149 | }); 150 | }, 151 | deleteBlog(vuexContext, deleteBlog) { 152 | return axios 153 | .delete( 154 | process.env.firebaseDatabaseURL + "/blogs/" + deleteBlog.id + ".json", 155 | deleteBlog 156 | ) 157 | .then(res => { 158 | vuexContext.commit("deleteBlog", deleteBlog); 159 | }) 160 | .catch(e => { 161 | console.log(e); 162 | }); 163 | }, 164 | 165 | initAuth(vuexContext, req) { 166 | let token; 167 | let adminId; 168 | let adminEmail; 169 | 170 | if (req) { 171 | if (!req.headers.cookie) { 172 | return; 173 | } 174 | token = req.headers.cookie 175 | .split(";") 176 | .find(c => c.trim().startsWith("authKey=")); 177 | if (token) { 178 | token = token.split("=")[1]; 179 | } 180 | 181 | adminId = req.headers.cookie 182 | .split(";") 183 | .find(i => i.trim().startsWith("adminId=")); 184 | if (adminId) { 185 | adminId = adminId.split("=")[1]; 186 | } 187 | 188 | adminEmail = req.headers.cookie 189 | .split(";") 190 | .find(e => e.trim().startsWith("adminEmail=")); 191 | if (adminEmail) { 192 | adminEmail = adminEmail.split("=")[1]; 193 | } 194 | } else { 195 | // Client Üzerinde ÇAlışıyoruz... 196 | 197 | token = localStorage.getItem("authKey"); 198 | if (!token) { 199 | return; 200 | } 201 | 202 | adminId = localStorage.getItem("adminId"); 203 | adminEmail = localStorage.getItem("adminEmail"); 204 | } 205 | 206 | vuexContext.commit("setAuthKey", token); 207 | vuexContext.commit("setAdminId", adminId); 208 | vuexContext.commit("setAdminEmail", adminEmail); 209 | }, 210 | async authAdmin(vuexContext, authData) { 211 | let authLink = 212 | "https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key="; 213 | 214 | const res = await axios.post(authLink + process.env.firebaseAPIKey, { 215 | email: authData.admin.email, 216 | password: authData.admin.password, 217 | returnSecureToken: true 218 | }); 219 | 220 | Cookie.set("authKey", res.data.idToken); 221 | localStorage.setItem("authkey", res.data.idToken); 222 | vuexContext.commit("setAuthKey", res.data.idToken); 223 | 224 | Cookie.set("adminId", res.data.localId); 225 | localStorage.setItem("adminId", res.data.localId); 226 | vuexContext.commit("setAdminId", res.data.localId); 227 | 228 | Cookie.set("adminEmail", res.data.email); 229 | localStorage.setItem("adminEmail", res.data.email); 230 | vuexContext.commit("setAdminEmail", res.data.email); 231 | 232 | }, 233 | 234 | createAdminData(vuexcontext, createdAdminData) { 235 | return axios 236 | .post( 237 | process.env.firebaseDatabaseURL + "/adminData.json", 238 | createdAdminData 239 | ) 240 | .then(res => { 241 | vuexcontext.commit("createAdminData", { 242 | ...createdAdminData, 243 | id: res.data.name 244 | }); 245 | }); 246 | }, 247 | setAdminData(vuexContext, adminData) { 248 | vuexContext.commit("setAdminData", adminData); 249 | }, 250 | 251 | editAdminData(vuexContext, editedAdminData) { 252 | return axios 253 | .put( 254 | process.env.firebaseDatabaseURL + "/adminData/" + 255 | editedAdminData.id + 256 | ".json", 257 | editedAdminData 258 | ) 259 | .then(res => { 260 | vuexContext.commit("editAdminData", editedAdminData); 261 | }) 262 | .catch(e => { 263 | console.log(e); 264 | }); 265 | }, 266 | addTodo(vuexcontext, todo) { 267 | let todos = { todo }; 268 | return axios 269 | .post(process.env.firebaseDatabaseURL + "/todos.json", todos) 270 | .then(res => { 271 | vuexcontext.commit("addTodo", { ...todos, id: res.data.name }); 272 | }); 273 | }, 274 | deleteTodo(vuexContext, todo) { 275 | return axios 276 | .delete( 277 | process.env.firebaseDatabaseURL + "/todos/" + todo.id + ".json", 278 | todo 279 | ) 280 | .then(res => { 281 | vuexContext.commit("deleteTodo", todo); 282 | }) 283 | .catch(e => { 284 | console.log(e); 285 | }); 286 | }, 287 | updateTodo(vuexContext, todo) { 288 | return axios 289 | .put( 290 | process.env.firebaseDatabaseURL + "/todos/" + todo.id + ".json", 291 | todo 292 | ) 293 | .then(res => { 294 | vuexContext.commit("updateTodo", todo); 295 | }) 296 | .catch(e => { 297 | console.log(e); 298 | }); 299 | }, 300 | 301 | addLike(vuexcontext, likes) { 302 | return axios 303 | .put( 304 | process.env.firebaseDatabaseURL + "/blogs/" + 305 | likes.id + 306 | "/likes.json", 307 | likes 308 | ) 309 | .then(res => { 310 | vuexcontext.commit("addLike", likes); 311 | }) 312 | .catch(e => { 313 | console.log(e); 314 | }); 315 | }, 316 | addComments(vuexcontext, comments) { 317 | return axios 318 | .post( 319 | process.env.firebaseDatabaseURL + "/blogs/" + 320 | comments.blogId + 321 | "/comments.json", 322 | comments 323 | ) 324 | .then(res => { 325 | vuexcontext.dispatch("addCommentsId", { 326 | ...comments, 327 | commentId: res.data.name 328 | }); 329 | }) 330 | .catch(e => { 331 | console.log(e); 332 | }); 333 | }, 334 | addCommentsId(vuexcontext, comments) { 335 | return axios 336 | .put( 337 | process.env.firebaseDatabaseURL + "/blogs/" + 338 | comments.blogId + 339 | "/comments/" + 340 | comments.commentId + 341 | ".json", 342 | comments 343 | ) 344 | .then(res => { 345 | vuexcontext.commit("addComments", comments); 346 | }) 347 | .catch(e => { 348 | console.log(e); 349 | }); 350 | }, 351 | deleteComment(vuexContext, deleteComment) { 352 | return axios 353 | .delete( 354 | process.env.firebaseDatabaseURL + "/blogs/" + 355 | deleteComment.blogId + 356 | "/comments/" + 357 | deleteComment.commentId + 358 | ".json", 359 | deleteComment 360 | ) 361 | .then(res => { 362 | vuexContext.commit("deleteComment", deleteComment); 363 | }) 364 | .catch(e => { 365 | console.log(e); 366 | }); 367 | } 368 | }, 369 | getters: { 370 | getBlogs(state) { 371 | return state.fetchedBlog; 372 | }, 373 | getBlogIndex(state) { 374 | return state.blogIndex; 375 | }, 376 | getAdminId(state) { 377 | return state.adminId; 378 | }, 379 | getAdminName(state) { 380 | return state.adminName; 381 | }, 382 | getAdminEmail(state) { 383 | return state.adminEmail; 384 | }, 385 | getAdminData(state) { 386 | return state.fetchedAdminData; 387 | }, 388 | isAuthenticated(state) { 389 | return state.authKey != null; 390 | }, 391 | getAuthKey(state) { 392 | return state.authKey; 393 | }, 394 | getTodos(state) { 395 | return state.todos; 396 | }, 397 | getComments(state) { 398 | return state.comments; 399 | } 400 | } 401 | }); 402 | }; 403 | export default createStore; 404 | -------------------------------------------------------------------------------- /components/Blog/NewBlog.vue: -------------------------------------------------------------------------------- 1 | 208 | 209 | 297 | 326 | --------------------------------------------------------------------------------