slack support

Author: SeanPreusse

.env.example

@@ -1,3 +1,3 @@
-NOTION_DATABASE_ID='3adeaad843ae4b81a4bd25c004c50593'
-NOTION_API_KEY='secret_JSduilTNwrYNaF9yntGYBnGpC2x960lMZK8l6zibNH3'
-ABOUT_PAGE='842ef29054f24e7a91eeb0755ad0c6a8'
+NOTION_DATABASE_ID=
+NOTION_API_KEY=secret_JSduilTNwrYNaF9yntGYBnGpC2x960lMZK8l6zibNH3
+SLACK_WEBHOOK=

app/page.tsx

@@ -3,28 +3,54 @@ import { Article } from "@/lib/types";
 import { postsPerPage } from "@/site";
 import Feed from "@/components/Feed";
 import HeroSection from "../components/HeroSection";
+import axios, { AxiosResponse } from 'axios';
 
+interface SlackMessage {
+  text: string;
+}
 
+const sendSlackMessage = async (message: SlackMessage): Promise<AxiosResponse> => {
+  const slackWebhookUrl = process.env.SLACK_WEBHOOK;
+
+  if (!slackWebhookUrl) {
+    throw new Error('Slack webhook URL is not defined.');
+  }
+
+  return await axios.post(slackWebhookUrl, message);
+};
 
 const HomePage = async ({
   searchParams,
 }: {
-  searchParams: { [key: string]: string };
+  searchParams: { [key: string]: string | undefined };
 }) => {
   const page = Number(searchParams.page) || 1;
   const publishedPosts: Article[] = await getAllPosts();
-  // const startIndex = (page - 1) * postsPerPage;
-  // const endIndex = startIndex + postsPerPage;
-  // const postsToShow = publishedPosts.slice(startIndex, endIndex);
 
+  // Send a message to Slack when the page is accessed
+  const message: SlackMessage = {
+    text: `Someone visited the homepage! Page: ${page}`,
+  };
+
+  try {
+    await sendSlackMessage(message);
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      console.error('Error sending Slack message:', error.message);
+      // Handle the error as needed
+    } else {
+      console.error('An unexpected error occurred:', error);
+      // Handle other types of errors or log them
+    }
+  }
 
   return (
     <>
       <div className="">
-      <HeroSection />
-      <div className = "mt-4 max-w-5xl m-auto p-4 min-h-screen">
-      <Feed articles={publishedPosts} />
-      </div>
+        <HeroSection />
+        <div className="mt-4 max-w-5xl m-auto p-4 min-h-screen">
+          <Feed articles={publishedPosts} />
+        </div>
       </div>
     </>
   );

package-lock.json

@@ -12,6 +12,7 @@
     "@notionhq/client": "^2.2.13",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
+    "axios": "^1.6.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-react": "^0.294.0",