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

* fix: mobile experience of website

* fix: type fixes

packages/paste-core/core-bundle/package.json

@@ -60,4 +60,4 @@
     "rollup-plugin-typescript2": "^0.21.2",
     "typescript": "^3.5.2"
   }
-}
+}

packages/paste-website/src/components/ThemeObjectDisplay.tsx

@@ -14,7 +14,7 @@ export const ThemeObjectDisplay: React.FC<{}> = () => {
     reducedTheme[key] = {};
   });
   return (
-    <Box>
+    <Box as="pre" marginBottom="space70">
       <Codeblock>{prettyFormat(reducedTheme)}</Codeblock>
     </Box>
   );

packages/paste-website/src/components/Typography.tsx

@@ -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>
   );

packages/paste-website/src/components/codeblock/index.tsx

@@ -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>

packages/paste-website/src/components/paste-mdx-provider/index.tsx

@@ -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} />,

packages/paste-website/src/components/shortcodes/live-preview/index.tsx

@@ -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>
   );
 };
 

packages/paste-website/src/components/shortcodes/table-of-contents/index.tsx

@@ -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

packages/paste-website/src/components/site-wrapper/index.tsx

@@ -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 />

packages/paste-website/src/components/table/index.tsx

@@ -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({});

packages/paste-website/src/html.tsx

@@ -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;