Skip to content
Permalink
Browse files

fix(website): mobile experience of website (#226)

* fix: mobile experience of website

* fix: type fixes
  • Loading branch information
SiTaggart committed Dec 12, 2019
1 parent e8a2d87 commit 203159e33c859c5eb45638707c392c7e3831b0b9
@@ -60,4 +60,4 @@
"rollup-plugin-typescript2": "^0.21.2",
"typescript": "^3.5.2"
}
}
}
@@ -14,7 +14,7 @@ export const ThemeObjectDisplay: React.FC<{}> = () => {
reducedTheme[key] = {};
});
return (
<Box>
<Box as="pre" marginBottom="space70">
<Codeblock>{prettyFormat(reducedTheme)}</Codeblock>
</Box>
);
@@ -10,8 +10,7 @@ export const P: React.FC<PProps> = ({children, variant}) => {
return (
<Text
as="p"
marginTop="space50"
marginBottom="space50"
marginBottom="space70"
lineHeight={variant === 'lead' ? 'lineHeight40' : 'lineHeight30'}
fontSize={variant === 'lead' ? 'fontSize40' : undefined}
>
@@ -22,23 +21,38 @@ export const P: React.FC<PProps> = ({children, variant}) => {

export const UL: React.FC<{}> = props => {
return (
<Text as="ul" marginTop="space50" marginBottom="space50">
<Text as="ul" marginBottom="space70" marginLeft="space70" lineHeight="lineHeight30">
{props.children}
</Text>
);
};

export const OL: React.FC<{}> = props => {
return (
<Text as="ol" marginTop="space50" marginBottom="space50">
<Text as="ol" marginBottom="space70" marginLeft="space70" lineHeight="lineHeight30">
{props.children}
</Text>
);
};

export const LI: React.FC<{}> = props => {
return (
<Text as="li" marginLeft="space60" marginBottom="space20">
<Text
as="li"
marginBottom="space30"
fontSize="fontSize30"
lineHeight="lineHeight30"
fontWeight="fontWeightNormal"
textColor="colorText"
>
{props.children}
</Text>
);
};

export const Pre: React.FC<{}> = props => {
return (
<Text as="pre" marginBottom="space70" lineHeight="lineHeight20">
{props.children}
</Text>
);
@@ -4,11 +4,11 @@ import {themeGet} from '@styled-system/theme-get';
import Highlight, {defaultProps} from 'prism-react-renderer';
import {CodeblockTheme} from './theme';

const StyledPre = styled.pre(props => ({
const StyledCode = styled.code<{}>(props => ({
display: 'block',
fontSize: themeGet('fontSizes.fontSize30')(props),
lineHeight: themeGet('lineHeights.lineHeight30')(props),
overflowX: 'auto',
padding: `${themeGet('space.space40')(props)} ${themeGet('space.space60')(props)}`,
overflow: 'auto',
}));

export type Language =
@@ -58,7 +58,7 @@ const Codeblock: React.FC<CodeblockProps> = ({children, className = 'language-js
{({className: _className, style, tokens, getLineProps, getTokenProps}) => {
const lastLineIndex = tokens.length - 1;
return (
<StyledPre className={_className} style={style}>
<StyledCode className={_className} style={style}>
{tokens.map((line, i) => {
// Codeblocks keep adding an extra blank line, this checks for that and removes it
if (i === lastLineIndex && line.length === 1 && line[0].content === '') {
@@ -75,7 +75,7 @@ const Codeblock: React.FC<CodeblockProps> = ({children, className = 'language-js
</div>
);
})}
</StyledPre>
</StyledCode>
);
}}
</Highlight>
@@ -7,7 +7,7 @@ import {Codeblock, CodeblockProps} from '../codeblock';
import {Table, Tbody, Tr, Th, Td} from '../table';
import {AnchoredHeading} from '../Heading';
import {StyledHr} from '../StyledHr';
import {UL, OL, LI, InlineCode} from '../Typography';
import {UL, OL, LI, InlineCode, Pre} from '../Typography';
// Shortcode imports
import {ComponentHeader} from '../shortcodes/component-header';
import {LivePreview} from '../shortcodes/live-preview';
@@ -24,6 +24,7 @@ const StyledContentWrapper = styled.div`
const StyledContent = styled.div`
/* magic number from Jasons initial layout */
max-width: 816px;
min-width: 0;
`;

// These sub styles fix a bug that causes it to break line-heights
@@ -64,7 +65,7 @@ export const PasteMDXProvider: React.FC<PasteMDXProviderProps> = (props: PasteMD
tr: (props: React.ComponentProps<'tr'>): React.ReactElement => <Tr {...props} />,
th: (props: React.ComponentProps<'th'>): React.ReactElement => <Th {...props} />,
td: (props: React.ComponentProps<'td'>): React.ReactElement => <Td {...props} />,
pre: (props: React.ComponentProps<'pre'>): React.ReactElement => <pre {...props} />,
pre: (props: React.ComponentProps<'pre'>): React.ReactElement => <Pre {...props} />,
code: (props: CodeblockProps): React.ReactElement => <Codeblock {...props} />,
inlineCode: (props: React.ComponentProps<typeof InlineCode>): React.ReactElement => <InlineCode {...props} />,
em: (props: React.ComponentProps<'em'>): React.ReactElement => <em {...props} />,
@@ -1,11 +1,9 @@
// https://github.com/FormidableLabs/react-live
import * as React from 'react';
import {Box} from '@twilio-paste/box';
import {Theme} from '@twilio-paste/theme';
import {LiveProvider, LiveEditor, LiveError, LivePreview as ReactLivePreview} from 'react-live';
import {CodeblockTheme} from './theme';
import {Language} from '../../codeblock';
import {useActiveSiteTheme} from '../../../context/ActiveSiteThemeContext';

interface CodeblockProps {
children: string;
@@ -16,33 +14,30 @@ interface CodeblockProps {

// FIXME use tokens for theme and LiveEditor
const LivePreview: React.FC<CodeblockProps> = ({children, language = 'jsx', scope, disabled = false}) => {
const {theme} = useActiveSiteTheme();
return (
<Theme.Provider theme={theme}>
<Box marginBottom="space110">
<LiveProvider code={children} scope={scope} language={language} theme={CodeblockTheme} disabled={disabled}>
<Box
paddingLeft="space50"
paddingRight="space50"
paddingTop="space80"
paddingBottom="space80"
backgroundColor="colorBackground"
borderTopLeftRadius="borderRadius20"
borderTopRightRadius="borderRadius20"
>
<ReactLivePreview />
</Box>
<Box
css={{padding: '2px 10px', backgroundColor: '#011627', lineHeight: '1.25rem'}}
borderBottomLeftRadius="borderRadius20"
borderBottomRightRadius="borderRadius20"
>
<LiveEditor />
</Box>
<LiveError />
</LiveProvider>
</Box>
</Theme.Provider>
<Box marginBottom="space110">
<LiveProvider code={children} scope={scope} language={language} theme={CodeblockTheme} disabled={disabled}>
<Box
paddingLeft="space50"
paddingRight="space50"
paddingTop="space80"
paddingBottom="space80"
backgroundColor="colorBackground"
borderTopLeftRadius="borderRadius20"
borderTopRightRadius="borderRadius20"
>
<ReactLivePreview />
</Box>
<Box
css={{padding: '2px 10px', backgroundColor: '#011627'}}
borderBottomLeftRadius="borderRadius20"
borderBottomRightRadius="borderRadius20"
>
<LiveEditor />
</Box>
<LiveError />
</LiveProvider>
</Box>
);
};

@@ -22,7 +22,7 @@ const TableOfContents: React.FC<TableOfContentsProps> = ({headings}) => {
// headingsList.push('changelog');

return (
<Box as="nav" aria-label="document outline" order={2} marginTop="space40" marginLeft="space140">
<Box as="nav" aria-label="document outline" order={2} marginTop="space40" marginLeft="space140" minWidth="size20">
<StyledScrollSpy items={headingsList} currentClassName="is-current" rootEl="#site-main">
{// Get heading anchors and convert to #anchor format. Excluding h1 elements.
headings
@@ -1,6 +1,5 @@
import * as React from 'react';
import {css, Global} from '@emotion/core';
import {Helmet} from 'react-helmet';
import {SiteBody} from './SiteBody';
import {Sidebar} from './sidebar';
import {SiteHeader} from './SiteHeader';
@@ -110,9 +109,6 @@ const SiteWrapper: React.FC = ({children}) => {
return (
<ActiveSiteThemeProvider>
<SiteThemeProvider>
<Helmet>
<meta charSet="utf-8" />
</Helmet>
<Global styles={globalStyles} />
<SiteBody>
<Sidebar />
@@ -11,6 +11,7 @@ export const Table = styled.table(props => ({
fontSize: themeGet('fontSizes.fontSize30')(props),
fontWeight: themeGet('fontWeights.fontWeightNormal')(props),
lineHeight: themeGet('lineHeights.lineHeight30')(props),
margin: `${themeGet('space.space70')(props)} 0`,
}));

export const Thead = styled.thead({});
@@ -0,0 +1,40 @@
import * as React from 'react';

interface HTMLProps {
children?: React.ReactElement;
htmlAttributes: {};
headComponents: [];
bodyAttributes: {};
preBodyComponents: [];
body: string;
postBodyComponents: [];
}
const HTML: React.FC<HTMLProps> = ({
htmlAttributes,
headComponents,
bodyAttributes,
preBodyComponents,
body,
postBodyComponents,
}) => {
return (
<html lang="en" {...htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=1024" />
{headComponents}
</head>
<body {...bodyAttributes}>
{preBodyComponents}
<noscript key="noscript" id="gatsby-noscript">
This app works best with JavaScript enabled.
</noscript>
<div key={`body`} id="___gatsby" dangerouslySetInnerHTML={{__html: body}} />
{postBodyComponents}
</body>
</html>
);
};

export default HTML;

1 comment on commit 203159e

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.