Skip to content

Commit

Permalink
[docs] Reduce .html response size (#18356)
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari authored Nov 17, 2019
1 parent 171a626 commit 3772c19
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 109 deletions.
197 changes: 103 additions & 94 deletions docs/src/modules/components/Demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { withStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import Collapse from '@material-ui/core/Collapse';
import NoSsr from '@material-ui/core/NoSsr';
import EditIcon from '@material-ui/icons/Edit';
import CodeIcon from '@material-ui/icons/Code';
import GitHubIcon from '@material-ui/icons/GitHub';
Expand Down Expand Up @@ -75,6 +76,7 @@ const styles = theme => ({
flip: false,
top: 0,
right: theme.spacing(1),
height: theme.spacing(6),
},
justifyContent: 'space-between',
},
Expand All @@ -91,6 +93,7 @@ const styles = theme => ({
},
'& pre': {
overflow: 'auto',
lineHeight: 1.5,
margin: '0px !important',
maxHeight: 1000,
},
Expand Down Expand Up @@ -298,115 +301,121 @@ function Demo(props) {
<div className={classes.anchorLink} id={`${demoName}.tsx`} />
{demoOptions.hideHeader ? null : (
<div className={classes.header}>
<DemoLanguages
demo={demo}
codeOpen={codeOpen}
codeVariant={codeVariant}
gaEventCategory={gaCategory}
onLanguageClick={handleCodeLanguageClick}
/>
<div className={classes.headerButtons}>
<Tooltip
classes={{ popper: classes.tooltip }}
key={showSourceHint}
open={showSourceHint && match ? true : undefined}
PopperProps={{ disablePortal: true }}
title={showCodeLabel}
placement="top"
>
<IconButton
aria-label={showCodeLabel}
data-ga-event-category={gaCategory}
data-ga-event-action="expand"
onClick={handleClickCodeOpen}
color={demoHovered ? 'primary' : 'default'}
>
<CodeIcon fontSize="small" />
</IconButton>
</Tooltip>
<Tooltip classes={{ popper: classes.tooltip }} title={t('viewGitHub')} placement="top">
<IconButton
aria-label={t('viewGitHub')}
data-ga-event-category={gaCategory}
data-ga-event-action="github"
href={demoData.githubLocation}
target="_blank"
rel="noopener nofollow"
>
<GitHubIcon fontSize="small" />
</IconButton>
</Tooltip>
{demoOptions.hideEditButton ? null : (
<NoSsr>
<DemoLanguages
demo={demo}
codeOpen={codeOpen}
codeVariant={codeVariant}
gaEventCategory={gaCategory}
onLanguageClick={handleCodeLanguageClick}
/>
<div className={classes.headerButtons}>
<Tooltip
classes={{ popper: classes.tooltip }}
title={t('codesandbox')}
key={showSourceHint}
open={showSourceHint && match ? true : undefined}
PopperProps={{ disablePortal: true }}
title={showCodeLabel}
placement="top"
>
<IconButton
aria-label={t('codesandbox')}
aria-label={showCodeLabel}
data-ga-event-category={gaCategory}
data-ga-event-action="codesandbox"
onClick={handleClickCodeSandbox}
data-ga-event-action="expand"
onClick={handleClickCodeOpen}
color={demoHovered ? 'primary' : 'default'}
>
<EditIcon fontSize="small" />
<CodeIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
<IconButton
onClick={handleClickMore}
aria-owns={anchorEl ? 'demo-menu-more' : undefined}
aria-haspopup="true"
aria-label={t('seeMore')}
>
<MoreVertIcon fontSize="small" />
</IconButton>
<Menu
id="demo-menu-more"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleCloseMore}
getContentAnchorEl={null}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
<MenuItem
data-ga-event-category={gaCategory}
data-ga-event-action="copy"
onClick={handleClickCopy}
<Tooltip
classes={{ popper: classes.tooltip }}
title={t('viewGitHub')}
placement="top"
>
{t('copySource')}
</MenuItem>
{demoOptions.hideEditButton ? null : (
<MenuItem
<IconButton
aria-label={t('viewGitHub')}
data-ga-event-category={gaCategory}
data-ga-event-action="stackblitz"
onClick={handleClickStackBlitz}
data-ga-event-action="github"
href={demoData.githubLocation}
target="_blank"
rel="noopener nofollow"
>
{t('stackblitz')}
</MenuItem>
<GitHubIcon fontSize="small" />
</IconButton>
</Tooltip>
{demoOptions.hideEditButton ? null : (
<Tooltip
classes={{ popper: classes.tooltip }}
title={t('codesandbox')}
placement="top"
>
<IconButton
aria-label={t('codesandbox')}
data-ga-event-category={gaCategory}
data-ga-event-action="codesandbox"
onClick={handleClickCodeSandbox}
>
<EditIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
<MenuItem
data-ga-event-category={gaCategory}
data-ga-event-action="copy-js-source-link"
onClick={createHandleCodeSourceLink(`${demoName}.js`)}
<IconButton
onClick={handleClickMore}
aria-owns={anchorEl ? 'demo-menu-more' : undefined}
aria-haspopup="true"
aria-label={t('seeMore')}
>
{t('copySourceLinkJS')}
</MenuItem>
<MenuItem
data-ga-event-category={gaCategory}
data-ga-event-action="copy-ts-source-link"
onClick={createHandleCodeSourceLink(`${demoName}.tsx`)}
<MoreVertIcon fontSize="small" />
</IconButton>
<Menu
id="demo-menu-more"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleCloseMore}
getContentAnchorEl={null}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
{t('copySourceLinkTS')}
</MenuItem>
</Menu>
</div>
<MenuItem
data-ga-event-category={gaCategory}
data-ga-event-action="copy"
onClick={handleClickCopy}
>
{t('copySource')}
</MenuItem>
{demoOptions.hideEditButton ? null : (
<MenuItem
data-ga-event-category={gaCategory}
data-ga-event-action="stackblitz"
onClick={handleClickStackBlitz}
>
{t('stackblitz')}
</MenuItem>
)}
<MenuItem
data-ga-event-category={gaCategory}
data-ga-event-action="copy-js-source-link"
onClick={createHandleCodeSourceLink(`${demoName}.js`)}
>
{t('copySourceLinkJS')}
</MenuItem>
<MenuItem
data-ga-event-category={gaCategory}
data-ga-event-action="copy-ts-source-link"
onClick={createHandleCodeSourceLink(`${demoName}.tsx`)}
>
{t('copySourceLinkTS')}
</MenuItem>
</Menu>
</div>
</NoSsr>
</div>
)}
<Collapse in={codeOpen || showPreview} unmountOnExit>
Expand Down
29 changes: 14 additions & 15 deletions docs/src/modules/components/MarkdownElement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,16 @@ renderer.heading = (text, level) => {
// eslint-disable-next-line no-underscore-dangle
const escapedText = textToHash(text, global.__MARKED_UNIQUE__);

return (
`
<h${level}>
<a class="anchor-link" id="${escapedText}"></a>${text}` +
`<a class="anchor-link-style" aria-label="anchor" href="#${escapedText}">
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M46.9 13.9c-.5-.6-1.2-.94-2.07-.94h-6.67l1.86-8.98c.17-.85 0-1.7-.52-2.3-.48-.6-1.2-.94-2.07-.94-1.6 0-3.2 1.27-3.54 2.93l-.5 2.42c0 .07-.07.13-.07.2l-1.37 6.62H20.7l1.88-8.96c.16-.85 0-1.7-.53-2.3-.48-.6-1.2-.94-2.07-.94-1.65 0-3.2 1.27-3.56 2.93l-.52 2.58v.08l-1.37 6.64H7.3c-1.67 0-3.22 1.3-3.58 2.96-.16.86 0 1.7.52 2.3.48.6 1.2.93 2.07.93h6.97l-2 9.65H4c-1.67 0-3.22 1.27-3.56 2.94-.2.8 0 1.67.5 2.27.5.6 1.2.93 2.08.93H10l-1.84 9.05c-.2.84 0 1.67.52 2.3.5.6 1.25.92 2.08.92 1.66 0 3.2-1.3 3.55-2.94l1.94-9.33h11.22l-1.87 9.05c-.15.84.03 1.67.53 2.3.5.6 1.2.92 2.07.92 1.65 0 3.22-1.3 3.56-2.94l1.9-9.33h7c1.6 0 3.2-1.28 3.53-2.93.2-.87 0-1.7-.52-2.3-.48-.62-1.2-.96-2.05-.96h-6.7l2.02-9.65h6.93c1.67 0 3.22-1.27 3.56-2.92.2-.85 0-1.7-.5-2.3l-.04.03zM17.53 28.77l1.95-9.65H30.7l-1.97 9.66H17.5h.03z"/></svg>
</a></h${level}>
`
);
return [
`<h${level}>`,
`<a class="anchor-link" id="${escapedText}"></a>${text}`,
typeof window !== 'undefined'
? `<a class="anchor-link-style" aria-label="anchor" href="#${escapedText}">` +
`<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg>` +
`</a>`
: null,
`</h${level}>`,
].join('');
};

const externs = [
Expand Down Expand Up @@ -194,21 +195,19 @@ const styles = theme => ({
wordBreak: 'break-all',
},
'& .anchor-link-style': {
opacity: 0,
// To prevent the link to get the focus.
display: 'none',
},
'&:hover .anchor-link-style': {
display: 'inline-block',
opacity: 1,
padding: '0 8px',
color: theme.palette.text.hint,
color: theme.palette.text.secondary,
'&:hover': {
color: theme.palette.text.secondary,
color: theme.palette.text.primary,
},
'& svg': {
width: '0.55em',
height: '0.55em',
width: '0.7em',
height: '0.7em',
fill: 'currentColor',
},
},
Expand Down

0 comments on commit 3772c19

Please sign in to comment.