ngn/website
1
0
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

fix service info, update images, add meta tags

Browse Source 
Signed-off-by: ngn <ngn@ngn.tf>
This commit is contained in:
ngn
2025-04-05 19:39:10 +03:00
parent fe6b3512fd
commit 037a4405b9
22 changed files with 110 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
app/src/lib/footer.svelte
View File

@ -14,44 +14,34 @@
</script>
<footer style="border-top: solid 2px var(--{color()});">
<div class="info">
<div class="links">
<span>
<Link link={import.meta.env.WEBSITE_SOURCE_URL} bold={true}>{$_("footer.source")}</Link>
</span>
<span>/</span>
<span>
<Link link={urljoin(import.meta.env.WEBSITE_APP_URL, "doc/license")} bold={true}
>{$_("footer.license")}</Link
>
</span>
<span>/</span>
<span>
<Link link={urljoin(import.meta.env.WEBSITE_APP_URL, "doc/privacy")} bold={true}
>{$_("footer.privacy")}</Link
>
</span>
</div>
<div class="links">
<span>
{$_("footer.powered")}
</span>
</div>
<div class="useless">
<span>
{$_("footer.number", {
values: {
total: data.total,
since: date_from_ts(data.since),
},
})}
{#if data.number % 1000 == 0}
<span style="color: var(--{color()})">({$_("footer.wow")})</span>
{/if}
</span>
<span>
{$_("footer.version", { values: { api_version: "v1", frontend_version: pkg.version } })}
<Link link={import.meta.env.WEBSITE_SOURCE_URL} bold={true}>{$_("footer.source")}</Link>
</span>
<span>/</span>
<span>
<Link link={urljoin(import.meta.env.WEBSITE_APP_URL, "doc/license")} bold={true}
>{$_("footer.license")}</Link
>
</span>
<span>/</span>
<span>
<Link link={urljoin(import.meta.env.WEBSITE_APP_URL, "doc/privacy")} bold={true}
>{$_("footer.privacy")}</Link
>
</span>
</div>
<span class="counter">
{$_("footer.number", {
values: {
total: data.total,
since: date_from_ts(data.since),
},
})}
{#if data.number % 1000 == 0}
<span style="color: var(--{color()})">({$_("footer.wow")})</span>
{/if}
</span>
</footer>
<style>
@ -61,27 +51,29 @@
justify-content: space-between;
align-items: center;
background: var(--black-1);
box-sizing: border-box;
padding: 20px 50px 20px 50px;
}
div {
display: flex;
color: var(--white-2);
font-size: var(--size-2);
flex-direction: column;
gap: 5px;
}
.useless {
margin: 25px 50px 25px 0;
span {
color: var(--white-2);
font-size: 15px;
}
.counter {
text-align: right;
}
.info {
margin: 25px 0 25px 50px;
.links {
text-align: left;
}
.info .links {
display: flex;
flex-direction: row;
gap: 5px;

15
app/src/lib/head.svelte
View File

@ -8,15 +8,20 @@
<svelte:head>
<title>[ngn.tf] | {title}</title>
<meta content="[ngn.tf] | {title}" property="og:title" />
<meta content={desc} property="og:description" />
<meta content={app_url()} property="og:url" />
<meta content="#000000" data-react-helmet="true" name="theme-color" />
<meta name="description" content={desc} />
<meta name="author" content="ngn" />
<meta name="keywords" content="ngn,ngn13,ngn1,ngn.tf" />
<meta name="color-scheme" content="only dark" />
<meta name="theme-color" content="#000000" />
<meta property="og:title" content="[ngn.tf] | {title}" />
<meta property="og:description" content={desc} />
<meta property="og:url" content={app_url()} />
<link
rel="alternate"
type="application/atom+xml"
href={api_urljoin("/news/en")}
title="Atom Feed"
title="Service news and updates"
/>
</svelte:head>

26
app/src/lib/header.svelte
View File

@ -1,14 +1,35 @@
<script>
import { browser } from "$app/environment";
import { color } from "$lib/util.js";
import { _ } from "svelte-i18n";
export let picture = "";
export let title = "";
let title_cur = "";
function animate(title) {
if (!browser) return;
let id = window.setTimeout(function () {}, 0);
while (id--) clearTimeout(id);
title_cur = "";
for (let i = 0; i < title.length; i++) {
setTimeout(() => {
title_cur += title[i];
}, i * 70);
}
}
$: animate(title);
</script>
<header>
<div>
<h1 class="title" style="color: var(--{color()})">{title.toLowerCase()}</h1>
<h1 class="title" style="color: var(--{color()})">{title_cur}</h1>
<h1 class="cursor" style="color: var(--{color()})">_</h1>
</div>
<img src="/profile/{picture}.png" alt="" />
@ -50,9 +71,6 @@
header div .title {
text-shadow: var(--text-shadow);
overflow: hidden;
width: 0;
animation: typing 1s steps(20, end) forwards;
animation-delay: 0.3s;
}
header div .cursor {