fixing database connections and patching possible nosqli
This commit is contained in:
ngn
parent
ad6b29be01
commit
d42990db29
1
.prettierignore
Normal file
1
.prettierignore
Normal file
@ -0,0 +1 @@
|
||||
.nuxt
|
||||
6
.prettierrc.json
Normal file
6
.prettierrc.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"trailingComma": "none",
|
||||
"tabWidth": 2,
|
||||
"semi": false,
|
||||
"singleQuote": false
|
||||
}
|
||||
@ -1,9 +1,11 @@
|
||||
# My Website - [ngn13.fun](https://ngn13.fun)
|
||||
|
||||
This repo contains the source code of my personal website.
|
||||
It's written NuxtJS and supports full SSR. As database,
|
||||
it uses mongodb.
|
||||
|
||||
## Setup
|
||||
|
||||
```
|
||||
git clone https://github.com/ngn13/ngn13.fun.git
|
||||
cd ngn13.fun && npm i
|
||||
|
||||
31
api/index.js
31
api/index.js
@ -7,15 +7,16 @@ require("dotenv").config()
|
||||
* error: 1 -> parameter error
|
||||
* error: 2 -> auth error
|
||||
* error: 3 -> not found error
|
||||
*/
|
||||
*/
|
||||
|
||||
const db = new MongoClient(process.env.DATABASE);
|
||||
const db = new MongoClient(process.env.DATABASE)
|
||||
const app = express()
|
||||
app.use(express.json())
|
||||
app.use(express.urlencoded({ extended: false }));
|
||||
app.use((req,res,next)=>{
|
||||
req.db = db
|
||||
next()
|
||||
app.use(express.urlencoded({ extended: false }))
|
||||
app.use(async (req, res, next) => {
|
||||
await db.connect()
|
||||
req.db = db
|
||||
next()
|
||||
})
|
||||
|
||||
const { auth, authware } = require("./routes/auth.js")
|
||||
@ -25,19 +26,21 @@ app.use("/*/a*", authware)
|
||||
const resources = require("./routes/resources.js")
|
||||
const projects = require("./routes/projects.js")
|
||||
const blog = require("./routes/blog.js")
|
||||
const routes = [
|
||||
resources,
|
||||
projects,
|
||||
blog,
|
||||
auth,
|
||||
]
|
||||
const routes = [resources, projects, blog, auth]
|
||||
|
||||
routes.forEach(route=>{
|
||||
routes.forEach((route) => {
|
||||
app.use(route.path, route)
|
||||
})
|
||||
|
||||
async function pexit() {
|
||||
await db.close()
|
||||
process.exit()
|
||||
}
|
||||
|
||||
process.on("SIGTERM", pexit)
|
||||
process.on("SIGINT", pexit)
|
||||
|
||||
export default {
|
||||
path: "/api",
|
||||
handler: app,
|
||||
handler: app
|
||||
}
|
||||
|
||||
@ -4,34 +4,30 @@ const auth = express.Router()
|
||||
auth.path = "/auth"
|
||||
|
||||
const PASS = process.env.PASS
|
||||
let TOKEN = gimmeToken();
|
||||
let TOKEN = gimmeToken()
|
||||
|
||||
function authware(req,res,next){
|
||||
function authware(req, res, next) {
|
||||
const token = req.query.token ? req.query.token : req.body.token
|
||||
|
||||
if(!token)
|
||||
return res.json({ error: 1 })
|
||||
if (typeof token !== "string") return res.json({ error: 1 })
|
||||
|
||||
if(token!==TOKEN)
|
||||
return res.json({ error: 2 })
|
||||
if (token !== TOKEN) return res.json({ error: 2 })
|
||||
|
||||
next()
|
||||
}
|
||||
auth.use("/logout", authware)
|
||||
|
||||
auth.get("/login", async (req,res)=>{
|
||||
auth.get("/login", async (req, res) => {
|
||||
const pass = req.query.pass
|
||||
|
||||
if(!pass)
|
||||
return res.json({ error: 1 })
|
||||
if (typeof pass !== "string") return res.json({ error: 1 })
|
||||
|
||||
if(pass!==PASS)
|
||||
return res.json({ error: 2 })
|
||||
if (pass !== PASS) return res.json({ error: 2 })
|
||||
|
||||
res.json({ error: 0, token: TOKEN })
|
||||
})
|
||||
|
||||
auth.get("/logout", async (req,res)=>{
|
||||
auth.get("/logout", async (req, res) => {
|
||||
TOKEN = gimmeToken()
|
||||
res.json({ error: 0 })
|
||||
})
|
||||
|
||||
@ -3,25 +3,23 @@ const { makeID } = require("../util.js")
|
||||
const blog = express.Router()
|
||||
blog.path = "/blog"
|
||||
|
||||
blog.get("/sum", async (req,res)=>{
|
||||
await req.db.connect()
|
||||
const db = await req.db.db("ngn13")
|
||||
const col = await db.collection("posts")
|
||||
const results = await col.find({priv: {$eq: false}}).toArray()
|
||||
await req.db.close()
|
||||
blog.get("/sum", async (req, res) => {
|
||||
const db = req.db.db("ngn13")
|
||||
const col = db.collection("posts")
|
||||
const results = await col.find({ priv: { $eq: false } }).toArray()
|
||||
|
||||
let posts = []
|
||||
for(let i = 0;i<results.length;i++){
|
||||
for (let i = 0; i < results.length; i++) {
|
||||
posts.push({
|
||||
"title":results[i]["title"],
|
||||
"desc":results[i]["content"]
|
||||
.substring(0, 140) // a short desc
|
||||
.replaceAll("#", "") // remove all the markdown stuff
|
||||
.replaceAll("*", "")
|
||||
.replaceAll("`", "")
|
||||
.replaceAll("-", "")
|
||||
+ "...", // add "..." to make it look like desc
|
||||
"info":`${results[i]["author"]} | ${results[i]["date"]}`
|
||||
title: results[i]["title"],
|
||||
desc:
|
||||
results[i]["content"]
|
||||
.substring(0, 140) // a short desc
|
||||
.replaceAll("#", "") // remove all the markdown stuff
|
||||
.replaceAll("*", "")
|
||||
.replaceAll("`", "")
|
||||
.replaceAll("-", "") + "...", // add "..." to make it look like desc
|
||||
info: `${results[i]["author"]} | ${results[i]["date"]}`
|
||||
})
|
||||
}
|
||||
|
||||
@ -30,63 +28,59 @@ blog.get("/sum", async (req,res)=>{
|
||||
res.json({ error: 0, posts: posts.reverse() })
|
||||
})
|
||||
|
||||
blog.get("/get", async (req,res)=>{
|
||||
blog.get("/get", async (req, res) => {
|
||||
const id = req.query.id
|
||||
|
||||
await req.db.connect()
|
||||
const db = await req.db.db("ngn13")
|
||||
const col = await db.collection("posts")
|
||||
const db = req.db.db("ngn13")
|
||||
const col = db.collection("posts")
|
||||
const results = await col.find().toArray()
|
||||
await req.db.close()
|
||||
|
||||
for(let i = 0;i<results.length;i++){
|
||||
for (let i = 0; i < results.length; i++) {
|
||||
// id is basically the title of the post
|
||||
// but ve remove the whitespace
|
||||
// and make it lowerspace
|
||||
// for example:
|
||||
// Online Privacy Guide -> onlineprivacyguide
|
||||
if(makeID(results[i]["title"])===id){
|
||||
return res.json(
|
||||
{
|
||||
error: 0,
|
||||
post:{
|
||||
"title": results[i]["title"],
|
||||
// info is the subtitle, for example:
|
||||
// ngn | 01/06/2023
|
||||
"info": `${results[i]["author"]} | ${results[i]["date"]}`,
|
||||
"content": results[i]["content"],
|
||||
}
|
||||
if (makeID(results[i]["title"]) === id) {
|
||||
return res.json({
|
||||
error: 0,
|
||||
post: {
|
||||
title: results[i]["title"],
|
||||
// info is the subtitle, for example:
|
||||
// ngn | 01/06/2023
|
||||
info: `${results[i]["author"]} | ${results[i]["date"]}`,
|
||||
content: results[i]["content"]
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
res.json({ error: 3 })
|
||||
|
||||
})
|
||||
|
||||
blog.post("/add", async (req,res)=>{
|
||||
console.log("heyy")
|
||||
blog.post("/add", async (req, res) => {
|
||||
const title = req.body.title
|
||||
const author = req.body.author
|
||||
const content = req.body.content
|
||||
const priv = req.body.priv
|
||||
console.log(title, author, content, priv)
|
||||
|
||||
if ( !title || !author || !content || !priv )
|
||||
if (
|
||||
typeof title !== "string" ||
|
||||
typeof author !== "string" ||
|
||||
typeof content !== "string" ||
|
||||
typeof priv !== "string"
|
||||
)
|
||||
return res.json({ error: 1 })
|
||||
|
||||
await req.db.connect()
|
||||
const db = await req.db.db("ngn13")
|
||||
const col = await db.collection("posts")
|
||||
const db = req.db.db("ngn13")
|
||||
const col = db.collection("posts")
|
||||
await col.insertOne({
|
||||
"title":title,
|
||||
"author":author,
|
||||
"date": new Date().toLocaleDateString(),
|
||||
"content":content,
|
||||
"priv": priv
|
||||
title: title,
|
||||
author: author,
|
||||
date: new Date().toLocaleDateString(),
|
||||
content: content,
|
||||
priv: priv
|
||||
})
|
||||
await req.db.close()
|
||||
res.json({ error: 0 })
|
||||
})
|
||||
|
||||
|
||||
@ -2,33 +2,33 @@ const express = require("express")
|
||||
const projects = express.Router()
|
||||
projects.path = "/projects"
|
||||
|
||||
projects.get("/get", async (req,res)=>{
|
||||
await req.db.connect()
|
||||
const db = await req.db.db("ngn13")
|
||||
const col = await db.collection("projects")
|
||||
projects.get("/get", async (req, res) => {
|
||||
const db = req.db.db("ngn13")
|
||||
const col = db.collection("projects")
|
||||
const results = await col.find().toArray()
|
||||
await req.db.close()
|
||||
res.json({ error: 0, projects: results })
|
||||
})
|
||||
|
||||
projects.get("/add", async (req,res)=>{
|
||||
let name = req.query.name;
|
||||
let desc = req.query.desc;
|
||||
let url = req.query.url;
|
||||
projects.get("/add", async (req, res) => {
|
||||
let name = req.query.name
|
||||
let desc = req.query.desc
|
||||
let url = req.query.url
|
||||
|
||||
if (!name || !desc || !url )
|
||||
if (
|
||||
typeof name !== "string" ||
|
||||
typeof desc !== "string" ||
|
||||
typeof url !== "string"
|
||||
)
|
||||
return res.json({ error: 1 })
|
||||
|
||||
await req.db.connect()
|
||||
const db = await req.db.db("ngn13")
|
||||
const col = await db.collection("projects")
|
||||
const db = req.db.db("ngn13")
|
||||
const col = db.collection("projects")
|
||||
await col.insertOne({
|
||||
"name":name,
|
||||
"desc":desc,
|
||||
"url":url,
|
||||
"click":0
|
||||
name: name,
|
||||
desc: desc,
|
||||
url: url,
|
||||
click: 0
|
||||
})
|
||||
await req.db.close()
|
||||
res.json({ error: 0 })
|
||||
})
|
||||
|
||||
|
||||
@ -2,33 +2,31 @@ const express = require("express")
|
||||
const resources = express.Router()
|
||||
resources.path = "/resources"
|
||||
|
||||
resources.get("/get", async (req,res)=>{
|
||||
await req.db.connect()
|
||||
const db = await req.db.db("ngn13")
|
||||
const col = await db.collection("resources")
|
||||
resources.get("/get", async (req, res) => {
|
||||
const db = req.db.db("ngn13")
|
||||
const col = db.collection("resources")
|
||||
let results = []
|
||||
if(req.query.sum)
|
||||
results = await col.find().limit(10).toArray()
|
||||
else
|
||||
results = await col.find().toArray()
|
||||
await req.db.close()
|
||||
res.json({ error: 0, resources: results })
|
||||
if (req.query.sum) results = await col.find().limit(10).toArray()
|
||||
else results = await col.find().toArray()
|
||||
res.json({ error: 0, resources: results.reverse() })
|
||||
})
|
||||
|
||||
resources.get("/add", async (req,res)=>{
|
||||
let name = req.query.name;
|
||||
let tags = req.query.tags;
|
||||
let url = req.query.url;
|
||||
resources.get("/add", async (req, res) => {
|
||||
let name = req.query.name
|
||||
let tags = req.query.tags
|
||||
let url = req.query.url
|
||||
|
||||
if(!name || !tags || !url)
|
||||
return res.json({"error":1})
|
||||
if (
|
||||
typeof name !== "string" ||
|
||||
typeof tags !== "string" ||
|
||||
typeof url !== "string"
|
||||
)
|
||||
return res.json({ error: 1 })
|
||||
|
||||
await req.db.connect()
|
||||
const db = await req.db.db("ngn13")
|
||||
const col = await db.collection("resources")
|
||||
await col.insertOne({"name":name, "tags":tags.split(","), "url":url})
|
||||
await req.db.close()
|
||||
res.json({error: 0})
|
||||
const db = req.db.db("ngn13")
|
||||
const col = db.collection("resources")
|
||||
await col.insertOne({ name: name, tags: tags.split(","), url: url })
|
||||
res.json({ error: 0 })
|
||||
})
|
||||
|
||||
module.exports = resources
|
||||
|
||||
18
api/util.js
18
api/util.js
@ -1,14 +1,15 @@
|
||||
function gimmeToken() {
|
||||
var result = ""
|
||||
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
|
||||
var charactersLength = characters.length
|
||||
for ( var i = 0; i < 32; i++ ) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return result;
|
||||
var result = ""
|
||||
var characters =
|
||||
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
|
||||
var charactersLength = characters.length
|
||||
for (var i = 0; i < 32; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength))
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function makeID(title){
|
||||
function makeID(title) {
|
||||
// this is used in blog.js
|
||||
// id is basically the title of the post
|
||||
// but ve remove the whitespace
|
||||
@ -19,4 +20,3 @@ function makeID(title){
|
||||
}
|
||||
|
||||
module.exports = { gimmeToken, makeID }
|
||||
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
<template>
|
||||
<button @click="click"><slot></slot></button>
|
||||
<button @click="click"><slot></slot></button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["click"]
|
||||
props: ["click"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
text-align: center;
|
||||
width: 540px;
|
||||
font-size: 25px;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
background: var(--dark-two);
|
||||
border: none;
|
||||
color: white;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: .4s;
|
||||
text-align: center;
|
||||
width: 540px;
|
||||
font-size: 25px;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
background: var(--dark-two);
|
||||
border: none;
|
||||
color: white;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: var(--def-shadow);
|
||||
box-shadow: var(--def-shadow);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,56 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
box-shadow: var(--def-shadow);
|
||||
background: var(--dark-two);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 50px;
|
||||
color: white;
|
||||
box-shadow: var(--def-shadow);
|
||||
background: var(--dark-two);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 50px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
||||
font-size: 50px;
|
||||
margin-bottom: 30px;
|
||||
text-decoration: underline;
|
||||
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
||||
font-size: 50px;
|
||||
margin-bottom: 30px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
i {
|
||||
animation-name: colorAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: colorAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
font-weight: 900;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 30px;
|
||||
margin-top: 3px;
|
||||
font-size: 30px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
line-height: 60px;
|
||||
font-size: 40px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
line-height: 60px;
|
||||
text-decoration: none;
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
line-height: 60px;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,31 +1,30 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<h1>
|
||||
<slot></slot>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="header">
|
||||
<h1>
|
||||
<slot></slot>
|
||||
</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
background: linear-gradient(rgba(3, 3, 3, 0.706), rgba(22, 22, 22, 0.808)), url("https://www.sketchappsources.com/resources/source-image/tv-glitch-sureshmurali29.png");
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(rgba(3, 3, 3, 0.706), rgba(22, 22, 22, 0.808)),
|
||||
url("https://www.sketchappsources.com/resources/source-image/tv-glitch-sureshmurali29.png");
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 900;
|
||||
font-size: 7.5vw;
|
||||
padding: 150px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
||||
text-size-adjust: 80%;
|
||||
font-weight: 900;
|
||||
font-size: 7.5vw;
|
||||
padding: 150px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
||||
text-size-adjust: 80%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
<template>
|
||||
<input v-on:keyup="keyup" :placeholder="placeholder" :type="type">
|
||||
<input v-on:keyup="keyup" :placeholder="placeholder" :type="type" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:["keyup", "placeholder", "type"]
|
||||
props: ["keyup", "placeholder", "type"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
input {
|
||||
width: 500px;
|
||||
font-size: 25px;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
background: var(--dark-two);
|
||||
border: none;
|
||||
color: white;
|
||||
outline: none;
|
||||
transition: .4s;
|
||||
width: 500px;
|
||||
font-size: 25px;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
background: var(--dark-two);
|
||||
border: none;
|
||||
color: white;
|
||||
outline: none;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
box-shadow: var(--def-shadow);
|
||||
box-shadow: var(--def-shadow);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,41 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Currently logged in</h1>
|
||||
<Button :click="click">Logout</Button>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Currently logged in</h1>
|
||||
<Button :click="click">Logout</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Button from './Button.vue';
|
||||
import axios from "axios"
|
||||
import Button from "./Button.vue"
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
async click(e) {
|
||||
await axios.get(`/api/auth/logout?token=${localStorage.getItem("token")}`)
|
||||
localStorage.clear()
|
||||
location.reload()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async click(e) {
|
||||
await axios.get(`/api/auth/logout?token=${localStorage.getItem("token")}`)
|
||||
localStorage.clear()
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1{
|
||||
color: var(--white);
|
||||
font-size: 50px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-size: 50px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div{
|
||||
background-color: var(--dark-three);
|
||||
padding: 50px;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
div {
|
||||
background-color: var(--dark-three);
|
||||
padding: 50px;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,53 +1,55 @@
|
||||
<template>
|
||||
<nav>
|
||||
<div>
|
||||
<h3>[ngn]</h3>
|
||||
</div>
|
||||
<div>
|
||||
<NavbarLink :out="false" url="/">Home</NavbarLink>
|
||||
<NavbarLink :out="false" url="/projects">Projects</NavbarLink>
|
||||
<NavbarLink :out="false" url="/resources">Resources</NavbarLink>
|
||||
<NavbarLink :out="false" url="/blog">Blog</NavbarLink>
|
||||
<NavbarLink :out="true" url="http://github.com/ngn13/ngn13.fun">Source</NavbarLink>
|
||||
</div>
|
||||
</nav>
|
||||
<nav>
|
||||
<div>
|
||||
<h3>[ngn]</h3>
|
||||
</div>
|
||||
<div>
|
||||
<NavbarLink :out="false" url="/">Home</NavbarLink>
|
||||
<NavbarLink :out="false" url="/projects">Projects</NavbarLink>
|
||||
<NavbarLink :out="false" url="/resources">Resources</NavbarLink>
|
||||
<NavbarLink :out="false" url="/blog">Blog</NavbarLink>
|
||||
<NavbarLink :out="true" url="http://github.com/ngn13/ngn13.fun"
|
||||
>Source</NavbarLink
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavbarLink from "./NavbarLink.vue";
|
||||
import NavbarLink from "./NavbarLink.vue"
|
||||
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
nav {
|
||||
background: var(--dark-two);
|
||||
padding: 25px 35px 30px 35px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: solid 3px black;
|
||||
animation-name: borderAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
box-shadow: var(--def-shadow);
|
||||
background: var(--dark-two);
|
||||
padding: 25px 35px 30px 35px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: solid 3px black;
|
||||
animation-name: borderAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
box-shadow: var(--def-shadow);
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 900;
|
||||
font-size: 30px;
|
||||
color: red;
|
||||
animation-name: colorAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
font-weight: 900;
|
||||
font-size: 30px;
|
||||
color: red;
|
||||
animation-name: colorAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,60 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<nuxt-link v-if="!out" :class="cname" id="link" :to="url">
|
||||
<slot></slot>
|
||||
</nuxt-link>
|
||||
<a v-if="out" :class="cname" id="link" :href="url">
|
||||
<slot></slot>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<nuxt-link v-if="!out" :class="cname" id="link" :to="url">
|
||||
<slot></slot>
|
||||
</nuxt-link>
|
||||
<a v-if="out" :class="cname" id="link" :href="url">
|
||||
<slot></slot>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["url", "out"],
|
||||
data() {
|
||||
return {
|
||||
cname: "notcurrent"
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
let url = window.location.pathname
|
||||
if(url===this.url){
|
||||
this.cname = "current"
|
||||
}
|
||||
}
|
||||
props: ["url", "out"],
|
||||
data() {
|
||||
return {
|
||||
cname: "notcurrent"
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let url = window.location.pathname
|
||||
if (url === this.url) {
|
||||
this.cname = "current"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.notcurrent {
|
||||
margin-left: 20px;
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notcurrent:hover {
|
||||
text-decoration: underline;
|
||||
animation-name: underlineAnimation;
|
||||
animation-duration: 5s;
|
||||
animation-iteration-count: infinite;
|
||||
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
||||
text-decoration: underline;
|
||||
animation-name: underlineAnimation;
|
||||
animation-duration: 5s;
|
||||
animation-iteration-count: infinite;
|
||||
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
||||
}
|
||||
|
||||
.current{
|
||||
margin-left: 20px;
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
animation-name: underlineAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
||||
.current {
|
||||
margin-left: 20px;
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
animation-name: underlineAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,57 +1,72 @@
|
||||
<template>
|
||||
<main>
|
||||
<h1>Add New Post</h1>
|
||||
<div class="textareas">
|
||||
<Input :keyup="function() { }" id="title" placeholder="Post Title" type="text"/>
|
||||
<Input :keyup="function() { }" id="author" placeholder="Author" type="text"/>
|
||||
<h2>
|
||||
Make the post private
|
||||
<input id="private" type="checkbox"/>
|
||||
</h2>
|
||||
</div>
|
||||
<textarea name="content" id="content" cols="30" rows="10" placeholder="Content"></textarea>
|
||||
<Button :click="click">Post</Button>
|
||||
</main>
|
||||
<main>
|
||||
<h1>Add New Post</h1>
|
||||
<div class="textareas">
|
||||
<Input
|
||||
:keyup="function () {}"
|
||||
id="title"
|
||||
placeholder="Post Title"
|
||||
type="text"
|
||||
/>
|
||||
<Input
|
||||
:keyup="function () {}"
|
||||
id="author"
|
||||
placeholder="Author"
|
||||
type="text"
|
||||
/>
|
||||
<h2>
|
||||
Make the post private
|
||||
<input id="private" type="checkbox" />
|
||||
</h2>
|
||||
</div>
|
||||
<textarea
|
||||
name="content"
|
||||
id="content"
|
||||
cols="30"
|
||||
rows="10"
|
||||
placeholder="Content"
|
||||
></textarea>
|
||||
<Button :click="click">Post</Button>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Input from './Input.vue';
|
||||
import Button from './Button.vue';
|
||||
import axios from "axios"
|
||||
import Input from "./Input.vue"
|
||||
import Button from "./Button.vue"
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
async click(e) {
|
||||
const title = document.getElementById("title").value
|
||||
const author = document.getElementById("author").value
|
||||
const content = document.getElementById("content").value
|
||||
const priv = document.getElementById("private").value
|
||||
const token = localStorage.getItem("token")
|
||||
const res = await axios.post("/api/blog/add", {
|
||||
token: token,
|
||||
title: title,
|
||||
author: author,
|
||||
content: content,
|
||||
priv: priv==="on"
|
||||
})
|
||||
if(res.data["error"]!==0)
|
||||
return alert("Error!")
|
||||
alert("Post added!")
|
||||
location.reload()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async click(e) {
|
||||
const title = document.getElementById("title").value
|
||||
const author = document.getElementById("author").value
|
||||
const content = document.getElementById("content").value
|
||||
const priv = document.getElementById("private").value
|
||||
const token = localStorage.getItem("token")
|
||||
const res = await axios.post("/api/blog/add", {
|
||||
token: token,
|
||||
title: title,
|
||||
author: author,
|
||||
content: content,
|
||||
priv: priv === "on"
|
||||
})
|
||||
if (res.data["error"] !== 0) return alert("Error!")
|
||||
alert("Post added!")
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1{
|
||||
color: var(--white);
|
||||
font-size: 50px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-size: 50px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2{
|
||||
h2 {
|
||||
background: var(--dark-two);
|
||||
font-size: 25px;
|
||||
border-radius: 20px;
|
||||
@ -71,38 +86,38 @@ input[type="checkbox"] {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
textarea{
|
||||
width: 500px;
|
||||
font-size: 20px;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
background: var(--dark-two);
|
||||
border: none;
|
||||
color: white;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
height: 200px;
|
||||
transition: .4s;
|
||||
textarea {
|
||||
width: 500px;
|
||||
font-size: 20px;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
background: var(--dark-two);
|
||||
border: none;
|
||||
color: white;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
height: 200px;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.textareas {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
box-shadow: var(--def-shadow);
|
||||
box-shadow: var(--def-shadow);
|
||||
}
|
||||
|
||||
main{
|
||||
background-color: var(--dark-three);
|
||||
padding: 50px;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
main {
|
||||
background-color: var(--dark-three);
|
||||
padding: 50px;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,51 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Add Project</h1>
|
||||
<Input :keyup="function() { }" id="name" placeholder="Project Name" type="text"/>
|
||||
<Input :keyup="function() { }" id="desc" placeholder="Project Desc" type="text"/>
|
||||
<Input :keyup="function() { }" id="url" placeholder="Project URL" type="text"/>
|
||||
<Button :click="click">Post</Button>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Add Project</h1>
|
||||
<Input
|
||||
:keyup="function () {}"
|
||||
id="name"
|
||||
placeholder="Project Name"
|
||||
type="text"
|
||||
/>
|
||||
<Input
|
||||
:keyup="function () {}"
|
||||
id="desc"
|
||||
placeholder="Project Desc"
|
||||
type="text"
|
||||
/>
|
||||
<Input
|
||||
:keyup="function () {}"
|
||||
id="url"
|
||||
placeholder="Project URL"
|
||||
type="text"
|
||||
/>
|
||||
<Button :click="click">Post</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Input from './Input.vue';
|
||||
import Button from './Button.vue';
|
||||
import axios from "axios"
|
||||
import Input from "./Input.vue"
|
||||
import Button from "./Button.vue"
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
async click(e) {
|
||||
const name = document.getElementById("name").value
|
||||
const desc = document.getElementById("desc").value
|
||||
const url = document.getElementById("url").value
|
||||
const token = localStorage.getItem("token")
|
||||
const res = await axios.get(`/api/projects/add?token=${token}&name=${name}&desc=${desc}&url=${url}`)
|
||||
if(res.data["error"]!==0)
|
||||
return alert("Error!")
|
||||
alert("Project added!")
|
||||
location.reload()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async click(e) {
|
||||
const name = document.getElementById("name").value
|
||||
const desc = document.getElementById("desc").value
|
||||
const url = document.getElementById("url").value
|
||||
const token = localStorage.getItem("token")
|
||||
const res = await axios.get(
|
||||
`/api/projects/add?token=${token}&name=${name}&desc=${desc}&url=${url}`
|
||||
)
|
||||
if (res.data["error"] !== 0) return alert("Error!")
|
||||
alert("Project added!")
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1{
|
||||
color: var(--white);
|
||||
font-size: 50px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-size: 50px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div{
|
||||
background-color: var(--dark-three);
|
||||
padding: 50px;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
div {
|
||||
background-color: var(--dark-three);
|
||||
padding: 50px;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,51 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Add Resource</h1>
|
||||
<Input :keyup="function(){}" id="name" placeholder="Resource Name" type="text"/>
|
||||
<Input :keyup="function(){}" id="tags" placeholder="Resource Tags (comma seperated)" type="text"/>
|
||||
<Input :keyup="function(){}" id="url" placeholder="Resource URL" type="text"/>
|
||||
<Button :click="click">Post</Button>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Add Resource</h1>
|
||||
<Input
|
||||
:keyup="function () {}"
|
||||
id="name"
|
||||
placeholder="Resource Name"
|
||||
type="text"
|
||||
/>
|
||||
<Input
|
||||
:keyup="function () {}"
|
||||
id="tags"
|
||||
placeholder="Resource Tags (comma seperated)"
|
||||
type="text"
|
||||
/>
|
||||
<Input
|
||||
:keyup="function () {}"
|
||||
id="url"
|
||||
placeholder="Resource URL"
|
||||
type="text"
|
||||
/>
|
||||
<Button :click="click">Post</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Input from './Input.vue';
|
||||
import Button from './Button.vue';
|
||||
import axios from 'axios';
|
||||
import Input from "./Input.vue"
|
||||
import Button from "./Button.vue"
|
||||
import axios from "axios"
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
async click(e) {
|
||||
const name = document.getElementById("name").value
|
||||
const tags = document.getElementById("tags").value
|
||||
const url = document.getElementById("url").value
|
||||
const token = localStorage.getItem("token")
|
||||
const res = await axios.get(`/api/resources/add?token=${token}&name=${name}&tags=${tags}&url=${url}`)
|
||||
if(res.data["error"]!==0)
|
||||
return alert("Error!")
|
||||
alert("Resource added!")
|
||||
location.reload()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async click(e) {
|
||||
const name = document.getElementById("name").value
|
||||
const tags = document.getElementById("tags").value
|
||||
const url = document.getElementById("url").value
|
||||
const token = localStorage.getItem("token")
|
||||
const res = await axios.get(
|
||||
`/api/resources/add?token=${token}&name=${name}&tags=${tags}&url=${url}`
|
||||
)
|
||||
if (res.data["error"] !== 0) return alert("Error!")
|
||||
alert("Resource added!")
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1{
|
||||
color: var(--white);
|
||||
font-size: 50px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
h1 {
|
||||
color: var(--white);
|
||||
font-size: 50px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div{
|
||||
background-color: var(--dark-three);
|
||||
padding: 50px;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
div {
|
||||
background-color: var(--dark-three);
|
||||
padding: 50px;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,42 +1,42 @@
|
||||
<template>
|
||||
<nuxt-link :to="url">
|
||||
<nuxt-link :to="url">
|
||||
<h1>{{ title }}</h1>
|
||||
<p>{{ info }}</p>
|
||||
<h2>{{ desc }}</h2>
|
||||
</nuxt-link>
|
||||
<h2>{{ desc }}</h2>
|
||||
</nuxt-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["title", "desc", "info", "url"],
|
||||
props: ["title", "desc", "info", "url"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
a{
|
||||
padding: 30px;
|
||||
color: white;
|
||||
background: var(--dark-two);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: .4s;
|
||||
width: 70%;
|
||||
a {
|
||||
padding: 30px;
|
||||
color: white;
|
||||
background: var(--dark-two);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: 0.4s;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
box-shadow: var(--def-shadow);
|
||||
a:hover {
|
||||
box-shadow: var(--def-shadow);
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 40px;
|
||||
margin-bottom: 5px;
|
||||
animation-name: colorAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
text-shadow: none;
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-bottom: 5px;
|
||||
animation-name: colorAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin-top: 10px;
|
||||
h2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,62 +1,62 @@
|
||||
<template>
|
||||
<main @click="redirect()">
|
||||
<i class='bx bx-code-alt'></i>
|
||||
<div>
|
||||
<h1>{{ name }}</h1>
|
||||
<h2>{{ desc }}</h2>
|
||||
</div>
|
||||
</main>
|
||||
<main @click="redirect()">
|
||||
<i class="bx bx-code-alt"></i>
|
||||
<div>
|
||||
<h1>{{ name }}</h1>
|
||||
<h2>{{ desc }}</h2>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["name", "desc", "url"],
|
||||
methods: {
|
||||
redirect(e) {
|
||||
location.href=this.url
|
||||
}
|
||||
},
|
||||
props: ["name", "desc", "url"],
|
||||
methods: {
|
||||
redirect(e) {
|
||||
location.href = this.url
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
main {
|
||||
color: var(--white);
|
||||
background: var(--dark-two);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 40px;
|
||||
cursor: pointer;
|
||||
transition: .4s;
|
||||
height: 100px;
|
||||
width: 450px;
|
||||
color: var(--white);
|
||||
background: var(--dark-two);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 40px;
|
||||
cursor: pointer;
|
||||
transition: 0.4s;
|
||||
height: 100px;
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
main:hover{
|
||||
box-shadow: var(--def-shadow);
|
||||
main:hover {
|
||||
box-shadow: var(--def-shadow);
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 65px;
|
||||
animation-name: colorAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
i {
|
||||
font-size: 65px;
|
||||
animation-name: colorAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 35px;
|
||||
margin-bottom: 10px;
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 25px;
|
||||
h2 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1416px) {
|
||||
main{
|
||||
width: 80%;
|
||||
}
|
||||
main {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,28 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1416px) {
|
||||
div {
|
||||
flex-direction: column;
|
||||
}
|
||||
div {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,66 +1,66 @@
|
||||
<template>
|
||||
<main @click="redirect()" class="mn">
|
||||
<div class="resource">
|
||||
<h1>{{ name }}</h1>
|
||||
<div class="tags">
|
||||
<Tag v-for="tag in tags" :key="tag">{{ tag }}</Tag>
|
||||
</div>
|
||||
</div>
|
||||
<i class='bx bx-right-arrow-alt' ></i>
|
||||
</main>
|
||||
<main @click="redirect()" class="mn">
|
||||
<div class="resource">
|
||||
<h1>{{ name }}</h1>
|
||||
<div class="tags">
|
||||
<Tag v-for="tag in tags" :key="tag">{{ tag }}</Tag>
|
||||
</div>
|
||||
</div>
|
||||
<i class="bx bx-right-arrow-alt"></i>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tag from './Tag.vue';
|
||||
import Tag from "./Tag.vue"
|
||||
|
||||
export default {
|
||||
props: ["tags", "name", "url"],
|
||||
methods: {
|
||||
redirect(e){
|
||||
location.href = this.url
|
||||
}
|
||||
props: ["tags", "name", "url"],
|
||||
methods: {
|
||||
redirect(e) {
|
||||
location.href = this.url
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
main{
|
||||
background: var(--dark-two);
|
||||
padding: 30px 40px 30px 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: var(--white);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: .4s;
|
||||
width: 80%;
|
||||
cursor: pointer;
|
||||
main {
|
||||
background: var(--dark-two);
|
||||
padding: 30px 40px 30px 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: var(--white);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: 0.4s;
|
||||
width: 80%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
main:hover{
|
||||
box-shadow: var(--def-shadow);
|
||||
main:hover {
|
||||
box-shadow: var(--def-shadow);
|
||||
}
|
||||
|
||||
.mn:hover i{
|
||||
color: white;
|
||||
.mn:hover i {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.resource{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
.resource {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tags{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 70px;
|
||||
cursor: pointer;
|
||||
color: var(--dark-two);
|
||||
transition: .4s;
|
||||
i {
|
||||
font-size: 70px;
|
||||
cursor: pointer;
|
||||
color: var(--dark-two);
|
||||
transition: 0.4s;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,24 +1,20 @@
|
||||
<template>
|
||||
<p>
|
||||
#<slot></slot>
|
||||
</p>
|
||||
<p>#<slot></slot></p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
p{
|
||||
background: var(--dark-three);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 2px white;
|
||||
padding: 5px 10px 5px 10px;
|
||||
font-size: 25px;
|
||||
border-radius: 7px;
|
||||
margin-top: 10px;
|
||||
transition: .4s;
|
||||
}
|
||||
</style>
|
||||
p {
|
||||
background: var(--dark-three);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 2px white;
|
||||
padding: 5px 10px 5px 10px;
|
||||
font-size: 25px;
|
||||
border-radius: 7px;
|
||||
margin-top: 10px;
|
||||
transition: 0.4s;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
module.exports = {
|
||||
apps: [
|
||||
{
|
||||
name: 'My Website',
|
||||
exec_mode: 'cluster',
|
||||
instances: 'max', // Or a number of instances
|
||||
script: './node_modules/nuxt/bin/nuxt.js',
|
||||
args: 'start'
|
||||
name: "My Website",
|
||||
exec_mode: "cluster",
|
||||
instances: "max", // Or a number of instances
|
||||
script: "./node_modules/nuxt/bin/nuxt.js",
|
||||
args: "start"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
7
layouts/error.vue
Normal file
7
layouts/error.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$router.push({ path: "/" })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,37 +1,46 @@
|
||||
const express = require("express");
|
||||
const { MongoClient } = require("mongodb");
|
||||
const express = require("express")
|
||||
const { MongoClient } = require("mongodb")
|
||||
const { makeID } = require("../api/util.js")
|
||||
require("dotenv").config()
|
||||
|
||||
const app = express();
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: false }));
|
||||
const app = express()
|
||||
app.use(express.json())
|
||||
app.use(express.urlencoded({ extended: false }))
|
||||
|
||||
const client = new MongoClient(process.env.DATABASE);
|
||||
const client = new MongoClient(process.env.DATABASE)
|
||||
|
||||
app.get("/:id", async (req,res)=>{
|
||||
app.get("/:id", async (req, res) => {
|
||||
const id = req.params.id
|
||||
|
||||
if (typeof id !== "string") return res.redirect("/projects")
|
||||
|
||||
await client.connect()
|
||||
const db = await client.db("ngn13")
|
||||
const col = await db.collection("projects")
|
||||
const db = client.db("ngn13")
|
||||
const col = db.collection("projects")
|
||||
const projects = await col.find().toArray()
|
||||
|
||||
console.log(projects)
|
||||
|
||||
for(let i=0; i<projects.length;i++){
|
||||
if(makeID(projects[i]["name"])===id){
|
||||
for (let i = 0; i < projects.length; i++) {
|
||||
if (makeID(projects[i]["name"]) === id) {
|
||||
res.redirect(projects[i]["url"])
|
||||
await col.updateOne({ name: projects[i]["name"] }, { "$set":
|
||||
{ "click": projects[i]["click"]+1 }})
|
||||
return await client.close()
|
||||
await col.updateOne(
|
||||
{ name: projects[i]["name"] },
|
||||
{ $set: { click: projects[i]["click"] + 1 } }
|
||||
)
|
||||
}
|
||||
}
|
||||
await client.close()
|
||||
|
||||
return res.redirect("/projects")
|
||||
})
|
||||
|
||||
async function pexit() {
|
||||
await client.close()
|
||||
process.exit()
|
||||
}
|
||||
|
||||
process.on("SIGTERM", pexit)
|
||||
process.on("SIGINT", pexit)
|
||||
|
||||
export default {
|
||||
path: "/l",
|
||||
handler: app,
|
||||
handler: app
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ export default {
|
||||
head: {
|
||||
title: "[ngn]",
|
||||
htmlAttrs: {
|
||||
lang: "en",
|
||||
lang: "en"
|
||||
},
|
||||
meta: [
|
||||
{ charset: "utf-8" },
|
||||
@ -10,14 +10,24 @@ export default {
|
||||
{ hid: "description", name: "description", content: "" },
|
||||
{ name: "format-detection", content: "telephone=no" },
|
||||
{ hid: "og:title", content: "[ngn]" },
|
||||
{ hid: "og:description", content: "personal website of ngn | read my blogs, check out my projects, discover cool resources" },
|
||||
{ hid: "og:url", content: "https://ngn13.fun" },
|
||||
{ name: "theme-color", content: "#141414", "data-react-helmet":"true"},
|
||||
{
|
||||
hid: "og:description",
|
||||
content:
|
||||
"personal website of ngn | read my blogs, check out my projects, discover cool resources"
|
||||
},
|
||||
{ hid: "og:url", content: "https://ngn13.fun" },
|
||||
{ name: "theme-color", content: "#141414", "data-react-helmet": "true" }
|
||||
],
|
||||
|
||||
link: [
|
||||
{ rel: "stylesheet", href: "https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" },
|
||||
{ rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-dark.css" }
|
||||
{
|
||||
rel: "stylesheet",
|
||||
href: "https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
|
||||
},
|
||||
{
|
||||
rel: "stylesheet",
|
||||
href: "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-dark.css"
|
||||
}
|
||||
]
|
||||
},
|
||||
css: ["@/static/global.css"],
|
||||
@ -26,11 +36,11 @@ export default {
|
||||
buildModules: [],
|
||||
modules: ["@nuxtjs/axios"],
|
||||
axios: {
|
||||
baseURL: "/",
|
||||
baseURL: "/"
|
||||
},
|
||||
build: {},
|
||||
serverMiddleware: {
|
||||
"/api": "~/api",
|
||||
"/l": "~/links",
|
||||
},
|
||||
};
|
||||
"/l": "~/links"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "my-website",
|
||||
"version": "2.4.0",
|
||||
"version": "2.5.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "nuxt",
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user