Merge pull request #72 from ProjectSegfault/format

format

.github/workflows/docker.yml

@@ -1,29 +1,25 @@
 name: Docker
 
 on:
-  push:
+    push:
-    branches:
+        branches:
-      - 'master'
+            - "master"
 
 jobs:
-  docker:
+    docker:
-    runs-on: ubuntu-latest
+        runs-on: ubuntu-latest
-    steps:
+        steps:
-      -
+            - name: Set up QEMU
-        name: Set up QEMU
+              uses: docker/setup-qemu-action@v2
-        uses: docker/setup-qemu-action@v2
+            - name: Set up Docker Buildx
-      -
+              uses: docker/setup-buildx-action@v2
-        name: Set up Docker Buildx
+            - name: Login to DockerHub
-        uses: docker/setup-buildx-action@v2
+              uses: docker/login-action@v2
-      -
+              with:
-        name: Login to DockerHub
+                  username: ${{ secrets.DOCKERHUB_USERNAME }}
-        uses: docker/login-action@v2
+                  password: ${{ secrets.DOCKERHUB_TOKEN }}
-        with:
+            - name: Build and push
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
+              uses: docker/build-push-action@v3
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
+              with:
-      -
+                  push: true
-        name: Build and push
+                  tags: projectsegfault/website:latest
-        uses: docker/build-push-action@v3
-        with:
-          push: true
-          tags: projectsegfault/website:latest

src/lib/ContactForm.svelte

@@ -2,9 +2,20 @@
 	import { Note, Captcha, Form, Meta, TextArea } from "$lib/Form";
 </script>
 
-<Form action="https://segfautils.projectsegfau.lt/api/form" method="POST" id="contact-form" >
+<Form
-	<Note content="Your IP will be logged for anti-abuse measures." icon="i-fa6-solid:lock" />
+	action="https://segfautils.projectsegfau.lt/api/form"
-	<Meta inputType="email" inputPlaceholder="Your email" selectType="commentType">
+	method="POST"
+	id="contact-form"
+>
+	<Note
+		content="Your IP will be logged for anti-abuse measures."
+		icon="i-fa6-solid:lock"
+	/>
+	<Meta
+		inputType="email"
+		inputPlaceholder="Your email"
+		selectType="commentType"
+	>
 		<option value="" selected disabled>Select a type of comment</option>
 		<option value="Feedback">Feedback</option>
 		<option value="Suggestion">Suggestion</option>

src/lib/Form/Captcha.svelte

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

src/lib/Form/Form.svelte

@@ -1,19 +1,15 @@
 <script lang="ts">
-    export let action: string;
+	export let action: string;
-    export let method: string;
+	export let method: string;
-    export let id: string;
+	export let id: string;
 </script>
 
-<form
+<form {action} {method} {id}>
-	{action}
+	<slot />
-	{method}
-	{id}
->
-    <slot />
 </form>
 
 <style>
-    form {
+	form {
 		display: flex;
 		flex-direction: column;
 		gap: 1rem;

src/lib/Form/Meta.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
-    export let inputType: string;
+	export let inputType: string;
-    export let inputPlaceholder: string;
+	export let inputPlaceholder: string;
-    export let selectType: string;
+	export let selectType: string;
 </script>
 
 <div class="meta">
-    <input
+	<input
-        type={inputType}
+		type={inputType}
-        name={inputType}
+		name={inputType}
-        class="form-textbox"
+		class="form-textbox"
-        placeholder={inputPlaceholder}
+		placeholder={inputPlaceholder}
-        required
+		required
-    />
+	/>
-    <select name={selectType} required class="form-button">
+	<select name={selectType} required class="form-button">
-        <slot />
+		<slot />
-    </select>
+	</select>
 </div>
 
 <style>
-    .meta {
+	.meta {
 		display: flex;
 		align-items: center;
 		flex-direction: row;

src/lib/Form/Note.svelte

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

src/lib/Form/TextArea.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-    export let id: string;
+	export let id: string;
-    export let name: string;
+	export let name: string;
-    export let placeholder: string;
+	export let placeholder: string;
 </script>
 
 <textarea
-    {id}
+	{id}
-    {name}
+	{name}
-    rows="4"
+	rows="4"
-    cols="25"
+	cols="25"
-    required
+	required
-    class="form-textbox"
+	class="form-textbox"
-    {placeholder}
+	{placeholder}
 />

src/routes/+page.svelte

@@ -26,8 +26,16 @@
 	marginTop="7"
 >
 	<div class="buttons">
-		<LinkButton url="/services" title="Explore our services" icon="i-fa6-solid:bell-concierge" />
+		<LinkButton
-		<LinkButton url="/projects" title="Explore our projects" icon="i-fa6-solid:tractor" />
+			url="/services"
+			title="Explore our services"
+			icon="i-fa6-solid:bell-concierge"
+		/>
+		<LinkButton
+			url="/projects"
+			title="Explore our projects"
+			icon="i-fa6-solid:tractor"
+		/>
 		<LinkButton
 			url="/donate"
 			icon="i-fa6-solid:money-bill"

src/routes/services/+page.svelte

@@ -25,26 +25,26 @@
 			<h2>{group.category}</h2>
 			<div class="items">
 				{#each group.values as item}
-						<CardInner
+					<CardInner
-							title={item.name}
+						title={item.name}
-							description={item.description}
+						description={item.description}
-							icon={item.icon}
+						icon={item.icon}
-						>
+					>
-							<LinksOuter>
+						<LinksOuter>
-								<Link url={item.website} class="web">
+							<Link url={item.website} class="web">
-									<div class="withText">
+								<div class="withText">
-										<div class="i-fa6-solid:globe" />
+									<div class="i-fa6-solid:globe" />
-										<span>Instance link</span>
+									<span>Instance link</span>
-									</div>
+								</div>
-								</Link>
+							</Link>
-								<Link url={item.projectWebsite} class="link">
+							<Link url={item.projectWebsite} class="link">
-									<div class="withText">
+								<div class="withText">
-										<div class="i-fa6-solid:circle-info" />
+									<div class="i-fa6-solid:circle-info" />
-										<span>Project website</span>
+									<span>Project website</span>
-									</div>
+								</div>
-								</Link>
+							</Link>
-							</LinksOuter>
+						</LinksOuter>
-						</CardInner>
+					</CardInner>
 				{/each}
 			</div>
 		{/each}