Skip to content

Commit cb519a7

Browse files
soulhatsoulhat
committed
fix: 修改文档展示
1 parent f2bfea5 commit cb519a7

File tree

6 files changed

+212
-18
lines changed

6 files changed

+212
-18
lines changed

‎index.html

+193-3
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,202 @@
99
background: #f7f7f7;
1010
}
1111
</style>
12-
1312
</head>
1413
<body>
1514
<div id="doc"></div>
16-
<script async src="https://storage.360buyimg.com/pandoracdn/js/expo/embed.js"></script>
17-
<script type="module" src="/sites/main.tsx"></script>
15+
<script>
16+
var ExpoSnack = {
17+
append: function (container, options) {
18+
options = options || {};
19+
options.id =
20+
options.id ||
21+
container.dataset.snackId ||
22+
container.dataset.sketchId;
23+
options.platform =
24+
options.platform ||
25+
container.dataset.snackPlatform ||
26+
container.dataset.sketchPlatform;
27+
options.supportedPlatforms =
28+
options.supportedPlatforms ||
29+
container.dataset.snackSupportedPlatforms ||
30+
container.dataset.snackSupportedplatforms;
31+
options.preview =
32+
options.preview ||
33+
container.dataset.snackPreview ||
34+
container.dataset.sketchPreview ||
35+
'true';
36+
options.sdkVersion =
37+
options.sdkVersion ||
38+
container.dataset.snackSdkVersion ||
39+
container.dataset.snackSdkversion;
40+
options.name = options.name || container.dataset.snackName;
41+
options.description =
42+
options.description || container.dataset.snackDescription;
43+
options.theme = options.theme || container.dataset.snackTheme;
44+
options.appetizePayerCode =
45+
options.appetizePayerCode ||
46+
container.dataset.snackAppetizePayerCode;
47+
options.loading = options.loading || container.dataset.snackLoading;
48+
options.deviceFrame =
49+
options.deviceFrame ||
50+
container.dataset.deviceFrame ||
51+
container.dataset.snackDeviceFrame;
52+
options.deviceAndroid =
53+
options.deviceAndroid ||
54+
container.dataset.deviceAndroid ||
55+
container.dataset.snackDeviceAndroid;
56+
options.deviceAndroidScale =
57+
options.deviceAndroidScale ||
58+
container.dataset.deviceAndroidScale ||
59+
container.dataset.snackDeviceAndroidScale;
60+
options.deviceIos =
61+
options.deviceIos ||
62+
container.dataset.deviceIos ||
63+
container.dataset.snackDeviceIos;
64+
options.deviceIosScale =
65+
options.deviceIosScale ||
66+
container.dataset.deviceIosScale ||
67+
container.dataset.snackDeviceIosScale;
68+
69+
if (!options.code && container.dataset.snackCode) {
70+
options.code = decodeURIComponent(container.dataset.snackCode);
71+
}
72+
73+
if (!options.files && container.dataset.snackFiles) {
74+
options.files = decodeURIComponent(container.dataset.snackFiles);
75+
}
76+
77+
if (!options.dependencies && container.dataset.snackDependencies) {
78+
options.dependencies = container.dataset.snackDependencies;
79+
}
80+
81+
if (container.querySelector('iframe[data-snack-iframe]')) {
82+
return;
83+
}
84+
85+
if (!options.id && !(options.code || options.files)) {
86+
return;
87+
}
88+
89+
var iframeId = Math.random().toString(36).substr(2, 10);
90+
var iframe = document.createElement('iframe');
1891

92+
var iframeQueryParams = '?iframeId=' + iframeId;
93+
94+
if (options.preview) {
95+
iframeQueryParams += '&preview=' + options.preview;
96+
}
97+
if (options.platform) {
98+
iframeQueryParams += '&platform=' + options.platform;
99+
}
100+
if (options.supportedPlatforms) {
101+
iframeQueryParams +=
102+
'&supportedPlatforms=' + options.supportedPlatforms;
103+
}
104+
if (options.sdkVersion) {
105+
iframeQueryParams += '&sdkVersion=' + options.sdkVersion;
106+
}
107+
if (options.name) {
108+
iframeQueryParams += '&name=' + options.name;
109+
}
110+
if (options.description) {
111+
iframeQueryParams += '&description=' + options.description;
112+
}
113+
if (options.theme) {
114+
iframeQueryParams += '&theme=' + options.theme;
115+
}
116+
if (options.appetizePayerCode) {
117+
iframeQueryParams +=
118+
'&appetizePayerCode=' + options.appetizePayerCode;
119+
}
120+
if (options.verbose) {
121+
iframeQueryParams += '&verbose=' + options.verbose;
122+
}
123+
if (options.deviceFrame) {
124+
iframeQueryParams += '&deviceFrame=' + options.deviceFrame;
125+
}
126+
if (options.deviceAndroid) {
127+
iframeQueryParams += '&deviceAndroid=' + options.deviceAndroid;
128+
}
129+
if (options.deviceAndroidScale) {
130+
iframeQueryParams +=
131+
'&deviceAndroidScale=' + options.deviceAndroidScale;
132+
}
133+
if (options.deviceFrameIos) {
134+
iframeQueryParams += '&deviceFrameIos=' + options.deviceFrameIos;
135+
}
136+
if (options.deviceFrameIosScale) {
137+
iframeQueryParams +=
138+
'&deviceFrameIosScale=' + options.deviceFrameIosScale;
139+
}
140+
if (options.loading) {
141+
iframe.loading = options.loading;
142+
}
143+
144+
if (options.id) {
145+
iframe.src =
146+
'https://snack.expo.dev/embedded/' +
147+
options.id +
148+
iframeQueryParams;
149+
} else {
150+
iframe.src =
151+
'https://snack.expo.dev/embedded' +
152+
iframeQueryParams +
153+
'&waitForData=true';
154+
}
155+
iframe.style = 'display: block';
156+
iframe.height = '100%';
157+
iframe.width = '100%';
158+
iframe.frameBorder = '0';
159+
iframe.allowTransparency = true;
160+
iframe.dataset.snackIframe = true;
161+
162+
container.appendChild(iframe);
163+
164+
if (options.code || options.files || options.dependencies) {
165+
window.addEventListener('message', function (event) {
166+
var eventName = event.data[0];
167+
var data = event.data[1];
168+
if (
169+
eventName === 'expoFrameLoaded' &&
170+
data.iframeId === iframeId
171+
) {
172+
iframe.contentWindow.postMessage(
173+
[
174+
'expoDataEvent',
175+
{
176+
iframeId: iframeId,
177+
dependencies: options.dependencies,
178+
code: options.code,
179+
files: options.files,
180+
},
181+
],
182+
'*'
183+
);
184+
}
185+
});
186+
}
187+
},
188+
189+
remove: function (container) {
190+
var iframe = container.querySelector('iframe[data-snack-iframe]');
191+
192+
if (iframe) {
193+
iframe.parentNode.removeChild(iframe);
194+
}
195+
},
196+
197+
initialize: function () {
198+
document
199+
.querySelectorAll(
200+
'[data-sketch-id], [data-snack-id], [data-snack-code], [data-snack-files]'
201+
)
202+
.forEach(function (element) {
203+
ExpoSnack.append(element);
204+
});
205+
},
206+
};
207+
</script>
208+
<script type="module" src="/sites/main.tsx"></script>
19209
</body>
20210
</html>

‎sites/App.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ function App() {
3333
}
3434
};
3535

36-
// useEffect(() => {
37-
// document.addEventListener('scroll', scrollTitle);
38-
// }, []);
36+
useEffect(() => {
37+
document.addEventListener('scroll', scrollTitle);
38+
}, []);
3939

4040
return (
4141
<div>

‎sites/components/demo-preview/demo-preview.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const DemoPreview = (props: any) => {
1616

1717
return (
1818
<div className={`doc-demo-preview ${props.className}`}>
19-
<iframe src={`https://nutui.jd.com/react/demo.html#${URL}`} frameBorder='0'></iframe>
19+
<iframe src={`https://nutui.jd.com/h5/react/1x/demo.html#${URL}`} frameBorder='0'></iframe>
2020
</div>
2121
);
2222
};

‎sites/components/nav/nav.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ const Nav = () => {
1818
setFixed(false);
1919
}
2020
};
21-
// useEffect(() => {
22-
// document.addEventListener('scroll', scrollNav);
23-
// }, []);
21+
useEffect(() => {
22+
document.addEventListener('scroll', scrollNav);
23+
}, []);
2424
return (
2525
<div className={`doc-nav ${fixed ? 'fixed' : ''}`}>
2626
<ol>

‎sites/components/remark/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { memo } from 'react';
1+
import { memo, useEffect } from 'react';
22
import ReactMarkdown from 'react-markdown';
33
import rehypeRaw from 'rehype-raw';
44
import remarkDirective from 'remark-directive';
@@ -20,6 +20,10 @@ const Remark = ({ ru }: { ru: any }) => {
2020
return raws[`${ru}${lang.replace('-', '')}`];
2121
}
2222
};
23+
useEffect(() => {
24+
window.ExpoSnack?.initialize();
25+
window.scrollTo(0, 0);
26+
}, [])
2327
return (
2428
<ReactMarkdown
2529
children={getMarkdownByLang(ru)}

‎sites/markdown-plugin/remark-snackplayer.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,24 @@ const processNode = (node: any, parent: any) => {
1818
try {
1919
const params = parseParams(node.meta);
2020

21-
const name = params.name ? decodeURIComponent(params.name) : 'Example';
21+
const name = params.name ? decodeURIComponent(params.name) : parent.children[0]?.children[0]?.value || 'Example';
2222
const description = params.description
2323
? decodeURIComponent(params.description)
2424
: 'Example usage';
2525
const sampleCode = node.value;
2626
const encodedSampleCode = encodeURIComponent(sampleCode);
27-
const dependencies = params.dependencies || '';
28-
const platform = params.platform || 'web';
29-
const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
27+
const dependencies = params.dependencies || '@nutui/nutui-react-native,expo-linear-gradient';
28+
const platform = params.platform || 'mydevice';
29+
const supportedPlatforms = params.supportedPlatforms || 'mydevice,ios,android,web';
3030
const theme = params.theme || 'light';
31-
const preview = params.preview || 'true';
31+
const preview = params.preview || 'false';
3232
const loading = params.loading || 'lazy';
33-
33+
3434
// Generate Node for SnackPlayer
3535
// See https://github.com/expo/snack/blob/main/docs/embedding-snacks.md
36-
console.log( 'dependencies', dependencies, params, node.meta)
3736
const snackPlayerDiv = u('html', {
3837
value: dedent`<div
38+
id="snack-player-${Math.random()}"
3939
class="snack-player"
4040
data-snack-name="${name}"
4141
data-snack-description="${description}"

0 commit comments

Comments
 (0)