Feat: Add custom styling for blockquote, add Telegram TextDirective

apps/web/package.json

@@ -15,9 +15,11 @@
     "@apollo/client": "^3.13.5",
     "@date-fns/tz": "^1.2.0",
     "@tietokilta/ui": "workspace:*",
+    "@types/unist": "^3.0.3",
     "autoprefixer": "catalog:",
     "clsx": "catalog:",
     "date-fns": "^4.1.0",
+    "mdast-util-directive": "^3.1.0",
     "next": "^15.2.4",
     "next-international": "^1.3.1",
     "nextjs-toploader": "^3.8.15",
@@ -30,6 +32,7 @@
     "react-live-clock": "^6.1.25",
     "react-markdown": "^10.1.0",
     "remark": "^15.0.1",
+    "remark-directive": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remeda": "^2.21.2",
     "server-only": "^0.0.1",

apps/web/src/app/[locale]/(main)/events/[slug]/directives/telegram-directive.ts

@@ -0,0 +1,36 @@
+import { visit } from "unist-util-visit";
+import type { Plugin } from "unified";
+import type { TextDirective } from "mdast-util-directive";
+import type { Node } from "unist";
+import type { Text } from "mdast";
+
+interface TelegramDirective extends TextDirective {
+  name: "tg";
+  children: Text[];
+}
+
+const isTelegramDirective = (node: Node): node is TelegramDirective =>
+  node.type === "textDirective" && (node as TextDirective).name === "tg";
+
+export const telegramDirective: Plugin = () => {
+  return (tree) => {
+    visit(tree, isTelegramDirective, (node) => {
+      const username = node.children[0].value;
+      if (typeof username !== "string" || username === "") return;
+
+      node.data = {
+        hName: "a",
+        hProperties: {
+          target: "_blank",
+          href: `https://t.me/${username}`,
+        },
+        hChildren: [
+          {
+            type: "text",
+            value: `@${username}`,
+          },
+        ],
+      };
+    });
+  };
+};

apps/web/src/app/[locale]/(main)/events/[slug]/page.tsx

@@ -3,6 +3,7 @@ import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Card, Progress } from "@tietokilta/ui";
 import { type Metadata } from "next";
+import remarkDirective from "remark-directive";
 import {
   type IlmomasiinaEvent,
   fetchEvent,
@@ -29,6 +30,7 @@ import { I18nProviderClient } from "@locales/client";
 import { DateTime } from "@components/datetime";
 import { remarkI18n } from "@lib/plugins/remark-i18n";
 import { SignupButtons } from "./signup-buttons";
+import { telegramDirective } from "./directives/telegram-directive";
 
 async function SignUpText({
   startDate,
@@ -409,6 +411,14 @@ export const generateMetadata = async (props: PageProps): Promise<Metadata> => {
   };
 };
 
+export function MarkdownAlert({ children }: { children?: React.ReactNode }) {
+  return (
+    <section className="shadow-solid relative z-20 my-6 rounded-md border-2 border-gray-900 px-4 md:px-6">
+      {children}
+    </section>
+  );
+}
+
 export default async function Page(props: PageProps) {
   const params = await props.params;
   const { slug } = params;
@@ -444,7 +454,15 @@ export default async function Page(props: PageProps) {
                 {event.data.description ? (
                   <div className="prose">
                     <Markdown
-                      remarkPlugins={[[remarkI18n, { locale }], remarkGfm]}
+                      remarkPlugins={[
+                        [remarkI18n, { locale }],
+                        remarkGfm,
+                        remarkDirective,
+                        telegramDirective,
+                      ]}
+                      components={{
+                        blockquote: MarkdownAlert,
+                      }}
                     >
                       {event.data.description}
                     </Markdown>