Skip to content

Commit 11ac939

Browse files
committedJul 4, 2024
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
1 parent b749d38 commit 11ac939

29 files changed

+2424
-682
lines changed
 

‎docs/_asset/index.css

+61-25
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,6 @@ pre code {
297297
}
298298

299299
pre code,
300-
.hljs,
301300
.frame-body,
302301
.frame-tab-item-selected {
303302
background-color: #fafafa !important; /* Color from one-light */
@@ -583,7 +582,6 @@ button.success {
583582

584583
.navigation .icon {
585584
display: block;
586-
vertical-align: middle;
587585
width: auto;
588586
height: calc(1em + 1ex);
589587
}
@@ -660,9 +658,6 @@ button.success {
660658
padding-inline-start: calc(0.5 * (1em + 1ex));
661659
}
662660

663-
.nav-description {
664-
}
665-
666661
.skip-to-navigation {
667662
inset-block-start: 0;
668663
inset-inline-start: 0;
@@ -837,11 +832,13 @@ button.success {
837832
overflow-y: auto;
838833
}
839834

840-
.frame-tab-bar + pre {
835+
.frame-tab-bar + pre,
836+
.frame-tab-bar + .highlight > pre {
841837
margin-block-start: 0;
842838
}
843839

844-
.frame-tab-bar + pre code {
840+
.frame-tab-bar + pre code,
841+
.frame-tab-bar + .highlight > pre code {
845842
--squircle-radius: 0;
846843
border-top-left-radius: 0;
847844
border-top-right-radius: 0;
@@ -946,6 +943,55 @@ details[open] {
946943
padding: calc(1em + 1ex);
947944
}
948945

946+
.rehype-twoslash-completion-deprecated {
947+
opacity: 0.5;
948+
}
949+
950+
.rehype-twoslash-popover-target {
951+
cursor: default;
952+
}
953+
954+
.highlight:is(:hover, :focus-within) .rehype-twoslash-popover-target {
955+
background-color: var(--gray-2);
956+
}
957+
958+
/* Wavy underline for errors. */
959+
.rehype-twoslash-error-target {
960+
background-repeat: repeat-x;
961+
background-position: bottom left;
962+
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>');
963+
}
964+
965+
/* The content that will be shown in the tooltip. */
966+
.rehype-twoslash-popover {
967+
position: absolute;
968+
max-width: calc(45 * (1em + 1ex));
969+
padding: calc(0.5 * (1em + 1ex));
970+
margin: 0;
971+
background-color: var(--bg);
972+
border: 1px solid var(--gray-2);
973+
border-radius: 3px;
974+
}
975+
976+
/* No padding if we have a padded code block (and perhaps more blocks) */
977+
.rehype-twoslash-popover:has(.rehype-twoslash-popover-code) {
978+
padding: 0;
979+
}
980+
981+
.rehype-twoslash-popover-code {
982+
margin: 0;
983+
}
984+
985+
.rehype-twoslash-popover-code > code {
986+
mask-image: none;
987+
border-radius: 0;
988+
}
989+
990+
.rehype-twoslash-popover-description {
991+
background-color: var(--bg);
992+
padding: 0 1em;
993+
}
994+
949995
@media (prefers-color-scheme: dark) {
950996
:root {
951997
--white: #f0f6fc;
@@ -1038,6 +1084,14 @@ details[open] {
10381084
background-color: var(--gray-8);
10391085
}
10401086

1087+
.highlight:is(:hover, :focus-within) .rehype-twoslash-popover-target {
1088+
background-color: var(--gray-5);
1089+
}
1090+
1091+
.rehype-twoslash-popover {
1092+
border-color: var(--gray-6);
1093+
}
1094+
10411095
h6 {
10421096
color: var(--gray-3);
10431097
}
@@ -1062,7 +1116,6 @@ details[open] {
10621116
}
10631117

10641118
pre code,
1065-
.hljs,
10661119
.frame-body,
10671120
.frame-tab-item-selected,
10681121
.frame-tab-item-dark.frame-tab-item-selected {
@@ -1231,23 +1284,6 @@ details[open] {
12311284
}
12321285
}
12331286

1234-
/* Fix a11y. */
1235-
.hljs-built_in,
1236-
.hljs-symbol {
1237-
color: hsl(24deg 92% 40%) !important;
1238-
}
1239-
1240-
@media (prefers-color-scheme: dark) {
1241-
.hljs-section {
1242-
color: #488bef !important;
1243-
}
1244-
1245-
.hljs-built_in,
1246-
.hljs-symbol {
1247-
color: #ffa657 !important;
1248-
}
1249-
}
1250-
12511287
.playground {
12521288
min-height: 40rem;
12531289
gap: calc(1em + 1ex);

‎docs/_asset/index.js

+60-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
/* eslint-disable unicorn/prefer-query-selector */
12
/// <reference lib="dom" />
23

4+
import {computePosition, shift} from '@floating-ui/dom'
35
import copyToClipboard from 'copy-to-clipboard'
46
import {ok as assert} from 'devlop'
57

@@ -57,7 +59,35 @@ for (const copy of copies) {
5759
assert(copy instanceof HTMLButtonElement)
5860
copy.type = 'button'
5961
copy.replaceChildren(copyIcon.cloneNode(true))
60-
copy.addEventListener('click', onclick)
62+
copy.addEventListener('click', oncopyonclick)
63+
}
64+
65+
const popoverTargets = /** @type {Array<HTMLElement>} */ (
66+
Array.from(document.querySelectorAll('.rehype-twoslash-popover-target'))
67+
)
68+
69+
for (const popoverTarget of popoverTargets) {
70+
/** @type {NodeJS.Timeout | number} */
71+
let timeout = 0
72+
73+
popoverTarget.addEventListener('click', function () {
74+
popoverShow(popoverTarget)
75+
})
76+
77+
popoverTarget.addEventListener('mouseenter', function () {
78+
clearTimeout(timeout)
79+
timeout = setTimeout(function () {
80+
popoverShow(popoverTarget)
81+
}, 300)
82+
})
83+
84+
popoverTarget.addEventListener('mouseleave', function () {
85+
clearTimeout(timeout)
86+
})
87+
88+
if (popoverTarget.classList.contains('rehype-twoslash-autoshow')) {
89+
popoverShow(popoverTarget)
90+
}
6191
}
6292

6393
/**
@@ -66,7 +96,7 @@ for (const copy of copies) {
6696
* @returns {undefined}
6797
* Nothing.
6898
*/
69-
function onclick() {
99+
function oncopyonclick() {
70100
assert(copyIcon)
71101
assert(copiedIcon)
72102
assert(this instanceof HTMLButtonElement)
@@ -84,3 +114,31 @@ function onclick() {
84114
this.replaceChildren(copyIcon.cloneNode(true))
85115
}, 2000)
86116
}
117+
118+
/**
119+
* @param {HTMLElement} popoverTarget
120+
* Popover target.
121+
* @returns {undefined}
122+
* Nothing.
123+
*/
124+
function popoverShow(popoverTarget) {
125+
const id = popoverTarget.dataset.popoverTarget
126+
if (!id) return
127+
const popover = document.getElementById(id)
128+
if (!popover) return
129+
130+
popover.showPopover()
131+
132+
computePosition(popoverTarget, popover, {
133+
placement: 'bottom',
134+
middleware: [shift({padding: 5})]
135+
}).then(
136+
/**
137+
* @param {{x: number, y: number}} value
138+
*/
139+
function (value) {
140+
popover.style.left = value.x + 'px'
141+
popover.style.top = value.y + 'px'
142+
}
143+
)
144+
}

‎docs/blog/index.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
/**
3-
* @import {Item} from '../_component/sort.js
3+
* @import {Item} from '../_component/sort.js'
44
*/
55

66
/**
@@ -14,7 +14,7 @@ import {BlogGroup} from '../_component/blog.jsx'
1414

1515
export const info = {
1616
author: [{name: 'MDX Contributors'}],
17-
modified: new Date('2021-11-01'),
17+
modified: new Date('2024-07-04'),
1818
published: new Date('2021-11-01')
1919
}
2020
export const navExcludeGroup = true

‎docs/blog/v3.mdx

+1-3
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,7 @@ technically breaking.
5858

5959
We now accept block expressions right next to block JSX tags:
6060

61-
{/* Note: `language` because our theme doesn’t support it yet. */}
62-
63-
```jsx chrome=no language="mdx"
61+
```mdx chrome=no
6462
<style>{`
6563
6664
h1 {

‎docs/community/index.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
/**
3-
* @import {Item} from '../_component/sort.js
3+
* @import {Item} from '../_component/sort.js'
44
*/
55

66
/**
@@ -14,7 +14,7 @@ import {NavigationGroup} from '../_component/nav.jsx'
1414

1515
export const info = {
1616
author: [{name: 'MDX Contributors'}],
17-
modified: new Date('2021-11-01'),
17+
modified: new Date('2024-07-04'),
1818
published: new Date('2021-11-01')
1919
}
2020
export const navSortSelf = 6

‎docs/docs/extending-mdx.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const info = {
44
author: [
55
{github: 'wooorm', name: 'Titus Wormer', twitter: 'wooorm'}
66
],
7-
modified: new Date('2023-01-19'),
7+
modified: new Date('2024-07-04'),
88
published: new Date('2021-10-06')
99
}
1010
export const navSortSelf = 4
@@ -117,7 +117,7 @@ Where to pass plugins is encoded in their name: remark plugins go in
117117
[`ProcessorOptions`][processor-options].
118118
Those fields expect lists of plugins and/or of `[plugin, options]`:
119119

120-
```tsx
120+
```tsx twoslash
121121
import {compile} from '@mdx-js/mdx'
122122
import rehypeKatex from 'rehype-katex' // Render math with KaTeX.
123123
import remarkFrontmatter from 'remark-frontmatter' // YAML and such.

0 commit comments

Comments
 (0)
Please sign in to comment.