chore: improve styles, mobile fixes, add new pages, update docs

site/components/ApiHeading.jsx

@@ -8,7 +8,7 @@ import LinkedHeading from '@components/LinkedHeading';
 import Link from '@components/Link';
 
 
-const ApiHeading = ({ as, type, text, returns, link, scope, since, deprecated }) => {
+const ApiHeading = ({ as, type, text, returns, link, scope, since, deprecated, sticky }) => {
   function getType(t) {
     if(t.url) {
       return (
@@ -71,7 +71,7 @@ const ApiHeading = ({ as, type, text, returns, link, scope, since, deprecated })
       ));
     }
 
-    return <span className="api-heading-badges">{badges}</span>;
+    return <span className="api-heading-badges ml-auto">{badges}</span>;
   }
 
   function formatText(text) {
@@ -126,12 +126,16 @@ const ApiHeading = ({ as, type, text, returns, link, scope, since, deprecated })
   }
 
   return (
-    <LinkedHeading as={as} className={clsx('api-heading', scope, type)} id={slug(text)} title={type}>
+    <LinkedHeading as={as} className={clsx('api-heading', sticky ? 'sticky' : null, scope, type)} id={slug(text)} title={type}>
+      <span className={clsx('api-descriptor')} aria-hidden="true">
+        {scope && <span className="tag tag-scope">{scope}</span>}
+        {type && <span className="tag tag-type">{type}</span>}
+        {getBadges()}
+      </span>
       <span className="api-heading-content">
         {formatText(text)}
         {getReturns()}
       </span>
-      {getBadges()}
     </LinkedHeading>
   );
 };
@@ -144,11 +148,13 @@ ApiHeading.propTypes = {
   returns: PropTypes.string,
   link: PropTypes.string,
   since: PropTypes.string,
-  deprecated: PropTypes.string
+  deprecated: PropTypes.string,
+  sticky: PropTypes.bool
 };
 
 ApiHeading.defaultProps = {
-  as: 'h4'
+  as: 'h4',
+  sticky: false
 };
 
 export default ApiHeading;

site/components/Hero.module.css

@@ -99,7 +99,7 @@
   &:hover,
   &:focus,
   &:active {
-    @apply bg-green-500;
+    @apply bg-green-500 text-white;
   }
 }
 

site/components/base/Footer.jsx

@@ -20,7 +20,7 @@ const Footer = ({ variant }) => {
           </div>
           <ul role="menu" className={styles.links}>
             <li role="menuitem">
-              <Link plain href="https://github.com/KyleRoss/node-lambda-log/blob/master/LICENSE">MIT License</Link>
+              <Link plain href="/license">MIT License</Link>
             </li>
             <li role="menuitem">
               <Link plain href="https://github.com/KyleRoss/node-lambda-log">Github</Link>
@@ -31,6 +31,9 @@ const Footer = ({ variant }) => {
             <li role="menuitem">
               <Link plain href="https://github.com/KyleRoss/node-lambda-log/discussions">Support</Link>
             </li>
+            <li role="menuitem">
+              <Link plain href="/contributors">Contributors</Link>
+            </li>
           </ul>
 
           <Link plain href="https://github.com/KyleRoss/node-lambda-log/issues/new/choose" className={styles.issue}>Report Issue</Link>

site/components/base/Footer.module.css

@@ -67,7 +67,7 @@
 }
 
 .links {
-  @apply flex gap-4 justify-end mt-2;
+  @apply flex flex-wrap gap-4 justify-end mt-2;
 
   & li {
     @apply mb-0;

site/docs/v3/debug-logs.mdx

@@ -22,7 +22,7 @@ log.debug('This is a debug message');
 log.options.debug = true;
 
 log.debug('It can take all the same options as a regular log', { suchAs: 'the metadata object' }, ['and', 'tags'])
-// => { "level": "debug", "msg": "It can take all the same options as a regular log", "suchAs": "the metadata object", "_tags": ["and", "tags"] }
+// => { "_logLevel": "debug", "msg": "It can take all the same options as a regular log", "suchAs": "the metadata object", "_tags": ["and", "tags"] }
 
 // Disable debug mode
 log.options.debug = false;

site/docs/v3/examples.mdx

@@ -21,7 +21,7 @@ exports.handler = async function handler(event) {
   });
 
   log.info('Starting process'); // [tl! highlight]
-  // => { "level": "info", "msg": "Starting process", "_tags": ["index"] } [tl! reindex(null) .select-none]
+  // => { "_logLevel": "info", "msg": "Starting process", "_tags": ["index"] } [tl! reindex(null) .select-none]
 
   // ...
 
@@ -35,7 +35,7 @@ exports.handler = async function handler(event) {
     return false;
   } catch(error) {
     log.error(error).throw; // [tl! highlight]
-    // => { "level": "error", "msg": "...", "name": "Error", "stack": "...", "_tags": ["index"] } [tl! reindex(null) .select-none]
+    // => { "_logLevel": "error", "msg": "...", "name": "Error", "stack": "...", "_tags": ["index"] } [tl! reindex(null) .select-none]
   }
 };
 ```
@@ -52,7 +52,7 @@ const log = new LambdaLog({
 module.exports = {
   getData: async function getData(event) {
     log.info('Calling API with event data', { event }); // [tl! highlight]
-    // => { "level": "info", "msg": "Calling API with event data", "event": { ... }, "_tags": ["api"] } [tl! reindex(null) .select-none]
+    // => { "_logLevel": "info", "msg": "Calling API with event data", "event": { ... }, "_tags": ["api"] } [tl! reindex(null) .select-none]
 
     // ..get data
 
@@ -65,7 +65,7 @@ module.exports = {
     }
 
     log.warn(`Invalid ID provided`, { id }, ['isValidId']); // [tl! highlight]
-    // => { "level": "warn", "msg": "Invalid ID provided", "id": "...", "_tags": ["api", "isValidId"] } [tl! reindex(null) .select-none]
+    // => { "_logLevel": "warn", "msg": "Invalid ID provided", "id": "...", "_tags": ["api", "isValidId"] } [tl! reindex(null) .select-none]
     return false;
   }
 };
@@ -90,7 +90,7 @@ exports.handler = async function handler(event, context) {
   };
 
   log.info('Starting process'); // [tl! highlight]
-  // => { "level": "info", "msg": "Starting process", "functionName": "my-lambda-function", "requestId": "xxx", "_tags": [] } [tl! reindex(null) .select-none]
+  // => { "_logLevel": "info", "msg": "Starting process", "functionName": "my-lambda-function", "requestId": "xxx", "_tags": [] } [tl! reindex(null) .select-none]
 
   // ...
 
@@ -113,7 +113,7 @@ exports.handler = async function handler(event, context) {
   });
 
   log.info('Starting process'); // [tl! highlight]
-  // => { "level": "info", "msg": "Starting process", "functionName": "my-lambda-function", "requestId": "xxx", "_tags": [] } [tl! reindex(null) .select-none]
+  // => { "_logLevel": "info", "msg": "Starting process", "functionName": "my-lambda-function", "requestId": "xxx", "_tags": [] } [tl! reindex(null) .select-none]
 
   // ...
 

site/docs/v3/metadata.mdx

@@ -35,7 +35,7 @@ log.options.meta.prop4 = new Error('It even handles errors!');
 // Example log message:
 log.info('Example with global metadata');
 /* => {
-    "level": "info",
+    "_logLevel": "info",
     "msg": "Example with global metadata",
     "prop1": "test",
     "prop2": 123,
@@ -70,7 +70,7 @@ log.options.meta.prop5 = ['more', 'data'];
 // Example log message:
 log.info('Example with global metadata');
 /* => {
-    "level": "info",
+    "_logLevel": "info",
     "msg": "Example with global metadata",
     "prop1": "test",
     "prop2": 123,
@@ -98,7 +98,7 @@ log.options.meta.prop1 = 'test';
 // Example log message:
 log.info('Example with local metadata', { hello: 'world' });
 /* => {
-    "level": "info",
+    "_logLevel": "info",
     "msg": "Example with local metadata",
     "prop1": "test",
     "hello": "world",
@@ -108,7 +108,7 @@ log.info('Example with local metadata', { hello: 'world' });
 // With primitive types:
 log.info('Example with local metadata', 'This is a string as metadata');
 /* => {
-    "level": "info",
+    "_logLevel": "info",
     "msg": "Example with local metadata",
     "prop1": "test",
     "meta": "This is a string as metadata",
@@ -119,7 +119,7 @@ log.info('Example with local metadata', 'This is a string as metadata');
 const err = new Error('Something bad happened')
 log.info('Example with local metadata', err);
 /* => {
-    "level": "info",
+    "_logLevel": "info",
     "msg": "Example with local metadata",
     "prop1": "test",
     "meta": {
@@ -134,7 +134,7 @@ log.info('Example with local metadata', err);
 const err = new Error('Something bad happened')
 log.info('Example with local metadata', { err });
 /* => {
-    "level": "info",
+    "_logLevel": "info",
     "msg": "Example with local metadata",
     "prop1": "test",
     "err": {

site/docs/v3/pretty-printing.mdx

@@ -31,15 +31,15 @@ const log = new LambdaLog({ // [tl! focus]
 **With `dev` option disabled:**
 ```js
 log.info('Example log without dev mode', { hello: 'world' });
-/* => { "level": "info",  "msg": "Example log without dev mode", "hello": "world", "_tags": [] } */
+/* => { "_logLevel": "info",  "msg": "Example log without dev mode", "hello": "world", "_tags": [] } */
 ```
 
 **With `dev` option enabled:**
 ```js
 log.info('Example log with dev mode', { hello: 'world' });
 /* =>
   {
-    "level": "info",
+    "_logLevel": "info",
     "msg": "Example log with dev mode",
     "hello": "world",
     "_tags": []

site/docs/v3/tagging.mdx

@@ -31,7 +31,7 @@ log.options.tags.push('some-tag', 'another-tag');
 // Example log message:
 log.info('Example with global tags');
 /* => {
-    "level": "info",
+    "_logLevel": "info",
     "msg": "Example with global tags",
     "_tags": ["some-tag", "another-tag"]
   } */
@@ -56,7 +56,7 @@ log.options.tags.push('cool-tag');
 // Example log message:
 log.info('Example with global tags');
 /* => {
-    "level": "info",
+    "_logLevel": "info",
     "msg": "Example with global metadata",
     "_tags": ["some-tag", "another-tag", "cool-tag"]
   } */
@@ -75,7 +75,7 @@ log.options.tags.push('test');
 // Example log message:
 log.info('Example with local tags', null, ['example-tag', 'local-tag-example']);
 /* => {
-    "level": "info",
+    "_logLevel": "info",
     "msg": "Example with local tags",
     "_tags": ["test", "example-tag", "local-tag-example"]
   } */

site/layouts/Page.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { IoArrowForward, IoDocumentText } from 'react-icons/io5';
+import Head from '@components/Head';
+import Logo from '@components/Logo';
+import Link from '@components/Link';
+import Footer from '@components/base/Footer';
+
+import styles from './Page.module.css';
+
+const PageLayout = ({ meta, schema, children }) => {
+  return (
+    <>
+      <Head meta={meta} schema={schema} />
+      <header className={styles.header}>
+        <div className="container-wrapper">
+          <Logo withText primaryColor="#FB923C" secondaryColor="#818CF8" className={styles.logo} />
+        </div>
+      </header>
+
+      <main id="maincontent" className={styles.main}>
+        {children}
+
+        <section className="container-fluid">
+          <div className="container-wrapper text-center py-16">
+            <h2 className="font-light text-2xl">Ready to use LambdaLog?</h2>
+
+            <Link plain prefetch={false} href="/docs/latest" className={clsx(styles.btn, styles.docs)}>
+              <IoDocumentText className="btn-icon" />
+              Read the Docs
+              <IoArrowForward className="btn-arrow" />
+            </Link>
+          </div>
+        </section>
+      </main>
+
+      <Footer variant="main" />
+    </>
+  );
+};
+
+PageLayout.propTypes = {
+  meta: PropTypes.object,
+  schema: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+};
+
+export default PageLayout;

site/layouts/Page.module.css

@@ -0,0 +1,63 @@
+.header {
+  @apply flex flex-col items-center bg-indigo-800 py-6;
+}
+
+.logo {
+  @apply flex items-center;
+
+  & svg {
+    @apply w-12 md:w-16 lg:w-20 h-auto mr-2;
+  }
+
+  & :global(.logo-text) {
+    @apply text-xl md:text-2xl lg:text-3xl font-mono text-indigo-50 tracking-tighter;
+  }
+}
+
+.main {
+  & :global(.page-hero) {
+    @apply container-fluid bg-indigo-800 py-12;
+
+    & h1 {
+      @apply text-center !font-extrabold text-4xl text-white;
+      @apply md:leading-[4rem] md:text-5xl lg:text-left xl:text-6xl;
+      text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
+
+      & small {
+        @apply text-indigo-200 font-medium tracking-tighter;
+      }
+    }
+  }
+}
+
+.btn {
+  @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;
+  }
+
+  & :global(.btn-arrow) {
+    @apply inline-block ml-2 transition-transform;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    @apply shadow-xl;
+
+    & :global(.btn-arrow) {
+      transform: translateX(10px);
+    }
+  }
+}
+
+.docs {
+  @apply bg-green-600;
+
+  &:hover,
+  &:focus,
+  &:active {
+    @apply bg-green-500 text-white;
+  }
+}