diff --git a/astro.config.ts b/astro.config.ts index ce198b4..7fb87af 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -9,6 +9,7 @@ import rehypeExternalLinks from 'rehype-external-links' import rehypePrettyCode from 'rehype-pretty-code' import rehypeAutolinkHeadings from 'rehype-autolink-headings' import remarkEmoji from 'remark-emoji' +import remarkGithubAlerts from 'remark-github-blockquote-alert' import remarkMath from 'remark-math' import remarkSectionize from 'remark-sectionize' import rehypeDocument from 'rehype-document' @@ -159,6 +160,6 @@ export default defineConfig({ }, ], ], - remarkPlugins: [remarkMath, remarkEmoji, remarkSectionize], + remarkPlugins: [remarkMath, remarkEmoji, remarkSectionize, remarkGithubAlerts], }, }) \ No newline at end of file diff --git a/package.json b/package.json index 3d7382e..2b1367a 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "astro": "astro", "generate:og": "tsx scripts/generate-og-image.ts", "prettier": "prettier --write **/*.{ts,tsx,css,astro} --ignore-path .gitignore", - "deploy": "git push origin main:prod" + "push:prod": "git push origin main:prod" }, "dependencies": { "@astrojs/check": "^0.9.8", @@ -59,6 +59,7 @@ "rehype-external-links": "^3.0.0", "rehype-pretty-code": "^0.14.3", "remark-emoji": "^5.0.2", + "remark-github-blockquote-alert": "^2.1.0", "remark-math": "^6.0.0", "remark-sectionize": "^2.1.0", "satori": "^0.16.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 29bf993..3531a55 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -86,6 +86,9 @@ importers: remark-emoji: specifier: ^5.0.2 version: 5.0.2 + remark-github-blockquote-alert: + specifier: ^2.1.0 + version: 2.1.0 remark-math: specifier: ^6.0.0 version: 6.0.0 @@ -2235,6 +2238,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-math@6.0.0: resolution: {integrity: sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==} @@ -5443,6 +5450,10 @@ snapshots: transitivePeerDependencies: - supports-color + remark-github-blockquote-alert@2.1.0: + dependencies: + unist-util-visit: 5.1.0 + remark-math@6.0.0: dependencies: '@types/mdast': 4.0.4 diff --git a/src/styles/typography.css b/src/styles/typography.css index f983910..c1d7bcd 100644 --- a/src/styles/typography.css +++ b/src/styles/typography.css @@ -83,6 +83,36 @@ @apply [&>p]:my-0 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0; } + /* GitHub-style admonitions */ + .markdown-alert { + @apply my-4 rounded-md border-l-4 px-4 py-2 not-italic; + @apply [&>p]:my-0 [&>p:not(.markdown-alert-title)]:mt-1; + } + .markdown-alert-title { + @apply flex items-center gap-2 font-semibold text-sm; + @apply [&>svg]:size-4 [&>svg]:fill-current; + } + .markdown-alert-note { + @apply border-blue-500 bg-blue-500/10; + @apply [&>.markdown-alert-title]:text-blue-600 dark:[&>.markdown-alert-title]:text-blue-400; + } + .markdown-alert-tip { + @apply border-green-500 bg-green-500/10; + @apply [&>.markdown-alert-title]:text-green-600 dark:[&>.markdown-alert-title]:text-green-400; + } + .markdown-alert-important { + @apply border-purple-500 bg-purple-500/10; + @apply [&>.markdown-alert-title]:text-purple-600 dark:[&>.markdown-alert-title]:text-purple-400; + } + .markdown-alert-warning { + @apply border-yellow-500 bg-yellow-500/10; + @apply [&>.markdown-alert-title]:text-yellow-600 dark:[&>.markdown-alert-title]:text-yellow-400; + } + .markdown-alert-caution { + @apply border-red-500 bg-red-500/10; + @apply [&>.markdown-alert-title]:text-red-600 dark:[&>.markdown-alert-title]:text-red-400; + } + hr { @apply border-border my-10 border-t-2; }