SONAR-11954 Document how to use iframes in documentation, update styles

diff --git a/server/sonar-docs/README.md b/server/sonar-docs/README.md
index 53fd054b4b6bf937364968fec09f5315da0e98b7..5d98d7ecc7ece26822a9a33f59cb836f64973b57 100644 (file)
--- a/server/sonar-docs/README.md
+++ b/server/sonar-docs/README.md
@@ -272,3 +272,45 @@ You can also put icons inside messages:
 [[danger]]
 | ![](/images/cross.svg) This is a **danger** message.
 ```
+
+#### Iframes
+
+_Note: at this time, iframes are only supported for the static documentation, and will be stripped from the embedded documentation._
+
+You can add iframes directly in the source:
+
+```html
+<iframe src="http://www.sonarsource.com"></iframe>
+
+```
+
+Make sure to leave an empty line _after_ the closing tag, otherwise formatting of the following line could be incorrect:
+
+_Incorrect:_
+```md
+<iframe src="http://www.sonarsource.com"></iframe>
+*Lorem ipsum* dolor sit amet.
+```
+
+_Correct:_
+```md
+<iframe src="http://www.sonarsource.com"></iframe>
+
+*Lorem ipsum* dolor sit amet.
+```
+
+By default, an iframe will have a height of 150px (as per browser specs). You can override this by adding a `height` attribute:
+
+```html
+<iframe src="http://www.sonarsource.com" height="400px"></iframe>
+
+```
+
+You cannot change the width, which is always 100%.
+
+Note that an iframe is **not** a self-closing tag. This means that the following syntax _won't work_ and will break the page in unexpected ways:
+
+```html
+<iframe src="http://www.sonarsource.com" />
+
+```

diff --git a/server/sonar-docs/src/layouts/layout.css b/server/sonar-docs/src/layouts/layout.css
index d58309fbff827d902ccad4d8f7c65aa35029347f..e0d7255b1fb17c69d294b7aecf1e17bc3324af92 100644 (file)
--- a/server/sonar-docs/src/layouts/layout.css
+++ b/server/sonar-docs/src/layouts/layout.css
@@ -25,6 +25,11 @@ body,
   height: 100%;
 }
 
+iframe {
+  width: 100%;
+  border: 0;
+}
+
 .blue-bar {
   background: #4c9bd6;
   height: 5px;
@@ -363,7 +368,7 @@ a.search-result .note {
 }
 
 .markdown-container {
-  max-width: 680px;
+  width: 680px;
   margin: 0 auto;
   padding-top: 24px;
   padding-bottom: 24px;
@@ -371,6 +376,7 @@ a.search-result .note {
 
 .headings-container + .markdown-container {
   max-width: 900px;
+  width: auto;
   padding-right: 220px;
 }