From 65d7fa108a33f475ca68c7f9051d18366fc9b4d3 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 1 Apr 2025 16:50:52 +0000 Subject: [PATCH] refactor: improve markdown rendering on notifications (#17112) **Before:** Screenshot 2025-03-26 at 11 11 46 **After:** ![image](https://github.com/user-attachments/assets/5a249a48-e2ec-4573-97ea-7a978fbe3c9a) --- 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 109e1aab752ee..a010fd266c548 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 70c29f61f19a0..e3343f48c5c98 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 @@ -2467,6 +2470,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'} @@ -3737,7 +3745,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: @@ -4626,6 +4633,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} @@ -5253,6 +5266,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'} @@ -8566,6 +8583,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 @@ -11123,8 +11148,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: {} @@ -11997,6 +12025,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")], }; pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy