Meta: use vitepress

docs/.gitignore

@@ -1,6 +1,6 @@
 node_modules/
+.vitepress/dist/
+.vitepress/cache/
 package-lock.json
-*.html
 playground.js
 playground.js.map
-prism.css

docs/.vitepress/config.mts

@@ -0,0 +1,97 @@
+import { defineConfig } from 'vitepress'
+import { htmlEscape } from '@mdit-vue/shared'
+
+let tocMap = new Map<string, string>()
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  outDir: '../out/docs',
+
+  title: "Temporal Documentation",
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    // nav: [
+    //   { text: 'Home', link: '/' },
+    //   { text: 'Examples', link: '/markdown-examples' }
+    // ],
+
+    search: {
+      provider: 'local'
+    },
+
+    sidebar: [
+      { text: 'Ambiguity', link: '/ambiguity' },
+      { text: 'Balancing', link: '/balancing' },
+      { text: 'Calendar Systems', link: '/calendar-review' },
+      { text: 'Cookbook', link: '/cookbook' },
+      {
+        text: 'API',
+        items: ['Temporal.Now',
+          'Temporal.Instant',
+          'Temporal.ZonedDateTime',
+          'Temporal.PlainDate',
+          'Temporal.PlainTime',
+          'Temporal.PlainDateTime',
+          'Temporal.PlainYearMonth',
+          'Temporal.PlainMonthDay',
+          'Temporal.Duration',
+          'Temporal.TimeZone',
+          'Temporal.Calendar'].map(text => ({
+            text,
+            link: '/' + text.split('.').at(-1).toLowerCase()
+          })),
+      },
+      {
+        text: 'Drafts',
+        items: [
+          { text: 'Calendar', link: '/calendar-draft' },
+          { text: 'Parse', link: '/parse-draft' },
+          { text: 'Timezone', link: '/timezone-draft' },
+        ]
+      }
+    ],
+
+    outline: false,
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/tc39/proposal-temporal/issues' }
+    ],
+
+    docFooter: {
+      prev: false,
+      next: false,
+    },
+  },
+
+  markdown: {
+    anchor: {
+      getTokensText (tokens) {
+        const base = tokens
+          .filter(t => ['text', 'code_inline'].includes(t.type))
+          .map(t => t.content)
+          .join('')
+
+        let inStrong = false;
+        for (const token of tokens) {
+          if (token.type === 'strong_open') {
+            inStrong = true;
+          } else if (inStrong && token.type === 'text') {
+            tocMap.set(htmlEscape(base), token.content)
+            return token.content.replace(/[^a-zA-Z]/g, '-');
+          }
+        }
+
+        // https://github.com/valeriangalliat/markdown-it-anchor/blob/master/index.js
+        return encodeURIComponent(String(base).trim().toLowerCase().replace(/\s+/g, '-'));
+      },
+      slugify (s) {
+        return s;
+      },
+    },
+    toc: {
+      format (s) {
+        return tocMap.get(s) || s;
+      }
+    }
+  },
+})

docs/.vitepress/theme/Layout.vue

@@ -0,0 +1,62 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+</script>
+
+<template>
+  <DefaultTheme.Layout>
+    <template #layout-top>
+      <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>
+    </template>
+    <template #doc-after>
+      <footer>
+        <p>
+          This page includes a script which loads an implementation of Temporal in your browser.
+          You can open a console in your browser's developer tools and try it out directly!
+        </p>
+        <p>View this or help contribute on <a href="https://github.com/tc39/proposal-temporal">GitHub</a>.</p>
+      </footer>
+    </template>
+  </DefaultTheme.Layout>
+</template>
+
+<style>
+:root {
+  --vp-layout-top-height: 38px;
+}
+.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);
+  color: #363636;
+  left: 0;
+  padding: 0.4em 0;
+  position: fixed;
+  text-align: center;
+  top: 0;
+  width: 100%;
+  height: 38px;
+  z-index: 40;
+}
+footer {
+  border-top: 1px solid var(--vp-c-default-1);
+  color: var(--vp-c-text-1);
+  font-size: 0.8em;
+  padding: 10px;
+}
+footer a {
+  text-decoration: revert;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -0,0 +1,16 @@
+// https://vitepress.dev/guide/custom-theme
+import './setup.js'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import Layout from './Layout.vue'
+import './style.css'
+
+export default {
+  extends: DefaultTheme,
+  Layout,
+  enhanceApp ({ app }) {
+    app.config.errorHandler = err => {
+      console.error(err);
+    }
+  }
+} satisfies Theme

docs/.vitepress/theme/setup.js

@@ -0,0 +1,55 @@
+import '../../../polyfill/dist/playground.js'
+
+if (typeof window !== 'undefined') {
+  window.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.Calendar,
+        Temporal.PlainDate,
+        Temporal.PlainDateTime,
+        Temporal.Duration,
+        Temporal.PlainMonthDay,
+        Temporal.PlainTime,
+        Temporal.TimeZone,
+        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;
+    }
+  });
+}

docs/.vitepress/theme/style.css

@@ -0,0 +1,150 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+
+/**
+ * Component: Custom Styles
+ * -------------------------------------------------------------------------- */
+
+h3 {
+  border-bottom: 1px solid var(--vp-c-default-1);
+  color: var(--vp-c-text-3);
+  font-weight: normal !important;
+}
+h3 em { font-weight: bold; }
+h3 strong { color: var(--vp-c-text-1); }