Run prettier

2025-12-09 20:57:44 +00:00 · 2021-09-10 22:39:53 +02:00
parent da628a8495
commit c2c76df660
35 changed files with 1053 additions and 1078 deletions
--- a/jest.config.cjs
+++ b/jest.config.cjs
@@ -1,5 +1,5 @@
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'node',
+	preset: 'ts-jest',
+	testEnvironment: 'node'
 };
--- a/src/lib/components/ComponentIndex/ArrowButton.svelte
+++ b/src/lib/components/ComponentIndex/ArrowButton.svelte
@@ -1,83 +1,83 @@
 <script>
-  export const primary = false;
-  export let active = false;
-  export let small = false
+	export const primary = false;
+	export let active = false;
+	export let small = false;
 </script>

-<style>
-  div {
-    font-size: 1rem;
-    border: 2px solid var(--dark-gray);
-    border-radius: 3px;
-    background-color: white;
-    color: var(--dark-gray);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 13.5px var(--s-2);
-    position: relative;
-  }
-  div.small {
-    font-size: var(--font-100);
-  }
-  div:hover {
-    cursor: pointer;
-    border-color: var(--secondary);
-    color: var(--secondary);
-  }
-
-  .arrow {
-    margin-left: 25px;
-    height: 16px;
-    -webkit-mask: url(/images/right-arrow.svg) no-repeat center;
-    mask: url(/images/right-arrow.svg) no-repeat center;
-    background-color: var(--dark-gray);
-  }
-  div:hover .arrow {
-    background-color: var(--secondary);
-  }
-  .arrow.active {
-    background-color: var(--dark-gray);
-  }
-
-  .popin {
-    min-width: 250px;
-    width: 100%;
-    font-size: var(--font-100);
-    display: none;
-    position: absolute;
-      left: var(--s-4);
-      top: 100%;
-    z-index: 100;
-    margin: 0;
-    padding: 0;
-    border: 2px solid var(--secondary);
-    border-radius: 5px;
-    background: white;
-  }
-  div:hover .popin:not(:empty) {
-    display: block;
-  }
-
-  span {
-    font-size: 0.875rem;
-  }
-  
-
-  @media screen and (min-width: 700px) {
-    .popin {
-      left: 95%;
-      top: var(--s-4);
-    }
-  }
-</style>
 <span>
-Package Manager
-<div on:click class:small>
-  <span>
-    <slot />
-  </span>
-  <div class="arrow" class:active />
-  <section class="popin"><slot name="menu"></slot></section>
-</div>
+	Package Manager
+	<div on:click class:small>
+		<span>
+			<slot />
+		</span>
+		<div class="arrow" class:active />
+		<section class="popin"><slot name="menu" /></section>
+	</div>
 </span>
+
+<style>
+	div {
+		font-size: 1rem;
+		border: 2px solid var(--dark-gray);
+		border-radius: 3px;
+		background-color: white;
+		color: var(--dark-gray);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 13.5px var(--s-2);
+		position: relative;
+	}
+	div.small {
+		font-size: var(--font-100);
+	}
+	div:hover {
+		cursor: pointer;
+		border-color: var(--secondary);
+		color: var(--secondary);
+	}
+
+	.arrow {
+		margin-left: 25px;
+		height: 16px;
+		-webkit-mask: url(/images/right-arrow.svg) no-repeat center;
+		mask: url(/images/right-arrow.svg) no-repeat center;
+		background-color: var(--dark-gray);
+	}
+	div:hover .arrow {
+		background-color: var(--secondary);
+	}
+	.arrow.active {
+		background-color: var(--dark-gray);
+	}
+
+	.popin {
+		min-width: 250px;
+		width: 100%;
+		font-size: var(--font-100);
+		display: none;
+		position: absolute;
+		left: var(--s-4);
+		top: 100%;
+		z-index: 100;
+		margin: 0;
+		padding: 0;
+		border: 2px solid var(--secondary);
+		border-radius: 5px;
+		background: white;
+	}
+	div:hover .popin:not(:empty) {
+		display: block;
+	}
+
+	span {
+		font-size: 0.875rem;
+	}
+
+	@media screen and (min-width: 700px) {
+		.popin {
+			left: 95%;
+			top: var(--s-4);
+		}
+	}
+</style>
--- a/src/lib/components/ComponentIndex/Card.svelte
+++ b/src/lib/components/ComponentIndex/Card.svelte
@@ -1,17 +1,17 @@
 <script>
-  import Tag from "../Tag.svelte";
-  export let active = false;
-  export let title = "";
-  export let description = "";
-  export let tags = [];
-  export let stars;
-  export let addedOn = new Date();
-  export let url = "";
-  export let npm = "";
-  export let repo = "";
-  export let manager = "npm"
+	import Tag from '../Tag.svelte';
+	export let active = false;
+	export let title = '';
+	export let description = '';
+	export let tags = [];
+	export let stars;
+	export let addedOn = new Date();
+	export let url = '';
+	export let npm = '';
+	export let repo = '';
+	export let manager = 'npm';

-  let clipboardCopy = false
+	let clipboardCopy = false;
 	const copyToClipboard = (text) => {
 		navigator.clipboard
 			.writeText(text)
@@ -22,90 +22,94 @@
 			.catch(() => alert('Clipboard copy Permission denied'));
 	};

-  const packageManagers = {
-    'npm':  "npm install",
-    "pnpm":  "pnpm add",
-    "yarn":  "yarn add"
-  }
+	const packageManagers = {
+		npm: 'npm install',
+		pnpm: 'pnpm add',
+		yarn: 'yarn add'
+	};

-  const cleanupNpm = (npm) => {
-    return npm.replace('https://www.npmjs.com/package/', '')
-  }
+	const cleanupNpm = (npm) => {
+		return npm.replace('https://www.npmjs.com/package/', '');
+	};
 </script>

-<style>
-  .card {
-    display: flex;
-    flex-direction: column;
-    max-width: var(--width-card);
-    padding: 14px;
-    background: #f3f6f9;
-    border-radius: 5px;
-  }
-  .card h3 {
-    word-break: none;
-    font-size: var(--font-300);
-  }
-  .active,
-  .card:hover {
-    background: #e8f3fe;
-  }
-  .card__tags {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-bottom: 1rem;
-  }
-  .card__bottom {
-    display: flex;
-    justify-content: space-between;
-  }
-  .card__bottom > * {
-    white-space: nowrap;
-  }
-
-  .flex-grow {
-    flex-grow: 1;
-  }
-
-  @media screen and (max-width: 400px) {
-    .card {
-      font-size: 0.9rem;
-    }
-
-    .card h3 {
-      font-size: 24px;
-    }
-  }
-</style>
-
 <div class="card" class:active id="component-{escape(title)}">
-  <h3>
-    <a href="#component-{escape(title)}">#</a> <a href={url}>{title}</a>
-    {#if npm}<Tag click={() => copyToClipboard(`${packageManagers[manager]}l ${cleanupNpm(npm)}`)} variant="copy" title={clipboardCopy ? 'copied!' : `${packageManagers[manager]} ${cleanupNpm(npm)}`}/>{/if}
-  </h3>
-  <p class="flex-grow">{description}</p>
-  <div class="card__tags">
-    {#each tags as tag}
-      <Tag title={tag} variant='blue' />
-    {/each}
-  </div>
-  {#if typeof stars !== 'undefined'}
-    <div class="card__bottom">
-      <div>
-        {#if (repo || url).includes('github')}
-          <img style="display:inline" src="/images/github_logo.svg" alt="github logo" />
-        {:else if (repo || url).includes('gitlab')}
-          <img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" />
-        <!-- {:else} -->
-        {/if}
-      </div>
-      <div>
-        &#9733;
-        <code>{stars}</code>
-      </div>
-      <!-- commenting out dates just cause it is not very updated yet - all the cards show same date. put back in when we have better scraping -->
-      <!-- <datetime value={addedOn}>{new Intl.DateTimeFormat('en-Us').format(Date.parse(addedOn))}</datetime> -->
-    </div>
-  {/if}
+	<h3>
+		<a href="#component-{escape(title)}">#</a> <a href={url}>{title}</a>
+		{#if npm}<Tag
+				click={() => copyToClipboard(`${packageManagers[manager]}l ${cleanupNpm(npm)}`)}
+				variant="copy"
+				title={clipboardCopy ? 'copied!' : `${packageManagers[manager]} ${cleanupNpm(npm)}`}
+			/>{/if}
+	</h3>
+	<p class="flex-grow">{description}</p>
+	<div class="card__tags">
+		{#each tags as tag}
+			<Tag title={tag} variant="blue" />
+		{/each}
+	</div>
+	{#if typeof stars !== 'undefined'}
+		<div class="card__bottom">
+			<div>
+				{#if (repo || url).includes('github')}
+					<img style="display:inline" src="/images/github_logo.svg" alt="github logo" />
+				{:else if (repo || url).includes('gitlab')}
+					<img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" />
+					<!-- {:else} -->
+				{/if}
+			</div>
+			<div>
+				&#9733;
+				<code>{stars}</code>
+			</div>
+			<!-- commenting out dates just cause it is not very updated yet - all the cards show same date. put back in when we have better scraping -->
+			<!-- <datetime value={addedOn}>{new Intl.DateTimeFormat('en-Us').format(Date.parse(addedOn))}</datetime> -->
+		</div>
+	{/if}
 </div>
+
+<style>
+	.card {
+		display: flex;
+		flex-direction: column;
+		max-width: var(--width-card);
+		padding: 14px;
+		background: #f3f6f9;
+		border-radius: 5px;
+	}
+	.card h3 {
+		word-break: none;
+		font-size: var(--font-300);
+	}
+	.active,
+	.card:hover {
+		background: #e8f3fe;
+	}
+	.card__tags {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin-bottom: 1rem;
+	}
+	.card__bottom {
+		display: flex;
+		justify-content: space-between;
+	}
+	.card__bottom > * {
+		white-space: nowrap;
+	}
+
+	.flex-grow {
+		flex-grow: 1;
+	}
+
+	@media screen and (max-width: 400px) {
+		.card {
+			font-size: 0.9rem;
+		}
+
+		.card h3 {
+			font-size: 24px;
+		}
+	}
+</style>
--- a/src/lib/components/ComponentIndex/CardList.svelte
+++ b/src/lib/components/ComponentIndex/CardList.svelte
@@ -1,43 +1,43 @@
 <script>
-  export let title;
+	export let title;
 </script>

-<style>
-  h1 {
-    font-family: Overpass;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 150%;
-    margin-bottom: 1rem;
-    @apply text-4xl;
-  }
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 25px;
-  }
-  .list {
-    margin-bottom: 5rem;
-  }
-  @media screen and (max-width: 1024px) {
-    .grid {
-      max-width: calc(var(--width-card) * 2 + 25px);
-      grid-template-columns: repeat(2, 1fr);
-      margin: 0 auto;
-    }
-  }
-  @media screen and (max-width: 700px) {
-    .grid {
-      max-width: var(--width-card);
-      grid-template-columns: 1fr;
-      margin: 0 auto;
-    }
-  }
-</style>
-
 <div class="list">
-  <h1 id="category-{escape(title)}">{title} <a href="#category-{escape(title)}">#</a></h1>
-  <div class="grid">
-    <slot />
-  </div>
+	<h1 id="category-{escape(title)}">{title} <a href="#category-{escape(title)}">#</a></h1>
+	<div class="grid">
+		<slot />
+	</div>
 </div>
+
+<style>
+	h1 {
+		font-family: Overpass;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 150%;
+		margin-bottom: 1rem;
+		@apply text-4xl;
+	}
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		grid-gap: 25px;
+	}
+	.list {
+		margin-bottom: 5rem;
+	}
+	@media screen and (max-width: 1024px) {
+		.grid {
+			max-width: calc(var(--width-card) * 2 + 25px);
+			grid-template-columns: repeat(2, 1fr);
+			margin: 0 auto;
+		}
+	}
+	@media screen and (max-width: 700px) {
+		.grid {
+			max-width: var(--width-card);
+			grid-template-columns: 1fr;
+			margin: 0 auto;
+		}
+	}
+</style>
--- a/src/lib/components/EventListElement/index.svelte
+++ b/src/lib/components/EventListElement/index.svelte
@@ -11,7 +11,6 @@
 		let formattedDate = rawDate.toDateString();
 		return formattedDate;
 	}
-
 </script>

 <figure class="event-tile">
@@ -29,9 +28,9 @@
 </figure>

 <style>
-  h2 {
-    font-size: var(--font-300);
-  }
+	h2 {
+		font-size: var(--font-300);
+	}
 	.event-tile {
 		--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -40,9 +39,9 @@
 		margin-top: 3rem;
 		border-radius: 0.5rem;
 		background: var(--white);
-    display: grid;
-    gap: var(--s-2);
-    justify-items: flex-start;
+		display: grid;
+		gap: var(--s-2);
+		justify-items: flex-start;
 	}
 	.event-tile:hover {
 		filter: brightness(1.1);
@@ -76,5 +75,4 @@
 				var(--tw-shadow);
 		}
 	}
-
 </style>
--- a/src/lib/components/Icon/index.svelte
+++ b/src/lib/components/Icon/index.svelte
@@ -1,213 +1,211 @@
 <script>
-    export let name;
-    export let width = "24px";
-    export let height = "24px";
-    let icons = [
-      {
-        box: "24 24",
-        name: "archive",
-        svg: `<path
+	export let name;
+	export let width = '24px';
+	export let height = '24px';
+	let icons = [
+		{
+			box: '24 24',
+			name: 'archive',
+			svg: `<path
      d="M3 10h18v10.004c0 .55-.445.996-.993.996H3.993A.994.994 0 0 1 3 20.004V10zm6 2v2h6v-2H9zM2 4c0-.552.455-1 .992-1h18.016c.548 0 .992.444.992 1v4H2V4z"
      fill="currentColor"
-    />`,
-      },
-      {
-        box: "24 24",
-        name: "bug",
-        svg: `<path
+    />`
+		},
+		{
+			box: '24 24',
+			name: 'bug',
+			svg: `<path
      d="M6.056 8.3a7.01 7.01 0 0 1 .199-.3h11.49c.069.098.135.199.199.3l2.02-1.166l1 1.732l-2.213 1.278c.162.59.249 1.213.249 1.856v1h3v2h-3a6.96 6.96 0 0 1-.536 2.69l2.5 1.444l-1 1.732l-2.526-1.458A6.992 6.992 0 0 1 13 21.929V14h-2v7.93a6.992 6.992 0 0 1-4.438-2.522l-2.526 1.458l-1-1.732l2.5-1.443A6.979 6.979 0 0 1 5 15H2v-2h3v-1c0-.643.087-1.265.249-1.856L3.036 8.866l1-1.732L6.056 8.3zM8 6a4 4 0 1 1 8 0H8z"
      fill="currentColor"
-    />`,
-      },
-      {
-        box: "24 24",
-        name: "calendar",
-        svg: `<path
+    />`
+		},
+		{
+			box: '24 24',
+			name: 'calendar',
+			svg: `<path
      d="M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2zm3 6V5h-3v2h-2V5H9v2H7V5H4v4h16zm0 2H4v8h16v-8zM6 13h5v4H6v-4z"
      fill="currentColor"
-    />`,
-      },
-      {
-        box: "24 24",
-        name: "code",
-        svg: `<path
+    />`
+		},
+		{
+			box: '24 24',
+			name: 'code',
+			svg: `<path
      d="M24 12l-5.657 5.657l-1.414-1.414L21.172 12l-4.243-4.243l1.414-1.414L24 12zM2.828 12l4.243 4.243l-1.414 1.414L0 12l5.657-5.657L7.07 7.757L2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z"
      fill="currentColor"
-    />`,
-      },
-      {
-        box: "24 24",
-        name: "close",
-        svg: `<path
+    />`
+		},
+		{
+			box: '24 24',
+			name: 'close',
+			svg: `<path
      d="M12 10.586l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.414 1.414l-4.95-4.95l-4.95 4.95l-1.414-1.414l4.95-4.95l-4.95-4.95L7.05 5.636z"
      fill="currentColor"
-    />`,
-      },
-      {
-        box: "24 24",
-        name: "database",
-        svg: `<path
+    />`
+		},
+		{
+			box: '24 24',
+			name: 'database',
+			svg: `<path
      d="M21 9.5v3c0 2.485-4.03 4.5-9 4.5s-9-2.015-9-4.5v-3c0 2.485 4.03 4.5 9 4.5s9-2.015 9-4.5zm-18 5c0 2.485 4.03 4.5 9 4.5s9-2.015 9-4.5v3c0 2.485-4.03 4.5-9 4.5s-9-2.015-9-4.5v-3zm9-2.5c-4.97 0-9-2.015-9-4.5S7.03 3 12 3s9 2.015 9 4.5s-4.03 4.5-9 4.5z"
      fill="currentColor"
-    />`,
-      },
-      {
-        box: "24 24",
-        name: "discord",
-        svg: `<path
+    />`
+		},
+		{
+			box: '24 24',
+			name: 'discord',
+			svg: `<path
      d="M10.076 11c.6 0 1.086.45 1.075 1c0 .55-.474 1-1.075 1C9.486 13 9 12.55 9 12s.475-1 1.076-1zm3.848 0c.601 0 1.076.45 1.076 1s-.475 1-1.076 1c-.59 0-1.075-.45-1.075-1s.474-1 1.075-1zm4.967-9C20.054 2 21 2.966 21 4.163V23l-2.211-1.995l-1.245-1.176l-1.317-1.25l.546 1.943H5.109C3.946 20.522 3 19.556 3 18.359V4.163C3 2.966 3.946 2 5.109 2H18.89zm-3.97 13.713c2.273-.073 3.148-1.596 3.148-1.596c0-3.381-1.482-6.122-1.482-6.122c-1.48-1.133-2.89-1.102-2.89-1.102l-.144.168c1.749.546 2.561 1.334 2.561 1.334a8.263 8.263 0 0 0-3.096-1.008a8.527 8.527 0 0 0-2.077.02c-.062 0-.114.011-.175.021c-.36.032-1.235.168-2.335.662c-.38.178-.607.305-.607.305s.854-.83 2.705-1.376l-.103-.126s-1.409-.031-2.89 1.103c0 0-1.481 2.74-1.481 6.121c0 0 .864 1.522 3.137 1.596c0 0 .38-.472.69-.871c-1.307-.4-1.8-1.24-1.8-1.24s.102.074.287.179c.01.01.02.021.041.031c.031.022.062.032.093.053c.257.147.514.262.75.357c.422.168.926.336 1.513.452a7.06 7.06 0 0 0 2.664.01a6.666 6.666 0 0 0 1.491-.451c.36-.137.761-.337 1.183-.62c0 0-.514.861-1.862 1.25c.309.399.68.85.68.85z"
      fill="currentColor"
-    />`,
-      },
-      {
-        box: "256 185",
-        name: "docker",
-        svg: `<path
+    />`
+		},
+		{
+			box: '256 185',
+			name: 'docker',
+			svg: `<path
      d="M250.716 70.497c-5.765-4-18.976-5.5-29.304-3.5c-1.2-10-6.725-18.749-16.333-26.499l-5.524-4l-3.844 5.75c-4.803 7.5-7.205 18-6.485 28c.24 3.499 1.441 9.749 5.044 15.249c-3.362 2-10.328 4.5-19.455 4.5H1.155l-.48 2c-1.682 9.999-1.682 41.248 18.014 65.247c14.892 18.249 36.99 27.499 66.053 27.499c62.93 0 109.528-30.25 131.386-84.997c8.647.25 27.142 0 36.51-18.75c.24-.5.72-1.5 2.401-5.249l.961-2l-5.284-3.25zM139.986 0h-26.42v24.999h26.42V0zm0 29.999h-26.42v24.999h26.42v-25zm-31.225 0h-26.42v24.999h26.42v-25zm-31.225 0H51.115v24.999h26.421v-25zM46.311 59.998H19.89v24.999H46.31v-25zm31.225 0H51.115v24.999h26.421v-25zm31.225 0h-26.42v24.999h26.42v-25zm31.226 0h-26.422v24.999h26.422v-25zm31.225 0H144.79v24.999h26.422v-25z"
      fill="currentColor"
-    />`,
-      },
-      {
-        box: "24 24",
-        name: "double-checkmark",
-        svg: `<path
+    />`
+		},
+		{
+			box: '24 24',
+			name: 'double-checkmark',
+			svg: `<path
      d="M11.602 13.76l1.412 1.412l8.466-8.466l1.414 1.414l-9.88 9.88l-6.364-6.364l1.414-1.414l2.125 2.125l1.413 1.412zm.002-2.828l4.952-4.953l1.41 1.41l-4.952 4.953l-1.41-1.41zm-2.827 5.655L7.364 18L1 11.636l1.414-1.414l1.413 1.413l-.001.001l4.951 4.951z"
      fill="currentColor"
-    />`,
-      },
-      {
-        box: "24 24",
-        name: "github",
-        svg: `<path
+    />`
+		},
+		{
+			box: '24 24',
+			name: 'github',
+			svg: `<path
                      d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"
                      fill="currentColor"
-                    />`,
-      },
-      {
-        box: "24 24",
-        name: "globe",
-        svg: `<path
+                    />`
+		},
+		{
+			box: '24 24',
+			name: 'globe',
+			svg: `<path
                  d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333A8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248A15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z"
                  fill="currentColor"
-                />`,
-      },
-      {
-        box: "24 24",
-        name: "hammer",
-        svg: `<path
+                />`
+		},
+		{
+			box: '24 24',
+			name: 'hammer',
+			svg: `<path
      d="M17 8V2h3a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-3zm-2 14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V8H2.5V6.074a1 1 0 0 1 .496-.863L8.5 2H15v20z"
      fill="currentColor"
-    />`,
-      },
-      {
-        box: "24 24",
-        name: "palette",
-        svg: `<path d="M12.5708+2C18.0928+2+22.5708+5.978+22.5708+10.889C22.5692+13.9566+20.0825+16.4429+17.0148+16.444L15.0488+16.444C14.1268+16.444+13.3818+17.189+13.3818+18.111C13.3818+18.533+13.5488+18.922+13.8038+19.211C14.0708+19.511+14.2378+19.9+14.2378+20.333C14.2378+21.256+13.4708+22+12.5708+22C7.04881+22+2.57081+17.522+2.57081+12C2.57081+6.478+7.04881+2+12.5708+2ZM8.07081+12C8.89924+12+9.57081+11.3284+9.57081+10.5C9.57081+9.67157+8.89924+9+8.07081+9C7.24239+9+6.57081+9.67157+6.57081+10.5C6.57081+11.3284+7.24239+12+8.07081+12ZM17.0708+12C17.8992+12+18.5708+11.3284+18.5708+10.5C18.5708+9.67157+17.8992+9+17.0708+9C16.2424+9+15.5708+9.67157+15.5708+10.5C15.5708+11.3284+16.2424+12+17.0708+12ZM12.5708+9C13.3992+9+14.0708+8.32843+14.0708+7.5C14.0708+6.67157+13.3992+6+12.5708+6C11.7424+6+11.0708+6.67157+11.0708+7.5C11.0708+8.32843+11.7424+9+12.5708+9Z" opacity="1" fill="#854d0e"/>
+    />`
+		},
+		{
+			box: '24 24',
+			name: 'palette',
+			svg: `<path d="M12.5708+2C18.0928+2+22.5708+5.978+22.5708+10.889C22.5692+13.9566+20.0825+16.4429+17.0148+16.444L15.0488+16.444C14.1268+16.444+13.3818+17.189+13.3818+18.111C13.3818+18.533+13.5488+18.922+13.8038+19.211C14.0708+19.511+14.2378+19.9+14.2378+20.333C14.2378+21.256+13.4708+22+12.5708+22C7.04881+22+2.57081+17.522+2.57081+12C2.57081+6.478+7.04881+2+12.5708+2ZM8.07081+12C8.89924+12+9.57081+11.3284+9.57081+10.5C9.57081+9.67157+8.89924+9+8.07081+9C7.24239+9+6.57081+9.67157+6.57081+10.5C6.57081+11.3284+7.24239+12+8.07081+12ZM17.0708+12C17.8992+12+18.5708+11.3284+18.5708+10.5C18.5708+9.67157+17.8992+9+17.0708+9C16.2424+9+15.5708+9.67157+15.5708+10.5C15.5708+11.3284+16.2424+12+17.0708+12ZM12.5708+9C13.3992+9+14.0708+8.32843+14.0708+7.5C14.0708+6.67157+13.3992+6+12.5708+6C11.7424+6+11.0708+6.67157+11.0708+7.5C11.0708+8.32843+11.7424+9+12.5708+9Z" opacity="1" fill="#854d0e"/>
  <path d="M8.14863+8.91325L8.14863+8.91325C9.02461+8.91325+9.73473+9.62336+9.73473+10.4993L9.73473+10.4993C9.73473+11.3753+9.02461+12.0854+8.14863+12.0854L8.14863+12.0854C7.27266+12.0854+6.56254+11.3753+6.56254+10.4993L6.56254+10.4993C6.56254+9.62336+7.27266+8.91325+8.14863+8.91325Z" opacity="1" fill="#dc2626"/>
  <path d="M12.5708+5.85437L12.5708+5.85437C13.5146+5.85437+14.2796+6.61942+14.2796+7.56315L14.2796+7.56315C14.2796+8.50689+13.5146+9.27194+12.5708+9.27194L12.5708+9.27194C11.6271+9.27194+10.862+8.50689+10.862+7.56315L10.862+7.56315C10.862+6.61942+11.6271+5.85437+12.5708+5.85437Z" opacity="1" fill="#15803d"/>
  <path d="M17.245+8.79055L17.245+8.79055C18.1887+8.79055+18.9537+9.5556+18.9537+10.4993L18.9537+10.4993C18.9537+11.4431+18.1887+12.2081+17.245+12.2081L17.245+12.2081C16.3012+12.2081+15.5362+11.4431+15.5362+10.4993L15.5362+10.4993C15.5362+9.5556+16.3012+8.79055+17.245+8.79055Z" opacity="1" fill="#facc15"/>
-  `,
-      },
-      {
-        box: "24 24",
-        name: "telegram",
-        svg: `<path
+  `
+		},
+		{
+			box: '24 24',
+			name: 'telegram',
+			svg: `<path
      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm-3.11-8.83l.013-.007l.87 2.87c.112.311.266.367.453.341c.188-.025.287-.126.41-.244l1.188-1.148l2.55 1.888c.466.257.801.124.917-.432l1.657-7.822c.183-.728-.137-1.02-.702-.788l-9.733 3.76c-.664.266-.66.638-.12.803l2.497.78z"
      fill="currentColor"
-    />`,
-      },
-      {
-        box: "24 24",
-        name: "twitter",
-        svg: `<path
+    />`
+		},
+		{
+			box: '24 24',
+			name: 'twitter',
+			svg: `<path
                  d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814a11.874 11.874 0 0 1-8.62-4.37a4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101a4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732a11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9c0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"
                  fill="currentColor"
-                />`,
-      },
-      {
-        box: "24 24",
-        name: "virus",
-        svg: `<path d="M13.717+1.947L17.451+3.381L16.734+5.248L15.8+4.889L15.054+6.834C15.8324+7.29588+16.4971+7.92675+16.999+8.68L18.902+7.833L18.495+6.919L20.322+6.106L21.949+9.76L20.122+10.573L19.715+9.66L17.813+10.507C18.0374+11.3837+18.0613+12.2998+17.883+13.187L19.827+13.933L20.185+13L22.053+13.717L20.619+17.451L18.752+16.734L19.11+15.801L17.166+15.054C16.7041+15.8324+16.0733+16.4971+15.32+16.999L16.167+18.902L17.081+18.495L17.894+20.322L14.24+21.949L13.427+20.122L14.34+19.715L13.493+17.813C12.6159+18.0372+11.6995+18.0608+10.812+17.882L10.066+19.827L11+20.185L10.283+22.053L6.549+20.619L7.266+18.752L8.198+19.11L8.946+17.166C8.16749+16.7039+7.5025+16.0731+7+15.32L5.097+16.167L5.504+17.081L3.677+17.894L2.05+14.24L3.877+13.427L4.283+14.341L6.186+13.493C5.96355+12.616+5.93997+11.7003+6.117+10.813L4.172+10.067L3.815+11L1.947+10.283L3.381+6.55L5.248+7.267L4.889+8.2L6.834+8.947C7.2958+8.16798+7.92666+7.50261+8.68+7L7.833+5.097L6.919+5.504L6.106+3.677L9.76+2.051L10.573+3.878L9.66+4.285L10.507+6.187C11.3837+5.96262+12.2998+5.9387+13.187+6.117L13.932+4.172L13+3.815L13.717+1.947ZM10.134+13.232C9.85786+13.7106+10.0219+14.3224+10.5005+14.5985C10.9791+14.8746+11.5909+14.7106+11.867+14.232C12.1431+13.7534+11.9791+13.1416+11.5005+12.8655C11.0219+12.5894+10.4101+12.7534+10.134+13.232ZM14+11C13.4477+11+13+11.4477+13+12C13+12.5523+13.4477+13+14+13C14.5523+13+15+12.5523+15+12C15+11.4477+14.5523+11+14+11ZM10.5+9.402C10.0217+9.67842+9.85808+10.2902+10.1345+10.7685C10.4109+11.2468+11.0227+11.4104+11.501+11.134C11.9791+10.8575+12.1426+10.2458+11.8662+9.76767C11.5898+9.28951+10.9783+9.12581+10.5+9.402Z" opacity="1" fill="#fb7185"/>
+                />`
+		},
+		{
+			box: '24 24',
+			name: 'virus',
+			svg: `<path d="M13.717+1.947L17.451+3.381L16.734+5.248L15.8+4.889L15.054+6.834C15.8324+7.29588+16.4971+7.92675+16.999+8.68L18.902+7.833L18.495+6.919L20.322+6.106L21.949+9.76L20.122+10.573L19.715+9.66L17.813+10.507C18.0374+11.3837+18.0613+12.2998+17.883+13.187L19.827+13.933L20.185+13L22.053+13.717L20.619+17.451L18.752+16.734L19.11+15.801L17.166+15.054C16.7041+15.8324+16.0733+16.4971+15.32+16.999L16.167+18.902L17.081+18.495L17.894+20.322L14.24+21.949L13.427+20.122L14.34+19.715L13.493+17.813C12.6159+18.0372+11.6995+18.0608+10.812+17.882L10.066+19.827L11+20.185L10.283+22.053L6.549+20.619L7.266+18.752L8.198+19.11L8.946+17.166C8.16749+16.7039+7.5025+16.0731+7+15.32L5.097+16.167L5.504+17.081L3.677+17.894L2.05+14.24L3.877+13.427L4.283+14.341L6.186+13.493C5.96355+12.616+5.93997+11.7003+6.117+10.813L4.172+10.067L3.815+11L1.947+10.283L3.381+6.55L5.248+7.267L4.889+8.2L6.834+8.947C7.2958+8.16798+7.92666+7.50261+8.68+7L7.833+5.097L6.919+5.504L6.106+3.677L9.76+2.051L10.573+3.878L9.66+4.285L10.507+6.187C11.3837+5.96262+12.2998+5.9387+13.187+6.117L13.932+4.172L13+3.815L13.717+1.947ZM10.134+13.232C9.85786+13.7106+10.0219+14.3224+10.5005+14.5985C10.9791+14.8746+11.5909+14.7106+11.867+14.232C12.1431+13.7534+11.9791+13.1416+11.5005+12.8655C11.0219+12.5894+10.4101+12.7534+10.134+13.232ZM14+11C13.4477+11+13+11.4477+13+12C13+12.5523+13.4477+13+14+13C14.5523+13+15+12.5523+15+12C15+11.4477+14.5523+11+14+11ZM10.5+9.402C10.0217+9.67842+9.85808+10.2902+10.1345+10.7685C10.4109+11.2468+11.0227+11.4104+11.501+11.134C11.9791+10.8575+12.1426+10.2458+11.8662+9.76767C11.5898+9.28951+10.9783+9.12581+10.5+9.402Z" opacity="1" fill="#fb7185"/>
  <path d="M11.0058+12.5876L11.0058+12.5876C11.6116+12.5876+12.1026+13.0787+12.1026+13.6845L12.1026+13.6845C12.1026+14.2902+11.6116+14.7813+11.0058+14.7813L11.0058+14.7813C10.4001+14.7813+9.90898+14.2902+9.90898+13.6845L9.90898+13.6845C9.90898+13.0787+10.4001+12.5876+11.0058+12.5876Z" opacity="1" fill="#f43f5e"/>
  <path d="M11.0058+8.8978L11.0058+8.8978C11.728+8.8978+12.3135+9.48326+12.3135+10.2054L12.3135+10.2054C12.3135+10.9276+11.728+11.5131+11.0058+11.5131L11.0058+11.5131C10.2836+11.5131+9.69817+10.9276+9.69817+10.2054L9.69817+10.2054C9.69817+9.48326+10.2836+8.8978+11.0058+8.8978Z" opacity="1" fill="#f43f5e"/>
  <path d="M13.9035+10.8667L13.9035+10.8667C14.5294+10.8667+15.0368+11.3741+15.0368+12L15.0368+12C15.0368+12.6259+14.5294+13.1333+13.9035+13.1333L13.9035+13.1333C13.2776+13.1333+12.7702+12.6259+12.7702+12L12.7702+12C12.7702+11.3741+13.2776+10.8667+13.9035+10.8667Z" opacity="1" fill="#f43f5e"/>
-  `,
-      },
-      {
-        box: "24 24",
-        name: "youtube",
-        svg: `<path
+  `
+		},
+		{
+			box: '24 24',
+			name: 'youtube',
+			svg: `<path
      d="M21.543 6.498C22 8.28 22 12 22 12s0 3.72-.457 5.502c-.254.985-.997 1.76-1.938 2.022C17.896 20 12 20 12 20s-5.893 0-7.605-.476c-.945-.266-1.687-1.04-1.938-2.022C2 15.72 2 12 2 12s0-3.72.457-5.502c.254-.985.997-1.76 1.938-2.022C6.107 4 12 4 12 4s5.896 0 7.605.476c.945.266 1.687 1.04 1.938 2.022zM10 15.5l6-3.5l-6-3.5v7z"
      fill="currentColor"
-    />`,
-      },
-    ];
-    let displayIcon = icons.find((e) => e.name === name);
-    if (!displayIcon) {
-      throw Error(`Could not find icon with name ${name}`);
-    }
-  </script>
-  <svg
-    class="svgicon {name}"
-    focusable="false"
-    {width}
-    {height}
-    viewBox="0 0 {displayIcon.box}">{@html displayIcon.svg}</svg
-  >
-  <style>
-    :global(span.icon-wrapper) {
-      padding: 2px 20px;
-      display: flex;
-      justify-items: start;
-    }
-    svg.svgicon {
-      padding-right: 4px;
-      color: #60a5fa;
-      place-self: center;
-    }
-    svg.archive {
-      color: #ca8a04;
-    }
-    svg.bug {
-      color: #84cc16;
-    }
-    svg.calendar {
-      color: #444;
-    }
-    svg.code {
-      color: #164e63;
-    }
-    svg.close {
-      color: #dc2626;
-    }
-    svg.database {
-      color: #6b7280;
-    }
-    svg.discord {
-      color: #7289da;
-    }
-    svg.docker {
-      color: #2496ed;
-    }
-    svg.double-checkmark {
-      color: #84cc16;
-    }
-    svg.github {
-      color: #181717;
-    }
-    svg.hammer {
-      color: #4b5563;
-    }
-    svg.palette {
-      color: #7f1d1d;
-    }
-    svg.telegram {
-      color: #26a5e4;
-    }
-    svg.twitter {
-      color: #1da1f2;
-    }
-    svg.youtube {
-      color: #ff0000;
-    }
-  </style>
+    />`
+		}
+	];
+	let displayIcon = icons.find((e) => e.name === name);
+	if (!displayIcon) {
+		throw Error(`Could not find icon with name ${name}`);
+	}
+</script>
+
+<svg class="svgicon {name}" focusable="false" {width} {height} viewBox="0 0 {displayIcon.box}"
+	>{@html displayIcon.svg}</svg
+>
+
+<style>
+	:global(span.icon-wrapper) {
+		padding: 2px 20px;
+		display: flex;
+		justify-items: start;
+	}
+	svg.svgicon {
+		padding-right: 4px;
+		color: #60a5fa;
+		place-self: center;
+	}
+	svg.archive {
+		color: #ca8a04;
+	}
+	svg.bug {
+		color: #84cc16;
+	}
+	svg.calendar {
+		color: #444;
+	}
+	svg.code {
+		color: #164e63;
+	}
+	svg.close {
+		color: #dc2626;
+	}
+	svg.database {
+		color: #6b7280;
+	}
+	svg.discord {
+		color: #7289da;
+	}
+	svg.docker {
+		color: #2496ed;
+	}
+	svg.double-checkmark {
+		color: #84cc16;
+	}
+	svg.github {
+		color: #181717;
+	}
+	svg.hammer {
+		color: #4b5563;
+	}
+	svg.palette {
+		color: #7f1d1d;
+	}
+	svg.telegram {
+		color: #26a5e4;
+	}
+	svg.twitter {
+		color: #1da1f2;
+	}
+	svg.youtube {
+		color: #ff0000;
+	}
+</style>
--- a/src/lib/components/Select.svelte
+++ b/src/lib/components/Select.svelte
@@ -29,7 +29,7 @@
 	}

 	.themed :global(.select-container) {
-    border: 2px solid var(--dark-gray);
+		border: 2px solid var(--dark-gray);
 		cursor: pointer;
 		flex: 1;
 		align-items: center;
@@ -62,5 +62,4 @@
 		position: static;
 		cursor: pointer;
 	}
-
 </style>
--- a/src/lib/components/Societies/index.svelte
+++ b/src/lib/components/Societies/index.svelte
@@ -1,7 +1,6 @@
 <script>
 	import Icon from '$lib/components/Icon/index.svelte';
 	import societies from './societies.json';
-
 </script>

 <!--society section-->
@@ -100,5 +99,4 @@
 				var(--tw-shadow);
 		}
 	}
-
 </style>
--- a/src/lib/components/Tag.svelte
+++ b/src/lib/components/Tag.svelte
@@ -1,38 +1,38 @@
 <script>
-  export let title = "";
-  export let variant;
-  export let click = undefined
+	export let title = '';
+	export let variant;
+	export let click = undefined;
 </script>

-<style>
-  div {
-    /* max-width: 33%; */
-    padding: 2px 12px;
-    border-radius: 5px;
-    font-family: Overpass;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 12px;
-    line-height: 150%;
-    text-align: center;
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .red {
-    color: #ff3e01;
-    background: #ffdbcf;
-  }
-  .blue {
-    color: #158fff;
-    background: #ddefff;
-  }
-
-  .copy {
-    color: #ff6f01;
-    background: #ffe9cf;
-    cursor: copy;
-  }
-</style>
-
 <div on:click={click} class={variant}>{title}</div>
+
+<style>
+	div {
+		/* max-width: 33%; */
+		padding: 2px 12px;
+		border-radius: 5px;
+		font-family: Overpass;
+		font-style: normal;
+		font-weight: normal;
+		font-size: 12px;
+		line-height: 150%;
+		text-align: center;
+		margin-right: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+
+	.red {
+		color: #ff3e01;
+		background: #ffdbcf;
+	}
+	.blue {
+		color: #158fff;
+		background: #ddefff;
+	}
+
+	.copy {
+		color: #ff6f01;
+		background: #ffe9cf;
+		cursor: copy;
+	}
+</style>
--- a/src/lib/components/_SocialLinks/Link.svelte
+++ b/src/lib/components/_SocialLinks/Link.svelte
@@ -3,14 +3,18 @@
 </script>

 <li class="flex-0 lg:flex-auto flex flex-wrap justify-center font-bold">
-	<a href={path} class="text-basics-900 text-lg no-underline uppercase text-center border-b-4 border-transparent hover:border-b-primary focus:border-b-primary"><img src={image} {alt} /><slot /></a>
+	<a
+		href={path}
+		class="text-basics-900 text-lg no-underline uppercase text-center border-b-4 border-transparent hover:border-b-primary focus:border-b-primary"
+		><img src={image} {alt} /><slot /></a
+	>
 </li>

 <style>
 	img {
 		width: 128px;
 	}
-  a {
+	a {
 		font-size: var(--font-100);
 		transition: border-bottom 0.2s;
 		letter-spacing: 0.05rem;
--- a/src/lib/components/layout/Footer.svelte
+++ b/src/lib/components/layout/Footer.svelte
@@ -4,47 +4,47 @@
 	var year = date.getFullYear();
 </script>

-	<footer>
-		<div class="container">
-			<span>&copy; {year} Svelte Society</span>
-			<span>•</span>
-			<a class="underline" href="/about">Code of Conduct</a>
-			<span>•</span>
-			<span>
-				Contribute on
-				<a
-					class="underline"
-					href="https://github.com/svelte-society/sveltesociety.dev/"
-					target="_blank"
-					rel="noopener">GitHub</a
-				>!
-			</span>
-		</div>
-	</footer>
+<footer>
+	<div class="container">
+		<span>&copy; {year} Svelte Society</span>
+		<span>•</span>
+		<a class="underline" href="/about">Code of Conduct</a>
+		<span>•</span>
+		<span>
+			Contribute on
+			<a
+				class="underline"
+				href="https://github.com/svelte-society/sveltesociety.dev/"
+				target="_blank"
+				rel="noopener">GitHub</a
+			>!
+		</span>
+	</div>
+</footer>

 <style>
-  footer {
-    background-color: var(--accent);
-    color: var(--white);
-    padding: var(--s-8);
-    font-size: var(--font-200);
-  }
-  .container {
-    display: grid;
-    gap: var(--s-2);
-    justify-items: center;
-    justify-content: center;
-    text-align: center;
-  }
-  @media (min-width: 768px) {
-    footer {
-      padding: var(--s-12);
-    }
-    .container {
-      display: flex;
-      gap: var(--s-6);
-    }
-  }
+	footer {
+		background-color: var(--accent);
+		color: var(--white);
+		padding: var(--s-8);
+		font-size: var(--font-200);
+	}
+	.container {
+		display: grid;
+		gap: var(--s-2);
+		justify-items: center;
+		justify-content: center;
+		text-align: center;
+	}
+	@media (min-width: 768px) {
+		footer {
+			padding: var(--s-12);
+		}
+		.container {
+			display: flex;
+			gap: var(--s-6);
+		}
+	}
 	@media print {
 		footer {
 			display: none;
--- a/src/lib/components/layout/Header.svelte
+++ b/src/lib/components/layout/Header.svelte
@@ -63,9 +63,9 @@
 		width: var(--s-12);
 		height: var(--s-12);
 	}
-  .logo {
-    border-bottom: none;
-  }
+	.logo {
+		border-bottom: none;
+	}
 	@media (min-width: 1280px) {
 		ul {
 			display: flex;
--- a/src/lib/components/layout/Link.svelte
+++ b/src/lib/components/layout/Link.svelte
@@ -9,16 +9,16 @@
 </li>

 <style>
-  li {
-    text-transform: uppercase;
-  }
-  a {
-    text-decoration: none;
-    border-bottom: transparent;
-    color: var(--inherit);
-    transition: var(--link-transition);
-    font-size: var(--font-200);
-  }
+	li {
+		text-transform: uppercase;
+	}
+	a {
+		text-decoration: none;
+		border-bottom: transparent;
+		color: var(--inherit);
+		transition: var(--link-transition);
+		font-size: var(--font-200);
+	}

 	a.nav-item {
 		letter-spacing: 0.05rem;
--- a/src/lib/components/recipes/CategoryTree.svelte
+++ b/src/lib/components/recipes/CategoryTree.svelte
@@ -1,50 +1,50 @@
 <script>
-  export let nodes;
-  export let currentPath;
+	export let nodes;
+	export let currentPath;
 </script>

-<style>
-  ul {
-    list-style: none;
-    margin: 0 0 0 1.75rem;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  }
-  li::before {
-    content: "•";
-    color: var(--svelte-grey-light);
-    display: inline-block;
-    width: 1em;
-    margin-left: -1em;
-  }
-  li.active::before {
-    color: var(--svelte-grey);
-  }
-  a {
-    text-decoration: none;
-  }
-  a:hover {
-    text-decoration: underline;
-  }
-  li.active a {
-    font-weight: bold;
-  }
-  @media screen and (max-width: 1024px) {
-    ul {
-      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    }
-  }
-  @media screen and (max-width: 600px) {
-    ul {
-      grid-template-columns: 1fr
-    }
-  }
-</style>
-
 <ul>
-  {#each nodes.filter((r) => r.meta.layout !== 'recipeCategory') as node}
-    <li class:active={node.path.includes(node.path)}>
-      <a href={node.path}>{node.meta.title}</a>
-    </li>
-  {/each}
+	{#each nodes.filter((r) => r.meta.layout !== 'recipeCategory') as node}
+		<li class:active={node.path.includes(node.path)}>
+			<a href={node.path}>{node.meta.title}</a>
+		</li>
+	{/each}
 </ul>
+
+<style>
+	ul {
+		list-style: none;
+		margin: 0 0 0 1.75rem;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	}
+	li::before {
+		content: '•';
+		color: var(--svelte-grey-light);
+		display: inline-block;
+		width: 1em;
+		margin-left: -1em;
+	}
+	li.active::before {
+		color: var(--svelte-grey);
+	}
+	a {
+		text-decoration: none;
+	}
+	a:hover {
+		text-decoration: underline;
+	}
+	li.active a {
+		font-weight: bold;
+	}
+	@media screen and (max-width: 1024px) {
+		ul {
+			grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+		}
+	}
+	@media screen and (max-width: 600px) {
+		ul {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
--- a/src/lib/components/recipes/Note.svelte
+++ b/src/lib/components/recipes/Note.svelte
@@ -1,28 +1,28 @@
-<style>
-    div {
-        background-color: rgba(99,177,249, 0.2);
-        border-left: 4px solid rgb(99,177,249);
-        border-radius: 5px;
-        margin: 1rem 0;
-        padding: .75rem 1.5rem 1rem 1.5rem;
-    }
-    
-    div :global(a) {
-        color: inherit;
-        border-bottom: 2px dashed rgb(99,177,249);
-        margin: 0 -3px;
-        padding: 0 3px;
-    }
-    div :global(a:active),
-    div :global(a:focus),
-    div :global(a:hover) {
-        background: rgb(99,177,249);
-        border-bottom: 2px solid black;
-        color: black;
-        text-decoration: none;
-    }
-</style>
-
 <div>
-    <slot></slot>
+	<slot />
 </div>
+
+<style>
+	div {
+		background-color: rgba(99, 177, 249, 0.2);
+		border-left: 4px solid rgb(99, 177, 249);
+		border-radius: 5px;
+		margin: 1rem 0;
+		padding: 0.75rem 1.5rem 1rem 1.5rem;
+	}
+
+	div :global(a) {
+		color: inherit;
+		border-bottom: 2px dashed rgb(99, 177, 249);
+		margin: 0 -3px;
+		padding: 0 3px;
+	}
+	div :global(a:active),
+	div :global(a:focus),
+	div :global(a:hover) {
+		background: rgb(99, 177, 249);
+		border-bottom: 2px solid black;
+		color: black;
+		text-decoration: none;
+	}
+</style>
--- a/src/lib/components/recipes/ReadMore.svelte
+++ b/src/lib/components/recipes/ReadMore.svelte
@@ -1,28 +1,28 @@
-<style>
-    div {
-        background-color: rgba(99,249,105, 0.2);
-        border-left: 4px solid rgb(99,249,105);
-        border-radius: 5px;
-        margin: 1rem 0;
-        padding: .75rem 1.5rem 1rem 1.5rem;
-    }
-    
-    div :global(a) {
-        color: inherit;
-        border-bottom: 2px dashed rgb(99,249,105);
-        margin: 0 -3px;
-        padding: 0 3px;
-    }
-    div :global(a:active),
-    div :global(a:focus),
-    div :global(a:hover) {
-        background: rgb(99,249,105);
-        border-bottom: 2px solid black;
-        color: black;
-        text-decoration: none;
-    }
-</style>
-
 <div>
-    <slot></slot>
+	<slot />
 </div>
+
+<style>
+	div {
+		background-color: rgba(99, 249, 105, 0.2);
+		border-left: 4px solid rgb(99, 249, 105);
+		border-radius: 5px;
+		margin: 1rem 0;
+		padding: 0.75rem 1.5rem 1rem 1.5rem;
+	}
+
+	div :global(a) {
+		color: inherit;
+		border-bottom: 2px dashed rgb(99, 249, 105);
+		margin: 0 -3px;
+		padding: 0 3px;
+	}
+	div :global(a:active),
+	div :global(a:focus),
+	div :global(a:hover) {
+		background: rgb(99, 249, 105);
+		border-bottom: 2px solid black;
+		color: black;
+		text-decoration: none;
+	}
+</style>
--- a/src/lib/components/recipes/Warning.svelte
+++ b/src/lib/components/recipes/Warning.svelte
@@ -1,28 +1,28 @@
-<style>
-    div {
-        background-color: rgba(255,62,1, 0.2);
-        border-left: 4px solid rgb(255,62,1);
-        border-radius: 5px;
-        margin: 1rem 0;
-        padding: .75rem 1.5rem 1rem 1.5rem;
-    }
-
-    div :global(a) {
-        color: inherit;
-        border-bottom: 2px dashed rgb(255, 62, 1);
-        margin: 0 -3px;
-        padding: 0 3px;
-    }
-    div :global(a:active),
-    div :global(a:focus),
-    div :global(a:hover) {
-        background: rgba(255, 62, 1);
-        border-bottom: 2px solid black;
-        color: black;
-        text-decoration: none;
-    }
-</style>
-
 <div>
-    <slot></slot>
+	<slot />
 </div>
+
+<style>
+	div {
+		background-color: rgba(255, 62, 1, 0.2);
+		border-left: 4px solid rgb(255, 62, 1);
+		border-radius: 5px;
+		margin: 1rem 0;
+		padding: 0.75rem 1.5rem 1rem 1.5rem;
+	}
+
+	div :global(a) {
+		color: inherit;
+		border-bottom: 2px dashed rgb(255, 62, 1);
+		margin: 0 -3px;
+		padding: 0 3px;
+	}
+	div :global(a:active),
+	div :global(a:focus),
+	div :global(a:hover) {
+		background: rgba(255, 62, 1);
+		border-bottom: 2px solid black;
+		color: black;
+		text-decoration: none;
+	}
+</style>
--- a/src/lib/layouts/EventPage.svelte
+++ b/src/lib/layouts/EventPage.svelte
@@ -1,6 +1,5 @@
 <script>
 	export let title = '';
-
 </script>

 <div>
@@ -19,5 +18,4 @@
 		text-align: start;
 		display: block;
 	}
-
 </style>
--- a/src/lib/layouts/Recipe.svelte
+++ b/src/lib/layouts/Recipe.svelte
@@ -1,75 +1,75 @@
 <script>
-  import CategoryTree from "$lib/components/recipes/CategoryTree.svelte";
-  import Icon from '$lib/components/Icon/index.svelte';
-  import { categories } from '$lib/stores/recipes';
-  import { page } from '$app/stores';
+	import CategoryTree from '$lib/components/recipes/CategoryTree.svelte';
+	import Icon from '$lib/components/Icon/index.svelte';
+	import { categories } from '$lib/stores/recipes';
+	import { page } from '$app/stores';

-  export let title,
-    description = "";
+	export let title,
+		description = '';
 </script>

 <main>
-  <div class="TOC">
-    <h1>Table of Contents</h1>
-    {#each $categories as node}
-      <div class="TOCLink" class:active={$page.path.includes(node.path)}>
-        <Icon name={node.meta.icon} />
-        <a href={node.path}>{node.meta.title}</a>
-      </div>
-      {#if $page.path.includes(node.path)}
-        <CategoryTree nodes={node.children} />
-      {/if}
-    {/each}
-  </div>
-  <article>
-    <h1>{title}</h1>
-    <slot />
-  </article>
+	<div class="TOC">
+		<h1>Table of Contents</h1>
+		{#each $categories as node}
+			<div class="TOCLink" class:active={$page.path.includes(node.path)}>
+				<Icon name={node.meta.icon} />
+				<a href={node.path}>{node.meta.title}</a>
+			</div>
+			{#if $page.path.includes(node.path)}
+				<CategoryTree nodes={node.children} />
+			{/if}
+		{/each}
+	</div>
+	<article>
+		<h1>{title}</h1>
+		<slot />
+	</article>
 </main>

 <style>
-  .TOCLink {
-    align-items: baseline;
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-gap: 10px;
-    padding: 1rem 0;
-    border-bottom: 1px solid #d0deec;
-    font-size: 1.1em;
-  }
-  .TOCLink.active a {
-    font-weight: bold;
-  }
-  .TOCLink img {
-    height: 1em;
-  }
-  @media (min-width: 1024px) {
-    main {
-      display: flex;
-    }
-  }
-  main {
-    margin: 0 auto;
-    max-width: var(--width-content);
-    padding: 2rem 1rem;
-  }
-  .TOC {
-    margin-right: 2rem;
-    flex: 1;
-    font-family: Overpass;
-    line-height: 150%;
-  }
-  .TOC :global(a) {
-    color: #2e2e35;
-    font-weight: normal;
-  }
-  article {
-    flex: 3;
-    overflow-x: hidden;
-  }
-  @media (min-width: 1024px) {
-    article {
-      margin-left: 2rem;
-    }
-  }
+	.TOCLink {
+		align-items: baseline;
+		display: grid;
+		grid-template-columns: auto 1fr;
+		grid-gap: 10px;
+		padding: 1rem 0;
+		border-bottom: 1px solid #d0deec;
+		font-size: 1.1em;
+	}
+	.TOCLink.active a {
+		font-weight: bold;
+	}
+	.TOCLink img {
+		height: 1em;
+	}
+	@media (min-width: 1024px) {
+		main {
+			display: flex;
+		}
+	}
+	main {
+		margin: 0 auto;
+		max-width: var(--width-content);
+		padding: 2rem 1rem;
+	}
+	.TOC {
+		margin-right: 2rem;
+		flex: 1;
+		font-family: Overpass;
+		line-height: 150%;
+	}
+	.TOC :global(a) {
+		color: #2e2e35;
+		font-weight: normal;
+	}
+	article {
+		flex: 3;
+		overflow-x: hidden;
+	}
+	@media (min-width: 1024px) {
+		article {
+			margin-left: 2rem;
+		}
+	}
 </style>
--- a/src/lib/layouts/RecipeCategory.svelte
+++ b/src/lib/layouts/RecipeCategory.svelte
@@ -1,85 +1,85 @@
 <script>
-  import CategoryTree from "$lib/components/recipes/CategoryTree.svelte";
-  import Icon from '$lib/components/Icon/index.svelte';
-  import { categories } from '$lib/stores/recipes';
-  import { page } from '$app/stores';
+	import CategoryTree from '$lib/components/recipes/CategoryTree.svelte';
+	import Icon from '$lib/components/Icon/index.svelte';
+	import { categories } from '$lib/stores/recipes';
+	import { page } from '$app/stores';

-  const childrenNodes = $categories.find(c => c.path === $page.path).children || [];
+	const childrenNodes = $categories.find((c) => c.path === $page.path).children || [];

-  export let title,
-    description = "";
+	export let title,
+		description = '';
 </script>

 <main>
-  <div class="TOC">
-    <h1>Table of Contents</h1>
-    {#each $categories as node}
-      <div class="TOCLink" class:active={$page.path.includes(node.path)}>
-        <Icon name={node.meta.icon} />
-        <a href={node.path}>{node.meta.title}</a>
-      </div>
-      {#if $page.path.includes(node.path)}
-        <CategoryTree nodes={node.children} />
-      {/if}
-    {/each}
-  </div>
-  <article>
-    <h1>{title}</h1>
-    <slot />
+	<div class="TOC">
+		<h1>Table of Contents</h1>
+		{#each $categories as node}
+			<div class="TOCLink" class:active={$page.path.includes(node.path)}>
+				<Icon name={node.meta.icon} />
+				<a href={node.path}>{node.meta.title}</a>
+			</div>
+			{#if $page.path.includes(node.path)}
+				<CategoryTree nodes={node.children} />
+			{/if}
+		{/each}
+	</div>
+	<article>
+		<h1>{title}</h1>
+		<slot />

-    <ul>
-      {#each childrenNodes as node}
-        <li>
-          <a href={node.path}>{node.meta.title}</a>
-        </li>
-      {/each}
-    </ul>
-  </article>
+		<ul>
+			{#each childrenNodes as node}
+				<li>
+					<a href={node.path}>{node.meta.title}</a>
+				</li>
+			{/each}
+		</ul>
+	</article>
 </main>

 <style>
-  .TOCLink {
-    align-items: baseline;
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-gap: 10px;
-    padding: 1rem 0;
-    border-bottom: 1px solid #d0deec;
-    font-size: 1.1em;
-  }
-  .TOCLink.active a {
-    font-weight: bold;
-  }
-  .TOCLink img {
-    height: 1em;
-  }
-  @media (min-width: 1024px) {
-    main {
-      display: flex;
-    }
-  }
-  main {
-    margin: 0 auto;
-    max-width: var(--width-content);
-    padding: 2rem 1rem;
-  }
-  .TOC {
-    margin-right: 2rem;
-    flex: 1;
-    font-family: Overpass;
-    line-height: 150%;
-  }
-  .TOC :global(a) {
-    color: #2e2e35;
-    font-weight: normal;
-  }
-  article {
-    flex: 3;
-    overflow-x: hidden;
-  }
-  @media (min-width: 1024px) {
-    article {
-      margin-left: 2rem;
-    }
-  }
+	.TOCLink {
+		align-items: baseline;
+		display: grid;
+		grid-template-columns: auto 1fr;
+		grid-gap: 10px;
+		padding: 1rem 0;
+		border-bottom: 1px solid #d0deec;
+		font-size: 1.1em;
+	}
+	.TOCLink.active a {
+		font-weight: bold;
+	}
+	.TOCLink img {
+		height: 1em;
+	}
+	@media (min-width: 1024px) {
+		main {
+			display: flex;
+		}
+	}
+	main {
+		margin: 0 auto;
+		max-width: var(--width-content);
+		padding: 2rem 1rem;
+	}
+	.TOC {
+		margin-right: 2rem;
+		flex: 1;
+		font-family: Overpass;
+		line-height: 150%;
+	}
+	.TOC :global(a) {
+		color: #2e2e35;
+		font-weight: normal;
+	}
+	article {
+		flex: 3;
+		overflow-x: hidden;
+	}
+	@media (min-width: 1024px) {
+		article {
+			margin-left: 2rem;
+		}
+	}
 </style>
--- a/src/lib/utils/sort.test.ts
+++ b/src/lib/utils/sort.test.ts
@@ -1,58 +1,61 @@
 import { compare } from './sort';

-describe("sort", () => {
-    const mock = [{
-        "addedOn": "2019-09-29T14:39:13Z",
-        "category": "Svelte",
-        "description": "Boilerplate with TypeScript, Webpack, Storybook, Travis CI, SCSS, Babel, EsLint, Prettier, Jest",
-        "stars": 51,
-        "tags": [],
-        "title": "agusID/boilerplate-svelte",
-        "url": "https://github.com/agusID/boilerplate-svelte"
-    },
-    {
-        "addedOn": "2020-09-29T14:39:13Z",
-        "category": "Svelte",
-        "description": "An example repo of a Svelte app that is IE11 compatible",
-        "stars": 27,
-        "tags": [],
-        "title": "angelozehr/svelte-example-museums",
-        "url": "https://github.com/angelozehr/svelte-example-museums"
-    }];
+describe('sort', () => {
+	const mock = [
+		{
+			addedOn: '2019-09-29T14:39:13Z',
+			category: 'Svelte',
+			description:
+				'Boilerplate with TypeScript, Webpack, Storybook, Travis CI, SCSS, Babel, EsLint, Prettier, Jest',
+			stars: 51,
+			tags: [],
+			title: 'agusID/boilerplate-svelte',
+			url: 'https://github.com/agusID/boilerplate-svelte'
+		},
+		{
+			addedOn: '2020-09-29T14:39:13Z',
+			category: 'Svelte',
+			description: 'An example repo of a Svelte app that is IE11 compatible',
+			stars: 27,
+			tags: [],
+			title: 'angelozehr/svelte-example-museums',
+			url: 'https://github.com/angelozehr/svelte-example-museums'
+		}
+	];

-    it("should sort by added_desc", () => {
-        mock.sort(compare("added_desc"));
-        expect(mock[0].title).toEqual("angelozehr/svelte-example-museums");
-        expect(mock[1].title).toEqual("agusID/boilerplate-svelte");
-    });
+	it('should sort by added_desc', () => {
+		mock.sort(compare('added_desc'));
+		expect(mock[0].title).toEqual('angelozehr/svelte-example-museums');
+		expect(mock[1].title).toEqual('agusID/boilerplate-svelte');
+	});

-    it("should sort by added_asc", () => {
-        mock.sort(compare("added_asc"));
-        expect(mock[0].title).toEqual("agusID/boilerplate-svelte");
-        expect(mock[1].title).toEqual("angelozehr/svelte-example-museums");
-    });
+	it('should sort by added_asc', () => {
+		mock.sort(compare('added_asc'));
+		expect(mock[0].title).toEqual('agusID/boilerplate-svelte');
+		expect(mock[1].title).toEqual('angelozehr/svelte-example-museums');
+	});

-    it("should sort by name_asc", () => {
-        mock.sort(compare("name_asc"));
-        expect(mock[0].title).toEqual("agusID/boilerplate-svelte");
-        expect(mock[1].title).toEqual("angelozehr/svelte-example-museums");
-    });
+	it('should sort by name_asc', () => {
+		mock.sort(compare('name_asc'));
+		expect(mock[0].title).toEqual('agusID/boilerplate-svelte');
+		expect(mock[1].title).toEqual('angelozehr/svelte-example-museums');
+	});

-    it("should sort by name_desc", () => {
-        mock.sort(compare("name_desc"));
-        expect(mock[0].title).toEqual("angelozehr/svelte-example-museums");
-        expect(mock[1].title).toEqual("agusID/boilerplate-svelte");
-    });
+	it('should sort by name_desc', () => {
+		mock.sort(compare('name_desc'));
+		expect(mock[0].title).toEqual('angelozehr/svelte-example-museums');
+		expect(mock[1].title).toEqual('agusID/boilerplate-svelte');
+	});

-    it("should sort by stars_asc", () => {
-        mock.sort(compare("stars_asc"));
-        expect(mock[0].title).toEqual("angelozehr/svelte-example-museums");
-        expect(mock[1].title).toEqual("agusID/boilerplate-svelte");
-    });
+	it('should sort by stars_asc', () => {
+		mock.sort(compare('stars_asc'));
+		expect(mock[0].title).toEqual('angelozehr/svelte-example-museums');
+		expect(mock[1].title).toEqual('agusID/boilerplate-svelte');
+	});

-    it("should sort by stars_desc", () => {
-        mock.sort(compare("stars_desc"));
-        expect(mock[0].title).toEqual("agusID/boilerplate-svelte");
-        expect(mock[1].title).toEqual("angelozehr/svelte-example-museums");
-    });
+	it('should sort by stars_desc', () => {
+		mock.sort(compare('stars_desc'));
+		expect(mock[0].title).toEqual('agusID/boilerplate-svelte');
+		expect(mock[1].title).toEqual('angelozehr/svelte-example-museums');
+	});
 });
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -27,7 +27,7 @@
 <Footer />

 <style>
-  main {
-    padding: var(--s-10) var(--s-5) var(--s-20);
-  }
+	main {
+		padding: var(--s-10) var(--s-5) var(--s-20);
+	}
 </style>
--- a/src/routes/about/__layout.svelte
+++ b/src/routes/about/__layout.svelte
@@ -1,22 +1,23 @@
 <svelte:head>
-  <title>About Svelte Society</title>
+	<title>About Svelte Society</title>
 </svelte:head>
 <div class="wrapper">
-  <slot />
+	<slot />
 </div>

 <style>
-  .wrapper {
-    max-width: 65ch;
-  }
-  .wrapper :global(h2), .wrapper :global(h3) {
-    margin-top: 2rem;
-    margin-bottom: 1.25rem;
-  }
-  .wrapper :global(p) {
-    margin-bottom: 1.25rem;
-  }
-  .wrapper :global(li) {
-    margin-bottom: 1.1rem;
-  }
+	.wrapper {
+		max-width: 65ch;
+	}
+	.wrapper :global(h2),
+	.wrapper :global(h3) {
+		margin-top: 2rem;
+		margin-bottom: 1.25rem;
+	}
+	.wrapper :global(p) {
+		margin-bottom: 1.25rem;
+	}
+	.wrapper :global(li) {
+		margin-bottom: 1.1rem;
+	}
 </style>
--- a/src/routes/cheatsheet/cheat-sheet.js
+++ b/src/routes/cheatsheet/cheat-sheet.js
@@ -1,12 +1,12 @@
-const replPath = 'https://svelte.dev/repl'
-const docPath = 'https://svelte.dev/docs'
+const replPath = 'https://svelte.dev/repl';
+const docPath = 'https://svelte.dev/docs';

 export const cheatSheet = [
-  {
-    title: "Svelte Component",
-    repl: `${replPath}/6a5416148c4b410b8ee0325eef54b107`,
-    doc: `${docPath}#Component_format`,
-    content: `<!-- Widget.svelte -->
+	{
+		title: 'Svelte Component',
+		repl: `${replPath}/6a5416148c4b410b8ee0325eef54b107`,
+		doc: `${docPath}#Component_format`,
+		content: `<!-- Widget.svelte -->
 <script>
  export let textValue
 </script>
@@ -31,12 +31,12 @@ export const cheatSheet = [

 <Widget textValue="I'm a svelte component" />
 `
-  },
-  {
-    title: "Expressions",
-    repl: `${replPath}/27bd55a7357046f2911923069dee9d86`,
-    doc: `${docPath}#Text_expressions`,
-    content: `<script>
+	},
+	{
+		title: 'Expressions',
+		repl: `${replPath}/27bd55a7357046f2911923069dee9d86`,
+		doc: `${docPath}#Text_expressions`,
+		content: `<script>
  let isShowing = true
  let cat = 'cat'
  let user = {name: 'John Wick'}
@@ -55,13 +55,12 @@ export const cheatSheet = [
 <p>{user.name}</p>
 <p>{cat + \`s\`}</p>
 <p>{\`name \${user.name}\`}</p>`
-
-  },
-  {
-    title: "Simple Bind",
-    repl: `${replPath}/505dfd64708844c7b28ead4834059d69`,
-    doc: `${docPath}#Attributes_and_props`,
-    content: `//MyLink.svelte
+	},
+	{
+		title: 'Simple Bind',
+		repl: `${replPath}/505dfd64708844c7b28ead4834059d69`,
+		doc: `${docPath}#Attributes_and_props`,
+		content: `//MyLink.svelte
 <script>
    export let href = ''
    export let title = ''
@@ -88,12 +87,12 @@ export const cheatSheet = [

 <MyLink {...link} />
 `
-  },
-  {
-    title: "Two Way Bind",
-    repl: `${replPath}/63c1cc2e6ab24d33ae531d6acdabc14e`,
-    doc: `${docPath}#bind_element_property`,
-    content: `<MyInput bind:value={value} />
+	},
+	{
+		title: 'Two Way Bind',
+		repl: `${replPath}/63c1cc2e6ab24d33ae531d6acdabc14e`,
+		doc: `${docPath}#bind_element_property`,
+		content: `<MyInput bind:value={value} />

 // Shorthand
 <MyInput bind:value />
@@ -133,12 +132,12 @@ export const cheatSheet = [

 <div bind:this={myDiv}/>
 `
-  },
-  {
-    title: 'Use action',
-    repl: `${replPath}/6262d071414f42e98cdeed1f3c78d93e`,
-    doc: `${docPath}#use_action`,
-    content: `<script>
+	},
+	{
+		title: 'Use action',
+		repl: `${replPath}/6262d071414f42e98cdeed1f3c78d93e`,
+		doc: `${docPath}#use_action`,
+		content: `<script>
  function myFunction(node) {
    // the node has been mounted in the DOM
    return {
@@ -151,12 +150,12 @@ export const cheatSheet = [

 <div use:myFunction></div>
    `
-  },
-  {
-    title: "Conditional Render",
-    repl: `${replPath}/b023c56cdf0d42819fe7ccc38ea75c41`,
-    doc: `${docPath}#if`,
-    content: `{#if condition}
+	},
+	{
+		title: 'Conditional Render',
+		repl: `${replPath}/b023c56cdf0d42819fe7ccc38ea75c41`,
+		doc: `${docPath}#if`,
+		content: `{#if condition}
  <p>Condition is true</p>
 {:else if otherCondition}
  <p>OtherCondition is true</p>
@@ -169,12 +168,12 @@ export const cheatSheet = [
 	<div transition:fade>{value}</div>
 {/key}
 `
-  },
-  {
-    title: "Await Template",
-    repl: `${replPath}/22a36f1affba4334807a133d985ce6ef`,
-    doc: `${docPath}#await`,
-    content: `{#await promise}
+	},
+	{
+		title: 'Await Template',
+		repl: `${replPath}/22a36f1affba4334807a133d985ce6ef`,
+		doc: `${docPath}#await`,
+		content: `{#await promise}
  <p>waiting for the promise to resolve...</p>
 {:then value}
  <p>The value is {value}</p>
@@ -182,13 +181,12 @@ export const cheatSheet = [
  <p>Something went wrong: {error.message}</p>
 {/await}
 `
-
-  },
-  {
-    title: "Render HTML",
-    repl: `${replPath}/44896bb6272d48b2a0a5909678b07cc9`,
-    doc: `${docPath}#html`,
-    content: `<scrit>
+	},
+	{
+		title: 'Render HTML',
+		repl: `${replPath}/44896bb6272d48b2a0a5909678b07cc9`,
+		doc: `${docPath}#html`,
+		content: `<scrit>
  const myHtml = '<span><strong>My text:</strong> text</span>'
 </scrit>

@@ -196,13 +194,12 @@ export const cheatSheet = [

 {@html myHtml}
 `
-
-  },
-  {
-    title: "Handle Events",
-    repl: `${replPath}/10cfb455b7b84514b35913aabee8b5c3`,
-    doc: `${docPath}#on_element_event`,
-    content: `<button on:click={handleClick}>
+	},
+	{
+		title: 'Handle Events',
+		repl: `${replPath}/10cfb455b7b84514b35913aabee8b5c3`,
+		doc: `${docPath}#on_element_event`,
+		content: `<button on:click={handleClick}>
  Press me
 </button>

@@ -218,12 +215,12 @@ export const cheatSheet = [
  Press me
 </button>
 `
-  },
-  {
-    title: "Forwarding Event",
-    repl: `${replPath}/f1e3b92d7a3c466bb614aa8f49cde3b1`,
-    doc: `${docPath}#createEventDispatcher`,
-    content: `// Widget.svelte
+	},
+	{
+		title: 'Forwarding Event',
+		repl: `${replPath}/f1e3b92d7a3c466bb614aa8f49cde3b1`,
+		doc: `${docPath}#createEventDispatcher`,
+		content: `// Widget.svelte
 <script>
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
@@ -241,13 +238,12 @@ import Widget from '.Widget.svelte'
  on:message={e => alert(e.detail.text)}>

 `
-  },
-  {
-    title: "Rendering List",
-    repl: `${replPath}/db8ac032184b455bbeed903ba042937c`,
-    doc: `${docPath}#each`,
-    content:
-      `<ul>
+	},
+	{
+		title: 'Rendering List',
+		repl: `${replPath}/db8ac032184b455bbeed903ba042937c`,
+		doc: `${docPath}#each`,
+		content: `<ul>
  {#each items as item}
  <li>{item.name} x {item.qty}</li>
  {:else}
@@ -269,14 +265,12 @@ import Widget from '.Widget.svelte'
  </li>
 {/each}
 `
-
-  },
-  {
-    title: "Using Slot",
-    repl: `${replPath}/4844ee8feb794ed4bde10508cdb177cf`,
-    doc: `${docPath}#slot`,
-    content:
-      `<!-- Widget.svelte -->
+	},
+	{
+		title: 'Using Slot',
+		repl: `${replPath}/4844ee8feb794ed4bde10508cdb177cf`,
+		doc: `${docPath}#slot`,
+		content: `<!-- Widget.svelte -->
 <div>
  <slot>Default content</slot>
 </div>
@@ -287,14 +281,12 @@ import Widget from '.Widget.svelte'
  <p>I   changed the default content</p>
 </Widget>
 `
-
-  },
-  {
-    title: "Multiple Slot",
-    repl: `${replPath}/abc6ecc5953c4c77af402185a2219df4`,
-    doc: `${docPath}#slot_name`,
-    content:
-      `<!-- Widget.svelte -->
+	},
+	{
+		title: 'Multiple Slot',
+		repl: `${replPath}/abc6ecc5953c4c77af402185a2219df4`,
+		doc: `${docPath}#slot_name`,
+		content: `<!-- Widget.svelte -->
 <div>
  <slot name="header">
    No header was provided
@@ -331,13 +323,12 @@ import Widget from '.Widget.svelte'
  </div>
 </FancyList>
 `
-
-  },
-  {
-    title: "Class Binding",
-    repl: `${replPath}/c0c8e997fec1428ba670d4a95829d110`,
-    doc: `${docPath}#class_name`,
-    content: `<script>
+	},
+	{
+		title: 'Class Binding',
+		repl: `${replPath}/c0c8e997fec1428ba670d4a95829d110`,
+		doc: `${docPath}#class_name`,
+		content: `<script>
   export let type = 'normal'
   export let active = true
 </script>
@@ -355,14 +346,12 @@ import Widget from '.Widget.svelte'

 <div class:active>...</div>
 `
-
-  },
-  {
-    title: "Lifecycle",
-    repl: `${replPath}/ca959a7e552a4b35aa678dbe9a2d2b48`,
-    doc: `${docPath}#svelte`,
-    content:
-      `
+	},
+	{
+		title: 'Lifecycle',
+		repl: `${replPath}/ca959a7e552a4b35aa678dbe9a2d2b48`,
+		doc: `${docPath}#svelte`,
+		content: `
 <script>
 import { onMount } from 'svelte'

@@ -380,14 +369,12 @@ onMount(() => {
  afterUpdate(() => {}),
  onDestroy(() => {})
 ]`
-
-  },
-  {
-    title: "Animations",
-    repl: `${replPath}/f2ba3adfe6cf49a58a38540530567354`,
-    doc: `${docPath}#svelte_animate`,
-    content:
-      `<script>
+	},
+	{
+		title: 'Animations',
+		repl: `${replPath}/f2ba3adfe6cf49a58a38540530567354`,
+		doc: `${docPath}#svelte_animate`,
+		content: `<script>
  import { flip } from "svelte/animate";
  import { quintOut } from "svelte/easing";
  let list = [1, 2, 3];
@@ -403,13 +390,12 @@ onMount(() => {
  </div>
 {/each}
 `
-  },
-  {
-    title: "Transitions",
-    repl: `${replPath}/6e505d732f1e48abbd7d3c4ba4cfc34c`,
-    doc: `${docPath}#svelte_transition`,
-    content:
-`<script>
+	},
+	{
+		title: 'Transitions',
+		repl: `${replPath}/6e505d732f1e48abbd7d3c4ba4cfc34c`,
+		doc: `${docPath}#svelte_transition`,
+		content: `<script>
  import { fade } from "svelte/transition";
  export let condition;
 </script>
@@ -423,13 +409,12 @@ onMount(() => {
 // Other transitions
 [Blur, Scale, Fly, Draw, Slide]
 `
-  },
-  {
-    title: "Reactive Expressions",
-    repl: `${replPath}/0f7793bf7b0745f1b356327fad4a71e1`,
-    doc: `${docPath}#2_Assignments_are_reactive`,
-    content:
-`<script>
+	},
+	{
+		title: 'Reactive Expressions',
+		repl: `${replPath}/0f7793bf7b0745f1b356327fad4a71e1`,
+		doc: `${docPath}#2_Assignments_are_reactive`,
+		content: `<script>
  let num = 0
  $: squared = num * num
  $: cubed = squared * num
@@ -442,13 +427,12 @@ onMount(() => {
 <p>{squared}</p>
 <p>{cubed}</p>
 `
-  },
-  {
-    title: "Reactive Statement",
-    repl: `${replPath}/b959727e045e4eb7b70c7f16e425fed5`,
-    doc: `${docPath}#3_$_marks_a_statement_as_reactive`,
-    content:
-`<script>
+	},
+	{
+		title: 'Reactive Statement',
+		repl: `${replPath}/b959727e045e4eb7b70c7f16e425fed5`,
+		doc: `${docPath}#3_$_marks_a_statement_as_reactive`,
+		content: `<script>
  $: if (count >= 10) {
    alert('count is dangerously high!')
    count = 9
@@ -486,5 +470,5 @@ onMount(() => {
  })()
 </script>
 `
-  },
-]
+	}
+];
--- a/src/routes/cheatsheet/index.svelte
+++ b/src/routes/cheatsheet/index.svelte
@@ -20,11 +20,11 @@
 </main>

 <style>
-  main {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: stretch;
-    justify-items: stretch;
-    gap: var(--s-10);
-  }
+	main {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: stretch;
+		justify-items: stretch;
+		gap: var(--s-10);
+	}
 </style>
--- a/src/routes/components/components.js
+++ b/src/routes/components/components.js
@@ -1,24 +1,24 @@
 const components = new Array(6)
-.fill({
-  image: "/preview-image.png",
-  title: "svelte-tooltip",
-  description:
-    "A tooltip action that you can attach to any element and pass in a Svelte component...",
-  tags: [],
-  stars: 511,
-  addedOn: new Date(),
-  category: "forms"
-})
-.concat(
-  new Array(3).fill({
-    image: "/preview-image.png",
-    title: "svelte-ui",
-    description:
-      "A tooltip action that you can attach to any element and pass in a Svelte component...",
-    tags: [],
-    stars: 511,
-    addedOn: new Date(),
-    category: "ui"
-  })
-);
+	.fill({
+		image: '/preview-image.png',
+		title: 'svelte-tooltip',
+		description:
+			'A tooltip action that you can attach to any element and pass in a Svelte component...',
+		tags: [],
+		stars: 511,
+		addedOn: new Date(),
+		category: 'forms'
+	})
+	.concat(
+		new Array(3).fill({
+			image: '/preview-image.png',
+			title: 'svelte-ui',
+			description:
+				'A tooltip action that you can attach to any element and pass in a Svelte component...',
+			tags: [],
+			stars: 511,
+			addedOn: new Date(),
+			category: 'ui'
+		})
+	);
 export default components;
--- a/src/routes/components/components.json
+++ b/src/routes/components/components.json
@@ -2216,12 +2216,7 @@
 		"description": "Add OAuth2 authorization in Svelte (and SvelteKit, works with SSR)",
 		"npm": "@macfja/svelte-oauth2",
 		"stars": 3,
-		"tags": [
-			"auth",
-			"integrations",
-			"ssr",
-			"third party services"
-		],
+		"tags": ["auth", "integrations", "ssr", "third party services"],
 		"url": "https://github.com/macfja/svelte-oauth2#readme",
 		"addedOn": "2021-09-10T20:00:00.000Z"
 	}
--- a/src/routes/events/index.svelte
+++ b/src/routes/events/index.svelte
@@ -7,18 +7,16 @@
 			error: new Error()
 		};
 	}
-
 </script>

 <script lang="ts">
 	import Societies from '$lib/components/Societies/index.svelte';
 	import EventListElement from '$lib/components/EventListElement/index.svelte';
 	export let events = {};
-
 </script>

 <svelte:head>
-  <title>Events - Svelte Society</title>
+	<title>Events - Svelte Society</title>
 </svelte:head>

 <article class="wrapper">
@@ -50,5 +48,4 @@
 			flex-direction: column;
 		}
 	}
-
 </style>
--- a/src/routes/help/__layout.svelte
+++ b/src/routes/help/__layout.svelte
@@ -1,6 +1,6 @@
 <svelte:head>
-  <title>Help</title>
+	<title>Help</title>
 </svelte:head>
 <main>
-  <slot />
+	<slot />
 </main>
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -14,7 +14,7 @@
 </svelte:head>

 <article class="container">
-  <h1 class="text-center">Welcome to Svelte Society!</h1>
+	<h1 class="text-center">Welcome to Svelte Society!</h1>
 	<section>
 		<p>
 			We are a volunteer global network of Svelte fans that strive to promote Svelte and its
@@ -61,28 +61,28 @@
 	</p>
 </article>

-  <style>
-    article{
-      max-width: 1024px;
-      display: grid;
-      gap: var(--s-20);
-    }
-    h1 {
-      margin: 0;
-    }
-    section {
-      display: grid;
-      gap: var(--s-5);
-    }
-    ul {
-      display: flex;
-      flex-wrap: wrap;
-      column-gap: var(--s-20);
-      row-gap: var(--s-5);
-      justify-content: space-around;
-      text-align: center;
-    }
-    img {
-      width: 128px;
-    }
-  </style>
+<style>
+	article {
+		max-width: 1024px;
+		display: grid;
+		gap: var(--s-20);
+	}
+	h1 {
+		margin: 0;
+	}
+	section {
+		display: grid;
+		gap: var(--s-5);
+	}
+	ul {
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: var(--s-20);
+		row-gap: var(--s-5);
+		justify-content: space-around;
+		text-align: center;
+	}
+	img {
+		width: 128px;
+	}
+</style>
--- a/src/routes/recipes/index.svelte
+++ b/src/routes/recipes/index.svelte
@@ -112,8 +112,7 @@
 	}
 	@media screen and (max-width: 600px) {
 		.categories-wrap {
-
-			grid-template-columns: 1fr
+			grid-template-columns: 1fr;
 		}
 	}
 	.category-style {
--- a/src/routes/recipes/recipes.ts
+++ b/src/routes/recipes/recipes.ts
@@ -3,8 +3,7 @@
 */
 export async function get() {
 	const pages = await Promise.all(
-		Object.entries(import.meta.glob('./**/*.svx'))
-		.map(async ([path, page]) => {
+		Object.entries(import.meta.glob('./**/*.svx')).map(async ([path, page]) => {
 			const { metadata } = await page();
 			const filename = path.split('/').pop();
 			path = '/recipes' + path.substring(1, path.length - '.svx'.length);
@@ -15,11 +14,11 @@ export async function get() {
 		})
 	);

-	const categories = pages.filter(page => page.meta.layout === 'recipeCategory');
+	const categories = pages.filter((page) => page.meta.layout === 'recipeCategory');

-	categories.forEach(category => {
+	categories.forEach((category) => {
 		category.children = [];
-		pages.forEach(p => {
+		pages.forEach((p) => {
 			if (category !== p && p.path.startsWith(category.path)) {
 				category.children.push(p);
 			}
--- a/src/routes/templates/index.svelte
+++ b/src/routes/templates/index.svelte
@@ -4,7 +4,7 @@
 	import components from './templates.json';
 	import { compare, selectSortItems } from '$lib/utils/sort';
 	import Select from '$lib/components/Select.svelte';
-import SearchLayout from '$lib/layouts/SearchLayout.svelte';
+	import SearchLayout from '$lib/layouts/SearchLayout.svelte';

 	let searchValue;

@@ -77,27 +77,26 @@ import SearchLayout from '$lib/layouts/SearchLayout.svelte';
 				isClearable={false}
 			/>

-      <a href='/help/components' class="submit">Submit a template</a>
-    </div>
+			<a href="/help/components" class="submit">Submit a template</a>
+		</div>

 		<input
-    class="searchbar"
-    type="text"
-    placeholder="Search for templates..."
-    bind:value={searchValue}
+			class="searchbar"
+			type="text"
+			placeholder="Search for templates..."
+			bind:value={searchValue}
 		/>
 		<span class="searchbar-count"
-    >{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
+			>{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
 		>
-</section>
-<section slot="items">
-	{#each categories as category}
-		<List title={category || 'Unclassified'}>
-			{#each dataToDisplay.filter((d) => d.category === category) as data}
-				<ComponentCard {...data} />
-			{/each}
-		</List>
-	{/each}
-</section>
+	</section>
+	<section slot="items">
+		{#each categories as category}
+			<List title={category || 'Unclassified'}>
+				{#each dataToDisplay.filter((d) => d.category === category) as data}
+					<ComponentCard {...data} />
+				{/each}
+			</List>
+		{/each}
+	</section>
 </SearchLayout>
-
--- a/src/routes/tooling/index.svelte
+++ b/src/routes/tooling/index.svelte
@@ -1,7 +1,7 @@
 <script>
 	import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
 	import List from '$lib/components/ComponentIndex/CardList.svelte';
-  import SearchLayout from '$layouts/SearchLayout.svelte';
+	import SearchLayout from '$layouts/SearchLayout.svelte';
 	import tools from './tools.json';
 	import Select from '$lib/components/Select.svelte';
 	import { compare, selectSortItems } from '$lib/utils/sort';
@@ -75,7 +75,7 @@
 				showIndicator
 				isClearable={false}
 			/>
-      <a href="/help/components" class="submit">Submit a tool</a>
+			<a href="/help/components" class="submit">Submit a tool</a>
 		</div>

 		<input
@@ -89,13 +89,12 @@
 		>
 	</section>
 	<section slot="items">
-	{#each categories as category}
-		<List title={category || 'Unclassified'}>
-			{#each dataToDisplay.filter((d) => d.category === category) as data}
-				<ComponentCard {...data} />
-			{/each}
-		</List>
-	{/each}
-
-</section>
+		{#each categories as category}
+			<List title={category || 'Unclassified'}>
+				{#each dataToDisplay.filter((d) => d.category === category) as data}
+					<ComponentCard {...data} />
+				{/each}
+			</List>
+		{/each}
+	</section>
 </SearchLayout>