Skip to content

Fix Quick Start diff description and restore +/- markers (#2090) #2231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
olenderhub wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix Quick Start diff description and restore +/- markers (#2090) #2231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 22 additions & 27 deletions app/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,40 +113,35 @@ code {
z-index: 10;
}

/* Fix diff formatting */
/*
Diff formatting for Shiki (ember-showdown-shiki).
Show +/- beside line numbers so diffs are not color-only (#2090).
Colors match .shiki .line.add / .line.remove in ember-showdown-shiki.

code[data-diff] .diff-deletion {
background-color: rgb(144 84 84 / 70%);
Use a fixed-width gutter for every line in a diff block so code stays
aligned whether the line is added, removed, or unchanged.
*/
pre.has-diff code.line-numbers .line::before {
width: 5ch;
margin-right: 1rem;
text-align: right;
font-variant-numeric: tabular-nums;
}

code[data-diff] .diff-insertion {
background-color: rgb(93 125 93 / 50%);
pre.has-diff code.line-numbers .line:not(.add):not(.remove)::before {
content: "\00a0\00a0" counter(step);
}

code[data-diff] .diff-deletion .diff-deletion,
code[data-diff] .diff-deletion .diff-insertion,
code[data-diff] .diff-insertion .diff-deletion,
code[data-diff] .diff-insertion .diff-insertion {
background-color: transparent;
}

code[data-diff] .diff-deletion > .diff-operator,
code[data-diff] .diff-insertion > .diff-operator {
display: none;
}

code[data-diff] .diff-deletion::before {
content: "-";
margin-left: -1ch;
background-color: rgb(144 84 84 / 70%);
color: #f8f8f2;
pre.has-diff code.line-numbers .line.add::before {
content: "+ " counter(step);
color: rgb(16 185 129);
font-weight: 600;
}

code[data-diff] .diff-insertion::before {
content: "+";
margin-left: -1ch;
background-color: rgb(93 125 93 / 50%);
color: #f8f8f2;
pre.has-diff code.line-numbers .line.remove::before {
content: "- " counter(step);
color: rgb(244 63 94);
font-weight: 600;
}

/* Fix <Foo::Bar> */
Expand Down
6 changes: 5 additions & 1 deletion guides/release/getting-started/quick-start.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,7 +266,11 @@ We're going to tell our component:

We'll need to make some changes to the code we wrote before.

In the rest of the code examples in this tutorial, whenever we add or remove code, we will show a "diff." The lines you need to remove have a minus sign in front of them, and the lines you should add have a plus sign. If you are using a screen reader while you go through the Guides, we recommend using Firefox and NVDA or Safari and VoiceOver for the best experience.
In the rest of the code examples in this tutorial, whenever we add or remove code, we will show a "diff."
Lines you need to remove are highlighted in red with a `-` next to the line number,
and lines you should add are highlighted in green with a `+` next to the line number.
If you are using a screen reader while you go through the Guides,
we recommend using Firefox and NVDA or Safari and VoiceOver for the best experience.

Let's replace all our old code with our new componentized version:

Expand Down