Enhance release notes page

ivankravets · ivankravets · commit cf8072f8ddf6 · 2022-12-27T13:26:36.000+02:00
diff --git a/src/release-notes.js b/src/release-notes.js
@@ -49,7 +49,7 @@ export default class PIOReleaseNotes {
     this._currentPanel = await this.newPanel();
   }
 
-  async newPanel(startUrl) {
+  async newPanel() {
     const panel = vscode.window.createWebviewPanel(
       'pioReleaseNotes',
       'PlatformIO IDE: Release Notes',
@@ -59,16 +59,34 @@ export default class PIOReleaseNotes {
         retainContextWhenHidden: true,
       }
     );
+    panel.iconPath = vscode.Uri.file(
+      path.join(
+        extension.context.extensionPath,
+        'assets',
+        'images',
+        'platformio-mini-logo.svg'
+      )
+    );
     panel.onDidDispose(
       () => (this._currentPanel = undefined),
       undefined,
       this.subscriptions
     );
-    panel.webview.html = await this.getWebviewContent(startUrl);
+    const logoSrc = panel.webview.asWebviewUri(
+      vscode.Uri.file(
+        path.join(
+          extension.context.extensionPath,
+          'assets',
+          'images',
+          'platformio-logo.png'
+        )
+      )
+    );
+    panel.webview.html = await this.getWebviewContent(logoSrc);
     return panel;
   }
 
-  async getWebviewContent() {
+  async getWebviewContent(logoSrc) {
     const releaseNotes = await this.readReleaseNotes();
     return `
 <!DOCTYPE html>
@@ -77,28 +95,36 @@ export default class PIOReleaseNotes {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>PlatformIO IDE: Release Notes</title>
+  <style>ul { padding-top: 5px; } li { padding-bottom: 4px; }</style>
 </head>
 <body>
-  <div id="content">Loading...</div>
-  <textarea id="pioRNMarkdown" hidden="hidden">
-# PlatformIO IDE Release Notes
-
-Welcome to the ${this.version} release of PlatformIO IDE.
-There are many updates in this version that we hope you'll like.
-
-**PlatformIO Core**: If you would like to read the PlatformIO Core release notes, go to the [Release Notes](https://docs.platformio.org/en/latest/core/history.html) on [docs.platformio.org](https://docs.platformio.org/).
-
-${releaseNotes}
-
-## Stay in touch with us
-
-Please follow us on [LinkedIn](https://www.linkedin.com/company/platformio) and Twitter [@PlatformIO_Org](https://twitter.com/PlatformIO_Org) to keep up to date with the latest news, articles and tips!
-
------
-
-**Release History**: Want to read release notes for the previous versions? Please visit [PlatformIO IDE Changelog](https://github.com/platformio/platformio-vscode-ide/blob/develop/CHANGELOG.md) for more detailed information.
-
-  </textarea>
+  <table border="0">
+  <tr>
+    <td><img src="${logoSrc}" width="28px" height="28px"></td>
+    <td style="padding-left: 10px"><h1>PlatformIO IDE Release Notes</h1></td>
+  </tr>
+  </table>
+  <div>
+    Welcome to the ${this.version} release of PlatformIO IDE.
+    There are many updates in this version that we hope you'll like.
+  </div>
+  <p>
+    <b>Release History</b>: Want to read release notes for the previous versions?
+    Please visit <a href="https://github.com/platformio/platformio-vscode-ide/blob/develop/CHANGELOG.md">PlatformIO IDE Changelog</a>
+    for more detailed information.
+  </p>
+  <p id="content">Loading...</p>
+  <h2>Stay in touch with us</h2>
+  <p>
+    Please follow us on <a href="https://www.linkedin.com/company/platformio">LinkedIn</a> and Twitter <a href="https://twitter.com/PlatformIO_Org">@PlatformIO_Org]</a>
+    to keep up to date with the latest news, articles and tips!
+  </p>
+  <hr />
+  <p>
+    <b>PlatformIO Core</b>: If you would like to read the PlatformIO Core release notes,
+    go to the <a href="https://docs.platformio.org/en/latest/core/history.html">Release Notes</a> on <a href="https://docs.platformio.org/">docs.platformio.org</a>).
+  </p>
+  <textarea id="pioRNMarkdown" hidden="hidden">${releaseNotes}</textarea>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script>
     document.getElementById('content').innerHTML =
