im dying inside

package.json

@@ -12,11 +12,21 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.5.0",
+		"@types/nprogress": "^0.2.0",
+		"autoprefixer": "^10.4.14",
+		"nprogress": "^0.2.0",
+		"postcss": "^8.4.24",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
+		"svelte-hero-icons": "^5.0.0",
+		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.3.0"
 	},
+	"dependencies": {
+		"lemmy-js-client": "^0.18.0-rc.2"
+
+	},
 	"type": "module"
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/lib/components/Button.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte'
+    import { Color } from '$lib/ui/colors.js'
+
+    export let color: Color = Color.secondary
+    export let loading = false
+
+    const dispatch = createEventDispatcher()
+</script>
+
+<button
+    on:click={(e) => dispatch('click', e)}
+    class="px-3 py-1.5 rounded-md {color} text-sm transition-all"
+>
+    <div
+        class="flex flex-row items-center justify-center gap-2"
+        class:opacity-0={loading}
+    >
+        <slot name="icon" />
+        <slot />
+    </div>
+    <div class="mx-auto my-auto" class:hidden={!loading}>loading...</div>
+</button>

src/lib/components/Link.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { Color } from '$lib/ui/colors.js'
+
+    export let color: Color = Color.secondary
+    export let href = ''
+</script>
+
+<a
+    {href}
+    class="px-2 py-1 rounded-md {color} flex flex-row items-center
+    justify-center text-sm transition-all"
+>
+    <slot name="icon" />
+    <slot />
+</a>

src/lib/components/Logo.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let width = 48
+</script>
+
+<svg
+    {width}
+    viewBox="0 0 100 100"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        id="hexagon"
+        d="M45.5 10.8868C48.594 9.10042 52.406 9.10042 55.5 10.8868L82.3061 26.3632C85.4001 28.1496 87.3061 31.4508 87.3061 35.0235V65.9765C87.3061 69.5492 85.4001 72.8504 82.3061 74.6368L55.5 90.1132C52.406 91.8996 48.594 91.8996 45.5 90.1132L18.6939 74.6368C15.5999 72.8504 13.6939 69.5492 13.6939 65.9765V35.0235C13.6939 31.4508 15.5999 28.1496 18.6939 26.3632L45.5 10.8868Z"
+        class="fill-black dark:fill-white"
+    />
+</svg>

src/lib/components/MultiSelect.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte'
+    type T = $$Generic
+    export let options: T[]
+    export let optionNames: string[] = []
+    export let selected: T
+    export let separate = false
+    let clazz = ''
+    export { clazz as class }
+    const dispatcher = createEventDispatcher<{ select: T }>()
+    $: {
+        dispatcher('select', selected)
+    }
+</script>
+
+<div
+    class="flex overflow-hidden flex-row items-center w-max rounded-md {separate
+        ? 'gap-2'
+        : ''}"
+>
+    {#each options as option, index}
+        <button
+            class="px-3 py-2 text-sm
+             transition-colors {separate ? 'rounded-full' : ''}
+            {selected == option
+                ? 'bg-black text-white dark:bg-white dark:text-black\
+                hover:bg-zinc-900 hover:dark:bg-zinc-300'
+                : 'bg-slate-100 dark:bg-zinc-900 hover:bg-slate-200 hover:dark:bg-zinc-800'} {clazz}
+            "
+            on:click={() => (selected = option)}
+        >
+            {optionNames[index] || option}
+        </button>
+    {/each}
+</div>

src/lib/components/Navbar.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import Logo from '$lib/components/Logo.svelte'
+
+    export let routes: string[] = []
+</script>
+
+<nav
+    class="flex top-0 z-20 flex-row gap-4 items-center mt-2 w-full h-16
+    max-w-7xl mx-auto px-6"
+>
+    <div class="flex flex-row gap-2 items-center mr-auto">
+        <a href="/">
+            <Logo width={40} />
+        </a>
+        {#if routes.length != 0}
+            {#each routes as route}
+                <svg
+                    fill="none"
+                    height="32"
+                    viewBox="0 0 24 24"
+                    width="32"
+                    class="stroke-1 opacity-20 stroke-black dark:stroke-white"
+                >
+                    <path d="M16.88 3.549L7.12 20.451" />
+                </svg>
+                <span>{route}</span>
+            {/each}
+        {/if}
+    </div>
+    <div
+        class="w-8 h-8 rounded-full ring-1 ring-slate-300 bg-slate-100 dark:bg-zinc-800"
+    />
+</nav>

src/lib/lemmy.ts

@@ -0,0 +1,3 @@
+import { LemmyHttp } from 'lemmy-js-client'
+
+export const lemmy = new LemmyHttp('https://lemmy.ml')

src/lib/ui/colors.ts

@@ -0,0 +1,12 @@
+/**
+ * This enum represents a UI color as tailwind classes.
+ */
+
+export enum Color {
+    'accent' = 'border border-black dark:border-white bg-black text-white\
+    dark:bg-white dark:text-black hover:text-inherit hover:bg-transparent hover:dark:bg-transparent active:bg-black/10 active:dark:bg-white/10',
+    'ghost' = 'bg-black/5 dark:bg-white/5 hover:bg-black/10 hover:dark:bg-white/10 text-black dark:text-white border border-transparent',
+    'secondary' = 'hover:bg-black/10 hover:dark:bg-white/10 text-black dark:text-white fill-black dark:fill-white',
+    'danger' = 'border border-red-500 bg-red-500 text-white hover:text-red-500 hover:bg-transparent',
+    'dangerSecondary' = 'hover:bg-red-500 text-red-500 hover:text-white',
+}

src/routes/+layout.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import Navbar from '$lib/components/Navbar.svelte'
+    import '../style/app.css'
+    import { navigating, page } from '$app/stores'
+    import nProgress from 'nprogress'
+    import 'nprogress/nprogress.css'
+
+    nProgress.configure({
+        minimum: 0.4,
+        trickleSpeed: 200,
+        showSpinner: false,
+    })
+
+    $: {
+        if ($navigating) {
+            nProgress.start()
+        }
+        if (!$navigating) {
+            nProgress.done()
+        }
+    }
+</script>
+
+<Navbar routes={$page.url.pathname.split('/').slice(2)} />
+<div class="mx-auto max-w-7xl p-4">
+    <slot />
+</div>

src/routes/+page.svelte

@@ -1,2 +1,10 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+    import Link from '$lib/components/Link.svelte'
+
+    let community = ''
+</script>
+
+<input bind:value={community} placeholder="Community name" />
+<div class="w-max">
+    <Link href="/c/{community}">Go</Link>
+</div>

src/routes/c/[name]/+layout.server.ts

@@ -0,0 +1,6 @@
+import { lemmy } from '$lib/lemmy.js';
+import { error } from '@sveltejs/kit';
+
+export function load({ params }) {
+    return lemmy.getCommunity({ name: params.name })
+}

src/routes/c/[name]/+layout.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { GetCommunityResponse } from 'lemmy-js-client'
+
+    export let data: Promise<GetCommunityResponse>
+</script>
+
+{#await data then data}
+    <div class="flex flex-col gap-4">
+        <div class="flex flex-row gap-4 items-center">
+            <img
+                src={data.community_view.community.icon}
+                alt="test"
+                class="rounded-full bg-white border-slate-200 border p-2"
+                width={64}
+                height={64}
+            />
+            <h1 class="font-bold text-xl">
+                {data.community_view.community.name}
+            </h1>
+        </div>
+        <slot />
+    </div>
+{/await}

src/routes/c/[name]/posts/+page.server.ts

@@ -0,0 +1,5 @@
+import { lemmy } from '$lib/lemmy.js';
+
+export function load({ params }) {
+    return lemmy.getPosts({ limit: 20, community_name: params.name, page: 1, })
+}

src/routes/c/[name]/posts/+page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import MultiSelect from '$lib/components/MultiSelect.svelte'
+    import type { PostResponse } from 'lemmy-js-client'
+    import Post from './Post.svelte'
+
+    export let data: any
+</script>
+
+<MultiSelect options={['Community', 'idk']} selected="Community" />
+
+<div class="flex flex-col gap-4">
+    {#await data then data}
+        <pre>{JSON.stringify(data, undefined, 2)}</pre>
+        {#each data?.posts as post}
+            <Post {post} />
+        {/each}
+    {/await}
+</div>

src/routes/c/[name]/posts/Post.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    export let post: Post
+</script>
+
+<p>{post.post.name}</p>

src/style/app.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    @apply bg-slate-50 dark:bg-zinc-950 text-zinc-900 dark:text-slate-100;
+}
+
+#nprogress .bar {
+    @apply bg-black dark:bg-white !important;
+}
+
+#nprogress .peg {
+    display: none !important;
+}

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['src/**/*.{js,ts,svelte,html}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+