diff --git a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx index 95fb86b..9a14c26 100644 --- a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx +++ b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx @@ -1,4 +1,6 @@ import { + BugIcon, + ExternalLinkIcon, GitPullRequestIcon, HomeIcon, IssuesIcon, @@ -7,6 +9,7 @@ import { ReviewsIcon, SettingsIcon, UserCircleIcon, + XLogo, } from "@diffkit/icons"; import { Avatar, AvatarFallback } from "@diffkit/ui/components/avatar"; import { Button } from "@diffkit/ui/components/button"; @@ -300,13 +303,50 @@ export function DashboardTopbar({
+{code}
{children}
@@ -274,7 +275,7 @@ const components: Record> = {
/>
),
table: ({ node: _, children, ...props }) => (
-
+
{children}
@@ -368,9 +369,9 @@ export function Markdown({
className?: string;
}) {
return (
-
+
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index cc16fcf..ca0570e 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -340,3 +340,59 @@ input[type="search"] {
transparent
);
}
+
+/* GitHub-flavored markdown alerts */
+.markdown-alert {
+ padding: 0.75rem 1rem;
+ margin-bottom: 0.5rem;
+ border-left: 3px solid var(--alert-color);
+ border-radius: 0.375rem;
+ background: color-mix(in srgb, var(--alert-color) 8%, transparent);
+}
+
+.markdown-alert-title {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.8125rem;
+ font-weight: 600;
+ color: var(--alert-color);
+ margin-bottom: 0.25rem;
+}
+
+.markdown-alert-title .octicon {
+ fill: var(--alert-color);
+ flex-shrink: 0;
+}
+
+.markdown-alert-note {
+ --alert-color: oklch(0.55 0.15 255);
+}
+.markdown-alert-tip {
+ --alert-color: oklch(0.55 0.16 155);
+}
+.markdown-alert-important {
+ --alert-color: oklch(0.55 0.18 290);
+}
+.markdown-alert-warning {
+ --alert-color: oklch(0.65 0.16 75);
+}
+.markdown-alert-caution {
+ --alert-color: oklch(0.55 0.2 25);
+}
+
+.dark .markdown-alert-note {
+ --alert-color: oklch(0.7 0.15 255);
+}
+.dark .markdown-alert-tip {
+ --alert-color: oklch(0.7 0.16 155);
+}
+.dark .markdown-alert-important {
+ --alert-color: oklch(0.7 0.18 290);
+}
+.dark .markdown-alert-warning {
+ --alert-color: oklch(0.75 0.14 75);
+}
+.dark .markdown-alert-caution {
+ --alert-color: oklch(0.7 0.2 25);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4508fc8..be8a24b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -282,6 +282,9 @@ importers:
remark-gfm:
specifier: ^4.0.1
version: 4.0.1
+ remark-github-blockquote-alert:
+ specifier: ^2.1.0
+ version: 2.1.0
shiki:
specifier: ^4.0.2
version: 4.0.2
@@ -4383,6 +4386,10 @@ packages:
remark-gfm@4.0.1:
resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+ remark-github-blockquote-alert@2.1.0:
+ resolution: {integrity: sha512-J392jmIP684d7iGsENN0uguL10IGbRdc8bTUSrd/jOLzdWkwg721Fj3JPQGN8tF6fTIrE5HHOIA3nBuwuaeuPQ==}
+ engines: {node: '>=16'}
+
remark-parse@11.0.0:
resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
@@ -8964,6 +8971,10 @@ snapshots:
transitivePeerDependencies:
- supports-color
+ remark-github-blockquote-alert@2.1.0:
+ dependencies:
+ unist-util-visit: 5.1.0
+
remark-parse@11.0.0:
dependencies:
'@types/mdast': 4.0.4