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>

4
pages/login.vue
View File

@@ -15,7 +15,7 @@ export default {
methods: {
async click(e) {
const pass = document.getElementById("pass").value
const res = await axios.get(`/api/login?pass=${pass}`)
const res = await axios.get(`/api/auth/login?pass=${pass}`)
if(res.data["error"]===0){
localStorage.setItem("token", res.data["token"])
return location.href="/"
@@ -48,4 +48,4 @@ h1{
font-size: 70px;
margin-bottom: 20px;
}
</style>
</style>

10
pages/projects.vue
View File

@@ -35,16 +35,16 @@ export default {
},
data() {
return {
logged: false,
projects: []
logged: false,
projects: []
}
},
mounted: async function(){
if(localStorage.getItem("token"))
this.logged = true
const res = await axios.get("/api/get_projects")
const res = await axios.get("/api/projects/get")
let all = res.data["projects"]
let projects = []
let project = []
@@ -82,4 +82,4 @@ export default {
padding: 50px;
}
}
</style>
</style>

59
pages/resources.vue
View File

@@ -6,7 +6,7 @@
</Header>
<div class="resources">
<Input :keyup="keyup" placeholder="Search resource" type="text"/>
<Resource v-for="resource in resources" :key="resource" :name="resource.name" :tags="resource.tags" :url="resource.url" />
<Resource v-for="res in show_resources" :key="res.name" :name="res.name" :tags="res.tags" :url="res.url" />
</div>
<NewResource v-if="logged"/>
</main>
@@ -35,44 +35,59 @@ export default {
return {
header: "resources",
logged: false,
resources: [],
all: []
sum_resources: [],
all_resources: [],
show_resources: []
}
},
methods: {
keyup(e) {
let val = e.target.value
if(e.key==="Backspace" && val===""){
let search = e.target.value
if(e.key==="Backspace" && search===""){
this.header = "resources"
this.resources = this.all
this.show_resources = this.sum_resources
return
}
if(e.key==="OS")
return
this.header = `resources | grep ${val}`
this.header = `resources | grep ${search}`
// dirty asf search alg
this.resources = []
for(let i = 0; i < this.all.length; i++){
if(this.all[i].name.toLowerCase().includes(val.toLowerCase()))
this.resources.push(this.all[i])
for(let e = 0; e < this.all[i].tags.length; e++){
if(this.all[i].tags[e].toLowerCase().includes(val.toLowerCase())){
if(this.resources.indexOf(this.all[i])===-1)
this.resources.push(this.all[i])
this.show_resources = []
for(let i = 0; i < this.all_resources.length; i++){
if(this.all_resources[i].name
.toLowerCase()
.includes(search.toLowerCase())
){
this.show_resources.push(this.all_resources[i])
continue
}
for(let e = 0; e < this.all_resources[i].tags.length; e++){
if(this.all_resources[i].tags[e].toLowerCase()
.includes(search.toLowerCase())
){
this.show_resources.push(this.all_resources[i])
break
}
}
}
}
}
},
mounted: async function(){
if(localStorage.getItem("token"))
if(localStorage.getItem("token"))
this.logged = true
const res = await axios.get("/api/get_resources")
this.resources = res.data["resources"]
this.all = res.data["resources"]
// request top 10 resources so we can
// render the DOM as fast as possible
let res = await axios.get("/api/resources/get?sum=1")
this.sum_resources = res.data["resources"]
this.show_resources = this.sum_resources
// then we can load all the resources
res = await axios.get("/api/resources/get")
this.all_resources = res.data["resources"]
console.log(res.data["resources"])
}
}
</script>
@@ -86,4 +101,4 @@ export default {
align-items: center;
gap: 40px
}
</style>
</style>