update blog

Author: mawburn

app/components/MarkdownContent.tsx

@@ -37,6 +37,8 @@ const markdownStyles = {
     ol: '[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-6',
     li: '[&_li]:mb-2',
   },
+  blockquotes:
+    '[&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:dark:border-gray-600 [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote]:font-inter [&_blockquote]:text-gray-700/75 [&_blockquote]:dark:text-gray-200/75',
 }
 
 interface MarkdownContentProps
@@ -54,6 +56,7 @@ export function MarkdownContent({ html, className, variant, ...props }: Markdown
         markdownStyles.links,
         Object.values(markdownStyles.headings).join(' '),
         Object.values(markdownStyles.lists).join(' '),
+        markdownStyles.blockquotes,
         'mb-12',
         className
       )}

app/components/ShareButtons/icons/LinkIcon.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react'
+
+export function LinkIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  )
+}

app/components/ShareButtons/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { CopyIcon } from './icons/CopyIcon'
+import { LinkIcon } from './icons/LinkIcon'
 import { TwitterIcon } from './icons/TwitterIcon'
 import { LinkedInIcon } from './icons/LinkedInIcon'
 import { BlueskyIcon } from './icons/BlueskyIcon'
@@ -50,45 +50,45 @@ export function ShareButtons({ url, title }: ShareButtonsProps) {
     <div className="flex flex-wrap gap-2">
       <button
         onClick={() => handleShare('reddit')}
-        className="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors"
+        className="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors cursor-pointer"
         aria-label="Share on Reddit"
       >
         <RedditIcon className="w-5 h-5" />
       </button>
 
       <button
         onClick={() => handleShare('linkedin')}
-        className="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors"
+        className="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors cursor-pointer"
         aria-label="Share on LinkedIn"
       >
         <LinkedInIcon className="w-5 h-5" />
       </button>
 
       <button
         onClick={() => handleShare('bluesky')}
-        className="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors"
+        className="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors cursor-pointer"
         aria-label="Share on Bluesky"
       >
         <BlueskyIcon className="w-5 h-5" />
       </button>
 
       <button
         onClick={() => handleShare('twitter')}
-        className="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors"
+        className="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors cursor-pointer"
         aria-label="Share on Twitter"
       >
         <TwitterIcon className="w-5 h-5" />
       </button>
 
       <button
         onClick={handleCopy}
-        className="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors relative"
+        className="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors cursor-pointer relative"
         aria-label="Copy link to clipboard"
       >
-        <CopyIcon className="w-5 h-5" />
+        <LinkIcon className="w-5 h-5" />
         {copied && (
           <span className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-xs px-2 py-1 rounded">
-            Copied!
+            URL Copied!
           </span>
         )}
       </button>

app/utils/markdown.ts

@@ -6,6 +6,31 @@ const md = new MarkdownIt({
   typographer: true,
 })
 
+const defaultRender =
+  md.renderer.rules.link_open ||
+  function (tokens, idx, options, env, renderer) {
+    return renderer.renderToken(tokens, idx, options)
+  }
+
+md.renderer.rules.link_open = function (tokens, idx, options, env, renderer) {
+  const token = tokens[idx]
+  const hrefIndex = token.attrIndex('href')
+
+  if (hrefIndex >= 0) {
+    const href = token.attrs![hrefIndex][1]
+
+    // Check if it's an external link (starts with http/https and not our domain)
+    if (href.startsWith('http') && !href.includes('mawburn.com')) {
+      // Add target="_blank"
+      token.attrSet('target', '_blank')
+      // Add rel="noopener noreferrer" for security and SEO
+      token.attrSet('rel', 'noopener noreferrer')
+    }
+  }
+
+  return defaultRender(tokens, idx, options, env, renderer)
+}
+
 export const markdownToHtml = (markdown: string): string => {
   return md.render(markdown)
 }

content/blog/2025-12-31-how-i-ai.md

@@ -1,8 +1,8 @@
 ---
-title: 'How I use AI in my workflow'
+title: 'How I use Claude Code'
 date: '2025-12-31 16:00'
 image: '2025-12-31-shopify-ai-chat.webp'
-excerpt: 'How I use AI tooling in my everyday workflow as a software engineer.'
+excerpt: 'How I use Claude Code and other AI tooling in my everyday workflow as a software engineer.'
 tags:
   [
     'AI tools',
@@ -14,3 +14,21 @@ tags:
     'vibe coding',
   ]
 ---
+
+I'm not ashamed to admit it, but my workflow is almost entirely AI driven now. But this is a culmination of using it heavily since around the time **GPT-4** was released, all the way back in the ancestral times of March **2023**. Since then, I've used just about every major model and molded my workflow around it.
+
+## How it began
+
+I can clearly remember when it all started. I had broken my dominant hand's wrist and was using it to write a random name generator for tabletop gaming since I couldn't type very well. I was using JavaScript, since that's what I gravitate towards, and was having trouble parsing through multi-gigabyte CSV files of common and fictional names to build [Markov chains](https://en.wikipedia.org/wiki/Markov_chain). Unsurprisingly, JS was taking upwards of 15 to 20 **minutes** to process the files. Every time I would stick something in there and try to speed it up, ChatGPT would say something like:
+
+> You should use Python, it has libraries that will make it faster.
+
+And for a while I ignored it... until I didn't and I let it write Python script to do it, and it dropped it from 15 minutes to 15 seconds. Then I was sold.
+
+From there, I was using it to generate tests, write snippets of code, and just about basically everything I could figure out a use case for.
+
+## How it's going
+
+Almost my entire life is driven by AI at this point, especially coding. I've had ChatGPT plan a vacation itinerary for me and my family back in June, I'm currently playing with Claude's Research to pick stocks _(for fun)_ which has so far been turning a profit, and I've experimented with it for dozens of other things. But what really changed things for work and code in general, was [Claude Code](https://www.anthropic.com/claude-code), that's really where the magic is happening now.
+
+If you're not familiar with it, it's a command line application that uses [agentic workflows](https://claude.ai/share/88fb030c-ce12-4072-b3ec-6fa402936f44) that will take crunch through your codebase and gather all the context it needs, then systematically solve the task you've given it. From day one of using Claude Code, it was a game changer and it's consistently gotten better since. I know there are a lot of naysayers out there who don't believe in these tools because they've used them and they didn't work well, gave messy code, or any number of other (legitimate) reasons, but hard reality the power is really in the developer. All AI is just a tool, just like your code editor is a tool, or the developer console is a tool. Claude Code is f'ing **incredible**, but it's **still just a tool**.