frontend redesign
This commit is contained in:
19
app/src/routes/+layout.js
Normal file
19
app/src/routes/+layout.js
Normal file
@ -0,0 +1,19 @@
|
||||
import { locale, waitLocale } from "svelte-i18n";
|
||||
import { init, register } from "svelte-i18n";
|
||||
import { browser } from "$app/environment";
|
||||
import languages from "$lib/lang.js";
|
||||
|
||||
const defaultLocale = languages[0].code;
|
||||
|
||||
for (let i = 0; i < languages.length; i++)
|
||||
register(languages[i].code, () => import(/* @vite-ignore */ languages[i].path));
|
||||
|
||||
init({
|
||||
fallbackLocale: defaultLocale,
|
||||
initialLocale: browser ? window.navigator.language.slice(0, 2).toLowerCase() : defaultLocale,
|
||||
});
|
||||
|
||||
export const load = async () => {
|
||||
if (browser) locale.set(window.navigator.language);
|
||||
await waitLocale();
|
||||
};
|
||||
@ -1,12 +1,27 @@
|
||||
<script>
|
||||
import Navbar from "../lib/navbar.svelte";
|
||||
import Navbar from "$lib/navbar.svelte";
|
||||
import Footer from "$lib/footer.svelte";
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<Navbar />
|
||||
<slot></slot>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<Footer />
|
||||
</main>
|
||||
|
||||
<style>
|
||||
@import "../../static/global.css";
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: var(--black-1);
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,189 +1,101 @@
|
||||
<script>
|
||||
import Header from "../lib/header.svelte";
|
||||
import Card from "../lib/card.svelte";
|
||||
import Header from "$lib/header.svelte";
|
||||
import Content from "$lib/content.svelte";
|
||||
import Head from "$lib/head.svelte";
|
||||
import Card from "$lib/card.svelte";
|
||||
import Link from "$lib/link.svelte";
|
||||
|
||||
import { color } from "$lib/util.js";
|
||||
import { _ } from "svelte-i18n";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<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"
|
||||
/>
|
||||
</svelte:head>
|
||||
<Head title="home" desc="home page of my personal website" />
|
||||
<Header title={$_("home.title")} picture="tired" />
|
||||
|
||||
<Header>
|
||||
<c>echo</c>
|
||||
hello world!
|
||||
</Header>
|
||||
|
||||
<main>
|
||||
<div class="flexbox">
|
||||
<Card title="whoami">
|
||||
<div class="whoami-box">
|
||||
<div class="whoami-pic">
|
||||
<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!
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<Content>
|
||||
<Card title={$_("home.welcome.title")}>
|
||||
<span> 👋 {$_("home.welcome.desc")}</span>
|
||||
<ul>
|
||||
<li>🇹🇷 {$_("home.welcome.whoami")}</li>
|
||||
<li>🖥️ {$_("home.welcome.interest")}</li>
|
||||
<li>❤️ {$_("home.welcome.support")}</li>
|
||||
</ul>
|
||||
</Card>
|
||||
<Card title={$_("home.work.title")}>
|
||||
<span>{$_("home.work.desc")}</span>
|
||||
<ul>
|
||||
<li>⌨️ {$_("home.work.build")}</li>
|
||||
<li>🚩 {$_("home.work.ctf")}</li>
|
||||
<li>👥 {$_("home.work.contribute")}</li>
|
||||
<li>📑 {$_("home.work.wiki")}</li>
|
||||
</ul>
|
||||
</Card>
|
||||
<Card title={$_("home.links.title")}>
|
||||
<span>{$_("home.links.desc")}:</span>
|
||||
<ul>
|
||||
<li>
|
||||
<Link icon="nf-fa-key" link="https://keyoxide.org/F9E70878C2FB389AEC2BA34CA3654DF5AD9F641D">
|
||||
PGP
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link icon="nf-md-mastodon" link="https://defcon.social/@ngn">Mastodon</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link icon="nf-cod-github" link="https://github.com/ngn13">Github</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link icon="nf-md-email" link="mailto:ngn@ngn.tf">Email</Link>
|
||||
<span class="prefer">({$_("home.links.prefer")})</span>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
<Card title={$_("home.info.title")}>
|
||||
<div class="services">
|
||||
<div class="info">
|
||||
<span>
|
||||
{$_("home.info.desc")}
|
||||
</span>
|
||||
<ul>
|
||||
<li>
|
||||
<i style="color: var(--{color()});" class="nf nf-md-speedometer_slow"></i>
|
||||
{$_("home.info.speed")}
|
||||
</li>
|
||||
<li>
|
||||
<i style="color: var(--{color()});" class="nf nf-fa-lock"></i>
|
||||
{$_("home.info.security")}
|
||||
</li>
|
||||
<li>
|
||||
<i style="color: var(--{color()});" class="nf nf-fa-network_wired"></i>
|
||||
{$_("home.info.privacy")}
|
||||
</li>
|
||||
<li>
|
||||
<i style="color: var(--{color()});" class="nf nf-md-eye_off"></i>
|
||||
{$_("home.info.bullshit")}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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 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>
|
||||
<a href="https://github.com/ngn13">Github</a>
|
||||
</li>
|
||||
<li>
|
||||
<c><i class="nf nf-md-mastodon"></i></c>
|
||||
<a href="https://defcon.social/@ngn" rel="me">Mastodon</a>
|
||||
</li>
|
||||
<li>
|
||||
<c><i class="nf nf-md-email"></i></c>
|
||||
<a href="mailto:ngn@ngn.tf">Email</a>
|
||||
</li>
|
||||
<li>
|
||||
<c><i class="nf nf-md-xmpp"></i></c>
|
||||
<a href="xmpp:ngn@chat.ngn.tf">XMPP</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="version">
|
||||
<p>v5.0</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Content>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
padding: 50px;
|
||||
.prefer {
|
||||
color: var(--white-2);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.whoami-box {
|
||||
.services {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 35px;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.whoami-pic {
|
||||
.services .info {
|
||||
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 +0,0 @@
|
||||
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"],
|
||||
};
|
||||
}
|
||||
@ -1,118 +0,0 @@
|
||||
<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.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"
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<Header>
|
||||
<c>/dev/</c>blog
|
||||
</Header>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="post-list">
|
||||
{#each posts as post}
|
||||
<CardLink url="/blog/{post.id}" title={post.title}>
|
||||
<p>{post.author} | {post.date}</p>
|
||||
<br />
|
||||
{post.content}...
|
||||
</CardLink>
|
||||
{/each}
|
||||
</div>
|
||||
</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: 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 +0,0 @@
|
||||
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"];
|
||||
}
|
||||
@ -1,191 +0,0 @@
|
||||
<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/get?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.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" />
|
||||
</svelte:head>
|
||||
|
||||
<Header subtitle="{data.author} | {data.date}">
|
||||
{data.title}
|
||||
</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">
|
||||
<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}
|
||||
>
|
||||
<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%;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
text-shadow: var(--text-shadow);
|
||||
gap: 10px;
|
||||
padding: 15px 5px 15px 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.votes p {
|
||||
font-size: 25px;
|
||||
color: var(--dark-six);
|
||||
}
|
||||
|
||||
.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 button:hover {
|
||||
animation-name: colorAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
|
||||
.active {
|
||||
animation-name: colorAnimation;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
</style>
|
||||
@ -1,65 +1,70 @@
|
||||
<script>
|
||||
import Header from "../../lib/header.svelte";
|
||||
import Card from "../../lib/card.svelte";
|
||||
import Header from "$lib/header.svelte";
|
||||
import Head from "$lib/head.svelte";
|
||||
import { color } from "$lib/util.js";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>[ngn.tf] | donate</title>
|
||||
<meta content="[ngn] | donate" property="og:title" />
|
||||
<meta content="Give me all of your life savings" 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>bash</c>
|
||||
donate.sh
|
||||
</Header>
|
||||
<Head title="donate" desc="give me all of your life savings" />
|
||||
<Header title="donate money!" picture="money" />
|
||||
|
||||
<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!
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Platform</th>
|
||||
<th>Address/Link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Monero (XMR)</td>
|
||||
<td>
|
||||
<code>
|
||||
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!
|
||||
</Card>
|
||||
<span
|
||||
>I spend a lot of time working on different projects and maintaining different services.</span
|
||||
>
|
||||
<span
|
||||
>I also spend a lot of money, but unlike time, you don't usually get much of it for free.</span
|
||||
>
|
||||
<span
|
||||
>I mostly pay for hosting and electricity. Which when added up costs around 550₺ per month, that
|
||||
is Turkish Lira, equals to ~$15 at time of writing.</span
|
||||
>
|
||||
<br />
|
||||
<br />
|
||||
<span
|
||||
>So even a small donation would be highly appreciated and it would help me keep everything up
|
||||
and running.</span
|
||||
>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="color: var(--{color()})">Platform</th>
|
||||
<th style="color: var(--{color()})">Address/Link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Monero (XMR)</td>
|
||||
<td>
|
||||
<code>
|
||||
46q7G7u7cmASvJm7AmrhmNg6ctS77mYMmDAy1QxpDn5w57xV3GUY5za4ZPZHAjqaXdfS5YRWm4AVj5UArLDA1retRkJp47F
|
||||
</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span
|
||||
>Also huge thanks to all of you who has donated so far, as I said, I highly appreciate it. Thank
|
||||
you!</span
|
||||
>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 35px;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
main span {
|
||||
font-size: var(--size-4);
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
margin: 30px 0 30px 0;
|
||||
box-shadow: var(--box-shadow);
|
||||
background: var(--black-3);
|
||||
border-collapse: collapse;
|
||||
font-size: var(--size-3);
|
||||
margin: 30px 0 30px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr,
|
||||
@ -67,19 +72,22 @@
|
||||
td {
|
||||
color: white;
|
||||
background: var(--dark-two);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border: solid 1px var(--dark-fife);
|
||||
border: solid 1px var(--black-4);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
th {
|
||||
animation-name: colorAnimation;
|
||||
animation-duration: 10s;
|
||||
animation-iteration-count: infinite;
|
||||
background: var(--dark-two);
|
||||
font-weight: 1000;
|
||||
}
|
||||
|
||||
td {
|
||||
color: var(--white-2);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
code {
|
||||
|
||||
@ -1,43 +1,7 @@
|
||||
import { services } from "$lib/api.js";
|
||||
|
||||
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], [service4, service5], [service4...]...]
|
||||
// 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 != 2) {
|
||||
services.push(currentlist);
|
||||
}
|
||||
|
||||
if (counter == 2) {
|
||||
services.push(currentlist);
|
||||
currentlist = [];
|
||||
counter = 0;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
services,
|
||||
list: await services(fetch),
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,100 +1,74 @@
|
||||
<script>
|
||||
import Header from "../../lib/header.svelte";
|
||||
import Service from "../../lib/service.svelte";
|
||||
import Card from "../../lib/card.svelte";
|
||||
import Service from "$lib/service.svelte";
|
||||
import Header from "$lib/header.svelte";
|
||||
import Link from "$lib/link.svelte";
|
||||
import Head from "$lib/head.svelte";
|
||||
|
||||
import { api_url } from "$lib/util.js";
|
||||
import { locale } from "svelte-i18n";
|
||||
|
||||
export let data;
|
||||
|
||||
let list = data.list,
|
||||
services = list;
|
||||
let value = "";
|
||||
|
||||
function change(input) {
|
||||
value = input.target.value.toLowerCase();
|
||||
services = [];
|
||||
|
||||
if (value === "") {
|
||||
services = list;
|
||||
return;
|
||||
}
|
||||
|
||||
list.forEach((s) => {
|
||||
if (s.name.toLowerCase().includes(value)) services.push(s);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<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" />
|
||||
<meta content="#000000" data-react-helmet="true" name="theme-color" />
|
||||
</svelte:head>
|
||||
<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>
|
||||
</Card>
|
||||
<Head title="services" desc="my self-hosted services and projects" />
|
||||
<Header title="service status" picture="cool" />
|
||||
|
||||
<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.
|
||||
</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.
|
||||
</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.
|
||||
</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.
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
<main>
|
||||
<div class="title">
|
||||
<input on:input={change} type="text" placeholder="Search for a service" />
|
||||
<div>
|
||||
<Link icon="nf-fa-feed" link={api_url("/news/" + $locale.slice(0, 2))}>News and updates</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="services">
|
||||
{#each services as service}
|
||||
<Service {service} />
|
||||
{/each}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
padding: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
main .title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
main .services {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
margin-top: 20px;
|
||||
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 {
|
||||
@media only screen and (max-width: 1200px) {
|
||||
main .services {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user