src/welcome: re-work the welcome page
In advance of enabling gopls by default, update the welcome page to
re-style and remove links that are now redundant with other
documentation.
Specifically:
+ Eliminate reference lists, in favor of three canonical sources:
README.md, learn.go.dev, and docs/troubleshooting.md.
+ Re-style to have more of a hero page look (though being careful to
avoid any coloration or images that would clash with themes).
+ Update copy throughout.
+ Add a cute gopher for the announcement. I thought about adding more,
but I think it would be too much.
+ Added the version to the title.
+ Made things responsive (so they don't get crushed when the preview
panel is opened).
+ Some minor refactoring.
Change-Id: I3544eda91b7d16d7e99b8c85eaf7bb974644cf88
Reviewed-on: https://go-review.googlesource.com/c/vscode-go/+/285258
Run-TryBot: Robert Findley <rfindley@google.com>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>
Reviewed-by: Suzy Mueller <suzmue@golang.org>
Trust: Robert Findley <rfindley@google.com>
diff --git a/media/announce.png b/media/announce.png
new file mode 100644
index 0000000..60c45d0
--- /dev/null
+++ b/media/announce.png
Binary files differ
diff --git a/media/welcome.css b/media/welcome.css
index 857d9ed..d866448 100644
--- a/media/welcome.css
+++ b/media/welcome.css
@@ -3,25 +3,91 @@
* Licensed under the MIT License. See LICENSE in the project root for license information.
*--------------------------------------------------------*/
-.header {
+.Content {
+ max-width: 60rem;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ margin: auto;
+}
+
+.Header {
align-items: center;
display: flex;
+ border-bottom: 0.0625rem solid #ccc;
+ margin-bottom: 2rem;
+ padding-bottom: 1.25rem;
+}
+.Header-logo {
+ width: 12rem;
+ margin-right: 3rem;
+}
+.Header-title {
+ font-size: 1.75rem;
}
-.logo {
- width: 4rem;
+.Announcement {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ font-style: italic;
+ padding: 1rem;
+}
+.Announcement-image {
+ height: 2rem;
+ flex: 0;
+ margin-right: 1.5rem;
}
-.title {
- padding-left: 1rem;
-}
-
-.subtitle {
- align-items: baseline;
+.Cards {
display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+}
+.Card {
+ max-width: 40rem;
+ flex: 1;
+}
+.Card-inner {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ padding: 0rem;
+}
+.Card-title {
+ font-size: 1.5rem;
+ font-weight: 500;
+}
+.Card-content {
+ margin: 0;
}
-.release-notes {
- padding-left: 1rem;
+a:link,
+a:visited {
+ text-decoration: none;
+}
+.Command:hover,
+a:hover {
+ text-decoration: underline;
}
+@media (min-width: 40rem) {
+ .Header-links {
+ list-style: none;
+ padding: 0;
+ }
+ .Header-links li {
+ float: left;
+ }
+ .Header-links li:not(:first-child):before {
+ content: "|";
+ color: #ccc;
+ padding: 0 1rem;
+ }
+ .Cards {
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ .Card:not(:last-child) {
+ margin-right: 4rem;
+ }
+}
diff --git a/media/welcome.js b/media/welcome.js
index 8457bbe..54bd2be 100644
--- a/media/welcome.js
+++ b/media/welcome.js
@@ -8,15 +8,13 @@
(function () {
const vscode = acquireVsCodeApi();
- function showReleaseNotes() {
- vscode.postMessage({
- command: 'showReleaseNotes',
- });
- }
-
- document.querySelector(".release-notes").addEventListener('click', () => {
- showReleaseNotes();
- });
-
+ const commands = document.querySelectorAll('.Command');
+ for (let i = 0; i < commands.length; i++) {
+ const elem = commands[i];
+ const msg = JSON.parse(JSON.stringify(elem.dataset));
+ elem.addEventListener('click', () => {
+ vscode.postMessage(msg);
+ })
+ }
}());
diff --git a/src/welcome.ts b/src/welcome.ts
index 7b6fe8d..d41ac26 100644
--- a/src/welcome.ts
+++ b/src/welcome.ts
@@ -7,13 +7,14 @@
// https://github.com/microsoft/vscode-extension-samples/tree/master/webview-sample
import vscode = require('vscode');
+import { extensionId } from './const';
export class WelcomePanel {
public static currentPanel: WelcomePanel | undefined;
public static readonly viewType = 'welcomeGo';
- public static createOrShow(extensionUri: vscode.Uri) {
+ public static createOrShow(extensionUri: vscode.Uri, ) {
const column = vscode.window.activeTextEditor
? vscode.window.activeTextEditor.viewColumn
: undefined;
@@ -27,7 +28,7 @@
// Otherwise, create a new panel.
const panel = vscode.window.createWebviewPanel(
WelcomePanel.viewType,
- 'Go - Welcome',
+ 'Go for VS Code',
column || vscode.ViewColumn.One,
{
// Enable javascript in the webview
@@ -71,10 +72,13 @@
case 'alert':
vscode.window.showErrorMessage(message.text);
return;
- case 'showReleaseNotes':
- const uri = vscode.Uri.joinPath(this.extensionUri, 'CHANGELOG.md');
+ case 'openDocument':
+ const uri = vscode.Uri.joinPath(this.extensionUri, message.document);
vscode.commands.executeCommand('markdown.showPreviewToSide', uri);
return;
+ case 'openSetting':
+ vscode.commands.executeCommand('workbench.action.openSettings', message.setting);
+ return;
}
},
null,
@@ -106,73 +110,88 @@
const scriptPathOnDisk = vscode.Uri.joinPath(this.dataroot, 'welcome.js');
const stylePath = vscode.Uri.joinPath(this.dataroot, 'welcome.css');
const gopherPath = vscode.Uri.joinPath(this.dataroot, 'go-logo-blue.png');
+ const announcePath = vscode.Uri.joinPath(this.dataroot, 'announce.png');
+ const goExtension = vscode.extensions.getExtension(extensionId)!;
+ const goExtensionVersion = goExtension.packageJSON.version;
// Uri to load styles and images into webview
const scriptURI = webview.asWebviewUri(scriptPathOnDisk);
const stylesURI = webview.asWebviewUri(stylePath);
const gopherURI = webview.asWebviewUri(gopherPath);
+ const announceURI = webview.asWebviewUri(announcePath);
// Use a nonce to only allow specific scripts to be run
const nonce = getNonce();
+
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
-
<!--
Use a content security policy to only allow loading images from https or from our extension directory,
and only allow scripts that have a specific nonce.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<link href="${stylesURI}" rel="stylesheet">
-
- <title>Go - Welcome</title>
+ <title>Go for VS Code</title>
</head>
<body>
- <div class="header">
- <img src="${gopherURI}" alt="logo" class="logo"/>
- <h1 class="title">Go - Welcome</h1>
+ <main class="Content">
+ <div class="Header">
+ <img src="${gopherURI}" alt="Go Logo" class="Header-logo"/>
+ <div class="Header-details">
+ <h1 class="Header-title">Go for VS Code v${goExtensionVersion}</h1>
+ <p>The official Go extension for Visual Studio Code, providing rich language support for Go projects.</p>
+ <ul class="Header-links">
+ <!--
+ Here and elsewhere, we must use a fake anchor for command buttons, to get styling
+ consistent with links. We can't fake this using CSS, as it conflicts with theming.
+ -->
+ <li><a href="#" class="Command" data-command="openDocument" data-document="CHANGELOG.md">Release notes</a></li>
+ <li><a href="https://github.com/golang/vscode-go">GitHub</a></li>
+ <li><a href="https://gophers.slack.com/messages/vscode/">Slack</a></li>
+ </ul>
+ </div>
</div>
- <div class="subtitle">
- <p>Rich Go language support for Visual Studio Code</p>
- <!-- linking to a document does not actually work, but is used here to give it the appearance
- of a link -->
- <a class="release-notes" href="#">Release Notes</a>
+ <div class="Announcement">
+ <img src="${announceURI}" alt="announce" class="Announcement-image" />
+ <p>
+ Heads up! Gopls, the official Go language server, is now enabled in VS Code by default.
+ Gopls replaces several legacy tools to provide IDE features while editing Go code.
+ See <a href="https://github.com/golang/vscode-go/issues/1037">issue 1037</a> for more
+ information.
+ </p>
</div>
- <div>
- <h2>Latest Updates</h2>
- <p>📣 Announcement: We plan to enable the language server, gopls, by default early in 2021. (<a href="https://github.com/golang/vscode-go/issues/1037">Issue 1037</a>)</p>
- <p>Please test and provide us your feedback on the #vscode-dev <a href="https://gophers.slack.com/">Gophers Slack</a> channel.</p>
+ <div class="Cards">
+ <div class="Card">
+ <div class="Card-inner">
+ <p class="Card-title">Getting started</p>
+ <p class="Card-content">Learn about the Go extension in our
+ <a href="https://github.com/golang/vscode-go/blob/master/README.md">README</a>.
+ </p>
+ </div>
+ </div>
+
+ <div class="Card">
+ <div class="Card-inner">
+ <p class="Card-title">Learning Go</p>
+ <p class="Card-content">If you're new to the Go programming language,
+ <a href="https://learn.go.dev">learn.go.dev</a> is a great place to get started.</a>
+ </p>
+ </div>
+ </div>
+
+ <div class="Card">
+ <div class="Card-inner">
+ <p class="Card-title">Troubleshooting</p>
+ <p class="Card-content">Experiencing problems? Start with our
+ <a href="https://github.com/golang/vscode-go/blob/master/docs/troubleshooting.md">troubleshooting guide</a>. </p> </div>
+ </div>
</div>
-
- <div>
- <h2>External Resources</h2>
-
- <h3>Documentation</h3>
- <ul>
- <li>Details about the <a href="https://github.com/golang/vscode-go#features">features</a> provided by extension</li>
- <li>Configure the extension with <a href="https://github.com/golang/vscode-go/blob/master/docs/settings.md">settings</a></li>
- <li>Full list of the <a href="https://github.com/golang/vscode-go/blob/master/docs/commands.md#detailed-list">commands</a> provided by the Go extension</li>
- <li><a href="https://github.com/golang/vscode-go/blob/master/docs/debugging.md">Debugging</a></li>
- </ul>
-
- <h3>Go Tutorials</h3>
- <ul>
- <!-- TODO: link a tutorial for setting up and using Go Modules in vscode -->
- <li>Learn about <a href="https://blog.golang.org/using-go-modules">Go Modules</a></li>
- <li>Find tutorials for using Go at <a href="https://learn.go.dev/">learn.go.dev</a></li>
- <li>Get started with <a href="https://github.com/golang/vscode-go/blob/master/docs/debugging.md#set-up">debugging</a> in vscode with the Go extension</li>
- </ul>
-
- <h3>Outstanding Issues</h3>
-
- All of the issues can be found on the <a href="https://github.com/golang/vscode-go/issues">issue tracker</a>. For issues that will be addressed in the next release, check out the <a href="https://github.com/golang/vscode-go/milestones">milestone</a> page.
- <div>
+ </main>
<script nonce="${nonce}" src="${scriptURI}"></script>
</body>
