chore: remove <script> (#1692)

Co-authored-by: Alexis Aguilar <[email protected]>
clerk · Nov 13, 2024 · 19c80f4 · 19c80f4
1 parent cefc6d8
commit 19c80f4
Show file tree

Hide file tree

Showing 32 changed files with 2,538 additions and 6,099 deletions.
diff --git a/docs/advanced-usage/using-proxies.mdx b/docs/advanced-usage/using-proxies.mdx
@@ -285,38 +285,18 @@ When using a proxy, all requests to the Frontend API will be made through your d
     <Tab>
       To configure your proxy setup using properties in your JavaScript application, pass the `proxyUrl` option to the [`load()`](/docs/references/javascript/clerk/clerk#load) method.
 
-      <CodeBlockTabs options={["NPM module", "<script>"]}>
-        ```js {{ filename: 'main.js' }}
-        import { Clerk } from '@clerk/clerk-js'
+      ```js {{ filename: 'main.js' }}
+      import { Clerk } from '@clerk/clerk-js'
 
-        // Initialize Clerk with your Clerk publishable key
-        const clerk = new Clerk('{{pub_key}}')
+      // Initialize Clerk with your Clerk publishable key
+      const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
-        await clerk.load({
-          proxyUrl: 'https://app.dev/__clerk',
-        })
-        ```
+      const clerk = new Clerk(clerkPubKey)
 
-        ```html {{ filename: 'index.html' }}
-        <!-- Initialize Clerk with your
-          Clerk Publishable key and Frontend API URL -->
-        <script
-          async
-          crossorigin="anonymous"
-          data-clerk-publishable-key="{{pub_key}}"
-          src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
-          type="text/javascript"
-        ></script>
-
-        <script>
-          window.addEventListener('load', async function () {
-            await Clerk.load({
-              proxyUrl: 'https://app.dev/__clerk',
-            })
-          })
-        </script>
-        ```
-      </CodeBlockTabs>
+      await clerk.load({
+        proxyUrl: 'https://app.dev/__clerk',
+      })
+      ```
     </Tab>
   </Tabs>
 

diff --git a/docs/components/authentication/google-one-tap.mdx b/docs/components/authentication/google-one-tap.mdx
@@ -112,46 +112,22 @@ function openGoogleOneTap(params: GoogleOneTapProps): void
 
 #### `openGoogleOneTap()` usage
 
-<CodeBlockTabs options={['NPM module', '<script>']}>
-  ```js {{ filename: 'index.js', mark: [[7, 12]] }}
-  import { Clerk } from '@clerk/clerk-js'
-
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
-
-  const params = {
-    cancelOnTapOutside: false,
-    itpSupport: false,
-    fedCmSupport: false,
-  }
-  clerk.openGoogleOneTap(params)
-  ```
-
-  ```html {{ filename: 'index.html', mark: [[14, 19]] }}
-  <!-- Initialize Clerk with your
-  Clerk Publishable key and Frontend API URL -->
-  <script
-    async
-    crossorigin="anonymous"
-    data-clerk-publishable-key="{{pub_key}}"
-    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
-    type="text/javascript"
-  ></script>
-
-  <script>
-    window.addEventListener('load', async function () {
-      await Clerk.load()
-      const params = {
-        cancelOnTapOutside: false,
-        itpSupport: false,
-        fedCmSupport: false,
-      }
-      Clerk.openGoogleOneTap(params)
-    })
-  </script>
-  ```
-</CodeBlockTabs>
+```js {{ filename: 'main.js', mark: [[9, 14]] }}
+import { Clerk } from '@clerk/clerk-js'
+
+// Initialize Clerk with your Clerk publishable key
+const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+const clerk = new Clerk(clerkPubKey)
+await clerk.load()
+
+const params = {
+  cancelOnTapOutside: false,
+  itpSupport: false,
+  fedCmSupport: false,
+}
+clerk.openGoogleOneTap(params)
+```
 
 ### `closeGoogleOneTap()`
 
@@ -163,57 +139,26 @@ function closeGoogleOneTap(): void
 
 #### `closeGoogleOneTap()` usage
 
-<CodeBlockTabs options={['NPM module', '<script>']}>
-  ```js {{ filename: 'index.js', mark: [16] }}
-  import { Clerk } from '@clerk/clerk-js'
-
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
-
-  const params = {
-    cancelOnTapOutside: false,
-    itpSupport: false,
-    fedCmSupport: false,
-  }
-  clerk.openGoogleOneTap(params)
-
-  // Do something else
-
-  clerk.closeGoogleOneTap()
-  ```
-
-  ```html {{ filename: 'index.html', mark: [26] }}
-  <!-- Add a <div id="sign-in"> element to your HTML -->
-  <div id="sign-in"></div>
-
-  <!-- Initialize Clerk with your
-  Clerk Publishable key and Frontend API URL -->
-  <script
-    async
-    crossorigin="anonymous"
-    data-clerk-publishable-key="{{pub_key}}"
-    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
-    type="text/javascript"
-  ></script>
-
-  <script>
-    window.addEventListener('load', async function () {
-      await Clerk.load()
-      const params = {
-        cancelOnTapOutside: false,
-        itpSupport: false,
-        fedCmSupport: false,
-      }
-      Clerk.openGoogleOneTap(params)
-
-      // Do something else
-
-      Clerk.closeGoogleOneTap()
-    })
-  </script>
-  ```
-</CodeBlockTabs>
+```js {{ filename: 'main.js', mark: [18] }}
+import { Clerk } from '@clerk/clerk-js'
+
+// Initialize Clerk with your Clerk publishable key
+const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+const clerk = new Clerk(clerkPubKey)
+await clerk.load()
+
+const params = {
+  cancelOnTapOutside: false,
+  itpSupport: false,
+  fedCmSupport: false,
+}
+clerk.openGoogleOneTap(params)
+
+// Do something else
+
+clerk.closeGoogleOneTap()
+```
 
 ### `authenticateWithGoogleOneTap()`
 
@@ -236,52 +181,25 @@ function authenticateWithGoogleOneTap(
 
 #### `authenticateWithGoogleOneTap()` usage
 
-<CodeBlockTabs options={['NPM module', '<script>']}>
-  ```js {{ filename: 'index.js', mark: [[7, 15]] }}
-  import { Clerk } from '@clerk/clerk-js'
-
-  // Initialize Clerk with your Clerk publishable key
-  const clerk = new Clerk('{{pub_key}}')
-  await clerk.load()
-
-  // Optionally, you can set redirect URLs.
-  const customUrls = {
-    signInUrl: '/sign-in',
-    signUpUrl: '/sign-up',
-  }
-  // Initiate the authentication flow.
-  const signInOrUp = await clerk.authenticateWithGoogleOneTap({ token: 'xxxx' })
-  // Set the session as active, and handle any navigation or redirects
-  await clerk.handleGoogleOneTapCallback(signInOrUp, customUrls)
-  ```
-
-  ```html {{ filename: 'index.html', mark: [[14, 22]] }}
-  <!-- Initialize Clerk with your
-  Clerk Publishable key and Frontend API URL -->
-  <script
-    async
-    crossorigin="anonymous"
-    data-clerk-publishable-key="{{pub_key}}"
-    src="https://{{fapi_url}}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
-    type="text/javascript"
-  ></script>
-
-  <script>
-    window.addEventListener('load', async function () {
-      await Clerk.load()
-      // Optionally, you can set redirect URLs.
-      const customUrls = {
-        signInUrl: '/sign-in',
-        signUpUrl: '/sign-up',
-      }
-      // Initiate the authentication flow.
-      const signInOrUp = await clerk.authenticateWithGoogleOneTap({ token: 'xxxx' })
-      // Set the session as active, and handle any navigation or redirects
-      await clerk.handleGoogleOneTapCallback(signInOrUp, customUrls)
-    })
-  </script>
-  ```
-</CodeBlockTabs>
+```js {{ filename: 'main.js', mark: [[9, 17]] }}
+import { Clerk } from '@clerk/clerk-js'
+
+// Initialize Clerk with your Clerk publishable key
+const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+const clerk = new Clerk(clerkPubKey)
+await clerk.load()
+
+// Optionally, you can set redirect URLs.
+const customUrls = {
+  signInUrl: '/sign-in',
+  signUpUrl: '/sign-up',
+}
+// Initiate the authentication flow.
+const signInOrUp = await clerk.authenticateWithGoogleOneTap({ token: 'xxxx' })
+// Set the session as active, and handle any navigation or redirects
+await clerk.handleGoogleOneTapCallback(signInOrUp, customUrls)
+```
 
 ### `handleGoogleOneTapCallback()`