Post Tweets using a post shadow endpoint.

src/components/compose.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  let tweet = ''
+  let maxCharacters = 140
+
+  $: charactersLeft = maxCharacters - tweet.length
+</script>
+
+<div class="compose">
+  <img src="/profile/matia/avatar.webp" alt="Avatar">
+
+  <form action="/home" method="post" autocomplete="off">
+    <input 
+      aria-label="Enter your tweet"
+      bind:value={tweet}
+      name="tweet"
+      placeholder="What's you hot take?"
+      type="text"
+    />
+    <button
+      class="btn"
+      class:error={charactersLeft < 0}
+      disabled={charactersLeft < 0}
+      type="submit">
+        {charactersLeft === maxCharacters ? 'Tweet' : charactersLeft}
+    </button>
+  </form>
+</div>
+
+<style>
+	.compose {
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		align-items: center;
+		gap: var(--spacing-16);
+		padding: var(--spacing-16) var(--spacing-24);
+		border-bottom: 1px solid var(--color-border-primary);
+	}
+
+	img {
+		width: 48px;
+		height: 48px;
+		border-radius: 50%;
+	}
+
+	form {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-16);
+	}
+
+	input {
+		color: var(--color-text-primary);
+		background-color: transparent;
+	}
+
+	button {
+		min-width: 80px;
+		font-size: var(--font-16);
+		padding: var(--spacing-16);
+	}
+
+	.error {
+		color: tomato;
+	}
+</style>

src/routes/home/index.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Compose from '$root/components/compose.svelte'
 	import Tweet from '$root/components/tweet.svelte'
 	import type { TweetType } from '$root/types'
 
@@ -11,6 +12,8 @@
 
 <h1>Feed</h1>
 
+<Compose />
+
 {#each tweets as tweet (tweet.id)}
 	<Tweet {tweet} />
 {/each}

src/routes/home/index.ts

@@ -41,3 +41,28 @@ export const get: RequestHandler = async () => {
     body: { tweets }
   }
 }
+
+export const post: RequestHandler = async ({ request }) => {
+  const form = await request.formData()
+  const tweet = String(form.get('tweet'))
+
+  if (tweet.length > 140) {
+    return {
+      status: 400,
+      body: 'Maximum Tweet length exceeded.',
+      headers: { location: '/home' }
+    }
+  }
+
+  await prisma.tweet.create({
+    data: {
+      posted: new Date(),
+      url: Math.random().toString(16).slice(2),
+      content: tweet,
+      likes: 0,
+      user: { connect: { id: 1 } }
+    }
+  })
+
+  return {}
+}