Added '2' to margin top and bottom on Callouts

Author: webstackdev

_TODO.md

@@ -145,16 +145,6 @@ https://mermaid.js.org/config/directives.html
 
 See comp images in Breadcrumbs component directory
 
-## Code Block Problems
-
-- Need to be able to highlight the title in a code block to copy it, or at least have a "copy" wrapper on it
-
-## Callout Issues
-
-- When adding backticks in a callout, it gets the standard grey background for a code block in light theme. But it should get an offset of the callout color, like "info-offset".
-
-- There's too much space at the bottom of callouts, a full line of extra space in the colored background area.
-
 ## OL / UL Lists
 
 - The spacing on unordered task lists nested in an ordered list is wrong, see "Questions to Ask Before Setting Targets" in `src/content/articles/availability-targets-five-nines-cost-benefit-analysis/index.mdx`
@@ -163,6 +153,8 @@ See comp images in Breadcrumbs component directory
 
 ## Checklist
 
+- Text code blocks have weird formatting: `src/content/articles/cdn-edge-caching-cache-keys-vary-headers/index.mdx` that one seems like it should be some other kind of display, not a text code block.
+
 - You can click the anchor link that shows on headers to get a copy of the link. It should be that you can click anywhere in the header and copy the link.
 
 - Need to make tables responsive on mobile

src/components/Callout/index.astro

@@ -82,7 +82,8 @@ const iconColor = accentTextClasses.startsWith('text-') ? accentTextClasses.slic
     'flex',
     'flex-col',
     'gap-3',
-    'mb-6',
+    'mt-4',
+    'mb-8',
     'p-4',
     'border-0',
     'border-l-[6px]',

src/content/articles/demo/index.mdx

@@ -461,6 +461,34 @@ This is a note callout.
 This is a note callout.
 </Callout>
 
+````markdown
+<Callout type="note">
+Codeblock in a Callout
+
+```bash
+#!/bin/bash
+
+ls
+```
+</Callout>
+````
+
+<Callout type="success">
+Codeblock in a Callout
+
+```typescript
+export async function getStaticPaths() {
+  const articleEntries = await getCollection('articles', ({ data }) => {
+    return isDev() || data.isDraft !== true
+  })
+  return articleEntries.map(article => ({
+    params: { slug: article.id },
+    props: { article },
+  }))
+}
+```
+</Callout>
+
 ## Captions
 
 By default it wraps the elements code, image, and table in a `<figure>` element, and adds a `<figcaption>` block as the last child. You can configure it to work on other elements by changing the keywords. Provided by teh `remark-captions` plugin.