feat: phoenix-chan (#38)

* chore: add bot api token in .env.example

* feat(post): add notify bot himarpl request

* feat(common): add bot card component for phoenix-chan

.env.example

@@ -33,4 +33,6 @@ NEXT_PUBLIC_POSTHOG_KEY=
 NEXT_PUBLIC_POSTHOG_HOST=
 
 UPSTASH_REDIS_REST_URL=
-UPSTASH_REDIS_REST_TOKEN=
+UPSTASH_REDIS_REST_TOKEN=
+
+BOT_API_TOKEN=

src/components/common/bot-card.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export function BotCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg font-medium">
+          Minta Phonix-chan untuk ngingetin postingan terbaru
+        </CardTitle>
+        <CardDescription>
+          Phoenix-chan adalah bot telegram official HIMARPL yang siap memberi
+          notifikasi terbaru terkait postingan artikel secara real-time!
+        </CardDescription>
+      </CardHeader>
+      <CardFooter>
+        <Button asChild variant="secondary" className="w-full">
+          <Link href="https://t.me/himarpl_bot" target="_blank">
+            <Image
+              src={
+                "https://cdn.jsdelivr.net/gh/himarplupi/assets-himarpl@v1.3.6/images/phoenix-chan.png"
+              }
+              alt="Foto profil phoenix-chan: sang phoenix yang lemah lembut"
+              className="mr-2 rounded-full"
+              width={32}
+              height={32}
+            />
+            Chat Phoenix-chan
+          </Link>
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

src/components/home/sidebar.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { ReactLenis } from "lenis/react";
 import { useQueryState } from "nuqs";
 
+import { BotCard } from "@/components/common/bot-card";
 import { Footer } from "@/components/home/footer";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -89,6 +90,8 @@ export function Sidebar({
           ))}
         </div>
 
+        <BotCard />
+
         <Footer />
       </div>
     </ReactLenis>

src/env.js

@@ -33,6 +33,7 @@ export const env = createEnv({
       .default("development"),
     BASE_URL: z.string().url(),
     BASE_PATH: z.string().optional(),
+    BOT_API_TOKEN: z.string(),
   },
 
   /**
@@ -62,6 +63,7 @@ export const env = createEnv({
     NEXTAUTH_URL: process.env.NEXTAUTH_URL,
     GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
     GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
+    BOT_API_TOKEN: process.env.BOT_API_TOKEN,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially

src/server/api/routers/post.ts

@@ -2,6 +2,7 @@ import { revalidatePath } from "next/cache";
 import GithubSlugger from "github-slugger";
 import { z } from "zod";
 
+import { env } from "@/env";
 import { parseMetaTitle } from "@/lib/utils";
 import {
   createTRPCRouter,
@@ -101,6 +102,32 @@ export const postRouter = createTRPCRouter({
         },
       });
 
+      const response = await fetch(
+        "https://bot.himarpl.com/api/telegram/notify",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            title: post.title,
+            slug: post.slug,
+            author: {
+              username: currentUser.username,
+              name: currentUser.name,
+            },
+          }),
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-token": env.BOT_API_TOKEN,
+          },
+        },
+      );
+
+      if (!response.ok) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Failed to notify telegram HIMARPL bot",
+        });
+      }
+
       slugger.reset();
       revalidatePath("/me/posts", "layout");