adding some zesty images 🌶️

Author: walker-tx

.speakeasy/gen.lock

@@ -6,7 +6,7 @@ management:
   speakeasyVersion: 1.495.1
   generationVersion: 2.515.4
   releaseVersion: 2.2.6
-  configChecksum: 231056298e32bcbdbe85ed747f3eb244
+  configChecksum: a4ff9835698013bb8c7bb828a7e2be76
   repoURL: https://github.com/speakeasy-api/speakeasy-code-samples-ts.git
   installationURL: https://github.com/speakeasy-api/speakeasy-code-samples-ts
   published: true

.speakeasy/workflow.lock

@@ -2,7 +2,7 @@ speakeasyVersion: 1.495.1
 sources:
     speakeasy-OAS:
         sourceNamespace: speakeasy-oas
-        sourceRevisionDigest: sha256:4286e1907ba21377cded4e079899d46bbebefe2c403b5445e75349bc4e816acc
+        sourceRevisionDigest: sha256:e536544d55620a79d50578204eb81fba11c6c419701bba423d897f2418d40a2d
         sourceBlobDigest: sha256:74092062b98c511fb2035986fe307d2d5de39443dac827b7bdddb853268f768c
         tags:
             - latest
@@ -11,10 +11,10 @@ targets:
     code_samples_typescript_sdk:
         source: speakeasy-OAS
         sourceNamespace: speakeasy-oas
-        sourceRevisionDigest: sha256:4286e1907ba21377cded4e079899d46bbebefe2c403b5445e75349bc4e816acc
+        sourceRevisionDigest: sha256:e536544d55620a79d50578204eb81fba11c6c419701bba423d897f2418d40a2d
         sourceBlobDigest: sha256:74092062b98c511fb2035986fe307d2d5de39443dac827b7bdddb853268f768c
         codeSamplesNamespace: speakeasy-oas-typescript-code-samples
-        codeSamplesRevisionDigest: sha256:d384f1e2acef6d6a2415cd201c65ba9ac8b174b998bea0fdd37163c72dacb704
+        codeSamplesRevisionDigest: sha256:3a52773bea327c93e288622e24477f9c093cebab089f6e48ca84594db21a43e6
 workflow:
     workflowVersion: 1.0.0
     speakeasyVersion: latest

README.md

@@ -19,7 +19,10 @@
 > This SDK is not yet ready for production use. To complete setup please follow the steps outlined in your [workspace](https://app.speakeasy.com/org/speakeasy-self/speakeasy-self). Delete this section before > publishing to a package manager.
 
 <div align="center">
-  <img src="https://github.com/user-attachments/assets/f5ab386f-39bb-4ae2-aa0d-54e2f95b656d" alt="Description" width="750"/>
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./images/code-samples-demo-dark.webm">
+    <img alt="animation of viewing code, switching programming languages, and copying the displayed text" src="./images/code-samples-demo-light.webm">
+  </picture>
   <p><em>CodeSamples React Component in Action</em></p>
 </div>
 
@@ -28,13 +31,13 @@
 
 Speakeasy Code Samples API: REST APIs for retrieving SDK usage snippets from the Speakeasy Code Samples API.
 
+
 For more information about the API: [The Speakeasy Platform Documentation](/docs)
 <!-- End Summary [summary] -->
 
 <!-- Start Table of Contents [toc] -->
 ## Table of Contents
 <!-- $toc-max-depth=2 -->
-* [@speakeasyapi/code-samples](#speakeasyapicode-samples)
   * [SDK Installation](#sdk-installation)
   * [Requirements](#requirements)
   * [SDK Example Usage](#sdk-example-usage)
@@ -148,46 +151,39 @@ run();
 ### React Component
 
 This library includes a React component that fetches and highlights code
-snippets using `highlight.js`. Along with displaying the snippet, it shows a
+snippets using `codehike`. Along with displaying the snippet, it shows a
 loading state during fetching and provides a fallback view if an error occurs.
 
 ```tsx
 import { SpeakeasyCodeSamplesCore } from "@speakeasyapi/code-samples/core";
 import {
-  CodeSample,
+  CodeSampleFilenameTitle,
+  CodeSamplesViewer,
   SpeakeasyCodeSamplesProvider,
 } from "@speakeasyapi/code-samples/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
-const queryClient = new QueryClient();
 
 const speakeasyCodeSamples = new SpeakeasyCodeSamplesCore({
   apiKey: "<YOUR_API_KEY_HERE>",
   registryUrl: "https://spec.speakeasy.com/org/ws/my-source",
 });
 
-// Retries are handled by the underlying SDK.
-queryClient.setQueryDefaults(["@speakeasyapi/code-samples"], { retry: false });
-
-queryClient.setMutationDefaults(["@speakeasyapi/code-samples"], {
-  retry: false,
-});
-
 function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <SpeakeasyCodeSamplesProvider client={speakeasyCodeSamples}>
-        <CodeSample operationId="getPetById" language="typescript" />
-      </SpeakeasyCodeSamplesProvider>
-    </QueryClientProvider>
+    <SpeakeasyCodeSamplesProvider client={speakeasyCodeSamples}>
+      <CodeSamplesViewer
+        copyable
+        defaultLang={"typescript"}
+        title={CodeSampleFilenameTitle}
+        operation={"getPassageText"}
+        // client={speakeasyCodeSamples} 
+        // 👆optional, if you want to pass the client directly 
+        // instead of using the provider
+      />
+    </SpeakeasyCodeSamplesProvider>
   );
 }
 ```
 
-> [!NOTE]
-> To apply styles to the highlighted code, import a `highlight.js` theme CSS
-> file into your project using methods like a `<link>` tag.
-
 <!-- Start Authentication [security] -->
 ## Authentication
 

example/src/App.tsx

@@ -16,14 +16,13 @@ function App() {
   // samples viewer
   return (
     <SpeakeasyCodeSamplesProvider client={coreSdk}>
-      <h1 className="">Speakeasy Code Samples</h1>
-      <div style={{ width: "50%", marginInline: "auto" }}>
+      <div style={{ width: "700px", marginInline: "auto" }}>
         <CodeSamplesViewer
           copyable
           defaultLang={"typescript"}
           title={CodeSampleFilenameTitle}
           operation={"getPassageText"}
-          // client={coreSdk}
+          // client={coreSdk} 👈 optional, if you want to pass the client directly
         />
       </div>
     </SpeakeasyCodeSamplesProvider>