Add post for May 27, 2025

mrbiggred · mrbiggred · commit 73b347a70a76 · 2025-05-27T09:53:32.000-06:00
diff --git a/docs/posts/2025/05/27/2025-05-27.svg b/docs/posts/2025/05/27/2025-05-27.svg
@@ -0,0 +1,161 @@
+<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#0d1117"/>
+      <stop offset="50%" style="stop-color:#21262d"/>
+      <stop offset="100%" style="stop-color:#161b22"/>
+    </linearGradient>
+    
+    <linearGradient id="robotGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#58a6ff"/>
+      <stop offset="100%" style="stop-color:#ff6bff"/>
+    </linearGradient>
+    
+    <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#58a6ff"/>
+      <stop offset="50%" style="stop-color:#ff6bff"/>
+      <stop offset="100%" style="stop-color:#58a6ff"/>
+    </linearGradient>
+    
+    <radialGradient id="glowEffect" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" style="stop-color:#58a6ff" stop-opacity="0.3"/>
+      <stop offset="100%" style="stop-color:#58a6ff" stop-opacity="0"/>
+    </radialGradient>
+    
+    <pattern id="gridPattern" patternUnits="userSpaceOnUse" width="40" height="40">
+      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#58a6ff" stroke-width="0.5" opacity="0.1"/>
+    </pattern>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="1200" height="630" fill="url(#bgGradient)"/>
+  
+  <!-- Grid Pattern -->
+  <rect width="1200" height="630" fill="url(#gridPattern)"/>
+  
+  <!-- Glow Effects -->
+  <circle cx="300" cy="150" r="200" fill="url(#glowEffect)"/>
+  <circle cx="900" cy="450" r="150" fill="url(#glowEffect)"/>
+  
+  <!-- Header Section -->
+  <g id="header">
+    <!-- Logo -->
+    <rect x="60" y="50" width="50" height="50" rx="10" fill="url(#robotGradient)"/>
+    <text x="85" y="85" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="24" font-weight="bold">W</text>
+    
+    <!-- Site Name -->
+    <text x="130" y="85" fill="#f0f6fc" font-family="Arial, sans-serif" font-size="22" font-weight="600">Weekly Dev Chat</text>
+  </g>
+  
+  <!-- Date Badge -->
+  <g id="dateBadge">
+    <rect x="1050" y="50" width="120" height="40" rx="20" fill="rgba(88, 166, 255, 0.1)" stroke="#58a6ff" stroke-width="1"/>
+    <text x="1110" y="75" text-anchor="middle" fill="#58a6ff" font-family="Arial, sans-serif" font-size="14" font-weight="600">May 27, 2025</text>
+  </g>
+  
+  <!-- Main Title -->
+  <g id="mainTitle">
+    <text x="80" y="250" fill="url(#textGradient)" font-family="Arial, sans-serif" font-size="64" font-weight="800">GitHub Copilot</text>
+    <text x="80" y="320" fill="url(#textGradient)" font-family="Arial, sans-serif" font-size="64" font-weight="800">Agent</text>
+  </g>
+  
+  <!-- Subtitle -->
+  <text x="80" y="380" fill="#8b949e" font-family="Arial, sans-serif" font-size="24" font-weight="400">Beyond chat - an autonomous coding agent</text>
+  <text x="80" y="410" fill="#8b949e" font-family="Arial, sans-serif" font-size="24" font-weight="400">that runs commands, edits files, and compiles projects</text>
+  
+  <!-- Robot/Agent Visual -->
+  <g id="robotSection" transform="translate(750, 200)">
+    <!-- Outer orbit ring -->
+    <circle cx="100" cy="100" r="140" fill="none" stroke="rgba(88, 166, 255, 0.2)" stroke-width="2" stroke-dasharray="5,5">
+      <animateTransform attributeName="transform" type="rotate" values="0 100 100;360 100 100" dur="20s" repeatCount="indefinite"/>
+    </circle>
+    
+    <!-- Inner orbit ring -->
+    <circle cx="100" cy="100" r="110" fill="none" stroke="rgba(255, 107, 237, 0.2)" stroke-width="2" stroke-dasharray="3,3">
+      <animateTransform attributeName="transform" type="rotate" values="360 100 100;0 100 100" dur="15s" repeatCount="indefinite"/>
+    </circle>
+    
+    <!-- Robot body -->
+    <rect x="50" y="50" width="100" height="100" rx="20" fill="url(#robotGradient)">
+      <animateTransform attributeName="transform" type="translate" values="0,0; 0,-5; 0,0" dur="4s" repeatCount="indefinite"/>
+    </rect>
+    
+    <!-- Robot face -->
+    <rect x="70" y="60" width="60" height="4" rx="2" fill="rgba(255,255,255,0.4)"/>
+    
+    <!-- Eyes -->
+    <circle cx="85" cy="90" r="6" fill="white">
+      <animate attributeName="r" values="6;6;1;6" dur="3s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="115" cy="90" r="6" fill="white">
+      <animate attributeName="r" values="6;6;1;6" dur="3s" repeatCount="indefinite"/>
+    </circle>
+    
+    <!-- Mouth -->
+    <path d="M 80 120 Q 100 130 120 120" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="3" stroke-linecap="round"/>
+    
+    <!-- Floating dots on orbit -->
+    <circle cx="240" cy="100" r="4" fill="#58a6ff">
+      <animateTransform attributeName="transform" type="rotate" values="0 100 100;360 100 100" dur="20s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="100" cy="-10" r="3" fill="#ff6bff">
+      <animateTransform attributeName="transform" type="rotate" values="360 100 100;0 100 100" dur="15s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+  
+  <!-- Code blocks at bottom -->
+  <g id="codeBlocks">
+    <rect x="80" y="520" width="180" height="60" rx="8" fill="rgba(13, 17, 23, 0.8)" stroke="rgba(88, 166, 255, 0.3)" stroke-width="1"/>
+    <text x="90" y="545" fill="#58a6ff" font-family="Courier New, monospace" font-size="14">agent.compile()</text>
+    <text x="90" y="565" fill="#8b949e" font-family="Courier New, monospace" font-size="12">Build project</text>
+    
+    <rect x="280" y="520" width="180" height="60" rx="8" fill="rgba(13, 17, 23, 0.8)" stroke="rgba(88, 166, 255, 0.3)" stroke-width="1"/>
+    <text x="290" y="545" fill="#58a6ff" font-family="Courier New, monospace" font-size="14">agent.addFile()</text>
+    <text x="290" y="565" fill="#8b949e" font-family="Courier New, monospace" font-size="12">Create files</text>
+    
+    <rect x="480" y="520" width="180" height="60" rx="8" fill="rgba(13, 17, 23, 0.8)" stroke="rgba(88, 166, 255, 0.3)" stroke-width="1"/>
+    <text x="490" y="545" fill="#58a6ff" font-family="Courier New, monospace" font-size="14">agent.editCode()</text>
+    <text x="490" y="565" fill="#8b949e" font-family="Courier New, monospace" font-size="12">Modify code</text>
+  </g>
+  
+  <!-- Floating icons -->
+  <g id="floatingIcons" opacity="0.4">
+    <!-- Lightning bolt -->
+    <g transform="translate(200, 150)">
+      <path d="M 8 2 L 3 8 L 7 8 L 6 14 L 11 8 L 7 8 Z" fill="#58a6ff">
+        <animateTransform attributeName="transform" type="translate" values="0,0; 0,-10; 0,0" dur="6s" repeatCount="indefinite"/>
+      </path>
+    </g>
+    
+    <!-- Gear -->
+    <g transform="translate(1000, 350)">
+      <circle cx="8" cy="8" r="8" fill="none" stroke="#ff6bff" stroke-width="2"/>
+      <circle cx="8" cy="8" r="3" fill="#ff6bff"/>
+      <animateTransform attributeName="transform" type="rotate" values="0 8 8;360 8 8" dur="8s" repeatCount="indefinite"/>
+    </g>
+    
+    <!-- Code brackets -->
+    <g transform="translate(150, 450)">
+      <text x="0" y="0" fill="#58a6ff" font-family="Courier New, monospace" font-size="24" font-weight="bold">&lt;/&gt;</text>
+      <animateTransform attributeName="transform" type="scale" values="1;1.2;1" dur="5s" repeatCount="indefinite"/>
+    </g>
+    
+    <!-- Terminal -->
+    <g transform="translate(1050, 250)">
+      <rect x="0" y="0" width="16" height="12" rx="2" fill="none" stroke="#58a6ff" stroke-width="1"/>
+      <path d="M 2 3 L 4 5 L 2 7" fill="none" stroke="#58a6ff" stroke-width="1"/>
+      <rect x="6" y="6" width="4" height="1" fill="#58a6ff"/>
+      <animateTransform attributeName="transform" type="translate" values="0,0; 0,-8; 0,0" dur="7s" repeatCount="indefinite"/>
+    </g>
+  </g>
+  
+  <!-- Question mark accent -->
+  <g transform="translate(580, 480)" opacity="0.6">
+    <circle cx="0" cy="0" r="25" fill="rgba(255, 107, 237, 0.1)" stroke="#ff6bff" stroke-width="2"/>
+    <text x="0" y="8" text-anchor="middle" fill="#ff6bff" font-family="Arial, sans-serif" font-size="28" font-weight="bold">?</text>
+    <animateTransform attributeName="transform" type="scale" values="1;1.1;1" dur="3s" repeatCount="indefinite"/>
+  </g>
+  
+  <!-- Highlight text "Will it do what we expect?" -->
+  <text x="700" y="550" fill="#ff6bff" font-family="Arial, sans-serif" font-size="18" font-weight="600" opacity="0.8">Will it do what we expect? Let's find out!</text>
+</svg>
diff --git a/docs/posts/2025/05/27/index.md b/docs/posts/2025/05/27/index.md
@@ -0,0 +1,16 @@
+---
+title: "Play with GitHub Copilot Agent in VS Code"
+date: 2025-05-27
+authors:
+ - chris
+---
+
+![GitHub Copilot Agent in VS Code](2025-05-27.svg)
+
+In today's (2025-05-27) post, we will play with the GitHub Copilot [Agent](https://github.blog/news-insights/product-news/github-copilot-meet-the-new-coding-agent/) in Visual Studio Code.  The agent is different than Copilot Chat as the agent will run commands on your machine, including compiling the project, adding files/directories, and directly editing files.  
+
+Will it do what we expect?  Let's find out!
+
+Everyone and anyone are welcome to [join](https://weeklydevchat.com/join/) as long as you are kind, supportive, and respectful of others.
+
+P.S. - The image for this post was created using Claude 4.  I can't create png/jpg, at least not on the free account I'm using, but could create SVG.
