finish up the atom news feed API

app/src/lib/card.svelte

@@ -1,52 +1,63 @@
 <script>
-  export let title
+  export let title;
 
-  let current = ""
-  let i = 0
+  let current = "";
+  let i = 0;
 
   while (title.length > i) {
-    let c = title[i] 
-    setTimeout(()=>{
-      current += c
-    }, 100*(i+1))
-    i += 1
+    let c = title[i];
+    setTimeout(
+      () => {
+        current += c;
+      },
+      100 * (i + 1)
+    );
+    i += 1;
   }
 </script>
 
 <div class="main">
   <div class="title">
     root@ngn.tf:~# {current}
-  </div> 
+  </div>
   <div class="content">
     <slot></slot>
   </div>
 </div>
 
 <style>
-.main {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background: var(--dark-three);
-  box-shadow: var(--box-shadow);
-  border-radius: var(--radius);
-  border: solid 1px var(--border-color);
-}
+  .main {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: var(--dark-three);
+    box-shadow: var(--box-shadow);
+    border-radius: var(--radius);
+    border: solid 1px var(--border-color);
+  }
 
-.title {
-  background: var(--dark-two);
-  padding: 25px;
-  border-radius: 7px 7px 0px 0px;
-  font-size: 20px; 
-  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
-  color: white;
-}
+  .title {
+    background: var(--dark-two);
+    padding: 25px;
+    border-radius: 7px 7px 0px 0px;
+    font-size: 20px;
+    font-family:
+      Consolas,
+      Monaco,
+      Lucida Console,
+      Liberation Mono,
+      DejaVu Sans Mono,
+      Bitstream Vera Sans Mono,
+      Courier New,
+      monospace;
+    color: white;
+  }
 
-.content {
-  background: var(--dark-three);
-  padding: 30px;
-  color: white;
-  border-radius: 5px;
-  font-size: 25px;
-}
+  .content {
+    background: var(--dark-three);
+    padding: 30px;
+    color: white;
+    border-radius: 5px;
+    font-size: 25px;
+  }
 </style>

app/src/lib/card_link.svelte

@@ -1,21 +1,24 @@
 <script>
-  export let title
-  export let url
-  let audio
+  export let title;
+  export let url;
+  let audio;
 
-  let current = ""
-  let i = 0
+  let current = "";
+  let i = 0;
 
   while (title.length > i) {
-    let c = title[i] 
-    setTimeout(()=>{
-      current += c
-    }, 100*(i+1))
-    i += 1
+    let c = title[i];
+    setTimeout(
+      () => {
+        current += c;
+      },
+      100 * (i + 1)
+    );
+    i += 1;
   }
 
   function epicSound() {
-    audio.play()
+    audio.play();
   }
 </script>
 
@@ -25,46 +28,54 @@
   </audio>
   <div class="title">
     {current}
-  </div> 
+  </div>
   <div class="content">
     <slot></slot>
   </div>
 </a>
 
 <style>
-a {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background: var(--dark-three);
-  box-shadow: var(--box-shadow);
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: .4s;
-  text-decoration: none;
-  border: solid 1px var(--border-color);
-}
+  a {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: var(--dark-three);
+    box-shadow: var(--box-shadow);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: 0.4s;
+    text-decoration: none;
+    border: solid 1px var(--border-color);
+  }
 
-a:hover > .title {
-  text-shadow: var(--text-shadow); 
-}
+  a:hover > .title {
+    text-shadow: var(--text-shadow);
+  }
 
-.title {
-  border: solid 1px var(--dark-two);
-  background: var(--dark-two);
-  padding: 25px;
-  border-radius: 7px 7px 0px 0px;
-  font-size: 20px; 
-  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
-  color: white;
-}
+  .title {
+    border: solid 1px var(--dark-two);
+    background: var(--dark-two);
+    padding: 25px;
+    border-radius: 7px 7px 0px 0px;
+    font-size: 20px;
+    font-family:
+      Consolas,
+      Monaco,
+      Lucida Console,
+      Liberation Mono,
+      DejaVu Sans Mono,
+      Bitstream Vera Sans Mono,
+      Courier New,
+      monospace;
+    color: white;
+  }
 
-.content {
-  background: var(--dark-three);
-  padding: 30px;
-  padding-top: 30px;
-  color: white;
-  border-radius: 5px;
-  font-size: 25px;
-}
+  .content {
+    background: var(--dark-three);
+    padding: 30px;
+    padding-top: 30px;
+    color: white;
+    border-radius: 5px;
+    font-size: 25px;
+  }
 </style>

app/src/lib/header.svelte

@@ -1,5 +1,5 @@
 <script>
-export let subtitle = ""
+  export let subtitle = "";
 </script>
 
 <header>
@@ -10,32 +10,31 @@ export let subtitle = ""
 </header>
 
 <style>
-header {
-  background: 
-    linear-gradient(rgba(11, 11, 11, 0.808), rgba(1, 1, 1, 0.96)), 
-    url("https://files.ngn.tf/banner.png");
-  background-size: 50%;
-  width: 100%;
-  height: 100%;
-}
+  header {
+    background: linear-gradient(rgba(11, 11, 11, 0.808), rgba(1, 1, 1, 0.96)),
+      url("https://files.ngn.tf/banner.png");
+    background-size: 50%;
+    width: 100%;
+    height: 100%;
+  }
 
-h1 {
-  font-weight: 900;
-  font-size: 500%;
-  padding: 120px;
-  padding-bottom: 0;
-  text-align: center;
-  color: white;
-  text-shadow: var(--text-shadow); 
-  text-size-adjust: 80%;
-}
+  h1 {
+    font-weight: 900;
+    font-size: 500%;
+    padding: 120px;
+    padding-bottom: 0;
+    text-align: center;
+    color: white;
+    text-shadow: var(--text-shadow);
+    text-size-adjust: 80%;
+  }
 
-h4 {
-  padding-bottom: 120px;
-  font-weight: 600;
-  font-size: 200%;
-  text-align: center;
-  color: white;
-  text-size-adjust: 80%;
-}
+  h4 {
+    padding-bottom: 120px;
+    font-weight: 600;
+    font-size: 200%;
+    text-align: center;
+    color: white;
+    text-size-adjust: 80%;
+  }
 </style>

app/src/lib/navbar.svelte

@@ -1,51 +1,43 @@
 <script>
+  import { color } from "$lib/util.js";
   import NavbarLink from "./navbar_link.svelte";
 </script>
 
-<nav>
-  <div>
-    <h3>[ngn.tf]</h3>
-  </div>
+<nav style="border-bottom: solid 2px var(--{color()});">
+  <h3 style="color: var(--{color()})">[ngn.tf]</h3>
 
   <div>
     <NavbarLink link="/">home</NavbarLink>
+    <NavbarLink link="/news">news</NavbarLink>
     <NavbarLink link="/services">services</NavbarLink>
-    <NavbarLink link="/blog">blog</NavbarLink>
     <!-- <NavbarLink link="/donate">donate</NavbarLink> -->
-    <NavbarLink link="https://stats.ngn.tf">status</NavbarLink>
   </div>
 </nav>
 
 <style>
-nav {
-  background: var(--dark-one);
-  padding: 20px 26px 22px 20px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: solid 1.5px black;
-  animation-name: borderAnimation;
+  nav {
+    background: var(--dark-one);
+    padding: 20px 30px 20px 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    /*animation-name: borderAnimation;
   animation-duration: 10s;
-  animation-iteration-count: infinite;
-  box-shadow: var(--def-shadow);
-}
+  animation-iteration-count: infinite;*/
+    box-shadow: var(--def-shadow);
+  }
 
-div {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: right;
-  gap: 15px;
-}
+  div {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: right;
+    gap: 15px;
+  }
 
-h3 {
-  font-weight: 900;
-  font-size: 25px;
-  color: red;
-  animation-name: colorAnimation;
-  animation-iteration-count: infinite;
-  animation-duration: 10s;
-}
+  h3 {
+    font-weight: 900;
+    font-size: 20px;
+  }
 </style>
-

app/src/lib/navbar_link.svelte

@@ -1,47 +1,28 @@
 <script>
-  import { page } from "$app/stores"
-  export let link 
-  export let type
-  let audio
-
-  function epicSound() {
-    audio.play()
-  }
+  import { color, click } from "$lib/util.js";
+  export let link;
 </script>
 
-<div>
-  <audio bind:this={audio} preload="auto">
-    <source src="/click.wav" type="audio/mpeg" />
-  </audio>
-  {#if type==="icon"} 
-    <a class="icon" data-sveltekit-preload-data on:click={epicSound} href="{link}"><slot></slot></a>
-  {:else}
-    <a data-sveltekit-preload-data on:click={epicSound} href="{link}"><slot></slot></a>
-  {/if}
-</div>
+<a
+  style="text-decoration-color: var(--{color()})"
+  data-sveltekit-preload-data
+  on:click={click}
+  href={link}
+>
+  <slot></slot>
+</a>
 
 <style>
-a {
-  font-weight: 700;
-  font-size: 22px;
-  text-decoration: none;
-  color: white;
-  cursor: pointer;
-}
+  a {
+    font-weight: 700;
+    font-size: 20px;
+    text-decoration: none;
+    color: white;
+    cursor: pointer;
+  }
 
-a:hover {
-  text-decoration: underline;
-  text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
-  animation-name: underlineAnimation;
-  animation-duration: 5s;
-  animation-iteration-count: infinite;
-}
-
-.icon:hover {
-  text-decoration: none;
-  text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
-  animation-name: colorAnimation;
-  animation-duration: 5s;
-  animation-iteration-count: infinite;
-}
+  a:hover {
+    text-decoration: underline;
+    text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+  }
 </style>

app/src/lib/service.svelte

@@ -1,17 +1,17 @@
 <script>
-  export let desc
-  export let url
+  export let desc;
+  export let url;
 
-  let icon = "<i class='nf nf-md-clipboard_multiple'></i>"
-  let audio
+  let icon = "<i class='nf nf-md-clipboard_multiple'></i>";
+  let audio;
 
   function copy() {
-    audio.play()
-    navigator.clipboard.writeText(url)
-    icon = "<i class='nf nf-md-clipboard_check'></i>"
-    setTimeout(()=>{
-      icon = "<i class='nf nf-md-clipboard_multiple'></i>"
-    }, 500)
+    audio.play();
+    navigator.clipboard.writeText(url);
+    icon = "<i class='nf nf-md-clipboard_check'></i>";
+    setTimeout(() => {
+      icon = "<i class='nf nf-md-clipboard_multiple'></i>";
+    }, 500);
   }
 </script>
 
@@ -25,54 +25,56 @@
   </div>
   <div>
     <button on:click={copy}>{@html icon}</button>
-    <a href="{url}"><i class="nf nf-oct-link_external"></i></a>
+    <a href={url}><i class="nf nf-oct-link_external"></i></a>
   </div>
 </main>
 
 <style>
-main {
-  display: flex;
-  flex-direction: row;
-  padding: 30px 30px 30px 30px;
-  background: var(--dark-two);
-  border-radius: var(--radius);
-  box-shadow: var(--box-shadow);
-  border: solid 1px var(--border-color);
-  justify-content: space-between;
-  align-items: center;
-  color: white;
-  gap: 100px;
-  transition: .4s;
-  flex-grow: 1;
-  flex: 1 1 0px;
-}
+  main {
+    display: flex;
+    flex-direction: row;
+    padding: 30px 30px 30px 30px;
+    background: var(--dark-two);
+    border-radius: var(--radius);
+    box-shadow: var(--box-shadow);
+    border: solid 1px var(--border-color);
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+    gap: 100px;
+    transition: 0.4s;
+    flex-grow: 1;
+    flex: 1 1 0px;
+  }
 
-div h1 {
-  animation-name: colorAnimation;
-  animation-duration: 10s;
-  animation-iteration-count: infinite;
-  font-size: 30px;
-}
+  div h1 {
+    animation-name: colorAnimation;
+    animation-duration: 10s;
+    animation-iteration-count: infinite;
+    font-size: 30px;
+  }
 
-div p {
-  margin-top: 10px;
-  font-size: 20px; 
-}
+  div p {
+    margin-top: 10px;
+    font-size: 20px;
+  }
 
-a, button {
-  text-align: center;
-  font-size: 30px;
-  text-decoration: none;
-  color: white;
-  border: none;
-  background: none;
-  outline: none;
-  cursor: pointer;
-}
+  a,
+  button {
+    text-align: center;
+    font-size: 30px;
+    text-decoration: none;
+    color: white;
+    border: none;
+    background: none;
+    outline: none;
+    cursor: pointer;
+  }
 
-a:hover, button:hover{
-  animation-name: colorAnimation;
-  animation-duration: 5s;
-  animation-iteration-count: infinite;
-}
+  a:hover,
+  button:hover {
+    animation-name: colorAnimation;
+    animation-duration: 5s;
+    animation-iteration-count: infinite;
+  }
 </style>

app/src/lib/util.js

@@ -0,0 +1,16 @@
+function click() {
+  let audio = new Audio("/click.wav");
+  audio.play();
+}
+
+let colors_pos = -1;
+const colors = ["yellow", "cyan", "green", "pinkish", "red", "blue"];
+
+function color() {
+  if (colors_pos < 0) colors_pos = Math.floor(Math.random() * colors.length);
+  else if (colors_pos >= colors.length) colors_pos = 0;
+
+  return colors[colors_pos];
+}
+
+export { click, color };