├── 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 | <template>
2 |   <div class="col-md-8 offset-md-2">
3 |     <div class="d-flex justify-content-center alert alert-danger">
4 |       <strong>Yapılacaklar Listesi Boş</strong>
5 |     </div>
6 |   </div>
7 | </template>


--------------------------------------------------------------------------------
/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 | <template>
 2 |   <div>
 3 |     <Blog />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Blog from "./Blog";
 9 | 
10 | export default {
11 |   components: {
12 |     Blog,
13 |   },
14 | 
15 | };
16 | </script>
17 | 
18 | 


--------------------------------------------------------------------------------
/layouts/error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <errorComponent />
 3 | </template>
 4 | 
 5 | <script>
 6 | import errorComponent from '../components/Common/errorComponent'
 7 | 
 8 | export default {
 9 |   components:{
10 |     errorComponent
11 |   },
12 | };
13 | </script>
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 | <template>
 2 |   <section>
 3 |     <AuthPage />
 4 |   </section>
 5 | </template>
 6 | 
 7 | <script>
 8 | import AuthPage from "@/components/Auth/AuthPage";
 9 | 
10 | export default {
11 |   layout: "authLayout",
12 | 
13 |   components: {
14 |     AuthPage,
15 |   },
16 | };
17 | </script>
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 | <template>
 2 |   <div class="pt-5 main">
 3 |     <BlogPage />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import BlogPage from "@/components/Blog/BlogPage";
 9 | 
10 | export default {
11 |   components: {
12 |     BlogPage,
13 |   },
14 |   
15 | };
16 | </script>
17 | <style scoped>
18 | .main {
19 |   min-height: 100vh;
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg-white main">
 3 |     <BlogPage class="pt-5" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style scoped>
 8 | .main{
 9 |   min-height: 100vh;
10 | }
11 | </style>
12 | 
13 | <script>
14 | import BlogPage from "@/components/Blog/BlogPage";
15 | 
16 | export default {
17 |   components: {
18 |     BlogPage,
19 |   },
20 | };
21 | </script>
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 | <template>
 2 |   <div>
 3 |     <nuxt />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | .update-container {
 9 |   background-color: rgba(0, 0, 0, 0.201);
10 |   position: absolute;
11 |   top: 0px;
12 |   left: 0px;
13 |   width: 100%;
14 |   height: 100%;
15 |   z-index: 1;
16 |   visibility:hidden;
17 | }
18 | 
19 | .show-update-container{
20 |   visibility: visible !important;
21 | }
22 | 
23 | </style>
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 | <template>
 2 |   <div class="area container pt-5 mb-5">
 3 |     <AdminCard class="pt-5" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import AdminCard from "@/components/Admin/AdminCard/AdminCard";
 9 | 
10 | export default {
11 |   layout: "adminLayout",
12 | 
13 |   components: {
14 |     AdminCard,
15 |   },
16 | };
17 | </script>
18 | 
19 | <style scoped>
20 | .area {
21 |   min-height: 100vh;
22 | }
23 | </style>


--------------------------------------------------------------------------------
/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 | <template>
 2 |   <div>
 3 |     <Todo @update-todo="$emit('update-todo', $event)" @delete-todo="$emit('delete-todo', $event)" v-for="todo in todos" :todo="todo" :key="todo.id" />
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | import Todo from "./Todo";
 8 | 
 9 | export default {
10 |   components: {
11 |     Todo,
12 |   },
13 |   props: {
14 |     todos: {
15 |       type: Array,
16 |       required: false,
17 |     },
18 |   },
19 | };
20 | </script>


--------------------------------------------------------------------------------
/pages/Admin/todos.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |       <MainTodo/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import MainTodo from "@/components/Admin/Todo/MainTodo";
 9 | 
10 | export default {
11 |   layout: "adminLayout",
12 | 
13 |   components: {
14 |       MainTodo
15 |   },
16 | };
17 | </script>
18 | 
19 | <style scoped>
20 | .container {
21 |   min-height: 100vh !important;
22 |   padding-top: 90px;
23 |   margin-bottom: 30px;
24 | }
25 | </style>
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 | <template>
 2 |   <div class="container mt-5 pt-5">
 3 |     <comments :commentsBlog="blog" v-for="blog in fetchedBlogs" :key="blog.id" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import comments from "@/components/Admin/comments";
 9 | 
10 | export default {
11 |   layout: "adminLayout",
12 |   components: {
13 |     comments,
14 |   },
15 |   computed: {
16 |     fetchedBlogs() {
17 |       return this.$store.getters.getBlogs;
18 |     },
19 |   },
20 | };
21 | </script>
22 | <style scoped>
23 | .container {
24 |   min-height: 100vh;
25 | }
26 | </style>


--------------------------------------------------------------------------------
/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 | <template>
 2 |   <div class="pt-5">
 3 |     <BlogDetail class="py-5" :blog="fetchedBlog" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import axios from "axios";
 9 | import BlogDetail from "@/components/Blog/BlogDetail";
10 | 
11 | export default {
12 |   components: {
13 |     BlogDetail,
14 |   },
15 |   asyncData(context) {
16 |     return axios
17 |       .get(
18 |         process.env.firebaseDatabaseURL + "/blogs/" +
19 |           context.params.blogId +
20 |           ".json"
21 |       )
22 |       .then((res) => {
23 |         return {
24 |           fetchedBlog: res.data,
25 |         };
26 |       });
27 |   },
28 | };
29 | </script>
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 | <template>
 2 |   <div class="container setting">
 3 |     <div class="card mb-3">
 4 |       <div class="card-img-overlay">
 5 |         <h5
 6 |           class="card-title d-flex justify-content-center"
 7 |         >Hatalı işlem. Lütfen tekrar işlem yapınız.</h5>
 8 |       </div>
 9 |       <div class="card-body">
10 |         <div class="col-12 d-flex justify-content-center mt-4">
11 |           <router-link class="btn btn-lg btn-info" tag="button" to="/">Anasayfa</router-link>
12 |         </div>
13 |       </div>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {};
20 | </script>
21 | 
22 | <style>
23 | .setting {
24 |   margin-top: 125px;
25 |   margin-bottom: 500px;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/pages/Admin/settings.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class>
 3 |     <EditAdmin @editSubmit="editAdminData($event)" :adminData="fetchedAdminData" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import EditAdmin from "@/components/Admin/AdminCard/EditAdmin";
 9 | 
10 | export default {
11 |   layout: "adminLayout",
12 | 
13 |   components: {
14 |     EditAdmin,
15 |   },
16 |   computed: {
17 |     fetchedAdminData() {
18 |       return this.$store.getters.getAdminData;
19 |     },
20 |   },
21 |   methods: {
22 |     editAdminData(editedAdminData) {
23 |       this.$store.dispatch("editAdminData", editedAdminData).then((res) => {
24 |         this.$router.push("/admin");
25 |       });
26 |     },
27 |   },
28 | };
29 | </script>
30 | 
31 | <style scoped>
32 | .area {
33 |   height: 150vh !important ;
34 | }
35 | </style>


--------------------------------------------------------------------------------
/pages/Admin/photos.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="d-flex justify-content-center mt-5 pt-5">
 3 |     <PhotoUpload class="col-md-6"/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import PhotoUpload from '@/components/Admin/AdminPhoto/PhotoUpload'
 9 | 
10 | export default {
11 |   layout: "adminLayout",
12 | 
13 |   components: {
14 |       PhotoUpload
15 |   },
16 | };
17 | </script>
18 | 
19 | <style scoped>
20 | div{
21 |   min-height: 100vh;
22 | }
23 | .container {
24 |   height: 100vh;
25 |   min-width: 100%;
26 |   padding-top: 100px;
27 |   padding-bottom: 50px;
28 |   padding-left: 100px;
29 |   padding-right: 75px;
30 |   background-color: rgb(255, 255, 255);
31 | }
32 | @media only screen and (max-width: 992px) {
33 |   .container {
34 |     height: 100%;
35 |     padding-left: 20px;
36 |     padding-right: 20px;
37 |   }
38 | }
39 | </style>
40 | 
41 | 
42 | 


--------------------------------------------------------------------------------
/pages/Blog/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="pt-5 main">
 3 |     <BlogPage />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import BlogPage from "@/components/Blog/BlogPage";
 9 | 
10 | export default {
11 |   head: {
12 |     title: "Bloglar",
13 |     meta: [
14 |       { charset: "utf-8" },
15 |       {
16 |         hid: "description",
17 |         name: "description",
18 |         content: "Baştan sona NuxtJs (VueJs) ile geliştirilmiş blog sitesi.",
19 |       },
20 |       { name: "robots", content: "index, follow" },
21 |       {
22 |         name: "keywords",
23 |         content: "JavaScript, NuxtJs, VueJs, blog, expressJs, node.js",
24 |       },
25 |       { name: "author", content: "Tahir Battal" },
26 |     ],
27 |   },
28 | 
29 |   components: {
30 |     BlogPage,
31 |   },
32 | };
33 | </script>
34 | <style scoped>
35 | .main {
36 |   min-height: 100vh;
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/components/Admin/Todo/TodoForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-md-6 mt-5 d-flex justify-content-center mx-auto">
 3 |     <input
 4 |       v-model="todoText"
 5 |       @keypress.enter="addTodo"
 6 |       ref="todoTextInput"
 7 |       type="text"
 8 |       class="form-control form-control-lg mr-1"
 9 |       :class="{'is-invalid' : isInvalid}"
10 |     />
11 |     <button @click="addTodo" @keypress.enter="addTodo" class="btn btn-outline-info">Ekle</button>
12 |   </div>
13 | </template>
14 | <script>
15 | export default {
16 |   data() {
17 |     return {
18 |       todoText: "",
19 |       isInvalid: false,
20 |     };
21 |   },
22 |   methods: {
23 |     addTodo() {
24 |       if (this.todoText !== "") {
25 |         this.$emit("addTodoEvent", this.todoText);
26 |         this.todoText = "";
27 |         this.$nextTick(() => this.$refs.todoTextInput.focus());
28 |       } else {
29 |         this.isInvalid = true;
30 |       }
31 |     },
32 |   },
33 | };
34 | </script>


--------------------------------------------------------------------------------
/pages/Admin/editAdmin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <EditAdmin
 4 |       :adminData="adminDataTo"
 5 |       @editSubmit="editAdminData($event)"
 6 |     />
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import EditAdmin from "@/components/Admin/AdminCard/EditAdmin";
12 | export default {
13 |   layout: "adminLayout",
14 | 
15 |   components: {
16 |     EditAdmin
17 |   },
18 |   methods: {
19 |     editAdminData(editedAdminData) {
20 |       this.$store.dispatch("editAdminData", editedAdminData).then(res => {
21 |         this.$router.push("/admin");
22 |       });
23 |     }
24 |   },
25 | 
26 |   computed: {
27 |     fetchedAdminData() {
28 |       return this.$store.getters.getAdminData;
29 |     },
30 |     fetchedAdminId() {
31 |       return this.$store.getters.getAdminId;
32 |     },
33 | 
34 |     adminDataTo() {
35 |       return this.fetchedAdminData.filter(
36 |         item => item.adminId == this.fetchedAdminId
37 |       );
38 |     }
39 |   }
40 | };
41 | </script>


--------------------------------------------------------------------------------
/pages/Admin/createAdmin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <CreateAdmin
 4 |       :adminId="fetchedAdminId"
 5 |       :adminName="fetchedAdminName"
 6 |       :adminEmail="fetchedAdminEmail"
 7 |       @createSubmit="createAdminData($event)"
 8 |     />
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import CreateAdmin from "@/components/Admin/AdminCard/CreateAdmin";
14 | export default {
15 |   layout: "adminLayout",
16 | 
17 |   components: {
18 |     CreateAdmin,
19 |   },
20 |   methods: {
21 |     createAdminData(createdAdminData) {
22 |       this.$store.dispatch("createAdminData", createdAdminData).then((res) => {
23 |         this.$router.push("/admin");
24 |       });
25 |     },
26 |   },
27 | 
28 |   computed: {
29 |     fetchedAdminId() {
30 |       return this.$store.getters.getAdminId;
31 |     },
32 |     fetchedAdminName() {
33 |       return this.$store.getters.getAdminName;
34 |     },
35 |     fetchedAdminEmail() {
36 |       return this.$store.getters.getAdminEmail;
37 |     },
38 |   },
39 | };
40 | </script>


--------------------------------------------------------------------------------
/pages/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg-white pt-1">
 3 |     <About class="pt-5" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style scoped>
 8 | .container {
 9 |   margin-top: 100px;
10 |   margin-bottom: 50px;
11 | }
12 | </style>
13 | 
14 | <script>
15 | import About from "@/components/Common/About";
16 | 
17 | export default {
18 |   head: {
19 |     title: "Hakkımda",
20 |     meta: [
21 |       { charset: "utf-8" },
22 |       {
23 |         hid: "description",
24 |         name: "description",
25 |         content: "Baştan sona NuxtJs (VueJs) ile geliştirilmiş blog sitesi. (Tahir Battal tarafından geliştirildi: https://blog.tahirbattal.com.tr)",
26 |       },
27 |       { name: "robots", content: "index, follow" },
28 |       {
29 |         name: "keywords",
30 |         content: "JavaScript, NuxtJs, VueJs, blog, expressJs, node.js, Tahir Battal",
31 |       },
32 |       { name: "author", content: "Tahir Battal" },
33 |     ],
34 |   },
35 | 
36 |   components: {
37 |     About,
38 |   },
39 | };
40 | </script>
41 | 
42 | 
43 | 


--------------------------------------------------------------------------------
/pages/contact.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="">
 3 |     <Contact class="pt-5" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style scoped>
 8 | .container {
 9 |   margin-top: 100px;
10 |   margin-bottom: 50px;
11 | }
12 | </style>
13 | 
14 | <script>
15 | import Contact from '@/components/Common/Contact'
16 | 
17 | export default {
18 |     head: {
19 |     title: "İletişim",
20 |     meta: [
21 |       { charset: "utf-8" },
22 |       {
23 |         hid: "description",
24 |         name: "description",
25 |         content: "Baştan sona NuxtJs (VueJs) ile geliştirilmiş blog sitesi. (Tahir Battal tarafından geliştirildi: https://blog.tahirbattal.com.tr)",
26 |       },
27 |       { name: "robots", content: "index, follow" },
28 |       {
29 |         name: "keywords",
30 |         content: "JavaScript, NuxtJs, VueJs, blog, expressJs, node.js, Tahir Battal",
31 |       },
32 |       { name: "author", content: "Tahir Battal" },
33 |     ],
34 |   },
35 | 
36 |   components: {
37 |     Contact
38 |   },
39 | };
40 | </script>
41 | 
42 | 
43 | 


--------------------------------------------------------------------------------
/components/Admin/Todo/Todo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg p-2 mb-3 text-dark col-8 offset-2 shadow card flex-row align-items-center mx-auto">
 3 |     <!-- <input type="checkbox" id="checkbox" v-model="checked" class="ml-2" /> -->
 4 |     <p
 5 |       :class="{'through' : checked }"
 6 |       class="d-flex justify-content-center m-0 w-100 text-info text-capitalize"
 7 |     >{{todo.todo}}</p>
 8 |     <button
 9 |       @click="$emit('update-todo', todo)"
10 |       class="btn btn-sm btn-success flex-shrink-1 mr-1"
11 |     >Düzenle</button>
12 |     <button @click="$emit('delete-todo', todo)" class="btn btn-sm btn-danger flex-shrink-1">X</button>
13 |   </div>
14 | </template>
15 | <script>
16 | export default {
17 |   props: {
18 |     todo: {
19 |       type: Object,
20 |       required: true,
21 |     },
22 |     checked: false,
23 |   },
24 | };
25 | </script>
26 | 
27 | <style scoped>
28 | .bg {
29 |   background-color: 2px solid rgba(9, 193, 150, 0.605) !important;
30 | }
31 | .through {
32 |   text-decoration: line-through;
33 | }
34 | </style>


--------------------------------------------------------------------------------
/components/Blog/Likes.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="row d-flex justify-content-end mr-1">
 3 |     <button @click="likeCount" class="btn btn-info">
 4 |       <i class="far fa-thumbs-up"></i>
 5 |       <span>{{this.likes.like}}</span>
 6 |     </button>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   data() {
13 |     return {
14 |       likes: {
15 |         id: this.blogId,
16 |         like: this.likeBlog.like ? this.likeBlog.like : 0,
17 |       },
18 |       likeStatus: false,
19 |     };
20 |   },
21 |   props: {
22 |     blogId: {
23 |       required: true,
24 |     },
25 |     likeBlog: {
26 |       required: false,
27 |     },
28 |   },
29 | 
30 |   methods: {
31 |     likeCount() {
32 |       if (this.likeStatus == true) {
33 |         this.likes.like--;
34 |         this.likeStatus = false;
35 |         this.$store.dispatch("addLike", this.likes).then((res) => {
36 |         });
37 |       } else if (this.likeStatus == false) {
38 |         this.likes.like++;
39 |         this.likeStatus = true;
40 |         this.$store.dispatch("addLike", this.likes).then((res) => {
41 |         });
42 |       }
43 |     },
44 |   },
45 | };
46 | </script>


--------------------------------------------------------------------------------
/components/Admin/Todo/UpdateTodo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="update-container d-flex flex-column justify-content-center align-items-center">
 3 |     <div class="card shadow pt-2 pb-2" style="width: 15rem;">
 4 |       <div class="card-body">
 5 |         <h5 class="card-title">Kaydı Düzenle</h5>
 6 |         <input
 7 |           v-model="loadedTodo.todo"
 8 |           type="text"
 9 |           class="form-control mt-3 mb-3"
10 |           value="Burada değişecek değer yazacak.."
11 |         />
12 |         <a
13 |           @click.prevent="$emit('hide-update', true)"
14 |           href="#"
15 |           class="card-link btn btn-sm btn-outline-danger"
16 |         >vazgeç</a>
17 |         <a
18 |           @click.prevent="$emit('update-todo', loadedTodo)"
19 |           href="#"
20 |           class="card-link btn btn-sm btn-outline-warning"
21 |         >Güncelle</a>
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   props: ["updateTodo"],
30 |   computed: {
31 |     loadedTodo() {
32 |       return this.updateTodo
33 |         ? { ...this.updateTodo }
34 |         : {
35 |             id: null,
36 |             todo: "",
37 |           };
38 |     },
39 |   },
40 | };
41 | </script>


--------------------------------------------------------------------------------
/pages/Admin/analysis.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container pb-5">
 3 |     <div class="row">
 4 |       <LineChartComponent :blogs="fetchedBlogs" class="col-lg-6 mt-lg-3" />
 5 |       <BarComponent :blogs="fetchedBlogs" class="col-lg-6 mt-lg-3" />
 6 |       <PieChartComponent :blogs="fetchedBlogs" class="col-lg-5 mt-lg-3 mx-auto" />
 7 |       <Table :blogs="fetchedBlogs" class="col-lg-12 mt-lg-3" />
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import PieChartComponent from "@/components/Admin/Chart/PieChartComponent";
14 | import LineChartComponent from "@/components/Admin/Chart/LineChartComponent";
15 | import BarComponent from "@/components/Admin/Chart/BarComponent";
16 | import Table from "@/components/Admin/Table";
17 | 
18 | 
19 | export default {
20 |   layout: "adminLayout",
21 | 
22 |   components: {
23 |     PieChartComponent,
24 |     LineChartComponent,
25 |     BarComponent,
26 |     Table
27 |   },
28 |   computed: {
29 |     fetchedBlogs() {
30 |       return this.$store.getters.getBlogs;
31 |     },
32 |   },
33 | };
34 | </script>
35 | 
36 | <style scoped>
37 | .container {
38 |   padding-top: 100px;
39 |   padding-bottom: 50px;
40 |   padding-left: 100px;
41 |   padding-right: 75px;
42 | }
43 | @media only screen and (max-width: 992px) {
44 |   .container {
45 |     height: 100%;
46 |     padding-left: 20px;
47 |     padding-right: 20px;
48 |   }
49 | }
50 | </style>
51 | 
52 | 
53 | 


--------------------------------------------------------------------------------
/components/Admin/comments.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-show="commentsBlog.comments">
 4 |       <div class>
 5 |         {{this.getComments[3].id}}
 6 |         <div class="p-3">
 7 |           <div>
 8 |             <router-link
 9 |               tag="h4"
10 |               class="text-success text-uppercase"
11 |               :to="'/Blog/' + commentsBlog.id"
12 |             >
13 |               <div v-for="item in commentsBlog.comments" :key="item.name">{{item.name}}</div>
14 |               <p class="pointer">{{commentsBlog.title}}</p>
15 |             </router-link>
16 |           </div>
17 |           <commentUser
18 |             class="text-info"
19 |             :commentUser="userComment"
20 |             v-for="userComment in commentsBlog.comments"
21 |             :key="userComment.userName"
22 |           />
23 |         </div>
24 |       </div>
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | import commentUser from "./commentUser";
31 | 
32 | export default {
33 |   components: {
34 |     commentUser,
35 |   },
36 |   props: {
37 |     commentsBlog: {
38 |       required: false,
39 |     },
40 |   },
41 | 
42 |   computed: {
43 |     getComments() {
44 |       return Object.values(this.commentsBlog);
45 |     },
46 |   },
47 | };
48 | </script>
49 | 
50 | <style scoped>
51 | .pointer {
52 |   cursor: pointer;
53 | }
54 | 
55 | .pointer:hover {
56 |   color: rgb(0, 111, 31);
57 | }
58 | </style>


--------------------------------------------------------------------------------
/pages/Admin/Blog/new-blog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <NewBlog :blogIn="getBlog"  :adminData="getAdminData" @submit="saveBlog($event)" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import axios from "axios";
 9 | 
10 | import NewBlog from "@/components/Blog/NewBlog";
11 | 
12 | export default {
13 |   layout: "adminLayout",
14 | 
15 |   components: {
16 |     NewBlog,
17 |   },
18 |   methods: {
19 |     saveBlog(blog) {
20 |       this.$store.dispatch("addBlog", blog).then((res) => {
21 |         this.$router.push("/admin");
22 |       });
23 |     },
24 |   },
25 |   computed: {
26 |     getAdminData() {
27 |       return this.$store.getters.getAdminData;
28 |     },
29 |     getBlog() {
30 |       let blogIn=this.$store.getters.getBlogs
31 |       return (blogIn.length +1).toString();
32 |     },
33 |   },
34 | };
35 | </script>
36 | 
37 | <style scoped>
38 | .container {
39 |   height: 100%;
40 |   min-width: 100%;
41 |   padding-top: 150px;
42 |   padding-bottom: 50px;
43 |   padding-left: 20%;
44 |   padding-right: 20%;
45 |   background-color: rgb(255, 255, 255);
46 | }
47 | @media only screen and (max-width: 992px) {
48 |   .container {
49 |     height: 100%;
50 |     padding-top: 100px;
51 |     padding-bottom: 100px;
52 |     padding-left: 30px;
53 |     padding-right: 30px;
54 |   }
55 | }
56 | 
57 | button {
58 |   height: 120px;
59 |   min-width: 250px;
60 |   padding: 10px;
61 |   border-radius: 100px;
62 | }
63 | 
64 | i {
65 |   font-size: 50px;
66 |   padding-bottom: 10px;
67 | }
68 | </style>
69 | 
70 | 
71 | 


--------------------------------------------------------------------------------
/components/Navigation/DefaultNavigation/NavigationTop.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="navigation">
 3 |     <router-link tag="a" to="/" class="navbar-brand ml-3 mr-5">
 4 |       <img src="../../../static/image/logo.png" width="30" alt="tahir battal" />
 5 |     </router-link>
 6 |     <div class="collapse navbar-collapse">
 7 |       <ul class="navbar-nav mr-auto">
 8 |         <router-link tag="li" to="/" class="items">Anasayfa</router-link>
 9 |         <router-link tag="li" to="/Blog" class="items">Blog</router-link>
10 |         <router-link tag="li" to="/About" class="items">Hakkımda</router-link>
11 |         <router-link tag="li" to="/Contact" class="items">İletişim</router-link>
12 |       </ul>
13 |     </div>
14 |   </nav>
15 | </template>
16 | 
17 | <script>
18 | export default {};
19 | </script>
20 | 
21 | <style scoped>
22 | #navigation {
23 |   display: flex;
24 |   position: absolute;
25 |   top: 0;
26 |   left: 0;
27 |   right: 0;
28 |   width: 100%;
29 |   margin-bottom: 40px;
30 |   border: 1px solid transparent;
31 |   border-radius: 0px;
32 | }
33 | 
34 | .navbar {
35 |   background-color: #000000 !important;
36 | }
37 | 
38 | ul {
39 |   display: flex;
40 |   list-style: none;
41 |   padding: 0;
42 |   margin: 0 20px 0 0;
43 | }
44 | 
45 | .items {
46 |   font-size: 22px;
47 |   padding: 2px 10px;
48 |   cursor: pointer;
49 |   color: #ecfdff;
50 | }
51 | .items:hover {
52 |   color: #a9a9a9;
53 | }
54 | 
55 | .fixed-top {
56 |   position: fixed !important;
57 |   top: 0px !important;
58 | }
59 | </style>


--------------------------------------------------------------------------------
/pages/Admin/Blog/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div class="d-flex justify-content-center pb-5">
 4 |       <button @click="$router.push('/admin/blog/new-blog')" class="btn btn-outline-info border-0">
 5 |         <i class="far fa-file-alt"></i>
 6 |         <br />Yeni Bir Yazı Ekle
 7 |       </button>
 8 |     </div>
 9 | 
10 |     <LeftColum :blogComments="{...blog.comments}" :blog="blog" v-for="blog in reversed" :key="blog.id" />
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import LeftColum from "@/components/Blog/LeftColum";
16 | 
17 | export default {
18 |   layout: "adminLayout",
19 | 
20 |   components: {
21 |     LeftColum,
22 |   },
23 |   computed: {
24 |     getBlog() {
25 |       return this.$store.getters.getBlogs;
26 |     },
27 | 
28 |     reversed() {
29 |       return this.getBlog.filter((item) => this.getBlog.length > 0).reverse();
30 |     },
31 |   },
32 | };
33 | </script>
34 | 
35 | <style scoped>
36 | .container {
37 |   min-height: 150vh;
38 |   min-width: 100%;
39 |   padding-top: 150px;
40 |   padding-bottom: 50px;
41 |   padding-left: 20%;
42 |   padding-right: 20%;
43 |   background-color: rgb(255, 255, 255);
44 | }
45 | @media only screen and (max-width: 992px) {
46 |   .container {
47 |     height: 100%;
48 |     padding-top: 100px;
49 |     padding-bottom: 100px;
50 |     padding-left: 30px;
51 |     padding-right: 30px;
52 |   }
53 | }
54 | 
55 | button {
56 |   height: 120px;
57 |   min-width: 250px;
58 |   padding: 10px;
59 |   border-radius: 100px;
60 | }
61 | 
62 | i {
63 |   font-size: 50px;
64 |   padding-bottom: 10px;
65 | }
66 | </style>
67 | 
68 | 
69 | 


--------------------------------------------------------------------------------
/pages/Admin/Blog/_blogId/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="">
 3 |     <EditBlog @submit="updateBlog($event)" :blogId="fetchedBlog" :is-update="true" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import axios from "axios";
 9 | import EditBlog from "@/components/Blog/EditBlog";
10 | 
11 | export default {
12 |   layout: "adminLayout",
13 | 
14 |   components: {
15 |     EditBlog,
16 |   },
17 |   asyncData(context) {
18 |     return axios
19 |       .get(
20 |         process.env.firebaseDatabaseURL + "/blogs/" +
21 |           context.params.blogId +
22 |           ".json"
23 |       )
24 |       .then((res) => {
25 |         return {
26 |           fetchedBlog: res.data,
27 |         };
28 |       });
29 |   },
30 |   methods: {
31 |     updateBlog(edittedBlog) {
32 |       this.$store
33 |         .dispatch("updateBlog", {
34 |           ...edittedBlog,
35 |           id: this.$route.params.blogId,
36 |         })
37 |         .then((res) => {
38 |           this.$router.push("/admin/Blog");
39 |         });
40 |     },
41 |   },
42 | };
43 | </script>
44 | 
45 | <style scoped>
46 | .container {
47 |   height: 100%;
48 |   min-width: 100%;
49 |   padding-top: 150px;
50 |   padding-bottom: 50px;
51 |   padding-left: 20%;
52 |   padding-right: 20%;
53 |   background-color: rgb(255, 255, 255);
54 | }
55 | @media only screen and (max-width: 992px) {
56 |   .container {
57 |     height: 100%;
58 |     padding-top: 100px;
59 |     padding-bottom: 100px;
60 |     padding-left: 30px;
61 |     padding-right: 30px;
62 |   }
63 | }
64 | 
65 | button {
66 |   height: 120px;
67 |   min-width: 250px;
68 |   padding: 10px;
69 |   border-radius: 100px;
70 | }
71 | 
72 | i {
73 |   font-size: 50px;
74 |   padding-bottom: 10px;
75 | }
76 | </style>
77 | 
78 | 
79 | 


--------------------------------------------------------------------------------
/components/Admin/commentUser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-show="show">
 4 |       <div>
 5 |         <span class="text-capitalize">
 6 |           <strong>Kullanıcı Adı :</strong>
 7 |           {{commentUser.userName}}
 8 |         </span>
 9 |         <span class="ml-2">
10 |           <strong>Kullanıcı E-Maili :</strong>
11 |           {{commentUser.userEmail}}
12 |         </span>
13 |         <br />
14 |         <span class="be-comment-time ml-2">
15 |           <i class="fa fa-clock-o"></i>
16 |           {{commentUser.date}}
17 |         </span>
18 |         <div class="be-comment-content">
19 |           <p class="be-comment-text">{{commentUser.userComments}}</p>
20 |         </div>
21 |         <div class="d-flex justify-content-end">
22 |           <span
23 |             v-show="this.deleted"
24 |             class="badge badge-pill badge-danger px-4"
25 |           >Blog Yazısı Siliniyor...</span>
26 | 
27 |           <button class="btn btn-danger ml-auto mr-1 mb-5" @click.prevent="deleteComment">Sil</button>
28 |         </div>
29 |       </div>
30 |     </div>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | export default {
36 |   data() {
37 |     return {
38 |       show: true,
39 |       deleted: false,
40 |     };
41 |   },
42 |   props: {
43 |     commentUser: {
44 |       required: false,
45 |     },
46 |   },
47 | 
48 |   methods: {
49 |     deleteComment() {
50 |       this.$store.dispatch("deleteComment", this.commentUser).then((res) => {
51 |         this.deleted = true;
52 |         setTimeout(() => {
53 |           this.show = false;
54 |         }, 1000);
55 |       });
56 |     },
57 |   },
58 | };
59 | </script>
60 | <style scoped>
61 | .be-comment-content {
62 |   margin-left: 0px;
63 | }
64 | 
65 | .be-comment-time {
66 |   text-align: right;
67 | 
68 |   font-size: 11px;
69 |   color: #b4b7c1;
70 | }
71 | 
72 | .be-comment-text {
73 |   font-size: 13px;
74 |   line-height: 18px;
75 |   color: #e6e6e6;
76 |   display: block;
77 |   background: #f6f6f710;
78 |   border: 1px solid #edeff208;
79 |   padding: 15px 20px 20px 20px;
80 | }
81 | </style>
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 | <template>
 2 |   <div class="shadow rounded py-5 bgc ">
 3 |     <h2 class="text-center text-info font-weight-bold">Todo</h2>
 4 |     <TodoForm @addTodoEvent="addTodo($event)" />
 5 |     <h3 v-show="todos.length !== 0" class="text-center text-success mt-5">Yapılacaklar Listesi</h3>
 6 |     <Alert v-if="todos.length === 0" class="mt-5" />
 7 |     <Todos
 8 |       class="mt-4"
 9 |       v-else
10 |       @update-todo="showUpdateTodo($event)"
11 |       @delete-todo="deleteTodo($event)"
12 |       :todos="todos"
13 |     />
14 |     <UpdateTodo
15 |       :updateTodo="toUpdateTodo"
16 |       @update-todo="updateTodo($event)"
17 |       @hide-update="showUpdate = false"
18 |       :class="{'show-update-container' : showUpdate}"
19 |     />
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import Todos from "./Todos";
25 | import TodoForm from "./TodoForm";
26 | import UpdateTodo from "./UpdateTodo";
27 | import Alert from "./Alert";
28 | 
29 | export default {
30 |   layout: "adminLayout",
31 | 
32 |   data() {
33 |     return {
34 |       showUpdate: false,
35 |       toUpdateTodo: null,
36 |     };
37 |   },
38 |   components: {
39 |     Todos,
40 |     TodoForm,
41 |     UpdateTodo,
42 |     Alert,
43 |   },
44 |   methods: {
45 |     addTodo(todo) {
46 |       this.$store.dispatch("addTodo", todo);
47 |     },
48 |     deleteTodo(todo) {
49 |       this.$store.dispatch("deleteTodo", todo);
50 |     },
51 |     showUpdateTodo(e) {
52 |       this.showUpdate = true;
53 |       this.toUpdateTodo = e;
54 |     },
55 |     updateTodo(updatedTodo) {
56 |       this.showUpdate = false;
57 |       this.$store.dispatch("updateTodo", updatedTodo);
58 |     },
59 |   },
60 |   computed: {
61 |     todos(e) {
62 |       return this.$store.getters.getTodos;
63 |     },
64 |   },
65 | };
66 | </script>
67 | 
68 | <style scoped>
69 | 
70 | .bgc{
71 |   background-color: rgb(38,43,60);
72 | }
73 | 
74 | 
75 | .container {
76 |   background-color: rgb(38,43,60);
77 |   padding: 30px 0 30px 0;
78 | }
79 | @media only screen and (min-width: 992px) {
80 |   .container {
81 |     max-width: 540px;
82 |   }
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/components/Admin/Chart/PieChartComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bgc p-5">
 3 |     <h6 class="d-flex justify-content-center text-info">Kategorilere Göre Dağılımı</h6>
 4 |     <PieChart class="pt-5" :chart-data="datacollection" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import PieChart from "./PieChart.js";
10 | 
11 | export default {
12 |   props: {
13 |     blogs: {
14 |       required: true,
15 |     },
16 |   },
17 | 
18 |   components: {
19 |     PieChart,
20 |   },
21 |   data() {
22 |     return {
23 |       datacollection: null,
24 |       category1: "yazilim",
25 |       category2: "teknoloji",
26 |       category3: "tasarim",
27 |     };
28 |   },
29 |   mounted() {
30 |     this.fillData();
31 |   },
32 |   methods: {
33 |     fillData() {
34 |       this.datacollection = {
35 |         labels: ["yazilim", "teknoloji", "tasarim"],
36 |         datasets: [
37 |           {
38 |             backgroundColor: ["#1a535c", "#4ecdc4", "#457b9d"],
39 |             borderColor: "#edf6f9",
40 |             data: [
41 |               this.category1Length.length,
42 |               this.category2Length.length,
43 |               this.category3Length.length,
44 |             ],
45 |           },
46 |         ],
47 |         options: {
48 |           legend: {
49 |             display: true,
50 |             labels: {
51 |               fontColor: "rgb(255, 99, 132)",
52 |             },
53 |           },
54 |         },
55 |       };
56 |     },
57 |   },
58 |   computed: {
59 |     category1Length() {
60 |       return this.blogs.filter((blog) => {
61 |         return blog.categories.includes(this.category1.toLowerCase());
62 |       });
63 |     },
64 |     category2Length() {
65 |       return this.blogs.filter((blog) => {
66 |         return blog.categories.includes(this.category2.toLowerCase());
67 |       });
68 |     },
69 |     category3Length() {
70 |       return this.blogs.filter((blog) => {
71 |         return blog.categories.includes(this.category3.toLowerCase());
72 |       });
73 |     },
74 |   },
75 | };
76 | </script>
77 | 
78 | <style scoped>
79 | .bgc{
80 |   background-color: rgb(38,43,60);
81 | }
82 | 
83 | </style>
84 | 


--------------------------------------------------------------------------------
/components/Admin/AdminPhoto/PhotoUpload.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class>
 3 |     <div class="d-flex justify-content-center">
 4 |       <input class="text-success p-3" type="file" @change="previewImage" accept="image/*" />
 5 |     </div>
 6 | 
 7 |     <div class="d-flex justify-content-center text-primary">Progress: {{uploadValue.toFixed()+"%"}}</div>
 8 |     <div class="d-flex justify-content-center">
 9 |       <progress id="progress" :value="uploadValue" max="100"></progress>
10 |     </div>
11 | 
12 |     <div class="d-flex justify-content-center" v-if="imageData!=null">
13 |       <img class="preview" :src="picture" />
14 |     </div>
15 |     <div class="d-flex justify-content-center" v-if="imageData!=null">
16 |       <button class="btn btn-success my-2" @click="onUpload">Yükle</button>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | import firebase from "firebase";
23 | 
24 | export default {
25 |   data() {
26 |     return {
27 |       imageData: null,
28 |       picture: null,
29 |       uploadValue: 0,
30 |     };
31 |   },
32 |   methods: {
33 |     previewImage(event) {
34 |       this.uploadValue = 0;
35 |       this.picture = null;
36 |       this.imageData = event.target.files[0];
37 |     },
38 |     onUpload() {
39 |       this.picture = null;
40 |       const storageRef = firebase
41 |         .storage()
42 |         .ref(`${this.imageData.name}`)
43 |         .put(this.imageData);
44 | 
45 |       storageRef.on(
46 |         `state_changed`,
47 |         (snapshot) => {
48 |           this.uploadValue =
49 |             (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
50 |         },
51 |         (error) => {
52 |           console.log(error.message);
53 |         },
54 |         () => {
55 |           this.uploadValue = 100;
56 |           storageRef.snapshot.ref.getDownloadURL().then((url) => {
57 |             this.picture = url;
58 |             let photo = [];
59 |             photo.push(this.picture);
60 |             this.$emit("photoUp", photo);
61 |           });
62 |         }
63 |       );
64 |     },
65 |   },
66 | };
67 | </script>
68 | <style scoped>
69 | img.preview {
70 |   width: 200px;
71 | }
72 | </style>


--------------------------------------------------------------------------------
/components/Admin/AdminCard/AdminPhoto.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-md-12">
 3 |     <p class="text-success d-flex justify-content-center">Fotoğraf Yükle</p>
 4 |     <div class="d-flex flex-wrap justify-content-center">
 5 |       <input class="text-success" type="file" @change="previewImage" accept="image/*" />
 6 |     </div>
 7 |     <div class="d-flex justify-content-center text-primary">Progress: {{uploadValue.toFixed()+"%"}}</div>
 8 |     <div class="d-flex justify-content-center">
 9 |       <progress id="progress" :value="uploadValue" max="100"></progress>
10 |     </div>
11 |     <div class="d-flex justify-content-center" v-if="imageData!=null">
12 |       <img class="preview" :src="picture" />
13 |     </div>
14 |     <div class="d-flex justify-content-center" v-if="imageData!=null">
15 |       <button class="btn btn-success my-2" @click="onUpload">Yükle</button>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import firebase from "firebase";
22 | 
23 | export default {
24 |   data() {
25 |     return {
26 |       imageData: null,
27 |       picture: null,
28 |       uploadValue: 0,
29 |     };
30 |   },
31 |   methods: {
32 |     previewImage(event) {
33 |       this.uploadValue = 0;
34 |       this.picture = null;
35 |       this.imageData = event.target.files[0];
36 |     },
37 |     onUpload() {
38 |       this.picture = null;
39 |       const storageRef = firebase
40 |         .storage()
41 |         .ref(`${this.imageData.name}`)
42 |         .put(this.imageData);
43 | 
44 |       storageRef.on(
45 |         `state_changed`,
46 |         (snapshot) => {
47 |           this.uploadValue =
48 |             (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
49 |         },
50 |         (error) => {
51 |           console.log(error.message);
52 |         },
53 |         () => {
54 |           this.uploadValue = 100;
55 |           storageRef.snapshot.ref.getDownloadURL().then((url) => {
56 |             this.picture = url;
57 |             let photo = [];
58 |             photo.push(this.picture);
59 |             this.$emit("adminPhoto", photo);
60 |           });
61 |         }
62 |       );
63 |     },
64 |   },
65 | };
66 | </script>
67 | <style scoped>
68 | img.preview {
69 |   width: 200px;
70 |   border-radius: 100px;
71 | }
72 | </style>


--------------------------------------------------------------------------------
/components/Admin/Table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box box-info">
 3 |     <div class="box-header with-border">
 4 |       <h3 class="box-title text-info">Blog Listesi</h3>
 5 |     </div>
 6 |     <div>
 7 |       <div class="table-responsive">
 8 |         <table class="table table-hover">
 9 |           <thead>
10 |             <tr>
11 |               <th scope="col" class="text-muted">#</th>
12 |               <th class="text-muted">Blog ID</th>
13 |               <th class="text-success">Başlık</th>
14 |               <th class="text-info">Yazar</th>
15 |               <th class="text-warning">Like</th>
16 |             </tr>
17 |           </thead>
18 |           <tbody v-for="blog in blogs" :key="blog.id">
19 |             <tr>
20 |               <th scope="row" class="text-info">{{blog.indexBlog}}</th>
21 | 
22 |               <td>
23 |                 <span class="badge badge-secondary text-white">{{blog.id}}</span>
24 |               </td>
25 |               <td>
26 |                 <a
27 |                   @click.prevent="$router.push('/Blog/' + blog.id)"
28 |                   class="text-success text-uppercase"
29 |                 >{{blog.title}}</a>
30 |               </td>
31 |               <td>
32 |                 <span class="badge badge-info text-white">{{blog.author}}</span>
33 |               </td>
34 |               <td>
35 |                 <div v-for="like in blog" :key="like.id">
36 |                   <span class="badge badge-warning text-white">{{like.like}}</span>
37 |                 </div>
38 |               </td>
39 |             </tr>
40 |           </tbody>
41 |         </table>
42 |       </div>
43 |     </div>
44 |   </div>
45 | </template>
46 | 
47 | <script>
48 | export default {
49 |   props: {
50 |     blogs: {
51 |       required: false,
52 |     },
53 |   },
54 | };
55 | </script>
56 | 
57 | <style scoped>
58 | .box {
59 |   position: relative;
60 |   border-radius: 3px;
61 |   background: rgb(38, 43, 60);
62 |   border-top: 3px solid #d2d6de;
63 |   border-top-color: rgb(73, 83, 116);
64 |   margin-bottom: 20px;
65 |   width: 100%;
66 |   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
67 | }
68 | .box-info {
69 |   border-top-color: #00b37a;
70 | }
71 | .box-header {
72 |   color: #444;
73 |   display: block;
74 |   padding: 10px;
75 |   position: relative;
76 | }
77 | .box-title {
78 |   display: inline-block;
79 |   font-size: 18px;
80 |   margin: 0;
81 |   line-height: 1;
82 | }
83 | table {
84 |   min-width: 800px;
85 | }
86 | .table-responsive {
87 |   min-height: 0.01%;
88 |   overflow-x: scroll;
89 | }
90 | a {
91 |   color: #3c8dbc;
92 |   cursor: pointer;
93 | }
94 | </style>


--------------------------------------------------------------------------------
/pages/Admin/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container pb-5">
 3 |     <Info :blogs="fetchedBlogs" :idAdmin="fetchedAdminId" class="my-2" />
 4 |     <hr />
 5 |     <div class="row mb-5">
 6 |       <PieChartComponent :blogs="fetchedBlogs" class="col-lg-4" />
 7 |       <div class="col-lg-8  text-info pt-5 bgc ">
 8 |         <h6 class="col-lg-12 d-flex justify-content-center">Aylara göre Blog Dağılımı</h6>
 9 |         <div class="row">
10 |           <LineChartComponent :blogs="fetchedBlogs" class="col-lg-6 " />
11 |           <BarComponent :blogs="fetchedBlogs" class="col-lg-6 " />
12 |         </div>
13 |       </div>
14 |     </div>
15 |     <div class="row mb-5">
16 |       <AdminCard class="col-lg-7 mb-5" />
17 |       <MainTodo class="col-lg-5 mb-5" />
18 |     </div>
19 | 
20 |     <Table :blogs="fetchedBlogs" />
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import PieChartComponent from "@/components/Admin/Chart/PieChartComponent";
26 | import LineChartComponent from "@/components/Admin/Chart/LineChartComponent";
27 | import BarComponent from "@/components/Admin/Chart/BarComponent";
28 | import Info from "@/components/Admin/Info";
29 | import AdminCard from "@/components/Admin/AdminCard/AdminCard";
30 | import Table from "@/components/Admin/Table";
31 | import MainTodo from "@/components/Admin/Todo/MainTodo";
32 | 
33 | export default {
34 |   head: {
35 |     title: "Admin Paneli",
36 |     meta: [
37 |       { charset: "utf-8" },
38 |       {
39 |         hid: "description",
40 |         name: "description",
41 |         content:
42 |           "Baştan sona NuxtJs (VueJs) ile geliştirilmiş blog sitesi. (Tahir Battal tarafından geliştirildi: https://blog.tahirbattal.com.tr)",
43 |       },
44 |       { name: "robots", content: "index, follow" },
45 |       {
46 |         name: "keywords",
47 |         content:
48 |           "JavaScript, NuxtJs, VueJs, blog, expressJs, node.js, Tahir Battal",
49 |       },
50 |       { name: "author", content: "Tahir Battal" },
51 |     ],
52 |   },
53 | 
54 |   layout: "adminLayout",
55 | 
56 |   components: {
57 |     PieChartComponent,
58 |     LineChartComponent,
59 |     BarComponent,
60 |     Info,
61 |     Table,
62 |     AdminCard,
63 |     MainTodo,
64 |   },
65 |   computed: {
66 |     fetchedAdminId() {
67 |       return this.$store.getters.getAdminId;
68 |     },
69 |     fetchedBlogs() {
70 |       return this.$store.getters.getBlogs;
71 |     },
72 |   },
73 | };
74 | </script>
75 | 
76 | <style scoped>
77 | .container {
78 |   margin-top: 100px;
79 |   margin-bottom: 50px;
80 | }
81 | 
82 | .bgc {
83 |   background-color: rgb(38, 43, 60);
84 | }
85 | </style>
86 | 
87 | 
88 | 


--------------------------------------------------------------------------------
/pages/Admin/message.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="back">
  3 |     <div class="contact-form">
  4 |       <form method="post">
  5 |         <div class="row">
  6 |           <div class="col-md-12">
  7 |             <div class="form-group">
  8 |               <input
  9 |                 type="text"
 10 |                 name="txtName"
 11 |                 class="form-control"
 12 |                 placeholder="İsminiz ve Soyisminiz *"
 13 |                 value
 14 |               />
 15 |             </div>
 16 |             <div class="form-group">
 17 |               <input
 18 |                 type="text"
 19 |                 name="txtEmail"
 20 |                 class="form-control"
 21 |                 placeholder="E-Posta Adresniz *"
 22 |                 value
 23 |               />
 24 |             </div>
 25 |             <div class="form-group">
 26 |               <input
 27 |                 type="text"
 28 |                 name="txtPhone"
 29 |                 class="form-control"
 30 |                 placeholder="Telefon Numaranız *"
 31 |                 value
 32 |               />
 33 |             </div>
 34 |             <div class="form-group">
 35 |               <textarea
 36 |                 name="txtMsg"
 37 |                 class="form-control"
 38 |                 placeholder="Mesajınız *"
 39 |                 style="width: 100%; height: 250px;"
 40 |               ></textarea>
 41 |             </div>
 42 |             <div class="form-group col-6">
 43 |               <input type="submit" name="btnSubmit" class="btnContact" value="Gönder" />
 44 |             </div>
 45 |           </div>
 46 |         </div>
 47 |       </form>
 48 |     </div>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script>
 53 | export default {
 54 |   layout: "adminLayout",
 55 | };
 56 | </script>
 57 | 
 58 | <style scoped>
 59 | input[type="text"] {
 60 |   border: none;
 61 |   border-bottom: 2px solid rgb(78, 156, 184);
 62 |   background: transparent;
 63 | }
 64 | textarea {
 65 |   background-color: transparent;
 66 |   border: none;
 67 |   border-bottom: 2px solid rgb(78, 156, 184);
 68 |   resize: none;
 69 | }
 70 | textarea:focus {
 71 |   background-color: transparent;
 72 | }
 73 | 
 74 | 
 75 | .back {
 76 |   min-height: 100vh;
 77 | }
 78 | 
 79 | .contact-form {
 80 |   background: transparent;
 81 |   margin-top: 0;
 82 |   margin-bottom: 5%;
 83 |   width: 100%;
 84 | }
 85 | .contact-form .form-control {
 86 |   border-radius: 1rem;
 87 | }
 88 | .contact-form form {
 89 |   padding: 14%;
 90 | }
 91 | .contact-form form .row {
 92 |   margin-bottom: -7%;
 93 | }
 94 | .contact-form h3 {
 95 |   margin-bottom: 8%;
 96 |   margin-top: -10%;
 97 |   text-align: center;
 98 |   color: white;
 99 | }
100 | .contact-form .btnContact {
101 |   width: 50%;
102 |   border: none;
103 |   border-radius: 1rem;
104 |   padding: 1.5%;
105 |   background: #dc3545;
106 |   font-weight: 600;
107 |   color: #fff;
108 |   cursor: pointer;
109 | }
110 | .btnContact:hover {
111 |   background-color: #b52937;
112 | }
113 | .btnContactSubmit {
114 |   width: 50%;
115 |   border-radius: 1rem;
116 |   padding: 1.5%;
117 |   color: #fff;
118 |   background-color: #0062cc;
119 |   border: none;
120 |   cursor: pointer;
121 | }
122 | </style>


--------------------------------------------------------------------------------
/pages/Category/_categoryBlog/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="pt-5">
  3 |     <div class="container bg-white mb-2 mb-md-4 mt-0">
  4 |       <div class="row p-5 mt-2">
  5 |         <div v-show="!filteredList.length" class="alert alert-danger my-5">
  6 |           <h3 class="d-flex justify-content-center">Bu kategoride yazı paylaşılmamış.</h3>
  7 |         </div>
  8 | 
  9 |         <LeftColum
 10 |           class="col-lg-8"
 11 |           :blogComments="{...blog.comments}"
 12 |           :blog="blog"
 13 |           v-for="blog in filteredList"
 14 |           :key="blog.id"
 15 |         />
 16 |         <RightColumn :category="data" class="col-lg-4 position" />
 17 |       </div>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import RightColumn from "@/components/Blog/RightColumn";
 24 | import LeftColum from "@/components/Blog/LeftColum";
 25 | 
 26 | export default {
 27 |   data() {
 28 |     return {
 29 |       data: this.$route.params.categoryBlog,
 30 |     };
 31 |   },
 32 |   components: {
 33 |     LeftColum,
 34 |     RightColumn,
 35 |   },
 36 | 
 37 |   computed: {
 38 |     getBlog() {
 39 |       return this.$store.getters.getBlogs;
 40 |     },
 41 |     reversed() {
 42 |       return this.getBlog.filter((item) => this.getBlog.length > 0).reverse();
 43 |     },
 44 |     filteredList() {
 45 |       return this.reversed.filter((blog) => {
 46 |         return blog.categories.includes(
 47 |           this.$route.params.categoryBlog.toLowerCase()
 48 |         );
 49 |       });
 50 |     },
 51 |   },
 52 | };
 53 | </script>
 54 | <style scoped>
 55 | .container {
 56 |   min-height: 120vh;
 57 | }
 58 | .position {
 59 |   position: absolute;
 60 |   right: 0%;
 61 | }
 62 | @media only screen and (min-width: 992px) {
 63 |   .position {
 64 |     right: 0%;
 65 |   }
 66 | }
 67 | @media only screen and (min-width: 1200px) {
 68 |   .position {
 69 |     right: 5%;
 70 |   }
 71 | }
 72 | @media only screen and (min-width: 1300px) {
 73 |   .position {
 74 |     right: 8%;
 75 |   }
 76 | }
 77 | @media only screen and (min-width: 1600px) {
 78 |   .position {
 79 |     right: 15%;
 80 |   }
 81 | }
 82 | 
 83 | .pagination .page-link {
 84 |   border-radius: 0.3125rem;
 85 |   font-size: 0.9375rem;
 86 | }
 87 | .page-item {
 88 |   margin: 0.15rem;
 89 | }
 90 | 
 91 | .page-item:last-child .page-link {
 92 |   border-top-right-radius: 0.3125rem;
 93 |   border-bottom-right-radius: 0.3125rem;
 94 | }
 95 | .page-item:first-child .page-link {
 96 |   margin-left: 0;
 97 |   border-top-left-radius: 0.3125rem;
 98 |   border-bottom-left-radius: 0.3125rem;
 99 | }
100 | .page-link {
101 |   position: relative;
102 |   transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out;
103 |   position: relative;
104 |   display: block;
105 |   padding: 0.375rem 0.75rem;
106 |   margin-left: -1px;
107 |   line-height: 1.25;
108 |   color: #4b566b;
109 |   background-color: rgba(0, 0, 0, 0);
110 |   border: 1px solid rgba(0, 0, 0, 0);
111 | }
112 | 
113 | .page-link:focus {
114 |   z-index: 3;
115 |   outline: 0;
116 |   box-shadow: 0 0 0 0 rgba(254, 105, 106, 0.25);
117 | }
118 | .page-link:hover {
119 |   z-index: 2;
120 |   color: #4b566b;
121 |   text-decoration: none;
122 |   background-color: #f3f5f9;
123 |   border-color: #f3f5f9;
124 | }
125 | 
126 | .page-link > i {
127 |   margin-top: -0.125rem;
128 |   vertical-align: middle;
129 | }
130 | </style>


--------------------------------------------------------------------------------
/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 | <template>
  2 |   <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="navigation">
  3 |     <router-link tag="a" to="/" class="navbar-brand ml-5 mr-5">
  4 |       <img src="../../../static/image/logo.png" width="30" alt="tahir battal" />
  5 |     </router-link>
  6 |     <div class="collapse navbar-collapse">
  7 |       <ul class="navbar-nav mr-auto">
  8 |         <router-link tag="li" class="items ml-auto mr-0" :to="'/admin/blog'">
  9 |           <i class="fas fa-pencil-alt"></i>
 10 |         </router-link>
 11 |         <router-link tag="li" class="items ml-auto mr-0" :to="'/admin/photos'">
 12 |           <i class="far fa-images"></i>
 13 |         </router-link>
 14 |         <router-link tag="li" class="items ml-auto mr-0" :to="'/admin/todos'">
 15 |           <i class="fas fa-list"></i>
 16 |         </router-link>
 17 |         <router-link tag="li" class="items ml-auto mr-0" :to="'/admin/analysis'">
 18 |           <i class="fas fa-chart-line"></i>
 19 |         </router-link>
 20 | 
 21 |         <router-link tag="li" class="items ml-auto mr-0" :to="'/admin/profile'">
 22 |           <i class="far fa-address-card"></i>
 23 |         </router-link>
 24 |         <router-link tag="li" class="items ml-auto mr-0" :to="'/admin/blog/new-blog'">
 25 |           <i class="far fa-edit"></i>
 26 |         </router-link>
 27 |       </ul>
 28 |       <ul class="d-flex navbar">
 29 |         <router-link tag="li" class="items ml-auto mr-0" :to="'/admin/message'">
 30 |           <i class="far fa-envelope"></i>
 31 |         </router-link>
 32 |         <router-link tag="li" class="items ml-auto mr-0" :to="'/admin/comments'">
 33 |           <i class="far fa-comments"></i>
 34 |         </router-link>
 35 |         <router-link tag="li" class="items ml-auto mr-0" :to="'/admin/settings'">
 36 |           <i class="fas fa-users-cog"></i>
 37 |         </router-link>
 38 |         <router-link tag="li" class="items ml-auto mr-1" :to="'/admin/profile'">
 39 |           <div v-if="adminData[0]" class="avatar">
 40 |             <label class="avatar-text mx-3"> {{adminData[0].author}} </label>
 41 |             <img :src="adminData[0].photo" width="40" :alt="adminData[0].author" />
 42 |           </div>
 43 |         </router-link>
 44 |       </ul>
 45 |     </div>
 46 |   </nav>
 47 | </template>
 48 | 
 49 | <script>
 50 | export default {
 51 |   data() {
 52 |     return {
 53 |       show: null,
 54 |     };
 55 |   },
 56 |   props:{
 57 |     adminData : {
 58 |       required:false
 59 |     }
 60 |   },
 61 | };
 62 | </script>
 63 | 
 64 | 
 65 | 
 66 | <style scoped>
 67 | #navigation {
 68 |   display: flex;
 69 |   position: absolute;
 70 |   top: 0;
 71 |   left: 0;
 72 |   right: 0;
 73 |   width: 100%;
 74 |   border: 1px solid transparent;
 75 |   z-index: 98;
 76 | }
 77 | @media only screen and (max-width: 600px) {
 78 |   #navigation {
 79 |     left: 0px;
 80 |   }
 81 | }
 82 | .navbar {
 83 |   background-color: rgb(38, 43, 60) !important;
 84 | }
 85 | .navbar-brand img {
 86 |   margin-left: 40px;
 87 | }
 88 | ul {
 89 |   display: flex;
 90 |   list-style: none;
 91 |   padding: 0;
 92 |   margin: 0 20px 0 0;
 93 | }
 94 | .items {
 95 |   font-size: 22px;
 96 |   padding: 2px 10px;
 97 |   cursor: pointer;
 98 |   color: #79a8a9;
 99 | }
100 | .items:hover {
101 |   color: #d7ebf1;
102 | }
103 | 
104 | .fixed-top {
105 |   position: fixed !important;
106 |   top: 0px !important;
107 | }
108 | 
109 | .avatar-text{
110 |   cursor: pointer;
111 | }
112 | 
113 | .avatar label {
114 |   font-size: 16px;
115 | }
116 | 
117 | .avatar img {
118 |   border: 3px solid rgb(78, 156, 184);
119 |   border-radius: 50px;
120 | }
121 | .avatar img:hover {
122 |   opacity: 0.9;
123 | }
124 | </style>
125 | 
126 | 
127 | 


--------------------------------------------------------------------------------
/components/Blog/Blog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container bg-white mb-2 mb-md-4 mt-0">
  3 |     <div class="row p-md-5 p-2 mt-2">
  4 |       <LeftColum
  5 |         class="col-lg-8"
  6 |         :blogComments="{...blog.comments}"
  7 |         :blog="blog"
  8 |         v-for="blog in filteredBlog"
  9 |         :key="blog.id"
 10 |       />
 11 |       <RightColumn class="col-lg-4 position" />
 12 |       <nav class="d-flex justify-content-center pt-2 col-md-8" aria-label="Page navigation">
 13 |         <ul class="pagination">
 14 |           <li class="page-item" :class="[this.start == 0 ? disabled : null]">
 15 |             <a class="page-link" href="#" @click.prevent="previousBlog">
 16 |               <i class="fas fa-angle-double-left"></i>
 17 |             </a>
 18 |           </li>
 19 |         </ul>
 20 |         <ul v-for="(item, index) in paginationList" :key="index" class="pagination">
 21 |           <li class="page-item d-sm-block">
 22 |             <a class="page-link" href="#" @click.prevent="pagination($event)">{{item}}</a>
 23 |           </li>
 24 |         </ul>
 25 |         <ul class="pagination">
 26 |           <li class="page-item" :class="[this.end < this.getBlog.length ? null : disabled]">
 27 |             <a class="page-link" href="#" @click.prevent="nextBlog" aria-label="Next">
 28 |               <i class="fas fa-angle-double-right"></i>
 29 |             </a>
 30 |           </li>
 31 |         </ul>
 32 |       </nav>
 33 |     </div>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import RightColumn from "./RightColumn";
 39 | import LeftColum from "./LeftColum";
 40 | 
 41 | export default {
 42 |   data() {
 43 |     return {
 44 |       start: 0,
 45 |       end: 5,
 46 |       disabled: "disabled",
 47 |     };
 48 |   },
 49 |   components: {
 50 |     RightColumn,
 51 |     LeftColum,
 52 |   },
 53 |   methods: {
 54 |     nextBlog() {
 55 |       this.start += 5;
 56 |       this.end += 5;
 57 |     },
 58 |     previousBlog() {
 59 |       this.start -= 5;
 60 |       this.end -= 5;
 61 |     },
 62 |     pagination(event) {
 63 |       this.end = parseInt(event.target.text) * 5;
 64 |       this.start = this.end - 5;
 65 |     },
 66 |   },
 67 |   computed: {
 68 |     getBlog() {
 69 |       return this.$store.getters.getBlogs;
 70 |     },
 71 |     reversed() {
 72 |       return this.getBlog.filter((item) => this.getBlog.length > 0).reverse();
 73 |     },
 74 |     filteredBlog() {
 75 |       return this.reversed.slice(this.start, this.end);
 76 |     },
 77 |     paginationList() {
 78 |       return Math.ceil(this.getBlog.length / 5);
 79 |     },
 80 |   },
 81 | };
 82 | </script>
 83 | 
 84 | <style scoped>
 85 | .container {
 86 |   min-height: 130vh;
 87 | }
 88 | 
 89 | .position {
 90 |   position: absolute;
 91 |   right: 0%;
 92 | }
 93 | @media only screen and (min-width: 992px) {
 94 |   .position {
 95 |     right: 0%;
 96 |   }
 97 | }
 98 | @media only screen and (min-width: 1200px) {
 99 |   .position {
100 |     right: 5%;
101 |   }
102 | }
103 | @media only screen and (min-width: 1300px) {
104 |   .position {
105 |     right: 8%;
106 |   }
107 | }
108 | @media only screen and (min-width: 1600px) {
109 |   .position {
110 |     right: 15%;
111 |   }
112 | }
113 | 
114 | .pagination .page-link {
115 |   border-radius: 0.3125rem;
116 |   font-size: 0.9375rem;
117 |   padding: 0.375rem 0.75rem;
118 |   line-height: 1.25;
119 |   color: #05180a;
120 |   background-color: rgba(0, 0, 0, 0);
121 |   border: none;
122 | }
123 | .page-item {
124 |   margin: 0.15rem;
125 | }
126 | .page-link:focus {
127 |   outline: 0;
128 |   box-shadow: none;
129 |   color: #0f5021;
130 |   background-color: rgb(234, 241, 252);
131 | }
132 | .page-link:hover {
133 |   text-decoration: none;
134 |   color: #0f5021;
135 |   background-color: #f3f5f9;
136 | }
137 | .page-link > i {
138 |   margin-top: -0.125rem;
139 |   vertical-align: middle;
140 | }
141 | </style>


--------------------------------------------------------------------------------
/components/Admin/AdminPhoto/Photos.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="area">
  3 |     <h2
  4 |       class="title text-white mt-5 mb-5 d-flex justify-content-center align-items-center"
  5 |     >Fotoğraflarnız {{fetchedUserName}}</h2>
  6 | 
  7 |     <div class="container">
  8 |       <div class="row pt-5">
  9 |         <div class="col-md-10 ml-auto mr-auto">
 10 |           <form class="my-2 my-lg-0 col-12">
 11 |             <input
 12 |               class="form-control mr-sm-2"
 13 |               type="search"
 14 |               placeholder="Search"
 15 |               aria-label="Search"
 16 |               v-model="search"
 17 |             />
 18 |           </form>
 19 |           <hr />
 20 |         </div>
 21 |       </div>
 22 |     </div>
 23 | 
 24 |     <div class="row justify-content-center">
 25 |       <div v-for="photo in filteredList" :key="photo.id" class="card-deck text-light col-md-3 m-3">
 26 |         <div class="card">
 27 |           <img class="card-img-top" :src="photo.photo" />
 28 |           <p
 29 |             class="card-title d-flex justify-content-center align-items-center d-inline-block text-truncate text-danger"
 30 |           >{{ photo.name }}</p>
 31 |         </div>
 32 |       </div>
 33 |     </div>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | export default {
 39 |   head() {
 40 |     let user = this.fetchedUserName;
 41 |     return {
 42 |       title: `tahirbattal.com.tr ${user} Fotoğraflar`,
 43 |       meta: [
 44 |         {
 45 |           hid: `description`,
 46 |           name: "description",
 47 |           content: `${user} Fotoğrafları `
 48 |         }
 49 |       ]
 50 |     };
 51 |   },
 52 | 
 53 |   data() {
 54 |     return {
 55 |       search: ""
 56 |     };
 57 |   },
 58 |   props: {
 59 |     photos: {
 60 |       required: true,
 61 |       type: Array
 62 |     },
 63 |     idUser: {
 64 |       required: true
 65 |     }
 66 |   },
 67 |   computed: {
 68 |     fetchedUserName() {
 69 |       let userName = this.$store.getters.getUserName;
 70 |       let userNameDec = decodeURIComponent(userName);
 71 |       return userNameDec;
 72 |     },
 73 |     reversed() {
 74 |       return this.photos.filter(item => item.userId == this.idUser).reverse();
 75 |     },
 76 |     filteredList() {
 77 |       return this.reversed.filter(photo => {
 78 |         return photo.name.toLowerCase().includes(this.search.toLowerCase());
 79 |       });
 80 |     }
 81 |   }
 82 | };
 83 | </script>
 84 | 
 85 | <style scoped>
 86 | .area {
 87 |   height: 100%;
 88 |   padding-top: 5%;
 89 |   padding-bottom: 5%;
 90 |   padding-right: 40px;
 91 |   padding-left: 100px;
 92 |   background-color: #3e3e52dd;
 93 |   font-family: "Times New Roman", Times, serif;
 94 | }
 95 | @media only screen and (min-width: 1200px) {
 96 |   /* XL */
 97 |   .area {
 98 |     padding-left: 40px;
 99 |     padding-bottom: 5%;
100 |   }
101 | }
102 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
103 |   /* L */
104 |   .area {
105 |     padding-left: 40px;
106 |     padding-bottom: 5%;
107 |   }
108 | }
109 | @media only screen and (min-width: 768px) and (max-width: 991px) {
110 |   /* M */
111 |   .area {
112 |     padding-left: 40px;
113 |     padding-bottom: 10%;
114 |   }
115 | }
116 | @media only screen and (min-width: 576px) and (max-width: 767px) {
117 |   /* S */
118 |   .area {
119 |     padding-left: 20px;
120 |     padding-right: 20px;
121 |     padding-bottom: 20%;
122 |   }
123 | }
124 | @media only screen and (max-width: 575px) {
125 |   /* XS */
126 |   .area {
127 |     padding-left: 25px;
128 |     padding-right: 25px;
129 |     padding-bottom: 20%;
130 |   }
131 | }
132 | 
133 | .border {
134 |   border: 5x solid red !important;
135 | }
136 | 
137 | .card-image {
138 |   margin: 10px;
139 |   border-radius: 12px;
140 |   float: left;
141 |   margin-top: 50px;
142 |   margin-bottom: 50px;
143 | }
144 | 
145 | .img:hover {
146 |   box-shadow: -8px 14px 30px 2px rgba(0, 0, 0, 0.4);
147 | }
148 | 
149 | .bosluk {
150 |   margin-left: 300px;
151 |   margin-right: 300px;
152 |   margin-top: 100px;
153 | }
154 | </style>
155 | 
156 | 
157 | 


--------------------------------------------------------------------------------
/components/Admin/BoxProg.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class>
  3 |     <div class="info-box bg-yellow">
  4 |       <span class="info-box-icon">
  5 |         <i class="fas fa-tags"></i>
  6 |       </span>
  7 | 
  8 |       <div class="info-box-content">
  9 |         <span class="info-box-text">Inventory</span>
 10 |         <span class="info-box-number">5,200</span>
 11 | 
 12 |         <div class="progress">
 13 |           <div class="progress-bar" style="width: 50%"></div>
 14 |         </div>
 15 |         <span class="progress-description">50% Increase in 30 Days</span>
 16 |       </div>
 17 |     </div>
 18 |     <div class="info-box bg-green">
 19 |       <span class="info-box-icon">
 20 |         <i class="far fa-heart"></i>
 21 |       </span>
 22 |       <div class="info-box-content">
 23 |         <span class="info-box-text">Mentions</span>
 24 |         <span class="info-box-number">92,050</span>
 25 | 
 26 |         <div class="progress">
 27 |           <div class="progress-bar" style="width: 20%"></div>
 28 |         </div>
 29 |         <span class="progress-description">20% Increase in 30 Days</span>
 30 |       </div>
 31 |     </div>
 32 |     <div class="info-box bg-red">
 33 |       <span class="info-box-icon">
 34 |         <i class="fas fa-cloud-download-alt"></i>
 35 |       </span>
 36 | 
 37 |       <div class="info-box-content">
 38 |         <span class="info-box-text">Downloads</span>
 39 |         <span class="info-box-number">114,381</span>
 40 | 
 41 |         <div class="progress">
 42 |           <div class="progress-bar" style="width: 70%"></div>
 43 |         </div>
 44 |         <span class="progress-description">70% Increase in 30 Days</span>
 45 |       </div>
 46 |     </div>
 47 |     <div class="info-box bg-aqua">
 48 |       <span class="info-box-icon">
 49 |         <i class="far fa-comment"></i>
 50 |       </span>
 51 | 
 52 |       <div class="info-box-content">
 53 |         <span class="info-box-text">Direct Messages</span>
 54 |         <span class="info-box-number">163,921</span>
 55 | 
 56 |         <div class="progress">
 57 |           <div class="progress-bar" style="width: 40%"></div>
 58 |         </div>
 59 |         <span class="progress-description">40% Increase in 30 Days</span>
 60 |       </div>
 61 |     </div>
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | export default {};
 67 | </script>
 68 | 
 69 | <style scoped>
 70 | .bg-yellow {
 71 |   background-color: #f39c12 !important;
 72 |   color: #fff !important;
 73 |   color: #fff !important;
 74 | }
 75 | .bg-green {
 76 |   background-color: #00a65a !important;
 77 |   color: #fff !important;
 78 | }
 79 | .bg-red {
 80 |   background-color: #dd4b39 !important;
 81 |   color: #fff !important;
 82 | }
 83 | .bg-aqua {
 84 |   background-color: #00c0ef !important;
 85 |   color: #fff !important;
 86 | }
 87 | 
 88 | .info-box {
 89 |   display: block;
 90 |   min-height: 90px;
 91 |   background: #fff;
 92 |   background-color: rgb(255, 255, 255);
 93 |   width: 100%;
 94 |   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 95 |   border-radius: 2px;
 96 |   margin-bottom: 15px;
 97 | }
 98 | .info-box-icon {
 99 |   border-top-left-radius: 2px;
100 |   border-top-right-radius: 0;
101 |   border-bottom-right-radius: 0;
102 |   border-bottom-left-radius: 2px;
103 |   display: block;
104 |   float: left;
105 |   height: 95px;
106 |   width: 90px;
107 |   text-align: center;
108 |   font-size: 45px;
109 |   line-height: 90px;
110 |   background: rgba(0, 0, 0, 0.2);
111 | }
112 | .info-box-content {
113 |   padding: 5px 10px;
114 |   margin-left: 90px;
115 | }
116 | .info-box-text {
117 |   text-transform: uppercase;
118 | }
119 | .info-box-number {
120 |   display: block;
121 |   font-weight: bold;
122 |   font-size: 18px;
123 | }
124 | .progress {
125 |   background: rgba(0, 0, 0, 0.2);
126 |   margin: 5px -10px 5px -10px;
127 |   height: 2px;
128 |   border-radius: 0;
129 | }
130 | .progress-bar {
131 |   background: #fff;
132 |   border-radius: 0;
133 | }
134 | .progress-description {
135 |   margin: 0;
136 |   display: block;
137 |   font-size: 14px;
138 |   white-space: nowrap;
139 |   overflow: hidden;
140 |   text-overflow: ellipsis;
141 | }
142 | </style>


--------------------------------------------------------------------------------
/components/Navigation/AdminNavigation/NavigationMobile.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="navigation-mobile">
  3 |     <div class="navbar-collapse">
  4 |       <ul class="navbar-nav mr-auto">
  5 |         <div v-if="adminData[0]">
  6 |           <router-link tag="li" class="items col-3 ml-4" :to="'/admin/profile'">
  7 |             <div class="avatar">
  8 |               <img :src="adminData[0].photo" :alt="adminData[0].author" width="100" />
  9 |             </div>
 10 |           </router-link>
 11 | 
 12 |           <router-link tag="li" class="items col-12 pl-5" :to="'/admin/profile'">
 13 |             <label class="avatar-text">{{adminData[0].author}}</label>
 14 |           </router-link>
 15 |         </div>
 16 |         <router-link tag="li" to="/admin" class="items col-6">
 17 |           <i class="fas fa-user-shield"></i>
 18 |           <span>Admin</span>
 19 |         </router-link>
 20 | 
 21 |         <router-link tag="li" :to="'/admin/profile'" class="items col-6">
 22 |           <i class="fas fa-users-cog"></i>
 23 |           <span>Profil</span>
 24 |         </router-link>
 25 | 
 26 |         <router-link tag="li" class="items col-6" :to="'/admin/blog'">
 27 |           <i class="fas fa-pencil-alt"></i>
 28 |           <span>Blog</span>
 29 |         </router-link>
 30 |         <router-link tag="li" class="items col-6" :to="'/admin/photos'">
 31 |           <i class="far fa-images"></i>
 32 |           <span>Fotoğraf</span>
 33 |         </router-link>
 34 |         <router-link tag="li" class="items col-6" :to="'/admin/analysis'">
 35 |           <i class="fas fa-chart-line"></i>
 36 |           <span>Analiz</span>
 37 |         </router-link>
 38 | 
 39 |         <router-link tag="li" class="items col-6" :to="'/admin/todos'">
 40 |           <i class="fas fa-list"></i>
 41 |           <span>Todo List</span>
 42 |         </router-link>
 43 |         <router-link tag="li" class="items col-6" :to="'/admin/editAdmin'">
 44 |           <i class="fas fa-wrench"></i>
 45 |           <span>Ayarlar</span>
 46 |         </router-link>
 47 |       </ul>
 48 | 
 49 |       <div class="exitButton">
 50 |         <router-link tag="i" to class="fas fa-times"></router-link>
 51 |       </div>
 52 | 
 53 |       <div class="social-media">
 54 |         <a href="https://www.twitter.com/tahirbattal" target="”_blank”">
 55 |           <i class="fab fa-twitter"></i>
 56 |         </a>
 57 |         <a href="https://www.instagram.com/thrbttl/" target="”_blank”">
 58 |           <i class="fab fa-instagram" aria-hidden="true"></i>
 59 |         </a>
 60 |         <a
 61 |           href="https://www.youtube.com/channel/UCa5aTN2RT4r_iayz4z89f3Q?view_as=subscriber"
 62 |           target="”_blank”"
 63 |         >
 64 |           <i class="fab fa-youtube" aria-hidden="true"></i>
 65 |         </a>
 66 |       </div>
 67 |     </div>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | export default {
 73 |   props: {
 74 |     adminData: {
 75 |       required: false,
 76 |     },
 77 |   },
 78 | };
 79 | </script>
 80 | 
 81 | 
 82 | <style scoped>
 83 | #navigation-mobile {
 84 |   padding: 80px 0 0 0;
 85 |   width: 100%;
 86 | }
 87 | 
 88 | ul {
 89 |   list-style: none;
 90 |   width: 100%;
 91 |   padding-left: 25px;
 92 |   padding-top: 20px;
 93 | }
 94 | 
 95 | .items {
 96 |   color: #fff !important;
 97 |   font-size: 0.7rem;
 98 |   font-weight: bold;
 99 |   margin-bottom: 20px;
100 |   cursor: pointer;
101 | }
102 | 
103 | .items:hover {
104 |   color: rgb(78, 156, 184) !important;
105 | }
106 | 
107 | .social-media {
108 |   position: absolute;
109 |   left: 40px;
110 |   top: 110%;
111 | }
112 | 
113 | i {
114 |   margin: 0 20px 0 0;
115 |   color: #fff;
116 |   font-size: 1.5rem;
117 |   cursor: pointer;
118 | }
119 | 
120 | i:hover {
121 |   color: rgb(78, 156, 184);
122 | }
123 | 
124 | .exitButton {
125 |   position: absolute;
126 |   top: 30px;
127 |   left: 40px;
128 | }
129 | .exitButton i {
130 |   color: rgb(0, 34, 34);
131 | }
132 | .exitButton i:hover {
133 |   color: rgb(78, 156, 184);
134 | }
135 | .avatar label {
136 |   font-size: 16px;
137 | }
138 | 
139 | .avatar img {
140 |   border: 3px solid yellow;
141 |   border-radius: 50px;
142 |   opacity: 0.9;
143 | }
144 | .avatar img:hover {
145 |   opacity: 1;
146 | }
147 | </style>
148 | 


--------------------------------------------------------------------------------
/components/Admin/AdminCard/CreateAdmin.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="my-5 py-5">
  3 |     <div class="col-12">
  4 |       <div class="d-flex justify-content-center">
  5 |         <strong class="text-danger">
  6 |           * Fotoğraf eklemelisiniz...
  7 |           <br />fotoğraf seçip yükle butonuna basınız.
  8 |         </strong>
  9 |       </div>
 10 |       <div class="d-flex justify-content-center">
 11 |         <AdminPhoto @adminPhoto="savePhoto($event)" />
 12 |       </div>
 13 |     </div>
 14 |     <form class="col-md-12 d-flex justify-content-center" @submit.prevent="createSubmit">
 15 |       <fieldset class="text-info col-md-8">
 16 |         <legend>Profil Oluştur</legend>
 17 |         <div class="form-group">
 18 |           <label>Kullanıcı ID</label>
 19 | 
 20 |           <input
 21 |             v-model="admin.id"
 22 |             type="text"
 23 |             class="form-control border border-danger"
 24 |             placeholder="Kullanıcı ID"
 25 |             readonly
 26 |           />
 27 |         </div>
 28 | 
 29 |         <div class="form-group">
 30 |           <label>Kullanıcı Adı</label>
 31 |           <input
 32 |             v-model="admin.author"
 33 |             type="text"
 34 |             class="form-control border border-danger"
 35 |             placeholder="Kullanıcı Adı"
 36 |           />
 37 |         </div>
 38 |         <div class="form-group">
 39 |           <label>E-Mail</label>
 40 |           <input
 41 |             v-model="admin.email"
 42 |             type="text"
 43 |             class="form-control border border-danger"
 44 |             placeholder="E-mail"
 45 |             readonly
 46 |           />
 47 |         </div>
 48 | 
 49 |         <div class="form-group">
 50 |           <label>Yetkinlik</label>
 51 |           <input
 52 |             v-model="admin.skill"
 53 |             type="text"
 54 |             class="form-control border border-info"
 55 |             placeholder="Yetkinlik alanlarınızı giriniz..."
 56 |           />
 57 |         </div>
 58 |         <div class="form-group">
 59 |           <label>Hakkımda</label>
 60 |           <textarea v-model="admin.about" class="form-control border border-info" rows="5"></textarea>
 61 |         </div>
 62 | 
 63 |         <button @click="$router.push('/admin')" class="btn btn-danger">İptal</button>
 64 |         <button type="submit" class="btn btn-primary">Kaydet</button>
 65 |       </fieldset>
 66 |     </form>
 67 |   </div>
 68 | </template>
 69 | 
 70 | <script>
 71 | import AdminPhoto from "../AdminCard/AdminPhoto";
 72 | 
 73 | export default {
 74 |   data() {
 75 |     return {
 76 |       admin: {
 77 |         id: this.adminId,
 78 |         email: this.adminEmail,
 79 |         author: this.adminName,
 80 |         skill: null,
 81 |         about: null,
 82 |         adminId: this.adminId,
 83 |         photo: null,
 84 |       },
 85 |     };
 86 |   },
 87 | 
 88 |   components: {
 89 |     AdminPhoto,
 90 |   },
 91 | 
 92 |   props: {
 93 |     adminId: {
 94 |       required: true,
 95 |     },
 96 |     adminName: {
 97 |       required: false,
 98 |     },
 99 |     adminEmail: {
100 |       required: true,
101 |     },
102 |   },
103 |   methods: {
104 |     createSubmit() {
105 |       this.$emit("createSubmit", this.admin);
106 |     },
107 |     savePhoto(photo) {
108 |       this.admin.photo = photo[0];
109 |     },
110 |   },
111 |   computed: {
112 |     fetchedAdminId() {
113 |       return this.$store.getters.getAdminId;
114 |     },
115 |   },
116 |   created() {
117 |     this.adminData = this.adminData
118 |       ? this.adminData
119 |       : {
120 |           id: null,
121 |           email: this.adminEmail,
122 |           author: this.adminName,
123 |           skill: null,
124 |           about: null,
125 |           adminId: this.adminId,
126 |           photo: null,
127 |         };
128 |   },
129 | };
130 | </script>
131 | <style scoped>
132 | input[type="text"] {
133 |   border: none;
134 |   border-bottom: 2px solid rgb(78, 156, 184);
135 |   background: transparent;
136 | }
137 | textarea {
138 |   background-color: transparent;
139 |   border: none;
140 |   border-bottom: 2px solid rgb(78, 156, 184);
141 |   resize: none;
142 | }
143 | textarea:focus {
144 |   background-color: transparent;
145 | }
146 | </style>
147 | 


--------------------------------------------------------------------------------
/components/Admin/AdminCard/EditAdmin.vue:
--------------------------------------------------------------------------------
  1 | <template >
  2 |   <div class="my-5 py-5">
  3 |     <div class="col-12">
  4 |       <div class="d-flex justify-content-center">
  5 |         <img :src="admin.photo" :alt="admin.name" class="img-circle rounded-circle" />
  6 |       </div>
  7 |       <div class="d-flex justify-content-center">
  8 |         <AdminPhoto @adminPhoto="savePhoto($event)" />
  9 |       </div>
 10 |     </div>
 11 |     <form class="col-md-12 d-flex justify-content-center" @submit.prevent="editSubmit">
 12 |       <fieldset class="text-info col-md-8">
 13 |         <legend>Profil Düzenle</legend>
 14 |         <div class="form-group">
 15 |           <label>Kullanıcı ID</label>
 16 |           <input
 17 |             v-model="admin.adminId"
 18 |             type="text"
 19 |             class="form-control"
 20 |             placeholder="Kullanıcı ID"
 21 |             readonly
 22 |           />
 23 |         </div>
 24 | 
 25 |         <div class="form-group">
 26 |           <label>Kullanıcı Adı</label>
 27 |           <input
 28 |             v-model="admin.author"
 29 |             type="text"
 30 |             class="form-control text-capitalize"
 31 |             placeholder="Kullanıcı Adı"
 32 |           />
 33 |         </div>
 34 |         <div class="form-group">
 35 |           <label>E-Mail</label>
 36 |           <input
 37 |             v-model="admin.email"
 38 |             type="text"
 39 |             class="form-control"
 40 |             placeholder="E-mail"
 41 |             readonly
 42 |           />
 43 |         </div>
 44 | 
 45 |         <div class="form-group">
 46 |           <label>Yetkinlik</label>
 47 |           <input
 48 |             v-model="admin.skill"
 49 |             type="text"
 50 |             class="form-control"
 51 |             placeholder="Yetkinlik alanlarınızı giriniz..."
 52 |           />
 53 |         </div>
 54 |         <div class="form-group">
 55 |           <label>Hakkımda</label>
 56 |           <textarea
 57 |             v-model="admin.about"
 58 |             class="form-control"
 59 |             rows="3"
 60 |             maxlength="150"
 61 |             placeholder="Kısaca kendinden bahset..."
 62 |           ></textarea>
 63 |         </div>
 64 |         <button @click="$router.push('/admin')" class="btn btn-danger">İptal</button>
 65 |         <button type="submit" class="btn btn-primary">Kaydet</button>
 66 |       </fieldset>
 67 |     </form>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | import AdminPhoto from "../AdminCard/AdminPhoto";
 73 | 
 74 | export default {
 75 |   data() {
 76 |     return {
 77 |       admin: {
 78 |         id: this.adminData[0].id,
 79 |         email: this.adminData[0].email,
 80 |         author: this.adminData[0].author,
 81 |         skill: this.adminData[0].skill,
 82 |         about: this.adminData[0].about,
 83 |         adminId: this.adminData[0].adminId,
 84 |         photo: this.adminData[0].photo,
 85 |       },
 86 |     };
 87 |   },
 88 | 
 89 |   components: {
 90 |     AdminPhoto,
 91 |   },
 92 | 
 93 |   props: {
 94 |     adminData: {
 95 |       required: false,
 96 |     },
 97 |   },
 98 |   methods: {
 99 |     editSubmit() {
100 |       this.$emit("editSubmit", this.admin);
101 |     },
102 |     savePhoto(photo) {
103 |       this.admin.photo = photo[0];
104 |     },
105 |   },
106 |   created() {
107 |     this.adminData = this.adminData
108 |       ? this.adminData
109 |       : {
110 |           id: this.adminData[0].id,
111 |           email: this.adminData[0].email,
112 |           author: this.adminData[0].author,
113 |           skill: this.adminData[0].skill,
114 |           about: this.adminData[0].about,
115 |           adminId: this.adminData[0].adminId,
116 |           photo: this.adminData[0].photo,
117 |         };
118 |   },
119 | };
120 | </script>
121 | <style scoped>
122 | input[type="text"] {
123 |   border: none;
124 |   border-bottom: 2px solid rgb(78, 156, 184);
125 |   background: transparent;
126 | }
127 | textarea {
128 |   background-color: transparent;
129 |   border: none;
130 |   border-bottom: 2px solid rgb(78, 156, 184);
131 |   resize: none;
132 | }
133 | textarea:focus {
134 |   background-color: transparent;
135 | }
136 | img{
137 |   max-width: 100px;
138 |   max-height: 100px;
139 | }
140 | </style>
141 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="area" @click.capture="blankClick()"><div class="t">Developer : <a href="https://tahirbattal.com.tr/">Tahir Battal</a> </div>
  4 |       <NavigationMobile :class="{'fixed-top': showNav}" />
  5 |       <div class="content" :class="{'open':showNav}">
  6 |         <div class="top-bar fixed-top">
  7 |           <div class="navigation-icon" v-if="mobileView" @click="showNav = !showNav">
  8 |             <i class="fas fa-bars" :class="{'iconNone': showNav}"></i>
  9 |           </div>
 10 | 
 11 |           <router-link tag="a" to="/" class="navbar-brand mt-2 ml-auto mr-3">
 12 |             <img src="../static/image/logo.png" width="30px" alt />
 13 |           </router-link>
 14 | 
 15 |           <Navigation v-if="!mobileView" />
 16 |         </div>
 17 | 
 18 |         <nuxt />
 19 |         <Footer />
 20 |       </div>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | <script>
 25 | import Navigation from "@/components/Navigation/DefaultNavigation/NavigationTop";
 26 | import NavigationMobile from "@/components/Navigation/DefaultNavigation/NavigationMobile";
 27 | import Footer from "../components/Common/Footer";
 28 | 
 29 | export default {
 30 |   middleware: ["session-control"],
 31 |   data() {
 32 |     return {
 33 |       mobileView: true,
 34 |       showNav: false,
 35 |     };
 36 |   },
 37 | 
 38 |   components: {
 39 |     Navigation,
 40 |     NavigationMobile,
 41 |     Footer,
 42 |   },
 43 |   methods: {
 44 |     handleView() {
 45 |       this.mobileView = window.innerWidth <= 990;
 46 |     },
 47 |     blankClick() {
 48 |       if (this.showNav === true) {
 49 |         this.showNav = false;
 50 |       }
 51 |     },
 52 |   },
 53 |   mounted() {
 54 |     this.handleView();
 55 |     window.addEventListener("resize", this.handleView);
 56 |   },
 57 | };
 58 | </script>
 59 | 
 60 | 
 61 | <style>
 62 | body {
 63 |   width: 100%;
 64 |   height: 100% !important;
 65 |   margin: 0;
 66 |   padding: 0;
 67 |   font-family: "Segoe UI", Tahoma;
 68 |   background-color: rgb(38, 43, 60);
 69 | }
 70 | 
 71 | #area {
 72 |   position: absolute;
 73 |   width: 100%;
 74 |   margin: 0;
 75 | }
 76 | .t{
 77 |   padding-left: 90%;
 78 | }
 79 | 
 80 | .top-bar {
 81 |   display: flex;
 82 |   width: 100%;
 83 |   height: 55px;
 84 |   background-color: #00000010;
 85 | }
 86 | .content {
 87 |   position: absolute;
 88 |   top: 0;
 89 |   left: 0;
 90 |   right: 0;
 91 |   width: 100%;
 92 |   height: auto;
 93 |   padding: 0px !important;
 94 |   margin: 0 !important;
 95 |   background-color: rgb(255, 255, 255);
 96 |   border-radius: 0px;
 97 |   box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
 98 |   transition: 0.7s transform cubic-bezier(0, 0.12, 0.14, 1);
 99 | }
100 | 
101 | .fixed-top {
102 |   z-index: 90;
103 | }
104 | 
105 | .open {
106 |   transform: translateX(300px);
107 |   z-index: 99;
108 | }
109 | 
110 | .iconNone {
111 |   display: none;
112 | }
113 | 
114 | .navigation-icon {
115 |   padding: 25px 0px 10px 20px;
116 |   margin-right: 10px;
117 |   cursor: pointer;
118 |   color: #7ca971;
119 | }
120 | .navigation-icon i {
121 |   font-size: 2rem;
122 | }
123 | 
124 | @media only screen and (min-width: 2561px) {
125 |   .navigation-icon {
126 |     padding: 13px 0px 10px 40px;
127 |   }
128 | }
129 | @media only screen and (min-width: 1441px) and (max-width: 2560px) {
130 |   .navigation-icon {
131 |     padding: 13px 0px 10px 40px;
132 |   }
133 | }
134 | @media only screen and (min-width: 1025px) and (max-width: 1440px) {
135 |   .navigation-icon {
136 |     padding: 13px 0px 10px 40px;
137 |   }
138 | }
139 | @media only screen and (min-width: 768px) and (max-width: 1024px) {
140 |   .navigation-icon {
141 |     padding: 13px 0px 40px 30px;
142 |   }
143 | }
144 | @media only screen and (min-width: 426px) and (max-width: 767px) {
145 |   .navigation-icon {
146 |     padding: 13px 0px 40px 25px;
147 |   }
148 | }
149 | @media only screen and (min-width: 376px) and (max-width: 425px) {
150 |   .navigation-icon {
151 |     padding: 13px 0px 40px 20px;
152 |   }
153 | }
154 | @media only screen and (min-width: 321px) and (max-width: 375px) {
155 |   .navigation-icon {
156 |     padding: 13px 0px 40px 20px;
157 |   }
158 | }
159 | @media only screen and (max-width: 320px) {
160 |   .navigation-icon {
161 |     padding: 13px 0px 40px 20px;
162 |   }
163 | }
164 | </style>
165 | 


--------------------------------------------------------------------------------
/layouts/adminLayout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="area" @click.capture="blankClick()">
  4 |       <NavigationMobile :adminData="fetchedAdminData" :class="{'fixed-top': showNav}" />
  5 |       <div class="content" :class="{'open': showNav}">
  6 |         <div class="top-bar fixed-top">
  7 |           <div class="navigation-icon" v-if="mobileView" @click="showNav = !showNav">
  8 |             <i class="fas fa-bars" :class="{'iconNone': showNav}"></i>
  9 |           </div>
 10 |           <router-link tag="a" to="/" class="navbar-brand mt-2 ml-auto mr-3">
 11 |             <img class="mr-2" src="../static/image/logo.png" width="30px" alt />
 12 |           </router-link>
 13 |           <NavigationTop :adminData="fetchedAdminData" v-if="!mobileView" />
 14 |         </div>
 15 |         <NavigationLeft />
 16 |         <nuxt />
 17 |       </div>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | <script>
 22 | import NavigationTop from "../components/Navigation/AdminNavigation/NavigationTop";
 23 | import NavigationMobile from "../components/Navigation/AdminNavigation/NavigationMobile";
 24 | import NavigationLeft from "../components/Navigation/AdminNavigation/NavigationLeft";
 25 | 
 26 | export default {
 27 |   middleware: ["session-control", "authmid"],
 28 | 
 29 |   data() {
 30 |     return {
 31 |       mobileView: true,
 32 |       showNav: false,
 33 |     };
 34 |   },
 35 | 
 36 |   components: {
 37 |     NavigationTop,
 38 |     NavigationMobile,
 39 |     NavigationLeft,
 40 |   },
 41 |   methods: {
 42 |     handleView() {
 43 |       this.mobileView = window.innerWidth <= 992;
 44 |     },
 45 |     blankClick() {
 46 |       if (this.showNav === true) {
 47 |         this.showNav = false;
 48 |       }
 49 |     },
 50 |   },
 51 |   mounted() {
 52 |     this.handleView();
 53 |     window.addEventListener("resize", this.handleView);
 54 |   },
 55 |   computed: {
 56 |     fetchedAdminData() {
 57 |       return this.$store.getters.getAdminData;
 58 |     },
 59 |   },
 60 | };
 61 | </script>
 62 | 
 63 | 
 64 | <style scoped>
 65 | body {
 66 |   width: 100%;
 67 |   margin: 0;
 68 |   padding: 0;
 69 |   font-family: "Segoe UI", Tahoma;
 70 |   background-color: rgb(38, 43, 60);
 71 | 
 72 | }
 73 | 
 74 | #area {
 75 |   position: absolute;
 76 |   width: 100%;
 77 |   margin: 0;
 78 |   
 79 | }
 80 | 
 81 | .top-bar {
 82 |   display: flex;
 83 |   width: 100%;
 84 |   height: 55px;
 85 |   background-color: rgb(38, 43, 60);
 86 | }
 87 | .content {
 88 |   position: absolute;
 89 |   top: 0;
 90 |   left: 0;
 91 |   right: 0;
 92 |   background-color: rgb(34, 39, 54);
 93 |   box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
 94 |   transition: 0.7s transform cubic-bezier(0, 0.12, 0.14, 1);
 95 | }
 96 | 
 97 | .fixed-top {
 98 |   z-index: 90;
 99 | 
100 | }
101 | 
102 | .open {
103 |   transform: translateX(250px);
104 |   z-index: 99;
105 |   display: block;
106 | }
107 | 
108 | .iconNone {
109 |   display: none;
110 | }
111 | 
112 | .navigation-icon {
113 |   padding: 25px 0px 10px 20px;
114 |   margin-right: 10px;
115 |   cursor: pointer;
116 |   color: rgb(78, 156, 184);
117 | }
118 | .navigation-icon i {
119 |   font-size: 2rem;
120 | }
121 | 
122 | @media only screen and (min-width: 2561px) {
123 |   .navigation-icon {
124 |     padding: 13px 0px 10px 40px;
125 |   }
126 | }
127 | @media only screen and (min-width: 1441px) and (max-width: 2560px) {
128 |   .navigation-icon {
129 |     padding: 13px 0px 10px 40px;
130 |   }
131 | }
132 | @media only screen and (min-width: 1025px) and (max-width: 1440px) {
133 |   .navigation-icon {
134 |     padding: 13px 0px 10px 40px;
135 |   }
136 | }
137 | @media only screen and (min-width: 768px) and (max-width: 1024px) {
138 |   .navigation-icon {
139 |     padding: 13px 0px 40px 30px;
140 |   }
141 | }
142 | @media only screen and (min-width: 426px) and (max-width: 767px) {
143 |   .navigation-icon {
144 |     padding: 13px 0px 40px 25px;
145 |   }
146 | }
147 | @media only screen and (min-width: 376px) and (max-width: 425px) {
148 |   .navigation-icon {
149 |     padding: 13px 0px 40px 20px;
150 |   }
151 | }
152 | @media only screen and (min-width: 321px) and (max-width: 375px) {
153 |   .navigation-icon {
154 |     padding: 13px 0px 40px 20px;
155 |   }
156 | }
157 | @media only screen and (max-width: 320px) {
158 |   .navigation-icon {
159 |     padding: 13px 0px 40px 20px;
160 |   }
161 | }
162 | </style>
163 | 


--------------------------------------------------------------------------------
/components/Admin/AdminCard/AdminCard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div >
  3 |     <div v-if="adminControl" class="col-md-12 d-flex justify-content-center pb-5">
  4 |       <router-link
  5 |         tag="button"
  6 |         to="/admin/createAdmin"
  7 |         class="btn btn-success"
  8 |       >Profil Bilgileri Oluştur</router-link>
  9 |     </div>
 10 | 
 11 |     <div v-for="admin in adminCard" :key="admin.id" class="emp-profile shadow">
 12 |       <div class="row">
 13 |         <div class="col-md-4">
 14 |           <div class="profile-img">
 15 |             <img :src="admin.photo" :alt="admin.author" />
 16 |           </div>
 17 |         </div>
 18 |         <div class="col-md-6 ml-lg-5 p-5">
 19 |           <div class="profile-head text-center">
 20 |             <h5 class="text-warning h1">{{admin.author}}</h5>
 21 |             <h6 class="text-muted">{{admin.skill}}</h6>
 22 |           </div>
 23 |         </div>
 24 |       </div>
 25 |       <hr />
 26 |       <div class="row">
 27 |         <div class="col-md-8 mt-5 pl-5">
 28 |           <div class="row">
 29 |             <div class="col-md-6 text-info">
 30 |               <label>Kullanıcı Id</label>
 31 |             </div>
 32 |             <div class="col-md-6 text-muted adminId">
 33 |               <p>{{admin.adminId}}</p>
 34 |             </div>
 35 |           </div>
 36 |           <div class="row">
 37 |             <div class="col-md-6 text-info">
 38 |               <label>Kullanıcı Adı</label>
 39 |             </div>
 40 |             <div class="col-md-6 text-muted">
 41 |               <p>{{admin.author}}</p>
 42 |             </div>
 43 |           </div>
 44 |           <div class="row">
 45 |             <div class="col-md-6 text-info">
 46 |               <label>Email</label>
 47 |             </div>
 48 |             <div class="col-md-6 text-muted">
 49 |               <p>{{admin.email}}</p>
 50 |             </div>
 51 |           </div>
 52 |           <div class="row">
 53 |             <div class="col-md-6 text-info">
 54 |               <label>Yetkinlik</label>
 55 |             </div>
 56 |             <div class="col-md-6 text-muted">
 57 |               <p>{{admin.skill}}</p>
 58 |             </div>
 59 |           </div>
 60 |           <div class="row">
 61 |             <div class="col-md-6 text-info">
 62 |               <label>Hakkımda</label>
 63 |             </div>
 64 |             <div class="col-md-6 text-muted">
 65 |               <p>{{ admin.about }}</p>
 66 |             </div>
 67 |           </div>
 68 |         </div>
 69 |       </div>
 70 |       <div class="row pb-4 pr-4">
 71 |         <div class="col-12 d-flex justify-content-end">
 72 |           <router-link tag="button" to="/admin/editAdmin" class="btn btn-info">Düzenle</router-link>
 73 |         </div>
 74 |       </div>
 75 |     </div>
 76 |   </div>
 77 | </template>
 78 | 
 79 | <script>
 80 | export default {
 81 |   data() {
 82 |     return {
 83 |       adminTo: true,
 84 |     };
 85 |   },
 86 |   computed: {
 87 |     adminCard() {
 88 |       return this.fetchedAdminData.filter(
 89 |         (item) => item.adminId == this.fetchedAdminId
 90 |       );
 91 |     },
 92 | 
 93 |     fetchedAdminData() {
 94 |       return this.$store.getters.getAdminData;
 95 |     },
 96 |     fetchedAdminId() {
 97 |       return this.$store.getters.getAdminId;
 98 |     },
 99 |     fetchedAdminName() {
100 |       return this.$store.getters.getAdminName;
101 |     },
102 |     adminControl() {
103 |       if (this.adminCard[0] == null) {
104 |         return true;
105 |       } else {
106 |         return false;
107 |       }
108 |     },
109 |   },
110 | };
111 | </script>
112 | 
113 | <style scoped>
114 | .emp-profile {
115 |   border-radius: 0.5rem;
116 |   background-color: rgb(38,43,60);
117 | }
118 | .profile-img {
119 |   text-align: center;
120 | }
121 | .profile-img img {
122 |   border: 2px solid rgba(255, 255, 255, 0);
123 |   border-radius: 10px;
124 |   margin-bottom: 0px;
125 |   padding: 30px 0px 0px 0px;
126 |   max-height: 160px;
127 |   filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.817));
128 | }
129 | 
130 | .adminId {
131 |   font-family: "Courier New", Courier, monospace;
132 |   font-style: italic;
133 |   font-size: 0.7rem;
134 | }
135 | 
136 | a {
137 |   text-decoration: none;
138 | }
139 | a:link {
140 |   color: darkcyan;
141 | }
142 | a:visited {
143 |   color: green;
144 | }
145 | a:hover {
146 |   color: rgb(227, 155, 0);
147 | }
148 | </style>


--------------------------------------------------------------------------------
/components/Auth/AuthPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section>
  3 |     <div class="container">
  4 |       <div class="login-form border-success">
  5 |         <h1 class="text-success">
  6 |           <i class="fas fa-user-astronaut"></i>
  7 |           <br />Admin Girişi
  8 |         </h1>
  9 |         <form @submit.prevent="onSubmit">
 10 |           <input
 11 |             @blur="$v.admin.email.$touch()"
 12 |             v-model="admin.email"
 13 |             type="email"
 14 |             class="form-control"
 15 |             :class="{'is-invalid': $v.admin.email.$error}"
 16 |             placeholder="E-posta adresinizi giriniz"
 17 |           />
 18 | 
 19 |           <input
 20 |             v-model="$v.admin.password.$model"
 21 |             type="password"
 22 |             class="form-control"
 23 |             :class="{'is-invalid': $v.admin.email.$error}"
 24 |             placeholder="Şifreniz..."
 25 |           />
 26 | 
 27 |           <small
 28 |             v-if="!$v.admin.password.minLength"
 29 |             class="form-text text-muted mb-4"
 30 |           >* Şifre en az {{$v.admin.password.$params.minLength.min}} karakter olmalı.</small>
 31 |           <small
 32 |             v-if="!$v.admin.password.maxLength"
 33 |             class="form-text text-muted mb-4"
 34 |           >* Şifre en fazla {{$v.admin.password.$params.maxLength.max}} karakter olmalı.</small>
 35 | 
 36 |           <div class="button-container d-flex flex-column align-items-center">
 37 |             <button
 38 |               :disabled="$v.$invalid"
 39 |               type="submit"
 40 |               class="btn btn-block mb-2 btn-success"
 41 |             >Giriş Yap</button>
 42 |           </div>
 43 |         </form>
 44 |       </div>
 45 |     </div>
 46 |   </section>
 47 | </template>
 48 | 
 49 | <script>
 50 | import {
 51 |   required,
 52 |   email,
 53 |   minLength,
 54 |   maxLength,
 55 |   sameAs,
 56 |   alpha,
 57 | } from "vuelidate/lib/validators";
 58 | 
 59 | export default {
 60 |   layout: "authLayout",
 61 | 
 62 |   data() {
 63 |     return {
 64 |       admin: {
 65 |         email: null,
 66 |         password: null,
 67 |       },
 68 |       name: false,
 69 |     };
 70 |   },
 71 |   validations: {
 72 |     admin: {
 73 |       email: {
 74 |         required,
 75 |         email,
 76 |       },
 77 |       password: {
 78 |         required,
 79 |         minLength: minLength(6),
 80 |         maxLength: maxLength(21),
 81 |       },
 82 |     },
 83 |   },
 84 | 
 85 |   methods: {
 86 |     onSubmit() {
 87 |       this.$store
 88 |         .dispatch("authAdmin", {
 89 |           admin: this.admin,
 90 |         })
 91 |         .then((res) => {
 92 |           this.$router.push("/admin");
 93 |         })
 94 |         .catch((error) => {
 95 |           alert("Parola veya e-mail hatalı.");
 96 |         });
 97 |     },
 98 |   },
 99 | };
100 | </script>
101 | 
102 | <style scoped>
103 | section {
104 |   width: 100%;
105 |   height: 100vh;
106 |   background: url(../../static/image/auth-bg-min.jpg);
107 |   background-size: cover;
108 |   font-family: "Roboto Condensed", sans-serif;
109 |   letter-spacing: 1px;
110 | }
111 | 
112 | .container {
113 |   position: absolute;
114 |   top: 50%;
115 |   left: 50%;
116 |   transform: translate(-50%, -50%);
117 |   width: 340px;
118 |   text-align: center;
119 | }
120 | 
121 | .login-form {
122 |   position: relative;
123 |   box-sizing: border-box;
124 |   border-radius: 30px;
125 |   padding: 60px 30px;
126 |   transition: 0.5s;
127 | }
128 | .login-form:hover {
129 |   background: rgba(187, 226, 247, 0.08);
130 |   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
131 | }
132 | 
133 | .login-form h1 {
134 |   margin: 0 0 20px;
135 |   color: #ffffff;
136 |   font-size: 30px;
137 | }
138 | .login-form input {
139 |   display: block;
140 |   width: 100%;
141 |   padding: 10px 20px;
142 |   box-sizing: border-box;
143 |   margin-bottom: 20px;
144 |   border-radius: 25px;
145 |   outline: none;
146 |   font-size: 14px;
147 |   letter-spacing: 1px;
148 |   color: #fff;
149 |   border: none;
150 |   background: rgba(255, 255, 255, 0.1);
151 | }
152 | .login-form input::placeholder {
153 |   color: #fff;
154 | }
155 | 
156 | .login-form input[type="submit"] {
157 |   color: #fff;
158 |   background: #0072ff;
159 |   font-size: 16px;
160 |   border: none;
161 |   cursor: pointer;
162 | }
163 | .login-form input[type="submit"]:hover {
164 |   background: #005aca;
165 | }
166 | 
167 | .login-form a {
168 |   text-decoration: none;
169 |   text-transform: uppercase;
170 | }
171 | 
172 | .login-form small {
173 |   font-size: 10px;
174 |   margin-top: -15px !important;
175 |   margin-bottom: 10px;
176 |   padding: 0 !important;
177 | }
178 | 
179 | i {
180 |   font-size: 75px;
181 | }
182 | </style>
183 | 


--------------------------------------------------------------------------------
/components/Admin/Info.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="col-12">
  3 |     <div class="row">
  4 |       <div class="col-sm-3">
  5 |         <router-link tag="div" class="info-box" to="/admin/blog">
  6 |           <span class="info-box-icon bg-aqua">
  7 |             <i class="far fa-file-alt"></i>
  8 |           </span>
  9 |           <div class="info-box-content">
 10 |             <span class="info-box-text">Bloglar</span>
 11 |             <span class="info-box-number">{{ blogs.length }}</span>
 12 |           </div>
 13 |         </router-link>
 14 |       </div>
 15 |       <div class="col-sm-3">
 16 |         <router-link tag="div" class="info-box" to="/Category/yazilim">
 17 |           <span class="info-box-icon bg-red">
 18 |             <i class="far fa-file-code"></i>
 19 |           </span>
 20 |           <div class="info-box-content">
 21 |             <span class="info-box-text">Yazılım</span>
 22 |             <span class="info-box-number">{{ category1Length.length }}</span>
 23 |           </div>
 24 |         </router-link>
 25 |       </div>
 26 |       <div class="col-sm-3">
 27 |         <router-link tag="div" class="info-box" to="/Category/teknoloji">
 28 |           <span class="info-box-icon bg-green">
 29 |             <i class="fas fa-laptop-code"></i>
 30 |           </span>
 31 |           <div class="info-box-content">
 32 |             <span class="info-box-text">Teknoloji</span>
 33 |             <span class="info-box-number">{{ category2Length.length }}</span>
 34 |           </div>
 35 |         </router-link>
 36 |       </div>
 37 |       <div class="col-sm-3">
 38 |         <router-link tag="div" class="info-box" to="/Category/tasarim">
 39 |           <span class="info-box-icon bg-yellow">
 40 |             <i class="fas fa-pencil-ruler"></i>
 41 |           </span>
 42 | 
 43 |           <div class="info-box-content">
 44 |             <span class="info-box-text">Tasarım</span>
 45 |             <span class="info-box-number">{{category3Length.length}}</span>
 46 |           </div>
 47 |         </router-link>
 48 |       </div>
 49 |       <div class="clearfix visible-sm-block"></div>
 50 |     </div>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 | export default {
 56 |   data() {
 57 |     return {
 58 |       category1: "yazilim",
 59 |       category2: "teknoloji",
 60 |       category3: "tasarim",
 61 |     };
 62 |   },
 63 | 
 64 |   props: {
 65 |     idAdmin: {
 66 |       required: true,
 67 |     },
 68 |     blogs: {
 69 |       required: true,
 70 |     },
 71 |   },
 72 |   computed: {
 73 |     category1Length() {
 74 |       return this.blogs.filter((blog) => {
 75 |         return blog.categories.includes(this.category1.toLowerCase());
 76 |       });
 77 |     },
 78 |     category2Length() {
 79 |       return this.blogs.filter((blog) => {
 80 |         return blog.categories.includes(this.category2.toLowerCase());
 81 |       });
 82 |     },
 83 |     category3Length() {
 84 |       return this.blogs.filter((blog) => {
 85 |         return blog.categories.includes(this.category3.toLowerCase());
 86 |       });
 87 |     },
 88 |   },
 89 | };
 90 | </script>
 91 | 
 92 | <style scoped>
 93 | .info-box {
 94 |   display: block;
 95 |   min-height: 90px;
 96 |   background: rgb(38,43,60);
 97 |   width: 100%;
 98 |   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 99 |   border-radius: 2px;
100 |   margin-bottom: 15px;
101 |   cursor: pointer;
102 | }
103 | .info-box:hover{
104 |   transform:rotateZ(5deg);
105 | }
106 | .info-box-icon {
107 |   border-top-left-radius: 2px;
108 |   border-top-right-radius: 0;
109 |   border-bottom-right-radius: 0;
110 |   border-bottom-left-radius: 2px;
111 |   display: block;
112 |   float: left;
113 |   height: 90px;
114 |   width: 90px;
115 |   text-align: center;
116 |   font-size: 45px;
117 |   line-height: 90px;
118 |   background: rgba(0, 0, 0, 0.2);
119 |   background-color: rgba(0, 0, 0, 0.2);
120 | }
121 | .bg-aqua {
122 |   background-color: #00c0ef !important;
123 |   color: #fff !important;
124 | }
125 | .bg-red {
126 |   background-color: #dd4b39 !important;
127 |   color: #fff !important;
128 | }
129 | .bg-green {
130 |   background-color: #00a65a !important;
131 |   color: #fff !important;
132 | }
133 | .bg-yellow {
134 |   background-color: #f39c12 !important;
135 |   color: #fff !important;
136 | }
137 | .info-box-content {
138 |   padding: 20px 20px;
139 |   margin-left: 90px;
140 | }
141 | .info-box-text {
142 |   color: aliceblue;
143 |   text-transform: uppercase;
144 |   display: block;
145 |   font-size: 14px;
146 |   white-space: nowrap;
147 |   overflow: hidden;
148 |   text-overflow: ellipsis;
149 | }
150 | .info-box-number {
151 |     color: aliceblue;
152 | 
153 |   display: block;
154 |   font-weight: bold;
155 |   font-size: 18px;
156 | }
157 | </style>


--------------------------------------------------------------------------------
/components/Admin/Chart/BarComponent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="p-5 bgc">
  3 |     <BarChart class="" :chart-data="datacollection" />
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import BarChart from "./BarChart";
  9 | 
 10 | export default {
 11 |   props: {
 12 |     blogs: {
 13 |       required: true,
 14 |     },
 15 |   },
 16 | 
 17 |   components: {
 18 |     BarChart,
 19 |   },
 20 |   data() {
 21 |     return {
 22 |       datacollection: null,
 23 |       january: "Ocak",
 24 |       february: "Şubat",
 25 |       march: "Mart",
 26 |       april: "Nisan",
 27 |       may: "Mayıs",
 28 |       june: "Haziran",
 29 |       july: "Temmuz",
 30 |       august: "Ağustos",
 31 |       september: "Eylül",
 32 |       october: "Ekim",
 33 |       november: "Kasım",
 34 |       december: "Aralık",
 35 |     };
 36 |   },
 37 |   mounted() {
 38 |     this.fillData();
 39 |   },
 40 |   methods: {
 41 |     fillData() {
 42 |       this.datacollection = {
 43 |         labels: [
 44 |           "Ocak",
 45 |           "Şubat",
 46 |           "Mart",
 47 |           "Nisan",
 48 |           "Masyıs",
 49 |           "Haziran",
 50 |           "Temmuz",
 51 |           "Ağustos",
 52 |           "Eylül",
 53 |           "Ekim",
 54 |           "Kasım",
 55 |           "Aralık",
 56 |         ],
 57 |         datasets: [
 58 |           {
 59 |             label: " Blog Sayısı ",
 60 |             backgroundColor: ["#006d77","#83c5be", "#edf6f9","#ffddd2","#e29578", "#457b9d","#3d405b","#e07a5f", "#81b29a","#a5a58d","#ffd166", "#006d77",],
 61 |             borderColor: "#81b29a",
 62 |             borderDash: [5, 5],
 63 |             fill: false,
 64 |             pointRadius: 10,
 65 |             pointHoverRadius: 12,
 66 |             
 67 |             data: [
 68 |               this.januaryLength.length,
 69 |               this.februaryLength.length,
 70 |               this.marchLength.length,
 71 |               this.aprilLength.length,
 72 |               this.mayLength.length,
 73 |               this.juneLength.length,
 74 |               this.julyLength.length,
 75 |               this.augustLength.length,
 76 |               this.septemberLength.length,
 77 |               this.octoberLength.length,
 78 |               this.novemberLength.length,
 79 |               this.decemberLength.length,
 80 |             ],
 81 |           },
 82 |         ],
 83 |         options: {
 84 |           responsive: true,
 85 |           legend: {
 86 |             position: "bottom",
 87 |           },
 88 |           hover: {
 89 |             mode: "index",
 90 |           },
 91 |           
 92 |         },
 93 |       };
 94 |     },
 95 |   },
 96 |   computed: {
 97 | 
 98 |     januaryLength() {
 99 |       return this.blogs.filter((blog) => {
100 |         return blog.date.toLowerCase().includes(this.january.toLowerCase());
101 |       });
102 |     },
103 |     februaryLength() {
104 |       return this.blogs.filter((blog) => {
105 |         return blog.date.toLowerCase().includes(this.february.toLowerCase());
106 |       });
107 |     },
108 |     marchLength() {
109 |       return this.blogs.filter((blog) => {
110 |         return blog.date.toLowerCase().includes(this.march.toLowerCase());
111 |       });
112 |     },
113 |     aprilLength() {
114 |       return this.blogs.filter((blog) => {
115 |         return blog.date.toLowerCase().includes(this.april.toLowerCase());
116 |       });
117 |     },
118 |     mayLength() {
119 |       return this.blogs.filter((blog) => {
120 |         return blog.date.toLowerCase().includes(this.may.toLowerCase());
121 |       });
122 |     },
123 |     juneLength() {
124 |       return this.blogs.filter((blog) => {
125 |         return blog.date.toLowerCase().includes(this.june.toLowerCase());
126 |       });
127 |     },
128 |     julyLength() {
129 |       return this.blogs.filter((blog) => {
130 |         return blog.date.toLowerCase().includes(this.july.toLowerCase());
131 |       });
132 |     },
133 |     augustLength() {
134 |       return this.blogs.filter((blog) => {
135 |         return blog.date.toLowerCase().includes(this.august.toLowerCase());
136 |       });
137 |     },
138 |     septemberLength() {
139 |       return this.blogs.filter((blog) => {
140 |         return blog.date.toLowerCase().includes(this.september.toLowerCase());
141 |       });
142 |     },
143 |     octoberLength() {
144 |       return this.blogs.filter((blog) => {
145 |         return blog.date.toLowerCase().includes(this.october.toLowerCase());
146 |       });
147 |     },
148 |     novemberLength() {
149 |       return this.blogs.filter((blog) => {
150 |         return blog.date.toLowerCase().includes(this.november.toLowerCase());
151 |       });
152 |     },
153 |     decemberLength() {
154 |       return this.blogs.filter((blog) => {
155 |         return blog.date.toLowerCase().includes(this.december.toLowerCase());
156 |       });
157 |     },
158 |   },
159 | };
160 | </script>
161 | 
162 | <style scoped>
163 | .bgc{
164 |   background-color: rgb(38,43,60);
165 | }
166 | </style>
167 | 


--------------------------------------------------------------------------------
/components/Admin/Chart/LineChartComponent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="p-5 bgc">
  3 |     <LineChart class="" :chart-data="datacollection" />
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import LineChart from "./LineChart";
  9 | 
 10 | export default {
 11 |   props: {
 12 |     blogs: {
 13 |       required: true,
 14 |     },
 15 |   },
 16 | 
 17 |   components: {
 18 |     LineChart,
 19 |   },
 20 |   data() {
 21 |     return {
 22 |       datacollection: null,
 23 |       january: "Ocak",
 24 |       february: "Şubat",
 25 |       march: "Mart",
 26 |       april: "Nisan",
 27 |       may: "Mayıs",
 28 |       june: "Haziran",
 29 |       july: "Temmuz",
 30 |       august: "Ağustos",
 31 |       september: "Eylül",
 32 |       october: "Ekim",
 33 |       november: "Kasım",
 34 |       december: "Aralık",
 35 |     };
 36 |   },
 37 |   mounted() {
 38 |     this.fillData();
 39 |   },
 40 |   methods: {
 41 |     fillData() {
 42 |       this.datacollection = {
 43 |         labels: [
 44 |           "Ocak",
 45 |           "Şubat",
 46 |           "Mart",
 47 |           "Nisan",
 48 |           "Masyıs",
 49 |           "Haziran",
 50 |           "Temmuz",
 51 |           "Ağustos",
 52 |           "Eylül",
 53 |           "Ekim",
 54 |           "Kasım",
 55 |           "Aralık",
 56 |         ],
 57 |         datasets: [
 58 |           {
 59 |             label: " Blog Sayısı ",
 60 |             backgroundColor: ["#006d77","#83c5be", "#edf6f9","#ffddd2","#e29578", "#457b9d","#3d405b","#e07a5f", "#81b29a","#a5a58d","#ffd166", "#006d77",],
 61 |             borderColor: "#81b29a",
 62 |             borderDash: [5, 5],
 63 |             fill: false,
 64 |             pointRadius: 10,
 65 |             pointHoverRadius: 12,
 66 |             
 67 |             data: [
 68 |               this.januaryLength.length,
 69 |               this.februaryLength.length,
 70 |               this.marchLength.length,
 71 |               this.aprilLength.length,
 72 |               this.mayLength.length,
 73 |               this.juneLength.length,
 74 |               this.julyLength.length,
 75 |               this.augustLength.length,
 76 |               this.septemberLength.length,
 77 |               this.octoberLength.length,
 78 |               this.novemberLength.length,
 79 |               this.decemberLength.length,
 80 |             ],
 81 |           },
 82 |         ],
 83 |         options: {
 84 |           responsive: true,
 85 |           legend: {
 86 |             display: true,
 87 |           },
 88 |           hover: {
 89 |             mode: "index",
 90 |           },
 91 |           
 92 |         },
 93 |       };
 94 |     },
 95 |   },
 96 |   computed: {
 97 | 
 98 |     januaryLength() {
 99 |       return this.blogs.filter((blog) => {
100 |         return blog.date.toLowerCase().includes(this.january.toLowerCase());
101 |       });
102 |     },
103 |     februaryLength() {
104 |       return this.blogs.filter((blog) => {
105 |         return blog.date.toLowerCase().includes(this.february.toLowerCase());
106 |       });
107 |     },
108 |     marchLength() {
109 |       return this.blogs.filter((blog) => {
110 |         return blog.date.toLowerCase().includes(this.march.toLowerCase());
111 |       });
112 |     },
113 |     aprilLength() {
114 |       return this.blogs.filter((blog) => {
115 |         return blog.date.toLowerCase().includes(this.april.toLowerCase());
116 |       });
117 |     },
118 |     mayLength() {
119 |       return this.blogs.filter((blog) => {
120 |         return blog.date.toLowerCase().includes(this.may.toLowerCase());
121 |       });
122 |     },
123 |     juneLength() {
124 |       return this.blogs.filter((blog) => {
125 |         return blog.date.toLowerCase().includes(this.june.toLowerCase());
126 |       });
127 |     },
128 |     julyLength() {
129 |       return this.blogs.filter((blog) => {
130 |         return blog.date.toLowerCase().includes(this.july.toLowerCase());
131 |       });
132 |     },
133 |     augustLength() {
134 |       return this.blogs.filter((blog) => {
135 |         return blog.date.toLowerCase().includes(this.august.toLowerCase());
136 |       });
137 |     },
138 |     septemberLength() {
139 |       return this.blogs.filter((blog) => {
140 |         return blog.date.toLowerCase().includes(this.september.toLowerCase());
141 |       });
142 |     },
143 |     octoberLength() {
144 |       return this.blogs.filter((blog) => {
145 |         return blog.date.toLowerCase().includes(this.october.toLowerCase());
146 |       });
147 |     },
148 |     novemberLength() {
149 |       return this.blogs.filter((blog) => {
150 |         return blog.date.toLowerCase().includes(this.november.toLowerCase());
151 |       });
152 |     },
153 |     decemberLength() {
154 |       return this.blogs.filter((blog) => {
155 |         return blog.date.toLowerCase().includes(this.december.toLowerCase());
156 |       });
157 |     },
158 |   },
159 | };
160 | </script>
161 | 
162 | <style scoped>
163 | .bgc{
164 |   background-color: rgb(38,43,60);
165 | }
166 | </style>
167 | 


--------------------------------------------------------------------------------
/components/Navigation/DefaultNavigation/NavigationMobile.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="navigation-mobile">
  3 |     <div class="navbar-collapse">
  4 |       <ul class="navbar-nav mr-auto">
  5 |         <router-link tag="li" to="/" class="items col-3">Anasayfa</router-link>
  6 |         <router-link tag="li" to="/Blog" class="items col-3">Blog</router-link>
  7 |         <router-link tag="li" to="/About" class="items col-3">Hakkımda</router-link>
  8 |         <router-link tag="li" to="/Contact" class="items col-3">İletişim</router-link>
  9 |         <router-link tag="li" to="/Category/yazilim" class="items col-3">Yazılım</router-link>
 10 |         <router-link tag="li" to="/Category/teknoloji" class="items col-3">Teknoloji</router-link>
 11 |         <router-link tag="li" to="/Category/tasarim" class="items col-3">Tasarım</router-link>
 12 |       </ul>
 13 |       <div class="exitButton">
 14 |         <router-link tag="i" to class="fas fa-times"></router-link>
 15 |       </div>
 16 |       <div class="backButton">
 17 |         <router-link tag="i" to class="fas fa-sign-out-alt">
 18 |           <span>Geri</span>
 19 |         </router-link>
 20 |       </div>
 21 |       <div class="social-media">
 22 |         <a href="https://www.twitter.com/tahirbattal" target="”_blank”">
 23 |           <i class="fab fa-twitter"></i>
 24 |         </a>
 25 |         <a href="https://www.instagram.com/thrbttl/" target="”_blank”">
 26 |           <i class="fab fa-instagram" aria-hidden="true"></i>
 27 |         </a>
 28 |         <a
 29 |           href="https://www.youtube.com/channel/UCa5aTN2RT4r_iayz4z89f3Q?view_as=subscriber"
 30 |           target="”_blank”"
 31 |         >
 32 |           <i class="fab fa-youtube" aria-hidden="true"></i>
 33 |         </a>
 34 |       </div>
 35 |     </div>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 | export default {};
 41 | </script>
 42 | 
 43 | 
 44 | <style scoped>
 45 | #navigation-mobile {
 46 |   padding: 80px 0 0 0;
 47 |   width: 100%;
 48 | }
 49 | 
 50 | ul {
 51 |   list-style: none;
 52 |   width: 100%;
 53 |   padding-left: 25px;
 54 |   padding-top: 20px;
 55 | }
 56 | 
 57 | .items {
 58 |   color: #fff !important;
 59 |   font-size: 1rem;
 60 |   font-weight: bold;
 61 |   margin-bottom: 20px;
 62 |   cursor: pointer;
 63 | }
 64 | 
 65 | @media only screen and (min-width: 768px) and (max-width: 1024px) {
 66 |   .items {
 67 |     font-size: 1.5rem;
 68 |   }
 69 | }
 70 | @media only screen and (min-width: 426px) and (max-width: 767px) {
 71 |   .items {
 72 |     font-size: 1rem;
 73 |   }
 74 | }
 75 | @media only screen and (min-width: 376px) and (max-width: 425px) {
 76 |   .items {
 77 |     font-size: 1rem;
 78 |   }
 79 | }
 80 | @media only screen and (min-width: 321px) and (max-width: 375px) {
 81 |   .items {
 82 |     font-size: 1rem;
 83 |   }
 84 | }
 85 | @media only screen and (max-width: 320px) {
 86 |   .items {
 87 |     font-size: 1rem;
 88 |   }
 89 | }
 90 | 
 91 | .items:hover {
 92 |   color: rgb(74, 113, 74) !important;
 93 | }
 94 | 
 95 | .social-media {
 96 |   position: absolute;
 97 |   left: 40px;
 98 |   top: 118%;
 99 | }
100 | 
101 | i {
102 |   margin: 0 20px 0 0;
103 |   color: #fff;
104 |   font-size: 2rem;
105 |   cursor: pointer;
106 | }
107 | 
108 | i:hover {
109 |   color: rgb(74, 113, 74) !important;
110 |   /* transform:rotateZ(60deg) !important; */
111 | }
112 | 
113 | .exitButton {
114 |   position: absolute;
115 |   top: 30px;
116 |   left: 40px;
117 | }
118 | .exitButton i {
119 |   color: rgb(0, 34, 34);
120 | }
121 | 
122 | .backButton {
123 |   position: absolute;
124 |   top: 100%;
125 |   left: 40px;
126 | }
127 | 
128 | .backButton i {
129 |   font-size: 4rem;
130 |   color: rgb(255, 255, 255);
131 | }
132 | 
133 | @media only screen and (min-width: 426px) and (max-width: 767px) {
134 |   .backButton i {
135 |     font-size: 3rem;
136 |   }
137 | }
138 | @media only screen and (min-width: 376px) and (max-width: 425px) {
139 |   .backButton i {
140 |     font-size: 2rem;
141 |   }
142 | }
143 | @media only screen and (min-width: 321px) and (max-width: 375px) {
144 |   .backButton i {
145 |     font-size: 2rem;
146 |   }
147 | }
148 | @media only screen and (max-width: 320px) {
149 |   .backButton i {
150 |     font-size: 2rem;
151 |   }
152 | }
153 | 
154 | .backButton span {
155 |   font-size: 2rem;
156 |   font-weight: bolder;
157 |   position: absolute;
158 |   top: 15px;
159 |   left: 80px;
160 | }
161 | 
162 | @media only screen and (min-width: 426px) and (max-width: 767px) {
163 |   .backButton span {
164 |     font-size: 2rem;
165 |     top: 6px;
166 |     left: 60px;
167 |   }
168 | }
169 | @media only screen and (min-width: 376px) and (max-width: 425px) {
170 |   .backButton span {
171 |     font-size: 2rem;
172 |     top: -1px;
173 |     left: 50px;
174 |   }
175 | }
176 | @media only screen and (min-width: 321px) and (max-width: 375px) {
177 |   .backButton span {
178 |     font-size: 2rem;
179 |     top: -1px;
180 |     left: 50px;
181 |   }
182 | }
183 | @media only screen and (max-width: 320px) {
184 |   .backButton span {
185 |     font-size: 2rem;
186 |     top: -2px;
187 |     left: 50px;
188 |   }
189 | }
190 | </style>
191 | 


--------------------------------------------------------------------------------
/components/Blog/BlogDetail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <section class="container col-lg-10">
  4 |       <div class="row">
  5 |         <div class="col-lg-8 blog-main">
  6 |           <div class="d-flex align-items-center font-size-sm pb-2 mb-1">
  7 |             <router-link tag="a" class="blog-entry-meta-link" to="/about">
  8 |               <div class="blog-entry-author-ava">
  9 |                 <img :src="adminData[0].photo" :alt="adminData[0].author" />
 10 |               </div>
 11 |               {{adminData[0].author}}
 12 |             </router-link>
 13 |             <div class="ml-auto pr-2">
 14 |               <span class="date-font pl-3">{{ blog.date }}</span>
 15 |             </div>
 16 |           </div>
 17 |           <hr />
 18 |           <div class="blog-img mb-4 d-flex align-items-center">
 19 |             <img :src="blog.photo" alt="Post" />
 20 |           </div>
 21 |           <hr />
 22 |           <div class="blog-post pb-5">
 23 |             <h2 class="blog-post-title text-capitalize text-info">{{blog.title}}</h2>
 24 |             <p class="text-muted">{{blog.subTitle}}</p>
 25 |             <hr />
 26 | 
 27 |             <div class="text-secondary" id="textArea"></div>
 28 |           </div>
 29 |           <likes :likeBlog="{...blog.likes}" :blogId="blogDetail[0].id" />
 30 |           <!-- /.blog-post -->
 31 |           <hr />
 32 |           <Comments :commentsBlog="{...blog.comments}" :blogId="blogDetail[0].id" />
 33 |           <nav class="blog-pagination">
 34 |             <a
 35 |               v-show="previousBlog[0]"
 36 |               class="btn btn-primary text-white"
 37 |               href="#"
 38 |               @click.prevent="$router.push('/Blog/' + previousBlog[0].id)"
 39 |             >
 40 |               <i class="fas fa-angle-double-left"></i>
 41 |               <span>Önceki</span>
 42 |             </a>
 43 |             <a
 44 |               v-show="nextBlog[0]"
 45 |               class="btn btn-primary text-white"
 46 |               href="#"
 47 |               @click.prevent="$router.push('/Blog/' + nextBlog[0].id)"
 48 |             >
 49 |               <span>Sonraki</span>
 50 |               <i class="fas fa-angle-double-right"></i>
 51 |             </a>
 52 |           </nav>
 53 |         </div>
 54 |         <RightColumn class="col-lg-4" />
 55 |       </div>
 56 |     </section>
 57 |   </div>
 58 | </template>
 59 | 
 60 | <script>
 61 | import RightColumn from "./RightColumn";
 62 | import Likes from "./Likes";
 63 | import Comments from "./Comments";
 64 | 
 65 | export default {
 66 |     head() {
 67 |     let blog = this.blog;
 68 |     return {
 69 |       title: `${blog.title}`,
 70 |       meta: [
 71 |         {
 72 |           hid: `description`,
 73 |           name: "description",
 74 |           content: `${blog.subTitle}`
 75 |         }
 76 |       ]
 77 |     };
 78 |   },
 79 | 
 80 |   components: {
 81 |     RightColumn,
 82 |     Comments,
 83 |     Likes,
 84 |   },
 85 |   props: {
 86 |     blog: {
 87 |       type: Object,
 88 |       required: true,
 89 |     },
 90 |   },
 91 |   computed: {
 92 |     adminData() {
 93 |       return this.$store.getters.getAdminData;
 94 |     },
 95 |     getBlog() {
 96 |       return this.$store.getters.getBlogs;
 97 |     },
 98 |     blogDetail() {
 99 |       let blogId = parseInt(this.blog.indexBlog);
100 |       return this.getBlog.filter((blogs) => {
101 |         return blogs.indexBlog.includes(blogId);
102 |       });
103 |     },
104 | 
105 |     nextBlog() {
106 |       let blogNext = parseInt(this.blog.indexBlog) + 1;
107 |       return this.getBlog.filter((blogs) => {
108 |         return blogs.indexBlog.includes(blogNext);
109 |       });
110 |     },
111 |     previousBlog() {
112 |       let blogPrevious = parseInt(this.blog.indexBlog) - 1;
113 |       return this.getBlog.filter((blogs) => {
114 |         return blogs.indexBlog.includes(blogPrevious);
115 |       });
116 |     },
117 |   },
118 |   mounted: function () {
119 |     this.$nextTick(function blogText() {
120 |       var div = document.createElement("DIV");
121 |       div.innerHTML = this.blog.text;
122 |       document.getElementById("textArea").appendChild(div);
123 |     });
124 |   },
125 | };
126 | </script>
127 | 
128 | <style scoped>
129 | .blog-img {
130 |   width: 100%;
131 |   max-height: 235px;
132 |   overflow: hidden;
133 |   -webkit-box-shadow: -11px 14px 17px -10px rgba(0, 0, 0, 0.75);
134 |   -moz-box-shadow: -11px 14px 17px -10px rgba(0, 0, 0, 0.75);
135 |   box-shadow: -11px 14px 17px -10px rgba(0, 0, 0, 0.75);
136 | }
137 | img {
138 |   width: 100%;
139 |   height: auto;
140 | }
141 | .blog-entry-meta-link {
142 |   display: inline-block;
143 |   color: #7d879c !important;
144 |   font-weight: normal;
145 | }
146 | .blog-entry-meta-link:hover {
147 |   color: #22252b !important;
148 | }
149 | .blog-entry-meta-link > i {
150 |   margin-top: -0.0625rem;
151 |   margin-right: 0.375rem;
152 |   vertical-align: middle;
153 | }
154 | 
155 | .date-font {
156 |   color: #7d879c !important;
157 | }
158 | 
159 | .blog-entry-author-ava {
160 |   display: inline-block;
161 |   width: 3rem !important;
162 |   height: 3rem !important;
163 |   margin-right: 0.5rem;
164 |   padding: 0.125rem;
165 |   border: 1px solid #e3e9ef;
166 |   border-radius: 50%;
167 |   vertical-align: middle;
168 | }
169 | .blog-entry-author-ava > img {
170 |   display: block;
171 |   width: 100%;
172 |   border-radius: 50%;
173 | }
174 | 
175 | a:link {
176 |   color: rgb(255, 162, 0);
177 | }
178 | a:visited {
179 |   color: rgb(17, 128, 0);
180 | }
181 | a:hover {
182 |   color: hotpink;
183 |   text-decoration: none;
184 | }
185 | a:active {
186 |   color: blue;
187 | }
188 | </style>
189 | 
190 | 


--------------------------------------------------------------------------------
/components/Admin/UserList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class>
  3 |     <div class="box box-danger">
  4 |       <div class="box-header with-border">
  5 |         <h3 class="box-title">Latest Members</h3>
  6 | 
  7 |         <div class="box-tools pull-right">
  8 |           <span class="label label-danger">8 New Members</span>
  9 |           <button type="button" class="btn btn-box-tool" data-widget="collapse">
 10 |             <i class="fa fa-minus"></i>
 11 |           </button>
 12 |           <button type="button" class="btn btn-box-tool" data-widget="remove">
 13 |             <i class="fa fa-times"></i>
 14 |           </button>
 15 |         </div>
 16 |       </div>
 17 |       <div class="box-body no-padding">
 18 |         <ul class="users-list clearfix">
 19 |           <li>
 20 |             <img src="../static/image/avatar.png" alt="User Image" />
 21 |             <a class="users-list-name" href="#">Alexander Pierce</a>
 22 |             <span class="users-list-date">Today</span>
 23 |           </li>
 24 |           <li>
 25 |             <img src="../static/image/avatar.png" alt="User Image" />
 26 |             <a class="users-list-name" href="#">Norman</a>
 27 |             <span class="users-list-date">Yesterday</span>
 28 |           </li>
 29 |           <li>
 30 |             <img src="../static/image/avatar.png" alt="User Image" />
 31 |             <a class="users-list-name" href="#">Jane</a>
 32 |             <span class="users-list-date">12 Jan</span>
 33 |           </li>
 34 |           <li>
 35 |             <img src="../static/image/avatar.png" alt="User Image" />
 36 |             <a class="users-list-name" href="#">John</a>
 37 |             <span class="users-list-date">12 Jan</span>
 38 |           </li>
 39 |           <li>
 40 |             <img src="../static/image/avatar.png" alt="User Image" />
 41 |             <a class="users-list-name" href="#">Alexander</a>
 42 |             <span class="users-list-date">13 Jan</span>
 43 |           </li>
 44 |           <li>
 45 |             <img src="../static/image/avatar.png" alt="User Image" />
 46 |             <a class="users-list-name" href="#">Sarah</a>
 47 |             <span class="users-list-date">14 Jan</span>
 48 |           </li>
 49 |           <li>
 50 |             <img src="../static/image/avatar.png" alt="User Image" />
 51 |             <a class="users-list-name" href="#">Nora</a>
 52 |             <span class="users-list-date">15 Jan</span>
 53 |           </li>
 54 |           <li>
 55 |             <img src="../static/image/avatar.png" alt="User Image" />
 56 |             <a class="users-list-name" href="#">Nadia</a>
 57 |             <span class="users-list-date">15 Jan</span>
 58 |           </li>
 59 |         </ul>
 60 |       </div>
 61 |       <div class="box-footer text-center">
 62 |         <a href="javascript:void(0)" class="uppercase">View All Users</a>
 63 |       </div>
 64 |     </div>
 65 |   </div>
 66 | </template>
 67 | 
 68 | <style scoped>
 69 | .box {
 70 |   position: relative;
 71 |   border-radius: 3px;
 72 |   background: #ffffff;
 73 |   border-top: 3px solid #d2d6de;
 74 |   border-top-color: rgb(210, 214, 222);
 75 |   margin-bottom: 20px;
 76 |   width: 100%;
 77 |   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 78 | }
 79 | .box.box-danger {
 80 |   border-top-color: #dd4b39;
 81 | }
 82 | .box-header {
 83 |   color: #444;
 84 |   display: block;
 85 |   padding: 10px;
 86 |   position: relative;
 87 | }
 88 | .with-border {
 89 |   border-bottom: 1px solid #f4f4f4;
 90 | }
 91 | .box-title {
 92 |   display: inline-block;
 93 |   font-size: 18px;
 94 |   margin: 0;
 95 |   line-height: 1;
 96 | }
 97 | .box-header > .box-tools {
 98 |   position: absolute;
 99 |   right: 10px;
100 |   top: 5px;
101 | }
102 | .pull-right {
103 |   float: right;
104 | }
105 | .label {
106 |   display: inline;
107 |   padding: 0.2em 0.6em 0.3em;
108 |   font-size: 75%;
109 |   font-weight: 700;
110 |   line-height: 1;
111 |   color: #fff;
112 |   text-align: center;
113 |   white-space: nowrap;
114 |   vertical-align: baseline;
115 |   border-radius: 0.25em;
116 | }
117 | .label-danger {
118 |   background-color: #dd4b39 !important;
119 |   color: #fff !important;
120 | }
121 | .btn {
122 |   border-radius: 3px;
123 |   -webkit-box-shadow: none;
124 |   box-shadow: none;
125 |   border: 1px solid transparent;
126 | }
127 | .btn-box-tool {
128 |   padding: 5px;
129 |   font-size: 12px;
130 |   background: transparent;
131 |   color: #97a0b3;
132 | }
133 | .no-padding {
134 |   padding: 0 !important;
135 | }
136 | .box-body {
137 |   border-top-left-radius: 0;
138 |   border-top-right-radius: 0;
139 |   border-bottom-right-radius: 3px;
140 |   border-bottom-left-radius: 3px;
141 |   padding: 10px;
142 | }
143 | .users-list {
144 |   list-style: none;
145 |   margin: 0;
146 |   padding: 0;
147 | }
148 | .users-list-name {
149 |   font-weight: 600;
150 |   color: #444;
151 |   overflow: hidden;
152 |   white-space: nowrap;
153 |   text-overflow: ellipsis;
154 |   display: block;
155 | }
156 | 
157 | ul {
158 |   margin-top: 0;
159 |   margin-bottom: 10px;
160 | }
161 | li {
162 |   width: 25%;
163 |   float: left;
164 |   padding: 10px;
165 |   text-align: center;
166 | }
167 | img {
168 |   border-radius: 50%;
169 |   max-width: 100%;
170 |   height: auto;
171 |   vertical-align: middle;
172 |   border: 0;
173 | }
174 | a {
175 |   color: #3c8dbc;
176 |   text-decoration: none;
177 |   background-color: transparent;
178 | }
179 | .users-list-date {
180 |   display: block;
181 |   color: #999;
182 |   font-size: 12px;
183 | }
184 | .box-footer {
185 |   border-top-left-radius: 0;
186 |   border-top-right-radius: 0;
187 |   border-bottom-right-radius: 3px;
188 |   border-bottom-left-radius: 3px;
189 |   border-top: 1px solid #f4f4f4;
190 |   padding: 10px;
191 |   background-color: #fff;
192 | }
193 | .text-center {
194 |   text-align: center;
195 | }
196 | </style>


--------------------------------------------------------------------------------
/components/Common/Contact.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <section class="section bg-light mt-2" >
  4 |       <div class="bg-triangle bg-triangle-dark bg-triangle-top bg-triangle-left"></div>
  5 |       <div class="bg-triangle bg-triangle-dark bg-triangle-bottom bg-triangle-right"></div>
  6 |       <div class="container">
  7 |             <div class="container">
  8 |       <div class="row">
  9 |         <div class="col-md-10">
 10 |           <h3 class="mb-4">
 11 |             Bize <span class="text-primary">ulaşmak</span> için kullanabileceğiniz kanallar.
 12 |           </h3>
 13 |           <p
 14 |             class="text-muted mb-5"
 15 |           >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt nam voluptatum facilis, atque officiis possimus totam placeat maiores at tempore nulla corporis rem aliquid iusto ab, distinctio, nostrum cumque asperiores!</p>
 16 | 
 17 |           <div class="row">
 18 |             <div class="col-md-6 col-lg-5">
 19 |               <h5>Adres:</h5>
 20 | 
 21 |               <p class="text-muted">1234 Atatürk Mahallesi, Ankara, 06060</p>
 22 | 
 23 |               <h5>Email:</h5>
 24 | 
 25 |               <p class="text-muted">
 26 |                 <a href="#">xyz@info.com</a>
 27 |               </p>
 28 |             </div>
 29 |             <div class="col-md-6 col-lg-5 ">
 30 |               <h5>Telefon:</h5>
 31 | 
 32 |               <p class="text-muted">
 33 |                 <a href="#">132-465-78-90</a>
 34 |               </p>
 35 | 
 36 |               <h5>Linkedin:</h5>
 37 | 
 38 |               <p class="text-muted">
 39 |                 <a href="#">www.linkedin.com/</a>
 40 |               </p>
 41 |             </div>
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |     </div>
 46 | 
 47 |       </div>
 48 |     </section>
 49 | 
 50 |     <section class="section">
 51 |       <div class="line line-top"></div>
 52 | 
 53 |       <div class="container">
 54 |         <div class="row justify-content-center">
 55 |           <div class="col-md-8 col-lg-6">
 56 |             <h2 class="text-center mb-4">Neden <span class="text-primary">Bizi</span> Terjih Etmelisiniz?</h2>
 57 | 
 58 |             <p
 59 |               class="text-center text-muted text-left mb-5"
 60 |             >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officiis odio repudiandae illum molestiae.</p>
 61 |           </div>
 62 |         </div>
 63 |         <div class="row">
 64 |           <div class="col-md-4">
 65 |             <div class="text-center mb-5 mb-md-0">
 66 |               <div class="text-primary mb-4">
 67 |                 <i class="far fa-user"></i>
 68 |               </div>
 69 | 
 70 |               <h4 class="mb-3">Profesyonellik</h4>
 71 |               <p
 72 |                 class="text-muted mb-0"
 73 |               >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa, corporis.</p>
 74 |             </div>
 75 |           </div>
 76 |           <div class="col-md-4">
 77 |             <div class="text-center mb-5 mb-md-0">
 78 |               <div class="text-primary mb-4">
 79 |                 <i class="fas fa-shield-alt"></i>
 80 |               </div>
 81 |               <h4 class="mb-3">Güvenlik</h4>
 82 |               <p
 83 |                 class="text-muted mb-0"
 84 |               >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa, corporis.</p>
 85 |             </div>
 86 |           </div>
 87 |           <div class="col-md-4">
 88 |             <div class="text-center">
 89 |               <div class="text-primary mb-4">
 90 |                 <i class="far fa-clock"></i>
 91 |               </div>
 92 |               <h4 class="mb-3">Sorumluluk</h4>
 93 |               <p
 94 |                 class="text-muted mb-0"
 95 |               >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa, corporis.</p>
 96 |             </div>
 97 |           </div>
 98 |         </div>
 99 |       </div>
100 |     </section>
101 |   </div>
102 | </template>
103 | 
104 | <script>
105 | export default {};
106 | </script>
107 | 
108 | <style scoped>
109 | .section {
110 |   position: relative;
111 |   padding-bottom: 7.5rem;
112 |   display: block;
113 |   padding-top: 7.5rem;
114 | }
115 | 
116 | .text-primary {
117 |   color: #4bb4f5 !important;
118 | }
119 | .text-center {
120 |   text-align: center !important;
121 | }
122 | 
123 | .bg-triangle {
124 |   position: absolute;
125 |   left: 0;
126 |   right: 0;
127 |   top: 0;
128 |   bottom: 0;
129 |   background-repeat: no-repeat;
130 |   background-position: left bottom;
131 |   background-size: 100% auto;
132 | }
133 | .bg-triangle-left {
134 |   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><path d='M0 100 V 90 L 10 100 Z' fill='%23212529' fill-opacity='0.03'></path><path d='M0 90 V 80 L 10 90 Z' fill='%23212529' fill-opacity='0.045'></path><path d='M10 100 V 90 L 20 100 Z' fill='%23212529' fill-opacity='0.025'></path><path d='M0 90 H 10 V 100 Z' fill='%23212529' fill-opacity='0.06'></path></svg>");
135 | }
136 | .bg-triangle-right {
137 |   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><path d='M100 100 V 90 L 90 100 Z' fill='%23212529' fill-opacity='0.045'></path><path d='M100 90 V 80 L 90 90 Z' fill='%23212529' fill-opacity='0.015'></path><path d='M90 100 V 90 L 80 100 Z' fill='%23212529' fill-opacity='0.03'></path><path d='M90 100 V 90 H 100 Z' fill='%23212529' fill-opacity='0.06'></path></svg>");
138 | }
139 | .bg-triangle-top {
140 |   -webkit-transform: scaleY(-1);
141 |   transform: scaleY(-1);
142 | }
143 | .section .container {
144 |   position: relative;
145 |   z-index: 1;
146 | }
147 | 
148 | .line-top {
149 |   top: 0;
150 | }
151 | .line {
152 |   position: absolute;
153 |   left: 50%;
154 |   height: 7.5rem;
155 |   border-left: 2px solid #4bb4f5;
156 |   -webkit-transform: translateY(-50%);
157 |   transform: translateY(-50%);
158 | }
159 | i {
160 |   font-size: 3em;
161 | }
162 | 
163 | a{
164 |   text-decoration: none;
165 | }
166 | </style>


--------------------------------------------------------------------------------
/components/Common/Footer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <footer class="container-fluid bg-grey py-5 sticky-bottom">
  3 |     <div class="container">
  4 |       <div class="row">
  5 |         <div class="col-md-7 mb-3">
  6 |           <div class="row">
  7 |             <div class="col-md-8">
  8 |               <div class="logo-part">
  9 |                 <router-link tag="div" to="/">
 10 |                   <img src="../../static/image/logo.png" class="main-logo logo-footer" />
 11 |                 </router-link>
 12 |                 <p class="pr-3 pl-2">
 13 |                   Türkiye - Ankara
 14 |                   <br />Baştan sona NuxtJs ile oluşturulmuş blog sitesi.
 15 |                 </p>
 16 |               </div>
 17 |             </div>
 18 |             <div class="col-md-4 px-4">
 19 |               <h6>Kullanıcı Deneyimi Odaklı Blog</h6>
 20 |               <p>Bir blog sitesinden beklenenleri karşılayabilecek yapıda oluşturulmuş blog projesidir.</p>
 21 |               <router-link tag="a" to="/Contact" class="btn-footer nb-5">İletişim</router-link>
 22 |             </div>
 23 |           </div>
 24 |         </div>
 25 |         <div class="col-md-5">
 26 |           <div class="row">
 27 |             <div class="col-md-4 px-4">
 28 |               <h6 class>Bağlantılar</h6>
 29 |               <div class="row">
 30 |                 <div class="col-md-6">
 31 |                   <ul>
 32 |                     <router-link tag="li" to="/">
 33 |                       <a href="#">Anasayfa</a>
 34 |                     </router-link>
 35 |                     <router-link tag="li" to="/About">
 36 |                       <a href="#">Kakkımda</a>
 37 |                     </router-link>
 38 |                     <router-link tag="li" to="/Blog">
 39 |                       <a href="#">Blog</a>
 40 |                     </router-link>
 41 |                     <router-link tag="li" to="/Contact">
 42 |                       <a href="#">İletişim</a>
 43 |                     </router-link>
 44 |                   </ul>
 45 |                 </div>
 46 |               </div>
 47 |             </div>
 48 |             <div class="col-md-8">
 49 |               <h6>Sosyal Medya</h6>
 50 |               <div class="social">
 51 |                 <a href="https://www.facebook.com">
 52 |                   <i class="fab fa-facebook"></i>
 53 |                 </a>
 54 |                 <a href="https://www.instagram.com">
 55 |                   <i class="fab fa-instagram" aria-hidden="true"></i>
 56 |                 </a>
 57 |                 <a
 58 |                   href="https://www.youtube.com/channel/UCa5aTN2RT4r_iayz4z89f3Q?view_as=subscriber"
 59 |                 >
 60 |                   <i class="fab fa-youtube" aria-hidden="true"></i>
 61 |                 </a>
 62 |               </div>
 63 |               <div class="mt-4">
 64 |                 <p>
 65 |                   &copy; 2020
 66 |                   <a href="https://tahirbattal.com.tr/">Tahir Battal</a>. Web Tasarım Hizmeti
 67 |                 </p>
 68 |                 <router-link class="admin" tag="div" to="/admin">
 69 |                   <i class="fas fa-user-astronaut"> Admin</i>
 70 |                 </router-link>
 71 |               </div>
 72 |             </div>
 73 |           </div>
 74 |         </div>
 75 |       </div>
 76 |     </div>
 77 |   </footer>
 78 | </template>
 79 | 
 80 | <style scoped>
 81 | .bg-grey {
 82 |   background: #292929;
 83 | }
 84 | .logo-footer {
 85 |   margin-bottom: 40px;
 86 | }
 87 | footer {
 88 |   color: grey;
 89 | }
 90 | footer p,
 91 | a {
 92 |   font-size: 12px;
 93 |   font-family: "Roboto", sans-serif;
 94 |   color: grey;
 95 |   text-decoration: none;
 96 | }
 97 | footer h6 {
 98 |   font-family: "Playfair Display", serif;
 99 |   margin-bottom: 40px;
100 |   position: relative;
101 | }
102 | footer h6:after {
103 |   position: absolute;
104 |   content: "";
105 |   background: grey;
106 |   width: 12%;
107 |   height: 1px;
108 |   left: 0;
109 |   bottom: -20px;
110 | }
111 | .btn-footer {
112 |   color: grey;
113 |   text-decoration: none;
114 |   border: 1px solid;
115 |   border-radius: 43px;
116 |   font-size: 13px;
117 |   padding: 7px 30px;
118 |   line-height: 47px;
119 | }
120 | .btn-footer:hover {
121 |   text-decoration: none;
122 | }
123 | .form-footer input[type="text"] {
124 |   border: none;
125 |   border-radius: 16px 0 0 16px;
126 |   outline: none;
127 |   padding-left: 10px;
128 | }
129 | ::placeholder {
130 |   font-size: 10px;
131 |   padding-left: 10px;
132 |   font-style: italic;
133 | }
134 | .form-footer input[type="button"] {
135 |   border: none;
136 |   background: #232323;
137 |   margin-left: -5px;
138 |   color: #fff;
139 |   outline: none;
140 |   border-radius: 0 16px 16px 0;
141 |   padding: 2px 12px;
142 | }
143 | .social .fab {
144 |   color: grey;
145 |   font-size: 22px;
146 |   padding: 10px 15px;
147 |   background: #3c3c3c;
148 | }
149 | .social .fab:hover {
150 |   color: wheat;
151 | }
152 | 
153 | .admin .fas {
154 |   color: grey;
155 |   font-size: 15px;
156 |   padding: 10px 15px;
157 |   background: #3c3c3c;
158 |   cursor: pointer;
159 | }
160 | .admin .fas:hover{
161 |   color: aquamarine;
162 | }
163 | 
164 | footer ul li {
165 |   list-style: none;
166 |   display: block;
167 | }
168 | footer ul {
169 |   padding-left: 0;
170 | }
171 | footer ul li a {
172 |   text-decoration: none;
173 |   color: grey;
174 | }
175 | footer ul li a:hover {
176 |   text-decoration: none;
177 |   color: #f5f5f5 !important;
178 | }
179 | .logo-part {
180 |   border-right: 1px solid grey;
181 |   height: 100%;
182 | }
183 | 
184 | @media only screen and (max-width: 767px) {
185 |   /* XS */
186 |   .logo-part {
187 |     border-right: none;
188 |     margin-bottom: 10%;
189 |   }
190 | }
191 | 
192 | .main-logo {
193 |   height: 60px;
194 |   margin-top: 30px;
195 |   cursor: pointer;
196 | }
197 | 
198 | .admin-logo {
199 |   height: 60px;
200 |   margin-top: 30px;
201 |   cursor: pointer;
202 | }
203 | @media only screen and (max-width: 767px) {
204 |   /* XS */
205 |   .admin-logo {
206 |     height: 25px;
207 |     margin-top: 5px;
208 |   }
209 | }
210 | </style>


--------------------------------------------------------------------------------
/components/Blog/Comments.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class>
  3 |     <div class="be-comment-block">
  4 |       <h1 class="comments-title">Yorumlar ({{getComments.length}})</h1>
  5 |       <div v-for="(item, index) in getComments" :key="index" class="be-comment">
  6 |         <div class="be-comment-content">
  7 |           <span class="be-comment-name text-capitalize">{{item.userName}}</span>
  8 |           <span class="be-comment-time">
  9 |             <i class="fa fa-clock-o"></i>
 10 |             {{item.date}}
 11 |           </span>
 12 |           <p class="be-comment-text">{{item.userComments}}</p>
 13 |         </div>
 14 |       </div>
 15 |       <div
 16 |         v-for="commentState in getCommentsState"
 17 |         :key="commentState.commentId"
 18 |         class="be-comment"
 19 |       >
 20 |         <div class="be-comment-content">
 21 |           <span class="be-comment-name text-capitalize">{{commentState.userName}}</span>
 22 |           <span class="be-comment-time">
 23 |             <i class="fa fa-clock-o"></i>
 24 |             {{commentState.date}}
 25 |           </span>
 26 |           <p class="be-comment-text">{{commentState.userComments}}</p>
 27 |         </div>
 28 |       </div>
 29 |       <div class="border-top">
 30 |         <h6 class="py-3 text-muted">Yorum yapmak için aşağıdaki bilgileri doldurunuz.</h6>
 31 |       </div>
 32 |       <form @submit.prevent="onSubmit" class="form-block">
 33 |         <div class="row">
 34 |           <div class="col-xs-12 col-sm-6">
 35 |             <div class="form-group fl_icon">
 36 |               <div class="icon">
 37 |                 <i class="fa fa-user"></i>
 38 |               </div>
 39 |               <input
 40 |                 v-model="comments.userName"
 41 |                 class="form-input text-capitalize"
 42 |                 type="text"
 43 |                 placeholder="İsim Soyisim"
 44 |                 required
 45 |               />
 46 |             </div>
 47 |           </div>
 48 |           <div class="col-xs-12 col-sm-6 fl_icon">
 49 |             <div class="form-group fl_icon">
 50 |               <div class="icon">
 51 |                 <i class="fa fa-envelope-o"></i>
 52 |               </div>
 53 |               <input
 54 |                 v-model="comments.userEmail"
 55 |                 class="form-input"
 56 |                 type="email"
 57 |                 placeholder="E-Mail Adresiniz"
 58 |                 required
 59 |               />
 60 |             </div>
 61 |           </div>
 62 |           <div class="col-12">
 63 |             <div class="form-group">
 64 |               <textarea
 65 |                 v-model="comments.userComments"
 66 |                 class="form-control"
 67 |                 placeholder="Yorumunuz"
 68 |                 rows="4"
 69 |                 required
 70 |               ></textarea>
 71 |             </div>
 72 |           </div>
 73 |         </div>
 74 |         <div class="d-flex justify-content-end">
 75 |           <button type="submit" class="btn btn-info">Kaydet</button>
 76 |         </div>
 77 |       </form>
 78 |     </div>
 79 |   </div>
 80 | </template>
 81 | 
 82 | <script>
 83 | export default {
 84 |   data() {
 85 |     return {
 86 |       comments: {
 87 |         blogId: this.blogId,
 88 |         userName: null,
 89 |         userEmail: null,
 90 |         userComments: null,
 91 |         date: null,
 92 |       },
 93 |       show: false,
 94 |     };
 95 |   },
 96 |   props: {
 97 |     blogId: {
 98 |       required: true,
 99 |     },
100 |     commentsBlog: {
101 |       required: false,
102 |     },
103 |   },
104 |   methods: {
105 |     onSubmit() {
106 |       this.$store.dispatch("addComments", this.comments).then((res) => {
107 |         this.show = true;
108 |         this.comments = {};
109 |       });
110 |       const options = { year: "numeric", month: "short", day: "numeric" };
111 | 
112 |       this.comments.date = new Date().toLocaleDateString("tr", options);
113 |     },
114 |   },
115 |   computed: {
116 |     getComments() {
117 |       return Object.values(this.commentsBlog);
118 |     },
119 |     getCommentsState() {
120 |       return this.$store.getters.getComments;
121 |     },
122 |   },
123 | };
124 | </script>
125 | 
126 | <style scoped>
127 | .be-comment-block {
128 |   margin-bottom: 50px !important;
129 |   border: 1px solid #edeff2;
130 |   border-radius: 2px;
131 |   padding: 0px;
132 |   border: 1px solid #ffffff;
133 | }
134 | 
135 | .comments-title {
136 |   font-size: 16px;
137 |   color: #262626;
138 |   margin-bottom: 15px;
139 |   font-family: "Conv_helveticaneuecyr-bold";
140 | }
141 | 
142 | .be-img-comment {
143 |   font-size: 50px;
144 | }
145 | 
146 | .be-ava-comment {
147 |   width: 60px;
148 |   height: 60px;
149 |   border-radius: 50%;
150 | }
151 | 
152 | .be-comment-content {
153 |   margin-left: 0px;
154 | }
155 | 
156 | .be-comment-content span {
157 |   display: inline-block;
158 |   width: 49%;
159 |   margin-bottom: 15px;
160 | }
161 | 
162 | .be-comment-name {
163 |   font-size: 23px;
164 |   color: #383b43;
165 |   font-family: "Conv_helveticaneuecyr-bold";
166 | }
167 | 
168 | .be-comment-content a {
169 |   color: #383b43;
170 | }
171 | 
172 | .be-comment-content span {
173 |   display: inline-block;
174 |   width: 49%;
175 |   margin-bottom: 15px;
176 | }
177 | 
178 | .be-comment-time {
179 |   text-align: right;
180 | }
181 | 
182 | .be-comment-time {
183 |   font-size: 11px;
184 |   color: #b4b7c1;
185 | }
186 | 
187 | .be-comment-text {
188 |   font-size: 13px;
189 |   line-height: 18px;
190 |   color: #7a8192;
191 |   display: block;
192 |   background: #f6f6f7;
193 |   border: 1px solid #edeff2;
194 |   padding: 15px 20px 20px 20px;
195 | }
196 | 
197 | .form-group.fl_icon .icon {
198 |   position: absolute;
199 |   top: 1px;
200 |   left: 16px;
201 |   width: 48px;
202 |   height: 48px;
203 |   background: #f6f6f7;
204 |   color: #b5b8c2;
205 |   text-align: center;
206 |   line-height: 50px;
207 |   -webkit-border-top-left-radius: 2px;
208 |   -webkit-border-bottom-left-radius: 2px;
209 |   -moz-border-radius-topleft: 2px;
210 |   -moz-border-radius-bottomleft: 2px;
211 |   border-top-left-radius: 2px;
212 |   border-bottom-left-radius: 2px;
213 | }
214 | 
215 | .form-group .form-input {
216 |   font-size: 13px;
217 |   line-height: 50px;
218 |   font-weight: 400;
219 |   color: #b4b7c1;
220 |   width: 100%;
221 |   height: 50px;
222 |   padding-left: 20px;
223 |   padding-right: 20px;
224 |   border: 1px solid #edeff2;
225 |   border-radius: 3px;
226 | }
227 | 
228 | .form-group.fl_icon .form-input {
229 |   padding-left: 70px;
230 | }
231 | 
232 | .form-group textarea.form-input {
233 |   height: 150px;
234 | }
235 | </style>


--------------------------------------------------------------------------------
/components/Navigation/AdminNavigation/NavigationLeft.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <nav class="navbar">
  4 |       <ul class="navbar-nav">
  5 |         <li class="logo">
  6 |           <router-link tag="a" to="/admin" class="nav-link">
  7 |             <span class="link-text logo-text">
  8 |               Admin
  9 |               <img src="../../../static/image/logo.png" width="30" alt="tahir battal" />
 10 |             </span>
 11 |             <svg
 12 |               aria-hidden="true"
 13 |               focusable="false"
 14 |               data-prefix="fad"
 15 |               data-icon="angle-double-right"
 16 |               role="img"
 17 |               xmlns="http://www.w3.org/2000/svg"
 18 |               viewBox="0 0 448 512"
 19 |               class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
 20 |             >
 21 |               <g class="fa-group">
 22 |                 <path
 23 |                   fill="currentColor"
 24 |                   d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
 25 |                   class="fa-secondary"
 26 |                 />
 27 |                 <path
 28 |                   fill="currentColor"
 29 |                   d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
 30 |                   class="fa-primary"
 31 |                 />
 32 |               </g>
 33 |             </svg>
 34 |           </router-link>
 35 |         </li>
 36 | 
 37 |         <li class="nav-item">
 38 |           <router-link tag="a" :to="'/admin/profile'" class="nav-link">
 39 |             <i class="far fa-address-card"></i>
 40 |             <span class="link-text">Profil</span>
 41 |           </router-link>
 42 |         </li>
 43 | 
 44 |         <li class="nav-item">
 45 |           <router-link tag="a" to="/admin/blog" class="nav-link">
 46 |             <i class="fas fa-pencil-alt"></i>
 47 |             <span class="link-text">Blog</span>
 48 |           </router-link>
 49 |         </li>
 50 | 
 51 |         <li class="nav-item">
 52 |           <router-link tag="a" to="/admin/photos" class="nav-link">
 53 |             <i class="far fa-images"></i>
 54 |             <span class="link-text">Fotoğraflar</span>
 55 |           </router-link>
 56 |         </li>
 57 | 
 58 |         <li class="nav-item">
 59 |           <router-link tag="a" to="/admin/settings" class="nav-link">
 60 |             <i class="fas fa-wrench"></i>
 61 |             <span class="link-text">Ayarlar</span>
 62 |           </router-link>
 63 |         </li>
 64 |         <li class="nav-item">
 65 |           <router-link tag="a" to="/admin/comments" class="nav-link">
 66 |             <i class="far fa-comments"></i>
 67 |             <span class="link-text">Yorumlar</span>
 68 |           </router-link>
 69 |         </li>
 70 |         <li class="nav-item">
 71 |           <router-link tag="a" to="/admin/todos" class="nav-link">
 72 |             <i class="fas fa-list"></i>
 73 |             <span class="link-text">Todo</span>
 74 |           </router-link>
 75 |         </li>
 76 | 
 77 |         <li class="nav-item">
 78 |           <router-link tag="a" to="/" class="nav-link">
 79 |             <i class="fas fa-home"></i>
 80 |             <span class="link-text">Ansayfa</span>
 81 |           </router-link>
 82 |         </li>
 83 |       </ul>
 84 |     </nav>
 85 |   </div>
 86 | </template>
 87 | 
 88 | <script>
 89 | export default {};
 90 | </script>
 91 | 
 92 | <style scoped>
 93 | ::-webkit-scrollbar {
 94 |   width: 0px;
 95 | }
 96 | ::-webkit-s ::-webkit-scrollbar-track {
 97 |   background: rgb(38, 43, 60);
 98 | }
 99 | ::-webkit-scrollbar-corner {
100 |   background: rgb(38, 43, 60);
101 |   color: rgb(38, 43, 60);
102 | }
103 | ::-webkit-scrollbar-thumb {
104 |   background: rgb(38, 43, 60);
105 | }
106 | ::-webkit-scrollbar-thumb:hover {
107 |   background: rgb(38, 43, 60);
108 | }
109 | 
110 | .navbar {
111 |   position: fixed;
112 |   background-color: rgb(38, 43, 60);
113 |   padding: 0;
114 |   transition: width 600ms ease;
115 |   overflow: scroll;
116 |   z-index: 99;
117 | }
118 | 
119 | .navbar-nav {
120 |   list-style: none;
121 |   padding: 0;
122 |   margin: 0;
123 |   display: flex;
124 |   flex-direction: column;
125 |   align-items: center;
126 |   height: 100%;
127 | }
128 | 
129 | .nav-item {
130 |   width: 100%;
131 | }
132 | 
133 | .nav-item:last-child {
134 |   margin-top: auto;
135 | }
136 | 
137 | .nav-link {
138 |   display: flex;
139 |   align-items: center;
140 |   height: 50px;
141 |   color: #358baa;
142 |   text-decoration: none;
143 |   filter: grayscale(100%) opacity(0.7);
144 |   transition: 600ms;
145 | }
146 | 
147 | .nav-link:hover {
148 |   filter: grayscale(0%) opacity(1);
149 |   color: #ffffff;
150 | }
151 | 
152 | .link-text {
153 |   display: none;
154 |   margin-left: 16px;
155 | }
156 | 
157 | .nav-link svg {
158 |   width: 30px;
159 |   min-width: 30px;
160 |   margin: 0 15px;
161 | }
162 | 
163 | .fa-primary {
164 |   color: rgb(235, 235, 235);
165 | }
166 | 
167 | .fa-secondary {
168 |   color: rgb(78, 156, 184);
169 | }
170 | 
171 | .fa-primary,
172 | .fa-secondary {
173 |   transition: 600ms;
174 | }
175 | 
176 | .logo {
177 |   font-weight: bold;
178 |   text-transform: uppercase;
179 |   margin-bottom: 16px;
180 |   padding: 6px 0 6px 0;
181 |   text-align: center;
182 |   color: #ececec;
183 |   background: rgb(38, 43, 60);
184 |   font-size: 24px;
185 |   letter-spacing: 0.3ch;
186 |   width: 100%;
187 | }
188 | .logo svg {
189 |   transform: rotate(0deg);
190 |   transition: 600ms;
191 | }
192 | 
193 | .logo-text {
194 |   display: inline;
195 |   position: absolute;
196 |   left: -999px;
197 |   transition: 600ms;
198 | }
199 | 
200 | .navbar:hover .logo svg {
201 |   transform: rotate(-180deg);
202 | }
203 | 
204 | i {
205 |   display: flex;
206 |   font-size: 20px;
207 |   padding-left: 18px;
208 |   padding-right: 18px;
209 |   color: #8faaab;
210 |   text-decoration: none;
211 |   transition: 600ms;
212 | }
213 | 
214 | @media only screen and (max-width: 992px) {
215 |   .navbar {
216 |     bottom: 0;
217 |     width: 100vw;
218 |     height: 50px;
219 |   }
220 |   .logo {
221 |     display: none;
222 |   }
223 | 
224 |   .navbar-nav {
225 |     flex-direction: row;
226 |   }
227 | 
228 |   .nav-link {
229 |     justify-content: center;
230 |   }
231 |   .nav-item:last-child {
232 |     margin-right: 0;
233 |     margin-left: auto;
234 |   }
235 | }
236 | 
237 | @media only screen and (min-width: 992px) {
238 |   .navbar {
239 |     top: 0;
240 |     width: 59px;
241 |     height: 100vh;
242 |   }
243 | 
244 |   .navbar:hover {
245 |     width: 220px;
246 |   }
247 | 
248 |   .navbar:hover .link-text {
249 |     display: inline;
250 |   }
251 | 
252 |   .navbar:hover .logo svg {
253 |     margin-left: 176px;
254 |   }
255 | 
256 |   .navbar:hover .logo-text {
257 |     left: 0px;
258 |   }
259 | 
260 |   .logo {
261 |     background: rgb(34, 39, 54);
262 |   }
263 | }
264 | </style>


--------------------------------------------------------------------------------
/components/Blog/LeftColum.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <section class>
  4 |       <article v-show="show" class="blog-list border-bottom pb-4 mb-lg-5 ">
  5 |         <div class="left-column">
  6 |           <div class="d-flex align-items-center font-size-sm pt-3 pt-lg-0 pb-2 mb-1">
  7 |             <router-link to="/about" tag="a" class="blog-entry-meta-link">
  8 |               <div class="blog-entry-author-ava">
  9 |                 <img :src="admimData[0].photo" :alt="admimData[0].author" />
 10 |               </div>
 11 |               {{admimData[0].author}}
 12 |             </router-link>
 13 |             <span class="blog-entry-meta-divider"></span>
 14 |             <div class="font-size-sm mb-2">
 15 |               <a
 16 |                 class="blog-entry-meta-link text-nowrap"
 17 |                 href="#"
 18 |                 @click.prevent="$router.push('/Blog/' + blog.id)"
 19 |               >
 20 |                 <i class="far fa-comment-dots"></i>
 21 |                 {{getComments.length}}
 22 |               </a>
 23 |             </div>
 24 |           </div>
 25 |           <h2 class="h5 blog-entry-title text-capitalize">
 26 |             <a href="#" @click.prevent="$router.push('/Blog/' + blog.id)">{{blog.title}}</a>
 27 |           </h2>
 28 |           <hr />
 29 |           <p class="font-size-sm">{{blog.subTitle}}</p>
 30 |           <a
 31 |             href="#"
 32 |             @click.prevent="$router.push('/Blog/' + blog.id)"
 33 |             class="blog-entry-meta-link font-weight-medium"
 34 |           >Devamı ...</a>
 35 |           <div v-show="authenticated" class="row my-md-4 my-3">
 36 |             <button
 37 |               class="btn btn-info col-4 ml-3"
 38 |               @click.prevent="$router.push('/Admin/Blog/' + blog.id)"
 39 |             >Düzenle</button>
 40 |             <button class="btn btn-danger col-4 ml-auto mr-5" @click.prevent="deleteBlog">Sil</button>
 41 |             <span
 42 |               v-show="this.deleted"
 43 |               class="badge badge-pill badge-danger py-2 px-5 mt-3"
 44 |             >Blog Yazısı Siliniyor...</span>
 45 |           </div>
 46 |         </div>
 47 |         <div class="right-column">
 48 |           <div class="d-flex justify-content-end pt-1 pr-3 mb-1">
 49 |             <span class="date-font pl-3">{{ blog.date}}</span>
 50 |           </div>
 51 |           <a
 52 |             class="blog-entry-thumb mb-3"
 53 |             @click.prevent="$router.push('/Blog/' + blog.id)"
 54 |             href="#"
 55 |           >
 56 |             <img class="shadow" :src="blog.photo" :alt="blog.title" />
 57 |           </a>
 58 |           <div class="d-flex justify-content-end pt-1 mb-1">
 59 |             <div
 60 |               v-for="categori in blog.categories"
 61 |               :key="categori.index"
 62 |               class="font-size-sm text-muted pr-2 mb-2"
 63 |             >
 64 |               <router-link
 65 |                 tag="a"
 66 |                 :to="'/Category/' + categori"
 67 |                 class="blog-entry-meta-link border-top border-bottom px-2 text-capitalize"
 68 |               >{{ categori }}</router-link>
 69 |             </div>
 70 |           </div>
 71 |         </div>
 72 |       </article>
 73 |     </section>
 74 |   </div>
 75 | </template>
 76 | 
 77 | <script>
 78 | export default {
 79 |   data() {
 80 |     return {
 81 |       deleted: false,
 82 |       show: true,
 83 |     };
 84 |   },
 85 |   props: {
 86 |     blog: {
 87 |       type: Object,
 88 |       required: false,
 89 |     },
 90 |     blogComments: {
 91 |       required: false,
 92 |     },
 93 |   },
 94 |   methods: {
 95 |     deleteBlog() {
 96 |       this.$store.dispatch("deleteBlog", this.blog).then((res) => {
 97 |         this.deleted = true;
 98 |         setTimeout(() => {
 99 |           this.show = false;
100 |           this.$router.push("/admin/Blog");
101 |         }, 1000);
102 |       });
103 |     },
104 |   },
105 | 
106 |   computed: {
107 |     authenticated() {
108 |       return this.$store.getters.getAuthKey;
109 |     },
110 |     admimData() {
111 |       return this.$store.getters.getAdminData;
112 |     },
113 |     getComments() {
114 |       return Object.values(this.blogComments);
115 |     },
116 |   },
117 | };
118 | </script>
119 | 
120 | <style scoped>
121 | 
122 | 
123 | img {
124 |   max-width: 100%;
125 |   height: auto;
126 |   vertical-align: middle;
127 |   border-radius: 20px;
128 | }
129 | 
130 | @media (min-width: 768px) {
131 |   .blog-list {
132 |     display: -ms-flexbox;
133 |     display: flex;
134 |   }
135 | }
136 | @media (min-width: 768px) {
137 |   .blog-list .left-column {
138 |     width: 37%;
139 |     padding-right: 15px;
140 |   }
141 | }
142 | @media (min-width: 768px) {
143 |   .blog-list .right-column {
144 |     width: 63%;
145 |     padding-left: 15px;
146 |   }
147 | }
148 | 
149 | .font-size-sm {
150 |   font-size: 0.875rem !important;
151 | }
152 | .blog-entry-meta-link {
153 |   display: inline-block;
154 |   color: #7d879c !important;
155 |   font-weight: normal;
156 | }
157 | .blog-entry-meta-link:hover {
158 |   color: #22252b !important;
159 | }
160 | .blog-entry-meta-link > i {
161 |   margin-top: -0.0625rem;
162 |   margin-right: 0.375rem;
163 |   vertical-align: middle;
164 | }
165 | .blog-entry-author-ava {
166 |   display: inline-block;
167 |   width: 2rem !important;
168 |   height: 2rem !important;
169 |   margin-right: 0.5rem;
170 |   padding: 0.125rem;
171 |   border: 1px solid #e3e9ef;
172 |   border-radius: 50%;
173 |   vertical-align: middle;
174 | }
175 | .blog-entry-author-ava > img {
176 |   display: block;
177 |   width: 100%;
178 |   border-radius: 50%;
179 | }
180 | .blog-entry-meta-divider {
181 |   display: inline-block;
182 |   width: 1px;
183 |   height: 1rem;
184 |   margin: 0 1rem;
185 |   background-color: #d9e1e9;
186 |   vertical-align: middle;
187 | }
188 | .blog-entry-thumb {
189 |   display: block;
190 |   position: relative;
191 | }
192 | .text-nowrap {
193 |   white-space: nowrap !important;
194 | }
195 | .pagination .page-link {
196 |   border-radius: 0.3125rem;
197 |   font-size: 0.9375rem;
198 | }
199 | .page-item {
200 |   margin: 0.15rem;
201 | }
202 | 
203 | .page-item:last-child .page-link {
204 |   border-top-right-radius: 0.3125rem;
205 |   border-bottom-right-radius: 0.3125rem;
206 | }
207 | .page-item:first-child .page-link {
208 |   margin-left: 0;
209 |   border-top-left-radius: 0.3125rem;
210 |   border-bottom-left-radius: 0.3125rem;
211 | }
212 | .page-link {
213 |   position: relative;
214 |   transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out;
215 |   position: relative;
216 |   display: block;
217 |   padding: 0.375rem 0.75rem;
218 |   margin-left: -1px;
219 |   line-height: 1.25;
220 |   color: #4b566b;
221 |   background-color: rgba(0, 0, 0, 0);
222 |   border: 1px solid rgba(0, 0, 0, 0);
223 | }
224 | 
225 | .page-link:focus {
226 |   z-index: 3;
227 |   outline: 0;
228 |   box-shadow: 0 0 0 0 rgba(254, 105, 106, 0.25);
229 | }
230 | .page-link:hover {
231 |   z-index: 2;
232 |   color: #4b566b;
233 |   text-decoration: none;
234 |   background-color: #f3f5f9;
235 |   border-color: #f3f5f9;
236 | }
237 | 
238 | .page-link > i {
239 |   margin-top: -0.125rem;
240 |   vertical-align: middle;
241 | }
242 | 
243 | a {
244 |   transition: color 0.25s ease-in-out;
245 |   color: #457b9d;
246 |   text-decoration: none;
247 |   background-color: transparent;
248 |   line-height: 1.3;
249 | }
250 | a:hover {
251 |   color: #7e7e7e;
252 |   text-decoration: none;
253 | }
254 | 
255 | .date-font {
256 |   font-size: 11px;
257 |   color: #333b4db3;
258 | }
259 | </style>
260 | 


--------------------------------------------------------------------------------
/components/Blog/RightColumn.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <aside class>
  4 |       <div class="cz-sidebar border-left ml-lg-auto d-none d-lg-block" id="blog-sidebar">
  5 |         <div class="cz-sidebar-body py-lg-1">
  6 |           <div class="widget widget-links mb-grid-gutter pb-grid-gutter border-bottom">
  7 |             <h3 class="widget-title">Blog categories</h3>
  8 |             <ul class="widget-list">
  9 |               <router-link :to="'/Category/yazilim'" tag="li" class="widget-list-item">
 10 |                 <div class="widget-list-link d-flex justify-content-between align-items-center">
 11 |                   <span>Yazılım</span>
 12 |                   <span class="font-size-xs text-muted ml-3">{{ category1Length.length }}</span>
 13 |                 </div>
 14 |               </router-link>
 15 |               <router-link :to="'/Category/teknoloji'" tag="li" class="widget-list-item">
 16 |                 <div
 17 |                   class="widget-list-link d-flex justify-content-between align-items-center"
 18 |                   href="#"
 19 |                 >
 20 |                   <span>Teknoloji</span>
 21 |                   <span class="font-size-xs text-muted ml-3">{{ category2Length.length }}</span>
 22 |                 </div>
 23 |               </router-link>
 24 |               <router-link :to="'/Category/tasarim'" tag="li" class="widget-list-item">
 25 |                 <div
 26 |                   class="widget-list-link d-flex justify-content-between align-items-center"
 27 |                   href="#"
 28 |                 >
 29 |                   <span>Tasarım</span>
 30 |                   <span class="font-size-xs text-muted ml-3">{{ category3Length.length }}</span>
 31 |                 </div>
 32 |               </router-link>
 33 |               <router-link :to="'/blog'" tag="li" class="widget-list-item">
 34 |                 <div class="widget-list-link d-flex justify-content-between align-items-center">
 35 |                   <span>Toplam Blog</span>
 36 |                   <span class="font-size-xs text-muted ml-3">{{ getBlog.length }}</span>
 37 |                 </div>
 38 |               </router-link>
 39 |             </ul>
 40 |           </div>
 41 |           <div v-show="category" class="widget mb-grid-gutter pb-grid-gutter border-bottom">
 42 |             <h3 class="widget-title text-capitalize">{{category}} yazıları</h3>
 43 |             <div
 44 |               v-for="categoryBlog in filteredCategoryBlog"
 45 |               :key="categoryBlog.id"
 46 |               class="media align-items-center mb-3"
 47 |             >
 48 |               <a href="#">
 49 |                 <img class="rounded" :src="categoryBlog.photo" :alt="categoryBlog.title" width="64" />
 50 |               </a>
 51 |               <div class="media-body pl-3">
 52 |                 <h6 class="blog-entry-title font-size-sm mb-0 text-capitalize">
 53 |                   <a
 54 |                     href="#"
 55 |                     @click.prevent="$router.push('/Blog/' + categoryBlog.id)"
 56 |                   >{{categoryBlog.title}}</a>
 57 |                 </h6>
 58 |                 <span class="font-size-ms text-muted">
 59 |                   by
 60 |                   <a href="#" class="blog-entry-meta-link">{{admimData[0].author}}</a>
 61 |                 </span>
 62 |               </div>
 63 |             </div>
 64 |           </div>
 65 |           <div class="widget mb-grid-gutter pb-grid-gutter border-bottom">
 66 |             <h3 class="widget-title">Rastgele Yazı</h3>
 67 |             <div
 68 |               v-for="blog in filteredBlog"
 69 |               :key="blog.id"
 70 |               class="media align-items-center mb-3"
 71 |             >
 72 |               <a href="#">
 73 |                 <img class="rounded" :src="blog.photo" :alt="blog.title" width="64" />
 74 |               </a>
 75 |               <div class="media-body pl-3">
 76 |                 <h6 class="blog-entry-title font-size-sm mb-0 text-capitalize">
 77 |                   <a href="#" @click.prevent="$router.push('/Blog/' + blog.id)">{{blog.title}}</a>
 78 |                 </h6>
 79 |                 <span class="font-size-ms text-muted">
 80 |                   by
 81 |                   <a href="#" class="blog-entry-meta-link">{{admimData[0].author}}</a>
 82 |                 </span>
 83 |               </div>
 84 |             </div>
 85 |           </div>
 86 |         </div>
 87 |       </div>
 88 |     </aside>
 89 |   </div>
 90 | </template>
 91 | 
 92 | <script>
 93 | export default {
 94 |   data() {
 95 |     return {
 96 |       category1: "yazilim",
 97 |       category2: "teknoloji",
 98 |       category3: "tasarim",
 99 |     };
100 |   },
101 |   props: {
102 |     category: {
103 |       required: false,
104 |     },
105 |   },
106 |   computed: {
107 |     getBlog() {
108 |       return this.$store.getters.getBlogs;
109 |     },
110 |     filteredBlog() {
111 |       const randomNumb = Math.floor(Math.random() * (this.getBlog.length - 2));
112 | 
113 |       if (this.getBlog.length == 3) {
114 |         return this.getBlog.slice(0, 3);
115 |       }
116 |       return this.getBlog.slice(randomNumb, randomNumb + 3);
117 |     },
118 |     categoryBlog() {
119 |       return this.getBlog.filter((blog) => {
120 |         return blog.categories.includes(this.category);
121 |       });
122 |     },
123 |     filteredCategoryBlog() {
124 |       const randomNumb = Math.floor(
125 |         Math.random() * (this.categoryBlog.length - 2)
126 |       );
127 | 
128 |       if (this.categoryBlog.length < 3) {
129 |         return this.categoryBlog;
130 |       }
131 |       return this.categoryBlog.slice(randomNumb, randomNumb + 3);
132 |     },
133 |     admimData() {
134 |       return this.$store.getters.getAdminData;
135 |     },
136 | 
137 |     category1Length() {
138 |       return this.getBlog.filter((blog) => {
139 |         return blog.categories.includes(this.category1.toLowerCase());
140 |       });
141 |     },
142 |     category2Length() {
143 |       return this.getBlog.filter((blog) => {
144 |         return blog.categories.includes(this.category2.toLowerCase());
145 |       });
146 |     },
147 |     category3Length() {
148 |       return this.getBlog.filter((blog) => {
149 |         return blog.categories.includes(this.category3.toLowerCase());
150 |       });
151 |     },
152 |   },
153 | };
154 | </script>
155 | 
156 | <style scoped>
157 | .cz-sidebar {
158 |   width: 100%;
159 |   max-width: 22rem;
160 |   background-color: #fff;
161 | }
162 | 
163 | .cz-sidebar-body {
164 |   padding: 1.875rem 1.875rem;
165 | }
166 | 
167 | .border-left {
168 |   border-left: 1px solid #e3e9ef !important;
169 | }
170 | .widget-list {
171 |   margin: 0;
172 |   padding: 0;
173 |   list-style: none;
174 | }
175 | .widget-list-item {
176 |   margin-bottom: 0.375rem;
177 |   cursor: pointer;
178 | }
179 | .widget-list-link {
180 |   display: block;
181 |   transition: color 0.25s ease-in-out;
182 |   color: #4b566b;
183 |   font-size: 0.875rem;
184 |   font-weight: normal;
185 | }
186 | .widget-title {
187 |   margin-bottom: 1.125rem;
188 |   font-size: 1.0625rem;
189 |   font-weight: 500;
190 | }
191 | .mb-grid-gutter {
192 |   margin-bottom: 30px !important;
193 | }
194 | .pb-grid-gutter {
195 |   padding-bottom: 30px !important;
196 | }
197 | .blog-entry-title > a {
198 |   color: #373f50;
199 |   text-decoration: none !important;
200 |   line-height: 1.3;
201 | }
202 | .blog-entry-title > a:hover {
203 |   color: #7e7e7e;
204 | }
205 | .blog-entry-meta-link {
206 |   display: inline-block;
207 |   color: #7d879c !important;
208 |   font-weight: normal;
209 | }
210 | .blog-entry-meta-link:hover {
211 |   color: #22252b !important;
212 | }
213 | .blog-entry-meta-link > i {
214 |   margin-top: -0.0625rem;
215 |   margin-right: 0.375rem;
216 |   vertical-align: middle;
217 | }
218 | .blog-entry-meta-link {
219 |   display: inline-block;
220 |   color: #7d879c !important;
221 |   font-weight: normal;
222 | }
223 | .blog-entry-meta-link:hover {
224 |   color: #22252b !important;
225 | }
226 | a {
227 |   transition: color 0.25s ease-in-out;
228 |   color: #fe696a;
229 |   text-decoration: none;
230 |   background-color: transparent;
231 | }
232 | a:hover {
233 |   color: #290d0e;
234 |   text-decoration: none;
235 | }
236 | </style>
237 | 


--------------------------------------------------------------------------------
/components/Common/About.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <section class="section section-top">
  4 |       <div class="container">
  5 |         <div class="row justify-content-center">
  6 |           <div class="col-12 col-md-8 pt-5">
  7 |             <h1 class="mb-4 text-center animate">Yaratıcı ve benzersiz bir blog sistemi</h1>
  8 |             <p
  9 |               class="mb-6 text-center text-muted animate"
 10 |             >DENEME Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor voluptas harum aperiam minus corporis, nesciunt nobis quaerat voluptatumunt qui similique.</p>
 11 |           </div>
 12 |         </div>
 13 |         <div class="row form-row align-items-center">
 14 |           <div class="col-3">
 15 |             <div class="img-square">
 16 |               <img class="img-cover" alt="..." src="../../static/image/a1-min.jpg"/>
 17 |             </div>
 18 |           </div>
 19 |           <div class="col-6">
 20 |             <div class="row form-row align-items-end mb-2">
 21 |               <div class="col-7">
 22 |                 <div class="img-square">
 23 |                   <img src="../../static/image/a4-min.jpg" alt="..." class="img-cover" />
 24 |                 </div>
 25 |               </div>
 26 |               <div class="col-5">
 27 |                 <div class="img-square">
 28 |                   <img src="../../static/image/a3-min.jpg" alt="..." class="img-cover" />
 29 |                 </div>
 30 |               </div>
 31 |             </div>
 32 |             <div class="row form-row">
 33 |               <div class="col-5">
 34 |                 <div class="img-square">
 35 |                   <img src="../../static/image/a2-min.jpg" alt="..." class="img-cover" />
 36 |                 </div>
 37 |               </div>
 38 |               <div class="col-7">
 39 |                 <div class="img-square">
 40 |                   <img src="../../static/image/a5-min.jpg" alt="..." class="img-cover" />
 41 |                 </div>
 42 |               </div>
 43 |             </div>
 44 |           </div>
 45 |           <div class="col-3">
 46 |             <div class="img-square">
 47 |               <img src="../../static/image/a6-min.jpg" alt="..." class="img-cover" />
 48 |             </div>
 49 |           </div>
 50 |         </div>
 51 |       </div>
 52 |     </section>
 53 |     <section class="section bg-light" id="about">
 54 |       <div class="bg-triangle bg-triangle-dark bg-triangle-top bg-triangle-left"></div>
 55 |       <div class="bg-triangle bg-triangle-dark bg-triangle-bottom bg-triangle-right"></div>
 56 |       <div class="container">
 57 |         <div class="row">
 58 |           <div class="col-md-8 col-lg-6">
 59 |             <h2 class="mb-4">
 60 |               Tasarımlarıyla fark yaratan <span class="text-primary">benzersiz</span> tasarımlar.
 61 |             </h2>
 62 |           </div>
 63 |         </div>
 64 |         <div class="row">
 65 |           <div class="col-md-12">
 66 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem libero adipisci odit, iure quibusdam veniam eius perferendis numquam cumque repudiandae, quisquam veritatis mollitia. Molestiae ipsa porro, id enim deleniti aspernatur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, quos. Rerum eos voluptatibus asperiores magni? Minima perferendis ducimus laudantium ut dicta quo architecto, veniam vel, maiores, nostrum quis ex commodi.</p>
 67 |           </div>
 68 |         </div>
 69 |       </div>
 70 |     </section>
 71 |     <section class="section">
 72 |       <div class="line line-top"></div>
 73 |       <div class="container">
 74 |         <div class="row justify-content-center">
 75 |           <div class="col-md-8 col-lg-6">
 76 |             <h2 class="text-center mb-4">
 77 |               Neden
 78 |               <span class="text-primary">Bizi</span> Terjih Etmelisiniz?
 79 |             </h2>
 80 |             <p
 81 |               class="text-center text-muted text-left mb-5"
 82 |             >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officiis odio repudiandae illum molestiae.</p>
 83 |           </div>
 84 |         </div>
 85 |         <div class="row">
 86 |           <div class="col-md-4">
 87 |             <div class="text-center mb-5 mb-md-0">
 88 |               <div class="text-primary mb-4">
 89 |                 <i class="far fa-user"></i>
 90 |               </div>
 91 |               <h4 class="mb-3">Profesyonellik</h4>
 92 |               <p
 93 |                 class="text-muted mb-0"
 94 |               >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa, corporis.</p>
 95 |             </div>
 96 |           </div>
 97 |           <div class="col-md-4">
 98 |             <div class="text-center mb-5 mb-md-0">
 99 |               <div class="text-primary mb-4">
100 |                 <i class="fas fa-shield-alt"></i>
101 |               </div>
102 |               <h4 class="mb-3">Güvenlik</h4>
103 |               <p
104 |                 class="text-muted mb-0"
105 |               >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa, corporis.</p>
106 |             </div>
107 |           </div>
108 |           <div class="col-md-4">
109 |             <div class="text-center">
110 |               <div class="text-primary mb-4">
111 |                 <i class="far fa-clock"></i>
112 |               </div>
113 |               <h4 class="mb-3">Sorumluluk</h4>
114 |               <p
115 |                 class="text-muted mb-0"
116 |               >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa, corporis.</p>
117 |             </div>
118 |           </div>
119 |         </div>
120 |       </div>
121 |     </section>
122 |   </div>
123 | </template>
124 | 
125 | <script>
126 | export default {};
127 | </script>
128 | 
129 | <style scoped>
130 | .section {
131 |   position: relative;
132 |   padding-bottom: 7.5rem;
133 |   display: block;
134 |   padding-top: 7.5rem;
135 | }
136 | 
137 | .section-top {
138 |   padding-top: 20px;
139 |   margin-top: 0px;
140 | }
141 | 
142 | .text-primary {
143 |   color: #4bb4f5 !important;
144 | }
145 | .text-center {
146 |   text-align: center !important;
147 | }
148 | .img-square {
149 |   position: relative;
150 |   padding-bottom: 100%;
151 | }
152 | 
153 | .img-square .img-cover {
154 |   position: absolute;
155 | }
156 | .img-cover {
157 |   width: 100%;
158 |   height: 100%;
159 |   -o-object-fit: cover;
160 |   object-fit: cover;
161 | }
162 | img {
163 |   vertical-align: middle;
164 |   border-style: none;
165 | }
166 | 
167 | .bg-triangle {
168 |   position: absolute;
169 |   left: 0;
170 |   right: 0;
171 |   top: 0;
172 |   bottom: 0;
173 |   background-repeat: no-repeat;
174 |   background-position: left bottom;
175 |   background-size: 100% auto;
176 | }
177 | .bg-triangle-left {
178 |   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><path d='M0 100 V 90 L 10 100 Z' fill='%23212529' fill-opacity='0.03'></path><path d='M0 90 V 80 L 10 90 Z' fill='%23212529' fill-opacity='0.045'></path><path d='M10 100 V 90 L 20 100 Z' fill='%23212529' fill-opacity='0.025'></path><path d='M0 90 H 10 V 100 Z' fill='%23212529' fill-opacity='0.06'></path></svg>");
179 | }
180 | .bg-triangle-right {
181 |   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><path d='M100 100 V 90 L 90 100 Z' fill='%23212529' fill-opacity='0.045'></path><path d='M100 90 V 80 L 90 90 Z' fill='%23212529' fill-opacity='0.015'></path><path d='M90 100 V 90 L 80 100 Z' fill='%23212529' fill-opacity='0.03'></path><path d='M90 100 V 90 H 100 Z' fill='%23212529' fill-opacity='0.06'></path></svg>");
182 | }
183 | .bg-triangle-top {
184 |   -webkit-transform: scaleY(-1);
185 |   transform: scaleY(-1);
186 | }
187 | .section .container {
188 |   position: relative;
189 |   z-index: 1;
190 | }
191 | 
192 | .line-top {
193 |   top: 0;
194 | }
195 | .line {
196 |   position: absolute;
197 |   left: 50%;
198 |   height: 7.5rem;
199 |   border-left: 2px solid #4bb4f5;
200 |   -webkit-transform: translateY(-50%);
201 |   transform: translateY(-50%);
202 | }
203 | i {
204 |   font-size: 3em;
205 | }
206 | </style>
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 | <template name="component-name">
  2 |   <div class="font pb-5">
  3 |     <legend class="col-md-12 d-flex flex-wrap justify-content-center text-info">
  4 |       <b>Yeni Blog Yazısı</b>
  5 |     </legend>
  6 |     <div class="col-md-12 text-info">
  7 |       <span class="text-success d-flex justify-content-center">Kapak Fotoğrafı</span>
  8 |       <span class="text-warning">
  9 |         <PhotoUpload @photoUp="savePhoto($event)" />
 10 |       </span>
 11 |     </div>
 12 |     <div class="pb-5 d-flex flex-wrap justify-content-center">
 13 |       <form class="col-12" @submit.prevent="onSubmit">
 14 |         <fieldset class="text-info">
 15 |           <div class="form-group">
 16 |             <input
 17 |               v-model="blog.title"
 18 |               type="text"
 19 |               class="form-control"
 20 |               placeholder="Yazının baslıgını giriniz.."
 21 |               maxlength="70"
 22 |               required
 23 |             />
 24 |           </div>
 25 | 
 26 |           <div class="form-group">
 27 |             <textarea
 28 |               v-model="blog.subTitle"
 29 |               class="form-control border"
 30 |               rows="3"
 31 |               maxlength="170"
 32 |               placeholder="Yazının alt başlıgını giriniz.."
 33 |               required
 34 |             ></textarea>
 35 |           </div>
 36 |           <div class="row">
 37 |             <div class="col-12">
 38 |               <div class="bg-white p-3 tool">
 39 |                 <button @click.prevent="execCmd('bold')" class="btn btn-white text-info">
 40 |                   <i class="fa fa-bold"></i>
 41 |                 </button>
 42 |                 <button @click.prevent="execCmd('italic')" class="btn btn-white text-info">
 43 |                   <i class="fa fa-italic"></i>
 44 |                 </button>
 45 |                 <button @click.prevent="execCmd('underline')" class="btn btn-white text-info">
 46 |                   <i class="fa fa-underline"></i>
 47 |                 </button>
 48 |                 <button @click.prevent="execCmd('strikeThrough')" class="btn btn-white text-info">
 49 |                   <i class="fa fa-strikethrough"></i>
 50 |                 </button>
 51 |                 <button @click.prevent="execCmd('justifyLeft')" class="btn btn-white text-info">
 52 |                   <i class="fa fa-align-left"></i>
 53 |                 </button>
 54 |                 <button @click.prevent="execCmd('justifyCenter')" class="btn btn-white text-info">
 55 |                   <i class="fa fa-align-center"></i>
 56 |                 </button>
 57 |                 <button @click.prevent="execCmd('justifyRight')" class="btn btn-white text-info">
 58 |                   <i class="fa fa-align-right"></i>
 59 |                 </button>
 60 |                 <button @click.prevent="execCmd('justifyFull')" class="btn btn-white text-info">
 61 |                   <i class="fa fa-align-justify"></i>
 62 |                 </button>
 63 |                 <button @click.prevent="execCmd('cut')" class="btn btn-white text-info">
 64 |                   <i class="fa fa-cut"></i>
 65 |                 </button>
 66 |                 <button @click.prevent="execCmd('copy')" class="btn btn-white text-info">
 67 |                   <i class="fa fa-copy"></i>
 68 |                 </button>
 69 |                 <button @click.prevent="execCmd('indent')" class="btn btn-white text-info">
 70 |                   <i class="fa fa-indent"></i>
 71 |                 </button>
 72 |                 <button @click.prevent="execCmd('outdent')" class="btn btn-white text-info">
 73 |                   <i class="fa fa-dedent"></i>
 74 |                 </button>
 75 |                 <button @click.prevent="execCmd('subscript')" class="btn btn-white text-info">
 76 |                   <i class="fa fa-subscript"></i>
 77 |                 </button>
 78 |                 <button @click.prevent="execCmd('superscript')" class="btn btn-white text-info">
 79 |                   <i class="fa fa-superscript"></i>
 80 |                 </button>
 81 |                 <button @click.prevent="execCmd('undo')" class="btn btn-white text-info">
 82 |                   <i class="fa fa-undo"></i>
 83 |                 </button>
 84 |                 <button @click.prevent="execCmd('redo')" class="btn btn-white text-info">
 85 |                   <i class="fa fa-repeat"></i>
 86 |                 </button>
 87 |                 <button
 88 |                   @click.prevent="execCmd('insertUnorderedList')"
 89 |                   class="btn btn-white text-info"
 90 |                 >
 91 |                   <i class="fa fa-list-ul"></i>
 92 |                 </button>
 93 |                 <button
 94 |                   @click.prevent="execCmd('insertOrderedList')"
 95 |                   class="btn btn-white text-info"
 96 |                 >
 97 |                   <i class="fa fa-list-ol"></i>
 98 |                 </button>
 99 |                 <button @click.prevent="execCmd('insertParagraph')" class="btn btn-white text-info">
100 |                   <i class="fa fa-paragraph"></i>
101 |                 </button>
102 |                 <select
103 |                   @change="execCommandWithArg('formatBlock', $event)"
104 |                   class="btn btn-white text-info"
105 |                 >
106 |                   <option value="H1">H1</option>
107 |                   <option value="H2">H2</option>
108 |                   <option value="H3">H3</option>
109 |                   <option value="H4">H4</option>
110 |                   <option value="H5">H5</option>
111 |                   <option value="H6">H6</option>
112 |                 </select>
113 |                 <button
114 |                   @click.prevent="execCmd('insertHorizontalRule')"
115 |                   class="btn btn-white text-info"
116 |                 >HR</button>
117 |                 <button @click.prevent="execCommand('createLink')" class="btn btn-white text-info">
118 |                   <i class="fa fa-link"></i>
119 |                 </button>
120 |                 <button @click.prevent="execCmd('unlink')" class="btn btn-white text-info">
121 |                   <i class="fa fa-unlink"></i>
122 |                 </button>
123 |                 <button
124 |                   @click.prevent="execCommandImg('insertImage')"
125 |                   class="btn btn-white text-info"
126 |                 >
127 |                   <i class="fa fa-file-image-o"></i>
128 |                 </button>
129 |                 <hr />
130 |                 <div class="display">
131 |                   <span class="border p-2 m-2">
132 |                     <i class="fas fa-font"></i>
133 |                     <select @change="execCommandWithArg('fontName', $event)" class="btn btn-white">
134 |                       <option value="Arial">Arial</option>
135 |                       <option value="Comic Sans MS">Comic Sans MS</option>
136 |                       <option value="Courier">Courier</option>
137 |                       <option value="Georgia">Georgia</option>
138 |                       <option value="Thoma">Thoma</option>
139 |                       <option value="Times New Roman">Times New Roman</option>
140 |                       <option value="Verdana">Verdana</option>
141 |                     </select>
142 |                   </span>
143 |                   <span class="border p-2 m-2">
144 |                     <i class="fas fa-text-height"></i>
145 |                     <select @change="execCommandWithArg('fontSize', $event)" class="btn btn-white">
146 |                       <option value="1">1</option>
147 |                       <option value="2">2</option>
148 |                       <option value="3">3</option>
149 |                       <option value="4">4</option>
150 |                       <option value="5">5</option>
151 |                       <option value="6">6</option>
152 |                       <option value="7">7</option>
153 |                     </select>
154 |                   </span>
155 |                   <span class="border p-2 m-2">
156 |                     <i class="fas fa-eye-dropper"></i>
157 |                     <input type="color" @change="execCommandWithArg('foreColor', $event)" />
158 |                   </span>
159 |                   <span class="border p-2 m-2">
160 |                     <i class="fas fa-paint-roller"></i>
161 |                     <input type="color" @change="execCommandWithArg('hiliteColor', $event)" />
162 |                   </span>
163 |                   <button
164 |                     @click.prevent="execCmd('selectAll')"
165 |                     class="btn btn-white border bg-info text-white m-2"
166 |                   >Select All</button>
167 |                 </div>
168 |               </div>
169 |               <div id="output" name="richTextField" contenteditable="true" class="textArea"></div>
170 |             </div>
171 |           </div>
172 |           <div class="form-group">
173 |             <label for="exampleFormControlSelect1">Kategoriler</label>
174 |             <br />
175 |             <input type="checkbox" id="yazilim" value="yazilim" v-model="blog.categories" checked />
176 |             <label for="yazilim">Yazılım</label>
177 |             <input type="checkbox" id="teknoloji" value="teknoloji" v-model="blog.categories" />
178 |             <label for="teknoloji">Teknoloji</label>
179 |             <input type="checkbox" id="tasarim" value="tasarim" v-model="blog.categories" />
180 |             <label for="tasarim">Tasarım</label>
181 |           </div>
182 |           <div class="form-group">
183 |             <label>Yazar Adı</label>
184 |             <input
185 |               v-model="blog.author"
186 |               type="text"
187 |               class="form-control border border-success readonly"
188 |               placeholder="Yazarın adını giriniz.."
189 |               readonly
190 |             />
191 |             <label>Blog Index</label>
192 |             <input
193 |               v-model="blog.indexBlog"
194 |               type="text"
195 |               class="form-control border border-success readonly"
196 |               placeholder="index"
197 |               readonly
198 |             />
199 |           </div>
200 |           <hr />
201 |           <router-link tag="button" to="/admin" class="btn btn-danger">İptal</router-link>
202 |           <button type="submit" class="btn btn-primary">Kaydet</button>
203 |         </fieldset>
204 |       </form>
205 |     </div>
206 |   </div>
207 | </template>
208 | 
209 | <script>
210 | import PhotoUpload from "../Admin/AdminPhoto/PhotoUpload";
211 | import indexVue from "../../pages/index.vue";
212 | 
213 | export default {
214 |   data() {
215 |     return {
216 |       blog: {
217 |         id: null,
218 |         indexBlog: this.blogIn,
219 |         title: null,
220 |         subTitle: null,
221 |         author: this.adminData[0].author,
222 |         text: null,
223 |         photo: null,
224 |         date: null,
225 |         categories: ["yazilim"],
226 |         likes: [],
227 |       },
228 |     };
229 |   },
230 |   components: {
231 |     PhotoUpload,
232 |   },
233 |   props: {
234 |     adminData: {
235 |       required: true,
236 |     },
237 |     blogIn: {
238 |       required: false,
239 |     },
240 |   },
241 |   methods: {
242 |     onSubmit() {
243 |       if (this.blog.photo == null) {
244 |         alert("Kapak Fotoğrafı Seçiniz...");
245 |       } else {
246 |         var text = document.getElementById("output").innerHTML;
247 |         this.blog.text = text;
248 | 
249 |         const options = { year: "numeric", month: "long", day: "numeric" };
250 | 
251 |         this.blog.date = new Date().toLocaleDateString("tr", options);
252 | 
253 |         this.$emit("submit", this.blog);
254 |       }
255 |     },
256 |     savePhoto(photo) {
257 |       this.blog.photo = photo[0];
258 |     },
259 | 
260 |     execCmd(command) {
261 |       document.execCommand(command, false, null);
262 |     },
263 |     execCommand(command) {
264 |       let url = prompt("Enter the link here: ", "http://");
265 |       document.execCommand(command, false, url);
266 |     },
267 |     execCommandImg(command) {
268 |       let imgUrl;
269 |       if(!(imgUrl = prompt("Enter the link here: ", "http://"))) return;
270 |       document.execCommand(command, false, imgUrl);
271 |       var img = document.querySelector("img[src='" + imgUrl + "']");
272 |         img.className = "col-md-10"
273 |         img.alt = "NuxtJs Blog"
274 |     },
275 | 
276 |     execCommandWithArg(command, event) {
277 |       document.execCommand(command, false, event.target.value);
278 |     },
279 |   },
280 |   created() {
281 |     this.blog = this.blog
282 |       ? this.blog
283 |       : {
284 |           id: null,
285 |           indexBlog: this.blogIn,
286 |           title: null,
287 |           subTitle: null,
288 |           author: this.adminData[0].author,
289 |           text: null,
290 |           photo: null,
291 |           date: null,
292 |           categories: ["yazilim"],
293 |         };
294 |   },
295 | };
296 | </script>
297 | <style scoped>
298 | .font {
299 |   font-family: "Courier New";
300 | }
301 | 
302 | .tool {
303 |   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
304 | }
305 | #output {
306 |   height: 400px;
307 |   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
308 |   margin: 0 0 1rem 0;
309 |   padding: 1rem;
310 |   background-color: #fff;
311 |   overflow: scroll;
312 | }
313 | #output:focus {
314 |   outline: none;
315 | }
316 | .form-control:focus {
317 |   outline: none !important;
318 |   box-shadow: none;
319 | }
320 | .display {
321 |   display: flex;
322 |   overflow: scroll;
323 |   text-align: center;
324 | }
325 | </style>
326 | 


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