diff --git a/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx b/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx index b90a49fb22..c2519df420 100644 --- a/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx +++ b/packages/techdocs-cli-embedded-app/src/components/TechDocsPage/TechDocsPage.tsx @@ -14,7 +14,22 @@ * limitations under the License. */ -import React from 'react'; +import React, { + FC, + createContext, + useContext, + useState, + useCallback, +} from 'react'; + +import { Theme, makeStyles } from '@material-ui/core'; + +import { ThemeProvider, Toolbar, Tooltip, IconButton } from '@material-ui/core'; +import LightIcon from '@material-ui/icons/Brightness7'; +import DarkIcon from '@material-ui/icons/Brightness4'; + +import { lightTheme, darkTheme } from '@backstage/theme'; +import { EntityName } from '@backstage/catalog-model'; import { Content } from '@backstage/core-components'; @@ -24,6 +39,90 @@ import { TechDocsPageHeader, } from '@backstage/plugin-techdocs'; +const useStyles = makeStyles((theme: Theme) => ({ + content: { + backgroundColor: theme.palette.background.default, + }, + contentToolbar: { + display: 'flex', + justifyContent: 'flex-end', + padding: 0, + }, +})); + +enum Themes { + LIGHT = 'light', + DARK = 'dark', +} + +type TechDocsThemeValue = { + theme: Themes; + toggleTheme: () => void; +}; + +const TechDocsThemeContext = createContext({ + theme: Themes.LIGHT, + toggleTheme: () => {}, +}); + +const TechdocsThemeProvider: FC = ({ children }) => { + const [theme, setTheme] = useState(Themes.LIGHT); + + const toggleTheme = useCallback(() => { + setTheme(prevTheme => + prevTheme === Themes.LIGHT ? Themes.DARK : Themes.LIGHT, + ); + }, [setTheme]); + + const value = { theme, toggleTheme }; + + const themes = { + [Themes.LIGHT]: lightTheme, + [Themes.DARK]: darkTheme, + }; + + return ( + + {children} + + ); +}; + +const useTechDocsTheme = () => useContext(TechDocsThemeContext); + +const TechDocsPageContent = ({ + onReady, + entityRef, +}: { + entityRef: EntityName; + onReady: () => void; +}) => { + const classes = useStyles(); + const { theme, toggleTheme } = useTechDocsTheme(); + + const themes = { + [Themes.LIGHT]: { + icon: , + title: 'Dark theme', + }, + [Themes.DARK]: { + icon: , + title: 'Light theme', + }, + }; + + return ( + + + + {themes[theme].icon} + + + + + ); +}; + const DefaultTechDocsPage = () => { const techDocsMetadata = { site_name: 'Live preview environment', @@ -35,20 +134,18 @@ const DefaultTechDocsPage = () => { {({ entityRef, onReady }) => ( <> - - - + )} ); }; -export const techDocsPage = ; +export const techDocsPage = ( + + + +); diff --git a/packages/techdocs-cli/README.md b/packages/techdocs-cli/README.md index 3ac423cb38..db0ef2dc40 100644 --- a/packages/techdocs-cli/README.md +++ b/packages/techdocs-cli/README.md @@ -17,7 +17,7 @@ bundle into the `packages/techdocs-cli/dist` which is then published with the ```sh # From the root of this repository run # NOTE: This will build the techdocs-cli-embedded-app and copy the output into the cli dist directory -yarn build --scope @techdocs/cli +yarn workspace @techdocs/cli build # Now execute the binary packages/techdocs-cli/bin/techdocs-cli diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index c12b17b486..2289a645e4 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -25,7 +25,15 @@ import React, { useState, } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -import { Grid, makeStyles, useTheme } from '@material-ui/core'; +import { + Grid, + makeStyles, + useTheme, + Theme, + lighten, + alpha, +} from '@material-ui/core'; +import { red, pink, green, purple, yellow } from '@material-ui/core/colors'; import { EntityName } from '@backstage/catalog-model'; import { useApi, configApiRef } from '@backstage/core-plugin-api'; @@ -121,6 +129,15 @@ export const withTechDocsReaderProvider = */ export const useTechDocsReader = () => useContext(TechDocsReaderContext); +type TypographyHeadings = Pick< + Theme['typography'], + 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' +>; + +type TypographyHeadingsKeys = keyof TypographyHeadings; + +const headings: TypographyHeadingsKeys[] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; + /** * Hook that encapsulates the behavior of getting raw HTML and applying * transforms to it in order to make it function at a basic level in the @@ -209,187 +226,410 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => { simplifyMkdocsFooter(), addGitFeedbackLink(scmIntegrationsApi), injectCss({ + // Variables css: ` - body { - font-family: ${theme.typography.fontFamily}; - --md-text-color: ${theme.palette.text.primary}; - --md-text-link-color: ${theme.palette.primary.main}; + /* + As the MkDocs output is rendered in shadow DOM, the CSS variable definitions on the root selector are not applied. Instead, they have to be applied on :host. + As there is no way to transform the served main*.css yet (for example in the backend), we have to copy from main*.css and modify them. + */ + :host { + /* FONT */ + --md-default-fg-color: ${theme.palette.text.primary}; - --md-code-fg-color: ${theme.palette.text.primary}; - --md-code-bg-color: ${theme.palette.background.paper}; - --md-accent-fg-color: ${theme.palette.primary.main}; - --md-default-fg-color--lightest: ${theme.palette.textVerySubtle}; - } - .codehilite .gd, .highlight .gd { - background-color: ${isDarkTheme ? 'rgba(248,81,73,0.65)' : '#fdd'}; - } - .codehilite .gi, .highlight .gi { - background-color: ${isDarkTheme ? 'rgba(46,160,67,0.65)' : '#dfd'}; - } - .highlight .kd { - color: ${isDarkTheme ? '#4aaaf7' : '#3b78e7'}; - } - .highlight .k { - color: ${isDarkTheme ? '#4aaaf7' : '#3b78e7'}; - } - .highlight .nx { - color: ${isDarkTheme ? '#ff53a3' : '#ec407a'}; - } - .highlight .s1 { - color: ${isDarkTheme ? '#1cad46' : 'rgb(13, 144, 79)'}; - } - .highlight .kt { - color: ${isDarkTheme ? '#4aaaf7' : '#3e61a2'}; - } - .md-main__inner { margin-top: 0; } - .md-sidebar { position: fixed; bottom: 100px; width: 20rem; } - .md-sidebar--secondary { right: 2rem; } - .md-content { margin-bottom: 50px } - .md-footer { position: fixed; bottom: 0px; } - .md-footer-nav__link { width: 20rem;} - .md-content { margin-left: 20rem; max-width: calc(100% - 20rem * 2 - 3rem); } - .md-typeset { font-size: 1rem; } - .md-typeset h1, .md-typeset h2, .md-typeset h3 { font-weight: bold; } - .md-nav { font-size: 1rem; } - .md-grid { max-width: 90vw; margin: 0 } - .md-typeset blockquote { - color: ${theme.palette.textSubtle}; - border-left: 0.2rem solid ${theme.palette.textVerySubtle}; - } - .md-typeset hr { - border-bottom: 0.05rem dotted ${theme.palette.textVerySubtle}; - } - .md-typeset table:not([class]) { - font-size: 1rem; - border: 1px solid ${theme.palette.text.primary}; - border-bottom: none; - border-collapse: collapse; - } - .md-typeset table:not([class]) td, .md-typeset table:not([class]) th { - border-bottom: 1px solid ${theme.palette.text.primary}; - } - .md-typeset table:not([class]) th { font-weight: bold; } - .md-typeset .admonition, .md-typeset details { - font-size: inherit; + /* BACKGROUND */ + --md-default-bg-color:${theme.palette.background.default}; + --md-default-bg-color--light: ${lighten( + theme.palette.text.primary, + 0.7, + )}; + --md-default-bg-color--lighter: ${lighten( + theme.palette.text.primary, + 0.3, + )}; + --md-default-bg-color--lightest: ${lighten( + theme.palette.text.primary, + 0.12, + )}; + + /* PRIMARY */ + --md-primary-fg-color: ${theme.palette.primary.main}; + --md-primary-fg-color--light: ${theme.palette.primary.light}; + --md-primary-fg-color--dark: ${theme.palette.primary.dark}; + --md-primary-bg-color: ${theme.palette.primary.contrastText}; + --md-primary-bg-color--light: ${lighten( + theme.palette.primary.contrastText, + 0.7, + )}; + + /* ACCENT */ + --md-accent-fg-color: var(--md-primary-fg-color); + + /* SHADOW */ + --md-shadow-z1: ${theme.shadows[1]}; + --md-shadow-z2: ${theme.shadows[2]}; + --md-shadow-z3: ${theme.shadows[3]}; + + /* ICON */ + /* Admonitions and others are using SVG masks to define icons. These masks are defined as CSS variables. */ + --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,'); + --md-admonition-icon--abstract: url('data:image/svg+xml;charset=utf-8,'); + --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,'); + --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,'); + --md-admonition-icon--success: url('data:image/svg+xml;charset=utf-8,'); + --md-admonition-icon--question: url('data:image/svg+xml;charset=utf-8,'); + --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,'); + --md-admonition-icon--failure: url('data:image/svg+xml;charset=utf-8,'); + --md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,'); + --md-admonition-icon--bug: url('data:image/svg+xml;charset=utf-8,'); + --md-admonition-icon--example: url('data:image/svg+xml;charset=utf-8,'); + --md-admonition-icon--quote: url('data:image/svg+xml;charset=utf-8,'); + --md-footnotes-icon: url('data:image/svg+xml;charset=utf-8,'); + --md-details-icon: url('data:image/svg+xml;charset=utf-8,'); + --md-tasklist-icon: url('data:image/svg+xml;charset=utf-8,'); + --md-tasklist-icon--checked: url('data:image/svg+xml;charset=utf-8,'); + --md-nav-icon--prev: url('data:image/svg+xml;charset=utf-8,'); + --md-nav-icon--next: url('data:image/svg+xml;charset=utf-8,'); + --md-toc-icon: url('data:image/svg+xml;charset=utf-8,'); + --md-clipboard-icon: url('data:image/svg+xml;charset=utf-8,'); + --md-search-result-icon: url('data:image/svg+xml;charset=utf-8,'); + --md-source-forks-icon: url('data:image/svg+xml;charset=utf-8,'); + --md-source-repositories-icon: url('data:image/svg+xml;charset=utf-8,'); + --md-source-stars-icon: url('data:image/svg+xml;charset=utf-8,'); + --md-source-version-icon: url('data:image/svg+xml;charset=utf-8,'); + --md-version-icon: url('data:image/svg+xml;charset=utf-8,'); } - /* style the checkmarks of the task list */ - .md-typeset .task-list-control .task-list-indicator::before { - background-color: ${theme.palette.action.disabledBackground}; + :host > * { + /* CODE */ + --md-code-fg-color: ${theme.palette.text.primary}; + --md-code-bg-color: ${theme.palette.background.paper}; + --md-code-hl-color: ${alpha(yellow[500], 0.5)}; + --md-code-hl-number-color: ${red[500]}; + --md-code-hl-string-color: ${green[500]}; + --md-code-hl-special-color: ${pink[500]}; + --md-code-hl-constant-color: ${purple[500]}; + --md-code-hl-keyword-color: ${ + isDarkTheme + ? theme.palette.primary.light + : theme.palette.primary.dark + }; + --md-code-hl-function-color: ${ + isDarkTheme + ? theme.palette.secondary.light + : theme.palette.secondary.dark + }; + --md-code-hl-name-color: var(--md-code-fg-color); + --md-code-hl-comment-color: var(--md-default-fg-color--light); + --md-code-hl-generic-color: var(--md-default-fg-color--light); + --md-code-hl-variable-color: var(--md-default-fg-color--light); + --md-code-hl-operator-color: var(--md-default-fg-color--light); + --md-code-hl-punctuation-color: var(--md-default-fg-color--light); + + /* TYPESET */ + --md-typeset-font-size: 1rem; + --md-typeset-color: var(--md-default-fg-color); + --md-typeset-a-color: var(--md-accent-fg-color); + --md-typeset-table-color: ${theme.palette.text.primary}; + --md-typeset-del-color: ${ + isDarkTheme + ? alpha(theme.palette.error.dark, 0.5) + : alpha(theme.palette.error.light, 0.5) + }; + --md-typeset-ins-color: ${ + isDarkTheme + ? alpha(theme.palette.success.dark, 0.5) + : alpha(theme.palette.success.light, 0.5) + }; + --md-typeset-mark-color: ${ + isDarkTheme + ? alpha(theme.palette.warning.dark, 0.5) + : alpha(theme.palette.warning.light, 0.5) + }; } - .md-typeset .task-list-control [type="checkbox"]:checked + .task-list-indicator:before { - background-color: ${theme.palette.success.main}; - } - /**/ @media screen and (max-width: 76.1875em) { - .md-nav { - background-color: ${theme.palette.background.default}; - transition: none !important - } - .md-sidebar--secondary { display: none; } - .md-sidebar--primary { left: ${ - isPinned ? '242px' : '72px' - }; width: 10rem } - .md-content { margin-left: 10rem; max-width: calc(100% - 10rem); } - .md-content__inner { font-size: 0.9rem } - .md-footer { - position: static; - padding-left: 10rem; - } - .md-footer-nav__link { - /* footer links begin to overlap at small sizes without setting width */ - width: 50%; - } - .md-nav--primary .md-nav__title { - white-space: normal; - height: auto; - line-height: 1rem; - cursor: auto; - } - .md-nav--primary > .md-nav__title [for="none"] { - padding-top: 0; + :host > * { + /* TYPESET */ + --md-typeset-font-size: .8rem; } } - `, + `, }), injectCss({ - // Disable CSS animations on link colors as they lead to issues in dark - // mode. The dark mode color theme is applied later and theirfore there - // is always an animation from light to dark mode when navigation - // between pages. + // Reset css: ` - .md-nav__link, .md-typeset a, .md-typeset a::before, .md-typeset .headerlink { - transition: none; + body { + --md-text-color: var(--md-default-fg-color); + --md-text-link-color: var(--md-accent-fg-color); + --md-text-font-family: ${theme.typography.fontFamily}; + font-family: var(--md-text-font-family); + background-color: unset; } `, }), injectCss({ - // Properly style code blocks. + // Layout css: ` + .md-grid { + max-width: 90vw; + margin: 0; + } + + .md-nav { + font-size: ${theme.typography.body1.fontSize}; + } + .md-nav + + .md-main__inner { + margin-top: 0; + } + + .md-sidebar { + position: fixed; + bottom: 100px; + width: 20rem; + } + .md-sidebar--secondary { + right: 2rem; + } + + .md-content { + max-width: calc(100% - 20rem * 2 - 3rem); + margin-left: 20rem; + margin-bottom: 50px; + } + + .md-footer { + position: fixed; + bottom: 0px; + } + .md-footer__title { + background-color: unset; + } + .md-footer-nav__link { + width: 20rem; + } + + .md-dialog { + background-color: unset; + } + + @media screen and (max-width: 76.1875em) { + .md-nav { + transition: none !important + background-color: ${theme.palette.background.default}; + } + + .md-nav--primary .md-nav__title { + cursor: auto; + white-space: normal; + line-height: 1rem; + height: auto; + } + .md-nav--primary > .md-nav__title [for="none"] { + padding-top: 0; + } + .md-nav--primary .md-nav__title .md-nav__button { + display: none; + } + + .md-sidebar--secondary { + display: none; + } + .md-sidebar--primary { + width: 10rem; + left: ${isPinned ? '242px' : '72px'} !important; + } + + .md-content { + max-width: calc(100% - 10rem); + margin-left: 10rem; + } + + .md-footer { + position: static; + padding-left: 10rem; + } + .md-footer-nav__link { + /* footer links begin to overlap at small sizes without setting width */ + width: 50%; + } + } + `, + }), + injectCss({ + // Typeset + css: ` + .md-typeset { + font-size: var(--md-typeset-font-size); + } + + ${headings.reduce((style, heading) => { + const styles = theme.typography[heading]; + const { lineHeight, fontFamily, fontWeight, fontSize } = styles; + const calculate = (value: typeof fontSize) => { + let factor: number | string = 1; + if (typeof value === 'number') { + // 60% of the size defined because it is too big + factor = (value / 16) * 0.6; + } + if (typeof value === 'string') { + factor = value.replace('rem', ''); + } + return `calc(${factor} * var(--md-typeset-font-size))`; + }; + return style.concat(` + .md-typeset ${heading} { + line-height: ${lineHeight}; + font-family: ${fontFamily}; + font-weight: ${fontWeight}; + font-size: ${calculate(fontSize)}; + } + `); + }, '')} + + .md-typeset hr { + border-bottom: 0.05rem dotted ${theme.palette.divider}; + } + + .md-typeset details { + font-size: var(--md-typeset-font-size); + } + + .md-typeset blockquote { + color: ${theme.palette.textSubtle}; + border-left: 0.2rem solid ${theme.palette.textVerySubtle}; + } + + .md-typeset table:not([class]) { + font-size: var(--md-typeset-font-size); + border: 1px solid ${theme.palette.text.primary}; + border-bottom: none; + border-collapse: collapse; + } + .md-typeset table:not([class]) th { + font-weight: bold; + } + .md-typeset table:not([class]) td, .md-typeset table:not([class]) th { + border-bottom: 1px solid ${theme.palette.text.primary}; + } + .md-typeset pre > code::-webkit-scrollbar-thumb { background-color: hsla(0, 0%, 0%, 0.32); } .md-typeset pre > code::-webkit-scrollbar-thumb:hover { background-color: hsla(0, 0%, 0%, 0.87); } - `, + `, }), injectCss({ - // Admonitions and others are using SVG masks to define icons. These - // masks are defined as CSS variables. - // As the MkDocs output is rendered in shadow DOM, the CSS variable - // definitions on the root selector are not applied. Instead, the have - // to be applied on :host. - // As there is no way to transform the served main*.css yet (for - // example in the backend), we have to copy from main*.css and modify - // them. + // Animations css: ` - :host { - --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,'); - --md-admonition-icon--abstract: url('data:image/svg+xml;charset=utf-8,'); - --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,'); - --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,'); - --md-admonition-icon--success: url('data:image/svg+xml;charset=utf-8,'); - --md-admonition-icon--question: url('data:image/svg+xml;charset=utf-8,'); - --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,'); - --md-admonition-icon--failure: url('data:image/svg+xml;charset=utf-8,'); - --md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,'); - --md-admonition-icon--bug: url('data:image/svg+xml;charset=utf-8,'); - --md-admonition-icon--example: url('data:image/svg+xml;charset=utf-8,'); - --md-admonition-icon--quote: url('data:image/svg+xml;charset=utf-8,'); + /* + Disable CSS animations on link colors as they lead to issues in dark mode. + The dark mode color theme is applied later and theirfore there is always an animation from light to dark mode when navigation between pages. + */ + .md-dialog, .md-nav__link, .md-footer__link, .md-typeset a, .md-typeset a::before, .md-typeset .headerlink { + transition: none; + } + `, + }), + injectCss({ + // Extensions + css: ` + /* HIGHLIGHT */ + .highlight .md-clipboard:after { + content: unset; } - :host { - --md-footnotes-icon: url('data:image/svg+xml;charset=utf-8,'); + + .highlight .nx { + color: ${isDarkTheme ? '#ff53a3' : '#ec407a'}; } - :host { - --md-details-icon: url('data:image/svg+xml;charset=utf-8,'); + + /* CODE HILITE */ + .codehilite .gd { + background-color: ${ + isDarkTheme ? 'rgba(248,81,73,0.65)' : '#fdd' + }; } - :host { - --md-tasklist-icon: url('data:image/svg+xml;charset=utf-8,'); - --md-tasklist-icon--checked: url('data:image/svg+xml;charset=utf-8,'); + + .codehilite .gi { + background-color: ${ + isDarkTheme ? 'rgba(46,160,67,0.65)' : '#dfd' + }; } - `, + + /* TABBED */ + .tabbed-set>input:nth-child(1):checked~.tabbed-labels>:nth-child(1), + .tabbed-set>input:nth-child(2):checked~.tabbed-labels>:nth-child(2), + .tabbed-set>input:nth-child(3):checked~.tabbed-labels>:nth-child(3), + .tabbed-set>input:nth-child(4):checked~.tabbed-labels>:nth-child(4), + .tabbed-set>input:nth-child(5):checked~.tabbed-labels>:nth-child(5), + .tabbed-set>input:nth-child(6):checked~.tabbed-labels>:nth-child(6), + .tabbed-set>input:nth-child(7):checked~.tabbed-labels>:nth-child(7), + .tabbed-set>input:nth-child(8):checked~.tabbed-labels>:nth-child(8), + .tabbed-set>input:nth-child(9):checked~.tabbed-labels>:nth-child(9), + .tabbed-set>input:nth-child(10):checked~.tabbed-labels>:nth-child(10), + .tabbed-set>input:nth-child(11):checked~.tabbed-labels>:nth-child(11), + .tabbed-set>input:nth-child(12):checked~.tabbed-labels>:nth-child(12), + .tabbed-set>input:nth-child(13):checked~.tabbed-labels>:nth-child(13), + .tabbed-set>input:nth-child(14):checked~.tabbed-labels>:nth-child(14), + .tabbed-set>input:nth-child(15):checked~.tabbed-labels>:nth-child(15), + .tabbed-set>input:nth-child(16):checked~.tabbed-labels>:nth-child(16), + .tabbed-set>input:nth-child(17):checked~.tabbed-labels>:nth-child(17), + .tabbed-set>input:nth-child(18):checked~.tabbed-labels>:nth-child(18), + .tabbed-set>input:nth-child(19):checked~.tabbed-labels>:nth-child(19), + .tabbed-set>input:nth-child(20):checked~.tabbed-labels>:nth-child(20) { + color: var(--md-accent-fg-color); + border-color: var(--md-accent-fg-color); + } + + /* TASK-LIST */ + .task-list-control .task-list-indicator::before { + background-color: ${theme.palette.action.disabledBackground}; + } + .task-list-control [type="checkbox"]:checked + .task-list-indicator:before { + background-color: ${theme.palette.success.main}; + } + + /* ADMONITION */ + .admonition { + font-size: var(--md-typeset-font-size); + } + `, }), ]), [ - techdocsSanitizer, - techdocsStorageApi, kind, name, namespace, - scmIntegrationsApi, - theme.typography.fontFamily, - theme.palette.text.primary, - theme.palette.primary.main, - theme.palette.background.paper, - theme.palette.background.default, - theme.palette.textVerySubtle, - theme.palette.textSubtle, - theme.palette.action.disabledBackground, - theme.palette.success.main, isDarkTheme, isPinned, + scmIntegrationsApi, + techdocsSanitizer, + techdocsStorageApi, + theme.shadows, + theme.typography, + theme.palette.divider, + theme.palette.text.primary, + theme.palette.textVerySubtle, + theme.palette.background.paper, + theme.palette.background.default, + theme.palette.textSubtle, + theme.palette.primary.main, + theme.palette.primary.dark, + theme.palette.primary.light, + theme.palette.primary.contrastText, + theme.palette.secondary.dark, + theme.palette.secondary.light, + theme.palette.error.dark, + theme.palette.error.light, + theme.palette.success.main, + theme.palette.success.dark, + theme.palette.success.light, + theme.palette.warning.dark, + theme.palette.warning.light, + theme.palette.action.disabledBackground, ], ); diff --git a/plugins/techdocs/src/reader/transformers/simplifyMkdocsFooter.test.ts b/plugins/techdocs/src/reader/transformers/simplifyMkdocsFooter.test.ts index 020befd522..ac4c9fa986 100644 --- a/plugins/techdocs/src/reader/transformers/simplifyMkdocsFooter.test.ts +++ b/plugins/techdocs/src/reader/transformers/simplifyMkdocsFooter.test.ts @@ -27,7 +27,7 @@ describe('simplifyMkdocsFooter', () => { }, ); - expect(shadowDom.querySelector('.md-footer-copyright')).toBeTruthy(); + expect(shadowDom.querySelector('.md-footer .md-copyright')).toBeTruthy(); }); it('does remove mkdocs copyright', async () => { @@ -39,6 +39,6 @@ describe('simplifyMkdocsFooter', () => { }, ); - expect(shadowDom.querySelector('.md-footer-copyright')).toBeFalsy(); + expect(shadowDom.querySelector('.md-footer .md-copyright')).toBeFalsy(); }); }); diff --git a/plugins/techdocs/src/reader/transformers/simplifyMkdocsFooter.ts b/plugins/techdocs/src/reader/transformers/simplifyMkdocsFooter.ts index 2b96926270..b583a72fbf 100644 --- a/plugins/techdocs/src/reader/transformers/simplifyMkdocsFooter.ts +++ b/plugins/techdocs/src/reader/transformers/simplifyMkdocsFooter.ts @@ -19,7 +19,7 @@ import type { Transformer } from './transformer'; export const simplifyMkdocsFooter = (): Transformer => { return dom => { // Remove mkdocs copyright - dom.querySelector('.md-footer-copyright')?.remove(); + dom.querySelector('.md-footer .md-copyright')?.remove(); return dom; }; diff --git a/plugins/techdocs/src/test-utils/fixtures/mkdocs-index.ts b/plugins/techdocs/src/test-utils/fixtures/mkdocs-index.ts index afb84dc10b..21d703fa2e 100644 --- a/plugins/techdocs/src/test-utils/fixtures/mkdocs-index.ts +++ b/plugins/techdocs/src/test-utils/fixtures/mkdocs-index.ts @@ -1520,7 +1520,7 @@ css img js mkdocs sitemap.xml
-
+
Copyright © 2014 Tom Christie,