From 431507fd0e0c566e232cf0c1fcfb19e090fbdaf8 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Fri, 18 Oct 2024 17:59:08 -0500
Subject: [PATCH] Add Send A Message To A Discord Channel as a Workflow TIL

---
 README.md                                     |  3 +-
 .../send-a-message-to-a-discord-channel.md    | 64 +++++++++++++++++++
 2 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 workflow/send-a-message-to-a-discord-channel.md

diff --git a/README.md b/README.md
index 3675e95..40d8576 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1474 TILs and counting..._
+_1475 TILs and counting..._
 
 ---
 
@@ -1719,6 +1719,7 @@ _1474 TILs and counting..._
 - [Prune The Excess From node_modules](workflow/prune-the-excess-from-node-modules.md)
 - [Rotate An Image To Be Oriented Upright](workflow/rotate-an-image-to-be-oriented-upright.md)
 - [See Overlaps For A Set Of Time Zones](workflow/see-overlaps-for-a-set-of-time-zones.md)
+- [Send A Message To A Discord Channel](workflow/send-a-message-to-a-discord-channel.md)
 - [Set Recurring Reminders In Slack](workflow/set-recurring-reminders-in-slack.md)
 - [Toggle Between Stories In Storybook](workflow/toggle-between-stories-in-storybook.md)
 - [Update asdf Plugins With Latest Package Versions](workflow/update-asdf-plugins-with-latest-package-versions.md)
diff --git a/workflow/send-a-message-to-a-discord-channel.md b/workflow/send-a-message-to-a-discord-channel.md
new file mode 100644
index 0000000..e544bb5
--- /dev/null
+++ b/workflow/send-a-message-to-a-discord-channel.md
@@ -0,0 +1,64 @@
+# Send A Message To A Discord Channel
+
+I recently added a form to [visualmode.dev](https://www.visualmode.dev) that
+when submitted should send the details to an internal channel in my discord
+server.
+
+I didn't need to set up an _App_ or a _Bot_ to do this. It is much simpler than
+that. All I needed was a valid [_webhook_
+endpoint](https://discord.com/developers/docs/resources/webhook) for my channel
+that I can `POST` to.
+
+From Discord, I can select _Edit Channel_ for a specific channel, go to the
+_Integrations_ tab, go to _Webhooks_, and then create a _New Webhook_. I can
+name it, save it, and then copy the webhook URL.
+
+As a demonstration, I can `POST` to that webhook URL using `cURL` like so:
+
+```bash
+curl -H "Content-Type: application/json" -X POST -d '{"content":"Hello from cURL!"}' <YOUR_WEBHOOK_URL>
+```
+
+Similarly, in some non-public-facing code like a Next.js serverless function, I
+can `POST` to that webhook URL with the `content` that I want to appear in my
+channel.
+
+```
+import { NextResponse } from 'next/server'
+
+export async function POST(request: Request) {
+  const data = await request.json()
+
+  const discordWebhookUrl = process.env.DISCORD_WEBHOOK_URL
+  if (discordWebhookUrl) {
+    try {
+      const response = await fetch(discordWebhookUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          content: `New contact form submission:\nName: ${data.name}\nEmail: ${data.email}\nCompany: ${data.company}\nPhone: ${data.phone}\nMessage: ${data.message}`,
+        }),
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to send Discord message')
+      }
+    } catch (error) {
+      console.error('Error sending to Discord:', error)
+      return NextResponse.json(
+        { error: 'Failed to process form submission' },
+        { status: 500 },
+      )
+    }
+  }
+
+  return NextResponse.json({ message: 'Form submitted successfully' })
+}
+```
+
+This [Structure of Webhook
+guide](https://birdie0.github.io/discord-webhooks-guide/discord_webhook.html)
+has more details on how to specifically structure and format a more complex
+message.