@umijs/plugin-docs 4.0.0-rc.1 → 4.0.0-rc.2

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 @@
1
+ export function $Layout() {}
@@ -1,5 +1,6 @@
1
1
  import cx from 'classnames';
2
- import React, { Fragment, useState } from 'react';
2
+ import React, { Fragment, useEffect, useState } from 'react';
3
+ import { Helmet } from 'react-helmet';
3
4
  import Announcement from './components/Announcement';
4
5
  import { ThemeContext } from './context';
5
6
  import Head from './Head';
@@ -9,6 +10,27 @@ import Toc from './Toc';
9
10
  export default (props: any) => {
10
11
  const [isMenuOpened, setIsMenuOpened] = useState(false);
11
12
 
13
+ /**
14
+ FireFox CSS backdrop-filter polyfill
15
+ https://www.cnblogs.com/coco1s/p/14953143.html
16
+ */
17
+ useEffect(() => {
18
+ let blur = document.getElementById('firefox-head-bg')?.style;
19
+ let offset = document.getElementById('head-container');
20
+
21
+ function updateBlur() {
22
+ if (!offset || !blur) return;
23
+ blur.backgroundPosition = `0px ` + `${-window.scrollY + 100}px`;
24
+ }
25
+
26
+ document.addEventListener('scroll', updateBlur, false), updateBlur();
27
+ return () => {
28
+ document.removeEventListener('scroll', updateBlur, false);
29
+ };
30
+ }, []);
31
+
32
+ const { title, description } = props.themeConfig;
33
+
12
34
  return (
13
35
  <ThemeContext.Provider
14
36
  value={{
@@ -20,6 +42,7 @@ export default (props: any) => {
20
42
  >
21
43
  <div className="flex flex-col dark:bg-gray-900 min-h-screen transition-all">
22
44
  <div
45
+ id="head-container"
23
46
  className="z-30 sticky top-0 dark:before:bg-gray-800 before:bg-white before:bg-opacity-[.85]
24
47
  before:backdrop-blur-md before:absolute before:block dark:before:bg-opacity-[.85]
25
48
  before:w-full before:h-full before:z-[-1]"
@@ -28,11 +51,25 @@ export default (props: any) => {
28
51
  <Head setMenuOpened={setIsMenuOpened} isMenuOpened={isMenuOpened} />
29
52
  </div>
30
53
 
54
+ <div className="g-glossy-firefox-cover" />
55
+ <div className="g-glossy-firefox" id="firefox-head-bg" />
56
+
31
57
  {window.location.pathname === '/' ? (
32
- <div>{props.children}</div>
58
+ <div id="article-body">
59
+ <Helmet>
60
+ <title>
61
+ {title}
62
+ {description ? ` - ${description}` : ''}
63
+ </title>
64
+ </Helmet>
65
+ {props.children}
66
+ </div>
33
67
  ) : (
34
68
  <Fragment>
35
- <div className="w-full flex flex-row justify-center overflow-x-hidden">
69
+ <div
70
+ id="article-body"
71
+ className="w-full flex flex-row justify-center overflow-x-hidden"
72
+ >
36
73
  <div className="container flex flex-row justify-center">
37
74
  <div className="w-full lg:w-1/2 px-4 lg:px-0 m-8 z-20 lg:py-12">
38
75
  <article className="flex-1">{props.children}</article>
@@ -2,17 +2,17 @@ import React from 'react';
2
2
  import { useThemeContext } from './context';
3
3
 
4
4
  export default () => {
5
- const { themeConfig } = useThemeContext()!;
5
+ const { themeConfig, components } = useThemeContext()!;
6
6
  // @ts-ignore
7
7
  const { logo } = themeConfig;
8
8
  return (
9
- <a href="/">
9
+ <components.Link to="/">
10
10
  <div className="flex flex-row items-center">
11
11
  <img src={logo} className="w-8 h-8" alt="logo" />
12
12
  <div className="text-xl font-extrabold ml-2 dark:text-white">
13
13
  {themeConfig.title}
14
14
  </div>
15
15
  </div>
16
- </a>
16
+ </components.Link>
17
17
  );
18
18
  };
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { Helmet } from 'react-helmet';
2
3
  import { useThemeContext } from './context';
3
4
  import useLanguage from './useLanguage';
4
5
 
@@ -10,7 +11,7 @@ function getLinkFromTitle(title: string) {
10
11
  }
11
12
 
12
13
  export default () => {
13
- const { location, appData } = useThemeContext()!;
14
+ const { location, appData, themeConfig } = useThemeContext()!;
14
15
  const lang = useLanguage();
15
16
  const route =
16
17
  appData.routes[
@@ -31,6 +32,11 @@ export default () => {
31
32
  className="w-full lg:m-12 mb-12 border
32
33
  border-gray-100 p-8 rounded-xl z-20"
33
34
  >
35
+ <Helmet>
36
+ <title>
37
+ {route.titles[0].title} | {themeConfig.title}
38
+ </title>
39
+ </Helmet>
34
40
  <p className="text-lg font-extrabold dark:text-white">
35
41
  {route.titles[0].title}
36
42
  </p>
@@ -20,6 +20,13 @@ function Announcement() {
20
20
  }
21
21
  }, []);
22
22
 
23
+ useEffect(() => {
24
+ document.documentElement.style.setProperty(
25
+ '--anchor-offset',
26
+ (closed ? 0 : 28) + 'px',
27
+ );
28
+ }, [closed]);
29
+
23
30
  function close(e: React.MouseEvent) {
24
31
  e.preventDefault();
25
32
  if (!themeConfig.announcement) return;
@@ -0,0 +1,48 @@
1
+ import React from 'react';
2
+
3
+ interface Feature {
4
+ icon: string;
5
+ title: string;
6
+ description: string;
7
+ link?: string;
8
+ }
9
+
10
+ /**
11
+ * Feature Item 组件是文档首页第二个 Feature 区块中的一个 Item,
12
+ * 从 docs/README.md 中使用 MDX 语法调用,必须被包含在 <Features /> 组件内
13
+ * */
14
+ function FeatureItem(props: Feature) {
15
+ return (
16
+ <div className="w-full md:w-1/2 lg:w-1/3 flex flex-row items-center justify-center mb-8 lg:mb-16">
17
+ <div
18
+ className="flex flex-col w-5/6 lg:w-3/4 items-center
19
+ bg-white dark:bg-gray-800 py-12 px-6 justify-center
20
+ border-gray-300 dark:border-gray-500 border transition-all hover:scale-105
21
+ rounded-xl shadow-lg hover:shadow-2xl h-72 lg:h-96 dark:shadow-gray-700"
22
+ >
23
+ <img src={props.icon} className="w-8 h-8" alt="feature-icon" />
24
+ <p
25
+ className="text-3xl font-extrabold
26
+ mt-4 mb-8 text-gray-900 dark:text-gray-200"
27
+ >
28
+ {props.title}
29
+ </p>
30
+ <p className="text-center text-gray-600 text-sm lg:text-base dark:text-gray-400">
31
+ {props.description}
32
+ </p>
33
+ {props.link && (
34
+ <a
35
+ href={props.link}
36
+ target="_blank"
37
+ rel="noreferrer"
38
+ className="mt-8 link-with-underline"
39
+ >
40
+ 深入了解
41
+ </a>
42
+ )}
43
+ </div>
44
+ </div>
45
+ );
46
+ }
47
+
48
+ export default FeatureItem;
@@ -0,0 +1,44 @@
1
+ import React, { PropsWithChildren } from 'react';
2
+
3
+ /**
4
+ * Features 组件是文档首页第二个 Feature 区块的容器,
5
+ * 从 docs/README.md 中使用 MDX 语法调用,可在内部传入 <FeatureItem /> 组件
6
+ * */
7
+ function Features(
8
+ props: PropsWithChildren<{ title?: string; subtitle?: string }>,
9
+ ) {
10
+ return (
11
+ <div className="w-screen py-36 features dark:features-dark min-h-screen">
12
+ {(props.title || props.subtitle) && (
13
+ <div className="mb-24 px-4">
14
+ {props.title && (
15
+ <p
16
+ className="text-4xl lg:text-5xl font-extrabold mb-4 text-center
17
+ text-gray-700 dark:text-gray-300"
18
+ >
19
+ {props.title}
20
+ </p>
21
+ )}
22
+ {props.subtitle && (
23
+ <p
24
+ className="text-lg lg:text-xl text-center
25
+ text-gray-500 dark:text-gray-400"
26
+ >
27
+ {props.subtitle}
28
+ </p>
29
+ )}
30
+ </div>
31
+ )}
32
+ <div className="w-full flex flex-row justify-center">
33
+ <div
34
+ className="w-full flex flex-row flex-wrap
35
+ features pb-12 dark:features-dark container"
36
+ >
37
+ {props.children}
38
+ </div>
39
+ </div>
40
+ </div>
41
+ );
42
+ }
43
+
44
+ export default Features;
@@ -1,5 +1,6 @@
1
1
  import cx from 'classnames';
2
2
  import React, { useEffect, useState } from 'react';
3
+ import { useThemeContext } from '../context';
3
4
  import Github from '../icons/github.svg';
4
5
  import HeroBackground from '../icons/hero-bg.svg';
5
6
  import Star from '../icons/star.png';
@@ -15,6 +16,7 @@ interface HeroProps {
15
16
  }
16
17
 
17
18
  function Hero(props: HeroProps) {
19
+ const { components } = useThemeContext()!;
18
20
  return (
19
21
  <div
20
22
  className="w-full h-[calc(100vh-60px)] bg-[rgb(16,37,62)] flex
@@ -57,14 +59,15 @@ function Hero(props: HeroProps) {
57
59
 
58
60
  <div className="flex flex-row items-center">
59
61
  {props.buttons?.map((button, i) => (
60
- <button
61
- onClick={() => (window.location.href = button.href)}
62
- key={i}
63
- className="text-white text-lg bg-blue-600 py-2 min-w-36 mx-4 px-4 rounded-xl shadow-xl
62
+ <components.Link to={button.href}>
63
+ <button
64
+ key={i}
65
+ className="text-white text-lg bg-blue-600 py-2 min-w-36 mx-4 px-4 rounded-xl shadow-xl
64
66
  shadow-blue-900 hover:shadow-blue-700 transition-all"
65
- >
66
- {button.label}
67
- </button>
67
+ >
68
+ {button.label}
69
+ </button>
70
+ </components.Link>
68
71
  ))}
69
72
 
70
73
  {props.githubRepo && <GithubStars repo={props.githubRepo} />}
@@ -5,6 +5,7 @@ interface IContext {
5
5
  components: any;
6
6
  themeConfig: {
7
7
  title: string;
8
+ description?: string;
8
9
  github: string;
9
10
  // 键盘搜索的快捷键,参考 https://github.com/madrobby/keymaster
10
11
  searchHotKey?: string | { macos: string; windows: string };
@@ -0,0 +1,31 @@
1
+ /**
2
+ FireFox CSS backdrop-filter polyfill
3
+ https://www.cnblogs.com/coco1s/p/14953143.html
4
+ */
5
+
6
+ .g-glossy-firefox, .g-glossy-firefox-cover {
7
+ display: none;
8
+ }
9
+
10
+ @supports (background: -moz-element(#article-body)) {
11
+ .g-glossy-firefox-cover {
12
+ display: block;
13
+ position: fixed;
14
+ top: var(--anchor-offset);
15
+ width: 100%;
16
+ height: 72px;
17
+ z-index: 22;
18
+ background-color: white;
19
+ }
20
+
21
+ .g-glossy-firefox {
22
+ display: block;
23
+ position: fixed;
24
+ width: 100%;
25
+ top: var(--anchor-offset);
26
+ height: 72px;
27
+ z-index: 24;
28
+ background: -moz-element(#article-body) no-repeat top;
29
+ filter: blur(10px);
30
+ }
31
+ }
@@ -1,5 +1,8 @@
1
+ import './firefox-polyfill.css';
1
2
  import './tailwind.out.css';
2
3
  // Components
4
+ export { default as FeatureItem } from './components/FeatureItem';
5
+ export { default as Features } from './components/Features';
3
6
  export { default as Hero } from './components/Hero';
4
7
  export { default as Message } from './components/Message';
5
- export { default as Layout } from './Layout';
8
+ export { default as $Layout } from './Layout';
@@ -87,6 +87,11 @@ article a {
87
87
  background-image: linear-gradient(transparent 60%, rgba(130, 199, 255, 0.28) 55%);
88
88
  }
89
89
 
90
+ .link-with-underline {
91
+ @apply text-blue-600 mx-1 hover:text-blue-300 transition dark:text-blue-400;
92
+ background-image: linear-gradient(transparent 60%, rgba(130, 199, 255, 0.28) 55%);
93
+ }
94
+
90
95
  /*article pre {*/
91
96
  /* @apply pt-12;*/
92
97
  /*}*/
@@ -109,7 +114,36 @@ html {
109
114
  scroll-behavior: smooth
110
115
  }
111
116
 
117
+ :root {
118
+ --anchor-offset: 28px;
119
+ }
120
+
112
121
  /** Anchor with offset for headings */
113
122
  h1, h2, h3, h4, h5, h6 {
114
- scroll-margin-top: 3em;
123
+ scroll-margin-top: calc(var(--anchor-offset) + 88px);
124
+ }
125
+
126
+ @layer components {
127
+
128
+ .features-dark {
129
+ @apply bg-gray-900;
130
+ background-image: radial-gradient(#2a2a2a 20%, transparent 20%);
131
+ background-size: 6px 6px;
132
+ width: 100%;
133
+ -ms-overflow-style: none;
134
+ scrollbar-width: none;
135
+ }
136
+
137
+ .features {
138
+ background-image: radial-gradient(#f8f8f5 20%, transparent 20%);
139
+ background-color: white;
140
+ background-size: 6px 6px;
141
+ width: 100%;
142
+ -ms-overflow-style: none;
143
+ scrollbar-width: none;
144
+ }
145
+
146
+ .features::-webkit-scrollbar {
147
+ display: none;
148
+ }
115
149
  }
@@ -1,5 +1,5 @@
1
1
  /*
2
- ! tailwindcss v3.0.15 | MIT License | https://tailwindcss.com
2
+ ! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
3
3
  */
4
4
 
5
5
  /*
@@ -502,6 +502,19 @@ Ensure the default browser behavior of the `hidden` attribute.
502
502
  }
503
503
  }
504
504
 
505
+ .features {
506
+ background-image: radial-gradient(#f8f8f5 20%, transparent 20%);
507
+ background-color: white;
508
+ background-size: 6px 6px;
509
+ width: 100%;
510
+ -ms-overflow-style: none;
511
+ scrollbar-width: none;
512
+ }
513
+
514
+ .features::-webkit-scrollbar {
515
+ display: none;
516
+ }
517
+
505
518
  .fixed {
506
519
  position: fixed;
507
520
  }
@@ -618,6 +631,22 @@ Ensure the default browser behavior of the `hidden` attribute.
618
631
  margin-top: 0.75rem;
619
632
  }
620
633
 
634
+ .mb-8 {
635
+ margin-bottom: 2rem;
636
+ }
637
+
638
+ .mt-4 {
639
+ margin-top: 1rem;
640
+ }
641
+
642
+ .mt-8 {
643
+ margin-top: 2rem;
644
+ }
645
+
646
+ .mb-24 {
647
+ margin-bottom: 6rem;
648
+ }
649
+
621
650
  .mb-4 {
622
651
  margin-bottom: 1rem;
623
652
  }
@@ -674,6 +703,10 @@ Ensure the default browser behavior of the `hidden` attribute.
674
703
  height: 100%;
675
704
  }
676
705
 
706
+ .h-72 {
707
+ height: 18rem;
708
+ }
709
+
677
710
  .h-\[calc\(100vh-60px\)\] {
678
711
  height: calc(100vh - 60px);
679
712
  }
@@ -742,6 +775,10 @@ Ensure the default browser behavior of the `hidden` attribute.
742
775
  width: 0.75rem;
743
776
  }
744
777
 
778
+ .w-5\/6 {
779
+ width: 83.333333%;
780
+ }
781
+
745
782
  .w-4 {
746
783
  width: 1rem;
747
784
  }
@@ -827,6 +864,10 @@ Ensure the default browser behavior of the `hidden` attribute.
827
864
  flex-direction: column;
828
865
  }
829
866
 
867
+ .flex-wrap {
868
+ flex-wrap: wrap;
869
+ }
870
+
830
871
  .items-center {
831
872
  align-items: center;
832
873
  }
@@ -1029,6 +1070,21 @@ Ensure the default browser behavior of the `hidden` attribute.
1029
1070
  padding-right: 0.25rem;
1030
1071
  }
1031
1072
 
1073
+ .py-12 {
1074
+ padding-top: 3rem;
1075
+ padding-bottom: 3rem;
1076
+ }
1077
+
1078
+ .px-6 {
1079
+ padding-left: 1.5rem;
1080
+ padding-right: 1.5rem;
1081
+ }
1082
+
1083
+ .py-36 {
1084
+ padding-top: 9rem;
1085
+ padding-bottom: 9rem;
1086
+ }
1087
+
1032
1088
  .pt-4 {
1033
1089
  padding-top: 1rem;
1034
1090
  }
@@ -1073,16 +1129,21 @@ Ensure the default browser behavior of the `hidden` attribute.
1073
1129
  line-height: 1.75rem;
1074
1130
  }
1075
1131
 
1076
- .text-5xl {
1077
- font-size: 3rem;
1078
- line-height: 1;
1079
- }
1080
-
1081
1132
  .text-3xl {
1082
1133
  font-size: 1.875rem;
1083
1134
  line-height: 2.25rem;
1084
1135
  }
1085
1136
 
1137
+ .text-4xl {
1138
+ font-size: 2.25rem;
1139
+ line-height: 2.5rem;
1140
+ }
1141
+
1142
+ .text-5xl {
1143
+ font-size: 3rem;
1144
+ line-height: 1;
1145
+ }
1146
+
1086
1147
  .font-extrabold {
1087
1148
  font-weight: 800;
1088
1149
  }
@@ -1111,6 +1172,16 @@ Ensure the default browser behavior of the `hidden` attribute.
1111
1172
  color: rgb(75 85 99 / var(--tw-text-opacity));
1112
1173
  }
1113
1174
 
1175
+ .text-gray-900 {
1176
+ --tw-text-opacity: 1;
1177
+ color: rgb(17 24 39 / var(--tw-text-opacity));
1178
+ }
1179
+
1180
+ .text-gray-500 {
1181
+ --tw-text-opacity: 1;
1182
+ color: rgb(107 114 128 / var(--tw-text-opacity));
1183
+ }
1184
+
1114
1185
  .text-white {
1115
1186
  --tw-text-opacity: 1;
1116
1187
  color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1161,6 +1232,12 @@ Ensure the default browser behavior of the `hidden` attribute.
1161
1232
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1162
1233
  }
1163
1234
 
1235
+ .shadow-lg {
1236
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1237
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1238
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1239
+ }
1240
+
1164
1241
  .shadow-xl {
1165
1242
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1166
1243
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -1186,6 +1263,11 @@ Ensure the default browser behavior of the `hidden` attribute.
1186
1263
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1187
1264
  }
1188
1265
 
1266
+ .\!blur {
1267
+ --tw-blur: blur(8px) !important;
1268
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
1269
+ }
1270
+
1189
1271
  .blur-xl {
1190
1272
  --tw-blur: blur(24px);
1191
1273
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1200,6 +1282,11 @@ Ensure the default browser behavior of the `hidden` attribute.
1200
1282
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1201
1283
  }
1202
1284
 
1285
+ .backdrop-filter {
1286
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
1287
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
1288
+ }
1289
+
1203
1290
  .transition {
1204
1291
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1205
1292
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1530,6 +1617,32 @@ article a {
1530
1617
  background-image: linear-gradient(transparent 60%, rgba(130, 199, 255, 0.28) 55%);
1531
1618
  }
1532
1619
 
1620
+ .link-with-underline {
1621
+ margin-left: 0.25rem;
1622
+ margin-right: 0.25rem;
1623
+ --tw-text-opacity: 1;
1624
+ color: rgb(37 99 235 / var(--tw-text-opacity));
1625
+ transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1626
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1627
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1628
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1629
+ transition-duration: 150ms;
1630
+ }
1631
+
1632
+ .link-with-underline:hover {
1633
+ --tw-text-opacity: 1;
1634
+ color: rgb(147 197 253 / var(--tw-text-opacity));
1635
+ }
1636
+
1637
+ .dark .link-with-underline {
1638
+ --tw-text-opacity: 1;
1639
+ color: rgb(96 165 250 / var(--tw-text-opacity));
1640
+ }
1641
+
1642
+ .link-with-underline {
1643
+ background-image: linear-gradient(transparent 60%, rgba(130, 199, 255, 0.28) 55%);
1644
+ }
1645
+
1533
1646
  /*article pre {*/
1534
1647
 
1535
1648
  /* @apply pt-12;*/
@@ -1562,10 +1675,14 @@ html {
1562
1675
  scroll-behavior: smooth
1563
1676
  }
1564
1677
 
1678
+ :root {
1679
+ --anchor-offset: 28px;
1680
+ }
1681
+
1565
1682
  /** Anchor with offset for headings */
1566
1683
 
1567
1684
  h1, h2, h3, h4, h5, h6 {
1568
- scroll-margin-top: 3em;
1685
+ scroll-margin-top: calc(var(--anchor-offset) + 88px);
1569
1686
  }
1570
1687
 
1571
1688
  .before\:absolute::before {
@@ -1621,6 +1738,12 @@ h1, h2, h3, h4, h5, h6 {
1621
1738
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1622
1739
  }
1623
1740
 
1741
+ .hover\:scale-105:hover {
1742
+ --tw-scale-x: 1.05;
1743
+ --tw-scale-y: 1.05;
1744
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1745
+ }
1746
+
1624
1747
  .hover\:border-gray-100:hover {
1625
1748
  --tw-border-opacity: 1;
1626
1749
  border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -1641,6 +1764,12 @@ h1, h2, h3, h4, h5, h6 {
1641
1764
  color: rgb(59 130 246 / var(--tw-text-opacity));
1642
1765
  }
1643
1766
 
1767
+ .hover\:shadow-2xl:hover {
1768
+ --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1769
+ --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1770
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1771
+ }
1772
+
1644
1773
  .hover\:shadow-blue-700:hover {
1645
1774
  --tw-shadow-color: #1d4ed8;
1646
1775
  --tw-shadow: var(--tw-shadow-colored);
@@ -1651,6 +1780,16 @@ h1, h2, h3, h4, h5, h6 {
1651
1780
  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
1652
1781
  }
1653
1782
 
1783
+ .dark .dark\:features-dark {
1784
+ --tw-bg-opacity: 1;
1785
+ background-color: rgb(17 24 39 / var(--tw-bg-opacity));
1786
+ background-image: radial-gradient(#2a2a2a 20%, transparent 20%);
1787
+ background-size: 6px 6px;
1788
+ width: 100%;
1789
+ -ms-overflow-style: none;
1790
+ scrollbar-width: none;
1791
+ }
1792
+
1654
1793
  .dark .dark\:border-gray-800 {
1655
1794
  --tw-border-opacity: 1;
1656
1795
  border-color: rgb(31 41 55 / var(--tw-border-opacity));
@@ -1661,6 +1800,11 @@ h1, h2, h3, h4, h5, h6 {
1661
1800
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
1662
1801
  }
1663
1802
 
1803
+ .dark .dark\:border-gray-500 {
1804
+ --tw-border-opacity: 1;
1805
+ border-color: rgb(107 114 128 / var(--tw-border-opacity));
1806
+ }
1807
+
1664
1808
  .dark .dark\:border-b-gray-800 {
1665
1809
  --tw-border-opacity: 1;
1666
1810
  border-bottom-color: rgb(31 41 55 / var(--tw-border-opacity));
@@ -1711,6 +1855,21 @@ h1, h2, h3, h4, h5, h6 {
1711
1855
  color: rgb(156 163 175 / var(--tw-text-opacity));
1712
1856
  }
1713
1857
 
1858
+ .dark .dark\:text-gray-200 {
1859
+ --tw-text-opacity: 1;
1860
+ color: rgb(229 231 235 / var(--tw-text-opacity));
1861
+ }
1862
+
1863
+ .dark .dark\:text-gray-300 {
1864
+ --tw-text-opacity: 1;
1865
+ color: rgb(209 213 219 / var(--tw-text-opacity));
1866
+ }
1867
+
1868
+ .dark .dark\:shadow-gray-700 {
1869
+ --tw-shadow-color: #374151;
1870
+ --tw-shadow: var(--tw-shadow-colored);
1871
+ }
1872
+
1714
1873
  .dark .dark\:invert {
1715
1874
  --tw-invert: invert(100%);
1716
1875
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1769,6 +1928,10 @@ h1, h2, h3, h4, h5, h6 {
1769
1928
  .md\:w-4 {
1770
1929
  width: 1rem;
1771
1930
  }
1931
+
1932
+ .md\:w-1\/2 {
1933
+ width: 50%;
1934
+ }
1772
1935
  }
1773
1936
 
1774
1937
  @media (min-width: 1024px) {
@@ -1776,6 +1939,10 @@ h1, h2, h3, h4, h5, h6 {
1776
1939
  margin: 3rem;
1777
1940
  }
1778
1941
 
1942
+ .lg\:mb-16 {
1943
+ margin-bottom: 4rem;
1944
+ }
1945
+
1779
1946
  .lg\:block {
1780
1947
  display: block;
1781
1948
  }
@@ -1788,6 +1955,10 @@ h1, h2, h3, h4, h5, h6 {
1788
1955
  height: calc(100vh - 8rem);
1789
1956
  }
1790
1957
 
1958
+ .lg\:h-96 {
1959
+ height: 24rem;
1960
+ }
1961
+
1791
1962
  .lg\:w-1\/2 {
1792
1963
  width: 50%;
1793
1964
  }
@@ -1796,6 +1967,14 @@ h1, h2, h3, h4, h5, h6 {
1796
1967
  width: 16rem;
1797
1968
  }
1798
1969
 
1970
+ .lg\:w-1\/3 {
1971
+ width: 33.333333%;
1972
+ }
1973
+
1974
+ .lg\:w-3\/4 {
1975
+ width: 75%;
1976
+ }
1977
+
1799
1978
  .lg\:px-0 {
1800
1979
  padding-left: 0px;
1801
1980
  padding-right: 0px;
@@ -1811,6 +1990,21 @@ h1, h2, h3, h4, h5, h6 {
1811
1990
  padding-right: 8rem;
1812
1991
  }
1813
1992
 
1993
+ .lg\:text-base {
1994
+ font-size: 1rem;
1995
+ line-height: 1.5rem;
1996
+ }
1997
+
1998
+ .lg\:text-5xl {
1999
+ font-size: 3rem;
2000
+ line-height: 1;
2001
+ }
2002
+
2003
+ .lg\:text-xl {
2004
+ font-size: 1.25rem;
2005
+ line-height: 1.75rem;
2006
+ }
2007
+
1814
2008
  .lg\:text-7xl {
1815
2009
  font-size: 4.5rem;
1816
2010
  line-height: 1;
@@ -1,5 +1,5 @@
1
1
  export declare function compile(opts: {
2
2
  content: string;
3
3
  }): Promise<{
4
- result: any;
4
+ result: string;
5
5
  }>;
package/dist/compiler.js CHANGED
@@ -14,21 +14,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
14
14
  Object.defineProperty(exports, "__esModule", { value: true });
15
15
  exports.compile = void 0;
16
16
  // @ts-ignore
17
- const mdx_1 = __importDefault(require("@mdx-js/mdx"));
18
- const remark_slug_1 = __importDefault(require("remark-slug"));
17
+ const mdx_1 = require("../compiled/@mdx-js/mdx");
18
+ // @ts-ignore
19
+ const rehype_slug_1 = __importDefault(require("../compiled/rehype-slug"));
19
20
  function compile(opts) {
20
21
  return __awaiter(this, void 0, void 0, function* () {
21
- let result = yield (0, mdx_1.default)(opts.content, {
22
- remarkPlugins: [remark_slug_1.default],
23
- rehypePlugins: [],
24
- compilers: [],
22
+ const compiler = (0, mdx_1.createProcessor)({
23
+ jsx: true,
24
+ remarkPlugins: [],
25
+ rehypePlugins: [rehype_slug_1.default],
25
26
  });
26
- result = `
27
- import React, { useEffect } from 'react';
28
- ${result}`;
29
- result = result.replace('/* @jsxRuntime classic */', '');
30
- result = result.replace('/* @jsx mdx */', '');
31
- result = result.replace('return <MDXLayout', `
27
+ let result = String(yield compiler.process(opts.content));
28
+ result = result.replace('function MDXContent(props = {}) {', `
29
+ import { useEffect } from 'react';
30
+
31
+ function MDXContent(props = {}) {
32
32
 
33
33
  useEffect(() => {
34
34
  if (window.location.hash.length !== 0) {
@@ -38,7 +38,7 @@ ${result}`;
38
38
  }
39
39
  }, []);
40
40
 
41
- return <MDXLayout`);
41
+ `);
42
42
  return { result };
43
43
  });
44
44
  }
package/dist/index.js CHANGED
@@ -19,6 +19,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
19
19
  return result;
20
20
  };
21
21
  Object.defineProperty(exports, "__esModule", { value: true });
22
+ const bundler_utils_1 = require("@umijs/bundler-utils");
23
+ const utils_1 = require("@umijs/utils");
22
24
  const fs_1 = __importStar(require("fs"));
23
25
  const path_1 = require("path");
24
26
  const markdown_1 = require("./markdown");
@@ -55,6 +57,13 @@ exports.default = (api) => {
55
57
  }
56
58
  });
57
59
  api.onGenerateFiles(() => {
60
+ var _a;
61
+ // theme path
62
+ let theme = ((_a = api.config.docs) === null || _a === void 0 ? void 0 : _a.theme) || require.resolve('../client/theme-doc/index.ts');
63
+ if (theme === 'blog') {
64
+ theme = require.resolve('../client/theme-blog/index.ts');
65
+ }
66
+ theme = (0, utils_1.winPath)(theme);
58
67
  const themeConfigPath = (0, path_1.join)(api.cwd, 'theme.config.ts');
59
68
  const themeExists = (0, fs_1.existsSync)(themeConfigPath);
60
69
  // 将 docs/locales 目录下的 json 文件注入到 themeConfig.locales 中
@@ -72,11 +81,17 @@ exports.default = (api) => {
72
81
  }
73
82
  });
74
83
  }
75
- // @TODO: 需要能够动态解析 theme 中导出的组件,现在是硬编码
84
+ // exports don't start with $ will be MDX Component
85
+ const [_, exports] = (0, bundler_utils_1.parseModuleSync)({
86
+ content: (0, fs_1.readFileSync)(theme, 'utf-8'),
87
+ path: theme,
88
+ });
76
89
  api.writeTmpFile({
77
90
  path: 'index.ts',
78
91
  content: `
79
- export { Message, Hero } from '${require.resolve('../client/theme-doc')}';
92
+ export { ${exports
93
+ .filter((item) => !item.startsWith('$'))
94
+ .join(', ')} } from '${require.resolve('../client/theme-doc/index.ts')}';
80
95
  `,
81
96
  });
82
97
  api.writeTmpFile({
@@ -84,7 +99,7 @@ export { Message, Hero } from '${require.resolve('../client/theme-doc')}';
84
99
  content: `
85
100
  import React from 'react';
86
101
  import { useOutlet, useAppData, useLocation, Link } from 'umi';
87
- import { Layout } from '${require.resolve('../client/theme-doc')}';
102
+ import { $Layout as Layout } from '${require.resolve('../client/theme-doc/index.ts')}';
88
103
  ${themeExists
89
104
  ? `import themeConfig from '${themeConfigPath}'`
90
105
  : `const themeConfig = {}`}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umijs/plugin-docs",
3
- "version": "4.0.0-rc.1",
3
+ "version": "4.0.0-rc.2",
4
4
  "description": "@umijs/plugin-docs",
5
5
  "homepage": "https://github.com/umijs/umi-next/tree/master/packages/plugin-docs#readme",
6
6
  "bugs": "https://github.com/umijs/umi-next/issues",
@@ -23,20 +23,33 @@
23
23
  "dev": "pnpm build -- --watch"
24
24
  },
25
25
  "dependencies": {
26
- "@mdx-js/mdx": "1.6.22",
27
- "keymaster": "^1.6.2",
28
- "remark-slug": "6.1.0"
26
+ "keymaster": "1.6.2",
27
+ "react-helmet": "^6.1.0"
29
28
  },
30
29
  "devDependencies": {
30
+ "@mdx-js/mdx": "2.0.0",
31
31
  "@types/keymaster": "^1.6.30",
32
+ "@types/react-helmet": "^6.1.5",
32
33
  "classnames": "^2.3.1",
33
- "tailwindcss": "^3.0.15",
34
- "umi": "4.0.0-rc.1"
34
+ "rehype-slug": "5.0.1",
35
+ "tailwindcss": "^3.0.23",
36
+ "umi": "4.0.0-rc.2"
35
37
  },
36
38
  "publishConfig": {
37
39
  "access": "public"
38
40
  },
39
41
  "authors": [
40
42
  "chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"
41
- ]
43
+ ],
44
+ "compiledConfig": {
45
+ "deps": [
46
+ "@mdx-js/mdx",
47
+ "rehype-slug"
48
+ ],
49
+ "externals": {},
50
+ "excludeDtsDeps": [
51
+ "@mdx-js/mdx",
52
+ "rehype-slug"
53
+ ]
54
+ }
42
55
  }