updated blog + ui

Author: edujuan

blog/2025-08-05-mcp-servers-nightmare.md

@@ -32,7 +32,7 @@ As Marc, another early adopter, recalls from his first attempt:
 
 > “I implement this class… and then I'm like, okay, let's connect to it. Connect, doesn't work. Why? How? And then I spend a bunch of time and then only realize this only works if the process calling this *is* the process which has this client on it. Which is like, what the fuck?”
 
-This single, poorly explained assumption—that the client *must spawn your server as a child process*—is the source of immense pain. But the confusion runs deeper.
+This single, poorly explained assumption, that the client *must spawn your server as a child process*, is the source of immense pain. But the confusion runs deeper.
 
 *   **Ambiguous Transports:** The spec says it connects via “STDIO.” But what does that mean? Is it a raw `stdin/stdout` pipe? Is it a custom framing protocol over that pipe? Is it a TCP socket? You only discover the truth through trial and error.
 *   **Contradictory Examples:** The official GitHub reference servers receive breaking changes weekly, often without a clear changelog, leaving developers to reverse-engineer why their once-working implementation suddenly fails.
@@ -51,7 +51,7 @@ This got worse in a real-world scenario:
 
 1.  **The Setup:** A user has two VS Code windows open. One project is configured to use OpenAI, the other to use Gemini.
 2.  **The MCP Problem:** MCP assumes one server process. When an AI client like Cursor connects to the single JavaScript "bridge," it has no idea which VS Code window (and which configuration) it's supposed to be talking to.
-3.  **The Nightmare Hack:** Simone's only solution was to have his extension write the network port into a temporary file so the bridge could find it. He was juggling PIDs and file I/O just to manage state between two windows—a problem created entirely by MCP's rigid process model.
+3.  **The Nightmare Hack:** Simone's only solution was to have his extension write the network port into a temporary file so the bridge could find it. She was juggling PIDs and file I/O just to manage state between two windows, a problem created entirely by MCP's rigid process model.
 
 ---
 

src/css/custom.css

@@ -322,3 +322,31 @@ body[class*="blog"] aside:hover {
   opacity: 1 !important;
   transition: opacity 0.3s ease !important;
 }
+
+/* GitHub navbar icon styling */
+.github-navbar-icon {
+  display: inline-block;
+  transition: all 0.2s ease;
+  opacity: 0.8;
+}
+
+.github-navbar-icon:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+/* Dark mode color for GitHub icon */
+[data-theme='dark'] .github-navbar-icon {
+  color: var(--ifm-navbar-link-color);
+}
+
+/* Light mode color for GitHub icon */
+[data-theme='light'] .github-navbar-icon {
+  color: var(--ifm-navbar-link-color);
+}
+
+/* Navbar link hover effect for GitHub icon */
+.navbar__item.navbar__link:hover .github-navbar-icon {
+  opacity: 1;
+  transform: scale(1.1);
+}

src/theme/NavbarItem/CustomGithubNavbarItem.tsx

@@ -7,21 +7,36 @@ interface CustomGithubNavbarItemProps {
   [key: string]: any;
 }
 
+// GitHub Icon component for navbar
+const GitHubIcon: React.FC<{ className?: string }> = ({ className = "" }) => (
+  <svg 
+    className={`github-navbar-icon ${className}`}
+    width="20" 
+    height="20" 
+    viewBox="0 0 24 24" 
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
+  </svg>
+);
+
 const CustomGithubNavbarItem: React.FC<CustomGithubNavbarItemProps> = ({ mobile, ...props }) => {
   const location = useLocation();
   const isBlogPage = location.pathname.startsWith('/blog');
 
-  // For mobile view, always show simple version
+  // For mobile view, always show simple version with icon
   if (mobile) {
     return (
       <a
         href="https://github.com/universal-tool-calling-protocol"
         target="_blank"
         rel="noopener noreferrer"
         className="navbar__item navbar__link"
+        title="GitHub"
         {...props}
       >
-        GitHub
+        <GitHubIcon />
       </a>
     );
   }
@@ -31,16 +46,17 @@ const CustomGithubNavbarItem: React.FC<CustomGithubNavbarItemProps> = ({ mobile,
     return <GitHubButton />;
   }
 
-  // Normal GitHub link for non-blog pages
+  // Normal GitHub link for non-blog pages with icon
   return (
     <a
       href="https://github.com/universal-tool-calling-protocol"
       target="_blank"
       rel="noopener noreferrer"
       className="navbar__item navbar__link"
+      title="GitHub"
       {...props}
     >
-      GitHub
+      <GitHubIcon />
     </a>
   );
 };