docs/head.html.part

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Temporal documentation</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
    <script type="application/javascript" src="./playground.js"></script>
    <link rel="stylesheet" type="text/css" href="./prism.css">
    <script>
      Temporal = { ...temporal.Temporal };
      Object.assign(Intl, temporal.Intl);

      // Customize output of Temporal objects for Chrome DevTools
      if (!window.devtoolsFormatters)
        window.devtoolsFormatters = [];
      window.devtoolsFormatters.push({
        header(x) {
          for (const type of [
            Temporal.Instant,
            Temporal.PlainDate,
            Temporal.PlainDateTime,
            Temporal.Duration,
            Temporal.PlainMonthDay,
            Temporal.PlainTime,
            Temporal.PlainYearMonth
          ]) {
            if (x instanceof type) return ['span', {}, `${x[Symbol.toStringTag]} <${x}>`];
          }
          return null;
        },
        hasBody(x) {
          return x instanceof Temporal.Duration;
        },
        body(x) {
          const out = ['ol', { style: 'list-style-type: none;' }];
          for (const prop of [
            'years',
            'months',
            'weeks',
            'days',
            'hours',
            'minutes',
            'seconds',
            'milliseconds',
            'microseconds',
            'nanoseconds'
          ]) {
            if (x[prop] !== 0) out.push([
              'li',
              {},
              ['span', { style: 'color: purple;' }, prop],
              `: `,
              ['span', { style: 'color: blue;' }, x[prop]]
            ]);
          }
          return out;
        }
      });
    </script>
    <style>
      /* https://github.com/kognise/water.css/blob/master/src/variables-light.css */
      :root {
        --background: #efefef;
        --text-muted: #999999;
        --text-bright: #000000;
        --text-width: 900px;
        --variable: #39a33c;
      }
      body {
        font-size: 18px;
        max-width: var(--text-width);
        padding-top: 40px;  /* extra padding for banner */
        line-height: 1.5;
      }
      pre { border-left: 4px solid var(--variable); }
      code {
        padding: 1px 5px 2px 5px;
        line-height: 1.1;
        display: inline-block;
      }
      a code { color: inherit; }
      a code:hover { text-decoration: underline; }
      pre code { line-height: 1.4; }
      pre code[class*="language-"] { font-size: 0.85em; }
      pre[class*="language-"] { padding: 0.5em; }
      h1 { margin-top: 13px; }
      h2 { border-bottom: 2px solid var(--text-muted); margin-top: 2em; }
      h3 {
        border-bottom: 1px solid var(--text-muted);
        color: var(--text-muted);
        font-weight: normal;
      }
      h3 em { font-weight: bold; }
      h3 strong { color: var(--text-bright); }
      :not(h2) + h3 { margin-top: 2em; }
      footer {
        border-top: 1px solid var(--background);
        color: var(--text-muted);
        font-size: 0.8em;
        margin-top: 2em;
        padding-top: 10px;
      }
      .heading-link {
        left: calc((100vw - var(--text-width)) / 2 - 1.5em);
        opacity: 0;
        position: absolute;
        transition: opacity 150ms;
      }
      .heading-link:hover { text-decoration: none; }
      .heading-link::before { content: '¶'; }
      h2:hover .heading-link, h3:hover .heading-link, h4:hover .heading-link, h5:hover .heading-link { opacity: 0.75; }
      .banner {
        /* Gradient from https://joshnh.com/weblog/how-to-make-an-alert-bar/ */
        background-color: #fce94f;
        background-image: linear-gradient(135deg,
                                          transparent,
                                          transparent 25%,
                                          rgba(0, 0, 0, .05) 25%,
                                          rgba(0, 0, 0, .05) 50%,
                                          transparent 50%,
                                          transparent 75%,
                                          rgba(0, 0, 0, .05) 75%,
                                          rgba(0, 0, 0, .05));
        background-size: 20px 20px;
        box-shadow: 0 5px 0 rgba(0, 0, 0, .1);
        left: 0;
        padding: 0.4em 0;
        position: absolute;
        text-align: center;
        top: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="banner">
      This Stage 3 proposal is <strong><a href="https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/">experimental.</a></strong>
      <strong>Do</strong> try it and <a href="https://github.com/tc39/proposal-temporal/issues">report bugs</a>; <strong>don't</strong> use it in production!
    </div>