Начальный коммит

2025-02-28 05:02:25 +03:00 · 2025-02-28 05:02:25 +03:00 · 203b2d8403
commit 203b2d8403
42 changed files with 5183 additions and 0 deletions
--- a/src/app.css
+++ b/src/app.css
@ -0,0 +1,29 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@config "../tailwind.config.ts";
+
+@font-face {
+	font-family: 'Lineyka';
+	font-style: normal;
+	font-weight: normal;
+	src: url('/fonts/lineyka.otf');
+}
+
+@font-face {
+	font-family: 'Disket Mono';
+	font-style: normal;
+	font-weight: normal;
+	src: url('/fonts/Disket-Mono-Regular.ttf');
+}
+
+@font-face {
+	font-family: 'Disket Mono';
+	font-style: normal;
+	font-weight: bold;
+	src: url('/fonts/Disket-Mono-Bold.ttf');
+}
+
+.no-x-scroll {
+	max-width: 100%;
+	overflow-x: hidden;
+}
--- a/src/app.d.ts
+++ b/src/app.d.ts
@ -0,0 +1,36 @@
+import type { Member } from '$lib/types/Member';
+
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+
+		interface Route {
+			label: string;
+			icon: string;
+			href: string;
+		}
+
+		interface MdsvexFile {
+			default: import('svelte/internal').SvelteComponent;
+			metadata: Record<string, string>;
+		}
+
+		type MdsvexResolver = () => Promise<MdsvexFile>;
+
+		interface BlogPost {
+			slug: string;
+			title: string;
+			thumbnail: string;
+			date: string;
+			description: string;
+			publisher: string;
+			published?: boolean;
+			member?: Member;
+		}
+	}
+}
+
+export {};
--- a/src/app.html
+++ b/src/app.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="ru">
+	<head>
+		<meta charset="utf-8" />
+
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content="https://teasanctuary.ru" />
+		<meta name="theme-color" content="#63A002" />
+
+		<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png">
+		<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png">
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/src/lib/components/HoverIcon.svelte
+++ b/src/lib/components/HoverIcon.svelte
@ -0,0 +1,27 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+
+	let className: string = '';
+	export { className as class };
+	export let src: string | null = null;
+	export let text: string;
+	export let size: number = 32;
+
+	let isUrl;
+	$: isUrl = src?.startsWith('/') || src?.startsWith('http');
+</script>
+
+<div class="{className} fill-slate-50 text-sm uppercase transition-all">
+	{#if src}
+		{#if isUrl}
+			<img {src} alt={text} width={size} height={size} />
+		{:else}
+			<Icon width={size} height={size} icon={src} color="#f8fafc" />
+		{/if}
+	{:else}
+		{text}
+	{/if}
+</div>
+
+<style>
+</style>
--- a/src/lib/components/SocialButton.svelte
+++ b/src/lib/components/SocialButton.svelte
@ -0,0 +1,73 @@
+<script lang="ts">
+	import HoverIcon from './HoverIcon.svelte';
+
+	export let href: string;
+	let className: string = '';
+	export { className as class };
+	export let customIcon: string | null = null;
+
+	let url: URL;
+	let host: string;
+
+	const icons: Record<string, string> = {
+		none: 'material-symbols:link',
+		'steamcommunity.com': 'simple-icons:steam',
+		'twitter.com': 'simple-icons:x',
+		'x.com': 'simple-icons:x',
+		'github.com': 'simple-icons:github',
+		'youtube.com': 'simple-icons:youtube',
+		'itch.io': 'simple-icons:itchdotio',
+		'discord.gg': 'simple-icons:discord',
+		'gamebanana.com': 'simple-icons:gamebanana',
+		// https://хамяк.рф
+		'xn--80auf8a2c.xn--p1ai': 'fluent-emoji-high-contrast:hamster',
+		'teasanctuary.ru': '/icons/tea-sanctuary.svg',
+		'hl.teasanctuary.ru': '/icons/half-life.svg',
+		localhost: '/icons/tea-sanctuary.svg',
+		email: 'material-symbols:alternate-email'
+	};
+
+	function getHost(url: URL) {
+		const isEmail = url.href.startsWith('mailto:');
+		const hostname = isEmail ? 'email' : url.hostname;
+		// const split = hostname.split('.');
+		// const name = split[Math.max(split.length - 2, 0)];
+		// if (split.length > 1) return `${name}.${split[split.length - 1]}`;
+
+		// return name;
+		return hostname;
+	}
+
+	function tryGetIcon(link: string) {
+		try {
+			url = new URL(link);
+			host = getHost(url).replace(/\.com$/, '');
+		} catch {
+			return icons['none'];
+		}
+
+		let domain = getHost(url).toLocaleLowerCase();
+		let key = Object.keys(icons).find((key) => key == domain);
+		if (key == null) return icons['none'];
+
+		return icons[key];
+	}
+</script>
+
+<a
+	{href}
+	class="{className} drop-shadow-2xl flex flex-row transition-all hover:scale-110"
+	target="_blank"
+>
+	<div class="shrink-0 rounded-l-xl bg-slate-800 p-2">
+		<HoverIcon src={customIcon ?? tryGetIcon(href)} class="text-sm uppercase" text={host} />
+	</div>
+	<div
+		class="flex shrink-0 grow flex-nowrap items-center justify-center rounded-r-xl bg-slate-100 p-2 text-2xl text-nowrap text-slate-950"
+	>
+		<slot />
+	</div>
+</a>
+
+<style>
+</style>
--- a/src/lib/components/SocialHyperlink.svelte
+++ b/src/lib/components/SocialHyperlink.svelte
@ -0,0 +1,70 @@
+<script lang="ts">
+	import HoverIcon from './HoverIcon.svelte';
+
+	export let href: string;
+	let className: string = '';
+	export { className as class };
+	export let customIcon: string | null = null;
+
+	let url: URL;
+	let host: string;
+
+	const icons: Record<string, string> = {
+		none: 'material-symbols:link',
+		'steamcommunity.com': 'simple-icons:steam',
+		'twitter.com': 'simple-icons:x',
+		'x.com': 'simple-icons:x',
+		'github.com': 'simple-icons:github',
+		'youtube.com': 'simple-icons:youtube',
+		'itch.io': 'simple-icons:itchdotio',
+		'discord.gg': 'simple-icons:discord',
+		'gamebanana.com': 'simple-icons:gamebanana',
+		// https://хамяк.рф
+		'xn--80auf8a2c.xn--p1ai': 'fluent-emoji-high-contrast:hamster',
+		'teasanctuary.ru': '/icons/tea-sanctuary.svg',
+		'hl.teasanctuary.ru': '/icons/half-life.svg',
+		localhost: '/icons/tea-sanctuary.svg',
+		email: 'material-symbols:alternate-email'
+	};
+
+	function getHost(url: URL) {
+		const isEmail = url.href.startsWith('mailto:');
+		const hostname = isEmail ? 'email' : url.hostname;
+		// const split = hostname.split('.');
+		// const name = split[Math.max(split.length - 2, 0)];
+		// if (split.length > 1) return `${name}.${split[split.length - 1]}`;
+
+		// return name;
+		return hostname;
+	}
+
+	function tryGetIcon(link: string) {
+		try {
+			url = new URL(link);
+			host = getHost(url).replace(/\.com$/, '');
+		} catch {
+			return icons['none'];
+		}
+
+		let domain = getHost(url).toLocaleLowerCase();
+		let key = Object.keys(icons).find((key) => key == domain);
+		if (key == null) return icons['none'];
+
+		return icons[key];
+	}
+</script>
+
+<a {href} class="{className} inline-block ml-1 mr-1 group" target="_blank">
+	<span class="inline-block size-8 shrink-0 rounded-xl bg-emerald-800 p-1 align-bottom transition-all group-hover:scale-110">
+		<HoverIcon
+			src={customIcon ?? tryGetIcon(href)}
+			text={host}
+			size={24}
+		/>
+	</span>
+	<span class="items-center justify-center rounded-r-xl text-emerald-900 underline">
+		<slot />
+	</span>
+</a>
+
+<style></style>
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@ -0,0 +1,24 @@
+<script lang="ts">
+	import { page } from '$app/state';
+</script>
+
+<section
+	class="bg-[url('/common/background-day.webp')] dark:bg-[url('/common/background-night.webp')] bg-fixed bg-cover sticky flex h-screen shrink-0 flex-col items-center justify-center gap-12 overflow-hidden p-4"
+>
+	<div class="flex flex-nowrap flex-col gap-5">
+		<div class="flex flex-nowrap flex-col gap-3 items-center justify-center lg:flex-row lg:flex-nowrap">
+			<div class="shrink-0 size-48 relative bg-slate-50 rounded-2xl shadow-[inset_0px_0px_0px_2px] shadow-slate-200">
+				<img src="/common/dotted-line.svg" class="absolute left-0 right-0 top-0 bottom-0" alt="Пунктирная линия"/>
+				<!-- В документации Tailwind советуют использовать "Inline SVG" -->
+				<svg width="196" height="196" class="absolute left-0 right-0 top-0 bottom-0 stroke-slate-950" fill="none"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="6" d="M48.996 95.53c-18.624 5.826-30.621 14.965-30.621 25.239 0 17.599 35.19 31.866 78.604 31.866s78.604-14.267 78.604-31.866c0-10.274-11.997-19.413-30.617-25.24"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="6" d="M18.375 121.626c0 17.599 19.118 40.364 78.604 40.364 59.486 0 78.604-23.622 78.604-41.221"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="6" d="M37.493 53.042c0 24.97 16.66 73.762 59.486 73.762 42.826 0 59.482-48.792 59.482-73.757"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="6" d="M96.98 72.083c32.85 0 59.481-8.523 59.481-19.036 0-10.514-26.631-19.037-59.482-19.037-32.85 0-59.482 8.523-59.482 19.037 0 7.175 12.403 13.423 30.722 16.667 2.118.375 1.516 4.375 4.613 20.787 9.272-8.774 6.42-19.261 8.735-19.063 4.915.42 10.082.645 15.412.645z" style="stroke-linecap:round;stroke-linejoin:miter"/><path d="M148.79 90.518c21.944 2.71 28.835-9.795 28.835-20.354 0-2.77-.279-5.264-.858-7.436" style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#020618;stroke-width:6;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000;stop-opacity:1"/><path d="M137.677 66.047c-4.989-3.6-21.321-6.238-40.698-6.238s-35.71 2.639-40.701 6.24" style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#020618;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000;stop-opacity:1"/></svg>
+			</div>
+
+			<div class="font-disket font-bold text-slate-50 text-6xl [text-shadow:_0_0_15px_rgba(0,0,0,0.25)] text-center md:text-8xl lg:text-left">
+				<h1 class="text-rose-200 [text-shadow:_0_0_15px_oklch(0.271_0.105_12.094_/_0.25)]">
+					{page.status}
+				</h1>
+				<h1>SANCTUARY</h1>
+			</div>
+		</div>
+	</div>
+</section>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,94 @@
+<script lang="ts">
+	import '../app.css';
+	// import '../syntax-highlight.css'; // https://github.com/PrismJS/prism-themes
+	import { page } from '$app/state';
+	import { slide } from 'svelte/transition';
+	import { navigating } from '$app/state';
+	// import NavButton from '$lib/components/Nav-Button.svelte';
+	import Icon from '@iconify/svelte';
+
+	const routes: App.Route[] = [
+		{ label: 'команда', icon: 'material-symbols:person', href: '/team' },
+		{ label: 'новости', icon: 'material-symbols:newspaper', href: '/blog' },
+		{ label: 'проекты', icon: 'material-symbols:work', href: '/projects' }
+	];
+
+	let isMenuOpen = false;
+	$: if (navigating) isMenuOpen = false;
+</script>
+<!-- 
+<nav class="sticky top-0 z-50 mx-auto flex w-full flex-col bg-blue drop-shadow-md">
+	<div class="container mx-auto flex h-16 flex-row items-center justify-between px-2">
+		<a
+			href="/"
+			class="group pointer-events-auto flex items-center py-2 font-lineyka text-xl font-bold text-white transition-all hover:scale-105 active:scale-95"
+		>
+			<img src="/common/logo-square.png" alt="square logo" class="h-14 pr-2" />
+			<p>Tea Sanctuary</p>
+		</a>
+		<div class="hidden h-full flex-row items-center gap-2 md:flex">
+			{#key page.url.pathname}
+				{#each routes as route}
+					<div class="h-full">
+						<NavButton
+							href={route.href}
+							icon={route.icon}
+							label={route.label}
+							disabled={page.url.pathname == route.href}
+						/>
+					</div>
+				{/each}
+			{/key}
+		</div>
+		<button
+			class="pointer-events-auto scale-100 text-white transition-all md:hidden"
+			on:click={() => {
+				isMenuOpen = !isMenuOpen;
+			}}
+		>
+			{#if !isMenuOpen}
+				<div in:slide={{ axis: 'x', duration: 100 }}>
+					<Icon icon="material-symbols:menu" class="text-4xl" />
+				</div>
+			{:else}
+				<div in:slide={{ axis: 'x', duration: 100 }}>
+					<Icon icon="material-symbols:close" class="text-4xl" />
+				</div>
+			{/if}
+		</button>
+	</div>
+	{#if isMenuOpen}
+		<div
+			class="container mx-auto flex flex-col gap-2 p-4 pt-2 font-lineyka text-xl font-medium text-white md:hidden"
+			transition:slide={{ duration: 300 }}
+		>
+			{#each routes as route} -->
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<!-- <a
+					href={route.href}
+					class="flex origin-left {page.url.pathname == route.href
+						? 'opacity-75'
+						: ''} items-center transition-all active:scale-95"
+				>
+					<Icon icon={route.icon} class="mr-2" />
+					<p>{route.label}</p>
+				</a>
+			{/each}
+		</div>
+	{/if}
+</nav> -->
+
+<div class="relative flex flex-col">
+	<slot />
+</div>
+
+<footer class="bg-emerald-950">
+	<div
+		class="mx-auto w-full max-w-screen-xl justify-center px-2 py-6 text-center text-emerald-50 md:flex"
+	>
+		<p>
+			<span class="font-bold">&copy; 2025 Tea Sanctuary</span>
+		</p>
+	</div>
+</footer>
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@ -0,0 +1 @@
+export const prerender = true;
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -0,0 +1,181 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import SocialButton from '$lib/components/SocialButton.svelte';
+	// import { BlogAsNews, NewsAsNews, type NewsEntry } from '$lib/types/News';
+	// import NewsCard from '$lib/components/NewsCard.svelte';
+	import { PUBLIC_TS_DISCORD } from '$env/static/public';
+	import SocialHyperlink from '$lib/components/SocialHyperlink.svelte';
+
+	// let posts: NewsEntry[] = [];
+	// onMount(() => {
+	// FetchNewsAsync()
+	// 	.then((res) => {
+	// 		// Fetch news posts.
+	// 		if (res == null) {
+	// 			console.log('Failed to fetch sbox.game news posts');
+	// 			return;
+	// 		}
+	// 		posts = res.map((n) => NewsAsNews(n));
+	// 	})
+	// 	.then(async () => {
+	// 		// Get blog posts.
+	// 		const response = await fetch(`/api/posts`);
+	// 		const blogPosts: App.BlogPost[] = (await response.json()).filter(
+	// 			(post: App.BlogPost) => post.published ?? true
+	// 		);
+	// 		const blogs = blogPosts.map((b) => BlogAsNews(b));
+	// 		posts = [...posts, ...blogs];
+	// 		posts = posts.slice(0, 3);
+	// 		posts = posts.sort((a, b) => (b.date as any) - (a.date as any));
+	// 	});
+	// });
+</script>
+
+<svelte:head>
+	<meta property="og:title" content="Tea Sanctuary" />
+	<meta property="og:image" content="https://teasanctuary.ru/common/logo.png" />
+	<meta property="og:description" content="Делаем вещи как можем." />
+
+	<title>Tea Sanctuary</title>
+</svelte:head>
+
+<section
+	class="sticky flex h-screen shrink-0 flex-col items-center justify-center gap-5 overflow-hidden bg-[url('/common/background-day.webp')] bg-cover bg-fixed p-4 dark:bg-[url('/common/background-night.webp')]"
+>
+	<div class="basis-full"></div>
+	<div
+		class="flex flex-col flex-nowrap items-center justify-center gap-3 lg:flex-row lg:flex-nowrap"
+	>
+		<div
+			class="relative size-48 shrink-0 rounded-2xl bg-slate-50 shadow-[inset_0px_0px_0px_2px] shadow-slate-200"
+		>
+			<img
+				src="/common/dotted-line.svg"
+				class="absolute top-0 right-0 bottom-0 left-0"
+				alt="Пунктирная линия"
+			/>
+			<!-- В документации Tailwind советуют использовать "Inline SVG" -->
+			<svg
+				width="196"
+				height="196"
+				class="absolute top-0 right-0 bottom-0 left-0 stroke-slate-950"
+				fill="none"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="6"
+					d="M48.996 95.53c-18.624 5.826-30.621 14.965-30.621 25.239 0 17.599 35.19 31.866 78.604 31.866s78.604-14.267 78.604-31.866c0-10.274-11.997-19.413-30.617-25.24"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="6"
+					d="M18.375 121.626c0 17.599 19.118 40.364 78.604 40.364 59.486 0 78.604-23.622 78.604-41.221"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="6"
+					d="M37.493 53.042c0 24.97 16.66 73.762 59.486 73.762 42.826 0 59.482-48.792 59.482-73.757"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="6"
+					d="M96.98 72.083c32.85 0 59.481-8.523 59.481-19.036 0-10.514-26.631-19.037-59.482-19.037-32.85 0-59.482 8.523-59.482 19.037 0 10.513 26.631 19.036 59.482 19.036Z"
+				/><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="6"
+					d="M153.746 58.743c-6.958-7.938-29.739-13.757-56.767-13.757-27.027 0-49.808 5.819-56.77 13.76M147.6 90.349c24.664 4.41 30.025-9.625 30.025-20.184 0-10.56-4.051-17.117-13.377-17.117a10.125 10.125 0 0 0-7.913 3.854"
+				/></svg
+			>
+		</div>
+
+		<div
+			class="font-disket text-center text-6xl font-bold text-slate-50 [text-shadow:_0_0_15px_rgba(0,0,0,0.25)] md:text-8xl lg:text-left"
+		>
+			<h1>TEA</h1>
+			<h1>SANCTUARY</h1>
+		</div>
+	</div>
+	<div class="flex basis-full flex-col items-center justify-start gap-4">
+		<div class="flex flex-row gap-2 rounded-2xl bg-amber-950 p-2 text-center text-amber-50 ring-2 shadow">
+			Сайт находится в разработке. Если эта плашка висит после 1.06.2025 - пинайте Ивана!
+		</div>
+		<div class="flex flex-row flex-wrap items-start justify-center gap-4">
+			<SocialButton class="w-60 shrink-0" href={PUBLIC_TS_DISCORD}>Сообщество</SocialButton>
+			<SocialButton class="w-60 shrink-0" href="https://github.com/TeaSanctuary/">
+				GitHub
+			</SocialButton>
+			<SocialButton
+				class="w-60 shrink-0"
+				href="https://teasanctuary.ru/git"
+				customIcon="devicon-plain:git"
+			>
+				Наш Git
+			</SocialButton>
+			<SocialButton class="w-60 shrink-0" href="https://hl.teasanctuary.ru">
+				Сервер HLDM
+			</SocialButton>
+		</div>
+		<SocialButton class="w-60 opacity-0 hover:opacity-100" href="https://хамяк.рф">
+			хамяк)
+		</SocialButton>
+	</div>
+</section>
+<section class="flex justify-center bg-slate-50 text-slate-950">
+	<!-- {#if posts}
+		<div class="mb-20 flex justify-center px-2 pt-8 text-center">
+			<p class="text-sm font-bold text-white text-shadow sm:text-2xl md:w-1/2">
+				Latest Small Fish fishy news!
+			</p>
+		</div>
+
+		<div
+			class="mb-20 flex w-full flex-row flex-wrap items-center justify-center gap-10 px-5 md:px-20"
+		>
+			{#each posts as post, i}
+				<NewsCard {post} class="w-[30rem]" />
+			{/each}
+		</div>
+	{/if} -->
+	<div
+		class="flex w-5xl max-w-screen flex-col flex-nowrap gap-12 p-2 px-2 pt-12 pb-12 text-base sm:text-xl"
+	>
+		<section id="who-are-we">
+			<h1 class="font-disket mb-4 text-5xl font-bold sm:text-8xl">Кто мы?</h1>
+			<div class="text-justify">
+				<b>Tea Sanctuary</b> &mdash; это в первую очередь коллектив друзей, разрабатывающих проекты
+				для души, для всеобщего пользования и даже на заказ. С <b>8 июля 2018 года</b> мы ведём публичную
+				деятельность в сфере разработки ПО и развлечений.
+			</div>
+			<br />
+			<div class="text-justify">
+				<b>Tea Sanctuary</b> &mdash; это также и сообщество единомышленников. Любовь к добротным видеоиграм
+				и пассивная агрессия к вычислительной технике у нас в крови. Когда-то сообщество было закрытым
+				и насчитывало около 50 участников, но впоследствии мы решили его расширить. Станьте частью коллектива!
+			</div>
+		</section>
+		<section id="what-are-we-doing">
+			<h1 class="font-disket mb-4 text-5xl font-bold sm:text-8xl">Что делаем?</h1>
+			<div class="text-justify">
+				Наша главная страсть &mdash; это, конечно, видеоигры. Мы часто участвуем в так называемых
+				"гейм джемах" &mdash; конкурсах на разработку игр. Наши игры вы можете оценить здесь:
+				<SocialHyperlink customIcon="simple-icons:itchdotio" href="https://randomtrash.itch.io">Наш Itch.IO</SocialHyperlink>. Также мы
+				ведём работу над нашим первым полноценным игровым проектом. Следите за новостями в нашем
+				<SocialHyperlink href={PUBLIC_TS_DISCORD}>сообществе</SocialHyperlink>!
+			</div>
+			<br />
+			<div class="text-justify">
+				Отдельные участники нашего коллектива занимаются модификацией существующих игр, добавляя в
+				них новый контент. Например, <b>MegaZerg</b> создаёт оригинальные карты для такой
+				бессмертной классики, как Counter-Strike 1.6, и выкладывает их на ресурс GameBanana:
+				<SocialHyperlink href="https://gamebanana.com/members/2971042">kemist</SocialHyperlink>
+			</div>
+			<br />
+			<div class="text-justify">
+				Не одними играми едины, за нашими плечами есть несколько прикладных программ, созданных под
+				заказ. Про них ничего особо рассказать не можем, но если вам надо что-нибудь сделать &mdash;
+				пишите нам!
+			</div>
+		</section>
+	</div>
+</section>
--- a/src/routes/discord/+page.server.ts
+++ b/src/routes/discord/+page.server.ts
@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import { PUBLIC_TS_DISCORD } from '$env/static/public';
+
+export function load() {
+	throw redirect(302, PUBLIC_TS_DISCORD);
+}
--- a/src/routes/discord/+page.svelte
+++ b/src/routes/discord/+page.svelte
--- a/src/syntax-highlight.css
+++ b/src/syntax-highlight.css
@ -0,0 +1,142 @@
+/**
+ * atom-dark theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Joe Gibson (@gibsjose)
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+	color: #c5c8c6;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+	background: #1d1f21;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #7c7c7c;
+}
+
+.token.punctuation {
+	color: #c5c8c6;
+}
+
+.namespace {
+	opacity: 0.7;
+}
+
+.token.property,
+.token.keyword,
+.token.tag {
+	color: #96cbfe;
+}
+
+.token.class-name {
+	color: #ffd466;
+}
+
+.token.boolean,
+.token.constant {
+	color: #99cc99;
+}
+
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.number {
+	color: #fc749b;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #ffd466;
+}
+
+.token.variable {
+	color: #c6c5fe;
+}
+
+.token.operator {
+	color: #ededed;
+}
+
+.token.entity {
+	color: #ffffb6;
+	cursor: help;
+}
+
+.token.url {
+	color: #96cbfe;
+}
+
+.language-css .token.string,
+.style .token.string {
+	color: #87c38a;
+}
+
+.token.atrule,
+.token.attr-value {
+	color: #f9ee98;
+}
+
+.token.function {
+	color: #87c38a;
+}
+
+.token.regex {
+	color: #e9c062;
+}
+
+.token.important {
+	color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}