Auto merge of #3220 - Turbo87:readme, r=locks

Extract `RenderedHtml` component

This PR extracts a new `RenderedHtml` component, which is used to render the README content on the crate details pages. To make the component easier to handle and align on the page, the styling was slightly adjusted so that the component does not have any outer margin by default.

r? `@locks`

Author: bors

app/components/rendered-html.hbs

@@ -0,0 +1,7 @@
+{{!--
+  This component renders raw HTML. Be very careful with this since it
+  can enable cross-site scripting attacks!
+--}}
+<div local-class="wrapper" ...attributes {{highlight-syntax selector="pre > code"}}>
+  {{html-safe @html}}
+</div>

app/components/rendered-html.module.css

@@ -0,0 +1,38 @@
+.wrapper {
+    line-height: 1.5;
+    overflow-wrap: break-word;
+
+    > :first-child {
+        margin-top: 0;
+    }
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    pre {
+        overflow-x: auto;
+    }
+
+    p {
+        code {
+            background-color: #fff;
+            padding: 0 2px;
+        }
+    }
+
+    table {
+        border-collapse: collapse;
+        display: block;
+        overflow-x: auto;
+
+        th, td {
+            border: 1px solid #dfe2e5;
+            padding: 6px 13px;
+        }
+    }
+}

app/styles/crate/version.module.css

@@ -66,7 +66,7 @@ div.header {
 .docs {
     @media only screen and (min-width: 890px) {
         flex: 7;
-        padding-right: 40px;
+        padding-right: 20px;
         max-width: 640px;
     }
 }
@@ -194,35 +194,9 @@ div.header {
     margin-bottom: 40px;
 }
 
-.crate-readme {
-    line-height: 1.5;
-    overflow-wrap: break-word;
-
-    img {
-        max-width: 100%;
-    }
-
-    pre {
-        overflow-x: auto;
-    }
-
-    p {
-        code {
-            background-color: #fff;
-            padding: 0 2px;
-        }
-    }
-
-    table {
-        border-collapse: collapse;
-        display: block;
-        overflow-x: auto;
-
-        th, td {
-            border: 1px solid #dfe2e5;
-            padding: 6px 13px;
-        }
-    }
+.readme {
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 .crate-downloads {

app/templates/crate/version.hbs

@@ -66,8 +66,8 @@
         {{/if}}
       </div>
       {{#if this.readme}}
-        <section local-class="crate-readme" aria-label="Readme" {{highlight-syntax selector="pre > code"}}>
-          {{html-safe this.readme}}
+        <section aria-label="Readme">
+          <RenderedHtml @html={{this.readme}} local-class="readme" />
         </section>
       {{else}}
         {{#if this.crate.description}}