Website HTML tweaks

[plroebuck]

Description

"docs/_includes/default.html"

• Fix <title> (solution courtesy of @XhmikosR)

  <title>{{ title }}</title>

• Remove the shortcut relationship. While allowed, it's meaningless. See here also.

  <link rel="icon" href="favicon.ico" />

• Mocha logo

  • Change the alt attribute to "Mocha logo"
  • Add an id attribute.
  • Migrate width and height attributes to stylesheet

    <img
    id="mocha-logo"
    src="/images/mocha-logo.svg"
    alt="Mocha logo" />

    "docs/css/style.css"

    #mocha-logo {
    width: 192px;
    height: 192px;
    }

• Convert the <span> tag to a <div>. Inline tags may not contain block tags.

  <span>
  <a href="https://mochajs.org">mochajs.org</a> is licensed under a
  <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"
        >Creative Commons Attribution 4.0 International License</a>.
  <p>
   <em>Last updated: {{ 'now' | date: '%a %b %d %H:%M:%S %Y' }}</em>
  </p>
  </span

• Add "rel=home" protocol for Mocha URL. Append slash ("/") to end of URL.

  <a rel="home" href="https://mochajs.org/">mochajs.org</a> is licensed under a

• Use "https" protocol for CC license <a> "href" URL

  <a rel="license" href="https://creativecommons.org/licenses/by/4.0/"
        >Creative Commons Attribution 4.0 International License</a>.

• Convert the<p>/<em> tags with the following <dl> embedding <time>

  <dl class="dl-inline last-modified">
  <dt>Last updated</dt>
  <dd>
    <time
      itemprop="lastModified"
      datetime="{{ 'now' | date: '%Y-%m-%dT%H:%M:%SZ' }}">
            {{ 'now' | date: '%a %b %d %H:%M:%S %Y' }}
    </time>
  </dd>
  </dl>

  "docs/css/style.css"

  .last-modified {
  font-style: italic;
  }
  .dl-inline dt, .dl-inline dd {
  display: inline;
  margin: 0;
  }
  .dl-inline dt:after {
  content: ': ';
  }
  .dl-inline dd + dt:before {
  content: '';
  display: block;
  }

• Annotate all links to outside URLs with these relations:

  • external - Indicate link is not part our website
  • noopener - Security

<a href="https://apex.sh/ping/" rel="external noopener" target="_blank">

Discussion

• Determine if we should also annotate with relation.
  • nofollow - Indicate not an endorsement. See here also.
  • Should we add favicon-like icons for mobile browsers?

[CDNRae]

Hi! I'd like to tackle this issue if that's okay!

[XhmikosR]

I'd add https://validator.w3.org/nu/?doc=https%3A%2F%2Fmochajs.org%2F and also do some HTML5 hygiene like removing the useless end tags (/> -> >).

Finally, I'd stop inlining the SVGs. Since the website is behind Netlify, it has http/2 so this is not really needed. The current HTML size is 118.9KB after brotli compression, which is way too much.

On the other hand, I'd inline avatars.js before the closingbody` tag.

I could have a look, as long as I figure out how local development works :)

[XhmikosR]

OK, I sorted everything out, found an issue when building the docs on Windows too, so I'm gonna submit a few patches.

For the inlining part, I believe it's Netlify's image optimization setting? Or is it something in eleventy?