1
0
mirror of synced 2025-12-22 19:34:15 -05:00

Scope markdown body (#21082)

* update article content to markdown ui component

* decouple lunr indexing from class name

* remove summary outline none rule, apply utility class instead

* improve typing

* scope more styles down to markdown-body/extended-markdown

* move all markdown-body style overrides to MarkdownContent component

* fix class targeting within css module

* clean up MarkdownContent header style

* rename data-lunr to data-search

* fix: inline code color issue

* fix: update article markdown to work with MarkdownContent
This commit is contained in:
Mike Surowiec
2021-08-30 10:24:49 -04:00
committed by GitHub
parent 0e31d4aaa4
commit d76c16da19
35 changed files with 472 additions and 449 deletions

View File

@@ -3,7 +3,7 @@ import parseUserAgent from './user-agent'
import { sendEvent, EventType } from './events'
const supportedPlatforms = ['mac', 'windows', 'linux']
const detectedPlatforms = new Set()
const detectedPlatforms = new Set<string>()
// Emphasize content for the visitor's OS (inferred from user agent string)
@@ -66,9 +66,7 @@ function setActiveSwitcherLinks(platform: string) {
function showPlatformSpecificContent(platform: string) {
// find all platform-specific *block* elements and hide or show as appropriate
// example: {{ #mac }} block content {{/mac}}
const markdowns = Array.from(
document.querySelectorAll('.extended-markdown')
) as Array<HTMLElement>
const markdowns = Array.from(document.querySelectorAll<HTMLElement>('.extended-markdown'))
markdowns
.filter((el) => supportedPlatforms.some((platform) => el.classList.contains(platform)))
.forEach((el) => {
@@ -78,8 +76,8 @@ function showPlatformSpecificContent(platform: string) {
// find all platform-specific *inline* elements and hide or show as appropriate
// example: <span class="platform-mac">inline content</span>
const platforms = Array.from(
document.querySelectorAll('.platform-mac, .platform-windows, .platform-linux')
) as Array<HTMLElement>
document.querySelectorAll<HTMLElement>('.platform-mac, .platform-windows, .platform-linux')
)
platforms.forEach((el) => {
el.style.display = el.classList.contains('platform-' + platform) ? '' : 'none'
})
@@ -108,11 +106,11 @@ function getDetectedPlatforms(): Array<string> {
// find all platform-specific *inline* elements and hide or show as appropriate
// example: <span class="platform-mac">inline content</span>
const platformEls = Array.from(
document.querySelectorAll('.platform-mac, .platform-windows, .platform-linux')
) as Array<HTMLElement>
document.querySelectorAll<HTMLElement>('.platform-mac, .platform-windows, .platform-linux')
)
platformEls.forEach((el) => detectPlatforms(el))
return Array.from(detectedPlatforms) as Array<string>
return Array.from(detectedPlatforms)
}
function detectPlatforms(el: HTMLElement) {