Add rehype-twoslash

* check most examples with typescript * add special twoslash directives to code blocks so that twoslash understand partial examples * add dependencies for these examples, so typescript can check them * remove theme-ui docs here, their site has info, link to it
mdx-js · Jul 4, 2024 · 11ac939 · 11ac939
1 parent b749d38
commit 11ac939
Show file tree

Hide file tree

Showing 29 changed files with 2,424 additions and 682 deletions.
diff --git a/docs/_asset/index.css b/docs/_asset/index.css
@@ -297,7 +297,6 @@ pre code {
 }
 
 pre code,
-.hljs,
 .frame-body,
 .frame-tab-item-selected {
   background-color: #fafafa !important; /* Color from one-light */
@@ -583,7 +582,6 @@ button.success {
 
 .navigation .icon {
   display: block;
-  vertical-align: middle;
   width: auto;
   height: calc(1em + 1ex);
 }
@@ -660,9 +658,6 @@ button.success {
   padding-inline-start: calc(0.5 * (1em + 1ex));
 }
 
-.nav-description {
-}
-
 .skip-to-navigation {
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -837,11 +832,13 @@ button.success {
   overflow-y: auto;
 }
 
-.frame-tab-bar + pre {
+.frame-tab-bar + pre,
+.frame-tab-bar + .highlight > pre {
   margin-block-start: 0;
 }
 
-.frame-tab-bar + pre code {
+.frame-tab-bar + pre code,
+.frame-tab-bar + .highlight > pre code {
   --squircle-radius: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
@@ -946,6 +943,55 @@ details[open] {
   padding: calc(1em + 1ex);
 }
 
+.rehype-twoslash-completion-deprecated {
+  opacity: 0.5;
+}
+
+.rehype-twoslash-popover-target {
+  cursor: default;
+}
+
+.highlight:is(:hover, :focus-within) .rehype-twoslash-popover-target {
+  background-color: var(--gray-2);
+}
+
+/* Wavy underline for errors. */
+.rehype-twoslash-error-target {
+  background-repeat: repeat-x;
+  background-position: bottom left;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" enable-background="new 0 0 6 3" height="3" width="6"><g fill="%23c94824"><polygon points="5.5,0 2.5,3 1.1,3 4.1,0"/><polygon points="4,0 6,2 6,0.6 5.4,0"/><polygon points="0,2 1,3 2.4,3 0,0.6"/></g></svg>');
+}
+
+/* The content that will be shown in the tooltip. */
+.rehype-twoslash-popover {
+  position: absolute;
+  max-width: calc(45 * (1em + 1ex));
+  padding: calc(0.5 * (1em + 1ex));
+  margin: 0;
+  background-color: var(--bg);
+  border: 1px solid var(--gray-2);
+  border-radius: 3px;
+}
+
+/* No padding if we have a padded code block (and perhaps more blocks) */
+.rehype-twoslash-popover:has(.rehype-twoslash-popover-code) {
+  padding: 0;
+}
+
+.rehype-twoslash-popover-code {
+  margin: 0;
+}
+
+.rehype-twoslash-popover-code > code {
+  mask-image: none;
+  border-radius: 0;
+}
+
+.rehype-twoslash-popover-description {
+  background-color: var(--bg);
+  padding: 0 1em;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --white: #f0f6fc;
@@ -1038,6 +1084,14 @@ details[open] {
     background-color: var(--gray-8);
   }
 
+  .highlight:is(:hover, :focus-within) .rehype-twoslash-popover-target {
+    background-color: var(--gray-5);
+  }
+
+  .rehype-twoslash-popover {
+    border-color: var(--gray-6);
+  }
+
   h6 {
     color: var(--gray-3);
   }
@@ -1062,7 +1116,6 @@ details[open] {
   }
 
   pre code,
-  .hljs,
   .frame-body,
   .frame-tab-item-selected,
   .frame-tab-item-dark.frame-tab-item-selected {
@@ -1231,23 +1284,6 @@ details[open] {
   }
 }
 
-/* Fix a11y. */
-.hljs-built_in,
-.hljs-symbol {
-  color: hsl(24deg 92% 40%) !important;
-}
-
-@media (prefers-color-scheme: dark) {
-  .hljs-section {
-    color: #488bef !important;
-  }
-
-  .hljs-built_in,
-  .hljs-symbol {
-    color: #ffa657 !important;
-  }
-}
-
 .playground {
   min-height: 40rem;
   gap: calc(1em + 1ex);

diff --git a/docs/_asset/index.js b/docs/_asset/index.js
@@ -1,5 +1,7 @@
+/* eslint-disable unicorn/prefer-query-selector */
 /// <reference lib="dom" />
 
+import {computePosition, shift} from '@floating-ui/dom'
 import copyToClipboard from 'copy-to-clipboard'
 import {ok as assert} from 'devlop'
 
@@ -57,7 +59,35 @@ for (const copy of copies) {
   assert(copy instanceof HTMLButtonElement)
   copy.type = 'button'
   copy.replaceChildren(copyIcon.cloneNode(true))
-  copy.addEventListener('click', onclick)
+  copy.addEventListener('click', oncopyonclick)
+}
+
+const popoverTargets = /** @type {Array<HTMLElement>} */ (
+  Array.from(document.querySelectorAll('.rehype-twoslash-popover-target'))
+)
+
+for (const popoverTarget of popoverTargets) {
+  /** @type {NodeJS.Timeout | number} */
+  let timeout = 0
+
+  popoverTarget.addEventListener('click', function () {
+    popoverShow(popoverTarget)
+  })
+
+  popoverTarget.addEventListener('mouseenter', function () {
+    clearTimeout(timeout)
+    timeout = setTimeout(function () {
+      popoverShow(popoverTarget)
+    }, 300)
+  })
+
+  popoverTarget.addEventListener('mouseleave', function () {
+    clearTimeout(timeout)
+  })
+
+  if (popoverTarget.classList.contains('rehype-twoslash-autoshow')) {
+    popoverShow(popoverTarget)
+  }
 }
 
 /**
@@ -66,7 +96,7 @@ for (const copy of copies) {
  * @returns {undefined}
  *   Nothing.
  */
-function onclick() {
+function oncopyonclick() {
   assert(copyIcon)
   assert(copiedIcon)
   assert(this instanceof HTMLButtonElement)
@@ -84,3 +114,31 @@ function onclick() {
     this.replaceChildren(copyIcon.cloneNode(true))
   }, 2000)
 }
+
+/**
+ * @param {HTMLElement} popoverTarget
+ *   Popover target.
+ * @returns {undefined}
+ *   Nothing.
+ */
+function popoverShow(popoverTarget) {
+  const id = popoverTarget.dataset.popoverTarget
+  if (!id) return
+  const popover = document.getElementById(id)
+  if (!popover) return
+
+  popover.showPopover()
+
+  computePosition(popoverTarget, popover, {
+    placement: 'bottom',
+    middleware: [shift({padding: 5})]
+  }).then(
+    /**
+     * @param {{x: number, y: number}} value
+     */
+    function (value) {
+      popover.style.left = value.x + 'px'
+      popover.style.top = value.y + 'px'
+    }
+  )
+}
diff --git a/docs/blog/index.mdx b/docs/blog/index.mdx
@@ -1,6 +1,6 @@
 {
   /**
-   * @import {Item} from '../_component/sort.js
+   * @import {Item} from '../_component/sort.js'
    */
 
   /**
@@ -14,7 +14,7 @@ import {BlogGroup} from '../_component/blog.jsx'
 
 export const info = {
   author: [{name: 'MDX Contributors'}],
-  modified: new Date('2021-11-01'),
+  modified: new Date('2024-07-04'),
   published: new Date('2021-11-01')
 }
 export const navExcludeGroup = true

diff --git a/docs/blog/v3.mdx b/docs/blog/v3.mdx
@@ -58,9 +58,7 @@ technically breaking.
 
 We now accept block expressions right next to block JSX tags:
 
-{/* Note: `language` because our theme doesn’t support it yet. */}
-
-```jsx chrome=no language="mdx"
+```mdx chrome=no
 <style>{`
 
   h1 {

diff --git a/docs/community/index.mdx b/docs/community/index.mdx
@@ -1,6 +1,6 @@
 {
   /**
-   * @import {Item} from '../_component/sort.js
+   * @import {Item} from '../_component/sort.js'
    */
 
   /**
@@ -14,7 +14,7 @@ import {NavigationGroup} from '../_component/nav.jsx'
 
 export const info = {
   author: [{name: 'MDX Contributors'}],
-  modified: new Date('2021-11-01'),
+  modified: new Date('2024-07-04'),
   published: new Date('2021-11-01')
 }
 export const navSortSelf = 6

diff --git a/docs/docs/extending-mdx.mdx b/docs/docs/extending-mdx.mdx
@@ -4,7 +4,7 @@ export const info = {
   author: [
     {github: 'wooorm', name: 'Titus Wormer', twitter: 'wooorm'}
   ],
-  modified: new Date('2023-01-19'),
+  modified: new Date('2024-07-04'),
   published: new Date('2021-10-06')
 }
 export const navSortSelf = 4
@@ -117,7 +117,7 @@ Where to pass plugins is encoded in their name: remark plugins go in
 [`ProcessorOptions`][processor-options].
 Those fields expect lists of plugins and/or of `[plugin, options]`:
 
-```tsx
+```tsx twoslash
 import {compile} from '@mdx-js/mdx'
 import rehypeKatex from 'rehype-katex' // Render math with KaTeX.
 import remarkFrontmatter from 'remark-frontmatter' // YAML and such.