update?

app/src/routes/+error.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { onMount } from "svelte"
+  import { goto } from "$app/navigation"
+
+  onMount(()=>{
+    goto("/")
+  })
+</script>

app/src/routes/+layout.svelte

@@ -0,0 +1,12 @@
+<script>
+  import Navbar from "../lib/navbar.svelte";
+</script> 
+
+<main>
+  <Navbar />
+  <slot></slot>
+</main>
+
+<style>
+  @import "../../static/global.css";
+</style>

app/src/routes/+page.svelte

@@ -0,0 +1,139 @@
+<script>
+  import Header from "../lib/header.svelte";
+  import Card from "../lib/card.svelte";
+</script>
+
+<svelte:head>
+  <title>[ngn] | homepage</title> 
+  <meta content="[ngn] | homepage" property="og:title" />
+  <meta content="Homepage of my personal website" property="og:description" />
+  <meta content="https://ngn13.fun" property="og:url" />
+  <meta content="#000000" data-react-helmet="true" name="theme-color" />
+</svelte:head>
+
+<Header>
+  <c>echo</c> 
+  hello world!
+</Header>
+
+<main>
+  <div class="flexbox">
+    <Card title="whoami">
+      👋 Hello! I'm ngn! 
+      <ul>
+        <li>🇹🇷 I'm a high school student from Turkey</li>
+        <li>🖥️ I'm interested in cyber security, programming and electronics</li>
+        <li>❤️ I love and support Free/Libre and Open Source Software (FLOSS)</li>
+        <li>🐧 My GNU/Linux distribution of choice is Artix, however I am currently running Arch</li>
+      </ul>
+    </Card>
+
+    <Card title="pwd">
+      You are currently on my personal website, for all you nerds, here is some 
+      techinal details you may want to know:
+      <ul>
+        <li><c> </c> I built the frontend app using SvelteKit</li> 
+        <li><c>󰒋 </c> Backend API is written in Go and it's hosted on my server</li>
+        <li><c> </c> All assets (images, fonts etc.) are hosted on my server as well</li>
+        <li><c> </c> No cloudflare, no CAPTCHAs, no CDNs, this website is %100 privacy friendly</li>
+      </ul>
+    </Card>
+  </div>
+
+  <div class="flexbox">
+    <Card title="ps -eaf">
+      I usually spend my time...
+      <ul>
+        <li><c>⌨️</c> building random projects</li>
+        <li><c>👥</c> contributing stuff that I like</li> 
+        <li><c>🚩</c> solving CTFs</li> 
+        <li><c>🖥️</c> customizing my desktop</li>
+        <li><c>📑</c> posting random stuff on my blog, you should definitely check it out btw (it's very active)</li>
+      </ul>
+    </Card>
+
+    <Card title="wall">
+      Here are some of my socials: 
+      <ul>
+        <li><c> </c> <a href="https://github.com/ngn13">Github</a></li> 
+        <li><c>󰫑 </c> <a href="https://mastodon.social/@ngn">Mastodon</a></li> 
+      </ul>
+      If you want to contact me directly, send me an email:
+      <ul>
+        <li><c></c> <a href="mailto:ngn13proton@proton.me">Personal email address</a></li>
+        <li><c>󰇮</c> <a href="mailto:ngn13proton@proton.me">Proton email address</a></li>
+      </ul>
+      Or you can add me on XMPP: <c>ngn@chat.ngn13.fun</c>
+    </Card>
+  </div>
+  <Card title="bash donate.sh">
+    If you want to do something stupid with your mone- 
+    <br>
+    I mean if you want to support me and my silly little work, here is my monero wallet address:
+    <br>
+    <br>
+    <code>
+      46q7G7u7cmASvJm7AmrhmNg6ctS77mYMmDAy1QxpDn5w57xV3GUY5za4ZPZHAjqaXdfS5YRWm4AVj5UArLDA1retRkJp47F 
+    </code>
+  </Card>
+</main>
+
+<div class="version">
+  <p>v4.0</p>
+</div>
+
+<style>
+main{
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+  padding: 50px;
+}
+
+code {
+  background: var(--dark-two);
+  color: white;
+  border-radius: var(--radius);
+  text-shadow: var(--text-shadow);
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.flexbox {
+  display: flex;
+  gap: 30px;
+}
+
+ul {
+  padding-left: 30px;
+  margin-bottom: 20px;
+}
+
+li {
+  padding-top: 15px;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
+
+a:hover {
+  font-weight: 900;
+}
+
+.version {
+  color: var(--dark-fife);
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  font-size: 15px;
+}
+
+@media only screen and (max-width: 1076px) {
+  .flexbox {
+    flex-direction: column;
+  }
+}
+</style>

app/src/routes/blog/+page.js

@@ -0,0 +1,9 @@
+export async function load({ fetch }) {
+  const api = import.meta.env.VITE_API_URL_DEV
+  const res = await fetch(api+"/blog/sum")
+  const data = await res.json()
+
+  return {
+    posts: data["result"] 
+  }
+}

app/src/routes/blog/+page.svelte

@@ -0,0 +1,58 @@
+<script>
+  import Header from "../../lib/header.svelte";
+  import CardLink from "../../lib/card_link.svelte";
+
+  export let data
+  let posts = data.posts 
+</script>
+
+<svelte:head>
+  <title>[ngn] | blog</title> 
+  <meta content="[ngn] | blog" property="og:title" />
+  <meta content="View my blog posts" property="og:description" />
+  <meta content="https://ngn13.fun" property="og:url" />
+  <meta content="#000000" data-react-helmet="true" name="theme-color" />
+</svelte:head>
+
+<Header>
+  <c>/dev/</c>blog
+</Header>
+
+<main>
+  {#each posts as post} 
+    <CardLink url="/blog/{post.id}"  title="{post.title}">
+      <p>{post.author} | {post.date}</p>
+      <br>
+      {post.content}...
+    </CardLink>
+  {/each}
+</main>
+
+<style>
+main{
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+  padding: 15%;
+  padding-top: 50px;
+}
+
+input {
+  text-align: center;
+  background: var(--dark-two);
+  background: none;
+  border: none;
+  outline: none;
+  font-size: 40px;
+}
+
+p {
+  font-size: 20px;
+}
+
+@media only screen and (max-width: 1316px) {
+  main {
+    padding: 50px;
+  }
+}
+</style>

app/src/routes/blog/[id]/+page.server.js

@@ -0,0 +1,14 @@
+export async function load({ fetch, params }) {
+  const id = params.id 
+  const api = import.meta.env.VITE_API_URL_DEV
+  const res = await fetch(api+"/blog/get?id="+id) 
+  const data = await res.json()
+ 
+  if (data["error"] != "") {
+    return {
+      error: data["error"]
+    }
+  }
+
+  return data["result"] 
+}

app/src/routes/blog/[id]/+page.svelte

@@ -0,0 +1,165 @@
+<script>
+  import Header from "../../../lib/header.svelte"
+  import { goto } from "$app/navigation"
+  import { onMount } from "svelte"
+  import DOMPurify from "dompurify"
+  import { marked } from "marked"
+
+  export let data 
+  let sanitized
+  const api = import.meta.env.VITE_API_URL_DEV
+
+  let upvote_status = "inactive"
+  let downvote_status = "inactive"
+  let voted = false
+  let audio
+
+  async function get_status() {
+    const res = await fetch(api+"/blog/vote/status?id="+data.id)
+    const json = await res.json()
+    
+    if(json["error"]!= ""){
+      return
+    }
+
+    if (json["result"] == "upvote") {
+      upvote_status = "active"
+      downvote_status = "inactive"
+    }
+    else {
+      downvote_status = "active"
+      upvote_status = "inactive"
+    }
+    
+    voted = true
+  }
+
+  onMount(async ()=>{
+    if (data.title == undefined) 
+      goto("/blog")
+
+    sanitized = DOMPurify.sanitize(
+      marked.parse(data.content, { breaks: true }),
+      {
+        ADD_TAGS: ["iframe"],
+        ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling"]
+      }
+    )
+    
+    await get_status()
+  })
+
+  async function upvote(){
+    audio.play()
+    const res = await fetch(api+"/blog/vote/set?id="+data.id+"&to=upvote")
+    const json = await res.json()
+
+    if(json["error"] != ""){
+      return
+    }
+
+    if (voted){
+      data.vote += 2
+    } 
+    else {
+      voted = true
+      data.vote += 1
+    }
+
+    await get_status()
+  }
+
+  async function downvote(){
+    audio.play()
+    const res = await fetch(api+"/blog/vote/set?id="+data.id+"&to=downvote")
+    const json = await res.json()
+
+    if(json["error"] != ""){
+      return
+    }
+
+    if (voted){
+      data.vote -= 2
+    } 
+    else {
+      voted = true
+      data.vote -= 1
+    }
+
+    await get_status()
+  }
+</script>
+
+<svelte:head>
+  <title>[ngn] | {data.title}</title> 
+  <meta content="[ngn] | blog" property="og:title" />
+  <meta content="{data.content.substring(0, 100)}..." property="og:description" />
+  <meta content="https://ngn13.fun" property="og:url" />
+  <meta content="#000000" data-react-helmet="true" name="theme-color" />
+</svelte:head>
+
+<Header>
+  <c>{data.title}</c>
+  <p>{data.author} | {data.date}</p>
+</Header>
+
+<main>
+  <audio bind:this={audio} preload="auto">
+    <source src="/click.wav" type="audio/mpeg" />
+  </audio>
+  <div class="content markdown-body">
+    {@html sanitized}
+  </div>
+  <div class="votes">
+    <h3 on:click={async ()=>{upvote()}} class="{upvote_status}">󰜷</h3>
+    <p>{data.vote}</p>
+    <h3 on:click={async ()=>{downvote()}} class="{downvote_status}">󰜮</h3>
+  </div>
+</main>
+
+<style>
+p {
+  font-size: 30px;
+}
+
+main {
+  padding: 50px;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  justify-content: center;
+}
+
+.content {
+  max-width: 80%;
+  padding: 40px;
+  background: var(--dark-two);
+  box-shadow: var(--box-shadow);
+  border-radius: 7px;
+}
+
+.votes {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  text-shadow: var(--text-shadow);
+}
+
+.votes h3{
+  font-size: 40px;
+  cursor: pointer;
+}
+
+.votes h3:hover {
+  animation-name: colorAnimation;
+  animation-iteration-count: infinite;
+  animation-duration: 10s;
+}
+
+.active {
+  animation-name: colorAnimation;
+  animation-iteration-count: infinite;
+  animation-duration: 10s;
+}
+</style>

app/src/routes/services/+page.js

@@ -0,0 +1,41 @@
+export async function load({ fetch }) {
+  const api = import.meta.env.VITE_API_URL_DEV
+  const res = await fetch(api+"/services/all")
+  const data = await res.json()
+
+  if (data["error"] != ""){
+    return {
+      error: data["error"]
+    }
+  }
+
+  // Some really bad code to convert 
+  // [service1, service2, service3...] 
+  // to 
+  // [[service1, service2, service3], [service4, service5...]...]
+  // so i can render it in the UI easily
+
+  let all = data["result"]
+  let counter = 0
+  let currentlist = []  
+  let services = []  
+
+  for (let i = 0; i < all.length; i++){
+    currentlist.push(all[i])
+    counter += 1
+
+    if(i == all.length-1 && counter != 3){
+      services.push(currentlist)
+    }
+
+    if (counter == 3) {
+      services.push(currentlist)
+      currentlist = []
+      counter = 0
+    }
+  }
+
+  return {
+    services 
+  }
+}

app/src/routes/services/+page.svelte

@@ -0,0 +1,76 @@
+<script>
+  import Header from "../../lib/header.svelte";
+  import Service from "../../lib/service.svelte";
+
+  export let data 
+</script>
+
+<svelte:head>
+  <title>[ngn] | services</title> 
+  <meta content="[ngn] | services" property="og:title" />
+  <meta content="Stuff that I host" property="og:description" />
+  <meta content="https://ngn.tf" property="og:url" />
+  <meta content="#000000" data-react-helmet="true" name="theme-color" />
+</svelte:head>
+<Header><c>ls -l</c> services</Header>
+<main>
+  <div class="info">
+    <h1></h1>
+    <p>
+      These are free to use FOSS services that I host on my server. 
+      If you want an account on any of these services, or if you are having issues with them, 
+      please send an email to services@ngn.tf 
+    </p>
+  </div>
+  {#each data.services as services_list}
+    <div class="flexrow">
+      {#each services_list as service}
+        <Service url="{service.url}" desc="{service.desc}">{service.name}</Service>
+      {/each} 
+    </div>
+  {/each}
+</main>
+
+<style>
+.info h1 {
+  margin-right: 40px;
+  animation-name: colorAnimation;
+  animation-duration: 5s;
+  animation-iteration-count: infinite;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 40px;
+  color: white;
+  border-radius: var(--radius); 
+  font-size: 25px;
+  margin-bottom: 30px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  padding: 50px;
+  gap: 25px;
+}
+
+.flexrow {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+  gap: 25px;
+}
+
+@media only screen and (max-width: 1316px) {
+  .flexrow {
+    flex-direction: column;
+  }
+}
+</style>