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 closing body` 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?