Skip to content

Commit 9077a58

Browse files
paul-soporanHaroenvarcanis
authored
docs: add update notices (#1108)
* docs: show migration banner * docs: add migrate button * docs: update installation page * docs: improve self-update docs * docs: add upgrade notice to installation page * Update _data/i18n/en.yml Co-authored-by: Haroen Viaene <[email protected]> * Update _includes/version-with-upgrade-notice.html Co-authored-by: Maël Nison <[email protected]> Co-authored-by: Haroen Viaene <[email protected]> Co-authored-by: Maël Nison <[email protected]>
1 parent 8473cce commit 9077a58

File tree

14 files changed

+189
-110
lines changed

14 files changed

+189
-110
lines changed

‎_data/i18n/en.yml

+13-12
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@
55
site_title: Yarn
66
site_description: Fast, reliable, and secure dependency management.
77

8+
site_news_important: Important
9+
site_news_docs_cover_v1: This documentation covers Yarn 1 (Classic).
10+
site_news_see_v2_docs: For Yarn 2+ docs and migration guide, see yarnpkg.com.
11+
812
site_nav_getting_started: Getting Started
913
site_nav_documentation: Docs
1014
site_nav_packages: Packages
1115
site_nav_blog: Blog
12-
site_nav_stable_version: Stable
13-
site_nav_rc_version: Release Candidate
14-
site_nav_nightly_version: Nightly
16+
site_nav_stable_version: Classic Stable
17+
site_nav_rc_version: Classic Release Candidate
18+
site_nav_nightly_version: Classic Nightly
1519
site_nav_node_support: Node
1620

1721
site_bsd_license: Distributed under BSD License
@@ -53,6 +57,7 @@ homepage_feature_reliable_image_alt: Watercolour of cat waving from seat behind
5357
homepage_c2a_text: What are you waiting for?
5458
homepage_c2a_button: Get Started
5559
homepage_install_button: Install Yarn
60+
homepage_migrate_button: Migrate to Yarn 2+
5661

5762
homepage_featurette_offline_title: Offline Mode
5863
homepage_featurette_offline_description: |
@@ -262,7 +267,9 @@ users_add_requirements_logo: >
262267
263268
install_intro: >
264269
Before you start using Yarn, you'll first need to install it on your system.
265-
There are a growing number of different ways to install Yarn:
270+
There are many different ways to install Yarn, but a single one is recommended and cross-platform:
271+
install_alternatives: Alternatives
272+
install_click_to_expand_collapse: Click to expand / collapse
266273
install_select_platform: Select your platform above
267274
install_os: Operating system
268275
install_version: Version
@@ -277,14 +284,8 @@ install_os_solus: Solus
277284
install_os_windows: Windows
278285
install_os_alternatives: Alternatives
279286

280-
install_test: "Test that Yarn is installed by running:"
281-
282-
install_problems_title: Problems?
283-
install_problems_description: >
284-
If you are unable to install Yarn with any of these installers, please search
285-
through GitHub for an existing issue or open a new one.
286-
install_problems_search: Search for an existing issue
287-
install_problems_new_issue: Open a new issue
287+
install_check: "Check installation"
288+
install_check_details: "Check that Yarn is installed by running:"
288289

289290
docs_nightly: Nightly Builds
290291
install_nightly_intro: >

‎_includes/news.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{% include vars.html %}
2+
3+
<div class="news-container">
4+
<a class="news-overlay" href="https://yarnpkg.com/getting-started/migration"></a>
5+
6+
<div class="news-inner">
7+
<div class="news-line">
8+
<span class="news-highlight">{{i18n.site_news_important}}:</span> {{i18n.site_news_docs_cover_v1}}
9+
</div>
10+
<div class="news-line">
11+
{{i18n.site_news_see_v2_docs}}
12+
</div>
13+
</div>
14+
</div>

‎_includes/version-with-upgrade-notice.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="alert alert-warning news-container-alert mt-4">
2+
<a class="news-overlay" href="https://yarnpkg.com/getting-started/migration#why-should-you-migrate"></a>
3+
<div class="news-inner">
4+
<div>
5+
These instructions only cover Yarn versions prior to 2.0. Those versions entered <a href="https://en.wikipedia.org/wiki/Maintenance_mode">maintenance mode</a> in January 2020 and will eventually reach their end-of-life in terms of support. Please see the main website for the most up-to-date documentation: <a href="https://yarnpkg.com/getting-started/migration#why-should-you-migrate">yarnpkg.com/getting-started/migration</a>.
6+
</div>
7+
<div style="margin-top: 15px">
8+
The latest Yarn version is: <img alt="Latest CLI Release" src="https://img.shields.io/npm/v/@yarnpkg/cli/latest?label=latest">
9+
</div>
10+
</div>
11+
</div>
12+
13+
{% include version.html %}

‎_includes/version.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
{% endif %}
1818
</div>
1919
<div>
20-
{{i18n.site_nav_node_support}}:
20+
{{i18n.site_nav_node_support}}:
2121
<strong>
2222
{{site.node_support}}
2323
</strong>

‎_layouts/default.html

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
{% include debug/url.html url=page.url %}
3434
{% include debug/todo.html content=page.content %}
3535

36+
{% include news.html %}
3637
{% include navigation.html %}
3738
<div id="search">
3839
<!-- Here to avoid flash of unstyled content on page load -->

‎_layouts/page.html

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<div class="hero">
88
<div class="container">
99
<h1 class="hero-text display-4">{{i18n[page.id]}}</h1>
10+
1011
{% if layout.hero_subtext %}
1112
{% include {{ layout.hero_subtext }} %}
1213
{% elsif page.hero_subtext %}

‎_layouts/pages/homepage.html

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ <h1 class="hero-title">
1414
<div>
1515
<a class="btn hero-btn hidden-md-down" href="{{url_base}}/docs/getting-started">{{i18n.homepage_c2a_button}}</a>
1616
<a class="btn hero-btn hidden-md-down" href="{{url_base}}/docs/install">{{i18n.homepage_install_button}}</a>
17+
<a class="btn hero-btn hidden-md-down" href="https://yarnpkg.com/getting-started/migration">{{i18n.homepage_migrate_button}}</a>
1718

1819
<span class="hero-ghbtn">
1920
<iframe src="https://ghbtns.com/github-btn.html?user=yarnpkg&repo=yarn&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px" title="{{i18n.iframe_github_stars}}"></iframe>

‎_layouts/pages/install.html

+49-62
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: guide
3-
hero_subtext: version.html
3+
hero_subtext: version-with-upgrade-notice.html
44
scripts:
55
- "/js/build/install.js"
66
operating_systems:
@@ -19,48 +19,61 @@
1919

2020
{{i18n.install_intro}}
2121

22-
<div class="install-select-os">
23-
<div class="form-group row">
24-
<label for="os" class="col-3 col-form-label">{{i18n.install_os}}:</label>
25-
<div class="col-6">
26-
<select id="os" class="form-control">
27-
{% for os in layout.operating_systems %}
28-
{% capture os_i18n %}install_os_{{os}}{% endcapture %}
29-
<option value="{{os}}">{{i18n[os_i18n]}}</option>
30-
{% endfor %}
31-
</select>
22+
{% capture npm_info %}{% include_relative _installations/npm.md %}{% endcapture %}
23+
{{npm_info | markdownify}}
24+
25+
<h2>{{i18n.install_alternatives}}</h2>
26+
27+
<details>
28+
<summary>{{i18n.install_click_to_expand_collapse}}</summary>
29+
30+
<br />
31+
32+
<div class="install-select-os">
33+
<div class="form-group row">
34+
<label for="os" class="col-3 col-form-label">{{i18n.install_os}}:</label>
35+
<div class="col-6">
36+
<select id="os" class="form-control">
37+
{% for os in layout.operating_systems %}
38+
{% capture os_i18n %}install_os_{{os}}{% endcapture %}
39+
<option value="{{os}}">{{i18n[os_i18n]}}</option>
40+
{% endfor %}
41+
</select>
42+
</div>
3243
</div>
33-
</div>
3444

35-
<div class="form-group row">
36-
<label for="version" class="col-3 col-form-label">{{i18n.install_version}}:</label>
37-
<div class="col-6">
38-
<select id="version" class="form-control">
39-
<option value="stable">{{i18n.site_nav_stable_version}} ({{site.latest_version}})</option>
40-
<option value="rc">{{i18n.site_nav_rc_version}} ({{site.latest_rc_version}})</option>
41-
<option id="nightly-version" value="nightly">{{i18n.site_nav_nightly_version}}</option>
42-
</select>
45+
<div class="form-group row">
46+
<label for="version" class="col-3 col-form-label">{{i18n.install_version}}:</label>
47+
<div class="col-6">
48+
<select id="version" class="form-control">
49+
<option value="stable">{{i18n.site_nav_stable_version}} ({{site.latest_version}})</option>
50+
<option value="rc">{{i18n.site_nav_rc_version}} ({{site.latest_rc_version}})</option>
51+
<option id="nightly-version" value="nightly">{{i18n.site_nav_nightly_version}}</option>
52+
</select>
53+
</div>
4354
</div>
4455
</div>
45-
</div>
4656

47-
<div id="install-instructions">
48-
<div class="install-os-instructions">Loading...</div>
49-
{% for os in layout.operating_systems %}
50-
<div id="{{os}}" class="install-os-instructions" style="display: none">
51-
{% capture os_i18n %}install_os_{{os}}{% endcapture %}
52-
<h3>{{i18n[os_i18n]}}</h3>
53-
{% capture exists %}{% file_exists _installations/{{os}}.md %}{% endcapture %}
54-
{% if exists == "true" %}
55-
{% capture info %}{% include_relative _installations/{{os}}.md %}{% endcapture %}
56-
{{info | markdownify}}
57-
{% endif %}
58-
</div>
59-
{% endfor %}
60-
</div>
57+
<div id="install-instructions">
58+
<div class="install-os-instructions">Loading...</div>
59+
{% for os in layout.operating_systems %}
60+
<div id="{{os}}" class="install-os-instructions" style="display: none">
61+
{% capture os_i18n %}install_os_{{os}}{% endcapture %}
62+
<h3>{{i18n[os_i18n]}}</h3>
63+
{% capture exists %}{% file_exists _installations/{{os}}.md %}{% endcapture %}
64+
{% if exists == "true" %}
65+
{% capture info %}{% include_relative _installations/{{os}}.md %}{% endcapture %}
66+
{{info | markdownify}}
67+
{% endif %}
68+
</div>
69+
{% endfor %}
70+
</div>
71+
</details>
72+
73+
<h2>{{i18n.install_check}}</h2>
6174

6275
<p>
63-
{{i18n.install_test}}
76+
{{i18n.install_check_details}}
6477
</p>
6578

6679
{% highlight sh %}
@@ -69,29 +82,3 @@ <h3>{{i18n[os_i18n]}}</h3>
6982
<div class="language-sh highlighter-rouge">
7083
<pre class="rougeHighlight"><code>yarn --version</code></pre>
7184
</div>
72-
73-
{% capture issueBody %}
74-
**Which operating system are you using:**
75-
76-
77-
**Please describe the steps you took when trying to install Yarn and what went wrong:**
78-
79-
{% endcapture %}
80-
{% assign issueBodyEscaped = issueBody | uri_escape %}
81-
82-
{% assign searchHref = "https://github.com/yarnpkg/yarn/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20%22Installation%20Problem%22%20in%3Atitle%20" %}
83-
{% assign newIssueHref = "https://github.com/yarnpkg/yarn/issues/new?title=Installation%20Problem:%20[title]&body=" | append: issueBodyEscaped %}
84-
85-
<hr class="my-4">
86-
87-
<blockquote>
88-
<p>
89-
<strong>{{i18n.install_problems_title}}</strong>
90-
{{i18n.install_problems_description}}
91-
</p>
92-
<p>
93-
<a class="text-success" href="{{searchHref}}">{{i18n.install_problems_search}}</a>
94-
&middot;
95-
<a class="text-danger" href="{{newIssueHref}}">{{i18n.install_problems_new_issue}}</a>
96-
</p>
97-
</blockquote>

‎_sass/_news.scss

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.news-container {
2+
position: relative;
3+
4+
height: 40px;
5+
6+
padding: 0 1em;
7+
8+
text-decoration: none;
9+
line-height: 40px;
10+
11+
margin: auto;
12+
13+
@media (max-width: 760px) {
14+
height: auto;
15+
line-height: 30px;
16+
17+
text-align: center;
18+
}
19+
20+
background: #2188b6;
21+
color: rgba(255, 255, 255, 0.8);
22+
}
23+
24+
.news-container-alert {
25+
position: relative;
26+
27+
height: auto;
28+
29+
text-decoration: none;
30+
31+
margin: auto;
32+
}
33+
34+
.news-overlay {
35+
position: absolute;
36+
37+
left: 0;
38+
top: 0;
39+
bottom: 0;
40+
right: 0;
41+
}
42+
43+
.news-inner {
44+
position: relative;
45+
z-index: 1;
46+
47+
pointer-events: none;
48+
49+
a {
50+
display: inline-block;
51+
52+
pointer-events: all;
53+
54+
color: inherit;
55+
56+
&:hover {
57+
color: #ffffff;
58+
}
59+
60+
.alert & {
61+
color: $link-color;
62+
63+
&:hover {
64+
color: $link-color-hover;
65+
}
66+
}
67+
}
68+
}
69+
70+
.news-line {
71+
display: inline-block;
72+
}
73+
74+
.news-highlight {
75+
font-weight: bold;
76+
77+
color: #ffffff;
78+
}

‎css/main.scss

+2
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,13 @@ $brand-primary: $yarn-blue;
2121
$progress-bar-color: $brand-primary;
2222

2323
$link-color: saturate(darken($brand-primary, 8%), 20%);
24+
$link-color-hover: saturate(darken($brand-primary, 30%), 20%);
2425

2526
$npm-red: #c12127;
2627

2728
@import 'bootstrap/scss/bootstrap.scss';
2829
@import '_base.scss';
30+
@import '_news.scss';
2931
@import '_navbar.scss';
3032
@import '_icons.scss';
3133
@import '_heros.scss';

‎js/src/install.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ function getNightlyVersionNumber() {
5353
.then(res => res.text())
5454
.then(version => {
5555
document.getElementById('nightly-version').innerText =
56-
'Nightly (' + version + ')';
56+
'Classic Nightly (' + version + ')';
5757
});
5858
}
5959

‎lang/en/docs/_installations/alternatives.md

-32
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,6 @@ recommended to install Yarn via our packages instead.
88
<!-- prettier-ignore -->
99
{% include_relative _installations/tarball.md %}
1010

11-
#### Install via npm
12-
13-
<div class="install-only-stable install-only-rc" markdown="1">
14-
> **Note:** Installation of Yarn via npm is generally not recommended.
15-
> When installing Yarn with Node-based package managers, the package is not signed,
16-
> and the only integrity check performed is a basic SHA1 hash, which is a
17-
> security risk when installing system-wide apps.
18-
>
19-
> For these reasons, it is highly recommended that you install Yarn through the
20-
> installation method best suited to your operating system.
21-
22-
You can also install Yarn through the [npm package manager](http://npmjs.org/)
23-
if you already have it installed. If you already have
24-
[Node.js](https://nodejs.org/) installed then you should already have npm.
25-
26-
Once you have npm installed you can run:
27-
28-
<div class="install-only-stable" markdown="1">
29-
```sh
30-
npm install --global yarn
31-
```
32-
</div>
33-
<div class="install-only-rc" markdown="1">
34-
```sh
35-
npm install --global yarn@rc
36-
```
37-
</div>
38-
</div>
39-
<div class="install-only-nightly" markdown="1">
40-
Nightly builds of Yarn are not available via npm.
41-
</div>
42-
4311
### Path Setup
4412

4513
#### Unix/Linux/macOS

0 commit comments

Comments
 (0)