@umijs/plugin-docs 4.0.6 → 4.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import React, { FC, PropsWithChildren, ReactNode, useState } from 'react';
|
|
2
|
+
|
|
3
|
+
type Pane = {
|
|
4
|
+
title: ReactNode;
|
|
5
|
+
content: ReactNode;
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
type TabbedProps = {
|
|
9
|
+
panes?: Pane[];
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export default function Tabbed(props: PropsWithChildren<TabbedProps>) {
|
|
13
|
+
const { children } = props;
|
|
14
|
+
|
|
15
|
+
const [activeTab, setActiveTab] = useState(0);
|
|
16
|
+
|
|
17
|
+
let tabs: ReactNode[] = [];
|
|
18
|
+
let content: ReactNode = null;
|
|
19
|
+
|
|
20
|
+
if (props.panes && props.panes.length > 0) {
|
|
21
|
+
tabs = props.panes.map((pane) => {
|
|
22
|
+
return pane.title;
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
content = props.panes[activeTab].content;
|
|
26
|
+
} else {
|
|
27
|
+
// Guess pane from children, make mdx more idiomatic
|
|
28
|
+
const childrenArray = React.Children.toArray(children) || [];
|
|
29
|
+
|
|
30
|
+
tabs = childrenArray.filter((_, index) => index % 2 === 0);
|
|
31
|
+
const contents = childrenArray.filter((_, index) => index % 2 === 1);
|
|
32
|
+
|
|
33
|
+
content = contents[activeTab];
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<div className="tabbed-code">
|
|
38
|
+
<Wrapper>
|
|
39
|
+
<Tabs tabs={tabs} setActiveTab={setActiveTab} activeTab={activeTab} />
|
|
40
|
+
</Wrapper>
|
|
41
|
+
{content || null}
|
|
42
|
+
</div>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
const Wrapper: FC<PropsWithChildren> = ({ children }) => {
|
|
46
|
+
return <div className={`w-full pt-5 pt-0 `}>{children}</div>;
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const Tabs: FC<
|
|
50
|
+
PropsWithChildren<{
|
|
51
|
+
tabs: ReactNode[];
|
|
52
|
+
setActiveTab: Function;
|
|
53
|
+
activeTab: number;
|
|
54
|
+
}>
|
|
55
|
+
> = ({ tabs, activeTab, setActiveTab }) => {
|
|
56
|
+
return (
|
|
57
|
+
<ul className="cursor-pointer m-0 mt-4 px-0 list-none inline-flex flex-wrap rounded-t-lg text-sm font-small text-center text-gray-500 dark:text-gray-400">
|
|
58
|
+
{tabs.map((tab, index) => {
|
|
59
|
+
return (
|
|
60
|
+
<li key={index} className="mr-0 mt-0">
|
|
61
|
+
<button
|
|
62
|
+
onClick={() => setActiveTab(index)}
|
|
63
|
+
className={`tabbed-tab-button
|
|
64
|
+
hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-300
|
|
65
|
+
${
|
|
66
|
+
activeTab === index
|
|
67
|
+
? 'bg-zinc-900 text-white hover:text-neutral-300 dark:text-white'
|
|
68
|
+
: 'text-neutral-500 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-300 '
|
|
69
|
+
}`}
|
|
70
|
+
>
|
|
71
|
+
{tab}
|
|
72
|
+
</button>
|
|
73
|
+
</li>
|
|
74
|
+
);
|
|
75
|
+
})}
|
|
76
|
+
</ul>
|
|
77
|
+
);
|
|
78
|
+
};
|
|
@@ -5,4 +5,5 @@ export { default as FeatureItem } from './components/FeatureItem';
|
|
|
5
5
|
export { default as Features } from './components/Features';
|
|
6
6
|
export { default as Hero } from './components/Hero';
|
|
7
7
|
export { default as Message } from './components/Message';
|
|
8
|
+
export { default as Tabbed } from './components/Tabbed';
|
|
8
9
|
export { default as $Layout } from './Layout';
|
|
@@ -77,6 +77,23 @@ article div[data-rehype-pretty-code-fragment] {
|
|
|
77
77
|
@apply my-4;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
article .tabbed-code div[data-rehype-pretty-code-fragment] {
|
|
81
|
+
@apply my-0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
article .tabbed-code pre {
|
|
85
|
+
@apply rounded-none rounded-b-md rounded-tr-md;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
article .tabbed-code .tabbed-tab-button {
|
|
89
|
+
@apply inline-flex items-center rounded-t-lg px-4;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
article .tabbed-code .tabbed-tab-button * {
|
|
93
|
+
@apply mt-0;
|
|
94
|
+
color: inherit;
|
|
95
|
+
}
|
|
96
|
+
|
|
80
97
|
/* 代码块的标题部分 */
|
|
81
98
|
article
|
|
82
99
|
div[data-rehype-pretty-code-fragment]
|
|
@@ -223,7 +240,6 @@ h6 {
|
|
|
223
240
|
}
|
|
224
241
|
|
|
225
242
|
@layer components {
|
|
226
|
-
|
|
227
243
|
.title-link a {
|
|
228
244
|
float: left;
|
|
229
245
|
margin-top: 0.1em;
|
|
@@ -233,19 +249,19 @@ h6 {
|
|
|
233
249
|
line-height: 1;
|
|
234
250
|
box-sizing: border-box;
|
|
235
251
|
background: none;
|
|
236
|
-
opacity: 0
|
|
237
|
-
}
|
|
252
|
+
opacity: 0;
|
|
253
|
+
}
|
|
238
254
|
|
|
239
|
-
.title-link:hover a{
|
|
240
|
-
opacity: 1
|
|
255
|
+
.title-link:hover a {
|
|
256
|
+
opacity: 1;
|
|
241
257
|
}
|
|
242
258
|
|
|
243
|
-
.title-link span{
|
|
259
|
+
.title-link span {
|
|
244
260
|
display: none;
|
|
245
261
|
}
|
|
246
|
-
|
|
247
|
-
.title-link a::after{
|
|
248
|
-
content:
|
|
262
|
+
|
|
263
|
+
.title-link a::after {
|
|
264
|
+
content: '#';
|
|
249
265
|
display: inline-block;
|
|
250
266
|
vertical-align: middle;
|
|
251
267
|
font-size: 20px;
|
|
@@ -787,6 +787,10 @@ video {
|
|
|
787
787
|
margin: 2rem;
|
|
788
788
|
}
|
|
789
789
|
|
|
790
|
+
.m-0 {
|
|
791
|
+
margin: 0px;
|
|
792
|
+
}
|
|
793
|
+
|
|
790
794
|
.my-6 {
|
|
791
795
|
margin-top: 1.5rem;
|
|
792
796
|
margin-bottom: 1.5rem;
|
|
@@ -873,6 +877,10 @@ video {
|
|
|
873
877
|
margin-bottom: 0.75rem;
|
|
874
878
|
}
|
|
875
879
|
|
|
880
|
+
.mr-0 {
|
|
881
|
+
margin-right: 0px;
|
|
882
|
+
}
|
|
883
|
+
|
|
876
884
|
.block {
|
|
877
885
|
display: block;
|
|
878
886
|
}
|
|
@@ -881,6 +889,14 @@ video {
|
|
|
881
889
|
display: flex;
|
|
882
890
|
}
|
|
883
891
|
|
|
892
|
+
.inline-flex {
|
|
893
|
+
display: inline-flex;
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
.contents {
|
|
897
|
+
display: contents;
|
|
898
|
+
}
|
|
899
|
+
|
|
884
900
|
.hidden {
|
|
885
901
|
display: none;
|
|
886
902
|
}
|
|
@@ -1088,6 +1104,10 @@ video {
|
|
|
1088
1104
|
cursor: default;
|
|
1089
1105
|
}
|
|
1090
1106
|
|
|
1107
|
+
.list-none {
|
|
1108
|
+
list-style-type: none;
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1091
1111
|
.flex-row {
|
|
1092
1112
|
flex-direction: row;
|
|
1093
1113
|
}
|
|
@@ -1156,6 +1176,11 @@ video {
|
|
|
1156
1176
|
border-radius: 0.75rem;
|
|
1157
1177
|
}
|
|
1158
1178
|
|
|
1179
|
+
.rounded-t-lg {
|
|
1180
|
+
border-top-left-radius: 0.5rem;
|
|
1181
|
+
border-top-right-radius: 0.5rem;
|
|
1182
|
+
}
|
|
1183
|
+
|
|
1159
1184
|
.border {
|
|
1160
1185
|
border-width: 1px;
|
|
1161
1186
|
}
|
|
@@ -1236,6 +1261,11 @@ video {
|
|
|
1236
1261
|
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
|
|
1237
1262
|
}
|
|
1238
1263
|
|
|
1264
|
+
.bg-zinc-900 {
|
|
1265
|
+
--tw-bg-opacity: 1;
|
|
1266
|
+
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
|
|
1267
|
+
}
|
|
1268
|
+
|
|
1239
1269
|
.object-cover {
|
|
1240
1270
|
-o-object-fit: cover;
|
|
1241
1271
|
object-fit: cover;
|
|
@@ -1309,6 +1339,11 @@ video {
|
|
|
1309
1339
|
padding-bottom: 1.25rem;
|
|
1310
1340
|
}
|
|
1311
1341
|
|
|
1342
|
+
.px-0 {
|
|
1343
|
+
padding-left: 0px;
|
|
1344
|
+
padding-right: 0px;
|
|
1345
|
+
}
|
|
1346
|
+
|
|
1312
1347
|
.pt-4 {
|
|
1313
1348
|
padding-top: 1rem;
|
|
1314
1349
|
}
|
|
@@ -1341,6 +1376,14 @@ video {
|
|
|
1341
1376
|
padding-bottom: 3rem;
|
|
1342
1377
|
}
|
|
1343
1378
|
|
|
1379
|
+
.pt-5 {
|
|
1380
|
+
padding-top: 1.25rem;
|
|
1381
|
+
}
|
|
1382
|
+
|
|
1383
|
+
.pt-0 {
|
|
1384
|
+
padding-top: 0px;
|
|
1385
|
+
}
|
|
1386
|
+
|
|
1344
1387
|
.text-center {
|
|
1345
1388
|
text-align: center;
|
|
1346
1389
|
}
|
|
@@ -1438,6 +1481,11 @@ video {
|
|
|
1438
1481
|
color: rgb(147 197 253 / var(--tw-text-opacity));
|
|
1439
1482
|
}
|
|
1440
1483
|
|
|
1484
|
+
.text-neutral-500 {
|
|
1485
|
+
--tw-text-opacity: 1;
|
|
1486
|
+
color: rgb(115 115 115 / var(--tw-text-opacity));
|
|
1487
|
+
}
|
|
1488
|
+
|
|
1441
1489
|
.opacity-0 {
|
|
1442
1490
|
opacity: 0;
|
|
1443
1491
|
}
|
|
@@ -1552,19 +1600,19 @@ article h1 a {
|
|
|
1552
1600
|
line-height: 1;
|
|
1553
1601
|
box-sizing: border-box;
|
|
1554
1602
|
background: none;
|
|
1555
|
-
opacity: 0
|
|
1603
|
+
opacity: 0;
|
|
1556
1604
|
}
|
|
1557
1605
|
|
|
1558
|
-
article h1:hover a{
|
|
1559
|
-
opacity: 1
|
|
1606
|
+
article h1:hover a {
|
|
1607
|
+
opacity: 1;
|
|
1560
1608
|
}
|
|
1561
1609
|
|
|
1562
|
-
article h1 span{
|
|
1610
|
+
article h1 span {
|
|
1563
1611
|
display: none;
|
|
1564
1612
|
}
|
|
1565
1613
|
|
|
1566
|
-
article h1 a::after{
|
|
1567
|
-
content:
|
|
1614
|
+
article h1 a::after {
|
|
1615
|
+
content: '#';
|
|
1568
1616
|
display: inline-block;
|
|
1569
1617
|
vertical-align: middle;
|
|
1570
1618
|
font-size: 20px;
|
|
@@ -1593,19 +1641,19 @@ article h2 a {
|
|
|
1593
1641
|
line-height: 1;
|
|
1594
1642
|
box-sizing: border-box;
|
|
1595
1643
|
background: none;
|
|
1596
|
-
opacity: 0
|
|
1644
|
+
opacity: 0;
|
|
1597
1645
|
}
|
|
1598
1646
|
|
|
1599
|
-
article h2:hover a{
|
|
1600
|
-
opacity: 1
|
|
1647
|
+
article h2:hover a {
|
|
1648
|
+
opacity: 1;
|
|
1601
1649
|
}
|
|
1602
1650
|
|
|
1603
|
-
article h2 span{
|
|
1651
|
+
article h2 span {
|
|
1604
1652
|
display: none;
|
|
1605
1653
|
}
|
|
1606
1654
|
|
|
1607
|
-
article h2 a::after{
|
|
1608
|
-
content:
|
|
1655
|
+
article h2 a::after {
|
|
1656
|
+
content: '#';
|
|
1609
1657
|
display: inline-block;
|
|
1610
1658
|
vertical-align: middle;
|
|
1611
1659
|
font-size: 20px;
|
|
@@ -1638,19 +1686,19 @@ article h3 a {
|
|
|
1638
1686
|
line-height: 1;
|
|
1639
1687
|
box-sizing: border-box;
|
|
1640
1688
|
background: none;
|
|
1641
|
-
opacity: 0
|
|
1689
|
+
opacity: 0;
|
|
1642
1690
|
}
|
|
1643
1691
|
|
|
1644
|
-
article h3:hover a{
|
|
1645
|
-
opacity: 1
|
|
1692
|
+
article h3:hover a {
|
|
1693
|
+
opacity: 1;
|
|
1646
1694
|
}
|
|
1647
1695
|
|
|
1648
|
-
article h3 span{
|
|
1696
|
+
article h3 span {
|
|
1649
1697
|
display: none;
|
|
1650
1698
|
}
|
|
1651
1699
|
|
|
1652
|
-
article h3 a::after{
|
|
1653
|
-
content:
|
|
1700
|
+
article h3 a::after {
|
|
1701
|
+
content: '#';
|
|
1654
1702
|
display: inline-block;
|
|
1655
1703
|
vertical-align: middle;
|
|
1656
1704
|
font-size: 20px;
|
|
@@ -1678,19 +1726,19 @@ article h4 a {
|
|
|
1678
1726
|
line-height: 1;
|
|
1679
1727
|
box-sizing: border-box;
|
|
1680
1728
|
background: none;
|
|
1681
|
-
opacity: 0
|
|
1729
|
+
opacity: 0;
|
|
1682
1730
|
}
|
|
1683
1731
|
|
|
1684
|
-
article h4:hover a{
|
|
1685
|
-
opacity: 1
|
|
1732
|
+
article h4:hover a {
|
|
1733
|
+
opacity: 1;
|
|
1686
1734
|
}
|
|
1687
1735
|
|
|
1688
|
-
article h4 span{
|
|
1736
|
+
article h4 span {
|
|
1689
1737
|
display: none;
|
|
1690
1738
|
}
|
|
1691
1739
|
|
|
1692
|
-
article h4 a::after{
|
|
1693
|
-
content:
|
|
1740
|
+
article h4 a::after {
|
|
1741
|
+
content: '#';
|
|
1694
1742
|
display: inline-block;
|
|
1695
1743
|
vertical-align: middle;
|
|
1696
1744
|
font-size: 20px;
|
|
@@ -1718,19 +1766,19 @@ article h5 a {
|
|
|
1718
1766
|
line-height: 1;
|
|
1719
1767
|
box-sizing: border-box;
|
|
1720
1768
|
background: none;
|
|
1721
|
-
opacity: 0
|
|
1769
|
+
opacity: 0;
|
|
1722
1770
|
}
|
|
1723
1771
|
|
|
1724
|
-
article h5:hover a{
|
|
1725
|
-
opacity: 1
|
|
1772
|
+
article h5:hover a {
|
|
1773
|
+
opacity: 1;
|
|
1726
1774
|
}
|
|
1727
1775
|
|
|
1728
|
-
article h5 span{
|
|
1776
|
+
article h5 span {
|
|
1729
1777
|
display: none;
|
|
1730
1778
|
}
|
|
1731
1779
|
|
|
1732
|
-
article h5 a::after{
|
|
1733
|
-
content:
|
|
1780
|
+
article h5 a::after {
|
|
1781
|
+
content: '#';
|
|
1734
1782
|
display: inline-block;
|
|
1735
1783
|
vertical-align: middle;
|
|
1736
1784
|
font-size: 20px;
|
|
@@ -1758,19 +1806,19 @@ article h6 a {
|
|
|
1758
1806
|
line-height: 1;
|
|
1759
1807
|
box-sizing: border-box;
|
|
1760
1808
|
background: none;
|
|
1761
|
-
opacity: 0
|
|
1809
|
+
opacity: 0;
|
|
1762
1810
|
}
|
|
1763
1811
|
|
|
1764
|
-
article h6:hover a{
|
|
1765
|
-
opacity: 1
|
|
1812
|
+
article h6:hover a {
|
|
1813
|
+
opacity: 1;
|
|
1766
1814
|
}
|
|
1767
1815
|
|
|
1768
|
-
article h6 span{
|
|
1816
|
+
article h6 span {
|
|
1769
1817
|
display: none;
|
|
1770
1818
|
}
|
|
1771
1819
|
|
|
1772
|
-
article h6 a::after{
|
|
1773
|
-
content:
|
|
1820
|
+
article h6 a::after {
|
|
1821
|
+
content: '#';
|
|
1774
1822
|
display: inline-block;
|
|
1775
1823
|
vertical-align: middle;
|
|
1776
1824
|
font-size: 20px;
|
|
@@ -1955,6 +2003,32 @@ article div[data-rehype-pretty-code-fragment] {
|
|
|
1955
2003
|
margin-bottom: 1rem;
|
|
1956
2004
|
}
|
|
1957
2005
|
|
|
2006
|
+
article .tabbed-code div[data-rehype-pretty-code-fragment] {
|
|
2007
|
+
margin-top: 0px;
|
|
2008
|
+
margin-bottom: 0px;
|
|
2009
|
+
}
|
|
2010
|
+
|
|
2011
|
+
article .tabbed-code pre {
|
|
2012
|
+
border-radius: 0px;
|
|
2013
|
+
border-bottom-right-radius: 0.375rem;
|
|
2014
|
+
border-bottom-left-radius: 0.375rem;
|
|
2015
|
+
border-top-right-radius: 0.375rem;
|
|
2016
|
+
}
|
|
2017
|
+
|
|
2018
|
+
article .tabbed-code .tabbed-tab-button {
|
|
2019
|
+
display: inline-flex;
|
|
2020
|
+
align-items: center;
|
|
2021
|
+
border-top-left-radius: 0.5rem;
|
|
2022
|
+
border-top-right-radius: 0.5rem;
|
|
2023
|
+
padding-left: 1rem;
|
|
2024
|
+
padding-right: 1rem;
|
|
2025
|
+
}
|
|
2026
|
+
|
|
2027
|
+
article .tabbed-code .tabbed-tab-button * {
|
|
2028
|
+
margin-top: 0px;
|
|
2029
|
+
color: inherit;
|
|
2030
|
+
}
|
|
2031
|
+
|
|
1958
2032
|
/* 代码块的标题部分 */
|
|
1959
2033
|
|
|
1960
2034
|
article
|
|
@@ -2365,6 +2439,11 @@ h6 {
|
|
|
2365
2439
|
border-color: rgb(243 244 246 / var(--tw-border-opacity));
|
|
2366
2440
|
}
|
|
2367
2441
|
|
|
2442
|
+
.hover\:border-gray-300:hover {
|
|
2443
|
+
--tw-border-opacity: 1;
|
|
2444
|
+
border-color: rgb(209 213 219 / var(--tw-border-opacity));
|
|
2445
|
+
}
|
|
2446
|
+
|
|
2368
2447
|
.hover\:bg-gray-50:hover {
|
|
2369
2448
|
--tw-bg-opacity: 1;
|
|
2370
2449
|
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
|
@@ -2380,6 +2459,16 @@ h6 {
|
|
|
2380
2459
|
color: rgb(59 130 246 / var(--tw-text-opacity));
|
|
2381
2460
|
}
|
|
2382
2461
|
|
|
2462
|
+
.hover\:text-gray-700:hover {
|
|
2463
|
+
--tw-text-opacity: 1;
|
|
2464
|
+
color: rgb(55 65 81 / var(--tw-text-opacity));
|
|
2465
|
+
}
|
|
2466
|
+
|
|
2467
|
+
.hover\:text-neutral-300:hover {
|
|
2468
|
+
--tw-text-opacity: 1;
|
|
2469
|
+
color: rgb(212 212 212 / var(--tw-text-opacity));
|
|
2470
|
+
}
|
|
2471
|
+
|
|
2383
2472
|
.hover\:shadow-2xl:hover {
|
|
2384
2473
|
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
2385
2474
|
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
|
|
@@ -2537,6 +2626,11 @@ h6 {
|
|
|
2537
2626
|
color: rgb(59 130 246 / var(--tw-text-opacity));
|
|
2538
2627
|
}
|
|
2539
2628
|
|
|
2629
|
+
.dark .dark\:hover\:text-gray-300:hover {
|
|
2630
|
+
--tw-text-opacity: 1;
|
|
2631
|
+
color: rgb(209 213 219 / var(--tw-text-opacity));
|
|
2632
|
+
}
|
|
2633
|
+
|
|
2540
2634
|
@media (min-width: 768px) {
|
|
2541
2635
|
.md\:h-6 {
|
|
2542
2636
|
height: 1.5rem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umijs/plugin-docs",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.7",
|
|
4
4
|
"description": "@umijs/plugin-docs",
|
|
5
5
|
"homepage": "https://github.com/umijs/umi/tree/master/packages/plugin-docs#readme",
|
|
6
6
|
"bugs": "https://github.com/umijs/umi/issues",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"build:deps": "umi-scripts bundleDeps",
|
|
23
23
|
"build:extra": "pnpm build:css",
|
|
24
24
|
"dev": "pnpm build --watch",
|
|
25
|
-
"dev:css": "pnpm build:css --
|
|
25
|
+
"dev:css": "pnpm build:css --watch",
|
|
26
26
|
"test": "umi-scripts jest-turbo"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"rehype-slug": "5.0.1",
|
|
41
41
|
"remark-gfm": "^3.0.1",
|
|
42
42
|
"tailwindcss": "^3.0.24",
|
|
43
|
-
"umi": "4.0.
|
|
43
|
+
"umi": "4.0.7"
|
|
44
44
|
},
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public"
|