|
19 | 19 | > 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. |
20 | 20 |
|
21 | 21 | <div align="center"> |
22 | | - <img src="https://github.com/user-attachments/assets/f5ab386f-39bb-4ae2-aa0d-54e2f95b656d" alt="Description" width="750"/> |
| 22 | + <picture> |
| 23 | + <source media="(prefers-color-scheme: dark)" srcset="./images/code-samples-demo-dark.webm"> |
| 24 | + <img alt="animation of viewing code, switching programming languages, and copying the displayed text" src="./images/code-samples-demo-light.webm"> |
| 25 | + </picture> |
23 | 26 | <p><em>CodeSamples React Component in Action</em></p> |
24 | 27 | </div> |
25 | 28 |
|
|
28 | 31 |
|
29 | 32 | Speakeasy Code Samples API: REST APIs for retrieving SDK usage snippets from the Speakeasy Code Samples API. |
30 | 33 |
|
| 34 | + |
31 | 35 | For more information about the API: [The Speakeasy Platform Documentation](/docs) |
32 | 36 | <!-- End Summary [summary] --> |
33 | 37 |
|
34 | 38 | <!-- Start Table of Contents [toc] --> |
35 | 39 | ## Table of Contents |
36 | 40 | <!-- $toc-max-depth=2 --> |
37 | | -* [@speakeasyapi/code-samples](#speakeasyapicode-samples) |
38 | 41 | * [SDK Installation](#sdk-installation) |
39 | 42 | * [Requirements](#requirements) |
40 | 43 | * [SDK Example Usage](#sdk-example-usage) |
@@ -95,7 +98,8 @@ yarn add @tanstack/react-query react react-dom |
95 | 98 | ``` |
96 | 99 |
|
97 | 100 | > [!NOTE] |
98 | | -> This package is published with CommonJS and ES Modules (ESM) support. |
| 101 | +> This package is published as an ES Module (ESM) only. For applications using |
| 102 | +> CommonJS, use `await import("@speakeasyapi/code-samples")` to import and use this package. |
99 | 103 | <!-- End SDK Installation [installation] --> |
100 | 104 |
|
101 | 105 | <!-- Start Requirements [requirements] --> |
@@ -147,46 +151,39 @@ run(); |
147 | 151 | ### React Component |
148 | 152 |
|
149 | 153 | This library includes a React component that fetches and highlights code |
150 | | -snippets using `highlight.js`. Along with displaying the snippet, it shows a |
| 154 | +snippets using `codehike`. Along with displaying the snippet, it shows a |
151 | 155 | loading state during fetching and provides a fallback view if an error occurs. |
152 | 156 |
|
153 | 157 | ```tsx |
154 | 158 | import { SpeakeasyCodeSamplesCore } from "@speakeasyapi/code-samples/core"; |
155 | 159 | import { |
156 | | - CodeSample, |
| 160 | + CodeSampleFilenameTitle, |
| 161 | + CodeSamplesViewer, |
157 | 162 | SpeakeasyCodeSamplesProvider, |
158 | 163 | } from "@speakeasyapi/code-samples/react"; |
159 | | -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; |
160 | | - |
161 | | -const queryClient = new QueryClient(); |
162 | 164 |
|
163 | 165 | const speakeasyCodeSamples = new SpeakeasyCodeSamplesCore({ |
164 | 166 | apiKey: "<YOUR_API_KEY_HERE>", |
165 | 167 | registryUrl: "https://spec.speakeasy.com/org/ws/my-source", |
166 | 168 | }); |
167 | 169 |
|
168 | | -// Retries are handled by the underlying SDK. |
169 | | -queryClient.setQueryDefaults(["@speakeasyapi/code-samples"], { retry: false }); |
170 | | - |
171 | | -queryClient.setMutationDefaults(["@speakeasyapi/code-samples"], { |
172 | | - retry: false, |
173 | | -}); |
174 | | - |
175 | 170 | function App() { |
176 | 171 | return ( |
177 | | - <QueryClientProvider client={queryClient}> |
178 | | - <SpeakeasyCodeSamplesProvider client={speakeasyCodeSamples}> |
179 | | - <CodeSample operationId="getPetById" language="typescript" /> |
180 | | - </SpeakeasyCodeSamplesProvider> |
181 | | - </QueryClientProvider> |
| 172 | + <SpeakeasyCodeSamplesProvider client={speakeasyCodeSamples}> |
| 173 | + <CodeSamplesViewer |
| 174 | + copyable |
| 175 | + defaultLang={"typescript"} |
| 176 | + title={CodeSampleFilenameTitle} |
| 177 | + operation={"getPassageText"} |
| 178 | + // client={speakeasyCodeSamples} |
| 179 | + // 👆optional, if you want to pass the client directly |
| 180 | + // instead of using the provider |
| 181 | + /> |
| 182 | + </SpeakeasyCodeSamplesProvider> |
182 | 183 | ); |
183 | 184 | } |
184 | 185 | ``` |
185 | 186 |
|
186 | | -> [!NOTE] |
187 | | -> To apply styles to the highlighted code, import a `highlight.js` theme CSS |
188 | | -> file into your project using methods like a `<link>` tag. |
189 | | -
|
190 | 187 | <!-- Start Authentication [security] --> |
191 | 188 | ## Authentication |
192 | 189 |
|
@@ -538,9 +535,9 @@ In some rare cases, the SDK can fail to get a response from the server or even m |
538 | 535 |
|
539 | 536 | You can override the default server globally by passing a server name to the `server: keyof typeof ServerList` optional parameter when initializing the SDK client instance. The selected server will then be used as the default on the operations that use it. This table lists the names associated with the available servers: |
540 | 537 |
|
541 | | -| Name | Server | |
542 | | -| ------ | ----------------------------------- | |
543 | | -| `prod` | `https://api.prod.speakeasyapi.dev` | |
| 538 | +| Name | Server | Description | |
| 539 | +| ------ | ----------------------------------- | ----------- | |
| 540 | +| `prod` | `https://api.prod.speakeasyapi.dev` | | |
544 | 541 |
|
545 | 542 | #### Example |
546 | 543 |
|
|
0 commit comments