Improve getting started Coder CTA (#5752)

* Improve getting started Coder CTA

This wasn't very standout-ish before, and I think it's
wise for us to experiment with directing users to Coder.

* Update nix flake

* Update diff

* Add advert to code-server install

* Fix patch to reset columns if getting started is disabled

* Update text for advert
This commit is contained in:
Kyle Carberry 2022-11-07 10:06:51 -08:00 committed by GitHub
parent ff8ea36b27
commit 77c3cd3aa1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 113 additions and 31 deletions

View File

@ -12,13 +12,13 @@
in { in {
devShells.default = pkgs.mkShell { devShells.default = pkgs.mkShell {
nativeBuildInputs = with pkgs; [ nativeBuildInputs = with pkgs; [
nodejs yarn' python pkg-config git rsync jq moreutils nodejs yarn' python pkg-config git rsync jq moreutils quilt bats
]; ];
buildInputs = with pkgs; (lib.optionals (!stdenv.isDarwin) [ libsecret ] buildInputs = with pkgs; (lib.optionals (!stdenv.isDarwin) [ libsecret ]
++ (with xorg; [ libX11 libxkbfile ]) ++ (with xorg; [ libX11 libxkbfile ])
++ lib.optionals stdenv.isDarwin [ ++ lib.optionals stdenv.isDarwin (with pkgs.darwin.apple_sdk.frameworks; [
AppKit Cocoa CoreServices Security cctools xcbuild AppKit Cocoa CoreServices Security xcbuild
]); ]));
}; };
} }
); );

View File

@ -131,6 +131,11 @@ Or, if you don't want/need a background service you can run:
EOF EOF
} }
echo_coder_postinstall() {
echoh
echoh "Deploy code-server for your team with Coder: https://github.com/coder/coder"
}
main() { main() {
if [ "${TRACE-}" ]; then if [ "${TRACE-}" ]; then
set -x set -x
@ -243,6 +248,7 @@ main() {
if [ "$METHOD" = standalone ]; then if [ "$METHOD" = standalone ]; then
if has_standalone; then if has_standalone; then
install_standalone install_standalone
echo_coder_postinstall
exit 0 exit 0
else else
echoerr "There are no standalone releases for $ARCH" echoerr "There are no standalone releases for $ARCH"
@ -286,6 +292,8 @@ main() {
npm_fallback install_standalone npm_fallback install_standalone
;; ;;
esac esac
echo_coder_postinstall
} }
parse_arg() { parse_arg() {

View File

@ -10,7 +10,7 @@ Index: code-server/lib/vscode/src/vs/workbench/contrib/welcomeGettingStarted/bro
=================================================================== ===================================================================
--- code-server.orig/lib/vscode/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts --- code-server.orig/lib/vscode/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts
+++ code-server/lib/vscode/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts +++ code-server/lib/vscode/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts
@@ -62,7 +62,7 @@ import { GettingStartedIndexList } from @@ -62,7 +62,7 @@ import { GettingStartedIndexList } from
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes'; import { KeyCode } from 'vs/base/common/keyCodes';
import { getTelemetryLevel } from 'vs/platform/telemetry/common/telemetryUtils'; import { getTelemetryLevel } from 'vs/platform/telemetry/common/telemetryUtils';
@ -19,32 +19,106 @@ Index: code-server/lib/vscode/src/vs/workbench/contrib/welcomeGettingStarted/bro
import { OpenFolderViaWorkspaceAction } from 'vs/workbench/browser/actions/workspaceActions'; import { OpenFolderViaWorkspaceAction } from 'vs/workbench/browser/actions/workspaceActions';
import { OpenRecentAction } from 'vs/workbench/browser/actions/windowActions'; import { OpenRecentAction } from 'vs/workbench/browser/actions/windowActions';
import { Toggle } from 'vs/base/browser/ui/toggle/toggle'; import { Toggle } from 'vs/base/browser/ui/toggle/toggle';
@@ -753,11 +753,24 @@ export class GettingStartedPage extends @@ -758,6 +758,72 @@ export class GettingStartedPage extends
onShowOnStartupChanged();
}));
- const header = $('.header', {},
+ let header = $('.header', {},
$('h1.product-name.caption', {}, this.productService.nameLong),
$('p.subtitle.description', {}, localize({ key: 'gettingStarted.editingEvolved', comment: ['Shown as subtitle on the Welcome page.'] }, "Editing evolved")) $('p.subtitle.description', {}, localize({ key: 'gettingStarted.editingEvolved', comment: ['Shown as subtitle on the Welcome page.'] }, "Editing evolved"))
); );
+ let gettingStartedCoder: HTMLElement = $('.header', {});
+ if (this.contextService.contextMatchesRules(IsEnabledCoderGettingStarted)) { + if (this.contextService.contextMatchesRules(IsEnabledCoderGettingStarted)) {
+ header = $('.header', {}, + gettingStartedCoder = $('.gettingStartedCategory', {},
+ $('h1.product-name.caption', {}, this.productService.nameLong), + $('h2', {
+ $('p.subtitle.description.coder', {}, + style: 'margin-bottom: 12px',
+ "Using code-server on a team?", + }, 'Next Up'),
+ ), + $('a', {
+ $('p.subtitle.description.coder-coder', {}, + href: 'https://cdr.co/code-server-to-coder',
+ "Check out: ", + target: '_blank',
+ $('a', { href: "https://github.com/coder/coder" }, "coder/coder") + },
+ ), + $('button', {
+ ); + style: [
+ 'padding: 10px 16px ',
+ 'border-radius: 4px',
+ 'background: linear-gradient(94.04deg, #7934DA 0%, #4D52E0 101.2%)',
+ 'color: white',
+ 'overflow: hidden',
+ 'margin-right: 14px',
+ ].join(';'),
+ },
+ $('h3', {
+ style: [
+ 'margin: 0px 0px 6px',
+ 'font-weight: 500',
+ ].join(';'),
+ }, 'Deploy code-server for your team'),
+ $('p', {
+ style: [
+ 'margin: 0',
+ 'font-size: 13px',
+ 'color: #dcdee2',
+ ].join(';'),
+ }, 'Provision remote development environments on your infrastructure with Coder.'),
+ $('p', {
+ style: [
+ 'margin-top: 8px',
+ 'font-size: 13px',
+ 'color: #dcdee2',
+ ].join(';'),
+ }, 'Coder is a self-service portal which provisions via Terraform—Linux, macOS, Windows, x86, ARM, and, of course, Kubernetes based infrastructure.'),
+ $('p', {
+ style: [
+ 'margin: 0',
+ 'margin-top: 8px',
+ 'font-size: 13px',
+ 'display: flex',
+ 'align-items: center',
+ ].join(';'),
+ }, 'Get started ', $('span', {
+ class: Codicon.arrowRight.classNames,
+ style: [
+ 'color: white',
+ 'margin-left: 8px',
+ ].join(';'),
+ })),
+ $('img', {
+ src: './_static/src/browser/media/templates.png',
+ style: [
+ 'margin-bottom: -65px',
+ ].join(';'),
+ }),
+ ),
+ ),
+ );
+ } + }
+ +
const leftColumn = $('.categories-column.categories-column-left', {},); const leftColumn = $('.categories-column.categories-column-left', {},);
const rightColumn = $('.categories-column.categories-column-right', {},); const rightColumn = $('.categories-column.categories-column-right', {},);
@@ -775,13 +841,23 @@ export class GettingStartedPage extends
const layoutLists = () => {
if (gettingStartedList.itemCount) {
this.container.classList.remove('noWalkthroughs');
- reset(leftColumn, startList.getDomElement(), recentList.getDomElement());
- reset(rightColumn, gettingStartedList.getDomElement());
+ if (this.contextService.contextMatchesRules(IsEnabledCoderGettingStarted)) {
+ reset(leftColumn, startList.getDomElement(), recentList.getDomElement(), gettingStartedList.getDomElement());
+ reset(rightColumn, gettingStartedCoder);
+ } else {
+ reset(leftColumn, startList.getDomElement(), recentList.getDomElement());
+ reset(rightColumn, gettingStartedList.getDomElement());
+ }
+
recentList.setLimit(5);
}
else {
this.container.classList.add('noWalkthroughs');
- reset(leftColumn, startList.getDomElement());
+ if (this.contextService.contextMatchesRules(IsEnabledCoderGettingStarted)) {
+ reset(leftColumn, startList.getDomElement(), gettingStartedCoder);
+ } else {
+ reset(leftColumn, startList.getDomElement());
+ }
reset(rightColumn, recentList.getDomElement());
recentList.setLimit(10);
}
Index: code-server/lib/vscode/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css Index: code-server/lib/vscode/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css
=================================================================== ===================================================================
--- code-server.orig/lib/vscode/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css --- code-server.orig/lib/vscode/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

View File

@ -11,14 +11,14 @@ function should-use-deb() {
DISTRO=$1 ARCH=$2 OS=linux run "$SCRIPT" --dry-run DISTRO=$1 ARCH=$2 OS=linux run "$SCRIPT" --dry-run
[ "$status" -eq 0 ] [ "$status" -eq 0 ]
[ "${lines[1]}" = "Installing v$VERSION of the $2 deb package from GitHub." ] [ "${lines[1]}" = "Installing v$VERSION of the $2 deb package from GitHub." ]
[ "${lines[-5]}" = "deb package has been installed." ] [ "${lines[-6]}" = "deb package has been installed." ]
} }
function should-use-rpm() { function should-use-rpm() {
DISTRO=$1 ARCH=$2 OS=linux run "$SCRIPT" --dry-run DISTRO=$1 ARCH=$2 OS=linux run "$SCRIPT" --dry-run
[ "$status" -eq 0 ] [ "$status" -eq 0 ]
[ "${lines[1]}" = "Installing v$VERSION of the $2 rpm package from GitHub." ] [ "${lines[1]}" = "Installing v$VERSION of the $2 rpm package from GitHub." ]
[ "${lines[-5]}" = "rpm package has been installed." ] [ "${lines[-6]}" = "rpm package has been installed." ]
} }
function should-fallback-npm() { function should-fallback-npm() {
@ -27,21 +27,21 @@ function should-fallback-npm() {
[ "${lines[1]}" = "No standalone releases for $2." ] [ "${lines[1]}" = "No standalone releases for $2." ]
[ "${lines[2]}" = "Falling back to installation from npm." ] [ "${lines[2]}" = "Falling back to installation from npm." ]
[ "${lines[3]}" = "Installing latest from npm." ] [ "${lines[3]}" = "Installing latest from npm." ]
[ "${lines[-5]}" = "npm package has been installed." ] [ "${lines[-6]}" = "npm package has been installed." ]
} }
function should-use-npm() { function should-use-npm() {
YARN_PATH=true DISTRO=$1 ARCH=$2 OS=linux run "$SCRIPT" --dry-run YARN_PATH=true DISTRO=$1 ARCH=$2 OS=linux run "$SCRIPT" --dry-run
[ "$status" -eq 0 ] [ "$status" -eq 0 ]
[ "${lines[1]}" = "Installing latest from npm." ] [ "${lines[1]}" = "Installing latest from npm." ]
[ "${lines[-5]}" = "npm package has been installed." ] [ "${lines[-6]}" = "npm package has been installed." ]
} }
function should-use-aur() { function should-use-aur() {
DISTRO=$1 ARCH=$2 OS=linux run "$SCRIPT" --dry-run DISTRO=$1 ARCH=$2 OS=linux run "$SCRIPT" --dry-run
[ "$status" -eq 0 ] [ "$status" -eq 0 ]
[ "${lines[1]}" = "Installing latest from the AUR." ] [ "${lines[1]}" = "Installing latest from the AUR." ]
[ "${lines[-5]}" = "AUR package has been installed." ] [ "${lines[-6]}" = "AUR package has been installed." ]
} }
function should-fallback-npm-brew() { function should-fallback-npm-brew() {
@ -52,21 +52,21 @@ function should-fallback-npm-brew() {
[ "${lines[3]}" = "No standalone releases for $1." ] [ "${lines[3]}" = "No standalone releases for $1." ]
[ "${lines[4]}" = "Falling back to installation from npm." ] [ "${lines[4]}" = "Falling back to installation from npm." ]
[ "${lines[5]}" = "Installing latest from npm." ] [ "${lines[5]}" = "Installing latest from npm." ]
[ "${lines[-5]}" = "npm package has been installed." ] [ "${lines[-6]}" = "npm package has been installed." ]
} }
function should-use-brew() { function should-use-brew() {
BREW_PATH=true OS=macos ARCH=$1 run "$SCRIPT" --dry-run BREW_PATH=true OS=macos ARCH=$1 run "$SCRIPT" --dry-run
[ "$status" -eq 0 ] [ "$status" -eq 0 ]
[ "${lines[1]}" = "Installing latest from Homebrew." ] [ "${lines[1]}" = "Installing latest from Homebrew." ]
[ "${lines[-3]}" = "Brew release has been installed." ] [ "${lines[-4]}" = "Brew release has been installed." ]
} }
function should-use-standalone() { function should-use-standalone() {
DISTRO=$1 ARCH=$2 OS=$3 run "$SCRIPT" --method standalone --dry-run DISTRO=$1 ARCH=$2 OS=$3 run "$SCRIPT" --method standalone --dry-run
[ "$status" -eq 0 ] [ "$status" -eq 0 ]
[ "${lines[1]}" = "Installing v$VERSION of the $2 release from GitHub." ] [ "${lines[1]}" = "Installing v$VERSION of the $2 release from GitHub." ]
[[ "${lines[-5]}" = "Standalone release has been installed"* ]] [[ "${lines[-6]}" = "Standalone release has been installed"* ]]
} }
@test "$SCRIPT_NAME: usage with --help" { @test "$SCRIPT_NAME: usage with --help" {
@ -141,7 +141,7 @@ function should-use-standalone() {
[ "${lines[1]}" = "Homebrew not installed." ] [ "${lines[1]}" = "Homebrew not installed." ]
[ "${lines[2]}" = "Falling back to standalone installation." ] [ "${lines[2]}" = "Falling back to standalone installation." ]
[ "${lines[3]}" = "Installing v$VERSION of the amd64 release from GitHub." ] [ "${lines[3]}" = "Installing v$VERSION of the amd64 release from GitHub." ]
[[ "${lines[-5]}" = "Standalone release has been installed"* ]] [[ "${lines[-6]}" = "Standalone release has been installed"* ]]
} }
@test "$SCRIPT_NAME: macos i386 (no brew)" { @test "$SCRIPT_NAME: macos i386 (no brew)" {
should-fallback-npm-brew "i386" should-fallback-npm-brew "i386"