From e2e1990105bcbee6dcdd4d54124f8ecd2ebf3a59 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Wed, 26 Mar 2025 14:08:52 +0000 Subject: [PATCH] refactor: improve markdown rendering on notifications --- site/package.json | 1 + site/pnpm-lock.yaml | 39 +++++++++++++++++-- .../NotificationsInbox/InboxItem.stories.tsx | 9 ++++- .../NotificationsInbox/InboxItem.tsx | 17 ++++---- site/tailwind.config.js | 2 +- 5 files changed, 56 insertions(+), 12 deletions(-) diff --git a/site/package.json b/site/package.json index 93094acb2456c..26ef0ed9dd342 100644 --- a/site/package.json +++ b/site/package.json @@ -140,6 +140,7 @@ "@storybook/test": "8.4.6", "@swc/core": "1.3.38", "@swc/jest": "0.2.37", + "@tailwindcss/typography": "0.5.16", "@testing-library/jest-dom": "6.6.3", "@testing-library/react": "14.3.1", "@testing-library/react-hooks": "8.0.1", diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index e24c0440c7fa4..779b96001f971 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -325,6 +325,9 @@ importers: '@swc/jest': specifier: 0.2.37 version: 0.2.37(@swc/core@1.3.38) + '@tailwindcss/typography': + specifier: 0.5.16 + version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.3.38)(@types/node@20.17.16)(typescript@5.6.3))) '@testing-library/jest-dom': specifier: 6.6.3 version: 6.6.3 @@ -2472,6 +2475,11 @@ packages: peerDependencies: '@swc/core': '*' + '@tailwindcss/typography@0.5.16': + resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==, tarball: https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1' + '@tanstack/match-sorter-utils@8.8.4': resolution: {integrity: sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==, tarball: https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz} engines: {node: '>=12'} @@ -3745,7 +3753,6 @@ packages: eslint@8.52.0: resolution: {integrity: sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==, tarball: https://registry.npmjs.org/eslint/-/eslint-8.52.0.tgz} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true espree@9.6.1: @@ -4634,6 +4641,12 @@ packages: lodash-es@4.17.21: resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==, tarball: https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz} + lodash.castarray@4.4.0: + resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==, tarball: https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz} + + lodash.isplainobject@4.0.6: + resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==, tarball: https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz} + lodash.merge@4.6.2: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==, tarball: https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz} @@ -5261,6 +5274,10 @@ packages: peerDependencies: postcss: ^8.2.14 + postcss-selector-parser@6.0.10: + resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==, tarball: https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz} + engines: {node: '>=4'} + postcss-selector-parser@6.1.2: resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==, tarball: https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz} engines: {node: '>=4'} @@ -8577,6 +8594,14 @@ snapshots: '@swc/counter': 0.1.3 jsonc-parser: 3.2.0 + '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.3.38)(@types/node@20.17.16)(typescript@5.6.3)))': + dependencies: + lodash.castarray: 4.4.0 + lodash.isplainobject: 4.0.6 + lodash.merge: 4.6.2 + postcss-selector-parser: 6.0.10 + tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.3.38)(@types/node@20.17.16)(typescript@5.6.3)) + '@tanstack/match-sorter-utils@8.8.4': dependencies: remove-accents: 0.4.2 @@ -11136,8 +11161,11 @@ snapshots: lodash-es@4.17.21: {} - lodash.merge@4.6.2: - optional: true + lodash.castarray@4.4.0: {} + + lodash.isplainobject@4.0.6: {} + + lodash.merge@4.6.2: {} lodash@4.17.21: {} @@ -12010,6 +12038,11 @@ snapshots: postcss: 8.5.1 postcss-selector-parser: 6.1.2 + postcss-selector-parser@6.0.10: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + postcss-selector-parser@6.1.2: dependencies: cssesc: 3.0.0 diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx index 815bf6511fc6f..681fd0ca71d32 100644 --- a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx +++ b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx @@ -53,7 +53,14 @@ export const Markdown: Story = { notification: { ...MockNotification, read_at: null, - content: "Hello **world**!", + content: + "Template **Write Coder on Coder with AI** has failed to build 1/33 times over the last week.\n\n**Report:**\n\n**sweet_cannon7** failed 1 time:\n\n* [edward / coder-on-coder-claude / #34](https://dev.coder.com/@edward/coder-on-coder-claude/builds/34)\n\nWe recommend reviewing these issues to ensure future builds are successful.", + actions: [ + { + label: "View workspaces", + url: "https://dev.coder.com/workspaces?filter=template%3Acoder-with-ai", + }, + ], }, }, }; diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx index 0f66f0b71dc21..3b8471f84a94d 100644 --- a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx +++ b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx @@ -1,6 +1,7 @@ import type { InboxNotification } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { Button } from "components/Button/Button"; +import { Link } from "components/Link/Link"; import { SquareCheckBig } from "lucide-react"; import type { FC } from "react"; import Markdown from "react-markdown"; @@ -28,14 +29,16 @@ export const InboxItem: FC = ({
- { + return ; + }, + }} > - {notification.content} - + {notification.content} +
{notification.actions.map((action) => { return ( diff --git a/site/tailwind.config.js b/site/tailwind.config.js index 2ce63449437d6..aa5a338c34a8c 100644 --- a/site/tailwind.config.js +++ b/site/tailwind.config.js @@ -75,5 +75,5 @@ module.exports = { }, }, }, - plugins: [require("tailwindcss-animate")], + plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")], };