A11y: Update note colors (github#39112)

Author: heiskr

components/article/InArticlePicker.tsx

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

components/article/PlatformPicker.tsx

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

components/article/ToolPicker.tsx

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

components/ui/MarkdownContent/MarkdownContent.module.scss

@@ -28,15 +28,4 @@
       }
     }
   }
-
-  [class~="note"],
-  [class~="tip"],
-  [class~="warning"],
-  [class~="danger"] {
-    // remove extra space under lists inside of notes
-    ul,
-    ol {
-      margin-bottom: 0;
-    }
-  }
 }

components/ui/MarkdownContent/stylesheets/lists.scss

@@ -49,7 +49,7 @@
         margin-top: 1rem;
       }
 
-      [class~="extended-markdown"] {
+      [class~="ghd-tool"] {
         margin-top: 1rem;
       }
 

lib/get-mini-toc-items.js

@@ -51,7 +51,7 @@ export default function getMiniTocItems(html, maxHeadingLevel = 2, headingScope
       const contents = { href, title: $(item).text().trim() }
       const headingLevel = parseInt($(item)[0].name.match(/\d+/)[0], 10) || 0 // the `2` from `h2`
 
-      const platform = $(item).parent('.extended-markdown').attr('class') || ''
+      const platform = $(item).parent('.ghd-tool').attr('class') || ''
 
       // track the most important heading level while we're looping through the items
       if (headingLevel < mostImportantHeadingLevel || mostImportantHeadingLevel === undefined) {

lib/page.js

@@ -247,14 +247,13 @@ class Page {
 
     // set a flag so layout knows whether to render a mac/windows/linux switcher element
     this.detectedPlatforms = ['mac', 'windows', 'linux'].filter(
-      (platform) =>
-        html.includes(`extended-markdown ${platform}`) || html.includes(`platform-${platform}`),
+      (platform) => html.includes(`ghd-tool ${platform}`) || html.includes(`platform-${platform}`),
     )
     this.includesPlatformSpecificContent = this.detectedPlatforms.length > 0
 
     // set flags for webui, cli, etc switcher element
     this.detectedTools = Object.keys(allTools).filter(
-      (tool) => html.includes(`extended-markdown ${tool}`) || html.includes(`tool-${tool}`),
+      (tool) => html.includes(`ghd-tool ${tool}`) || html.includes(`tool-${tool}`),
     )
 
     // pass the list of all possible tools around to components and utilities that will need it later on

src/content-linter/tests/lint-files.js

@@ -16,7 +16,6 @@ import { jest } from '@jest/globals'
 
 import { frontmatter, deprecatedProperties } from '../../../lib/frontmatter.js'
 import languages from '../../../lib/languages.js'
-import { tags } from '#src/content-render/liquid/extended-markdown.js'
 import releaseNotesSchema from '../lib/release-notes-schema.js'
 import learningTracksSchema from '../lib/learning-tracks-schema.js'
 import { renderContent, liquid } from '#src/content-render/index.js'
@@ -170,13 +169,6 @@ const oldVariableRegex = /{{\s*?site\.data\..*?}}/g
 //
 const oldOcticonRegex = /{{\s*?octicon-([a-z-]+)(\s[\w\s\d-]+)?\s*?}}/g
 
-//  - {{#note}}
-//  - {{/note}}
-//  - {{ #warning }}
-//  - {{ /pizza }}
-//
-const oldExtendedMarkdownRegex = /{{\s*?[#/][a-z-]+\s*?}}/g
-
 // GitHub-owned actions (e.g. actions/checkout@v2) should use a reusable in examples.
 // list:
 // - actions/checkout@v2
@@ -211,8 +203,6 @@ const oldVariableErrorText =
   'Found article uses old {{ site.data... }} syntax. Use {% data example.data.string %} instead!'
 const oldOcticonErrorText =
   'Found octicon variables with the old {{ octicon-name }} syntax. Use {% octicon "name" %} instead!'
-const oldExtendedMarkdownErrorText =
-  'Found extended markdown tags with the old {{#note}} syntax. Use {% note %}/{% endnote %} instead!'
 const literalActionInsteadOfReusableErrorText =
   'Found a literal mention of a GitHub-owned action. Instead, use the reusables for the action. e.g {% data reusables.actions.action-checkout %}'
 
@@ -596,21 +586,6 @@ describe('lint markdown content', () => {
       expect(matches.length, errorMessage).toBe(0)
     })
 
-    test('does not use old extended markdown syntax', async () => {
-      Object.keys(tags).forEach((tag) => {
-        const reg = new RegExp(`{{\\s*?[#|/]${tag}`, 'g')
-        if (reg.test(content)) {
-          const matches = content.match(oldExtendedMarkdownRegex) || []
-          const tagMessage = oldExtendedMarkdownErrorText
-            .replace('{{#note}}', `{{#${tag}}}`)
-            .replace('{% note %}', `{% ${tag} %}`)
-            .replace('{% endnote %}', `{% end${tag} %}`)
-          const errorMessage = formatLinkError(tagMessage, matches)
-          expect(matches.length, errorMessage).toBe(0)
-        }
-      })
-    })
-
     test('URLs must not contain a hard-coded language code', async () => {
       const matches = links.filter((link) => {
         return /\/(?:${languageCodes.join('|')})\//.test(link)
@@ -895,22 +870,6 @@ describe('lint yaml content', () => {
       const errorMessage = formatLinkError(oldOcticonErrorText, matches)
       expect(matches.length, errorMessage).toBe(0)
     })
-
-    test('does not use old extended markdown syntax', async () => {
-      const matches = []
-
-      for (const [key, content] of Object.entries(dictionary)) {
-        const contentStr = getContent(content)
-        if (!contentStr) continue
-        const valMatches = contentStr.match(oldExtendedMarkdownRegex) || []
-        if (valMatches.length > 0) {
-          matches.push(...valMatches.map((match) => `Key "${key}": ${match}`))
-        }
-      }
-
-      const errorMessage = formatLinkError(oldExtendedMarkdownErrorText, matches)
-      expect(matches.length, errorMessage).toBe(0)
-    })
   })
 })
 

src/content-render/liquid/engine.js

@@ -4,7 +4,8 @@ import IndentedDataReference from './indented-data-reference.js'
 import Data from './data.js'
 import Octicon from './octicon.js'
 import Ifversion from './ifversion.js'
-import { ExtendedMarkdown, tags } from './extended-markdown.js'
+import { Tool, tags as toolTags } from './tool.js'
+import { Spotlight, tags as spotlightTags } from './spotlight.js'
 
 export const engine = new Liquid({
   extname: '.html',
@@ -16,9 +17,12 @@ engine.registerTag('data', Data)
 engine.registerTag('octicon', Octicon)
 engine.registerTag('ifversion', Ifversion)
 
-for (const tag in tags) {
-  // Register all the extended markdown tags, like {% note %} and {% warning %}
-  engine.registerTag(tag, ExtendedMarkdown)
+for (const tag of toolTags) {
+  engine.registerTag(tag, Tool)
+}
+
+for (const tag in spotlightTags) {
+  engine.registerTag(tag, Spotlight)
 }
 
 /**