Feat: New Callouts Component

leecalcote · leecalcote · commit fdf7410c56e7 · 2026-03-09T18:08:00.000-05:00
Signed-off-by: Lee Calcote &lt;lee.calcote@layer5.io&gt;
diff --git a/src/collections/blog/2026/03-09-why-claude-code-cant-find-your-tools/index.mdx b/src/collections/blog/2026/03-09-why-claude-code-cant-find-your-tools/index.mdx
@@ -19,8 +19,7 @@ resource: true
 
 import { BlogWrapper } from "../../Blog.style.js";
 import { Link } from "gatsby";
-import Blockquote from "../../../../reusecore/Blockquote";
-import KanvasCTA from "../../../../sections/Kanvas/kanvas-cta";
+import Callout from "../../../../reusecore/Callout";
 
 <BlogWrapper>
 
@@ -33,7 +32,7 @@ import KanvasCTA from "../../../../sections/Kanvas/kanvas-cta";
 <h2>The Surprise</h2>
 
 <p>
-  AI coding assistants like Claude Code, Cline, Aider, and similar tools spawn child shell processes to run commands on your behalf. From where you sit, the terminal looks identical to the one you use every day. But the shell those tools launch is fundamentally different from the one you interact with — and that difference determines which startup files are read, which means it determines what is on your PATH.
+  AI coding assistants like Claude Code, Gemini, Copilot, Cline, Aider, and similar tools spawn child shell processes to run commands on your behalf. From where you sit, the terminal looks identical to the one you use every day. But the shell those tools launch is fundamentally different from the one you interact with — and that difference determines which startup files are read, which means it determines what is on your PATH.
 </p>
 
 <p>
@@ -46,7 +45,7 @@ import KanvasCTA from "../../../../sections/Kanvas/kanvas-cta";
   Zsh loads different configuration files depending on how it was launched. There are four main files, and they are read in this order:
 </p>
 
-<table>
+<table className="table-2">
   <thead>
     <tr>
       <th>File</th>
@@ -102,9 +101,9 @@ import KanvasCTA from "../../../../sections/Kanvas/kanvas-cta";
   </li>
 </ul>
 
-<Blockquote
-  quote="A non-interactive, non-login shell sources only ~/.zshenv. Everything in ~/.zshrc is invisible to it — including every PATH export most developers have ever written."
-/>
+<Callout type="note">
+  <p>A non-interactive, non-login shell sources only <code>{"~/.zshenv"}</code>. Everything in <code>{"~/.zshrc"}</code> is invisible to it — including every PATH export most developers have ever written.</p>
+</Callout>
 
 <h2>What PATH a Non-Interactive Shell Actually Sees</h2>
 
@@ -163,11 +162,9 @@ zsh -i -c 'which node'
   The <code>-i</code> flag forces an interactive shell, which sources <code>{"~/.zshrc"}</code>. If <code>zsh -c 'which gh'</code> prints <code>gh not found</code> but <code>zsh -i -c 'which gh'</code> prints the correct path, your PATH export is in <code>{"~/.zshrc"}</code> and you have confirmed the root cause.
 </p>
 
-<div className="note">
-  <p>
-    <strong>Quick diagnosis:</strong> Run <code>zsh -c 'which gh'</code> (no <code>-i</code> flag). If this fails but <code>which gh</code> in your normal terminal works, your PATH is only set in <code>{"~/.zshrc"}</code>. Move the relevant exports to <code>{"~/.zshenv"}</code> to fix it.
-  </p>
-</div>
+<Callout type="note" title="Quick diagnosis">
+  <p>Run <code>zsh -c 'which gh'</code> (no <code>-i</code> flag). If this fails but <code>which gh</code> in your normal terminal works, your PATH is only set in <code>{"~/.zshrc"}</code>. Move the relevant exports to <code>{"~/.zshenv"}</code> to fix it.</p>
+</Callout>
 
 <h2>The Fix: Move PATH Exports to <code>{"~/.zshenv"}</code></h2>
 
@@ -233,10 +230,8 @@ zsh -c 'which node'
   Moving everything to <code>{"~/.zshenv"}</code> is not the right answer. Some configuration should stay in <code>{"~/.zshrc"}</code> because it only makes sense in interactive contexts or because it has side effects that slow down non-interactive shells unnecessarily.
 </p>
 
-<div className="tip">
-  <p>
-    <strong>Guiding principle:</strong> If it is an environment variable that a program needs to find another program, it belongs in <code>{"~/.zshenv"}</code>. If it is a user-facing customization for your interactive terminal experience, it belongs in <code>{"~/.zshrc"}</code>.
-  </p>
+<Callout type="tip" title="Guiding principle">
+  <p>If it is an environment variable that a program needs to find another program, it belongs in <code>{"~/.zshenv"}</code>. If it is a user-facing customization for your interactive terminal experience, it belongs in <code>{"~/.zshrc"}</code>.</p>
 
   <p><strong>Keep in <code>{"~/.zshenv"}</code>:</strong></p>
   <ul>
@@ -256,7 +251,7 @@ zsh -c 'which node'
     <li><code>zsh</code> plugins and plugin managers</li>
     <li>Anything that prints output (welcome messages, <code>neofetch</code>, etc.)</li>
   </ul>
-</div>
+</Callout>
 
 <h2>The Broader Pattern: Any Tool That Spawns Subshells</h2>
 
@@ -277,11 +272,9 @@ zsh -c 'which node'
   If you have ever fixed a <em>works on my machine</em> problem by adding <code>export PATH=...</code> to a CI configuration or a Dockerfile, you have already solved the same class of problem. The <code>{"~/.zshenv"}</code> fix is just the developer workstation equivalent.
 </p>
 
-<Blockquote
-  quote="If a command works in your terminal but fails in a script, a CI job, or an AI agent, the first question to ask is: which startup files does this shell read?"
-/>
-
-<KanvasCTA />
+<Callout type="tip">
+  <p>If a command works in your terminal but fails in a script, a CI job, or an AI agent, the first question to ask is: which startup files does this shell read?</p>
+</Callout>
 
 <h2>Putting It Together: A Minimal <code>{"~/.zshenv"}</code> Template</h2>
 
diff --git a/src/collections/blog/Blog.style.js b/src/collections/blog/Blog.style.js
@@ -50,9 +50,9 @@ export const BlogWrapper = styled.div`
     table,
     td {
       text-align: center;
-      border-top: 1px dotted #3c494f;
+      border-top: 1px dotted ${(props) => props.theme.secondaryLightColorTwo};
       th {
-        background-color: #3c494f;
+        background-color: ${(props) => props.theme.secondaryLightColorTwo};
         color: #eee;
         padding: 0rem 0.5rem;
       }
@@ -107,10 +107,10 @@ export const BlogWrapper = styled.div`
     ,
     td {
       text-align: center;
-      border-top: 1px dotted #3c494f;
+      border-top: 1px dotted ${(props) => props.theme.secondaryLightColorTwo};
       th {
-        background-color: #3c494f;
-        color: #eee;
+        background-color: ${(props) => props.theme.secondaryLightColorTwo};
+        color: ${(props) => props.theme.grey232323ToGreyEEEEEE};
         padding: 0rem 0.5rem;
       }
     }
diff --git a/src/reusecore/Callout/callout.style.js b/src/reusecore/Callout/callout.style.js
@@ -0,0 +1,118 @@
+import styled from "styled-components";
+
+// Per-type color palette aligned with Sistent design tokens
+const BORDER_COLORS = {
+  note: "#477DFF", // Sistent info blue
+  tip: "#00D3A9", // keppelColor / Sistent teal
+  warning: "#EBC017", // highlightColor / saffron
+  caution: "#F97316", // Sistent orange
+  important: "#B32700", // Sistent error red
+};
+
+// Title text colors — darker shades for light mode (contrast), full saturation for dark mode
+const TITLE_COLORS_LIGHT = {
+  note: "#2458CC",
+  tip: "#007A6B",
+  warning: "#7A5700",
+  caution: "#C75800",
+  important: "#8C1A00",
+};
+
+const TITLE_COLORS_DARK = {
+  note: "#7EB3FF",
+  tip: "#00D3A9",
+  warning: "#EBC017",
+  caution: "#F97316",
+  important: "#FF6B4A",
+};
+
+const CalloutStyle = styled.aside`
+  margin: 1.75rem 0;
+  border-radius: 0.375rem;
+  border-left: 4px solid
+    ${({ type }) => BORDER_COLORS[type] || BORDER_COLORS.note};
+  overflow: hidden;
+  font-size: 0.95rem;
+
+  .callout-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.55rem 1rem;
+    background: ${({ type, theme }) => {
+      const c = BORDER_COLORS[type] || BORDER_COLORS.note;
+      return theme.DarkTheme ? `${c}33` : `${c}26`;
+    }};
+
+    .callout-icon {
+      font-size: 1rem;
+      line-height: 1;
+      flex-shrink: 0;
+    }
+
+    .callout-title {
+      font-weight: 700;
+      font-size: 0.9rem;
+      line-height: 1;
+      letter-spacing: 0.01em;
+      color: ${({ type, theme }) =>
+        theme.DarkTheme
+          ? TITLE_COLORS_DARK[type] || TITLE_COLORS_DARK.note
+          : TITLE_COLORS_LIGHT[type] || TITLE_COLORS_LIGHT.note};
+    }
+  }
+
+  .callout-body {
+    padding: 0.75rem 1rem;
+    background: ${({ type, theme }) => {
+      const c = BORDER_COLORS[type] || BORDER_COLORS.note;
+      return theme.DarkTheme ? `${c}1a` : `${c}0f`;
+    }};
+
+    p,
+    li,
+    code {
+      color: ${(props) => props.theme.primaryColor};
+    }
+
+    p {
+      margin: 0 0 0.5rem 0;
+      line-height: 1.65;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    ul,
+    ol {
+      margin: 0 0 0.5rem 0;
+      padding-left: 1.4rem;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    li {
+      line-height: 1.65;
+      margin-bottom: 0.25rem;
+    }
+
+    code {
+      font-size: 0.875em;
+      padding: 0.1em 0.3em;
+      border-radius: 3px;
+      background: ${({ type, theme }) => {
+        const c = BORDER_COLORS[type] || BORDER_COLORS.note;
+        return theme.DarkTheme ? `${c}26` : `${c}1a`;
+      }};
+    }
+
+    strong {
+      color: ${(props) => props.theme.primaryColor};
+    }
+  }
+`;
+
+export default CalloutStyle;
diff --git a/src/reusecore/Callout/index.js b/src/reusecore/Callout/index.js
@@ -0,0 +1,38 @@
+import React from "react";
+import PropTypes from "prop-types";
+import CalloutStyle from "./callout.style.js";
+
+const TYPE_CONFIG = {
+  note: { label: "Note", icon: "ℹ" },
+  tip: { label: "Tip", icon: "💡" },
+  warning: { label: "Warning", icon: "⚠" },
+  caution: { label: "Caution", icon: "⚠" },
+  important: { label: "Important", icon: "❗" },
+};
+
+const Callout = ({ type, title, children }) => {
+  const config = TYPE_CONFIG[type] || TYPE_CONFIG.note;
+  return (
+    <CalloutStyle type={type}>
+      <div className="callout-header">
+        <span className="callout-icon" aria-hidden="true">
+          {config.icon}
+        </span>
+        <span className="callout-title">{title || config.label}</span>
+      </div>
+      <div className="callout-body">{children}</div>
+    </CalloutStyle>
+  );
+};
+
+Callout.propTypes = {
+  type: PropTypes.oneOf(["note", "tip", "warning", "caution", "important"]),
+  title: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+Callout.defaultProps = {
+  type: "note",
+};
+
+export default Callout;
