Merge pull request #1199 from Agoric/docs-hydration-error-debug

docs: fix hydration errors due to `iframe`s sitewide

Author: mujahidkay

main/guides/getting-started/explainer-deploying-a-smart-contact.md

@@ -44,12 +44,13 @@ Note the calling the `yarn start:contract` command is the same as running `yarn
   },
 ```
 
-In the json snippet above note that the `start` command is running `yarn docker:make clean start-contract`. 
+In the json snippet above note that the `start` command is running `yarn docker:make clean start-contract`.
 
 ::: tip Video Walkthrough
 
 As you're going through this explainer it may be helpful to watch this video walkthrough.
 
+<ClientOnly>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/pWZUHJqj_Lo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
+</ClientOnly>
 :::

main/guides/getting-started/explainer-how-to-make-an-offer.md

@@ -1,5 +1,5 @@
 # Making an Offer
-As you saw in the `dapp-offer-up` tutorial you could use the dapp UI to make an offer on up to three items. 
+As you saw in the `dapp-offer-up` tutorial you could use the dapp UI to make an offer on up to three items.
 
 Take a look at our detailed [tutorial on how the UI for making offers](https://docs.agoric.com/guides/getting-started/ui-tutorial/making-an-offer.html) works in this dapp.
 
@@ -11,6 +11,8 @@ Here is how the UI looks after completion:
 
 As you're going through this explainer it may be helpful to watch this video walkthrough.
 
+<ClientOnly>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/Wy13GLmujhA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</ClientOnly>
 
 :::

main/guides/getting-started/explainer-how-to-start-a-local-chain.md

@@ -1,5 +1,5 @@
 # Starting a Local Chain
-As you saw in this tutorial, starting a local chain is easy! 
+As you saw in this tutorial, starting a local chain is easy!
 
 ## How it Works
 In the `dapp-offer-up` sample dapp, configuration for the Agoric containers is specified in the `package.json` file. Take note of the Docker specific parameters in the `script` section of `package.json` below:
@@ -25,6 +25,8 @@ In the tutorial you first used the `yarn create` command to clone the dapp. Next
 
 As you're going through this explainer it may be helpful to watch this video walkthrough.
 
+<ClientOnly>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/WJ1MlHudpuM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</ClientOnly>
 
 :::

main/guides/getting-started/index.md

@@ -6,7 +6,9 @@ In these steps you will be getting your first Agoric dapp up and running!
 
 As you're going through this tutorial it may be helpful to watch this video walkthrough, showing you all the steps and the desired outcome of each.
 
+<ClientOnly>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/huTI9_Gq2ow" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</ClientOnly>
 
 :::
 
@@ -180,7 +182,7 @@ Previously, you installed brew on your machine. You can install docker using the
 ```sh
 brew cask install docker
 ```
-or 
+or
 ```sh
 brew install docker --cask
 ```

main/guides/getting-started/sell-concert-tickets-contract-explainer.md

@@ -131,4 +131,6 @@ atomicRearrange(
 Take a complete look at this example code in our [Github repository](https://github.com/Agoric/dapp-agoric-basics/blob/main/contract/src/sell-concert-tickets.contract.js).
 
 As you're going through this tutorial it may be helpful to watch this video walkthrough:
+<ClientOnly>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/Wtq6dwsRdOQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</ClientOnly>

main/guides/getting-started/swaparoo-how-to-swap-assets-explainer.md

@@ -105,4 +105,6 @@ const creatorFacet = Far('Creator', {
 
 ## Video Walkthrough
 Watch this short video walk-through of the complete Swaparoo Smart Contract that allows any two parties to trade any digital assets with minimal risk.
+<ClientOnly>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/qHa7u8r62JQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</ClientOnly>

main/guides/getting-started/swaparoo-making-a-payment-explainer.md

@@ -38,4 +38,6 @@ Deposit facets provide an abstraction layer for handling payments and ensure tha
 
 ## Video Walkthrough
 As you're going through this tutorial it may be helpful to watch this video walkthrough.
+<ClientOnly>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/XeHBMO7SckU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</ClientOnly>

main/guides/js-programming/eventual-send.md

@@ -139,5 +139,7 @@ Now we can see the result in some detail. Note the way the promise from
 ::: tip Watch: How Agoric Solves Reentrancy Hazards (November 2020)
 for more on eventual send and remote communication
 
+<ClientOnly>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/38oTyVv_D9I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</ClientOnly>
 :::

main/guides/js-programming/hardened-js.md

@@ -5,7 +5,9 @@
 _The first 15 minutes cover much of the material below.
 The last 10 minutes are Q&A._
 
+<ClientOnly>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/YcWXqHPui_w?list=PLzDw4TTug5O1oHRbp2HkcvKABAY9FKsmG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</ClientOnly>
 :::
 
 
@@ -81,7 +83,9 @@ This limits the damage that can happen if there is an exploitable bug.
 ::: tip Watch: Navigating the Attack Surface
 to achieve a *multiplicative* reduction in risk. _15 min_<br />
 
+<ClientOnly>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/wW9-KuezPp8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</ClientOnly>
 :::
 
 ## Tool Support: eslint config

main/guides/js-programming/index.md

@@ -9,7 +9,9 @@ This 15 minute overview is the first in a
 of short talks on the Agoric Architecture that overlap substantially with the material in
 the sections below.
 <br />
+<ClientOnly>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/52SgGFpWjsY?list=PLzDw4TTug5O1oHRbp2HkcvKABAY9FKsmG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</ClientOnly>
 :::
 
 ## Vats: the Unit of Synchrony