finish up the atom news feed API
This commit is contained in:
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1024">
|
||||
<link rel="icon" href="data:;base64,=">
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1024" />
|
||||
<link rel="icon" href="data:;base64,=" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
16
app/src/lib/util.js
Normal file
16
app/src/lib/util.js
Normal file
@ -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 };
|
||||
@ -1,8 +1,8 @@
|
||||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { goto } from "$app/navigation"
|
||||
import { onMount } from "svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
onMount(()=>{
|
||||
goto("/")
|
||||
})
|
||||
onMount(() => {
|
||||
goto("/");
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import Navbar from "../lib/navbar.svelte";
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<Navbar />
|
||||
|
||||
@ -4,17 +4,27 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>[ngn.tf] | homepage</title>
|
||||
<title>[ngn.tf] | homepage</title>
|
||||
<meta content="[ngn] | homepage" property="og:title" />
|
||||
<meta content="Homepage of my personal website" property="og:description" />
|
||||
<meta content="https://ngn.tf" property="og:url" />
|
||||
<meta content="#000000" data-react-helmet="true" name="theme-color" />
|
||||
<link rel="alternate" type="application/atom+xml" href="{import.meta.env.VITE_API_URL_DEV+'/blog/feed.atom'}" title="Atom Feed">
|
||||
<link rel="alternate" type="application/rss+xml" href="{import.meta.env.VITE_API_URL_DEV+'/blog/feed.rss'}" title="RSS Feed">
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/atom+xml"
|
||||
href={import.meta.env.VITE_API_URL_DEV + "/blog/feed.atom"}
|
||||
title="Atom Feed"
|
||||
/>
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
href={import.meta.env.VITE_API_URL_DEV + "/blog/feed.rss"}
|
||||
title="RSS Feed"
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<Header>
|
||||
<c>echo</c>
|
||||
<c>echo</c>
|
||||
hello world!
|
||||
</Header>
|
||||
|
||||
@ -23,18 +33,20 @@
|
||||
<Card title="whoami">
|
||||
<div class="whoami-box">
|
||||
<div class="whoami-pic">
|
||||
<img alt="My profile" src="https://files.ngn.tf/pplow.png">
|
||||
<img alt="My profile" src="https://files.ngn.tf/pplow.png" />
|
||||
<a href="https://keyoxide.org/F9E70878C2FB389AEC2BA34CA3654DF5AD9F641D">
|
||||
<c><i class="nf nf-oct-key"></i> Keyoxide</c>
|
||||
</a>
|
||||
</div>
|
||||
<div class="whoami-text">
|
||||
👋 Hello! I'm ngn!
|
||||
👋 Hello! I'm ngn!
|
||||
<ul>
|
||||
<li>🇹🇷 I'm a high school student from Turkey</li>
|
||||
<li>🖥️ I'm interested in cyber security and programming.</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>
|
||||
<li>
|
||||
🐧 My GNU/Linux distribution of choice is Artix, however I am currently running Arch
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -46,34 +58,37 @@
|
||||
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> 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>
|
||||
<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 links if you want to get in contact with me, I highly
|
||||
prefer email and I usually respond to emails in 1 or 2 days, just make
|
||||
sure to check your spam folder (turns out running a TOR relay gets your IP into multiple blacklists)
|
||||
Here are some links if you want to get in contact with me, I highly prefer email and I usually
|
||||
respond to emails in 1 or 2 days, just make sure to check your spam folder (turns out running
|
||||
a TOR relay gets your IP into multiple blacklists)
|
||||
<ul>
|
||||
<li>
|
||||
<c><i class="nf nf-cod-github"></i></c>
|
||||
<c><i class="nf nf-cod-github"></i></c>
|
||||
<a href="https://github.com/ngn13">Github</a>
|
||||
</li>
|
||||
</li>
|
||||
<li>
|
||||
<c><i class="nf nf-md-mastodon"></i></c>
|
||||
<c><i class="nf nf-md-mastodon"></i></c>
|
||||
<a href="https://defcon.social/@ngn" rel="me">Mastodon</a>
|
||||
</li>
|
||||
</li>
|
||||
<li>
|
||||
<c><i class="nf nf-md-email"></i></c>
|
||||
<c><i class="nf nf-md-email"></i></c>
|
||||
<a href="mailto:ngn@ngn.tf">Email</a>
|
||||
</li>
|
||||
</li>
|
||||
<li>
|
||||
<c><i class="nf nf-md-xmpp"></i></c>
|
||||
<c><i class="nf nf-md-xmpp"></i></c>
|
||||
<a href="xmpp:ngn@chat.ngn.tf">XMPP</a>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
@ -84,89 +99,91 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
padding: 50px;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.whoami-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.whoami-pic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
|
||||
border-right: solid 1px var(--dark-fife);
|
||||
padding: 0 35px 0 10px;
|
||||
}
|
||||
|
||||
.whoami-pic img {
|
||||
width: 200px;
|
||||
border-radius: 20px;
|
||||
|
||||
border: solid 1px var(--border-color);
|
||||
animation-name: fullBorderAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
box-shadow: rgba(50, 50, 93, 1) 0px 30px 60px -12px inset, rgba(0, 0, 0, 1) 0px 18px 36px -18px inset;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: inside;
|
||||
}
|
||||
|
||||
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: 1200px) {
|
||||
.flexbox {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
.whoami-box {
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
|
||||
.whoami-pic {
|
||||
border-right: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
|
||||
border-right: solid 1px var(--dark-fife);
|
||||
padding: 0 35px 0 10px;
|
||||
}
|
||||
|
||||
.whoami-pic img {
|
||||
width: 200px;
|
||||
border-radius: 20px;
|
||||
|
||||
border: solid 1px var(--border-color);
|
||||
animation-name: fullBorderAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
box-shadow:
|
||||
rgba(50, 50, 93, 1) 0px 30px 60px -12px inset,
|
||||
rgba(0, 0, 0, 1) 0px 18px 36px -18px inset;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: inside;
|
||||
}
|
||||
|
||||
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: 1200px) {
|
||||
.flexbox {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
.whoami-box {
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.whoami-pic {
|
||||
border-right: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +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()
|
||||
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"]
|
||||
}
|
||||
posts: data["result"],
|
||||
};
|
||||
}
|
||||
|
||||
@ -2,18 +2,28 @@
|
||||
import Header from "../../lib/header.svelte";
|
||||
import CardLink from "../../lib/card_link.svelte";
|
||||
|
||||
export let data
|
||||
let posts = data.posts
|
||||
export let data;
|
||||
let posts = data.posts;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>[ngn.tf] | blog</title>
|
||||
<title>[ngn.tf] | blog</title>
|
||||
<meta content="[ngn] | blog" property="og:title" />
|
||||
<meta content="View my blog posts" property="og:description" />
|
||||
<meta content="https://ngn.tf" property="og:url" />
|
||||
<meta content="#000000" data-react-helmet="true" name="theme-color" />
|
||||
<link rel="alternate" type="application/atom+xml" href="{import.meta.env.VITE_API_URL_DEV+'/blog/feed.atom'}" title="Atom Feed">
|
||||
<link rel="alternate" type="application/rss+xml" href="{import.meta.env.VITE_API_URL_DEV+'/blog/feed.rss'}" title="RSS Feed">
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/atom+xml"
|
||||
href={import.meta.env.VITE_API_URL_DEV + "/blog/feed.atom"}
|
||||
title="Atom Feed"
|
||||
/>
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
href={import.meta.env.VITE_API_URL_DEV + "/blog/feed.rss"}
|
||||
title="RSS Feed"
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<Header>
|
||||
@ -22,21 +32,24 @@
|
||||
|
||||
<main>
|
||||
<div class="feed-list">
|
||||
<a href="{import.meta.env.VITE_API_URL_DEV+'/blog/feed.rss'}">
|
||||
<c><i class="nf nf-fa-rss_square"></i></c> <p>RSS</p>
|
||||
<a href={import.meta.env.VITE_API_URL_DEV + "/blog/feed.rss"}>
|
||||
<c><i class="nf nf-fa-rss_square"></i></c>
|
||||
<p>RSS</p>
|
||||
</a>
|
||||
<a href="{import.meta.env.VITE_API_URL_DEV+'/blog/feed.atom'}">
|
||||
<c><i class="nf nf-fae-atom"></i></c> <p>Atom</p>
|
||||
<a href={import.meta.env.VITE_API_URL_DEV + "/blog/feed.atom"}>
|
||||
<c><i class="nf nf-fae-atom"></i></c>
|
||||
<p>Atom</p>
|
||||
</a>
|
||||
<a href="{import.meta.env.VITE_API_URL_DEV+'/blog/feed.json'}">
|
||||
<c><i class="nf nf-seti-json"></i></c> <p>JSON</p>
|
||||
<a href={import.meta.env.VITE_API_URL_DEV + "/blog/feed.json"}>
|
||||
<c><i class="nf nf-seti-json"></i></c>
|
||||
<p>JSON</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-list">
|
||||
{#each posts as post}
|
||||
<CardLink url="/blog/{post.id}" title="{post.title}">
|
||||
{#each posts as post}
|
||||
<CardLink url="/blog/{post.id}" title={post.title}>
|
||||
<p>{post.author} | {post.date}</p>
|
||||
<br>
|
||||
<br />
|
||||
{post.content}...
|
||||
</CardLink>
|
||||
{/each}
|
||||
@ -44,62 +57,62 @@
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.post-list{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 15%;
|
||||
padding-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.feed-list{
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.feed-list a {
|
||||
text-decoration: none;
|
||||
padding: 10px 15px 10px 15px;
|
||||
background: var(--dark-three);
|
||||
border-radius: var(--radius);
|
||||
border: solid 1px var(--border-color);
|
||||
color: var(--white);
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
.feed-list a:hover {
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.feed-list a i{
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1316px) {
|
||||
main {
|
||||
padding: 50px;
|
||||
.post-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 15%;
|
||||
padding-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.feed-list {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.feed-list a {
|
||||
text-decoration: none;
|
||||
padding: 10px 15px 10px 15px;
|
||||
background: var(--dark-three);
|
||||
border-radius: var(--radius);
|
||||
border: solid 1px var(--border-color);
|
||||
color: var(--white);
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.feed-list a:hover {
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.feed-list a i {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1316px) {
|
||||
main {
|
||||
padding: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +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()
|
||||
|
||||
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"]
|
||||
}
|
||||
error: data["error"],
|
||||
};
|
||||
}
|
||||
|
||||
return data["result"]
|
||||
return data["result"];
|
||||
}
|
||||
|
||||
@ -1,104 +1,95 @@
|
||||
<script>
|
||||
import Header from "../../../lib/header.svelte"
|
||||
import { goto } from "$app/navigation"
|
||||
import { onMount } from "svelte"
|
||||
import DOMPurify from "dompurify"
|
||||
import { marked } from "marked"
|
||||
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
|
||||
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
|
||||
let upvote_status = "inactive";
|
||||
let downvote_status = "inactive";
|
||||
let voted = false;
|
||||
let audio;
|
||||
|
||||
async function get_status() {
|
||||
const res = await fetch(api+"/blog/vote/get?id="+data.id)
|
||||
const json = await res.json()
|
||||
|
||||
if(json["error"]!= ""){
|
||||
return
|
||||
const res = await fetch(api + "/blog/vote/get?id=" + data.id);
|
||||
const json = await res.json();
|
||||
|
||||
if (json["error"] != "") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (json["result"] == "upvote") {
|
||||
upvote_status = "active"
|
||||
downvote_status = "inactive"
|
||||
upvote_status = "active";
|
||||
downvote_status = "inactive";
|
||||
} else {
|
||||
downvote_status = "active";
|
||||
upvote_status = "inactive";
|
||||
}
|
||||
else {
|
||||
downvote_status = "active"
|
||||
upvote_status = "inactive"
|
||||
}
|
||||
|
||||
voted = true
|
||||
|
||||
voted = true;
|
||||
}
|
||||
|
||||
onMount(async ()=>{
|
||||
if (data.title == undefined)
|
||||
goto("/blog")
|
||||
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()
|
||||
})
|
||||
sanitized = DOMPurify.sanitize(marked.parse(data.content, { breaks: true }), {
|
||||
ADD_TAGS: ["iframe"],
|
||||
ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling"],
|
||||
});
|
||||
|
||||
async function upvote(){
|
||||
audio.play()
|
||||
const res = await fetch(api+"/blog/vote/set?id="+data.id+"&to=upvote")
|
||||
const json = await res.json()
|
||||
await get_status();
|
||||
});
|
||||
|
||||
if(json["error"] != ""){
|
||||
return
|
||||
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
|
||||
if (voted) {
|
||||
data.vote += 2;
|
||||
} else {
|
||||
voted = true;
|
||||
data.vote += 1;
|
||||
}
|
||||
|
||||
await get_status()
|
||||
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()
|
||||
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 (json["error"] != "") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (voted){
|
||||
data.vote -= 2
|
||||
}
|
||||
|
||||
else {
|
||||
voted = true
|
||||
data.vote -= 1
|
||||
if (voted) {
|
||||
data.vote -= 2;
|
||||
} else {
|
||||
voted = true;
|
||||
data.vote -= 1;
|
||||
}
|
||||
|
||||
await get_status()
|
||||
await get_status();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>[ngn.tf] | {data.title}</title>
|
||||
<title>[ngn.tf] | {data.title}</title>
|
||||
<meta content="[ngn] | blog" property="og:title" />
|
||||
<meta content="{data.content.substring(0, 100)}..." property="og:description" />
|
||||
<meta content="https://ngn.tf" property="og:url" />
|
||||
<meta content="#000000" data-react-helmet="true" name="theme-color" />
|
||||
<link href="/markdown.css" rel="stylesheet">
|
||||
<link href="/markdown.css" rel="stylesheet" />
|
||||
</svelte:head>
|
||||
|
||||
<Header subtitle="{data.author} | {data.date}">
|
||||
@ -113,79 +104,88 @@
|
||||
{@html sanitized}
|
||||
</div>
|
||||
<div class="votes">
|
||||
<button on:click={async ()=>{upvote()}} class="{upvote_status}">
|
||||
<button
|
||||
on:click={async () => {
|
||||
upvote();
|
||||
}}
|
||||
class={upvote_status}
|
||||
>
|
||||
<i class="nf nf-md-arrow_up_bold"></i>
|
||||
</button>
|
||||
<p>{data.vote}</p>
|
||||
<button on:click={async ()=>{downvote()}} class="{downvote_status}">
|
||||
<button
|
||||
on:click={async () => {
|
||||
downvote();
|
||||
}}
|
||||
class={downvote_status}
|
||||
>
|
||||
<i class="nf nf-md-arrow_down_bold"></i>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<style>
|
||||
main {
|
||||
padding: 50px 10% 50px 10%;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 816px) {
|
||||
main {
|
||||
padding: 50px 20% 50px 20%;
|
||||
padding: 50px 10% 50px 10%;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30px;
|
||||
background: var(--dark-four);
|
||||
border-radius: var(--radius);
|
||||
border: solid 1px var(--border-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
@media only screen and (max-width: 816px) {
|
||||
main {
|
||||
padding: 50px 20% 50px 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.votes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
text-shadow: var(--text-shadow);
|
||||
gap: 10px;
|
||||
padding: 15px 5px 15px 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.content {
|
||||
padding: 30px;
|
||||
background: var(--dark-four);
|
||||
border-radius: var(--radius);
|
||||
border: solid 1px var(--border-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.votes p {
|
||||
font-size: 25px;
|
||||
color: var(--dark-six);
|
||||
}
|
||||
.votes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
text-shadow: var(--text-shadow);
|
||||
gap: 10px;
|
||||
padding: 15px 5px 15px 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.votes button{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
color: var(--dark-six);
|
||||
}
|
||||
.votes p {
|
||||
font-size: 25px;
|
||||
color: var(--dark-six);
|
||||
}
|
||||
|
||||
.votes button:hover {
|
||||
animation-name: colorAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
.votes button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
color: var(--dark-six);
|
||||
}
|
||||
|
||||
.active {
|
||||
animation-name: colorAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
.votes button:hover {
|
||||
animation-name: colorAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
|
||||
.active {
|
||||
animation-name: colorAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,9 +18,9 @@
|
||||
|
||||
<main>
|
||||
<Card title="bash donate.sh">
|
||||
I work on free/libre and open source software and offer free services. General hosting
|
||||
and stuff costs around 550₺ (~$17) per month, so feel free to donate in order to help me keep
|
||||
everything up and running!
|
||||
I work on free/libre and open source software and offer free services. General hosting and stuff
|
||||
costs around 550₺ (~$17) per month, so feel free to donate in order to help me keep everything
|
||||
up and running!
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -33,56 +33,58 @@
|
||||
<td>Monero (XMR)</td>
|
||||
<td>
|
||||
<code>
|
||||
46q7G7u7cmASvJm7AmrhmNg6ctS77mYMmDAy1QxpDn5w57xV3GUY5za4ZPZHAjqaXdfS5YRWm4AVj5UArLDA1retRkJp47F
|
||||
46q7G7u7cmASvJm7AmrhmNg6ctS77mYMmDAy1QxpDn5w57xV3GUY5za4ZPZHAjqaXdfS5YRWm4AVj5UArLDA1retRkJp47F
|
||||
</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
Also huge thanks to all of you who has donated so far, even if it's a small amount, I highly
|
||||
appreciate it. Thank you!
|
||||
Also huge thanks to all of you who has donated so far, even if it's a small amount, I highly appreciate
|
||||
it. Thank you!
|
||||
</Card>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 35px;
|
||||
padding: 50px;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 35px;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
margin: 30px 0 30px 0;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
margin: 30px 0 30px 0;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
color: white;
|
||||
background: var(--dark-two);
|
||||
}
|
||||
|
||||
tr,th,td{
|
||||
color: white;
|
||||
background: var(--dark-two);
|
||||
}
|
||||
td,
|
||||
th {
|
||||
border: solid 1px var(--dark-fife);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
td,th{
|
||||
border: solid 1px var(--dark-fife);
|
||||
padding: 16px;
|
||||
}
|
||||
th {
|
||||
animation-name: colorAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
background: var(--dark-two);
|
||||
}
|
||||
|
||||
th {
|
||||
animation-name: colorAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
background: var(--dark-two);
|
||||
}
|
||||
|
||||
code {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
code {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,43 +1,43 @@
|
||||
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()
|
||||
const api = import.meta.env.VITE_API_URL_DEV;
|
||||
const res = await fetch(api + "/services/all");
|
||||
const data = await res.json();
|
||||
|
||||
if (data["error"] != ""){
|
||||
if (data["error"] != "") {
|
||||
return {
|
||||
error: data["error"]
|
||||
}
|
||||
error: data["error"],
|
||||
};
|
||||
}
|
||||
|
||||
// Some really bad code to convert
|
||||
// [service1, service2, service3...]
|
||||
// Some really bad code to convert
|
||||
// [service1, service2, service3...]
|
||||
|
||||
// to
|
||||
// to
|
||||
|
||||
// [[service1, service2], [service4, service5], [service4...]...]
|
||||
// so i can render it in the UI easily
|
||||
|
||||
let all = data["result"]
|
||||
let counter = 0
|
||||
let currentlist = []
|
||||
let services = []
|
||||
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
|
||||
for (let i = 0; i < all.length; i++) {
|
||||
currentlist.push(all[i]);
|
||||
counter += 1;
|
||||
|
||||
if(i == all.length-1 && counter != 2){
|
||||
services.push(currentlist)
|
||||
if (i == all.length - 1 && counter != 2) {
|
||||
services.push(currentlist);
|
||||
}
|
||||
|
||||
if (counter == 2) {
|
||||
services.push(currentlist)
|
||||
currentlist = []
|
||||
counter = 0
|
||||
services.push(currentlist);
|
||||
currentlist = [];
|
||||
counter = 0;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
services
|
||||
}
|
||||
services,
|
||||
};
|
||||
}
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
import Service from "../../lib/service.svelte";
|
||||
import Card from "../../lib/card.svelte";
|
||||
|
||||
export let data
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>[ngn.tf] | services</title>
|
||||
<title>[ngn.tf] | 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" />
|
||||
@ -16,85 +16,86 @@
|
||||
<Header><c>ls</c> services</Header>
|
||||
<main>
|
||||
<Card title="cat services/*/info.txt">
|
||||
<div class="flexcol">
|
||||
{#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}
|
||||
</div>
|
||||
<div class="flexcol">
|
||||
{#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}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card title="cat services/details.txt">
|
||||
Here some details for all the services I offer:
|
||||
<ul>
|
||||
<li>
|
||||
<c><i class="nf nf-cod-account"></i> Registration:</c> All the services are offered for free, and all of them
|
||||
are accessiable to public. And registrations are open for the all services that support account registrations.
|
||||
<c><i class="nf nf-cod-account"></i> Registration:</c> All the services are offered for free,
|
||||
and all of them are accessiable to public. And registrations are open for the all services that
|
||||
support account registrations.
|
||||
</li>
|
||||
<li>
|
||||
<c><i class="nf nf-fa-eye_slash"></i> Privacy:</c> To protect user privacy, all the web proxy logs are cleared regularly.
|
||||
I also do not use any kind of CDN, and provide SSL encrypted connection for all the services. You can also connect all the
|
||||
services over TOR, as I do not block any traffic from TOR.
|
||||
<c><i class="nf nf-fa-eye_slash"></i> Privacy:</c> To protect user privacy, all the web proxy
|
||||
logs are cleared regularly. I also do not use any kind of CDN, and provide SSL encrypted connection
|
||||
for all the services. You can also connect all the services over TOR, as I do not block any traffic
|
||||
from TOR.
|
||||
</li>
|
||||
<li>
|
||||
<c><i class="nf nf-oct-graph"></i> Uptime:</c> Some services get restarted regularly, also sometimes I have
|
||||
issues with the hosting, so I cannot provide or guarantee %100 uptime for any of the services. I also cannot guarantee
|
||||
the that there won't be any data loss. I do take any regular backups, but your data may be lost in case of something
|
||||
like a SSD failure.
|
||||
<c><i class="nf nf-oct-graph"></i> Uptime:</c> Some services get restarted regularly, also sometimes
|
||||
I have issues with the hosting, so I cannot provide or guarantee %100 uptime for any of the services.
|
||||
I also cannot guarantee the that there won't be any data loss. I do take any regular backups,
|
||||
but your data may be lost in case of something like a SSD failure.
|
||||
</li>
|
||||
<li>
|
||||
<c><i class="nf nf-md-speedometer"></i> Speed:</c> All the services are located in Turkey, and avaliable
|
||||
over an 400 Mbit/s interface. If you are close to Turkey you should have a fairly good experience.
|
||||
If you are not, then you should probably use another provider for the service.
|
||||
<c><i class="nf nf-md-speedometer"></i> Speed:</c> All the services are located in Turkey, and
|
||||
avaliable over an 400 Mbit/s interface. If you are close to Turkey you should have a fairly good
|
||||
experience. If you are not, then you should probably use another provider for the service.
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
padding: 50px;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.flexcol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.flexrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: inside;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-top: 30px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1316px) {
|
||||
.flexrow {
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
padding: 50px;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.flexcol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.flexrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: inside;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-top: 30px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1316px) {
|
||||
.flexrow {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user