Skip to content
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

Jump to bottom

[docs-infra] Fallback docs inline ads to an in-house ad #39285

Open
wants to merge 5 commits into
base: v5.x
Choose a base branch
from
Open

[docs-infra] Fallback docs inline ads to an in-house ad #39285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0dc3eee
[docs-infra] Fallback docs inline ads to an inhouse ad
alexfauquette Oct 3, 2023
125d5f9
Support call to action defined by carbon
alexfauquette Oct 3, 2023
eeafd18
Merge remote-tracking branch 'upstream/master' into ad-fix
alexfauquette Oct 3, 2023
6b0b102
prettier
alexfauquette Oct 3, 2023
ee411a3
trigger CI
alexfauquette Oct 4, 2023
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/src/modules/components/Ad.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function PleaseDisableAdblock(props) {

const disableAd =
process.env.NODE_ENV !== 'production' && process.env.ENABLE_AD_IN_DEV_MODE !== 'true';
const inHouseAds = [
export const inHouseAds = [
{
name: 'scaffoldhub',
link: 'https://scaffoldhub.io/?partner=1',
Expand Down
29 changes: 25 additions & 4 deletions docs/src/modules/components/AdCarbon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { styled } from '@mui/material/styles';
import loadScript from 'docs/src/modules/utils/loadScript';
import AdDisplay from 'docs/src/modules/components/AdDisplay';
import { adStylesObject } from 'docs/src/modules/components/ad.styles';
import { inHouseAds } from 'docs/src/modules/components/Ad';

const CarbonRoot = styled('span')(({ theme }) => {
const styles = adStylesObject['body-image'](theme);
Expand Down Expand Up @@ -90,7 +91,24 @@ export function AdCarbonInline(props) {
}
const sanitizedAd = await tryFetch();
if (active) {
setAd(sanitizedAd);
setAd(() => {
if (sanitizedAd) {
return {
...sanitizedAd,
// Format ad for the AddDisplay component
link: sanitizedAd.statlink,
description: `<strong>${sanitizedAd.company}</strong> - ${sanitizedAd.description}`,
poweredby: 'Carbon',
};
}
// Falback on inHouse ad
const inHouseAd = inHouseAds[Math.floor(inHouseAds.length * Math.random())];
return {
...inHouseAd,
label: `in-house-${inHouseAd.name}`,
poweredby: 'MUI',
};
});
}
})();

Expand Down Expand Up @@ -120,11 +138,14 @@ export function AdCarbonInline(props) {
className="carbonads"
shape="inline"
ad={{
link: ad.statlink,
link: ad.link,
img: ad.image,
name: ad.company,
description: `<strong>${ad.company}</strong> - ${ad.description}`,
poweredby: 'Carbon',
callToAction: ad.callToAction,
description: ad.description,
call: ad.call,
poweredby: ad.poweredby,
label: ad.label,
}}
/>
</React.Fragment>
Expand Down
14 changes: 11 additions & 3 deletions docs/src/modules/components/AdDisplay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,19 @@ import { adShape } from 'docs/src/modules/components/AdManager';
import { adStylesObject } from 'docs/src/modules/components/ad.styles';

const Root = styled('span', { shouldForwardProp: (prop) => prop !== 'shape' })(
({ theme, shape }) => {
({ theme, shape, callToAction }) => {
const styles = adStylesObject[`body-${shape}`](theme);

const description = styles.description;
if (callToAction) {
description['&:after'].content = `"${callToAction}"`;
}
return {
...styles.root,
'& img': styles.img,
'& a, & a:hover': styles.a,
'& .AdDisplay-imageWrapper': styles.imgWrapper,
'& .AdDisplay-description': styles.description,
'& .AdDisplay-description': description,
'& .AdDisplay-poweredby': styles.poweredby,
};
},
Expand All @@ -25,7 +29,11 @@ export default function AdDisplay(props) {

/* eslint-disable material-ui/no-hardcoded-labels, react/no-danger */
return (
<Root shape={shape === 'inline' ? 'inline' : adShape} className={className}>
<Root
shape={shape === 'inline' ? 'inline' : adShape}
callToAction={ad.callToAction}
className={className}
>
<a
href={ad.link}
target="_blank"
Expand Down