diff --git a/astro.config.mjs b/astro.config.mjs index 93460fe..2af9742 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -6,6 +6,7 @@ import partytown from '@astrojs/partytown'; import rehypeToc from 'rehype-toc'; import rehypeSlug from 'rehype-slug'; import remarkLinkCard from 'remark-link-card-plus'; +import remarkBreaks from 'remark-breaks'; import { remarkMermaidInjector } from './src/plugins/remark/remark-mermaid-injector.mjs'; // https://astro.build/config @@ -31,6 +32,7 @@ export default defineConfig({ rehypePlugins: [rehypeSlug, [rehypeToc, { headings: ['h2', 'h3', 'h4'] }]], remarkPlugins: [ remarkMermaidInjector, + remarkBreaks, [ remarkLinkCard, { cache: false, shortenUrl: true, thumbnailPosition: 'left' }, diff --git a/package.json b/package.json index da2bb6d..9f4a7df 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "react-dom": "^18.3.1", "rehype-slug": "^6.0.0", "rehype-toc": "^3.0.2", + "remark-breaks": "^4.0.0", "remark-link-card-plus": "^0.7.2", "satori": "^0.10.13", "sharp": "^0.33.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 00200ef..3a0c817 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,6 +92,9 @@ importers: rehype-toc: specifier: ^3.0.2 version: 3.0.2 + remark-breaks: + specifier: ^4.0.0 + version: 4.0.0 remark-link-card-plus: specifier: ^0.7.2 version: 0.7.2 @@ -1332,7 +1335,7 @@ packages: resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==} engines: {node: '>=14.0.0'} peerDependencies: - rollup: npm:@rollup/wasm-node@^4.41.1 + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 peerDependenciesMeta: rollup: optional: true @@ -2267,6 +2270,9 @@ packages: mdast-util-gfm@3.1.0: resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==} + mdast-util-newline-to-break@2.0.0: + resolution: {integrity: sha512-MbgeFca0hLYIEx/2zGsszCSEJJ1JSCdiY5xQxRcLDDGa8EPvlLPupJ4DSajbMPAnC0je8jfb9TiUATnxxrHUog==} + mdast-util-phrasing@4.1.0: resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==} @@ -2754,6 +2760,9 @@ packages: rehype@13.0.2: resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==} + remark-breaks@4.0.0: + resolution: {integrity: sha512-IjEjJOkH4FuJvHZVIW0QCDWxcG96kCq7An/KVH2NfJe6rKZU2AsHeB3OEjPNRxi4QC34Xdx7I2KGYn6IpT7gxQ==} + remark-gfm@4.0.1: resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} @@ -5830,6 +5839,11 @@ snapshots: transitivePeerDependencies: - supports-color + mdast-util-newline-to-break@2.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-find-and-replace: 3.0.2 + mdast-util-phrasing@4.1.0: dependencies: '@types/mdast': 4.0.4 @@ -6379,6 +6393,12 @@ snapshots: rehype-stringify: 10.0.1 unified: 11.0.5 + remark-breaks@4.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-newline-to-break: 2.0.0 + unified: 11.0.5 + remark-gfm@4.0.1: dependencies: '@types/mdast': 4.0.4 diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro index ed7baab..edef7ad 100644 --- a/src/layouts/BlogLayout.astro +++ b/src/layouts/BlogLayout.astro @@ -319,6 +319,27 @@ const authorX = author?.links?.find(l => l.name === 'X')?.id; background-color: #efefef; } } + + blockquote { + margin-left: 0; + margin-right: 0; + padding: calc($space-sp * 0.8) calc($space-sp); + border-left: 4px solid #efefef; + background-color: #fafafa; + color: #555; + + @media (min-width: 768px) { + padding: calc($space * 0.8) calc($space); + } + + > :first-child { + margin-top: 0; + } + + > :last-child { + margin-bottom: 0; + } + } } .remark-link-card-plus__container {