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>
|
||||
@@ -16,25 +16,28 @@
|
||||
<br>
|
||||
• electronics
|
||||
<br>
|
||||
• gaming
|
||||
<br>
|
||||
• simply: everything about computers!
|
||||
</h2>
|
||||
</Card>
|
||||
<Card>
|
||||
<h1>👉 Checkout my socials</h1>
|
||||
<h2>Here you can find my socials for following platforms:</h2>
|
||||
<br>
|
||||
<h1>👉 Contact me</h1>
|
||||
<h2>You can contact me on the following platforms:</h2>
|
||||
|
||||
<a href="https://discord.com/users/568131907368386565"><i class='bx bxl-discord-alt'></i> Discord</a>
|
||||
<br>
|
||||
<a href="https://github.com/ngn13"><i class='bx bxl-github'></i> Github</a>
|
||||
<br>
|
||||
<a href="https://www.reddit.com/user/_ngn"><i class='bx bxl-reddit'></i> Reddit</a>
|
||||
<a href="mailto:ngn13proton@proton.me"><i class='bx bxl-mastodon'></i> Mail</a>
|
||||
<br>
|
||||
<a href="https://fosstodon.org/@ngn"><i class='bx bxl-mastodon'></i> Fosstodon</a>
|
||||
<h2>or private message me on </h2>
|
||||
<a><i>[matrix]</i> @ngn:matrix.ngn13.fun</a>
|
||||
</Card>
|
||||
</div>
|
||||
<Logout v-if="logged"/>
|
||||
<div class="version">
|
||||
<p>v2.1</p>
|
||||
<p>v2.2</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -53,7 +56,7 @@ export default {
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "ngn's Personal Website | Home Page"
|
||||
content: "homepage of my website"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -84,6 +87,9 @@ export default {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
i{
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1076px) {
|
||||
.info {
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
</Header>
|
||||
<div class="projects">
|
||||
<ProjectList v-for="project in projects" :key="project">
|
||||
<Project v-for="p in project" :key="p" :name="p.name" :desc="p.desc" :url="p.url"/>
|
||||
<Project v-if="logged" v-for="p in project" :key="p" :name="`${p.name} (${p.click})`" :desc="p.desc" :url="p.url"/>
|
||||
<Project v-if="!logged" v-for="p in project" :key="p" :name="p.name" :desc="p.desc" :url="p.url"/>
|
||||
</ProjectList>
|
||||
</div>
|
||||
<NewProject v-if="logged"/>
|
||||
@@ -22,12 +23,12 @@ import axios from "axios";
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
title: "[ngn]",
|
||||
title: "[ngn] | projects",
|
||||
meta: [
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "ngn's Personal Website | Projects Page"
|
||||
content: "check out my projects"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -49,7 +50,12 @@ export default {
|
||||
let project = []
|
||||
for(let i = 0; i<all.length; i++){
|
||||
if(project.length!==3)
|
||||
project.push(all[i])
|
||||
project.push({
|
||||
name: all[i]["name"],
|
||||
desc: all[i]["desc"],
|
||||
click: all[i]["click"],
|
||||
url: `/l/${all[i]["name"].toLowerCase().replaceAll(" ", "")}`
|
||||
})
|
||||
else{
|
||||
projects.push(project)
|
||||
project = []
|
||||
@@ -66,10 +72,9 @@ export default {
|
||||
|
||||
<style>
|
||||
.projects{
|
||||
margin-top: 20px;
|
||||
padding: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1121px) {
|
||||
|
||||
@@ -19,6 +19,18 @@ import Input from '../components/Input.vue';
|
||||
import NewResource from '../components/NewResource.vue';
|
||||
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
title: "[ngn] | resources",
|
||||
meta: [
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "discover new resources"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
header: "resources",
|
||||
|
||||
Reference in New Issue
Block a user