feat(markdown): support blockquote in callout (#269)

components/blockquote.tsx

@@ -16,7 +16,10 @@ export const Blockquote: React.FC<BlockquoteProps> = ({
  className={cx(
  css`
  position: relative;
- margin: 0;
+ margin-block-start: 0;
+ margin-block-end: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
  padding-block-start: calc(
  var(--font-size-md) * 1.5 + var(--space-sm)
  );
@@ -38,7 +41,7 @@ export const Blockquote: React.FC<BlockquoteProps> = ({
  left: 0;
  width: calc(var(--font-size-md) * 1.5);
  height: calc(var(--font-size-md) * 1.5);
- fill: var(--color-fg-gray-weak);
+ fill: var(--quote-color, var(--color-fg-gray-weak));
  `}
  >
  <path d="M.108 352.536c0 66.794 54.144 120.938 120.937 120.938 66.794 0 120.938-54.144 120.938-120.938s-54.144-120.937-120.938-120.937c-13.727 0-26.867 2.393-39.168 6.61C109.093 82.118 230.814-18.543 117.979 64.303-7.138 156.17-.026 348.84.114 352.371c0 .055-.006.104-.006.165zM266.169 352.536c0 66.794 54.144 120.938 120.938 120.938s120.938-54.144 120.938-120.938S453.9 231.599 387.106 231.599c-13.728 0-26.867 2.393-39.168 6.61C375.154 82.118 496.875-18.543 384.04 64.303 258.923 156.17 266.034 348.84 266.175 352.371c0 .055-.006.104-.006.165z" />
@@ -53,7 +56,7 @@ export const Blockquote: React.FC<BlockquoteProps> = ({
  right: 0;
  width: calc(var(--font-size-md) * 1.5);
  height: calc(var(--font-size-md) * 1.5);
- fill: var(--color-fg-gray-weak);
+ fill: var(--quote-color, var(--color-fg-gray-weak));
  `}
  >
  <path d="M507.93 155.673c0-.055.006-.11.006-.165 0-66.793-54.145-120.938-120.938-120.938S266.061 88.714 266.061 155.508c0 66.794 54.15 120.938 120.938 120.938 13.727 0 26.867-2.393 39.162-6.609-27.209 156.09-148.93 256.752-36.096 173.905C515.182 351.874 508.07 159.198 507.93 155.673zM120.938 276.445c13.727 0 26.867-2.393 39.168-6.609-27.216 156.09-148.937 256.752-36.102 173.905 125.117-91.867 118.006-284.543 117.865-288.068 0-.055.006-.11.006-.165 0-66.793-54.144-120.938-120.937-120.938C54.144 34.57 0 88.714 0 155.508c0 66.794 54.15 120.937 120.938 120.937z" />

components/callout.tsx

@@ -24,15 +24,16 @@ export const Callout: React.FC<CalloutProps> = ({
  css`
  position: relative;
  padding-block-start: calc(
- var(--space-md) + var(--font-size-md) * 2 + var(--space-sm)
+ var(--space-lg) + var(--font-size-md) * 2 + var(--space-sm)
  );
- padding-block-end: var(--space-md);
+ padding-block-end: var(--space-lg);
  padding-inline-start: var(--space-lg);
  padding-inline-end: var(--space-lg);
  line-height: 1.75;
  border-radius: 8px;
  `,
  BACKGROUND_COLORS[variant],
+ QUOTE_COLORS[variant],
  className
  )}
  {...props}
@@ -98,3 +99,12 @@ const BACKGROUND_COLORS: Record<CalloutVariant, string> = {
  background-color: var(--color-bg-yellow-weak);
  `,
 };
+
+const QUOTE_COLORS: Record<CalloutVariant, string> = {
+ [CalloutVariant.info]: css`
+ --quote-color: var(--color-fg-blue-weak);
+ `,
+ [CalloutVariant.warning]: css`
+ --quote-color: var(--color-fg-yellow-weak);
+ `,
+};

components/markdown-article.tsx

@@ -54,15 +54,15 @@ export const Markdown: React.VFC<MarkdownProps> = ({
  }
 
  > ${MdParagraph},
-  > ${MdBlockquote},
-  > ${MdHorizontalRule},
-  > ${MdUnorderedList},
-  > ${MdOrderedList},
-  > ${MdTable},
-  > ${MdCodeBlock},
-  > ${MdImageFigure},
-  > ${MdWebpageEmbed},
-  > ${MdCallout} {
+ > ${MdBlockquote},
+ > ${MdHorizontalRule},
+ > ${MdUnorderedList},
+ > ${MdOrderedList},
+ > ${MdTable},
+ > ${MdCodeBlock},
+ > ${MdImageFigure},
+ > ${MdWebpageEmbed},
+ > ${MdCallout} {
  margin-block-start: var(--block-margin);
  }
 
@@ -94,11 +94,9 @@ export const Markdown: React.VFC<MarkdownProps> = ({
  padding-block-start: var(--block-margin);
  }
 
- 
- ${MdParagraph} + ${MdParagraph} {
+ > ${MdParagraph} + ${MdParagraph} {
  margin-block-start: var(--paragraph-margin);
  }
- 
  `,
  className
  )}
@@ -310,6 +308,50 @@ const MdImageFigure = styled(ImageFigure)``;
 const MdWebpageEmbed = styled(WebpageEmbed)``;
 
 const MdCallout = styled(Callout)`
+ > ${MdParagraph},
+ > ${MdBlockquote},
+ > ${MdHorizontalRule},
+ > ${MdUnorderedList},
+ > ${MdOrderedList},
+ > ${MdTable},
+ > ${MdCodeBlock},
+ > ${MdImageFigure},
+ > ${MdWebpageEmbed} {
+ margin-block-start: var(--block-margin);
+ }
+
+ > ${MdHeading1},
+ > ${MdHeading2},
+ > ${MdHeading3},
+ > ${MdHeading4},
+ > ${MdHeading5},
+ > ${MdHeading6} {
+ margin-block-start: calc(var(--section-margin) - var(--block-margin));
+ padding-block-start: var(--block-margin);
+ }
+
+ > ${MdHeading1} + *,
+ > ${MdHeading2} + *,
+ > ${MdHeading3} + *,
+ > ${MdHeading4} + *,
+ > ${MdHeading5} + *,
+ > ${MdHeading6} + * {
+ margin-block-start: calc(var(--block-margin) * 0.5);
+ }
+
+ > ${MdHeading1} + ${MdHeading2},
+ > ${MdHeading2} + ${MdHeading3},
+ > ${MdHeading3} + ${MdHeading4},
+ > ${MdHeading4} + ${MdHeading5},
+ > ${MdHeading5} + ${MdHeading6} {
+ margin-block-start: 0;
+ padding-block-start: var(--block-margin);
+ }
+
+ > ${MdParagraph} + ${MdParagraph} {
+ margin-block-start: var(--paragraph-margin);
+ }
+
  > *:nth-child(2) {
  margin-block-start: 0;
  }

pages/_app.tsx

@@ -157,6 +157,9 @@ css`
  --color-fg-red: #ff6b6b;
  --color-fg-blue: #54a0ff;
  --color-fg-yellow: #feca57;
+ --color-fg-red-weak: ${tint(0.5, "#ff6b6b")};
+ --color-fg-blue-weak: ${tint(0.5, "#54a0ff")};
+ --color-fg-yellow-weak: ${tint(0.5, "#feca57")};
  --color-fg-gray: ${tint(0.5, "#8395a7")};
  --color-fg-gray-weak: ${tint(0.65, "#8395a7")};
  --color-bg: #ffffff;
@@ -191,6 +194,9 @@ css`
  --color-bg-input-active: ${shade(0.8, "#8395a7")};
  --color-fg: ${mix(0.666, "#fff", "#8395a7")};
  --color-fg-strong: #fff;
+ --color-fg-red-weak: ${shade(0.5, "#ff6b6b")};
+ --color-fg-blue-weak: ${shade(0.5, "#54a0ff")};
+ --color-fg-yellow-weak: ${shade(0.5, "#feca57")};
  --color-fg-gray: ${shade(0.5, "#8395a7")};
  --color-fg-gray-weak: ${shade(0.65, "#8395a7")};
  --color-bg-red-weak: ${shade(0.75, "#ff6b6b")};