migrating to mongodb, adding blog, adding project links and tracked and much more
This commit is contained in:
ngn
178
pages/blog/_id/index.vue
Normal file
178
pages/blog/_id/index.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="all">
|
||||
<Navbar />
|
||||
<Header>
|
||||
<glitch class="title">{{ post.title }}</glitch>
|
||||
<p>{{ post.info }}</p>
|
||||
</Header>
|
||||
<div class="postcontain">
|
||||
<div class="lang">
|
||||
<button v-if="lang==='en'" class="bl bs">EN <span class="fi fi-gb"></span></button>
|
||||
<button v-on:click="toggle_lang" v-else class="bl">EN <span class="fi fi-gb"></span></button>
|
||||
<button v-if="lang==='tr'" class="br bs">TR <span class="fi fi-tr"></span></button>
|
||||
<button v-on:click="toggle_lang" v-else class="br">TR <span class="fi fi-tr"></span></button>
|
||||
</div>
|
||||
<main class="postself" v-if="lang==='en'" v-html="en"></main>
|
||||
<main class="postself" v-else v-html="tr"></main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "../../../components/Navbar.vue";
|
||||
import Header from "../../../components/Header.vue";
|
||||
import axios from "axios";
|
||||
import * as DOMPurify from "dompurify";
|
||||
import marked from "marked";
|
||||
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
title: "[ngn] | " + this.post.title,
|
||||
meta: [
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "read my blog posts"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle_lang(){
|
||||
this.lang = this.lang==="tr" ? "en" : "tr"
|
||||
localStorage.setItem("lang", this.lang)
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
post: {},
|
||||
lang: "",
|
||||
en: "",
|
||||
tr: "",
|
||||
}
|
||||
},
|
||||
|
||||
async created() {
|
||||
const res = await axios.get(`/api/get_post?id=${this.$route.params.id}`)
|
||||
if (res.data["error"] === 3)
|
||||
return this.$router.push({ path: "/blog" })
|
||||
this.post = res.data["post"]
|
||||
this.en = DOMPurify.sanitize(marked.parse(this.post["content"]["en"]))
|
||||
this.tr = DOMPurify.sanitize(marked.parse(this.post["content"]["tr"]))
|
||||
this.lang = localStorage.getItem("lang")!==undefined&&(localStorage.getItem("lang")==="tr"||localStorage.getItem("lang")==="en") ? localStorage.getItem("lang") : "en"
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
glitch {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
span{
|
||||
width: 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lang {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
button{
|
||||
padding: 10px 30px 10px 30px;
|
||||
font-size: 20px;
|
||||
background-color: var(--dark-two);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: white
|
||||
}
|
||||
.bs{
|
||||
background-color: var(--dark-three);
|
||||
}
|
||||
.bl{
|
||||
border-radius: 15px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.br{
|
||||
border-radius: 0px 15px 0px 0px;
|
||||
}
|
||||
|
||||
.postcontain{
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.postself {
|
||||
text-align: left;
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
padding: 20px 40px 70px 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 15px;
|
||||
background-color: var(--dark-three);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.postself code {
|
||||
background: var(--dark-two);
|
||||
border-radius: 5px;
|
||||
font-size: 18px;
|
||||
padding: 5px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.postself h1{
|
||||
margin-top: 70px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.postself h2{
|
||||
margin-top: 60px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.postself h3{
|
||||
margin-top: 50px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.postself h4{
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.postself h5{
|
||||
margin-top: 60px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.postself a{
|
||||
animation-name: colorAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
li{
|
||||
list-style-type: none;
|
||||
}
|
||||
</style>
|
||||
91
pages/blog/index.vue
Normal file
91
pages/blog/index.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div>
|
||||
<Navbar />
|
||||
<Header>
|
||||
<glitch>/dev/</glitch>blog
|
||||
</Header>
|
||||
<div class="blogs">
|
||||
<Input :keyup="keyup" placeholder="Search post" type="text"/>
|
||||
<PostPreview v-for="post in posts" :key="post" :title="post.title" :desc="post.desc" :info="post.info" :url="post.url">
|
||||
{{ post.desc }}
|
||||
</PostPreview>
|
||||
</div>
|
||||
<NewPost v-if="logged"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "../../components/Navbar.vue";
|
||||
import Header from "../../components/Header.vue";
|
||||
import NewPost from "../../components/NewPost.vue";
|
||||
import PostPreview from "../../components/PostPreview.vue";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
title: "[ngn] | blog",
|
||||
meta: [
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "read my blog posts"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logged: false,
|
||||
posts: [],
|
||||
all: []
|
||||
};
|
||||
},
|
||||
mounted: async function () {
|
||||
if (localStorage.getItem("token"))
|
||||
this.logged = true;
|
||||
const res = await axios.get("/api/get_posts");
|
||||
|
||||
let array = res.data["posts"]
|
||||
let newarray = []
|
||||
|
||||
for(let i=0;i<array.length;i++){
|
||||
newarray.push({
|
||||
title: array[i].title,
|
||||
desc: array[i].desc,
|
||||
info: array[i].info,
|
||||
url: `/blog/${array[i].title.toLowerCase().replaceAll(" ", "")}`
|
||||
})
|
||||
}
|
||||
|
||||
this.posts = newarray;
|
||||
this.all = newarray;
|
||||
},
|
||||
methods: {
|
||||
keyup(e) {
|
||||
let val = e.target.value
|
||||
|
||||
// search looks at name and info
|
||||
this.posts = []
|
||||
for(let i = 0; i < this.all.length; i++){
|
||||
if(this.all[i].title.toLowerCase().includes(val.toLowerCase()))
|
||||
this.posts.push(this.all[i])
|
||||
|
||||
else if(this.all[i].info.toLowerCase().includes(val.toLowerCase()))
|
||||
this.posts.push(this.all[i])
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.blogs {
|
||||
padding: 50px;
|
||||
gap: 35px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user