fixing database connections and patching possible nosqli

pages/blog/_id/index.vue

@@ -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>

pages/blog/index.vue

@@ -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>