Update Callout stylings

Author: webstackdev

_TODO.md

@@ -172,14 +172,10 @@ https://mermaid.js.org/config/directives.html
 
 - There's a pretty long delay when you push the Content Switcher to go from short to deep dive, what's causing it? It should be fast - maybe it's a prefetch issue, prefetch on page load
 
-- Suggestions on improving table layout for better visual experience
+- Suggestions on improving table layout for better visual experience. Consider adding a trim outline to tables
 
 - Cap callout length at 80% or 90% of the column so they're not longer than any text
 
-- Consider adding a trim outline to tables
-
-- Social share shouldn't appear on deep dive
-
 - Themepicker and search icon are too big in non-squished header. Logo too - the initial presentation should be smaller.
 
 - Search box in header should have blue outline, not highlight
@@ -188,6 +184,8 @@ https://mermaid.js.org/config/directives.html
 
 - Hero animation not loading on home page.
 
+- Improve `<abbr>` styling: https://codepen.io/ire/pen/NoqWpm
+
 ## List Component
 
 - Task list checked variant Markdown in dark theme is awkward, it has a dark shadow

astro.config.ts

@@ -69,7 +69,7 @@ const standardIntegrations = [
   })] : []),
   sitemap({
     serialize: createSerializeFunction({
-      exclude: ['downloads', '/articles/demo', 'testing', 'terms', 'hero', 'links'],
+      exclude: ['deep-dive', 'downloads', '/articles/demo', 'testing', 'hero', 'links'],
     }),
   }),
   /**

src/components/CallToAction/Newsletter/layouts/article.astro

@@ -10,15 +10,15 @@ const buttonText = 'Subscribe'
 ---
 
 <section class="mb-4 md:mb-6">
-  <div class="bg-content border border-trim rounded-xl p-6 md:p-8 font-mono">
-    <div class="flex items-center gap-2 mb-4 pb-4 border-b border-page-base/20">
+  <div class="bg-content border border-trim rounded-xl px-5 py-4 font-mono">
+    <div class="flex items-center gap-2 mb-3 pb-3 border-b border-page-base/20">
       <div class="w-3 h-3 rounded-full bg-danger"></div>
       <div class="w-3 h-3 rounded-full bg-warning"></div>
       <div class="w-3 h-3 rounded-full bg-success"></div>
       <span class="text-xs text-page-base/50 ml-2">newsletter.subscribe</span>
     </div>
 
-    <div class="space-y-3">
+    <div class="space-y-2">
       <p class="text-page-base">
         <span class="text-success">$</span>
         {` ${title}`}

src/components/Callout/index.astro

@@ -78,16 +78,17 @@ const iconColor = accentTextClasses.startsWith('text-') ? accentTextClasses.slic
 <div
   class:list={[
     containerClasses,
-    'callout',
     'flex',
     'flex-col',
     'gap-3',
     'mt-4',
     'mb-8',
-    'p-4',
+    'py-4',
+    'pl-6',
+    'pr-10',
     'border-0',
     'border-l-[6px]',
-    'rounded-none',
+    'rounded-r-lg',
   ]}
   role="note"
 >

src/components/Table/index.astro

@@ -0,0 +1,38 @@
+---
+import DefaultTable from '@components/Table/layouts/default.astro'
+
+export type Props = {
+  content: {
+    caption?: string
+    subcaption?: string
+    thead?: {
+      th: string[]
+    }
+    tbody: {
+      tr: {
+        th?: string
+        td: string[]
+      }[]
+    }
+    tfoot?: {
+      tr: {
+        th?: string
+        td: string[]
+      }[]
+    }
+  }
+  classes?: {
+    table?: string
+    caption?: string
+    thead?: string
+    tbody?: string
+    tfoot?: string
+  }
+  variant: string
+}
+
+const { content, variant = 'default', classes } = Astro.props
+const classesProps = classes ? { classes } : {}
+---
+
+{variant === 'default' && <DefaultTable content={content} {...classesProps} />}

src/components/Table/layouts/default.astro

@@ -0,0 +1,87 @@
+---
+export type Props = {
+  content: {
+    caption?: string
+    subcaption?: string
+    thead?: {
+      th: string[]
+    }
+    tbody: {
+      tr: {
+        th?: string
+        td: string[]
+      }[]
+    }
+    tfoot?: {
+      tr: {
+        th?: string
+        td: string[]
+      }[]
+    }
+  }
+  classes?: {
+    table?: string
+    caption?: string
+    thead?: string
+    tbody?: string
+    tfoot?: string
+  }
+}
+
+const { content, classes }: Props = Astro.props
+
+const tableClass = ""
+const captionClass = ""
+const headerClass = ""
+const textClass = ""
+const theadClass = ""
+const tbodyClass = ""
+const tfootClass = ""
+---
+
+<table class:list={[tableClass, classes?.table]}>
+  {content.caption && (
+    <caption class:list={[captionClass, classes?.caption]} set:html={content.caption}></caption>
+  )}
+  {content.subcaption && (
+    <caption class:list={[captionClass, classes?.caption]} set:html={content.subcaption}></caption>
+  )}
+
+  {content.thead && (
+    <thead class:list={[theadClass, classes?.thead]}>
+      <tr>
+        {content.thead.th.map((th) => (
+          <th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
+        ))}
+      </tr>
+    </thead>
+  )}
+
+  <tbody class:list={[tbodyClass, classes?.tbody]}>
+    {content.tbody.tr.map((row) => (
+      <tr>
+        {row.th && (
+          <th scope="row" class:list={[headerClass, classes?.tbody]} set:html={row.th}></th>
+        )}
+        {row.td.map((td) => (
+          <td class:list={[textClass, classes?.tbody]} set:html={td}></td>
+        ))}
+      </tr>
+    ))}
+  </tbody>
+
+  {content.tfoot && (
+    <tfoot class:list={[tfootClass, classes?.tfoot]}>
+      {content.tfoot.tr.map((row) => (
+        <tr>
+          {row.th && (
+            <th scope="row" class:list={[headerClass, classes?.tfoot]} set:html={row.th}></th>
+          )}
+          {row.td.map((td) => (
+            <td class:list={[textClass, classes?.tfoot]} set:html={td}></td>
+          ))}
+        </tr>
+      ))}
+    </tfoot>
+  )}
+</table>

src/lib/markdown/plugins/rehype-tailwind/index.ts

@@ -129,7 +129,7 @@ export function rehypeTailwindClasses() {
       if (node.tagName === 'figure' && !hasClass(node, 'blockquote')) {
         node.properties = node.properties || {}
         node.properties['className'] = ((node.properties['className'] as string[]) || []).concat([
-          'my-8',
+          'my-4',
           'mx-auto',
           'max-w-none',
         ])

src/lib/markdown/plugins/rehype-tailwind/visitors/simple.ts

@@ -25,21 +25,6 @@ export const htmlElements: ElementConfig[] = [
       'h-px',
     ],
   },
-  {
-    tagName: 'img',
-    classes: [
-      'block',
-      'mx-auto',
-      'mb-6',
-      'max-w-full',
-      'h-auto',
-      'rounded-lg',
-      'shadow-md',
-      'text-gray-500',
-      'italic',
-      'text-center',
-    ],
-  },
   {
     tagName: 'mark',
     classes: [