fixing database connections and patching possible nosqli
This commit is contained in:
ngn
@@ -1,108 +1,110 @@
|
||||
<template>
|
||||
<div class="all">
|
||||
<Navbar />
|
||||
<Header>
|
||||
<label class="glitch title">{{ post.title }}</label>
|
||||
<p>{{ post.info }}</p>
|
||||
</Header>
|
||||
<div class="postcontain">
|
||||
<main class="markdown-body" v-html="content"></main>
|
||||
</div>
|
||||
<div class="all">
|
||||
<Navbar />
|
||||
<Header>
|
||||
<label class="glitch title">{{ post.title }}</label>
|
||||
<p>{{ post.info }}</p>
|
||||
</Header>
|
||||
<div class="postcontain">
|
||||
<main class="markdown-body" v-html="content"></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";
|
||||
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"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
data() {
|
||||
return {
|
||||
post: {},
|
||||
lang: "",
|
||||
content: "",
|
||||
head() {
|
||||
return {
|
||||
title: "[ngn] | " + this.post.title,
|
||||
meta: [
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "read my blog posts"
|
||||
}
|
||||
},
|
||||
|
||||
async created() {
|
||||
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.post["content"] = this.post["content"].replaceAll("\n<br>\n<br>\n", "\n\n")
|
||||
this.content = DOMPurify.sanitize(
|
||||
marked.parse(this.post["content"], { breaks: true }),
|
||||
{ ADD_TAGS: ["iframe"], ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] }
|
||||
)
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
post: {},
|
||||
lang: "",
|
||||
content: ""
|
||||
}
|
||||
},
|
||||
|
||||
async created() {
|
||||
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.post["content"] = this.post["content"].replaceAll(
|
||||
"\n<br>\n<br>\n",
|
||||
"\n\n"
|
||||
)
|
||||
this.content = DOMPurify.sanitize(
|
||||
marked.parse(this.post["content"], { breaks: true }),
|
||||
{
|
||||
ADD_TAGS: ["iframe"],
|
||||
ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling"]
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
glitch {
|
||||
font-size: 80px;
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 30px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.postcontain{
|
||||
padding: 50px;
|
||||
.postcontain {
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
font-size: 25px;
|
||||
padding: 50px;
|
||||
border-radius: 15px;
|
||||
background-color: var(--dark-three);
|
||||
font-size: 25px;
|
||||
padding: 50px;
|
||||
border-radius: 15px;
|
||||
background-color: var(--dark-three);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.markdown-body{
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
.markdown-body {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
|
||||
.markdown-body h1{
|
||||
.markdown-body h1 {
|
||||
border-bottom: 1px solid #505050;
|
||||
}
|
||||
|
||||
.markdown-body iframe{
|
||||
.markdown-body iframe {
|
||||
display: block;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.markdown-body a{
|
||||
.markdown-body a {
|
||||
animation-name: colorAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,89 +1,92 @@
|
||||
<template>
|
||||
<div>
|
||||
<Navbar />
|
||||
<Header>
|
||||
<label class="glitch">/dev/</label>blog
|
||||
</Header>
|
||||
<div class="blogs">
|
||||
<Input :keyup="keyup" placeholder="Search post" type="text"/>
|
||||
<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>
|
||||
<NewPost v-if="logged"/>
|
||||
<div>
|
||||
<Navbar />
|
||||
<Header> <label class="glitch">/dev/</label>blog </Header>
|
||||
<div class="blogs">
|
||||
<Input :keyup="keyup" placeholder="Search post" type="text" />
|
||||
<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>
|
||||
<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";
|
||||
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/blog/sum");
|
||||
let posts = []
|
||||
|
||||
res.data["posts"].forEach(post=>{
|
||||
posts.push({
|
||||
title: post.title,
|
||||
desc: post.desc,
|
||||
info: post.info,
|
||||
url: `/blog/${post.title.toLowerCase().replaceAll(" ", "")}`
|
||||
})
|
||||
})
|
||||
|
||||
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])
|
||||
}
|
||||
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/blog/sum")
|
||||
let posts = []
|
||||
|
||||
res.data["posts"].forEach((post) => {
|
||||
posts.push({
|
||||
title: post.title,
|
||||
desc: post.desc,
|
||||
info: post.info,
|
||||
url: `/blog/${post.title.toLowerCase().replaceAll(" ", "")}`
|
||||
})
|
||||
})
|
||||
|
||||
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])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.blogs {
|
||||
padding: 50px;
|
||||
gap: 35px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
padding: 50px;
|
||||
gap: 35px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
167
pages/index.vue
167
pages/index.vue
@@ -1,104 +1,109 @@
|
||||
<template>
|
||||
<div>
|
||||
<Navbar />
|
||||
<Header>
|
||||
<label class="glitch">echo</label> hello world!
|
||||
</Header>
|
||||
<div class="info">
|
||||
<Card>
|
||||
<h1>👋 Welcome to my website!</h1>
|
||||
<h2>
|
||||
I am a high school student who is interested in
|
||||
<br>
|
||||
• cyber security
|
||||
<br>
|
||||
• coding
|
||||
<br>
|
||||
• electronics
|
||||
<br>
|
||||
• gaming
|
||||
<br>
|
||||
• simply: everything about computers!
|
||||
</h2>
|
||||
</Card>
|
||||
<Card>
|
||||
<h1>👉 Contact me</h1>
|
||||
<h2>You can contact me on the following platforms:</h2>
|
||||
<div>
|
||||
<Navbar />
|
||||
<Header> <label class="glitch">echo</label> hello world! </Header>
|
||||
<div class="info">
|
||||
<Card>
|
||||
<h1>👋 Welcome to my website!</h1>
|
||||
<h2>
|
||||
I am a high school student who is interested in
|
||||
<br />
|
||||
• cyber security
|
||||
<br />
|
||||
• coding
|
||||
<br />
|
||||
• electronics
|
||||
<br />
|
||||
• gaming
|
||||
<br />
|
||||
• simply: everything about computers!
|
||||
</h2>
|
||||
</Card>
|
||||
<Card>
|
||||
<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://mastodon.social/@ngn"><i class='bx bxl-mastodon'></i> Mastodon</a>
|
||||
<br>
|
||||
<a href="mailto:ngn13proton@proton.me"><i class='bx bxs-envelope'></i> Mail</a>
|
||||
<br>
|
||||
<h2>or private message me on matrix:</h2>
|
||||
<a><i>[matrix]</i> @ngn:matrix.ngn13.fun</a>
|
||||
</Card>
|
||||
</div>
|
||||
<Logout v-if="logged"/>
|
||||
<div class="version">
|
||||
<p>v2.4</p>
|
||||
</div>
|
||||
<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://mastodon.social/@ngn"
|
||||
><i class="bx bxl-mastodon"></i> Mastodon</a
|
||||
>
|
||||
<br />
|
||||
<a href="mailto:ngn13proton@proton.me"
|
||||
><i class="bx bxs-envelope"></i> Mail</a
|
||||
>
|
||||
<br />
|
||||
<h2>or private message me on matrix:</h2>
|
||||
<a><i>[matrix]</i> @ngn:matrix.ngn13.fun</a>
|
||||
</Card>
|
||||
</div>
|
||||
<Logout v-if="logged" />
|
||||
<div class="version">
|
||||
<p>v2.5</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "../components/Navbar.vue";
|
||||
import Header from "../components/Header.vue";
|
||||
import Navbar from "../components/Navbar.vue"
|
||||
import Header from "../components/Header.vue"
|
||||
import Card from "../components/Card.vue"
|
||||
import Logout from "../components/Logout.vue";
|
||||
import Logout from "../components/Logout.vue"
|
||||
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
title: "[ngn]",
|
||||
meta: [
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "homepage of my website"
|
||||
}
|
||||
]
|
||||
head() {
|
||||
return {
|
||||
title: "[ngn]",
|
||||
meta: [
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "homepage of my website"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logged: false
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
if(localStorage.getItem("token"))
|
||||
this.logged = true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logged: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (localStorage.getItem("token")) this.logged = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.info {
|
||||
padding: 50px;
|
||||
gap: 30px;
|
||||
display: flex;
|
||||
padding: 50px;
|
||||
gap: 30px;
|
||||
display: flex;
|
||||
}
|
||||
.version{
|
||||
color: var(--dark-fife);
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
font-size: 15px;
|
||||
.version {
|
||||
color: var(--dark-fife);
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
i{
|
||||
font-style: normal;
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1076px) {
|
||||
.info {
|
||||
flex-direction: column;
|
||||
}
|
||||
.info div {
|
||||
width: auto;
|
||||
}
|
||||
.info {
|
||||
flex-direction: column;
|
||||
}
|
||||
.info div {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,51 +1,56 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Login Page</h1>
|
||||
<Input :keyup="function() { }" placeholder="Password" type="password" id="pass"/>
|
||||
<Button :click="click">Login</Button>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Login Page</h1>
|
||||
<Input
|
||||
:keyup="function () {}"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
id="pass"
|
||||
/>
|
||||
<Button :click="click">Login</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Input from '../components/Input.vue';
|
||||
import Button from '../components/Button.vue';
|
||||
import axios from "axios";
|
||||
import Input from "../components/Input.vue"
|
||||
import Button from "../components/Button.vue"
|
||||
import axios from "axios"
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
async click(e) {
|
||||
const pass = document.getElementById("pass").value
|
||||
const res = await axios.get(`/api/auth/login?pass=${pass}`)
|
||||
if(res.data["error"]===0){
|
||||
localStorage.setItem("token", res.data["token"])
|
||||
return location.href="/"
|
||||
}
|
||||
alert("Incorrect password!")
|
||||
}
|
||||
methods: {
|
||||
async click(e) {
|
||||
const pass = document.getElementById("pass").value
|
||||
const res = await axios.get(`/api/auth/login?pass=${pass}`)
|
||||
if (res.data["error"] === 0) {
|
||||
localStorage.setItem("token", res.data["token"])
|
||||
return (location.href = "/")
|
||||
}
|
||||
alert("Incorrect password!")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
padding: 50px;
|
||||
background: var(--dark-three);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
color: var(--white);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 50px;
|
||||
background: var(--dark-three);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
color: var(--white);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 70px;
|
||||
margin-bottom: 20px;
|
||||
h1 {
|
||||
font-size: 70px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,96 +1,105 @@
|
||||
<template>
|
||||
<div>
|
||||
<Navbar />
|
||||
<Header>
|
||||
<label class="glitch">ls -la</label> projects
|
||||
</Header>
|
||||
<div class="projects">
|
||||
<ProjectList v-for="project in projects" :key="project.id">
|
||||
<Project v-if="logged" v-for="p in project.list" :key="p.name" :name="`${p.name} (${p.click})`" :desc="p.desc" :url="p.url"/>
|
||||
<Project v-if="!logged" v-for="p in project.list" :key="p.desc" :name="p.name" :desc="p.desc" :url="p.url"/>
|
||||
</ProjectList>
|
||||
</div>
|
||||
<NewProject v-if="logged"/>
|
||||
<div>
|
||||
<Navbar />
|
||||
<Header> <label class="glitch">ls -la</label> projects </Header>
|
||||
<div class="projects">
|
||||
<ProjectList v-for="project in projects" :key="project.id">
|
||||
<Project
|
||||
v-if="logged"
|
||||
v-for="p in project.list"
|
||||
:key="p.name"
|
||||
:name="`${p.name} (${p.click})`"
|
||||
:desc="p.desc"
|
||||
:url="p.url"
|
||||
/>
|
||||
<Project
|
||||
v-if="!logged"
|
||||
v-for="p in project.list"
|
||||
:key="p.desc"
|
||||
:name="p.name"
|
||||
:desc="p.desc"
|
||||
:url="p.url"
|
||||
/>
|
||||
</ProjectList>
|
||||
</div>
|
||||
<NewProject v-if="logged" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProjectList from "../components/ProjectList.vue";
|
||||
import Project from "../components/Project.vue";
|
||||
import NewProject from "../components/NewProject.vue";
|
||||
import axios from "axios";
|
||||
import ProjectList from "../components/ProjectList.vue"
|
||||
import Project from "../components/Project.vue"
|
||||
import NewProject from "../components/NewProject.vue"
|
||||
import axios from "axios"
|
||||
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
title: "[ngn] | projects",
|
||||
meta: [
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "check out my projects"
|
||||
}
|
||||
]
|
||||
head() {
|
||||
return {
|
||||
title: "[ngn] | projects",
|
||||
meta: [
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "check out my projects"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logged: false,
|
||||
projects: []
|
||||
}
|
||||
},
|
||||
mounted: async function(){
|
||||
if(localStorage.getItem("token"))
|
||||
this.logged = true
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logged: false,
|
||||
projects: []
|
||||
}
|
||||
},
|
||||
mounted: async function () {
|
||||
if (localStorage.getItem("token")) this.logged = true
|
||||
|
||||
const res = await axios.get("/api/projects/get")
|
||||
const res = await axios.get("/api/projects/get")
|
||||
|
||||
let all = res.data["projects"]
|
||||
let pcounter = 0
|
||||
let projects = []
|
||||
let project = {
|
||||
let all = res.data["projects"]
|
||||
let pcounter = 0
|
||||
let projects = []
|
||||
let project = {
|
||||
id: pcounter,
|
||||
list: []
|
||||
}
|
||||
for (let i = 0; i < all.length; i++) {
|
||||
if (project["list"].length === 3) {
|
||||
projects.push(project)
|
||||
pcounter += 1
|
||||
project = {
|
||||
id: pcounter,
|
||||
list: []
|
||||
}
|
||||
for(let i = 0; i<all.length; i++){
|
||||
if(project["list"].length===3){
|
||||
projects.push(project)
|
||||
pcounter += 1
|
||||
project = {
|
||||
id: pcounter,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
project["list"].push({
|
||||
name: all[i]["name"],
|
||||
desc: all[i]["desc"],
|
||||
click: all[i]["click"],
|
||||
url: `/l/${all[i]["name"]
|
||||
.toLowerCase()
|
||||
.replaceAll(" ", "")}`
|
||||
})
|
||||
project["list"].push({
|
||||
name: all[i]["name"],
|
||||
desc: all[i]["desc"],
|
||||
click: all[i]["click"],
|
||||
url: `/l/${all[i]["name"].toLowerCase().replaceAll(" ", "")}`
|
||||
})
|
||||
|
||||
if(i===all.length-1){
|
||||
projects.push(project)
|
||||
}
|
||||
}
|
||||
if (i === all.length - 1) {
|
||||
projects.push(project)
|
||||
}
|
||||
}
|
||||
|
||||
this.projects = projects
|
||||
this.projects = projects
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.projects{
|
||||
padding: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.projects {
|
||||
padding: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1121px) {
|
||||
.projects {
|
||||
padding: 50px;
|
||||
}
|
||||
.projects {
|
||||
padding: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,103 +1,108 @@
|
||||
<template>
|
||||
<main>
|
||||
<Navbar />
|
||||
<Header>
|
||||
<label class="glitch">cat</label> {{ header }}
|
||||
</Header>
|
||||
<div class="resources">
|
||||
<Input :keyup="keyup" placeholder="Search resource" type="text"/>
|
||||
<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>
|
||||
<main>
|
||||
<Navbar />
|
||||
<Header> <label class="glitch">cat</label> {{ header }} </Header>
|
||||
<div class="resources">
|
||||
<Input :keyup="keyup" placeholder="Search resource" type="text" />
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Resource from '../components/Resource.vue';
|
||||
import Input from '../components/Input.vue';
|
||||
import NewResource from '../components/NewResource.vue';
|
||||
import axios from "axios"
|
||||
import Resource from "../components/Resource.vue"
|
||||
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"
|
||||
}
|
||||
]
|
||||
head() {
|
||||
return {
|
||||
title: "[ngn] | resources",
|
||||
meta: [
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "discover new resources"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
header: "resources",
|
||||
logged: false,
|
||||
sum_resources: [],
|
||||
all_resources: [],
|
||||
show_resources: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
keyup(e) {
|
||||
let search = e.target.value
|
||||
if(e.key==="Backspace" && search===""){
|
||||
this.header = "resources"
|
||||
this.show_resources = this.sum_resources
|
||||
return
|
||||
}
|
||||
if(e.key==="OS")
|
||||
return
|
||||
this.header = `resources | grep ${search}`
|
||||
|
||||
// dirty asf search alg
|
||||
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"))
|
||||
this.logged = true
|
||||
|
||||
// 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"]
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
header: "resources",
|
||||
logged: false,
|
||||
sum_resources: [],
|
||||
all_resources: [],
|
||||
show_resources: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
keyup(e) {
|
||||
let search = e.target.value
|
||||
if (e.key === "Backspace" && search === "") {
|
||||
this.header = "resources"
|
||||
this.show_resources = this.sum_resources
|
||||
return
|
||||
}
|
||||
if (e.key === "OS") return
|
||||
this.header = `resources | grep ${search}`
|
||||
|
||||
// then we can load all the resources
|
||||
res = await axios.get("/api/resources/get")
|
||||
this.all_resources = res.data["resources"]
|
||||
}
|
||||
// dirty asf search alg
|
||||
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")) this.logged = true
|
||||
|
||||
// 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"]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.resources {
|
||||
padding: 50px;
|
||||
padding-bottom: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 40px
|
||||
padding: 50px;
|
||||
padding-bottom: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user