Prettier on fetch function page

knocklabs · Jan 30, 2025 · 60fc5a2 · 60fc5a2
1 parent 83815d5
commit 60fc5a2
Showing 1 changed file with 43 additions and 31 deletions.
diff --git a/content/designing-workflows/fetch-function.mdx b/content/designing-workflows/fetch-function.mdx
@@ -19,17 +19,18 @@ As with channel steps, you use the Knock template editor to configure the shape
 - **Query parameters** - Any query parameters to encode into the URL. You also manage these via a key-value editor.
 - **Request body** - When building a <span className="text-xs font-medium text-gray-600 dark:text-gray-300 border border-transparent font-mono rounded p-1 center bg-green-100 dark:bg-transparent dark:border-green-600">POST</span> or <span className="text-xs font-medium text-gray-600 dark:text-gray-300 border border-transparent font-mono rounded p-1 center bg-yellow-100 dark:bg-transparent dark:border-yellow-500">PUT</span> request, you can build a request body to include in the request. Knock will always encode the request body as JSON.
 
-<Image
-  src="/images/functions/functions_fetch_editor.png"
-  width={800}
-  height={450}
-  alt="Using the request template editor to configure a fetch function."
-  className="rounded-md mx-auto border border-gray-200"
-/>
-
-<figcaption>
-  Using the request template editor to configure a fetch function.
-</figcaption>
+<figure>
+  <Image
+    src="/images/functions/functions_fetch_editor.png"
+    width={800}
+    height={450}
+    alt="Using the request template editor to configure a fetch function."
+    className="rounded-md mx-auto border border-gray-200"
+  />
+  <figcaption>
+    Using the request template editor to configure a fetch function.
+  </figcaption>
+</figure>
 
 Aside from the request method selector, each of the above fields is a Liquid-compatible input. This means you can use Liquid variables and control flow to inject variable data, access Knock-controlled workflow state attributes (e.g., `recipient`), and dynamically shape the request per workflow run.
 
@@ -114,7 +115,14 @@ To run a fetch step test:
 3. Click the "Run test" button in the modal. The modal will close and the test console should display a loading state as Knock executes the test.
 4. When the test run has completed, Knock will load the result into the test console for your review. You can then use use the "Request" and "Response" buttons to toggle between the two views in the test console. The "Response" section will show any data returned by the request that would be made accessible to subsequent steps in your workflow.
 
-<video width="100%" className="mb-12 rounded-md border border-gray-200" autoPlay loop muted playsInline>
+<video
+  width="100%"
+  className="mb-12 rounded-md border border-gray-200"
+  autoPlay
+  loop
+  muted
+  playsInline
+>
   <source src="/videos/fetch-step-test-runner-demo.mp4" type="video/mp4" />
 </video>
 
@@ -130,31 +138,35 @@ You can use the [workflow run logs](/send-notifications/debugging-workflows) to
 
 In the workflow run overview, you'll also see any data that Knock successfully received from your fetch function steps and merged into your workflow run state.
 
-<Image
-  src="/images/functions/functions_fetch_success.png"
-  width={800}
+<figure>
+  <Image
+    src="/images/functions/functions_fetch_success.png"
+    width={800}
   height={450}
   alt="Viewing log details for a successful fetch function step."
-  className="rounded-md mx-auto border border-gray-200"
-/>
+    className="rounded-md mx-auto border border-gray-200"
+    />
 
-<figcaption>
-  Viewing log details for a successful fetch function step.
-</figcaption>
+  <figcaption>
+    Viewing log details for a successful fetch function step.
+  </figcaption>
+</figure>
 
 If the request encounters an error, you can also expect to see details about the error in the logs. And finally, if the fetch function retries the request on a retryable error, you can expect to see details enumerated for each request attempt.
 
-<Image
-  src="/images/functions/functions_fetch_error.png"
-  width={800}
-  height={450}
-  alt="Viewing log details for an unsuccessful fetch function step."
-  className="rounded-md mx-auto border border-gray-200"
-/>
-
-<figcaption>
-  Viewing log details for an unsuccessful fetch function step.
-</figcaption>
+<figure>
+  <Image
+    src="/images/functions/functions_fetch_error.png"
+    width={800}
+    height={450}
+    alt="Viewing log details for an unsuccessful fetch function step."
+    className="rounded-md mx-auto border border-gray-200"
+  />
+
+  <figcaption>
+    Viewing log details for an unsuccessful fetch function step.
+  </figcaption>
+</figure>
 
 See the [guide on debugging workflows](/send-notifications/debugging-workflows) for more details about workflow debugging and run logs.