From 19d6d7aa0187d9af6595c1bc2a8ba98b0c79dee3 Mon Sep 17 00:00:00 2001 From: Emilia Repo Date: Sat, 19 Apr 2025 13:32:15 +0300 Subject: [PATCH] Add custom styling for blockquote, add Telegram TextDirective --- apps/web/package.json | 3 ++ .../[slug]/directives/telegram-directive.ts | 36 +++++++++++++ .../[locale]/(main)/events/[slug]/page.tsx | 20 ++++++- pnpm-lock.yaml | 52 +++++++++++++++++++ 4 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 apps/web/src/app/[locale]/(main)/events/[slug]/directives/telegram-directive.ts diff --git a/apps/web/package.json b/apps/web/package.json index ac92e0b4..13a18e6e 100644 --- a/apps/web/package.json +++ b/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", diff --git a/apps/web/src/app/[locale]/(main)/events/[slug]/directives/telegram-directive.ts b/apps/web/src/app/[locale]/(main)/events/[slug]/directives/telegram-directive.ts new file mode 100644 index 00000000..be3fee41 --- /dev/null +++ b/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}`, + }, + ], + }; + }); + }; +}; diff --git a/apps/web/src/app/[locale]/(main)/events/[slug]/page.tsx b/apps/web/src/app/[locale]/(main)/events/[slug]/page.tsx index 30c0c0be..34939830 100644 --- a/apps/web/src/app/[locale]/(main)/events/[slug]/page.tsx +++ b/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 => { }; }; +export function MarkdownAlert({ children }: { children?: React.ReactNode }) { + return ( +
+ {children} +
+ ); +} + 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 ? (
{event.data.description} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 35d20d0f..e990150a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -205,6 +205,9 @@ importers: '@tietokilta/ui': specifier: workspace:* version: link:../../packages/ui + '@types/unist': + specifier: ^3.0.3 + version: 3.0.3 autoprefixer: specifier: 'catalog:' version: 10.4.21(postcss@8.5.3) @@ -214,6 +217,9 @@ importers: date-fns: specifier: ^4.1.0 version: 4.1.0 + mdast-util-directive: + specifier: ^3.1.0 + version: 3.1.0 next: specifier: ^15.2.4 version: 15.2.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.79.3) @@ -250,6 +256,9 @@ importers: remark: specifier: ^15.0.1 version: 15.0.1 + remark-directive: + specifier: ^4.0.0 + version: 4.0.0 remark-gfm: specifier: ^4.0.1 version: 4.0.1 @@ -5541,6 +5550,9 @@ packages: md5@2.3.0: resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==} + mdast-util-directive@3.1.0: + resolution: {integrity: sha512-I3fNFt+DHmpWCYAT7quoM6lHf9wuqtI+oCOfvILnoicNIqjh5E3dEJWiXuYME2gNe8vl1iMQwyUHa7bgFmak6Q==} + mdast-util-find-and-replace@3.0.2: resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==} @@ -5628,6 +5640,9 @@ packages: micromark-core-commonmark@2.0.2: resolution: {integrity: sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==} + micromark-extension-directive@4.0.0: + resolution: {integrity: sha512-/C2nqVmXXmiseSSuCdItCMho7ybwwop6RrrRPk0KbOHW21JKoCldC+8rFOaundDoRBUWBnJJcxeA/Kvi34WQXg==} + micromark-extension-gfm-autolink-literal@2.1.0: resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==} @@ -7023,6 +7038,9 @@ packages: resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==} engines: {node: '>= 0.10'} + remark-directive@4.0.0: + resolution: {integrity: sha512-7sxn4RfF1o3izevPV1DheyGDD6X4c9hrGpfdUpm7uC++dqrnJxIZVkk7CoKqcLm0VUMAuOol7Mno3m6g8cfMuA==} + remark-gfm@4.0.1: resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} @@ -7098,6 +7116,7 @@ packages: rspack-resolver@1.2.2: resolution: {integrity: sha512-Fwc19jMBA3g+fxDJH2B4WxwZjE0VaaOL7OX/A4Wn5Zv7bOD/vyPZhzXfaO73Xc2GAlfi96g5fGUa378WbIGfFw==} + deprecated: Please migrate to the brand new `@rspack/resolver` or `unrs-resolver` instead run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} @@ -13983,6 +14002,20 @@ snapshots: crypt: 0.0.2 is-buffer: 1.1.6 + mdast-util-directive@3.1.0: + dependencies: + '@types/mdast': 4.0.4 + '@types/unist': 3.0.3 + ccount: 2.0.1 + devlop: 1.1.0 + mdast-util-from-markdown: 2.0.2 + mdast-util-to-markdown: 2.1.2 + parse-entities: 4.0.2 + stringify-entities: 4.0.4 + unist-util-visit-parents: 6.0.1 + transitivePeerDependencies: + - supports-color + mdast-util-find-and-replace@3.0.2: dependencies: '@types/mdast': 4.0.4 @@ -14195,6 +14228,16 @@ snapshots: micromark-util-symbol: 2.0.1 micromark-util-types: 2.0.1 + micromark-extension-directive@4.0.0: + dependencies: + devlop: 1.1.0 + micromark-factory-space: 2.0.1 + micromark-factory-whitespace: 2.0.1 + micromark-util-character: 2.1.1 + micromark-util-symbol: 2.0.1 + micromark-util-types: 2.0.1 + parse-entities: 4.0.2 + micromark-extension-gfm-autolink-literal@2.1.0: dependencies: micromark-util-character: 2.1.1 @@ -15905,6 +15948,15 @@ snapshots: relateurl@0.2.7: {} + remark-directive@4.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-directive: 3.1.0 + micromark-extension-directive: 4.0.0 + unified: 11.0.5 + transitivePeerDependencies: + - supports-color + remark-gfm@4.0.1: dependencies: '@types/mdast': 4.0.4