From 6d0a5d63a0c6cd82367e4dfc50c34ed1e5f6147a Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Mon, 12 Jan 2026 18:56:34 +0530 Subject: [PATCH 1/8] chore: rough PR for preview of an updated code snippet component --- src/components/CodeSample/CodeSample.astro | 205 ++++++++++++++++++++- src/content/ccip/getting-started/evm.mdx | 6 +- 2 files changed, 205 insertions(+), 6 deletions(-) diff --git a/src/components/CodeSample/CodeSample.astro b/src/components/CodeSample/CodeSample.astro index 73cef4f4cb2..10d1301d97e 100644 --- a/src/components/CodeSample/CodeSample.astro +++ b/src/components/CodeSample/CodeSample.astro @@ -1,5 +1,5 @@ --- -import { Prism } from "@astrojs/prism" +import { runHighlighterWithAstro } from "@astrojs/prism/dist/highlighter" import fs from "node:fs/promises" import path from "node:path" @@ -7,14 +7,39 @@ import path from "node:path" export type Props = { src: string lang?: string + filename?: string showButtonOnly?: boolean optimize?: boolean runs?: number } -const { src, lang, showButtonOnly, optimize, runs } = Astro.props as Props +const { src, lang, filename, showButtonOnly, optimize, runs } = Astro.props as Props const data = (await fs.readFile(path.join(process.cwd(), "public", src), "utf-8")).toString() +const prismLang = lang ?? "solidity" +const headerFilename = filename?.trim() || undefined +const { classLanguage, html } = runHighlighterWithAstro(prismLang, data) +const languageKey = prismLang.toLowerCase() +const languageIconSrc = getLanguageIconSrc(languageKey) + +function languageBadge(language: string) { + const l = language.toLowerCase() + if (l === "solidity" || l === "sol") return "SOL" + if (["javascript", "js", "mjs", "cjs"].includes(l)) return "JS" + if (["typescript", "ts", "mts", "cts"].includes(l)) return "TS" + if (["bash", "sh", "shell"].includes(l)) return "SH" + if (l === "go" || l === "golang") return "GO" + if (l === "json" || l === "jsonc") return "JSON" + if (l === "yaml" || l === "yml") return "YAML" + return l.slice(0, 4).toUpperCase() +} + +function getLanguageIconSrc(l: string) { + // Quick iteration: only Solidity for now (reuses existing asset in this repo) + if (l === "solidity" || l === "sol") return "/images/tutorial-icons/solidity_logo.svg" + return undefined +} + const isSolidityFile = src.match(/\.sol/) const isSample = isSolidityFile && (src.indexOf("samples/") === 0 || src.indexOf("/samples/") === 0) @@ -29,7 +54,38 @@ const remixUrl = `https://remix.ethereum.org/#url=https://docs.chain.link/${clea }` --- -{!showButtonOnly && } +{ + !showButtonOnly && + (headerFilename ? ( +
+
+
+ + + {headerFilename} + +
+ +
+ 
+          
+
+
+ ) : ( + 
+        
+
+ )) +} + { isSample && (
@@ -40,3 +96,146 @@ const remixUrl = `https://remix.ethereum.org/#url=https://docs.chain.link/${clea
) } + + + + diff --git a/src/content/ccip/getting-started/evm.mdx b/src/content/ccip/getting-started/evm.mdx index 96d0822ddee..fd45fd6cd9a 100644 --- a/src/content/ccip/getting-started/evm.mdx +++ b/src/content/ccip/getting-started/evm.mdx @@ -43,7 +43,7 @@ Deploy the `Sender.sol` contract on _Avalanche Fuji_. To see a detailed explanat 1. [Open the Sender.sol contract](https://remix.ethereum.org/#url=https://docs.chain.link/samples/CCIP/Sender.sol) in Remix. - + 1. Compile the contract. @@ -169,7 +169,7 @@ Congratulations! You just sent your first cross-chain data using CCIP. Next, exa The smart contract in this tutorial is designed to interact with CCIP to send data. The contract code includes comments to clarify the various functions, events, and underlying logic. However, this section explains the key elements. You can see the full contract code below. - + #### Initializing the contract @@ -202,7 +202,7 @@ The `sendMessage` function completes several operations: The smart contract in this tutorial is designed to interact with CCIP to receive data. The contract code includes comments to clarify the various functions, events, and underlying logic. However, this section explains the key elements. You can see the full contract code below. - + #### Initializing the contract From 21f74bc71d9a1044943809838a9d0879068c2700 Mon Sep 17 00:00:00 2001 From: Priyank Gupta Date: Mon, 12 Jan 2026 19:32:29 +0530 Subject: [PATCH 2/8] fix: Fixed extra indentation --- src/components/CodeSample/CodeSample.astro | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/CodeSample/CodeSample.astro b/src/components/CodeSample/CodeSample.astro index 10d1301d97e..38f6a9fbbc3 100644 --- a/src/components/CodeSample/CodeSample.astro +++ b/src/components/CodeSample/CodeSample.astro @@ -21,6 +21,9 @@ const headerFilename = filename?.trim() || undefined const { classLanguage, html } = runHighlighterWithAstro(prismLang, data) const languageKey = prismLang.toLowerCase() const languageIconSrc = getLanguageIconSrc(languageKey) +// NOTE: We inject the element via `set:html` on 
.
+// This prevents "first line displacement" caused by formatter-introduced whitespace text nodes inside 
.
+const preInnerHtml = `${html}`
 
 function languageBadge(language: string) {
   const l = language.toLowerCase()
@@ -75,14 +78,14 @@ const remixUrl = `https://remix.ethereum.org/#url=https://docs.chain.link/${clea
             Copy code
           
         
-        
-          
-        

+        
       
     ) : (
-      
-        
-      

+      
     ))
 }
 

From 14cabe47a6963c0ecfb848bc9994a04af86b128b Mon Sep 17 00:00:00 2001
From: Priyank Gupta 
Date: Tue, 13 Jan 2026 16:45:17 +0530
Subject: [PATCH 3/8] chore: added header to custom CodeSample component,
 fenced codeblocks pending

---
 public/images/language-icons/go.svg          |  21 ++++
 public/images/language-icons/json.svg        |  17 +++
 public/images/language-icons/python.svg      |   8 ++
 public/images/language-icons/rust.svg        |  14 +++
 public/images/language-icons/solidity.svg    |  27 +++++
 public/images/language-icons/terminal.svg    |  13 +++
 public/images/language-icons/ts-logo-256.svg |   1 +
 public/images/language-icons/typescript.svg  |   5 +
 src/components/CodeSample/CodeSample.astro   | 117 ++-----------------
 src/components/HeadCommon.astro              |   1 +
 src/content/ccip/getting-started/evm.mdx     |   5 +
 src/styles/code-blocks.css                   | 112 ++++++++++++++++++
 12 files changed, 234 insertions(+), 107 deletions(-)
 create mode 100644 public/images/language-icons/go.svg
 create mode 100644 public/images/language-icons/json.svg
 create mode 100644 public/images/language-icons/python.svg
 create mode 100644 public/images/language-icons/rust.svg
 create mode 100644 public/images/language-icons/solidity.svg
 create mode 100644 public/images/language-icons/terminal.svg
 create mode 100644 public/images/language-icons/ts-logo-256.svg
 create mode 100644 public/images/language-icons/typescript.svg
 create mode 100644 src/styles/code-blocks.css

diff --git a/public/images/language-icons/go.svg b/public/images/language-icons/go.svg
new file mode 100644
index 00000000000..048287ffc2e
--- /dev/null
+++ b/public/images/language-icons/go.svg
@@ -0,0 +1,21 @@
+
+  
+  
+  
+  
+  
+
diff --git a/public/images/language-icons/json.svg b/public/images/language-icons/json.svg
new file mode 100644
index 00000000000..b5c5ada53de
--- /dev/null
+++ b/public/images/language-icons/json.svg
@@ -0,0 +1,17 @@
+
+  
+  
+  
+  
+
diff --git a/public/images/language-icons/python.svg b/public/images/language-icons/python.svg
new file mode 100644
index 00000000000..68b28f00a49
--- /dev/null
+++ b/public/images/language-icons/python.svg
@@ -0,0 +1,8 @@
+
+  
+  
+
diff --git a/public/images/language-icons/rust.svg b/public/images/language-icons/rust.svg
new file mode 100644
index 00000000000..dd5a276b790
--- /dev/null
+++ b/public/images/language-icons/rust.svg
@@ -0,0 +1,14 @@
+
+  
+  
+
diff --git a/public/images/language-icons/solidity.svg b/public/images/language-icons/solidity.svg
new file mode 100644
index 00000000000..86b9f4995b2
--- /dev/null
+++ b/public/images/language-icons/solidity.svg
@@ -0,0 +1,27 @@
+
+
+
+
+Vector 1
+Created with Sketch.
+
+	
+		
+			
+			
+			
+			
+			
+			
+		
+	
+
+
diff --git a/public/images/language-icons/terminal.svg b/public/images/language-icons/terminal.svg
new file mode 100644
index 00000000000..4920153ef58
--- /dev/null
+++ b/public/images/language-icons/terminal.svg
@@ -0,0 +1,13 @@
+
+  
+
diff --git a/public/images/language-icons/ts-logo-256.svg b/public/images/language-icons/ts-logo-256.svg
new file mode 100644
index 00000000000..1233b3860b7
--- /dev/null
+++ b/public/images/language-icons/ts-logo-256.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/images/language-icons/typescript.svg b/public/images/language-icons/typescript.svg
new file mode 100644
index 00000000000..c5c21c5bc31
--- /dev/null
+++ b/public/images/language-icons/typescript.svg
@@ -0,0 +1,5 @@
+
+  
+
diff --git a/src/components/CodeSample/CodeSample.astro b/src/components/CodeSample/CodeSample.astro
index 38f6a9fbbc3..40aa6533b4c 100644
--- a/src/components/CodeSample/CodeSample.astro
+++ b/src/components/CodeSample/CodeSample.astro
@@ -21,8 +21,6 @@ const headerFilename = filename?.trim() || undefined
 const { classLanguage, html } = runHighlighterWithAstro(prismLang, data)
 const languageKey = prismLang.toLowerCase()
 const languageIconSrc = getLanguageIconSrc(languageKey)
-// NOTE: We inject the  element via `set:html` on 
.
-// This prevents "first line displacement" caused by formatter-introduced whitespace text nodes inside 
.
 const preInnerHtml = `${html}`
 
 function languageBadge(language: string) {
@@ -38,8 +36,14 @@ function languageBadge(language: string) {
 }
 
 function getLanguageIconSrc(l: string) {
-  // Quick iteration: only Solidity for now (reuses existing asset in this repo)
-  if (l === "solidity" || l === "sol") return "/images/tutorial-icons/solidity_logo.svg"
+  // Map language names/aliases to icons in `public/images/language-icons/`.
+  if (l === "solidity" || l === "sol") return "/images/language-icons/solidity.svg"
+  if (["typescript", "ts", "mts", "cts"].includes(l)) return "/images/language-icons/typescript.svg"
+  if (["go", "golang"].includes(l)) return "/images/language-icons/go.svg"
+  if (["json", "jsonc"].includes(l)) return "/images/language-icons/json.svg"
+  if (["python", "py"].includes(l)) return "/images/language-icons/python.svg"
+  if (["rust", "rs"].includes(l)) return "/images/language-icons/rust.svg"
+  if (["bash", "sh", "shell", "zsh", "terminal"].includes(l)) return "/images/language-icons/terminal.svg"
   return undefined
 }
 
@@ -63,7 +67,7 @@ const remixUrl = `https://remix.ethereum.org/#url=https://docs.chain.link/${clea
       

         

           

-