feat: linktree replacement

src/lib/components/Button.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  export let wide = false
+</script>
+
+<button on:click class="px-4 py-3" class:w-full={wide}>
+  <slot />
+</button>
+
+<style>
+  button {
+    --distance: 4px;
+    background: #fff;
+    border: 0.15rem solid #000;
+    box-shadow: var(--distance) var(--distance) 0px 0px rgba(0, 0, 0, 1);
+    transition: var(--transition);
+    font-size: inherit;
+    font-weight: inherit;
+    font-variation-settings: inherit;
+  }
+
+  button:hover {
+    transform: translate(var(--distance), var(--distance));
+    box-shadow: 0 0 0px 0px rgba(0, 0, 0, 1);
+  }
+</style>

src/lib/icons/Globe.svelte

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  fill="currentColor"
+  class="bi bi-globe"
+  viewBox="0 0 16 16"
+>
+  <path
+    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"
+  />
+</svg>

src/routes/(links)/+layout.svelte

@@ -0,0 +1,7 @@
+<svelte:head>
+  <title>nms e.V.</title>
+</svelte:head>
+
+<main class="min-h-screen">
+  <slot />
+</main>

src/routes/(links)/+layout.ts

@@ -0,0 +1,11 @@
+import '$lib/locale'
+import '$lib/stores/bgColor'
+import { init as initNames } from '$lib/stores/names'
+import { waitLocale } from 'svelte-i18n'
+import '../../app.css'
+import type { LayoutLoad } from './$types'
+
+export const load: LayoutLoad = async () => {
+  await initNames()
+  await waitLocale()
+}

src/routes/(links)/links/+page.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import Button from '$lib/components/Button.svelte'
+  import Intro from '$lib/components/Intro.svelte'
+  import Globe from '$lib/icons/Globe.svelte'
+  import Instagram from '$lib/icons/Instagram.svelte'
+  import Logo from '$lib/icons/Logo.svelte'
+  import Telegram from '$lib/icons/Telegram.svelte'
+  import type { PageData } from './$types'
+
+  export let data: PageData
+
+  const iconMap = {
+    instagram: Instagram,
+    telegram: Telegram,
+    web: Globe,
+  }
+
+  function getIcon(icon: string = '') {
+    if (icon in iconMap) return iconMap[icon as keyof typeof iconMap]
+    return null
+  }
+</script>
+
+<header class="p-4 pt-8 flex flex-col items-center m-auto">
+  <div class="logo mb-2">
+    <Logo />
+  </div>
+  <Intro />
+</header>
+
+<hr />
+
+<div class="p-4 flex flex-col gap-4 text-xl max-w-sm m-auto">
+  {#each data.links as { href, label, icon, huge }}
+    {@const iconComponent = getIcon(icon)}
+    <a {href} target="_blank" rel="noopener noreferrer" class:text-4xl={huge}>
+      <Button wide>
+        <div class="inline-flex items-center w-contents">
+          {#if iconComponent}
+            <svelte:component this={iconComponent} />
+          {/if}
+          <span class="ml-2">
+            {label}
+          </span>
+        </div>
+      </Button>
+    </a>
+  {/each}
+</div>
+
+<style>
+  .logo {
+    max-width: 6rem;
+  }
+  .logo :global(svg) {
+    width: 100%;
+    height: auto;
+  }
+</style>

src/routes/(links)/links/+page.ts

@@ -0,0 +1,19 @@
+import { SDK } from '$lib/sdk'
+import { error } from '@sveltejs/kit'
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({}) => {
+  const response = await SDK.items('links').readByQuery({
+    limit: -1,
+    filter: { status: 'published' },
+    // sort: ['-date'],
+    // @ts-ignore
+    fields: '*.*',
+  })
+
+  if (!response.data) throw error(500)
+
+  return {
+    links: response.data,
+  }
+}