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

Author: KyleRoss

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/api.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/debug-logs.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/examples.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/metadata.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/pretty-printing.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"]
   } */