new routes done + fixed blog

pages/blog/_id/index.vue

@@ -6,14 +6,7 @@
             <p>{{ post.info }}</p>
         </Header>
         <div class="postcontain">
-            <div class="lang">
-                <button v-if="lang==='en'" class="bl bs">EN <span class="fi fi-gb"></span></button>
-                <button v-on:click="toggle_lang" v-else class="bl">EN <span class="fi fi-gb"></span></button>
-                <button v-if="lang==='tr'" class="br bs">TR <span class="fi fi-tr"></span></button>
-                <button v-on:click="toggle_lang" v-else class="br">TR <span class="fi fi-tr"></span></button>
-            </div>
-            <main class="postself" v-if="lang==='en'" v-html="en"></main>
-            <main class="postself" v-else v-html="tr"></main>
+            <main class="markdown-body" v-html="content"></main>
         </div>
     </div>
 </template>
@@ -39,30 +32,24 @@ export default {
         };
     },
 
-    methods: {
-        toggle_lang(){
-            this.lang = this.lang==="tr" ? "en" : "tr"
-            localStorage.setItem("lang", this.lang)
-        }
-    },
 
     data() {
         return {
             post: {},
             lang: "",
-            en: "",
-            tr: "",
+            content: "",
         }
     },
 
     async created() {
-        const res = await axios.get(`/api/get_post?id=${this.$route.params.id}`)
+        const res = await axios.get(`/api/blog/get?id=${this.$route.params.id}`)
         if (res.data["error"] === 3)
             return this.$router.push({ path: "/blog" })
         this.post = res.data["post"]
-        this.en = DOMPurify.sanitize(marked.parse(this.post["content"]["en"]))
-        this.tr = DOMPurify.sanitize(marked.parse(this.post["content"]["tr"]))
-        this.lang = localStorage.getItem("lang")!==undefined&&(localStorage.getItem("lang")==="tr"||localStorage.getItem("lang")==="en") ? localStorage.getItem("lang") : "en"
+        this.content = DOMPurify.sanitize(
+          marked.parse(this.post["content"], { breaks: true }),
+          { ADD_TAGS: ["iframe"], ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] }
+        )
     }
 
 }
@@ -77,11 +64,6 @@ p {
     font-size: 30px;
 }
 
-span{
-    width: 30px;
-    border-radius: 5px;
-}
-
 .info {
     display: flex;
     flex-direction: row;
@@ -89,90 +71,39 @@ span{
     justify-content: center;
 }
 
-.lang {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20px;
-}
-
-button{
-    padding: 10px 30px 10px 30px;
-    font-size: 20px;
-    background-color: var(--dark-two);
-    border: none;
-    cursor: pointer;
-    color: white
-}
-.bs{
-    background-color: var(--dark-three);
-}
-.bl{
-    border-radius: 15px 0px 0px 0px;
-}
-
-.br{
-    border-radius: 0px 15px 0px 0px;
-}
-
 .postcontain{
     padding: 50px;
 }
 
-.postself {
-    text-align: left;
-    font-size: 30px;
-    color: white;
-    padding: 20px 40px 70px 40px;
-    line-height: 40px;
+.markdown-body {
+    font-size: 25px;
+    padding: 50px;
     border-radius: 15px;
     background-color: var(--dark-three);
 }
 </style>
 
 <style>
-.postself code {
-    background: var(--dark-two);
-    border-radius: 5px;
-    font-size: 18px;
-    padding: 5px;
-    font-style: italic;
+@import url("https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-dark.css");
+
+.markdown-body{
+    font-family: "Ubuntu", sans-serif;
 }
 
-.postself h1{
-    margin-top: 70px;
-    margin-bottom: 20px;
+.markdown-body h1{
+  border-bottom: 1px solid #505050;
 }
 
-.postself h2{
-    margin-top: 60px;
-    margin-bottom: 20px;
+.markdown-body iframe{
+  display: block;
+  margin: 20px 0px;
 }
 
-.postself h3{
-    margin-top: 50px;
-    margin-bottom: 20px;
+.markdown-body a{
+  animation-name: colorAnimation;
+  animation-iteration-count: infinite;
+  animation-duration: 10s;
+  text-shadow: none;
 }
 
-.postself h4{
-    margin-top: 40px;
-    margin-bottom: 20px;
-}
-
-.postself h5{
-    margin-top: 60px;
-    margin-bottom: 30px;
-}
-
-.postself a{
-    animation-name: colorAnimation;
-    animation-iteration-count: infinite;
-    animation-duration: 10s;
-    text-shadow: none;
-}
-
-li{
-    list-style-type: none;  
-}
-</style>
+</style>