Feat/130 try it (#142)

* add component

* styling

* update try it out component

* Update MegaMenu.tsx

* wrap up tryit

* add README

* Update TryItOutAccordion.tsx

* add dynamic code samples and accordian control

* prerender code

* Update CodeSampleReact.tsx

* Update styles.module.css

---------

Co-authored-by: Simone Cuomo <[email protected]>

Author: tyrelchambers

public/images/tryitout.png

@@ -10,8 +10,9 @@ export type Props = {
   showButtonOnly?: boolean
   optimize?: boolean
   runs?: number
+  showButtons?: boolean
 }
-const { src, lang, showButtonOnly, optimize, runs } = Astro.props as Props
+const { src, lang, showButtonOnly, optimize, runs, showButtons = true } = Astro.props as Props
 
 const data = (await fs.readFile(path.join(process.cwd(), "public", src), "utf-8")).toString()
 
@@ -31,7 +32,7 @@ const remixUrl = `https://remix.ethereum.org/#url=https://docs.chain.link/${clea
 
 {!showButtonOnly && <Prism code={data} lang={lang ?? "solidity"} />}
 {
-  isSample && (
+  isSample && showButtons && (
     <div class="remix-callout">
       <a href={remixUrl} target="_blank">
         Open in Remix

src/components/CodeSample/CodeSample.astro

@@ -13,7 +13,6 @@ export const CodeSampleReact: React.FC<CodeSampleReactProps> = ({ src, showButto
 
   const isSolidityFile = src.match(/\.sol/)
   const isSample = isSolidityFile && (src.indexOf("samples/") === 0 || src.indexOf("/samples/") === 0)
-
   if (!isSample || !showButtonOnly || !remixUrl) return null
 
   return (

src/components/CodeSample/CodeSampleReact.tsx

@@ -138,7 +138,7 @@ export const megaMenuSections = {
         icon: creLogo,
         title: "Chainlink Runtime Environment (CRE)",
         description: "The global orchestration layer",
-        link: "/",
+        link: "/cre",
       },
     ],
   },

src/components/Header/Nav/ProductNavigation/Desktop/MegaMenu.tsx

@@ -9,6 +9,7 @@
 
 .navGroups {
   padding: 0 var(--space-10x) var(--space-10x) 0;
+  height: calc(100vh - var(--space-16x) - var(--space-16x)); /* Subtract header and footer height */
 
   overflow-y: auto;
   scrollbar-width: thin;

src/components/LeftSidebar/leftSidebar.module.css

@@ -0,0 +1,92 @@
+# TryItOut Component
+
+A component that displays an interactive accordion of features alongside a dynamically changing code sample preview. The code sample updates based on which accordion item is currently expanded.
+
+## Usage
+
+```astro
+<TryItOut
+  accordionTabs={[
+    {
+      title: "Your Feature Title",
+      text: "A brief description of what this feature does.",
+      codeSampleSrc: "/samples/YourCodeFile.sol",
+    },
+  ]}
+  ctas={[
+    { text: "Get Started", href: "/getting-started", variant: "primary" },
+    { text: "Learn More", href: "/docs", variant: "secondary" },
+  ]}
+/>
+```
+
+## Props
+
+### `accordionTabs` (required)
+
+A list of expandable sections that describe different features. Each tab needs:
+
+- **title**: The heading text for the accordion item
+- **text**: The description that appears when the accordion is expanded
+- **codeSampleSrc**: The file path to the code sample for this specific tab (should point to a file in the `/samples/` folder)
+
+**Example:**
+
+```js
+;[
+  {
+    title: "Transfer Tokens",
+    text: "Move tokens between different blockchains easily.",
+    codeSampleSrc: "/samples/CCIP/TokenTransfer.sol",
+  },
+  {
+    title: "Fetch Data",
+    text: "Get real-time information from external sources.",
+    codeSampleSrc: "/samples/DataFeeds/PriceFeed.sol",
+  },
+]
+```
+
+### `ctas` (optional)
+
+An array of call-to-action buttons to display in the footer. If not provided, defaults to "Create CRE account" and "Get the SDK" buttons.
+
+Each CTA object needs:
+
+- **text**: The button text
+- **href**: The button link URL
+- **variant** (optional): Either "primary" or "secondary" (defaults to "primary")
+
+**Example:**
+
+```js
+;[
+  { text: "Get Started", href: "/getting-started", variant: "primary" },
+  { text: "View Docs", href: "/documentation", variant: "secondary" },
+]
+```
+
+## How It Works
+
+The component uses [Astro's nano stores](https://docs.astro.build/en/core-concepts/sharing-state/) to track which accordion item is currently expanded. When you click on a different accordion item, the code sample automatically updates to show the code associated with that item.
+
+### Technical Implementation
+
+**Why we pre-render all code samples:**
+
+All code samples are rendered at build time using the `<CodeSample>` Astro component and included in the HTML. While this means all code samples are present in the DOM, they are toggled via visibility rather than dynamically loaded. This approach is necessary because:
+
+1. **Astro components are build-time only** - The `<CodeSample>` component uses Astro's Prism integration which only runs during the build process, not at runtime
+2. **Proper syntax highlighting** - Pre-rendering ensures all code has proper syntax highlighting applied via Prism
+3. **Performance** - No runtime file reading or syntax highlighting processing; instant switching between code samples
+4. **Simplicity** - Avoids complex API endpoints or client-side file fetching
+
+**Accessibility considerations:**
+
+Inactive code samples are hidden from both visual users and assistive technology:
+
+- `display: none` hides them visually
+- `aria-hidden="true"` ensures screen readers ignore hidden code blocks
+- Only the active code sample has `aria-hidden="false"`, making it visible to screen readers
+
+When the active accordion changes, the visibility and `aria-hidden` attributes are updated via JavaScript to show the new code sample and hide all others.

src/components/TryItOut/README.md

@@ -0,0 +1,106 @@
+---
+import { buttonVariants, Typography } from "@chainlink/blocks"
+import styles from "./styles.module.css"
+import CodeSample from "../CodeSample/CodeSample.astro"
+import { TryItOutAccordion } from "./TryItOutAccordion"
+import { clsx } from "~/lib/clsx/clsx"
+
+interface CTA {
+  text: string
+  href: string
+  variant?: "primary" | "secondary"
+}
+
+interface Props {
+  accordionTabs: Array<{ title: string; text: string; codeSampleSrc: string }>
+  ctas: CTA[]
+}
+
+const { accordionTabs, ctas } = Astro.props
+---
+
+<div class={styles.container}>
+  <section class={styles.body}>
+    <Typography variant="h2" className={styles.title}> Try it out </Typography>
+
+    <section class={styles.content}>
+      <div class={styles.contentLeft}>
+        <TryItOutAccordion client:load tabs={accordionTabs} />
+
+        <footer class={styles.contentFooter}>
+          {
+            ctas.map((cta) => (
+              <a
+                href={cta.href}
+                class={clsx(
+                  buttonVariants({
+                    variant: cta.variant === "secondary" ? "tertiary" : "primary",
+                    size: "default",
+                  }),
+                  cta.variant === "secondary" && styles.secondaryBtn
+                )}
+              >
+                {cta.text}
+              </a>
+            ))
+          }
+        </footer>
+      </div>
+
+      <section class={styles.image}>
+        {
+          accordionTabs.map((tab, index) => (
+            <div
+              class="code-sample-item"
+              data-code-index={index}
+              style={index === 0 ? "" : "display: none;"}
+              aria-hidden={index === 0 ? "false" : "true"}
+            >
+              <CodeSample showButtons={false} src={tab.codeSampleSrc} />
+            </div>
+          ))
+        }
+      </section>
+
+      <footer class={styles.contentFooterMobile}>
+        {
+          ctas.map((cta) => (
+            <a
+              href={cta.href}
+              class={clsx(
+                buttonVariants({
+                  variant: cta.variant === "secondary" ? "tertiary" : "primary",
+                  size: "default",
+                }),
+                cta.variant === "secondary" && styles.secondaryBtn
+              )}
+            >
+              {cta.text}
+            </a>
+          ))
+        }
+      </footer>
+    </section>
+  </section>
+</div>
+
+<script>
+  import { activeAccordionIndex } from "~/stores/tryItOutStore.ts"
+
+  // Subscribe to nano store changes
+  activeAccordionIndex.subscribe((newIndex) => {
+    // Hide all code samples and mark as hidden for screen readers
+    const allCodeSamples = document.querySelectorAll(".code-sample-item")
+    allCodeSamples.forEach((el) => {
+      ;(el as HTMLElement).style.display = "none"
+      ;(el as HTMLElement).setAttribute("aria-hidden", "true")
+    })
+
+    // Show the active one and mark as visible for screen readers
+    const activeCodeSample = document.querySelector(`[data-code-index="${newIndex}"]`)
+    if (activeCodeSample) {
+      ;(activeCodeSample as HTMLElement).style.display = "block"
+      ;(activeCodeSample as HTMLElement).setAttribute("aria-hidden", "false")
+    }
+  })
+</script>

src/components/TryItOut/TryItOut.astro

@@ -0,0 +1,37 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Typography } from "@chainlink/blocks"
+import { activeAccordionIndex } from "~/stores/tryItOutStore.ts"
+import styles from "./styles.module.css"
+
+interface AccordionTab {
+  title: string
+  text: string
+  codeSampleSrc: string
+}
+
+interface TryItOutAccordionProps {
+  tabs: AccordionTab[]
+}
+
+export const TryItOutAccordion = ({ tabs }: TryItOutAccordionProps) => {
+  const handleValueChange = (value: string) => {
+    if (value) {
+      activeAccordionIndex.set(parseInt(value, 10))
+    }
+  }
+
+  return (
+    <Accordion collapsible type="single" defaultValue="0" onValueChange={handleValueChange}>
+      {tabs.map((tab, idx) => (
+        <AccordionItem key={idx} value={String(idx)} className={styles.accordionItem}>
+          <AccordionTrigger className={styles.accordionTrigger}>
+            {tab.title}{" "}
+            <Typography variant="code" className={styles.indicator}>
+              0{idx + 1}
+            </Typography>
+          </AccordionTrigger>
+          <AccordionContent className={styles.text}>{tab.text}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}