.prettierrc

@@ -1,9 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}

docker-compose.yml

@@ -1,7 +1,7 @@
-version: "3"
+version: "2"
 services:
   frontend:
-    build: .
+    build: frontend
     restart: unless-stopped
     ports:
-      - "127.0.0.1:9013:3000"
+      - "9021:3000"

frontend/.gitignore

@@ -6,5 +6,3 @@ node_modules
 .env
 .env.*
 !.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*

frontend/.prettierrc

@@ -0,0 +1,6 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100
+}

frontend/README.md

@@ -8,10 +8,10 @@ If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
 # create a new project in the current directory
-npm create svelte@latest
+npm init svelte
 
 # create a new project in my-app
-npm create svelte@latest my-app
+npm init svelte my-app
 ```
 
 ## Developing

frontend/package.json

@@ -0,0 +1,42 @@
+{
+	"name": "frontend",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"package": "svelte-kit package",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
+		"format": "prettier --write --plugin-search-dir=. ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/adapter-node": "1.0.0-next.86",
+		"@sveltejs/kit": "1.0.0-next.437",
+		"@types/md5": "^2.3.2",
+		"@typescript-eslint/eslint-plugin": "^5.27.0",
+		"@typescript-eslint/parser": "^5.27.0",
+		"autoprefixer": "^10.4.7",
+		"eslint": "^8.16.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.14",
+		"prettier": "^2.6.2",
+		"prettier-plugin-svelte": "^2.7.0",
+		"svelte": "^3.44.0",
+		"svelte-check": "^2.7.1",
+		"svelte-preprocess": "^4.10.7",
+		"tailwindcss": "^3.1.6",
+		"tslib": "^2.3.1",
+		"typescript": "^4.7.4",
+		"vite": "^3.0.0",
+		"vite-imagetools": "^4.0.4"
+	},
+	"type": "module",
+	"dependencies": {
+		"md5": "^2.3.0"
+	}
+}

frontend/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/app.css

@@ -0,0 +1,95 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+    font-family: 'Jeko-SemiBold';
+    src:  url('/fonts/Jeko Semi Bold.ttf')
+}
+
+@font-face {
+    font-family: 'Jeko-MediumItalic';
+    src:  url('/fonts/Jeko Medium Italic.ttf')
+}
+
+@font-face {
+    font-family: 'Jeko-Regular';
+    src:  url('/fonts/Jeko Regular.ttf')
+}
+
+html {
+    min-height:100%;
+    /* position:relative; */
+}
+html, 
+body {
+    height: 100%;
+}
+
+main {
+    background-color: #1B1D29;
+    /* border-radius: 50px; */
+    box-shadow: 29px 38px 50px -29px #08090D;
+}
+
+#title {
+    text-shadow: 0px 0px 30px #1F3891;
+}
+
+.button {
+    @apply w-full h-32 md:w-56 md:h-16 text-3xl md:text-lg rounded-full font-title font-normal text-white flex items-center justify-center p-4 bg-center bg-contain transition ease-in-out text-center;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
+    background: linear-gradient(0deg, rgba(27, 29, 41, 0.49), rgba(27, 29, 41, 0.49));
+    box-shadow: inset 0px 0px 30px #000000;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    -webkit-backdrop-filter: brightness(50%);
+    backdrop-filter: brightness(50%);
+}
+
+.button:hover {
+    box-shadow: inset 0px 0px 100px #000000;;
+}
+
+#button1 {
+    background-image: url('/projects.jpg?webp');
+}
+
+#button2 {
+    background-image: url('/hosted.jpg?webp');
+}
+
+.error {
+    font-size: 50pt;
+}
+
+.main {
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    background: linear-gradient(107.56deg, #12151E 0%, #060910 100%);
+    height: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.bg {
+    pointer-events: none;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    top: 0;
+    z-index: -1;
+  }
+
+.link {
+    background-image: url('/link.svg');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 50%;
+    background-color: #151515;
+}

frontend/src/app.d.ts

@@ -1,9 +1,11 @@
+/// <reference types="@sveltejs/kit" />
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 // and what to do when importing types
 declare namespace App {
-	// interface Error {}
 	// interface Locals {}
-	// interface PageData {}
 	// interface Platform {}
+	// interface Session {}
+	// interface Stuff {}
 }

frontend/src/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body class="scroll-smooth">
+		<img src="back.svg" class="bg">
+		<div class="main flex items-center justify-center">%sveltekit.body%</div>
+	</body>
+</html>

frontend/src/lib/components/Link.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let url: string;
+</script>
+
+<a href={url} class="w-12 h-12 link m-4 rounded-xl shrink-0" target="_blank" />

frontend/src/lib/components/Member.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import md5 from 'md5';
+	import Link from './Link.svelte';
+
+	export let name: string;
+	export let email: string;
+	export let description: string;
+	export let url: string;
+	const image = `http://www.gravatar.com/avatar/${md5(email)}`;
+</script>
+
+<div class="flex flex-row gap-4 items-center rounded-xl bg-gray-800 p-4">
+	<img class="rounded-2xl w-16 h-16" src={image} alt="" />
+	<div class="grow flex flex-col">
+		<p class="text-white font-title text-xl">{name}</p>
+		<p class="text-gray-300 font-sans text-xl break-words">{description}</p>
+	</div>
+	<Link {url} />
+</div>

frontend/src/lib/components/Project.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import Link from "./Link.svelte";
+
+	export let name: string;
+	export let description: string;
+	export let link: string;
+</script>
+
+<article
+	class="w-full flex flex-row p-4 items-center justify-between border-t-2 border-white border-opacity-10 gap-2 -mt-8"
+>
+	<div class="flex flex-col gap-2 pl-4 -mb-2">
+		<h1 class="text-white font-sans text-2xl mt-1">{name}</h1>
+		{#each description.split('\n') as partDescription}
+			<p class="text-gray-500 font-sans text-xl break-words">{partDescription}</p>
+		{/each}
+	</div>
+	<Link url={link} />
+</article>

frontend/src/lib/components/Text.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let title: string;
+</script>
+
+<article
+	class="w-full flex flex-row p-4 items-center justify-between border-t-2 border-white border-opacity-10 gap-2 -mt-8"
+>
+	<div class="grow flex flex-col gap-2 px-4 -mb-2">
+		<h1 class="text-white font-sans text-2xl mt-1">{title}</h1>
+		<slot />
+	</div>
+</article>

frontend/src/lib/components/Transition.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	export let url: URL;
+</script>
+
+{#key url}
+	<div class="grow flex flex-col gap-12" in:fade={{ duration: 250, delay: 300 }}>
+		<slot />
+	</div>
+{/key}

frontend/src/lib/data/hosted.json

@@ -0,0 +1,32 @@
+[
+	{
+		"title": "Pleroma",
+		"description": "Ukrainian Pleroma instance for cuties who loves anime and tech stuff.\nWe love all people except russians",
+		"link": "https://pl.m0e.space"
+	},
+	{
+		"title": "Calibre",
+		"description": "E-Books management and reader",
+		"link": "https://books.m0e.space"
+	},
+	{
+		"title": "Gitea",
+		"description": "Self-hosted git repository",
+		"link": "https://git.m0e.space"
+	},
+	{
+		"title": "Matrix",
+		"description": "Matrix is an open standard for interoperable, decentralised, real-time communication over IP.",
+		"link": "https://matrix.m0e.space"
+	},
+	{
+		"title": "Mobilizon",
+		"description": "Mobilizon is a tool that helps you find, create and organize events.\n\nYou can also create a page for your group where the members will be able to get organized together.",
+		"link": "https://events.m0e.space"
+	},
+	{
+		"title": "SearXNG",
+		"description": "SearXNG is a metasearch engine, aggregating the results of other search engines while not storing information about its users.",
+		"link": "https://search.m0e.space"
+	}
+]

frontend/src/lib/data/projects.json

@@ -0,0 +1,12 @@
+[
+	{
+		"title": "UAMonitor",
+		"description": "UAMonitor - FOSS minecraft monitoring web service originally made for ukrainians\nIt pings all servers from DB every 10 minutes and writes results into DB (WIP autoremove)\nBackend was made using Fastify as framework and Prisma as ORM, Frontend was made using SvelteKit as framework and TailwindCSS.",
+		"link": "https://stats.m0e.space"
+	},
+	{
+		"title": "RPZ",
+		"description": "SMP Minecraft Server",
+		"link": "https://mc.m0e.space"
+	}
+]

frontend/src/routes/+error.svelte

@@ -1,13 +1,12 @@
-<script lang="ts">
+<script context="module" lang="ts">
 	//throw new Error("@migration task: Replace error load function (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3293209)");
 
 	import { page } from '$app/stores';
-	import Button from '$lib/components/Button.svelte';
 </script>
 
 <svelte:head>
 	<title>{$page.status}</title>
 </svelte:head>
 
-<p class="text-accent text-center text-5xl my-5">{$page.status}</p>
-<Button url="/">Back to home</Button>
+<h1 class="text-white font-title error text-center">{$page.status}</h1>
+<a class="text-white text-opacity-50 underline font-sans text-center" href="/">Back to main page</a>

frontend/src/routes/+layout.svelte

@@ -0,0 +1,23 @@
+<script>
+	import '../app.css';
+	import { page } from '$app/stores';
+	import Transition from '$lib/components/Transition.svelte';
+</script>
+
+<svelte:head>
+	<meta property="og:site_name" content="m0e.space" />
+	<meta property="og:image" content="/favicon.png" />
+	<meta
+		property="og:description"
+		content="We are tech cuties from Ukraine, who love Open Source Software and hating russians"
+	/>
+</svelte:head>
+
+<main
+	class="w-full md:w-8/12 lg:w-6/12 md:rounded-4xl md:min-h-0 min-h-full flex flex-col pb-8 gap-12"
+>
+	<img class="h-38 w-full md:rounded-t-4xl" src="anime1.png" alt="anime girl 1" />
+	<Transition url={$page.url}>
+		<slot />
+	</Transition>
+</main>

frontend/src/routes/+page.svelte

@@ -0,0 +1,26 @@
+<!-- <img class="h-38 w-full md:rounded-t-4xl" src="anime1.png" alt="anime girl 1" /> -->
+<svelte:head>
+	<title>m0e.space | Main Page</title>
+	<meta property="og:title" content="Main Page" />
+</svelte:head>
+
+<h1 class="text-5xl text-center m-4 font-title text-white font-normal" id="title">m0e.space</h1>
+
+<div class="flex flex-col mx-8 items-center gap-10 justify-center md:flex-row">
+	<a href="/projects" class="button" id="button1">Our Projects</a>
+	<a href="/hosted" class="button" id="button2">Our hosted services</a>
+</div>
+
+<div class="grow w-full flex flex-row items-end content-between justify-between px-8">
+	<a
+		href="https://t.me/evolj1"
+		class="text-white text-opacity-50 underline font-['Jeko-MediumItalic'] text-xl md:text-lg"
+		>design: evolji</a
+	>
+	<a
+		href="/about"
+		class="text-white text-opacity-50 underline font-['Jeko-MediumItalic'] text-xl md:text-lg"
+		>about us</a
+	>
+	<!-- <div class="flex flex-row gap-4"></div> -->
+</div>

frontend/src/routes/about/+page.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import Member from '$lib/components/Member.svelte';
+	import Text from '$lib/components/Text.svelte';
+</script>
+
+<svelte:head>
+	<title>m0e.space | About</title>
+	<meta property="og:title" content="About us" />
+</svelte:head>
+
+<h1 class="text-3xl font-title text-white font-normal text-left ml-8 -mt-6 mb-2" id="title">
+	About us
+</h1>
+
+<Text title="Who we are?">
+	<p class="text-gray-500 font-sans text-xl break-words">
+		We are tech cuties from Ukraine, who love Open Source Software and hating russians
+	</p>
+</Text>
+
+<Text title="Our languages">
+	<p class="text-gray-500 font-sans text-xl break-words">Our languages are Ukrainian and English</p>
+</Text>
+
+<Text title="Our members">
+	<Member
+		name="Qugalet"
+		email="qugalet@m0e.space"
+		description="Server owner and system administrator"
+		url="https://quga.m0e.space"
+	/>
+	<Member
+		name="evolji"
+		email="evoljixgod@gmail.com"
+		description="Designer"
+		url="https://t.me/evolj1"
+	/></Text
+>

frontend/src/routes/hosted/+page.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import Project from '$lib/components/Project.svelte';
+	import projects from '$lib/data/hosted.json';
+</script>
+
+<svelte:head>
+	<title>m0e.space | Hosted</title>
+	<meta property="og:title" content="Hosted Services" />
+</svelte:head>
+
+<h1 class="text-3xl font-title text-white font-normal text-left ml-8 -mt-6 mb-2" id="title">
+	Hosted
+</h1>
+{#each projects as project}
+	<Project name={project.title} description={project.description} link={project.link} />
+{/each}

frontend/src/routes/projects/+page.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import Project from '$lib/components/Project.svelte';
+	import projects from '$lib/data/projects.json';
+</script>
+
+<svelte:head>
+	<title>m0e.space | Projects</title>
+	<meta property="og:title" content="Projects" />
+</svelte:head>
+
+<h1 class="text-3xl font-title text-white font-normal text-left ml-8 -mt-6 mb-2" id="title">
+	Projects
+</h1>
+{#each projects as project}
+	<Project name={project.title} description={project.description} link={project.link} />
+{/each}

frontend/static/link.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.25 12.75L28.5 1.5M21 1.5H28.5V9M28.5 18V25.5C28.5 26.2956 28.1839 27.0587 27.6213 27.6213C27.0587 28.1839 26.2956 28.5 25.5 28.5H4.5C3.70435 28.5 2.94129 28.1839 2.37868 27.6213C1.81607 27.0587 1.5 26.2956 1.5 25.5V4.5C1.5 3.70435 1.81607 2.94129 2.37868 2.37868C2.94129 1.81607 3.70435 1.5 4.5 1.5H12" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/svelte.config.js

@@ -1,11 +1,16 @@
 import adapter from '@sveltejs/adapter-node';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// Consult https://github.com/sveltejs/svelte-preprocess
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: preprocess({
+		postcss: true,
+		experimental: {
+			useVitePreprocess: true
+		}
+	}),
 
 	kit: {
 		adapter: adapter()

frontend/tailwind.config.cjs

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	theme: {
+		fontFamily: {
+			title: ['Jeko-SemiBold'],
+			sans: ['Jeko-Regular']
+		},
+		extend: {
+			spacing: {
+				'10%': '10%'
+			},
+			borderRadius: {
+				'4xl': '50px'
+			}
+		}
+	},
+	plugins: []
+};

frontend/tsconfig.json

@@ -10,8 +10,4 @@
 		"sourceMap": true,
 		"strict": true
 	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
 }

frontend/vite.config.js

@@ -0,0 +1,9 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { imagetools } from 'vite-imagetools';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit(), imagetools()]
+};
+
+export default config;

package.json

@@ -1,42 +1,12 @@
 {
-	"name": "m0e.space",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^1.0.0",
-		"@sveltejs/kit": "^1.0.0",
-		"@tailwindcss/typography": "^0.5.9",
-		"@types/marked": "^4.0.8",
-		"@types/md5": "^2.3.2",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"autoprefixer": "^10.4.13",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"postcss": "^8.4.21",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.8.1",
-		"svelte": "^3.54.0",
-		"svelte-check": "^2.9.2",
-		"tailwindcss": "^3.2.4",
-		"tslib": "^2.4.1",
-		"typescript": "^4.9.3",
-		"vite": "^4.0.0"
-	},
-	"type": "module",
-	"dependencies": {
-		"@sveltejs/adapter-node": "^1.1.0",
-		"marked": "^4.2.12",
-		"md5": "^2.3.0"
-	}
+  "name": "moespace_new",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
 }

postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
-	}
-};

src/app.css

@@ -1,44 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@500&family=Martian+Mono:wght@500&display=swap');
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* html {
-  @apply h-full;
-} */
-
-body {
-  @apply bg-bg-900 flex items-center justify-center min-w-full min-h-screen bg-cover;
-  background-image: url('/bg.gif');
-  image-rendering: crisp-edges !important;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  backdrop-filter: brightness(50%);
-}
-
-* {
-  @apply text-text;
-  font-family: 'Martian Mono', monospace;
-  image-rendering: auto;
-}
-
-p {
-  @apply text-base;
-}
-
-a {
-  @apply text-accent;
-}
-
-.button {
-  box-shadow: 0px 0px 0px 1px rgba(var(--color-accent), 0.8);
-}
-
-.monospace {
-  @apply text-sm bg-stone-900 p-1 rounded-md;
-}
-
-ul {
-  @apply list-inside list-disc ml-3;
-}

src/app.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>

src/lib/components/Button.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-	export let url: string;
-</script>
-
-<a
-	href={url}
-	class="border border-accent/60 hover:border-accent active:border-2 active:-my-0.5 p-3 px-14 select-none text-accent bg-card text-center mx-auto w-fit"
-	><slot /></a
->

src/lib/components/Member.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-	import md5 from 'md5';
-
-	export let name: string;
-	export let email: string;
-	export let description: string;
-	export let url: string | null = null;
-	export let fedi: string | null = null;
-	export let youtube: string | null = null;
-	const image = `http://www.gravatar.com/avatar/${md5(email)}`;
-</script>
-
-<div class="flex flex-row gap-4 items-center p-4">
-	<a href={url}><img class="w-16 h-16" src={image} alt="" /></a>
-	<div class="grow flex flex-col">
-		<p class="text-text font-title text-xl">{name}</p>
-		<p class="text-text/70 text-md break-words">{description}</p>
-		<div class="flex flex-row gap-2 text-sm">
-			{#if url}
-				<a
-					class="last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
-					href={url}>Website</a
-				>
-			{/if}
-			{#if fedi}
-				<a
-					class="last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
-					href={fedi}>Fediverse</a
-				>
-			{/if}
-			{#if youtube}
-				<a
-					class="last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
-					href={youtube}>Youtube</a
-				>
-			{/if}
-		</div>
-	</div>
-</div>

src/lib/components/Paragraph.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	export let title: string;
-	const anchorTitle = `#${title.trim().replaceAll(' ', '').toLocaleLowerCase()}`;
-</script>
-
-<div class="flex flex-col gap-1 mt-3">
-	<p class="text-2xl relative group font-bold text-text mb-2">
-		<h id={anchorTitle}>{title}</h>
-		<span
-			class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-7 rtl:-right-7 not-prose group-hover:opacity-100 text-neutral-700"
-			><a
-				class="group-hover:text-primary-300"
-				style="text-decoration-line: none !important;"
-				href={anchorTitle}
-				aria-label="Гачок">#</a
-			></span
-		>
-	</p>
-	<slot />
-</div>

src/lib/components/Project.svelte

@@ -1,18 +0,0 @@
-<script ctx="module" lang="ts">
-	import { marked } from 'marked';
-	export let name: string;
-	export let description: string;
-	export let url: string;
-	description = marked(description.replaceAll('\n', '\n\n'));
-</script>
-
-<div class="flex flex-row gap-4 items-center p-4 border-b-2 border-b-accent/40 last:border-b-0">
-	<div class="grow flex flex-col">
-		<a class="text-accent font-title text-xl" href={url}>{name}</a>
-		<div
-			class="prose prose-sm prose-strong:font-bold prose-strong:text-text/90 prose-p:text-text/70 text-md break-words mt-1"
-		>
-			{@html description}
-		</div>
-	</div>
-</div>

src/lib/data/hosted.json

@@ -1,32 +0,0 @@
-[
-	{
-		"title": "Akkoma",
-		"description": "Ukrainian Akkoma instance",
-		"link": "https://pl.m0e.space"
-	},
-	{
-		"title": "Mangane",
-		"description": "Alternative frontend for Akkoma",
-		"link": "https://pl.m0e.space/mangane"
-	},
-	{
-		"title": "Gitea",
-		"description": "Git repository hosting",
-		"link": "https://git.m0e.space"
-	},
-	{
-		"title": "Matrix",
-		"description": "Matrix is an open standard and communication protocol for real-time communication.",
-		"link": "/matrix"
-	},
-	{
-		"title": "Uptime Kuma",
-		"description": "Self-hosted monitoring tool",
-		"link": "https://st.m0e.space"
-	},
-	{
-		"title": "Piped",
-		"description": "YouTube alternative client",
-		"link": "https://you.m0e.space"
-	}
-]

src/lib/data/projects.json

@@ -1,12 +0,0 @@
-[
-	{
-		"title": "UAMonitor",
-		"description": "FOSS minecraft monitoring web service originally made for ukrainians\nIt pings all servers from DB every 10 minutes and writes results into DB (WIP autoremove)\nBackend was made using Fastify as framework and Prisma as ORM, Frontend was made using SvelteKit as framework and TailwindCSS.",
-		"link": "https://stats.m0e.space"
-	},
-	{
-		"title": "RPZ",
-		"description": "SMP Minecraft Server\nCurrent version: **Beta 1.7.3** with **Better Than Adventure** mod",
-		"link": "https://mc.m0e.space"
-	}
-]

src/routes/+layout.svelte

@@ -1,48 +0,0 @@
-<script>
-	import '../app.css';
-	const splashes = [
-		'no life since 1980 - 1jem',
-		'also try fediverse - qugalet',
-		'Усе тільки починається - Ternox',
-		'Alive since 24.10.2021',
-		'Akkoma will be updated in 20 minutes - qugalet'
-	];
-	const splash = splashes[Math.floor(Math.random() * splashes.length)];
-</script>
-
-<div
-	class="bg-black bg-opacity-80 border-accent border p-4 sm:max-w-2xl sm:min-h-0 min-h-screen flex flex-col gap-2"
->
-	<slot />
-	<div class="border-t-2 border-t-accent/40">
-		<p
-			class="text-green text-center text-lg text-green-600 mt-3 font-bold"
-			style="font-family: 'Fira Mono', monospace !important;"
-		>
-			&gt; {splash}
-		</p>
-		<div class="flex flex-row gap-2 justify-center items-center">
-			<p
-				class="text-text/60 text-sm last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
-			>
-				&copy; qugalet 2022-2023
-			</p>
-			<a
-				class="text-text/80 text-sm last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
-				href="/">Home</a
-			>
-			<a
-				class="text-text/80 text-sm last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
-				href="https://st.m0e.space/status/m0espace"
-				target="_blank"
-				rel="noreferrer">Uptime</a
-			>
-			<a
-				class="text-text/80 text-sm last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
-				href="https://git.m0e.space/m0e.space/m0e.space"
-				target="_blank"
-				rel="noreferrer">Source code</a
-			>
-		</div>
-	</div>
-</div>

src/routes/+page.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import Button from '$lib/components/Button.svelte';
-</script>
-
-<svelte:head>
-	<title>guest@m0e.space ~/</title>
-	<meta property="og:title" content="m0e.space" />
-</svelte:head>
-
-<img class="h-56 mx-auto block" src="/favicon.png" alt="m0e.space logo" />
-<h1 class="text-center text-3xl">m0e.space</h1>
-<p class="text-md text-stone-400 text-center">
-	Open Source services for cuties, who loves anime and tech from Ukraine!
-</p>
-
-<div class="flex flex-row gap-4 mt-3 justify-center items-center mb-4">
-	<Button url="/about">About</Button>
-	<Button url="/projects">Projects</Button>
-	<Button url="/services">Services</Button>
-</div>

src/routes/about/+page.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-	import Member from '$lib/components/Member.svelte';
-	import Paragraph from '$lib/components/Paragraph.svelte';
-</script>
-
-<svelte:head>
-	<title>guest@m0e.space ~/about</title>
-	<meta property="og:title" content="guest@m0e.space ~/about" />
-</svelte:head>
-
-<h1 class="text-center text-3xl mt-2">About</h1>
-
-<Paragraph title="Who we are?">
-	<p>We are tech cuties from Ukraine, who love Open Source Software and hating russians</p>
-	<p>We provide self-hosted and our own services for our members.</p>
-</Paragraph>
-
-<Paragraph title="Our languages">
-	<p>Our languages are Ukrainian and English.</p>
-	<p>Russian language is not allowed.</p>
-</Paragraph>
-
-<Paragraph title="How to join">
-	<p>
-		You can sign up Fediverse account on our <a href="https://pl.m0e.space">Akkoma</a> instance.
-		After that, you can message <a href="https://pl.m0e.space/qugalet">qugalet</a> for more info and
-		grating you access for more services.
-	</p>
-</Paragraph>
-
-<Paragraph title="Contact">
-	<p class="text-lg">You can contact admin using:</p>
-	<ul>
-		<li>
-			Email: <span class="monospace">admin(meow)m0e.space</span>
-		</li>
-		<li>
-			Matrix: <span class="monospace">(meow)qugalet:matrix.opulus.space</span>
-		</li>
-		<li><a href="https://pl.m0e.space/qugalet">Fediverse</a></li>
-		<li><a href="https://t.me/Andrmist">Telegram</a></li>
-	</ul>
-</Paragraph>
-
-<Paragraph title="Donate">
-	<p class="text-lg">You can help us financially:</p>
-	<ul>
-		<li>
-			My credit cards:
-			<ul class="list-decimal">
-				<li><span class="monospace">5375 4114 1585 7825</span> Monobank (MasterCard)</li>
-				<li><span class="monospace">5168 7559 0529 7772</span> PrivatBank (MasterCard)</li>
-			</ul>
-		</li>
-		<li>
-			<a href="https://send.monobank.ua/jar/8qpC6WMUHT">Monobank jar</a>
-		</li>
-		<li>We don't have crypto wallets but if you want it, please contact admin.</li>
-	</ul>
-</Paragraph>
-
-<Paragraph title="Members">
-	<Member
-		name="Qugalet"
-		email="qugalet@m0e.space"
-		description="Server owner and system administrator"
-		url="https://quga.m0e.space"
-		fedi="https://pl.m0e.space/qugalet"
-	/>
-	<Member
-		name="Ternox"
-		email="me@ternoxgames.com"
-		description="Indie game developer"
-		url="https://ternox.com/"
-		fedi="https://pl.m0e.space/trnx"
-	/>
-	<Member
-		name="1jem"
-		email="bjnu@protonmail.com"
-		description="average donetsk children"
-		fedi="https://pl.m0e.space/1jem"
-	/>
-	<Member
-		name="terracitrus"
-		email="arsen.cherniy@gmail.com"
-		description="2d artist"
-		fedi="https://pl.m0e.space/limonandrson"
-	/>
-</Paragraph>

src/routes/matrix/+page.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	import Member from '$lib/components/Member.svelte';
-	import Paragraph from '$lib/components/Paragraph.svelte';
-</script>
-
-<svelte:head>
-	<title>guest@m0e.space ~/matrix</title>
-	<meta property="og:title" content="guest@m0e.space ~/matrix" />
-</svelte:head>
-
-<h1 class="text-center text-3xl mt-2">Matrix</h1>
-
-<Paragraph title="owo whats dis?">
-	<p class="text-text/70 text-md break-words">
-		Matrix is an open standard and communication protocol for real-time communication with di. It
-		uses end-to-end encryption by default for all your conversations.
-	</p>
-</Paragraph>
-
-<Paragraph title="How to connect">
-	<p class="text-text/60 text-md">
-		You can use hosted web client Cinny (looks similar to Discord): <a
-			href="https://cinny.m0e.space">cinny.m0e.space</a
-		>
-	</p>
-	<br />
-	<p class="text-text/60 text-md break-words">Or connect manually:</p>
-	<p class="text-text/60 text-md">
-		- Homeserver <code class="monospace">https://m0e.space:443</code>
-	</p>
-</Paragraph>

src/routes/projects/+page.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import Project from '$lib/components/Project.svelte';
-	import projects from '$lib/data/projects.json';
-</script>
-
-<svelte:head>
-	<title>guest@m0e.space ~/projects</title>
-	<meta property="og:title" content="guest@m0e.space ~/projects" />
-</svelte:head>
-
-<h1 class="text-center text-3xl mt-2">Projects</h1>
-<div>
-	{#each projects as project}
-		<Project name={project.title} description={project.description} url={project.link} />
-	{/each}
-</div>

src/routes/services/+page.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import Project from '$lib/components/Project.svelte';
-	import hosted from '$lib/data/hosted.json';
-</script>
-
-<svelte:head>
-	<title>guest@m0e.space ~/services</title>
-	<meta property="og:title" content="guest@m0e.space ~/services" />
-</svelte:head>
-
-<h1 class="text-center text-3xl mt-2">Services</h1>
-<div>
-	{#each hosted as project}
-		<Project name={project.title} description={project.description} url={project.link} />
-	{/each}
-</div>

tailwind.config.cjs

@@ -1,39 +0,0 @@
-const colors = require('tailwindcss/colors');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-	content: ['./src/**/*.{html,js,svelte,ts}'],
-	theme: {
-		extend: {
-			colors: {
-				text: '#c1b492',
-				accent: '#d2738a',
-				card: '#1a1a1a',
-				bg: colors.zinc
-			}
-		}
-	},
-	plugins: [
-		function ({ addBase, theme }) {
-			function extractColorVars(colorObj, colorGroup = '') {
-				return Object.keys(colorObj).reduce((vars, colorKey) => {
-					const value = colorObj[colorKey];
-					const cssVariable =
-						colorKey === 'DEFAULT' ? `--color${colorGroup}` : `--color${colorGroup}-${colorKey}`;
-
-					const newVars =
-						typeof value === 'string'
-							? { [cssVariable]: value }
-							: extractColorVars(value, `-${colorKey}`);
-
-					return { ...vars, ...newVars };
-				}, {});
-			}
-
-			addBase({
-				':root': extractColorVars(theme('colors'))
-			});
-		},
-		require('@tailwindcss/typography')
-	]
-};

vite.config.ts

@@ -1,8 +0,0 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import type { UserConfig } from 'vite';
-
-const config: UserConfig = {
-	plugins: [sveltekit()]
-};
-
-export default config;