docs: tweak checkout embed docs

.github/workflows/chromatic.yaml

@@ -35,7 +35,7 @@ jobs:
 
       - name: Build SDK
         working-directory: ./clients
-        run: pnpm turbo run build --filter=@polar-sh/sdk
+        run: pnpm turbo run build --filter=@polar-sh/*
 
       - name: Publish to Chromatic
         uses: chromaui/action@v11

.github/workflows/test_client.yaml

@@ -84,7 +84,7 @@ jobs:
 
       - name: Build SDK
         working-directory: ./clients
-        run: pnpm turbo run build --filter=@polar-sh/sdk
+        run: pnpm turbo run build --filter=@polar-sh/*
 
       - name: Build
         working-directory: ./clients/apps/web

clients/apps/web/src/app/(main)/docs/guides/(mdx)/checkout/CheckoutEmbedExample.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { PolarEmbedCheckout } from '@polar-sh/checkout/embed'
+import { useTheme } from 'next-themes'
+import { useEffect } from 'react'
+
+const CheckoutEmbedExample = () => {
+  const { resolvedTheme } = useTheme()
+
+  useEffect(() => {
+    PolarEmbedCheckout.init()
+  }, [])
+
+  return (
+    <>
+      <a
+        href="https://sandbox-api.polar.sh/v1/checkout-links/polar_cl_hw-6948303Yy9xny3IJQ35MWFtE1U04gzDCAF-rR18M/redirect"
+        data-polar-checkout
+        data-polar-checkout-theme={resolvedTheme as 'light' | 'dark'}
+      >
+        Purchase Test Product
+      </a>
+    </>
+  )
+}
+
+export default CheckoutEmbedExample

clients/apps/web/src/app/(main)/docs/guides/(mdx)/checkout/page.mdx

@@ -1,4 +1,5 @@
 import BrowserCallout from '@/components/Feed/Markdown/Callout/BrowserCallout'
+import CheckoutEmbedExample from './CheckoutEmbedExample'
 
 export const metadata = {
   title: 'Checkout',
@@ -40,15 +41,15 @@ Every product-page has a checkout form inline where users can purchase your prod
 
 ## Checkout Links
 
-![Checkout Links](./checkout_link.light.png)
-![Checkout Links](./checkout_link.dark.png)
-
 Checkouts Links are an easy way to sell your products: you just need to share this URL on your website or social media for customers to start a checkout.
 
 Checkout Links can be created by pressing the "context-menu" button on the Products Overview Page. This will open a modal where you can select price and optionally set a success URL.
 
 You can also optionally set `Metadata`: this is a key-value object allowing you to store additional information which may be useful for you when handling the order. This metadata will be copied to the generated Checkout object and, if the checkout succeeds, to the resulting Order and/or Subscription.
 
+![Checkout Links](./checkout_link.light.png)
+![Checkout Links](./checkout_link.dark.png)
+
 <BrowserCallout type="TIP">
   Previously generated links will be displayed in this modal as well. Click on
   it to edit the success URL or metadata.
@@ -66,9 +67,9 @@ You can either copy and paste or code snippet to get up and running in a second
 
 The code snippet can be used on any website or CMS that allows you to insert HTML.
 
-First, create a [Checkout Link](#checkout-links) as described in the previous section.
+First, create a [Checkout Link](#checkout-links) as described in the previous section. The code snippet can directly be copied from there by clicking on `Copy Embed Code`.
 
-Then, copy and paste this snippet where you want to show the Checkout link:
+The snippet looks like this:
 
 ```html
 <a
@@ -78,10 +79,14 @@ Then, copy and paste this snippet where you want to show the Checkout link:
 >
   Purchase
 </a>
-<script src="https://cdn.jsdelivr.net/npm/@polar-sh/[email protected]/dist/embed.global.js" defer data-auto-init></script
+<script
+  src="https://cdn.jsdelivr.net/npm/@polar-sh/[email protected]/dist/embed.global.js"
+  defer
+  data-auto-init
+></script>
 ```
 
-This will display a `Purchase` link which will open an inline checkout when clicked.
+This will display a `Purchase` link which will open an inline checkout when clicked, like the following: <CheckoutEmbedExample />
 
 <BrowserCallout type="TIP">
   You can style the trigger element any way you want, as long as you keep the

clients/package.json

@@ -7,7 +7,7 @@
     "dev-web": "turbo run dev --filter=web",
     "lint": "turbo run lint",
     "test": "turbo run test",
-    "storybook": "turbo run build --filter=@polar-sh/sdk && cd apps/web && pnpm storybook",
+    "storybook": "turbo run build --filter=@polar-sh/* && cd apps/web && pnpm storybook",
     "generate": "cd packages/sdk && pnpm generate",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "preinstall": "npx only-allow pnpm",