feat: enhance blog code blocks and add admonition support

- Add syntax-highlighted code blocks with copy button functionality
- Improve code block color contrast with better Shiki themes (github-light/github-dark-dimmed)
- Add support for Docusaurus-style admonitions (:::tip:::, :::warning:::, etc.)
- Replace emoji icons with professional SVG icons from simple-icons for social share buttons
- Add hover effects and visual feedback for copy buttons
- Improve accessibility with proper aria-labels

Technical changes:
- Install remark-directive and remark-admonitions for MDX admonition support
- Add custom remark plugin to handle admonition rendering
- Add CSS styles for 5 admonition types (tip, warning, danger, note, info)
- Implement JavaScript code block copy functionality
- Update BlogPostLayout to use SocialIcon component for Twitter/LinkedIn

Author: claude

astro.config.mjs

@@ -2,6 +2,28 @@ import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
+import remarkDirective from 'remark-directive';
+import { visit } from 'unist-util-visit';
+import { h } from 'hastscript';
+
+// Custom remark plugin to handle admonitions (:::tip:::, :::warning:::, etc.)
+function remarkAdmonitions() {
+  return (tree) => {
+    visit(tree, (node) => {
+      if (
+        node.type === 'textDirective' ||
+        node.type === 'leafDirective' ||
+        node.type === 'containerDirective'
+      ) {
+        const data = node.data || (node.data = {});
+        const tagName = node.type === 'textDirective' ? 'span' : 'div';
+
+        data.hName = tagName;
+        data.hProperties = h(tagName, { class: `admonition admonition-${node.name}` }).properties;
+      }
+    });
+  };
+}
 
 // https://astro.build/config
 export default defineConfig({
@@ -21,13 +43,22 @@ export default defineConfig({
     }),
   ],
   markdown: {
+    remarkPlugins: [remarkDirective, remarkAdmonitions],
     shikiConfig: {
-      theme: 'github-dark',
       themes: {
         light: 'github-light',
-        dark: 'github-dark',
+        dark: 'github-dark-dimmed',
       },
       wrap: true,
+      transformers: [
+        {
+          name: 'add-copy-button',
+          pre(node) {
+            // Add a data attribute to enable copy button
+            this.addClassToHast(node, 'code-block-wrapper');
+          },
+        },
+      ],
     },
   },
 });