Skip to content

Commit 9e599bc

Browse files
heiskrheiskr
authored
A11y: Update note colors (#39112)
1 parent 7437c5f commit 9e599bc

File tree

21 files changed

+266
-309
lines changed

21 files changed

+266
-309
lines changed

Diff for: ‎components/article/InArticlePicker.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export const InArticlePicker = ({
8383
// If you're in local development, you have the <ClientSideRefresh>
8484
// causing a XHR refresh of the content triggered by the Page Visibility
8585
// API (implemented in the uswSWR hook). That means that on the pages that
86-
// contain these `.extended-markdown` classes, any DOM changes we might
86+
// contain these `.ghd-tool` classes, any DOM changes we might
8787
// have previously made are lost and started over.
8888
useEffect(() => {
8989
let mounted = true

Diff for: ‎components/article/PlatformPicker.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const platforms = [
1717
// find all platform-specific *block* elements and hide or show as appropriate
1818
// example: {% mac %} block content {% endmac %}
1919
function showPlatformSpecificContent(platform: string) {
20-
const markdowns = Array.from(document.querySelectorAll<HTMLElement>('.extended-markdown'))
20+
const markdowns = Array.from(document.querySelectorAll<HTMLElement>('.ghd-tool'))
2121
markdowns
2222
.filter((el) => platforms.some((platform) => el.classList.contains(platform.value)))
2323
.forEach((el) => {

Diff for: ‎components/article/ToolPicker.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { InArticlePicker } from './InArticlePicker'
1212
// find all platform-specific *block* elements and hide or show as appropriate
1313
// example: {% webui %} block content {% endwebui %}
1414
function showToolSpecificContent(tool: string, supportedTools: Array<string>) {
15-
const markdowns = Array.from(document.querySelectorAll<HTMLElement>('.extended-markdown'))
15+
const markdowns = Array.from(document.querySelectorAll<HTMLElement>('.ghd-tool'))
1616
markdowns
1717
.filter((el) => supportedTools.some((tool) => el.classList.contains(tool)))
1818
.forEach((el) => {

Diff for: ‎components/ui/MarkdownContent/MarkdownContent.module.scss

-11
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,4 @@
2828
}
2929
}
3030
}
31-
32-
[class~="note"],
33-
[class~="tip"],
34-
[class~="warning"],
35-
[class~="danger"] {
36-
// remove extra space under lists inside of notes
37-
ul,
38-
ol {
39-
margin-bottom: 0;
40-
}
41-
}
4231
}

Diff for: ‎components/ui/MarkdownContent/stylesheets/lists.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
margin-top: 1rem;
5050
}
5151

52-
[class~="extended-markdown"] {
52+
[class~="ghd-tool"] {
5353
margin-top: 1rem;
5454
}
5555

Diff for: ‎lib/get-mini-toc-items.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default function getMiniTocItems(html, maxHeadingLevel = 2, headingScope
5151
const contents = { href, title: $(item).text().trim() }
5252
const headingLevel = parseInt($(item)[0].name.match(/\d+/)[0], 10) || 0 // the `2` from `h2`
5353

54-
const platform = $(item).parent('.extended-markdown').attr('class') || ''
54+
const platform = $(item).parent('.ghd-tool').attr('class') || ''
5555

5656
// track the most important heading level while we're looping through the items
5757
if (headingLevel < mostImportantHeadingLevel || mostImportantHeadingLevel === undefined) {

Diff for: ‎lib/page.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -247,14 +247,13 @@ class Page {
247247

248248
// set a flag so layout knows whether to render a mac/windows/linux switcher element
249249
this.detectedPlatforms = ['mac', 'windows', 'linux'].filter(
250-
(platform) =>
251-
html.includes(`extended-markdown ${platform}`) || html.includes(`platform-${platform}`),
250+
(platform) => html.includes(`ghd-tool ${platform}`) || html.includes(`platform-${platform}`),
252251
)
253252
this.includesPlatformSpecificContent = this.detectedPlatforms.length > 0
254253

255254
// set flags for webui, cli, etc switcher element
256255
this.detectedTools = Object.keys(allTools).filter(
257-
(tool) => html.includes(`extended-markdown ${tool}`) || html.includes(`tool-${tool}`),
256+
(tool) => html.includes(`ghd-tool ${tool}`) || html.includes(`tool-${tool}`),
258257
)
259258

260259
// pass the list of all possible tools around to components and utilities that will need it later on

Diff for: ‎src/content-linter/tests/lint-files.js

-41
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { jest } from '@jest/globals'
1616

1717
import { frontmatter, deprecatedProperties } from '../../../lib/frontmatter.js'
1818
import languages from '../../../lib/languages.js'
19-
import { tags } from '#src/content-render/liquid/extended-markdown.js'
2019
import releaseNotesSchema from '../lib/release-notes-schema.js'
2120
import learningTracksSchema from '../lib/learning-tracks-schema.js'
2221
import { renderContent, liquid } from '#src/content-render/index.js'
@@ -170,13 +169,6 @@ const oldVariableRegex = /{{\s*?site\.data\..*?}}/g
170169
//
171170
const oldOcticonRegex = /{{\s*?octicon-([a-z-]+)(\s[\w\s\d-]+)?\s*?}}/g
172171

173-
// - {{#note}}
174-
// - {{/note}}
175-
// - {{ #warning }}
176-
// - {{ /pizza }}
177-
//
178-
const oldExtendedMarkdownRegex = /{{\s*?[#/][a-z-]+\s*?}}/g
179-
180172
// GitHub-owned actions (e.g. actions/checkout@v2) should use a reusable in examples.
181173
// list:
182174
// - actions/checkout@v2
@@ -211,8 +203,6 @@ const oldVariableErrorText =
211203
'Found article uses old {{ site.data... }} syntax. Use {% data example.data.string %} instead!'
212204
const oldOcticonErrorText =
213205
'Found octicon variables with the old {{ octicon-name }} syntax. Use {% octicon "name" %} instead!'
214-
const oldExtendedMarkdownErrorText =
215-
'Found extended markdown tags with the old {{#note}} syntax. Use {% note %}/{% endnote %} instead!'
216206
const literalActionInsteadOfReusableErrorText =
217207
'Found a literal mention of a GitHub-owned action. Instead, use the reusables for the action. e.g {% data reusables.actions.action-checkout %}'
218208

@@ -596,21 +586,6 @@ describe('lint markdown content', () => {
596586
expect(matches.length, errorMessage).toBe(0)
597587
})
598588

599-
test('does not use old extended markdown syntax', async () => {
600-
Object.keys(tags).forEach((tag) => {
601-
const reg = new RegExp(`{{\\s*?[#|/]${tag}`, 'g')
602-
if (reg.test(content)) {
603-
const matches = content.match(oldExtendedMarkdownRegex) || []
604-
const tagMessage = oldExtendedMarkdownErrorText
605-
.replace('{{#note}}', `{{#${tag}}}`)
606-
.replace('{% note %}', `{% ${tag} %}`)
607-
.replace('{% endnote %}', `{% end${tag} %}`)
608-
const errorMessage = formatLinkError(tagMessage, matches)
609-
expect(matches.length, errorMessage).toBe(0)
610-
}
611-
})
612-
})
613-
614589
test('URLs must not contain a hard-coded language code', async () => {
615590
const matches = links.filter((link) => {
616591
return /\/(?:${languageCodes.join('|')})\//.test(link)
@@ -895,22 +870,6 @@ describe('lint yaml content', () => {
895870
const errorMessage = formatLinkError(oldOcticonErrorText, matches)
896871
expect(matches.length, errorMessage).toBe(0)
897872
})
898-
899-
test('does not use old extended markdown syntax', async () => {
900-
const matches = []
901-
902-
for (const [key, content] of Object.entries(dictionary)) {
903-
const contentStr = getContent(content)
904-
if (!contentStr) continue
905-
const valMatches = contentStr.match(oldExtendedMarkdownRegex) || []
906-
if (valMatches.length > 0) {
907-
matches.push(...valMatches.map((match) => `Key "${key}": ${match}`))
908-
}
909-
}
910-
911-
const errorMessage = formatLinkError(oldExtendedMarkdownErrorText, matches)
912-
expect(matches.length, errorMessage).toBe(0)
913-
})
914873
})
915874
})
916875

Diff for: ‎src/content-render/liquid/engine.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import IndentedDataReference from './indented-data-reference.js'
44
import Data from './data.js'
55
import Octicon from './octicon.js'
66
import Ifversion from './ifversion.js'
7-
import { ExtendedMarkdown, tags } from './extended-markdown.js'
7+
import { Tool, tags as toolTags } from './tool.js'
8+
import { Spotlight, tags as spotlightTags } from './spotlight.js'
89

910
export const engine = new Liquid({
1011
extname: '.html',
@@ -16,9 +17,12 @@ engine.registerTag('data', Data)
1617
engine.registerTag('octicon', Octicon)
1718
engine.registerTag('ifversion', Ifversion)
1819

19-
for (const tag in tags) {
20-
// Register all the extended markdown tags, like {% note %} and {% warning %}
21-
engine.registerTag(tag, ExtendedMarkdown)
20+
for (const tag of toolTags) {
21+
engine.registerTag(tag, Tool)
22+
}
23+
24+
for (const tag in spotlightTags) {
25+
engine.registerTag(tag, Spotlight)
2226
}
2327

2428
/**

Diff for: ‎src/content-render/liquid/extended-markdown.js

-52
This file was deleted.

Diff for: ‎src/content-render/liquid/spotlight.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
export const tags = {
2+
note: 'accent',
3+
tip: 'accent',
4+
warning: 'danger',
5+
danger: 'danger',
6+
}
7+
8+
const template =
9+
'<div class="ghd-spotlight ghd-spotlight-{{ tagName }} {{ classes }}">{{ output }}</div>'
10+
11+
function getClasses(tagName) {
12+
const color = tags[tagName]
13+
return `border rounded-1 mb-4 p-3 f5 color-border-${color}-emphasis color-bg-${color}`
14+
}
15+
16+
export const Spotlight = {
17+
type: 'block',
18+
19+
parse(tagToken, remainTokens) {
20+
this.tagName = tagToken.name
21+
this.templates = []
22+
23+
const stream = this.liquid.parser.parseStream(remainTokens)
24+
stream
25+
.on(`tag:end${this.tagName}`, () => stream.stop())
26+
.on('template', (tpl) => this.templates.push(tpl))
27+
.on('end', () => {
28+
throw new Error(`tag ${tagToken.getText()} not closed`)
29+
})
30+
stream.start()
31+
},
32+
33+
render: function* (scope) {
34+
const output = yield this.liquid.renderer.renderTemplates(this.templates, scope)
35+
36+
return yield this.liquid.parseAndRender(template, {
37+
tagName: this.tagName,
38+
classes: getClasses(this.tagName),
39+
output,
40+
})
41+
},
42+
}

Diff for: ‎src/content-render/liquid/tool.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { allTools } from '../../../lib/all-tools.js'
2+
3+
export const tags = Object.keys(allTools).concat(['mac', 'windows', 'linux', 'rowheaders'])
4+
5+
const template = '<div class="ghd-tool {{ tagName }}">{{ output }}</div>'
6+
7+
export const Tool = {
8+
type: 'block',
9+
10+
parse(tagToken, remainTokens) {
11+
this.tagName = tagToken.name
12+
this.templates = []
13+
14+
const stream = this.liquid.parser.parseStream(remainTokens)
15+
stream
16+
.on(`tag:end${this.tagName}`, () => stream.stop())
17+
.on('template', (tpl) => this.templates.push(tpl))
18+
.on('end', () => {
19+
throw new Error(`tag ${tagToken.getText()} not closed`)
20+
})
21+
stream.start()
22+
},
23+
24+
render: function* (scope) {
25+
const output = yield this.liquid.renderer.renderTemplates(this.templates, scope)
26+
return yield this.liquid.parseAndRender(template, {
27+
tagName: this.tagName,
28+
output,
29+
})
30+
},
31+
}

Diff for: ‎src/graphql/components/Notice.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ export function Notice({ item, variant = 'preview' }: Props) {
1919
: t('graphql.reference.deprecation_notice')
2020
const noticeStyle =
2121
variant === 'preview'
22-
? 'note color-border-accent-emphasis color-bg-accent'
23-
: 'warning color-border-danger color-bg-danger'
22+
? 'ghd-spotlight-note color-border-accent-emphasis color-bg-accent'
23+
: 'ghd-spotlight-warning color-border-danger-emphasis color-bg-danger'
2424
return (
25-
<div className={`${noticeStyle} extended-markdown border rounded-1 my-3 p-3 f5`}>
25+
<div className={`ghd-spotlight ${noticeStyle} border rounded-1 my-3 p-3 f5`}>
2626
<p>
2727
<b>{previewTitle}</b>
2828
</p>

Diff for: ‎src/rest/components/RestPreviewNotice.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export function RestPreviewNotice({ slug, previews, heading }: Props) {
1212
</h3>
1313
{previews.map((preview, index) => (
1414
<div
15-
className="extended-markdown note border rounded-1 mb-6 p-3 color-border-accent-emphasis color-bg-accent f5"
15+
className="ghd-spotlight ghd-spotlight-note border rounded-1 mb-6 p-3 color-border-accent-emphasis color-bg-accent f5"
1616
dangerouslySetInnerHTML={{ __html: preview }}
1717
key={JSON.stringify(preview) + index}
1818
/>

0 commit comments

Comments
 (0)