Responsive: Fix callout handling and default side

Author: nginx-jack

assets/css/v2/style.css

@@ -1067,9 +1067,11 @@ blockquote p:last-child {
   margin: 0 auto;
 }
 
-blockquote.side-callout {
-  grid-column: 2 !important;
-  grid-row: span 2;
+@media (min-width: 1512px) {
+  blockquote.side-callout {
+    grid-column: 2 !important;
+    align-self: start;
+  }
 }
 
 blockquote > div > * {
@@ -1081,6 +1083,10 @@ blockquote ul {
   margin: 0 0 1rem 1rem;
 }
 
+li > blockquote {
+  margin: var(--flow-gap) 0 0 0;
+}
+
 /* Tabs */
 .tabs-container {
   /* border-bottom: 1px solid black; */

exampleSite/content/test-product/call-out/call-out-code-blocks.md

@@ -6,7 +6,28 @@ weight: 200
 ---
 
 
-## Code Block Multi line
+## Code Block Multi line with callout
+
+
+Start the Docker container to connect it to NGINX One. Replace `YOUR_NGINX_ONE_DATA_PLANE_KEY_HERE` with your data plane key and `VERSION_TAG` with the version tag you pulled.
+
+**For NGINX Plus R33 or later**:
+
+- Use the `NGINX_LICENSE_JWT` variable to pass your JWT license. Replace `YOUR_JWT_HERE` with your JWT.
+
+For more details, see About subscription licenses
+
+```sh
+sudo docker run \
+--env=NGINX_LICENSE_JWT="YOUR_JWT_HERE" \
+--env=NGINX_AGENT_SERVER_GRPCPORT=443 \
+--env=NGINX_AGENT_SERVER_HOST=agent.connect.nginx.com \
+--env=NGINX_AGENT_SERVER_TOKEN="YOUR_NGINX_ONE_DATA_PLANE_KEY_HERE" \
+--env=NGINX_AGENT_TLS_ENABLE=true \
+--restart=always \
+--runtime=runc \
+-d private-registry.nginx.com/nginx-plus/agent:<VERSION_TAG>
+```
 
 {{<call-out "" "Example:" "" >}}
 To start the container with the `debian` image:
@@ -27,12 +48,11 @@ sudo docker run \
 
 ## Code Block Single line
 
-{{<call-out "" "Example:" "" >}}
+
 How to read load nginx config
 
 ```sh
 nginx -s reload
 ```
 
-{{</call-out>}}
 

exampleSite/content/test-product/call-out/call-out-code-lists.md

@@ -29,4 +29,18 @@ weight: 200
   - Add a configuration to the config sync group, so all instances inherit it.
   - Add the instances in a separate operation.
 
-  Your instances should synchronize with your desired configuration within 30 seconds. {{< /note >}}
+  Your instances should synchronize with your desired configuration within 30 seconds. {{< /note >}}
+
+
+## Callout within list
+
+1. Open the JSON Web Token file you downloaded from [MyF5](https://my.f5.com/manage/s/subscriptions) and copy its contents. 
+
+   {{<call-out "tip" "Copying the JWT token" "" >}} Make sure there are **no extra characters or spaces** when copying the contents of the JWT token: they can invalidate the token and cause 401 errors during authentication.{{</call-out>}}
+
+2. Log in to the Docker registry using the contents of the JSON Web Token file:
+
+   ```bash
+   docker login private-registry.nginx.com --username=<JWT_CONTENTS> --password=none
+   ```
+

exampleSite/content/test-product/call-out/call-out-side.md

@@ -0,0 +1,51 @@
+---
+description: Callout - Side
+title: Callout - Side
+weight: 200
+---
+
+## Text is longer than callout
+This is some text that should be along the left of the call out.
+This assumes the callout text is shorter than the text in the callout.
+If the text in the paragraph is shorter than the callout, it's likely
+the content needs to be re-written.
+
+{{<call-out "tip side-callout" "Tip for Automated Reporting" >}}
+I am some call out text. Look at me go!
+{{</call-out>}}
+
+## Text is shorter than callout
+
+This is some text that should be along the left of the call out.
+This assumes the callout text is shorter than the text in the callout.
+If the text in the paragraph is shorter than the callout, it's likely
+the content needs to be re-written.
+
+{{<call-out "tip side-callout" "Tip for Automated Reporting" >}}
+I am some call out text. Look at me go!
+{{</call-out>}}
+
+## Very long callout with short text
+
+Short Text
+
+{{<call-out "tip side-callout" "Tip for Automated Reporting" >}}
+If you add multiple instances to a single config sync group, simultaneously (with automation), follow these steps. Your instances will inherit your desired configuration:
+
+Create a config sync group.
+Add a configuration to the config sync group, so all instances inherit it.
+Add the instances in a separate operation.
+Your instances should synchronize with your desired configuration within 30 seconds.
+{{</call-out>}}
+
+
+## Non-side call out
+
+This is some text that should be along the left of the call out.
+This assumes the callout text is shorter than the text in the callout.
+If the text in the paragraph is shorter than the callout, it's likely
+the content needs to be re-written.
+
+{{<call-out "tip inline-callout" "Tip for Automated Reporting" >}}
+I am some call out text. Look at me go!
+{{</call-out>}}

layouts/shortcodes/call-out.html

@@ -2,9 +2,9 @@
 {{ $sideOption := "side-callout" }}
 {{ $inlineOption := "inline-callout" }}
 
-<!-- Add default option for callouts that are "inline" if one is not provided -->
-{{ if and (not (strings.Contains $class $inlineOption)) (not (strings.Contains $class $sideOption)) }}
-{{ $class = printf "%s %s" $class $inlineOption }}
+<!-- Add default option for callouts that are "sideline" if one is not provided -->
+{{ if and (not (strings.Contains $class $sideOption)) (not (strings.Contains $class $inlineOption)) }}
+{{ $class = printf "%s %s" $class $sideOption }}
 {{ end }}
 
 <!-- Blockquote element with a class that is the first parameter passed to the shortcode -->