From 83f2c2f374cf13cf93e4f0a0d51a5f7c12032b7f Mon Sep 17 00:00:00 2001
From: Akis <mavrommatisakis@gmail.com>
Date: Sun, 7 Aug 2022 16:35:50 +0300
Subject: [PATCH] add custom instance page

---
 src/lib/Card/CardInner.svelte  |  67 +++++++++++++
 src/lib/Card/CardOuter.svelte  |  12 +++
 src/lib/Card/Link.svelte       |  61 ++++++++++++
 src/lib/Card/LinksOuter.svelte |  11 +++
 src/lib/Card/index.ts          |   4 +
 src/lib/Instances.json         | 112 +++++++++++++++++++++
 src/lib/Nav.svelte             |   2 +-
 src/routes/instances.svelte    |  52 ++++++++++
 src/routes/projects.svelte     | 114 +++++----------------
 src/routes/team.svelte         | 175 +++++++++------------------------
 10 files changed, 388 insertions(+), 222 deletions(-)
 create mode 100644 src/lib/Card/CardInner.svelte
 create mode 100644 src/lib/Card/CardOuter.svelte
 create mode 100644 src/lib/Card/Link.svelte
 create mode 100644 src/lib/Card/LinksOuter.svelte
 create mode 100644 src/lib/Card/index.ts
 create mode 100644 src/lib/Instances.json
 create mode 100644 src/routes/instances.svelte

diff --git a/src/lib/Card/CardInner.svelte b/src/lib/Card/CardInner.svelte
new file mode 100644
index 0000000..844bbac
--- /dev/null
+++ b/src/lib/Card/CardInner.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+    export let title: any;
+    export let position: any;
+    export let description: any;
+    export let icon: any;
+    export let internal: boolean;
+
+	import IconCircleInfo from "~icons/fa6-solid/circle-info";
+</script>
+
+<div class="card-inner">
+    <div class="main">
+        {#if icon}
+            <div>
+                <img src={icon} alt="{title} icon">
+            </div>
+        {/if}
+        <div>     
+                <span>
+                    {title}
+                
+                    {#if position}
+                        - {position}
+                    {/if}
+                </span>
+            
+            {#if description}
+                <p class="description">{description}</p>
+            {/if}
+        </div>
+    </div>
+    <slot />
+</div>
+
+<style>
+    .card-inner {
+        background-color: var(--secondary);
+		border-radius: 10px;
+		padding: 1rem;
+		width: 30em;
+		display: flex;
+		flex-direction: column;
+    }
+
+    @media screen and (max-width: 555px) {
+        .card-inner {
+            width: 18em;
+        }
+    }
+
+    .main {
+		flex: 1;
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+	}
+
+    img {
+        height: 5rem;
+        border-radius: 10px;
+    }
+
+    span {
+        font-size: 25px;
+        font-weight: bold;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/Card/CardOuter.svelte b/src/lib/Card/CardOuter.svelte
new file mode 100644
index 0000000..156e94c
--- /dev/null
+++ b/src/lib/Card/CardOuter.svelte
@@ -0,0 +1,12 @@
+<div class="card-outer">
+    <slot />
+</div>
+
+<style>
+    div {
+        display: flex;
+		flex-direction: column;
+		gap: 2rem;
+		flex-flow: row wrap;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/Card/Link.svelte b/src/lib/Card/Link.svelte
new file mode 100644
index 0000000..abf8c61
--- /dev/null
+++ b/src/lib/Card/Link.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    export let url: any;
+    export let classes: string;
+</script>
+
+<a href={url} class="{classes}">
+    <slot />
+</a>
+
+<style>
+    .web,
+	.email,
+	.picture,
+	.pgp {
+		background-color: var(--tertiary);
+		color: #fff !important;
+		font-size: 20px;
+		height: 23px;
+		transition: all 0.25s;
+	}
+
+	.web:hover,
+	.email:hover,
+	.picture:hover,
+	.pgp:hover {
+		background-color: var(--accent);
+		color: #333 !important;
+	}
+
+    .matrixcolored {
+		background-color: #333;
+		color: #fff !important;
+		font-size: 20px;
+		height: 23px;
+	}
+
+	.discordcolored {
+		background-color: #5865f2;
+		color: #fff !important;
+		font-size: 20px;
+		height: 23px;
+	}
+
+	.githubcolored {
+		background-color: #333;
+		color: #fff !important;
+		font-size: 20px;
+		height: 23px;
+	}
+
+    a {
+		border: none;
+		border-radius: 10px;
+		padding: 0.5rem;
+		cursor: pointer;
+		font-family: var(--font-primary);
+		color: var(--secondary);
+		text-decoration: none;
+		width: fit-content;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/Card/LinksOuter.svelte b/src/lib/Card/LinksOuter.svelte
new file mode 100644
index 0000000..33f7293
--- /dev/null
+++ b/src/lib/Card/LinksOuter.svelte
@@ -0,0 +1,11 @@
+<div>
+    <slot />
+</div>
+
+<style>
+    div {
+		display: flex;
+		flex-direction: row;
+		gap: 0.5rem;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/Card/index.ts b/src/lib/Card/index.ts
new file mode 100644
index 0000000..5ab1061
--- /dev/null
+++ b/src/lib/Card/index.ts
@@ -0,0 +1,4 @@
+export { default as CardOuter } from "./CardOuter.svelte";
+export { default as CardInner } from "./CardInner.svelte";
+export { default as LinksOuter } from "./LinksOuter.svelte";
+export { default as Link } from "./Link.svelte";
diff --git a/src/lib/Instances.json b/src/lib/Instances.json
new file mode 100644
index 0000000..73dbb1e
--- /dev/null
+++ b/src/lib/Instances.json
@@ -0,0 +1,112 @@
+[
+    {
+        "name": "Invidious",
+        "description": "A frontend for YouTube.",
+        "website": "https://invidious.projectsegfau.lt/",
+        "icon": "https://instances.projectsegfau.lt/assets/icons/custom/invidious-colored-vector.svg",
+        "category": "Instances"
+    },
+    {
+        "name": "Libreddit",
+        "description": "A frontend for Reddit.",
+        "website": "https://libreddit.projectsegfau.lt/",
+        "icon": "https://instances.projectsegfau.lt/assets/icons/custom/libreddit.png",
+        "category": "Instances"
+    },
+    {
+        "name": "Librarian (LBRY)",
+        "description": "A frontend for Odysee.",
+        "website": "https://lbry.projectsegfau.lt/",
+        "icon": "https://instances.projectsegfau.lt/assets/icons/custom/lbry.jpg",
+        "category": "Instances"
+    },
+    {
+        "name": "Nitter",
+        "description": "A frontend for Twitter.",
+        "website": "https://nitter.projectsegfau.lt/",
+        "icon": "https://instances.projectsegfau.lt/assets/icons/custom/nitter.png",
+        "category": "Instances"
+    },
+    {
+        "name": "Quetre",
+        "description": "A frontend for Quora.",
+        "website": "https://quetre.projectsegfau.lt/",
+        "category": "Instances"
+    },
+    {
+        "name": "Element",
+        "description": "An alternative for Discord.",
+        "website": "https://chat.projectsegfau.lt/",
+        "icon": "https://instances.projectsegfau.lt/assets/icons/custom/matrix.png",
+        "category": "Instances"
+    },
+    {
+        "name": "Piped",
+        "description": "Another alternative for YouTube.",
+        "website": "https://piped.projectsegfau.lt/",
+        "icon": "https://instances.projectsegfau.lt/assets/icons/custom/piped.svg",
+        "category": "Instances"
+    },
+    {
+        "name": "SearXNG",
+        "description": "A private meta-search engine.",
+        "website": "https://search.projectsegfau.lt/search",
+        "icon": "https://docs.searxng.org/_static/searxng-wordmark.svg",
+        "category": "Instances"
+    },
+    {
+        "name": "Lingva Translate",
+        "description": "A frontend for Google Translate.",
+        "website": "https://translate.projectsegfau.lt",
+        "icon": "https://github.com/thedaviddelta/lingva-translate/raw/main/public/logo.svg",
+        "category": "Instances"
+    },
+    {
+        "name": "Bibliogram",
+        "description": "A frontend for Instagram.",
+        "website": "https://bib.projectsegfau.lt",
+        "category": "Instances"
+    },
+    {
+        "name": "Minecraft",
+        "description": "Our invite-only Minecraft SMP.",
+        "website": "https://projectsegfau.lt/minecraft",
+        "icon": "https://instances.projectsegfau.lt/assets/icons/custom/minecraft.png",
+        "category": "Gameservers"
+    },
+    {
+        "name": "Minetest",
+        "description": "Minecraft \"alternative\".",
+        "website": "https://matrix.to/#/#minetest:projectsegfau.lt",
+        "icon": "https://instances.projectsegfau.lt/assets/icons/custom/1024px-Minetest_logo.svg.png",
+        "category": "Gameservers"
+    },
+    {
+        "name": "Portainer (Soleil Levant)",
+        "description": "A frontend for Google Translate.",
+        "website": "https://portainer.soleil-levant.projectsegfau.lt/",
+        "icon": "https://instances.projectsegfau.lt/assets/icons/custom/docker.svg",
+        "category": "Internal"
+    },
+    {
+        "name": "Portainer (Helios)",
+        "description": "A frontend for Instagram.",
+        "website": "https://portainer.projectsegfau.lt/",
+        "icon": "https://instances.projectsegfau.lt/assets/icons/custom/docker.svg",
+        "category": "Internal"
+    },
+    {
+        "name": "mailcow",
+        "description": "Our invite-only Minecraft SMP.",
+        "website": "https://mail.projectsegfau.lt/",
+        "icon": "https://instances.projectsegfau.lt/assets/icons/custom/cow_mailcow.svg",
+        "category": "Internal"
+    },
+    {
+        "name": "Plausible analytics",
+        "description": "Minecraft \"alternative\".",
+        "website": "https://analytics.projectsegfau.lt/projectsegfau.lt",
+        "icon": "https://avatars.githubusercontent.com/u/54802774?s=200&v=4",
+        "category": "Internal"
+    }
+]
diff --git a/src/lib/Nav.svelte b/src/lib/Nav.svelte
index 9e0d6ec..486998d 100644
--- a/src/lib/Nav.svelte
+++ b/src/lib/Nav.svelte
@@ -8,7 +8,7 @@
 	$: currentPage = $page.url.pathname;
 
 	const menus = [
-		{name: "Instances", url: "https://instances.projectsegfau.lt/"},
+		{name: "Instances", url: "/instances"},
 		{name: "Projects", url: "/projects"},
 		{name: "Minecraft", url: "/minecraft"},
 		{name: "Donate", url: "/donate"},
diff --git a/src/routes/instances.svelte b/src/routes/instances.svelte
new file mode 100644
index 0000000..165b1e1
--- /dev/null
+++ b/src/routes/instances.svelte
@@ -0,0 +1,52 @@
+<script>
+    import { CardInner, CardOuter, Link, LinksOuter } from "$lib/Card";
+    import instances from "$lib/Instances.json";
+    import IconGlobe from "~icons/fa6-solid/globe";
+
+    let groups = instances.reduce((curr, val) => {
+    let group = curr.find(g => g.category === `${val.category}`)
+    if (group) {
+        group.values.push(val)
+    } else {
+        curr.push({ category: `${val.category}`, values: [ val ] }) 
+    }
+    return curr
+    }, [])
+</script>
+
+<h1>Our instances</h1>
+    <CardOuter>
+            <div class="container">
+                {#each groups as group}
+                    <div class="container-inner">
+                        <h1>{group.category}</h1>
+                        <div class="items">
+                            {#each group.values as item }
+                                <CardInner title={item.name} description={item.description} icon={item.icon}>
+                                    <LinksOuter>
+                                        <Link url={item.website} classes="web">
+                                            <IconGlobe />
+                                        </Link>
+                                    </LinksOuter>
+                                </CardInner>
+                            {/each}
+                        </div>
+                    </div>
+                {/each}
+            </div>
+    </CardOuter>
+
+<style>
+
+    .container-inner, .container {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .items {
+        display: flex;
+        flex-direction: row;
+        flex-flow: row wrap;
+        gap: 2rem;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/projects.svelte b/src/routes/projects.svelte
index 888a9b0..a91ab33 100644
--- a/src/routes/projects.svelte
+++ b/src/routes/projects.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+    import { CardInner, CardOuter, Link, LinksOuter } from "$lib/Card";
 	import projects from "$lib/Projects.json";
-	import IconGitHub from "~icons/simple-icons/github";
-
+    import IconGitHub from "~icons/simple-icons/github";
 	import IconGlobe from "~icons/fa6-solid/globe";
 	import IconEmail from "~icons/fa6-solid/envelope";
 	import IconCamera from "~icons/fa6-solid/camera";
@@ -12,94 +12,24 @@
 	<meta name="description" content="Our collection of projects." />
 </svelte:head>
 
-<div class="team">
-	<h1>Our projects</h1>
-	<div class="projects-outer">
-		{#each projects as { name, description, github, website }}
-			<div class="projects-inner">
-				<div class="main">
-					<span>{name}</span>
+<h1>Our projects</h1>
+<CardOuter>
+    {#each projects as { name, description, github, website }}
+        <CardInner title={name} {description}>
+            <LinksOuter>
+                {#if website}
+					<Link url={website} classes="web">
+						<IconGlobe />
+					</Link>
+				{/if}
 
-					{#if description}
-						<p class="description">{description}</p>
-					{/if}
-				</div>
-
-				<div class="socials">
-					{#if github}
-						<a href={github} class="githubcolored"><IconGitHub /></a
-						>
-					{/if}
-
-					{#if website}
-						<a href={website} class="web"><IconGlobe /></a>
-					{/if}
-				</div>
-			</div>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.projects-outer {
-		display: flex;
-		flex-direction: column;
-		gap: 2rem;
-		flex-flow: row wrap;
-	}
-
-	.projects-inner {
-		background-color: #252525;
-		border-radius: 10px;
-		padding: 1rem;
-		width: 30em;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.main {
-		flex: 1;
-	}
-
-	span {
-		font-size: 25px;
-		font-weight: bold;
-	}
-
-	a {
-		border: none;
-		border-radius: 10px;
-		padding: 0.5rem;
-		cursor: pointer;
-		font-family: var(--font-primary);
-		color: var(--secondary);
-		text-decoration: none;
-		width: fit-content;
-	}
-
-	.githubcolored {
-		background-color: #333;
-		color: #fff !important;
-		font-size: 20px;
-		height: 23px;
-	}
-
-	.web {
-		background-color: var(--tertiary);
-		color: #fff !important;
-		font-size: 20px;
-		height: 23px;
-		transition: all 0.25s;
-	}
-
-	.web:hover {
-		background-color: var(--accent);
-		color: var(--secondary) !important;
-	}
-
-	.socials {
-		display: flex;
-		flex-direction: row;
-		gap: 0.5rem;
-	}
-</style>
+				{#if github}
+					<Link url={github} classes="githubcolored">
+						<IconGitHub />
+					</Link>
+				{/if}
+				
+            </LinksOuter>
+        </CardInner>
+    {/each}
+</CardOuter>
\ No newline at end of file
diff --git a/src/routes/team.svelte b/src/routes/team.svelte
index 518e38e..c7a8f28 100644
--- a/src/routes/team.svelte
+++ b/src/routes/team.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { CardInner, CardOuter, Link, LinksOuter } from "$lib/Card";
 	import members from "$lib/Team.json";
 	import IconDiscord from "~icons/simple-icons/discord";
 	import IconMatrix from "~icons/simple-icons/matrix";
@@ -14,138 +15,54 @@
 	<meta name="description" content="Team members of Project Segfault." />
 </svelte:head>
 
-<div class="team">
-	<h1>Our team</h1>
-	<p>Our excellent team members!</p>
-	<div class="team-outer">
-		{#each members as { name, discord, matrix, position, description, github, pgp, website, email, picture }}
-			<div class="team-inner">
-				<div class="main">
-					<span>{name} - {position}</span>
+<h1>Our team</h1>
+<CardOuter>
+    {#each members as { name, discord, matrix, position, description, github, pgp, website, email, picture }}
+        <CardInner title={name} {position} {description}>
+            <LinksOuter>
+                {#if matrix}
+					<Link url={matrix} classes="matrixcolored">
+						<IconMatrix />
+					</Link>
+				{/if}
 
-					{#if description}
-						<p class="description">{description}</p>
-					{/if}
-				</div>
+				{#if discord}
+					<Link url={discord} classes="discordcolored">
+						<IconDiscord />
+					</Link>
+				{/if}
 
-				<div class="socials">
-					{#if matrix}
-						<a href={matrix} class="matrixcolored"><IconMatrix /></a
-						>
-					{/if}
+				{#if github}
+					<Link url={github} classes="githubcolored">
+						<IconGitHub />
+					</Link>
+				{/if}
 
-					{#if discord}
-						<a href={discord} class="discordcolored"
-							><IconDiscord /></a
-						>
-					{/if}
+				{#if website}
+					<Link url={website} classes="web">
+						<IconGlobe />
+					</Link>
+				{/if}
 
-					{#if github}
-						<a href={github} class="githubcolored"><IconGitHub /></a
-						>
-					{/if}
+				{#if email}
+					<Link url="mailto:{email}" classes="email">
+						<IconEmail />
+					</Link>
+				{/if}
 
-					{#if website}
-						<a href={website} class="web"><IconGlobe /></a>
-					{/if}
+				{#if pgp}
+					<Link url={pgp} classes="pgp">
+						<IconKey />
+					</Link>
+				{/if}
 
-					{#if email}
-						<a href="mailto:{email}" class="email"><IconEmail /></a>
-					{/if}
-
-					{#if pgp}
-						<a href={pgp} class="pgp"><IconKey /></a>
-					{/if}
-
-					{#if picture}
-						<a href={picture} class="picture"><IconCamera /></a>
-					{/if}
-				</div>
-			</div>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.team-outer {
-		display: flex;
-		flex-direction: column;
-		gap: 2rem;
-		flex-flow: row wrap;
-	}
-
-	.team-inner {
-		background-color: var(--secondary);
-		border-radius: 10px;
-		padding: 1rem;
-		width: 30em;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.main {
-		flex: 1;
-	}
-
-	span {
-		font-size: 25px;
-		font-weight: bold;
-	}
-
-	a {
-		border: none;
-		border-radius: 10px;
-		padding: 0.5rem;
-		cursor: pointer;
-		font-family: var(--font-primary);
-		color: var(--secondary);
-		text-decoration: none;
-		width: fit-content;
-	}
-
-	.matrixcolored {
-		background-color: #333;
-		color: #fff !important;
-		font-size: 20px;
-		height: 23px;
-	}
-
-	.discordcolored {
-		background-color: #5865f2;
-		color: #fff !important;
-		font-size: 20px;
-		height: 23px;
-	}
-
-	.githubcolored {
-		background-color: #333;
-		color: #fff !important;
-		font-size: 20px;
-		height: 23px;
-	}
-
-	.web,
-	.email,
-	.picture,
-	.pgp {
-		background-color: var(--tertiary);
-		color: #fff !important;
-		font-size: 20px;
-		height: 23px;
-		transition: all 0.25s;
-	}
-
-	.web:hover,
-	.email:hover,
-	.picture:hover,
-	.pgp:hover {
-		background-color: var(--accent);
-		color: #333 !important;
-	}
-
-	.socials {
-		display: flex;
-		flex-direction: row;
-		gap: 0.5rem;
-	}
-</style>
+				{#if picture}
+					<Link url={picture} classes="picture">
+						<IconCamera />
+					</Link>
+				{/if}
+				
+            </LinksOuter>
+        </CardInner>
+    {/each}
+</CardOuter>
\ No newline at end of file