fix(server): audit details header design

packages/server/src/ui/components/markdown.jsx

@@ -0,0 +1,72 @@
+/**
+ * @license Copyright 2019 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {h, Fragment} from 'preact';
+
+/**
+ * Split a string on markdown links (e.g. [some link](https://...)) into
+ * segments of plain text that weren't part of a link (marked as
+ * `isLink === false`), and segments with text content and a URL that did make
+ * up a link (marked as `isLink === true`).
+ * @param {string} text
+ * @return {Array<{isLink: true, text: string, linkHref: string}|{isLink: false, text: string}>}
+ */
+function splitMarkdownLink(text) {
+  /** @type {Array<{isLink: true, text: string, linkHref: string}|{isLink: false, text: string}>} */
+  const segments = [];
+
+  const parts = text.split(/\[([^\]]+?)\]\((https?:\/\/.*?)\)/g);
+  while (parts.length) {
+    // Shift off the same number of elements as the pre-split and capture groups.
+    const [preambleText, linkText, linkHref] = parts.splice(0, 3);
+
+    if (preambleText) {
+      // Skip empty text as it's an artifact of splitting, not meaningful.
+      segments.push({
+        isLink: false,
+        text: preambleText,
+      });
+    }
+
+    // Append link if there are any.
+    if (linkText && linkHref) {
+      segments.push({
+        isLink: true,
+        text: linkText,
+        linkHref,
+      });
+    }
+  }
+
+  return segments;
+}
+
+/** @param {{text: string}} props */
+export const Markdown = props => {
+  const segments = splitMarkdownLink(props.text);
+
+  return (
+    <Fragment>
+      {segments.map((segment, i) => {
+        if (!segment.isLink) return <span key={i}>{segment.text}</span>;
+
+        const url = new URL(segment.linkHref);
+
+        const DOCS_ORIGINS = ['https://developers.google.com', 'https://web.dev'];
+        if (DOCS_ORIGINS.includes(url.origin)) {
+          url.searchParams.set('utm_source', 'lighthouse');
+          url.searchParams.set('utm_medium', 'ci');
+        }
+
+        return (
+          <a key={i} href={url.href} target="_blank" rel="noopener noreferrer">
+            {segment.text}
+          </a>
+        );
+      })}
+    </Fragment>
+  );
+};

packages/server/src/ui/routes/build-view/audit-detail/audit-detail-pane.css

@@ -34,17 +34,26 @@
 }
 
 .audit-detail-pane__audit {
+  position: relative;
   padding: calc(2 * var(--base-spacing));
+  padding-left: calc(3 * var(--base-spacing));
 
   border-bottom: 1px solid var(--base-border-color);
 }
 
+.audit-detail-pane__score {
+  position: absolute;
+  left: var(--base-spacing);
+  top: calc(2 * var(--base-spacing) + var(--header-font-size) / 4);
+}
+
 .audit-detail-pane__audit-title {
   font-size: var(--header-font-size);
 }
 
 .audit-detail-pane__audit-description {
   color: var(--secondary-text-color);
+  margin-top: calc(var(--base-spacing) / 2);
 }
 
 .audit-detail-pane__audit-details {

packages/server/src/ui/routes/build-view/audit-detail/audit-detail.jsx

@@ -6,7 +6,8 @@
 
 import {h} from 'preact';
 import clsx from 'clsx';
-import {ScoreWord} from '../../../components/score-icon';
+import {ScoreWord, ScoreIcon} from '../../../components/score-icon';
+import {Markdown} from '../../../components/markdown';
 import {TableDetails} from './table-details';
 import {NumericDiff} from '../audit-list/numeric-diff';
 import {getDiffLabel} from '@lhci/utils/src/audit-diff-finder';
@@ -54,8 +55,13 @@ export const AuditDetail = props => {
 
   return (
     <div id={`audit-detail-pane-audit--${audit.id}`} className={clsx('audit-detail-pane__audit')}>
+      <div className="audit-detail-pane__score">
+        <ScoreIcon score={audit.score || 0} />
+      </div>
       <div className="audit-detail-pane__audit-title">{audit.title}</div>
-      <div className="audit-detail-pane__audit-description">{audit.description}</div>
+      <div className="audit-detail-pane__audit-description">
+        <Markdown text={audit.description || ''} />
+      </div>
       <div className="audit-detail-pane__audit-details">
         <Details pair={props.pair} />
       </div>