Skip to content

[docs-infra] Fix external link arrow #41181

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

Merged
alexfauquette merged 5 commits into from
Feb 21, 2024
Merged

[docs-infra] Fix external link arrow #41181

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
241f1ea
fix ads
alexfauquette Feb 19, 2024
4e63678
fix images
alexfauquette Feb 19, 2024
bd11327
use " instead of '
alexfauquette Feb 20, 2024
37426c9
other ads selector
alexfauquette Feb 20, 2024
f28f937
put CSS closer to the code
alexfauquette Feb 21, 2024
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
2 changes: 1 addition & 1 deletion docs/data/material/customization/color/color.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The Material Design [color system](https://m2.material.io/design/color/) can be
The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://m2.material.io/inline-tools/color/).
This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.

<a href="https://m2.material.io/inline-tools/color/" target="_blank" rel="noopener nofollow">
<a href="https://m2.material.io/inline-tools/color/" target="_blank" rel="noopener nofollow" class='remove-link-arrow'>
<img src="/static/images/color/colorTool.png" alt="Official color tool" style="width: 574px" width=1148" height="610" />
</a>
<br />
Expand Down
22 changes: 11 additions & 11 deletions docs/data/material/discover-more/backers/backers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ Sponsorship increases the rate of bug fixes, documentation improvements, and fea
## Diamond sponsors

<p style="display: flex; justify-content: start; align-items: center; flex-wrap: wrap; margin-top: 8px;">
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="octopus.com" href="https://octopus.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 24px;"><img height="128" width="128" src="/static/sponsors/octopus-square.svg" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="doit.com" href="https://www.doit.com/flexsave/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 24px;"><img height="128" width="128" src="/static/sponsors/doit-square.svg" alt="doit" title="Management platform for Google Cloud and AWS" loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="marblism.com" href="https://www.marblism.com/?utm_source=mui" rel="noopener sponsored" target="_blank" style="margin-right: 24px;"><img height="128" width="128" src="/static/sponsors/marblism-square.svg" alt="marblism" title="AI web app generation" loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="octopus.com" href="https://octopus.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class='remove-link-arrow' class='remove-link-arrow' style="margin-right: 24px;"><img height="128" width="128" src="/static/sponsors/octopus-square.svg" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="doit.com" href="https://www.doit.com/flexsave/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class='remove-link-arrow' class='remove-link-arrow' style="margin-right: 24px;"><img height="128" width="128" src="/static/sponsors/doit-square.svg" alt="doit" title="Management platform for Google Cloud and AWS" loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="marblism.com" href="https://www.marblism.com/?utm_source=mui" rel="noopener sponsored" target="_blank" class='remove-link-arrow' class='remove-link-arrow' style="margin-right: 24px;"><img height="128" width="128" src="/static/sponsors/marblism-square.svg" alt="marblism" title="AI web app generation" loading="lazy" /></a>
</p>

Diamond sponsors are those who've pledged \$1,500/month or more to the MUI organization. [Tier benefits](#diamond).
Expand All @@ -20,14 +20,14 @@ Diamond sponsors are those who've pledged \$1,500/month or more to the MUI organ
via [Open Collective](https://opencollective.com/mui-org) or via [the for-profit](https://www.patreon.com/oliviertassinari)

<p style="display: flex; justify-content: start; align-items: center; flex-wrap: wrap;">
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="tidelift.com" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=96" srcset="https://avatars.githubusercontent.com/u/30204434?s=288 3x" alt="tidelift.com" title="Tidelift: Enterprise-ready open-source software." loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="spotify.com" href="https://open.spotify.com?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/251374?s=96" srcset="https://avatars.githubusercontent.com/u/251374?s=288 3x" alt="Spotify" title="Spotify: Music service for accessing millions of songs." loading="lazy"></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="icons8.com" href="https://icons8.com?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/icons8/7fa1641/logo/96.png" srcset="https://images.opencollective.com/icons8/7fa1641/logo/288.png 3x" alt="Icons8" title="Icons8: API for icons, photos, illustrations, and music." loading="lazy"></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="rxdb.info" href="https://rxdb.info/?utm_source=sponsor&utm_medium=opencollective&utm_campaign=opencollective-mui" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://rxdb.info/files/logo/logo_text.svg" alt="RxDB" title="RxDB: Local-first JavaScript database." loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="text-em-all.com" href="https://www.text-em-all.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://avatars.githubusercontent.com/u/1262264?s=96" srcset="https://avatars.githubusercontent.com/u/1262264?s=288 3x" alt="text-em-all.com" title="Text-em-all: Mass text messaging and automated calling." height="96" width="96" loading="lazy"></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="megafamous.com" href="https://megafamous.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="/static/sponsors/megafamous.png" alt="megafamous.com" title="MegaFamous: Buy Instagram followers and likes." loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="dialmycalls.com" href="https://www.dialmycalls.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/96.png" srcset="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/288.png 3x" alt="dialmycalls.com" title="DialMyCalls: Send text messages, calls, and emails." loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="goread.io" href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" style="margin-right: 16px; display:flex;"><img height="110" width="96" src="https://images.opencollective.com/goread_io/eb6337d/logo/96.png" srcset="https://images.opencollective.com/goread_io/eb6337d/logo/288.png 3x" alt="goread.io" title="Goread.io: Instagram followers, likes, views, and comments." loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="tidelift.com" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" class='remove-link-arrow' style="margin-right: 16px;"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=96" srcset="https://avatars.githubusercontent.com/u/30204434?s=288 3x" alt="tidelift.com" title="Tidelift: Enterprise-ready open-source software." loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="spotify.com" href="https://open.spotify.com?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class='remove-link-arrow' style="margin-right: 16px;"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/251374?s=96" srcset="https://avatars.githubusercontent.com/u/251374?s=288 3x" alt="Spotify" title="Spotify: Music service for accessing millions of songs." loading="lazy"></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="icons8.com" href="https://icons8.com?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class='remove-link-arrow' style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/icons8/7fa1641/logo/96.png" srcset="https://images.opencollective.com/icons8/7fa1641/logo/288.png 3x" alt="Icons8" title="Icons8: API for icons, photos, illustrations, and music." loading="lazy"></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="rxdb.info" href="https://rxdb.info/?utm_source=sponsor&utm_medium=opencollective&utm_campaign=opencollective-mui" rel="noopener sponsored" target="_blank" class='remove-link-arrow' style="margin-right: 16px;"><img height="96" width="96" src="https://rxdb.info/files/logo/logo_text.svg" alt="RxDB" title="RxDB: Local-first JavaScript database." loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="text-em-all.com" href="https://www.text-em-all.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class='remove-link-arrow' style="margin-right: 16px;"><img src="https://avatars.githubusercontent.com/u/1262264?s=96" srcset="https://avatars.githubusercontent.com/u/1262264?s=288 3x" alt="text-em-all.com" title="Text-em-all: Mass text messaging and automated calling." height="96" width="96" loading="lazy"></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="megafamous.com" href="https://megafamous.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class='remove-link-arrow' style="margin-right: 16px;"><img height="96" width="96" src="/static/sponsors/megafamous.png" alt="megafamous.com" title="MegaFamous: Buy Instagram followers and likes." loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="dialmycalls.com" href="https://www.dialmycalls.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class='remove-link-arrow' style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/96.png" srcset="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/288.png 3x" alt="dialmycalls.com" title="DialMyCalls: Send text messages, calls, and emails." loading="lazy" /></a>
<a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="goread.io" href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class='remove-link-arrow' style="margin-right: 16px; display:flex;"><img height="110" width="96" src="https://images.opencollective.com/goread_io/eb6337d/logo/96.png" srcset="https://images.opencollective.com/goread_io/eb6337d/logo/288.png 3x" alt="goread.io" title="Goread.io: Instagram followers, likes, views, and comments." loading="lazy" /></a>
</p>

Gold sponsors are those who've pledged \$500/month or more to the MUI organization. [Tier benefits](#gold).
Expand Down
8 changes: 8 additions & 0 deletions docs/src/modules/components/MarkdownElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,6 +403,14 @@ const Root = styled('div')(
opacity: 1,
transform: 'translate(1px, 0)',
},
'& a.remove-link-arrow[target="_blank"]::after': {
// Allows to remove link arrows for images
display: 'none',
},
'& a[href*="carbonads"][target="_blank"]::after': {
Copy link
Member

@oliviertassinari oliviertassinari Feb 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It can be more than carbon ads, I think we need a more generic selectors.

Copy link
Member Author

@alexfauquette alexfauquette Feb 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about targeting links inside those 3 selectors:

document.querySelector('.ea-placement')
document.querySelector('#carbonads')
document.querySelector('.carbonads')

https://github.com/mui/material-ui/blob/master/docs/src/modules/components/Ad.js/#L157-L160

Copy link
Member

@oliviertassinari oliviertassinari Feb 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead, Could we create/add a new class name to an existing DOM node around the ad?

It would make it less brittle to future changes. For example, what if we implement: https://www.notion.so/mui-org/docs-infra-Ad-networks-fcd294a093354a94a329ab9852433fdc?pvs=4#ee1fd00fd3b642f28439c7d1f211695f?

Copy link
Member Author

@alexfauquette alexfauquette Feb 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know what is .ea-placement for? The search in codebase returns 0 files with this text 🤔

Could it be an old elements that does not exist anymmore?

Copy link
Member

@oliviertassinari oliviertassinari Feb 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know what is .ea-placement for?

ea was for EthicalAds

// Remove link arrow for carbon ads
display: 'none',
},
'& a, & a code': {
// Style taken from the Link component
color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
Expand Down