organize src directory, lighthouse fixes

2025-12-19 04:47:44 +00:00 · 2022-05-10 10:47:55 -07:00
parent 9e7ed47545
commit 766f8f42d4
38 changed files with 129 additions and 89 deletions
--- a/data/home.yml
+++ b/data/home.yml
@@ -6,7 +6,11 @@ hero:
  cta: Sign up for free
  url: https://jambonz.us/register
 tech:
-  image: /images/Jambonz_app_screenshot.png
+  image:
+    src: /images/Jambonz_app_screenshot.png
+    alt: jambonz node-red screenshot
+    width: 1280
+    height: 842
  notes:
    -
      title: Adapts to your needs
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
    "pretest": "node cypress/scripts/fixtures.js",
    "test": "cypress run --headless --browser chrome",
    "posttest": "rm -rf cypress/fixtures",
-    "lint": "eslint components pages lib --ext js"
+    "lint": "eslint src/components src/lib pages --ext js"
  },
  "author": "Jambonz Developers",
  "license": "MIT",
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,6 +1,6 @@
-import Layout from '../components/layout';
-import { Hero } from '../components/jambonz-ui';
-import { getData } from '../lib/data';
+import Layout from '../src/components/layout';
+import { Hero } from '../src/components/jambonz-ui';
+import { getData } from '../src/lib/data';

 export default function Page404({ data }) {
  return (
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,4 +1,4 @@
-import '../styles/global.scss';
+import '../src/styles/global.scss';

 export default function App({Component, pageProps}) {
  return <Component {...pageProps} />;
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
--- a/pages/docs/[[...slug]].js
+++ b/pages/docs/[[...slug]].js
@@ -2,9 +2,9 @@ import { useEffect } from 'react';

 import Prism from 'prismjs';

-import Layout from '../../components/layout';
-import Markdown from '../../components/markdown';
-import { getData, getMarkdown, getMarkdownPaths } from '../../lib/data';
+import Layout from '../../src/components/layout';
+import Markdown from '../../src/components/markdown';
+import { getData, getMarkdown, getMarkdownPaths } from '../../src/lib/data';

 export default function Docs({ data, docs }) {
  useEffect(() => {
--- a/pages/index.js
+++ b/pages/index.js
@@ -2,15 +2,15 @@ import { nanoid } from 'nanoid';
 import classNames from 'classnames';
 import { useState, useEffect, useRef } from 'react';

-import Layout from '../components/layout';
-import { Latest, Hero, Icon, Button, H6, H5, H2, P, MS, normalizeSubtext, normalizeSlug, useMobileMedia } from '../components/jambonz-ui';
-import { getData } from '../lib/data';
+import Layout from '../src/components/layout';
+import { Latest, Hero, Icon, Button, H6, H4, H3, H2, P, MS, normalizeSubtext, normalizeSlug, useMobileMedia } from '../src/components/jambonz-ui';
+import { getData } from '../src/lib/data';

 function Tech({data}) {
  return (
    <section className="tech wrap">
      <div className="tech__image">
-        <img src={data.image} />
+        <img src={data.image.src} width={data.image.width} height={data.image.height} alt={data.image.alt} />
      </div>
      <ul className="tech__notes">
        {data.notes.map((note) => {
@@ -61,10 +61,10 @@ function Dilemma({data}) {
          <H2>{data.headline}</H2>
        </div>
        <div className="dilemma__subtext">
-          <H5>
+          <H3 className="h5">
            {/* Use dangerouslySetInnerHTML to render inline spans from YAML data */}
            {normalizeSubtext(data.subtext).map((subtext) => <div key={nanoid()} dangerouslySetInnerHTML={{ __html: subtext }} />)}
-          </H5>
+          </H3>
        </div>
        <div className="dilemma__tables">
          {data.tables.map((table) => {
@@ -83,7 +83,7 @@ function Dilemma({data}) {
            return (
              <div key={slug} className={classNames(tableClasses)}>
                <div className="dilemma__table__title" onClick={() => handleToggle(slug)}>
-                  {table.logo ? <img src={table.logo} /> : <P><strong>{table.title}</strong></P>}
+                  {table.logo ? <img src={table.logo} width="128" height="42" alt="jambonz" /> : <P><strong>{table.title}</strong></P>}
                  <span className="dilemma__table__toggle" >
                    {isActiveToggle ? <Icon name="ChevronUp" /> : <Icon name="ChevronDown" />}
                  </span>
@@ -124,7 +124,7 @@ function BYO({data}) {
          <H2>{data.headline}</H2>
        </div>
        <div className="byo__subtext">
-          <H5>{data.subtext}</H5>
+          <H3 className="h5">{data.subtext}</H3>
        </div>
        <div className="byo__icons icons">
          {data.icons.map((icon) => {
@@ -132,10 +132,10 @@ function BYO({data}) {
          })}
        </div>
        <div className="byo__comment">
-          <H5>
+          <H4 className="h5">
            {/* Use dangerouslySetInnerHTML to render inline link from YAML data */}
            <div dangerouslySetInnerHTML={{ __html: data.comment }} />
-          </H5>
+          </H4>
        </div>
        <div className="byo__cta">
          <Button href={data.url} subStyle="dark" target="_blank">{data.cta}</Button>
--- a/pages/jambonz-ui.js
+++ b/pages/jambonz-ui.js
@@ -1,8 +1,8 @@
 import Link from 'next/link';

-import Layout from '../components/layout';
-import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon } from '../components/jambonz-ui';
-import { getData } from '../lib/data';
+import Layout from '../src/components/layout';
+import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon } from '../src/components/jambonz-ui';
+import { getData } from '../src/lib/data';

 export default function JambonzUI({ data }) {
  const pageData = data['jambonz-ui'];
--- a/pages/open-source/[[...slug]].js
+++ b/pages/open-source/[[...slug]].js
@@ -2,9 +2,9 @@ import { useEffect } from 'react';

 import Prism from 'prismjs';

-import Layout from '../../components/layout';
-import Markdown from '../../components/markdown';
-import { getData, getMarkdown, getMarkdownPaths } from '../../lib/data';
+import Layout from '../../src/components/layout';
+import Markdown from '../../src/components/markdown';
+import { getData, getMarkdown, getMarkdownPaths } from '../../src/lib/data';

 export default function OpenSource({ data, docs }) {
  useEffect(() => {
--- a/pages/pricing.js
+++ b/pages/pricing.js
@@ -1,8 +1,8 @@
 import { nanoid } from 'nanoid';

-import Layout from '../components/layout';
-import { Hero, Icon, Button, H2, H6, P, normalizeSubtext } from '../components/jambonz-ui';
-import { getData } from '../lib/data';
+import Layout from '../src/components/layout';
+import { Hero, Icon, Button, H2, P, normalizeSubtext } from '../src/components/jambonz-ui';
+import { getData } from '../src/lib/data';

 function Structure({data}) {
  return (
@@ -10,7 +10,7 @@ function Structure({data}) {
      <div className="wrap structure__text">
        <>
          {normalizeSubtext(data.text).map((text) => {
-            return <H6 key={nanoid()}>{text}</H6>;
+            return <P className="h6" key={nanoid()}>{text}</P>;
          })}
        </>
      </div>
--- a/pages/privacy.js
+++ b/pages/privacy.js
@@ -1,15 +1,17 @@
-import Layout from '../components/layout';
-import { Hero, TextLayout } from '../components/jambonz-ui';
-import { getData, getParsedMarkdown } from '../lib/data';
+import Layout from '../src/components/layout';
+import { Hero, TextLayout, normalizeTextLayout } from '../src/components/jambonz-ui';
+import { getData, getParsedMarkdown } from '../src/lib/data';
 import path from 'path';

 export default function Privacy({ data, parsed }) {
+  parsed.contentHtml = normalizeTextLayout(parsed.contentHtml);
+
  return (
    <Layout siteData={data.site}>
      <Hero data={data.privacy.hero} subStyle="privacy" />
-      <div className="wrap pad-b">
-        <TextLayout data={parsed} />
-      </div>
+      <section className="wrap pad-b">
+        <TextLayout data={parsed} name="privacy" />
+      </section>
    </Layout>
  );
 }
--- a/pages/terms.js
+++ b/pages/terms.js
@@ -1,15 +1,17 @@
-import Layout from '../components/layout';
-import { Hero, TextLayout } from '../components/jambonz-ui';
-import { getData, getParsedMarkdown } from '../lib/data';
+import Layout from '../src/components/layout';
+import { Hero, TextLayout, normalizeTextLayout } from '../src/components/jambonz-ui';
+import { getData, getParsedMarkdown } from '../src/lib/data';
 import path from 'path';

 export default function Terms({ data, parsed }) {
+  parsed.contentHtml = normalizeTextLayout(parsed.contentHtml);
+
  return (
    <Layout siteData={data.site}>
      <Hero data={data.terms.hero} subStyle="terms" />
-      <div className="wrap pad-b">
-        <TextLayout data={parsed} />
-      </div>
+      <section className="wrap pad-b">
+        <TextLayout data={parsed} name="terms" />
+      </section>
    </Layout>
  );
 }
--- a/pages/why.js
+++ b/pages/why.js
@@ -1,8 +1,8 @@
 import { nanoid } from 'nanoid';

-import Layout from '../components/layout';
-import { Hero, Icon, Button, H5, H2, P } from '../components/jambonz-ui';
-import { getData } from '../lib/data';
+import Layout from '../src/components/layout';
+import { Hero, Icon, Button, H3, H2, P } from '../src/components/jambonz-ui';
+import { getData } from '../src/lib/data';

 function Facts({data}) {
  return (
@@ -14,7 +14,7 @@ function Facts({data}) {
              <div key={nanoid()} className="facts__item">
                <Icon name={fact.icon} mainStyle="fill" />
                <div className="facts__text">
-                  <H5><strong>{fact.title}</strong></H5>
+                  <P className="h5"><strong>{fact.title}</strong></P>
                  <P>{fact.text}</P>
                </div>
              </div>
@@ -36,7 +36,7 @@ function OS({data}) {
          </H2>
        </div>
        <div className="os__subtext">
-          <H5>{data.subtext}</H5>
+          <H3 className="h5">{data.subtext}</H3>
        </div>
        <div className="btns os__btns">
          {data.buttons.map((button) => {
@@ -49,7 +49,7 @@ function OS({data}) {
          })}
        </div>
        <div className="os__logo">
-          <img src={data.logo} />
+          <img src={data.logo} width="313" height="71" alt="drachtio" />
          <Button href="https://github.com/sponsors/drachtio/" target="_blank" mainStyle="pill" subStyle="jambonz">
            <Icon name="Heart" />
            <span>Sponsor</span>
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -15,7 +15,8 @@
    {
      "src": "logo512.png",
      "type": "image/png",
-      "sizes": "512x512"
+      "sizes": "512x512",
+      "purpose": "any maskable"
    }
  ],
  "start_url": ".",
--- a/src/components/footer.js
+++ b/src/components/footer.js
--- a/src/components/jambonz-ui.js
+++ b/src/components/jambonz-ui.js
@@ -19,6 +19,17 @@ export function normalizeSlug(key) {
  return String(key.toLowerCase()).split(' ').join('-');
 }

+// For accessibility issues we can "fix" our limitations with markdown and remark-html
+export function normalizeTextLayout(html) {
+  return html
+    .replace(/<(h[1-6])>/g, (m, p1) => {
+      return `<div class="${p1}">`;
+    })
+    .replace(/<\/(h[1-6])>/g, (m, p1) => {
+      return '</div>';
+    });
+}
+
 // Normalize how we listen for media queries
 // Intentionally `null` default value -- will throw Error
 export function useMatchMedia(mediaQuery = null) {
@@ -52,32 +63,32 @@ export function useMobileMedia() {
  return useMatchMedia('(max-width: 896px)');
 }

-export function H1({ children }) {
-  return <h1>{children}</h1>;
+export function H1({ children, ...rest }) {
+  return <h1 {...rest}>{children}</h1>;
 }

-export function H2({ children }) {
-  return <h2>{children}</h2>;
+export function H2({ children, ...rest }) {
+  return <h2 {...rest}>{children}</h2>;
 }

-export function H3({ children }) {
-  return <h3>{children}</h3>;
+export function H3({ children, ...rest }) {
+  return <h3 {...rest}>{children}</h3>;
 }

-export function H4({ children }) {
-  return <h4>{children}</h4>;
+export function H4({ children, ...rest }) {
+  return <h4 {...rest}>{children}</h4>;
 }

-export function H5({ children }) {
-  return <h5>{children}</h5>;
+export function H5({ children, ...rest }) {
+  return <h5 {...rest}>{children}</h5>;
 }

-export function H6({ children }) {
-  return <h6>{children}</h6>;
+export function H6({ children, ...rest }) {
+  return <h6 {...rest}>{children}</h6>;
 }

-export function P({children}) {
-  return <p>{children}</p>;
+export function P({ children, ...rest }) {
+  return <p {...rest}>{children}</p>;
 }

 export function M({ children }) {
@@ -107,12 +118,12 @@ export function Latest({ data }) {
          <H2>{data.headline}</H2>
        </div>
        <div className="latest__subtext">
-          <H5>
+          <H3 className="h5">
            {/* Use dangerouslySetInnerHTML to render inline links from YAML data */}
            {normalizeSubtext(data.subtext).map((subtext) => {
              return <div key={nanoid()} dangerouslySetInnerHTML={{ __html: subtext }} />;
            })}
-          </H5>
+          </H3>
        </div>
      </div>
    </section>
@@ -136,11 +147,11 @@ export function Hero({ data, subStyle }) {
          <H1>{data.headline}</H1>
        </div>
        <div className="hero__subtext">
-          <H5>
+          <H2 className="h5">
            {normalizeSubtext(data.subtext).map((subtext) => {
              return <div key={nanoid()}>{subtext}</div>;
            })}
-          </H5>
+          </H2>
        </div>
        {data.cta && (
          <div className="hero__cta">
@@ -201,10 +212,10 @@ export function Icon({ name, mainStyle = 'inline', subStyle = null, ...props })
  return <Component {...props} />;
 }

-export function TextLayout({ data }) {
+export function TextLayout({ data, name }) {
  return (
-    <div className="text__layout">
-      <div className="text__layout__wrap" dangerouslySetInnerHTML={{ __html: data.contentHtml }} />
+    <div className={`text-layout text-layout--${name}`}>
+      <div className="text-layout__wrap" dangerouslySetInnerHTML={{ __html: data.contentHtml }} />
    </div>
  );
 }
--- a/src/components/layout.js
+++ b/src/components/layout.js
--- a/src/components/markdown.js
+++ b/src/components/markdown.js
@@ -84,7 +84,7 @@ export default function Markdown({scope, data, docs}) {
    <div className="markdown">
      <div className="wrap markdown__wrap">
        <MarkdownSidebar scope={scope} data={data} />
-        <TextLayout data={docs} />
+        <TextLayout data={docs} name={scope} />
      </div>
    </div>
  );
--- a/src/components/navi.js
+++ b/src/components/navi.js
@@ -90,8 +90,8 @@ export default function Navi({ siteData }) {
    <nav className={classNames(classes)}>
      <div className="wrap navi__wrap">
        <Link href="/">
-          <a className="navi__logo">
-            <img src="/svg/jambonz.svg" width="128" />
+          <a className="navi__logo" title="jambonz">
+            <img src="/svg/jambonz.svg" width="128" height="42" alt="jambonz" />
          </a>
        </Link>
        <ul className="navi__links">
--- a/src/lib/data.js
+++ b/src/lib/data.js
--- a/src/styles/_backgrounds.scss
+++ b/src/styles/_backgrounds.scss
--- a/src/styles/_buttons.scss
+++ b/src/styles/_buttons.scss
@@ -24,7 +24,7 @@
    background-color: transparent;
    border: 2px solid $jambonz;
    color: $jambonz;
-    padding: 10px 26px 8px;
+    padding: 10px 26px;

    &--white {
      color: $white;
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -4,6 +4,7 @@
         url('/fonts/objectivity-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
+    font-display: swap;
 }
@font-face {
    font-family: $font-regular-italic;
@@ -11,6 +12,7 @@
         url('/fonts/objectivity-regularslanted-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
+    font-display: swap;
 }

@font-face {
@@ -19,6 +21,7 @@
         url('/fonts/objectivity-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
+    font-display: swap;
 }
@font-face {
    font-family: $font-medium-italic;
@@ -26,6 +29,7 @@
         url('/fonts/objectivity-mediumslanted-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
+    font-display: swap;
 }

@font-face {
@@ -34,6 +38,7 @@
         url('/fonts/objectivity-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
+    font-display: swap;
 }
@font-face {
    font-family: $font-bold-italic;
@@ -41,4 +46,5 @@
         url('/fonts/objectivity-boldslanted-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
+    font-display: swap;
 }
--- a/src/styles/_footer.scss
+++ b/src/styles/_footer.scss
--- a/src/styles/_icons.scss
+++ b/src/styles/_icons.scss
@@ -3,7 +3,7 @@
  background-color: $jambonz;
  width: $icon-size-1;
  height: $icon-size-1;
-  border-radius: 24px;
+  border-radius: 100%;
  position: relative;

  @media (max-width: $width-mobile) {
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
--- a/src/styles/_markdown.scss
+++ b/src/styles/_markdown.scss
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
--- a/src/styles/_navi.scss
+++ b/src/styles/_navi.scss
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -78,4 +78,5 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,

 img {
    max-width: 100%;
+    height: auto;
    }
--- a/src/styles/_text-layout.scss
+++ b/src/styles/_text-layout.scss
@@ -1,4 +1,4 @@
-.text__layout {
+.text-layout {
  max-width: $width-tablet-2;
  width: 100%;
  margin: 0 auto;
--- a/src/styles/_typography.scss
+++ b/src/styles/_typography.scss
--- a/src/styles/_vars.scss
+++ b/src/styles/_vars.scss
@@ -28,23 +28,23 @@ $font-mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 /******************************************************************************
 * Font sizes
 *******************************************************************************/
-$h1-size: 48px;
-$h2-size: 40px;
-$h3-size: 36px;
-$h4-size: 32px;
-$h5-size: 24px;
-$h6-size: 20px;
-$p-size: 18px;
-$m-size: 16px;
-$ms-size: 14px;
-$mxs-size: 12px;
+$h1-size: 3rem;
+$h2-size: 2.5rem;
+$h3-size: 2.25rem;
+$h4-size: 2rem;
+$h5-size: 1.5rem;
+$h6-size: 1.25rem;
+$p-size: 1.125rem;
+$m-size: 1rem;
+$ms-size: 0.875rem;
+$mxs-size: 0.75rem;

 /******************************************************************************
 * Icon sizes
 *******************************************************************************/
-$icon-size-1: 48px;
-$icon-size-2: 40px;
-$icon-size-3: 36px;
+$icon-size-1: $h1-size;
+$icon-size-2: $h2-size;
+$icon-size-3: $h3-size;

 /******************************************************************************
 * Sizes
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
--- a/src/styles/pages/_home.scss
+++ b/src/styles/pages/_home.scss
--- a/src/styles/pages/_jambonz-ui.scss
+++ b/src/styles/pages/_jambonz-ui.scss
--- a/src/styles/pages/_pricing.scss
+++ b/src/styles/pages/_pricing.scss
@@ -13,7 +13,7 @@
    max-width: 960px;
    @include flex-cols();

-    h6 + h6 {
+    p + p {
      margin-top: 32px;

      @media (max-width: $width-mobile) {
--- a/src/styles/pages/_why.scss
+++ b/src/styles/pages/_why.scss