chore: misc mobile site fixes

KyleRoss · KyleRoss · commit 618794a8acc1 · 2021-10-13T12:47:32.000-04:00
diff --git a/site/components/Hero.jsx b/site/components/Hero.jsx
@@ -36,7 +36,7 @@ const Hero = () => {
 
   return (
     <section className={clsx('container-fluid', styles.hero)}>
-      <div className={clsx('container', styles.heroInner)}>
+      <div className={clsx('container-wrapper', styles.heroInner)}>
         <div className={styles.heroLeft}>
           <h1 className={clsx('h2', 'mb-2', styles.title)}>The Most Popular Lambda Logger for Node.js<span aria-hidden="true">*</span></h1>
           <div className={styles.downloads}>
@@ -71,7 +71,7 @@ const Hero = () => {
         </div>
       </div>
       <div className={styles.disclaimer}>
-        <div className="container text-center">
+        <div className="container-wrapper text-center">
           <span>*</span> LambdaLog can be used <strong>anywhere</strong> JSON logs are desired!
         </div>
       </div>
diff --git a/site/components/Hero.module.css b/site/components/Hero.module.css
@@ -3,7 +3,7 @@
 }
 
 .heroInner {
-  @apply flex gap-12 flex-col lg:flex-row pt-20 pb-10;
+  @apply flex gap-12 flex-col lg:flex-row pt-8 md:pt-20 pb-10;
 }
 
 .heroLeft {
@@ -26,7 +26,7 @@
 }
 
 .downloads {
-  @apply mt-6 text-3xl text-indigo-300 font-light text-center lg:text-left;
+  @apply mt-6 text-2xl md:text-3xl text-indigo-300 font-light text-center lg:text-left;
 }
 
 .version {
@@ -48,7 +48,7 @@
 }
 
 .btn {
-  @apply inline-flex items-center rounded-full text-white py-4 px-7 font-medium text-2xl shadow-md select-none transition-all;
+  @apply inline-flex items-center rounded-full text-white py-4 px-7 font-medium text-xl md:text-2xl shadow-md select-none transition-all;
 
   & :global(.btn-icon) {
     @apply mr-2;
diff --git a/site/components/Terminal.module.css b/site/components/Terminal.module.css
@@ -31,7 +31,7 @@
 }
 
 .title {
-  @apply text-[0.85rem] text-gray-600 select-none;
+  @apply text-[0.85rem] text-gray-600 select-none truncate;
 }
 
 .spacer {
diff --git a/site/components/base/Footer.module.css b/site/components/base/Footer.module.css
@@ -2,14 +2,14 @@
   @apply text-[0.85rem] leading-snug mt-auto;
 
   & .inner {
-    @apply flex gap-8 items-center flex-col-reverse md:flex-row md:justify-between md:items-start pt-10 pb-16 text-right;
+    @apply flex gap-8 items-center flex-col-reverse md:flex-row md:justify-between md:items-start pt-10 pb-16 text-center md:text-right;
   }
 
   &.main {
     @apply text-slate-400 bg-slate-800;
 
     & .inner {
-      @apply container mx-auto pt-16 px-12 text-left md:flex-row-reverse;
+      @apply container-wrapper mx-auto pt-16 text-center md:text-left md:flex-row-reverse;
     }
 
     & .links {
diff --git a/site/components/base/Header.jsx b/site/components/base/Header.jsx
@@ -12,7 +12,7 @@ const Header = () => {
 
   return (
     <nav id="navigation" className={clsx(styles.mainNav, (breakpoint.isMobile || breakpoint.isTablet) ? 'mobile-nav' : null)}>
-      <div className={clsx('container', styles.navInner)}>
+      <div className={clsx('container-wrapper', styles.navInner)}>
         <Logo withText linked className={styles.navBrand} aria-label="Lambda Log Home" />
 
         <VersionSelect className="ml-auto mr-5 hidden lg:block" />
diff --git a/site/pages/404.jsx b/site/pages/404.jsx
@@ -16,7 +16,7 @@ const Custom404 = () => {
 
       <main className={styles.page}>
         <div className={styles.header}>
-          <div className="container">
+          <div className="container-wrapper">
             <Logo withText primaryColor="#FB923C" secondaryColor="#818CF8" className={styles.logo} />
           </div>
         </div>
diff --git a/site/pages/404.module.css b/site/pages/404.module.css
@@ -19,7 +19,7 @@
 }
 
 .wrapper {
-  @apply container mx-auto px-12 my-20 text-center;
+  @apply container-wrapper mx-auto px-12 my-20 text-center;
 }
 
 .logo404 {
diff --git a/site/pages/Home.module.css b/site/pages/Home.module.css
@@ -6,11 +6,11 @@
   @apply flex items-center;
 
   & svg {
-    @apply w-20 h-auto mr-2;
+    @apply w-12 md:w-16 lg:w-20 h-auto mr-2;
   }
 
   & :global(.logo-text) {
-    @apply text-3xl font-mono text-indigo-50 tracking-tighter;
+    @apply text-xl md:text-2xl lg:text-3xl font-mono text-indigo-50 tracking-tighter;
   }
 }
 
@@ -43,7 +43,7 @@
 }
 
 .btn {
-  @apply inline-flex items-center rounded-full text-white py-4 px-7 font-medium text-2xl shadow-md select-none transition-all;
+  @apply inline-flex items-center rounded-full text-white py-4 px-7 font-medium text-xl md:text-2xl shadow-md select-none transition-all;
 
   & :global(.btn-icon) {
     @apply mr-2;
diff --git a/site/pages/_document.jsx b/site/pages/_document.jsx
@@ -8,11 +8,10 @@ export default class MyDocument extends Document {
   }
 
   render() {
-    const pageProps = this.props?.__NEXT_DATA__?.props?.pageProps;
     return (
       <Html lang="en">
         <Head />
-        <body className={pageProps.isDark ? 'dark' : ''}>
+        <body>
           <Main />
           <NextScript />
         </body>
diff --git a/site/pages/docs/[version]/[[...slug]].jsx b/site/pages/docs/[version]/[[...slug]].jsx
@@ -1,19 +1,22 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { serialize } from 'next-mdx-remote/serialize';
 import { MDXRemote } from 'next-mdx-remote';
 import matter from 'gray-matter';
 import clsx from 'clsx';
 import { Tab, Tabs, TabList, TabPanels, TabPanel } from '@reach/tabs';
+import { MdMenuOpen, MdClose } from 'react-icons/md';
 import torchlight from 'remark-torchlight';
 import remarkHint from 'remark-hint';
 import rehypeSlug from 'rehype-slug';
 import remarkCodeTabs from '@utils/remarkCodeTabs';
+import { BreakpointContext } from '@utils/BreakpointContext';
 import { getDocumentList, getDocumentContent, getNavigation } from '@utils/docs';
 import apiVersions from '@/docs/versions';
 import { ApiVersionContext } from '@utils/ApiVersionContext';
 import Header from '@components/base/Header';
 import Footer from '@components/base/Footer';
+import VersionSelect from '@components/VersionSelect';
 import Head from '@components/Head';
 import Link from '@components/Link';
 import ApiHeading from '@components/ApiHeading';
@@ -25,6 +28,7 @@ function asLinkedHeading(as) {
 
 const DocsPage = ({ meta, nav, source, slug }) => {
   const { version } = useContext(ApiVersionContext);
+  const breakpoint = useContext(BreakpointContext);
 
   function parseVersionedLinks(href) {
     return href.replace(/(\[v\]|%5Bv%5D)/i, version);
@@ -76,16 +80,33 @@ const DocsPage = ({ meta, nav, source, slug }) => {
     TabPanel
   };
 
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  useEffect(() => {
+    if(breakpoint.isDesktop && menuOpen) {
+      setMenuOpen(false);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [breakpoint.isDesktop]);
+
 
   return (
     <>
       <Head meta={meta} />
       <Header />
 
-      <main id="maincontent" className="docs-page container">
-        <aside className="docs-sidebar">
+      <main id="maincontent" className="docs-page container-wrapper">
+        <button type="button" className={clsx('mobile-menu', menuOpen ? 'menu-open' : null)} aria-label="Open documents menu" onClick={() => setMenuOpen(!menuOpen)}>
+          {menuOpen ? <MdClose /> : <MdMenuOpen />}
+        </button>
+        <aside className={clsx('docs-sidebar', menuOpen ? 'mobile-open' : null)}>
           <div className="hidden lg:block h-12 pointer-events-none absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-warm-50" />
           <ul role="menu">
+            {menuOpen && (
+              <li role="menuitem" className="!mb-8">
+                <VersionSelect className="block lg:hidden" />
+              </li>
+            )}
             {nav.map(page => {
               if(page.title) {
                 return (
@@ -98,7 +119,7 @@ const DocsPage = ({ meta, nav, source, slug }) => {
 
               return (
                 <li key={url} role="menuitem">
-                  <Link plain href={url} className={clsx('docs-nav-link', isActive ? 'active' : null)}>{page.text}</Link>
+                  <Link plain href={url} className={clsx('docs-nav-link', isActive ? 'active' : null)} onClick={() => setMenuOpen(false)}>{page.text}</Link>
                 </li>
               );
             })}
diff --git a/site/pages/index.js b/site/pages/index.js
@@ -18,7 +18,7 @@ const Home = () => {
     <>
       <Head meta={meta} />
       <header className={styles.header}>
-        <div className="container">
+        <div className="container-wrapper">
           <Logo withText primaryColor="#FB923C" secondaryColor="#818CF8" className={styles.logo} />
         </div>
       </header>
@@ -27,14 +27,14 @@ const Home = () => {
         <Hero />
 
         <section className="container-fluid bg-indigo-900 pt-0 mb-20">
-          <Terminal title="Install LambdaLog" className="container -bottom-8">
+          <Terminal title="Install LambdaLog" className="container-wrapper -bottom-8">
             <div className="line">
               npm install lambda-log
             </div>
           </Terminal>
         </section>
 
-        <section className="container">
+        <section className="container-wrapper">
           <p className="text-lead mb-4">
             LambdaLog facilitates and enforces logging standards in Node.js processes or applications <strong>anywhere</strong> by formatting your
             log messages as JSON for simple parsing and filtering within log management tools, such as CloudWatch Logs. <em>Works with all of the supported versions of Node.js on Lambda.</em>
@@ -45,7 +45,7 @@ const Home = () => {
           </p>
         </section>
 
-        <section className="container">
+        <section className="container-wrapper">
           <div className="bg-slate-300 text-slate-600 py-6 px-8 md:mx-6 my-12 rounded">
             <strong>Why another <s>Lambda</s> logger?</strong>
             <p>
@@ -57,7 +57,7 @@ const Home = () => {
         </section>
 
         <section className="container-fluid bg-indigo-800 py-12">
-          <div className="container">
+          <div className="container-wrapper">
             <h2 className="text-white mb-1">Features</h2>
             <p className="text-lead text-white mb-8">Anyone can log JSON to the console, but with Lambda Log you also get:</p>
             <div className={styles.featureList}>
@@ -114,7 +114,7 @@ const Home = () => {
           </div>
         </section>
 
-        <section className="container text-center py-16">
+        <section className="container-wrapper text-center py-16">
           <h2 className="font-light">Ready to use LambdaLog?</h2>
 
           <Link plain prefetch={false} href="/docs/latest" className={clsx(styles.btn, styles.docs)}>
diff --git a/site/styles/partials/base.css b/site/styles/partials/base.css
@@ -9,6 +9,12 @@
   }
 }
 
+@layer utilities {
+  .container-wrapper {
+    @apply relative mx-auto w-full md:container px-4 sm:px-6 md:px-8 lg:px-12;
+  }
+}
+
 /************************************************************
  * Body Styles                                              *
  ************************************************************/
@@ -24,7 +30,7 @@ body {
   min-height: stretch;
 
   &.dark {
-    @apply bg-warm-800;
+    @apply bg-warm-900;
   }
 }
 
@@ -43,7 +49,11 @@ a.skip-nav {
 }
 
 .container {
-  @apply mx-auto px-12;
+  @apply mx-auto px-4 sm:px-6 md:px-8 lg:px-12;
+}
+
+.container-wrapper {
+  @apply relative mx-auto md:container px-4 sm:px-6 md:px-8 lg:px-12;
 }
 
 /************************************************************
diff --git a/site/styles/partials/docs.css b/site/styles/partials/docs.css
@@ -1,5 +1,29 @@
+.mobile-menu {
+  @apply block lg:hidden fixed bottom-3 right-2 sm:bottom-4 sm:right-4 z-500 bg-indigo-900 text-white p-3 rounded-full transition-all cursor-pointer;
+
+  &:hover,
+  &:active,
+  &:focus {
+    @apply shadow-xl bg-indigo-700;
+  }
+
+  & svg {
+    @apply w-6 h-6 xs:w-8 xs:h-8 rotate-180;
+  }
+
+  &.menu-open {
+    @apply bg-red-600;
+
+    &:hover,
+    &:active,
+    &:focus {
+      @apply bg-red-500;
+    }
+  }
+}
+
 .docs-sidebar {
-  @apply fixed top-[70px] w-52;
+  @apply hidden lg:block fixed top-[70px] w-52;
   height: calc(100% - 70px);
 
   & > ul {
@@ -49,10 +73,19 @@
       @apply text-warm-700;
     }
   }
+
+  &.mobile-open {
+    @apply block w-screen left-0 right-0 bg-warm-800 bg-opacity-30 backdrop-blur-sm z-100;
+
+    & > ul {
+      @apply bg-white pl-8 shadow-2xl max-w-[290px];
+      width: 80vw;
+    }
+  }
 }
 
 .doc-wrapper {
-  @apply flex flex-col ml-60 pt-10;
+  @apply flex flex-col lg:ml-60 pt-10;
   min-height: calc(100vh - 70px);
 }
 
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
@@ -124,6 +124,7 @@ module.exports = {
         '.container': {
           position: 'relative'
         },
+        '.container-wrapper': {},
         // screen reader only - fixes class not working properly on mobile
         '.sr-only': {
           position: 'absolute',

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`.heroInner {`
`6`		`- @apply flex gap-12 flex-col lg:flex-row pt-20 pb-10;`
	`6`	`+ @apply flex gap-12 flex-col lg:flex-row pt-8 md:pt-20 pb-10;`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.heroLeft {`
`@@ -26,7 +26,7 @@`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`.downloads {`
`29`		`- @apply mt-6 text-3xl text-indigo-300 font-light text-center lg:text-left;`
	`29`	`+ @apply mt-6 text-2xl md:text-3xl text-indigo-300 font-light text-center lg:text-left;`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`.version {`
`@@ -48,7 +48,7 @@`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`.btn {`
`51`		`- @apply inline-flex items-center rounded-full text-white py-4 px-7 font-medium text-2xl shadow-md select-none transition-all;`
	`51`	`+ @apply inline-flex items-center rounded-full text-white py-4 px-7 font-medium text-xl md:text-2xl shadow-md select-none transition-all;`
`52`	`52`
`53`	`53`	`& :global(.btn-icon) {`
`54`	`54`	`@apply mr-2;`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.title {`
`34`		`- @apply text-[0.85rem] text-gray-600 select-none;`
	`34`	`+ @apply text-[0.85rem] text-gray-600 select-none truncate;`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`.spacer {`
Original file line number	Diff line number	Diff line change
`@@ -2,14 +2,14 @@`
`2`	`2`	`@apply text-[0.85rem] leading-snug mt-auto;`
`3`	`3`
`4`	`4`	`& .inner {`
`5`		`- @apply flex gap-8 items-center flex-col-reverse md:flex-row md:justify-between md:items-start pt-10 pb-16 text-right;`
	`5`	`+ @apply flex gap-8 items-center flex-col-reverse md:flex-row md:justify-between md:items-start pt-10 pb-16 text-center md:text-right;`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`&.main {`
`9`	`9`	`@apply text-slate-400 bg-slate-800;`
`10`	`10`
`11`	`11`	`& .inner {`
`12`		`- @apply container mx-auto pt-16 px-12 text-left md:flex-row-reverse;`
	`12`	`+ @apply container-wrapper mx-auto pt-16 text-center md:text-left md:flex-row-reverse;`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`& .links {`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.wrapper {`
`22`		`- @apply container mx-auto px-12 my-20 text-center;`
	`22`	`+ @apply container-wrapper mx-auto px-12 my-20 text-center;`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`.logo404 {`
Original file line number	Diff line number	Diff line change
`@@ -6,11 +6,11 @@`
`6`	`6`	`@apply flex items-center;`
`7`	`7`
`8`	`8`	`& svg {`
`9`		`- @apply w-20 h-auto mr-2;`
	`9`	`+ @apply w-12 md:w-16 lg:w-20 h-auto mr-2;`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`& :global(.logo-text) {`
`13`		`- @apply text-3xl font-mono text-indigo-50 tracking-tighter;`
	`13`	`+ @apply text-xl md:text-2xl lg:text-3xl font-mono text-indigo-50 tracking-tighter;`
`14`	`14`	`}`
`15`	`15`	`}`
`16`	`16`
`@@ -43,7 +43,7 @@`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`.btn {`
`46`		`- @apply inline-flex items-center rounded-full text-white py-4 px-7 font-medium text-2xl shadow-md select-none transition-all;`
	`46`	`+ @apply inline-flex items-center rounded-full text-white py-4 px-7 font-medium text-xl md:text-2xl shadow-md select-none transition-all;`
`47`	`47`
`48`	`48`	`& :global(.btn-icon) {`
`49`	`49`	`@apply mr-2;`