ngn/website
1
0
Fork 0
Code Issues 1 Pull Requests 5 Actions Packages Activity

new routes done + fixed blog

Browse Source
This commit is contained in:
ngn
2023-06-11 20:19:35 +03:00
parent aa7c0a1f08
commit 8abe9cd20c
17 changed files with 353 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
pages/blog/_id/index.vue
View File

@@ -6,14 +6,7 @@
<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>
<main class="markdown-body" v-html="content"></main>
</div>
</div>
</template>
@@ -39,30 +32,24 @@ export default {
};
},
methods: {
toggle_lang(){
this.lang = this.lang==="tr" ? "en" : "tr"
localStorage.setItem("lang", this.lang)
}
},
data() {
return {
post: {},
lang: "",
en: "",
tr: "",
content: "",
}
},
async created() {
const res = await axios.get(`/api/get_post?id=${this.$route.params.id}`)
const res = await axios.get(`/api/blog/get?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"
this.content = DOMPurify.sanitize(
marked.parse(this.post["content"], { breaks: true }),
{ ADD_TAGS: ["iframe"], ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] }
)
}
}
@@ -77,11 +64,6 @@ p {
font-size: 30px;
}
span{
width: 30px;
border-radius: 5px;
}
.info {
display: flex;
flex-direction: row;
@@ -89,90 +71,39 @@ span{
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;
.markdown-body {
font-size: 25px;
padding: 50px;
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;
@import url("https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-dark.css");
.markdown-body{
font-family: "Ubuntu", sans-serif;
}
.postself h1{
margin-top: 70px;
margin-bottom: 20px;
.markdown-body h1{
border-bottom: 1px solid #505050;
}
.postself h2{
margin-top: 60px;
margin-bottom: 20px;
.markdown-body iframe{
display: block;
margin: 20px 0px;
}
.postself h3{
margin-top: 50px;
margin-bottom: 20px;
.markdown-body a{
animation-name: colorAnimation;
animation-iteration-count: infinite;
animation-duration: 10s;
text-shadow: none;
}
.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>
</style>

32
pages/blog/index.vue
View File

@@ -6,7 +6,7 @@
</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">
<PostPreview v-for="post in posts" :key="post.title" :title="post.title" :desc="post.desc" :info="post.info" :url="post.url">
{{ post.desc }}
</PostPreview>
</div>
@@ -44,33 +44,31 @@ export default {
mounted: async function () {
if (localStorage.getItem("token"))
this.logged = true;
const res = await axios.get("/api/get_posts");
const res = await axios.get("/api/blog/sum");
let 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(" ", "")}`
res.data["posts"].forEach(post=>{
posts.push({
title: post.title,
desc: post.desc,
info: post.info,
url: `/blog/${post.title.toLowerCase().replaceAll(" ", "")}`
})
}
})
this.posts = newarray;
this.all = newarray;
this.posts = posts
this.all = posts
},
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])
}
@@ -88,4 +86,4 @@ export default {
gap: 30px;
align-items: center;
}
</style>
</style>