rework old pubnix pr

src/lib/ContactForm.svelte

@@ -1,10 +1,5 @@
 <script lang="ts">
-	import HCaptcha from "svelte-hcaptcha";
+	import { Note, Captcha } from "$lib/Form";
-	let submit = false;
-
-	let showSubmitButton = () => {
-		submit = !submit;
-	};
 </script>
 
 <form
@@ -12,10 +7,7 @@
 	method="POST"
 	id="contact-form"
 >
-	<div class="note">
+	<Note content="Your IP will be logged for anti-abuse measures." icon="i-fa6-solid:lock" />
-		<div class="i-fa6-solid:lock" />
-		<b>Your IP will be logged for anti-abuse measures.</b>
-	</div>
 	<div class="meta">
 		<input
 			type="email"
@@ -24,7 +16,7 @@
 			placeholder="Your email"
 			required
 		/>
-		<select id="commentType" name="commentType" required class="button">
+		<select id="commentType" name="commentType" required class="form-button">
 			<option value="" selected disabled>Select a type of comment</option>
 			<option value="Feedback">Feedback</option>
 			<option value="Suggestion">Suggestion</option>
@@ -41,17 +33,7 @@
 		class="form-textbox"
 		placeholder="Your message"
 	/>
-	<div class="note">
+	<Captcha />
-		<div class="i-fa6-solid:circle-info" />
-		<b>The submit button will be visible when you complete the Captcha.</b>
-	</div>
-	<HCaptcha
-		sitekey="67e84266-980c-4050-8a39-142a91928fe8"
-		on:success={showSubmitButton}
-	/>
-	{#if submit}
-		<input type="submit" value="Submit" class="button" />
-	{/if}
 </form>
 
 <style>
@@ -62,12 +44,6 @@
 		width: fit-content;
 	}
 
-	.note {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-	}
-
 	.meta {
 		display: flex;
 		align-items: center;
@@ -104,22 +80,4 @@
 		font-family: var(--font-primary);
 		outline: none;
 	}
-
-	.button {
-		background-color: var(--secondary);
-		border: none;
-		border-radius: 10px;
-		padding: 0.5rem;
-		cursor: pointer;
-		color: var(--text);
-		font-family: var(--font-primary);
-		text-decoration: none;
-	}
-
-	.button:not(select):hover {
-		background-color: var(--accent);
-		text-decoration: none;
-		transition: all 0.5s;
-		color: var(--secondary);
-	}
 </style>

src/lib/Form/Captcha.svelte

@@ -0,0 +1,19 @@
+<script>
+    import HCaptcha from "svelte-hcaptcha";
+	import { Note } from "$lib/Form";
+
+    let submit = false;
+
+    let showSubmitButton = () => {
+        submit = !submit;
+    };
+</script>
+
+<Note content="The submit button will be visible when you complete the Captcha." icon="i-fa6-solid:circle-info" />
+<HCaptcha
+    sitekey="67e84266-980c-4050-8a39-142a91928fe8"
+    on:success={showSubmitButton}
+/>
+{#if submit}
+    <input type="submit" value="Submit" class="form-button" />
+{/if}

src/lib/Form/Note.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    export let content: string;
+    export let icon: string;
+</script>
+
+<div class="note">
+    {#if icon}
+        <div class={icon} />
+    {/if}
+    <b>{content}</b>
+</div>
+
+<style>
+    .note {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+</style>

src/lib/Form/index.ts

@@ -0,0 +1,2 @@
+export { default as Note } from "./Note.svelte";
+export { default as Captcha } from "./Captcha.svelte";

src/lib/Hero.svelte

@@ -2,9 +2,11 @@
 	export let title: string;
 	export let description: string;
 	export let marginTop: string;
+	let styles: string = "";
+	export { styles as style };
 </script>
 
-<div class="hero" style="margin-top: {marginTop}%;">
+<div class="hero" style="margin-top: {marginTop}%; {styles}">
 	{#if title}
 		<h1>{title}</h1>
 	{/if}

src/lib/Nav.svelte

@@ -8,6 +8,7 @@
 		{ name: "Instances", url: "/instances" },
 		{ name: "Projects", url: "/projects" },
 		{ name: "Minecraft", url: "/minecraft" },
+		{ name: "Pubnix", url: "/pubnix" },
 		{ name: "Donate", url: "/donate" },
 		{ name: "FAQ", url: "/faq" },
 		{ name: "Contact us", url: "/contact" },
@@ -115,7 +116,7 @@
 		display: none;
 	}
 
-	@media screen and (max-width: 1058px) {
+	@media screen and (max-width: 1116px) {
 		.links {
 			display: none;
 			width: 100%;

src/lib/PubnixForm.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { Note, Captcha } from "$lib/Form";
+</script>
+
+<form
+	action="https://segfautils.projectsegfau.lt/api/pubnix"
+	method="POST"
+	id="contact-form"
+>
+	<Note content="Your IP will be logged for anti-abuse measures." icon="i-fa6-solid:lock" />
+	<div class="meta">
+		<input
+			type="email"
+			name="email"
+			class="form-textbox"
+			placeholder="Your email"
+			required
+		/>
+		<select id="actionType" name="actionType" required class="form-button">
+			<option value="" selected disabled>Select a type of action</option>
+			<option value="Feedback">Sign up</option>
+			<option value="Suggestion">Delete user account</option>
+		</select>
+	</div>
+	<input
+		type="text"
+		name="sshkey"
+		class="form-textbox"
+		placeholder="Your SSH public key"
+		required
+	/>
+	<textarea
+		id="comment"
+		name="message"
+		rows="4"
+		cols="25"
+		required
+		class="form-textbox"
+		placeholder="The reason you want to join the pubnix."
+	/>
+	<Captcha />
+</form>
+
+<style>
+	form {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		width: fit-content;
+	}
+
+	.meta {
+		display: flex;
+		align-items: center;
+		flex-direction: row;
+		gap: 1rem;
+	}
+
+	.meta > * {
+		width: 50%;
+	}
+
+	@media screen and (max-width: 450px) {
+		.meta {
+			flex-direction: column;
+			align-items: flex-start;
+			justify-content: center;
+		}
+
+		.meta > * {
+			width: calc(100% - 1rem);
+		}
+
+		.meta > *:nth-child(2) {
+			width: 100%;
+		}
+	}
+
+	.form-textbox {
+		background-color: var(--secondary);
+		color: var(--text);
+		border-radius: 10px;
+		border: none;
+		padding: 0.5rem;
+		font-family: var(--font-primary);
+		outline: none;
+	}
+</style>

src/lib/app.css

@@ -16,6 +16,7 @@ html {
 	--grey: #5454547a;
 	--alt: #333;
 	--alt-text: #ddd;
+	--nix: #7e7eff;
 }
 
 html.light {
@@ -59,3 +60,21 @@ a {
 a:hover {
 	filter: brightness(125%);
 }
+
+.form-button {
+	background-color: var(--secondary);
+	border: none;
+	border-radius: 10px;
+	padding: 0.5rem;
+	cursor: pointer;
+	color: var(--text);
+	font-family: var(--font-primary);
+	text-decoration: none;
+}
+
+.form-button:not(select):hover {
+	background-color: var(--accent);
+	text-decoration: none;
+	transition: all 0.5s;
+	color: var(--secondary);
+}

src/routes/index.svelte

@@ -32,6 +32,12 @@
 			icon="i-fa6-solid:money-bill"
 			title="Donate"
 		/>
+		<LinkButton
+			url="/pubnix"
+			icon="i-simple-icons:nixos"
+			title="Check out our new pubnix!"
+			bg="var(--nix)"
+		/>
 	</div>
 </Hero>
 

src/routes/pubnix.md

@@ -0,0 +1,26 @@
+---
+title: Project Segfault Pubnix
+description: A public *Nix system for anyone to use.
+---
+
+<script lang="ts">
+    import PubnixForm from "$lib/PubnixForm.svelte";
+</script>
+
+# { title }
+{ description }
+
+
+## Signup
+<PubnixForm />
+
+## Members 
+(get members from Pubnix API)
+
+## FAQ
+#### What OS does the pubnix run?
+It runs NixOS
+#### Do you guys allow us to host websites from the pubnix?
+Yes! Your website will be available as https://pb.projectsegfau.lt/(username).
+#### Can I cryptomine?
+No. It is strictly forbidden to mine cryptocurrencies on the pubnix. Doing this will get you immediately banned from using Project Segfault services, as you are utilizing a free service that we provide for your own monetary gain which is disgusting.