website: markdown support snack preview button.

website/src/component/Markdown/SnackPlayer.tsx

@@ -0,0 +1,55 @@
+
+import { ReactComponent as LinkSVG } from '../SubMenus/link.svg';
+import styles from './index.module.less';
+
+export interface SnackPlayerProps {
+  platform?: 'android' | 'web' | 'ios' | 'mydevice'
+  theme?: 'light' | 'dark';
+  buttonTitle?: string;
+  preview?: boolean;
+  name?: string;
+  sdkVersion?: string;
+  description?: string;
+  loading?: 'auto' | 'lazy' | 'eager';
+  dependencies?: string;
+  templateId?: string;
+  contentHidden?: boolean;
+  /**
+   * ```js
+   * {
+   *   "AppTest.js": {
+   *     "type": "CODE",
+   *     "contents": "console.log(\"www\")"
+   *   }
+   * }
+   * ```
+   */
+  files?: string;
+}
+
+export function SnackPlayer(props: SnackPlayerProps) {
+  const {
+    platform = 'web',
+    buttonTitle = 'Try this Example on Snack',
+    name = 'Example',
+    sdkVersion = '42.0.0',
+    dependencies = '@uiw/[email protected],react-native-svg',
+    files = '{}',
+  } = props;
+
+  return (
+    <form action="https://snack.expo.dev" method="POST" target="_blank">
+      <input type="hidden" name="platform" value={platform} />
+      <input type="hidden" name="name" value={name} />
+      {dependencies && <input type="hidden" name="dependencies" value={dependencies} />}
+      <input type="hidden" name="sdkVersion" value={sdkVersion} />
+      <input type="hidden" name="files" value={files} />
+      <button className={styles.button}>
+        <LinkSVG
+          fill="currentColor"
+        />
+        {buttonTitle}
+      </button>
+    </form>
+  );
+}

website/src/component/Markdown/index.module.less

@@ -1,3 +1,26 @@
 .warpper {
   padding: 36px 33px 30px 33px;
+}
+
+.button {
+  display: grid;
+  grid-template-columns: 8px 1fr;
+  grid-gap: 8px;
+  align-items: center;
+  border: none;
+  border-radius: 4px;
+  padding: 0 6px;
+  height: 22px;
+  margin: 18px 0 -8px 18px;
+  text-decoration: none;
+  background: #2196f3;
+  color: #fff;
+  font-family: expo-brand-book;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all .3s;
+  &:hover {
+    background: #3f51b5;
+    color: #fff;
+  }
 }

website/src/component/Markdown/index.tsx

@@ -5,6 +5,7 @@ import rehypeAttr from 'rehype-attr';
 import Contributors from '../Contributors';
 import Footer from '../Footer';
 import styles from './index.module.less';
+import { SnackPlayer } from './SnackPlayer'
 
 interface MarkdownProps extends React.HTMLAttributes<HTMLDivElement> {
   path?: string;
@@ -16,6 +17,17 @@ interface MarkdownState {
   message?: string;
 }
 
+const getCodeStr = (data: any[] = [], code: string = '') => {
+  data.forEach((node) => {
+    if (node.type === 'text') {
+      code += node.value;
+    } else if (node.children && Array.isArray(node.children)) {
+      code += getCodeStr(node.children);
+    }
+  });
+  return code;
+};
+
 // utilitary function to create a dictionary of packaged files 
 // based on the output of require.context()
 // https://forum.ionicframework.com/t/react-app-loading-lots-of-markdown-html-fragments-with-images/188072/3
@@ -76,23 +88,51 @@ export default class Markdown extends Component<MarkdownProps, MarkdownState> {
             transformImageUri={this.transformImageUri.bind(this)}
             components={{
               /**
-               * bgWhite 设置代码预览背景白色，否则为格子背景。
-               * noCode 不显示代码编辑器。
-               * noPreview 不显示代码预览效果。
-               * noScroll 预览区域不显示滚动条。
-               * codePen 显示 Codepen 按钮，要特别注意 包导入的问题，实例中的 import 主要用于 Codepen 使用。
+               * snack, https://snack.expo.dev
                */
               code: ({
+                snack,
                 inline,
-                node,
-                noPreview,
-                noScroll,
-                bgWhite,
-                noCode,
-                codePen,
-                codeSandbox,
+                platform,
+                theme,
+                buttonTitle,
+                name,
+                sdkVersion,
+                preview,
+                description,
+                dependencies,
+                templateId,
+                contentHidden,
+                loading,
+                files,
                 ...props
-              }) => {
+              }: any) => {
+                if (snack && !inline) {
+                  let filesObj = { 'App.js':  { type: 'CODE', contents: getCodeStr(props.node.children) || '' }};
+                  try {
+                    const fObj = JSON.parse(files || '{}');
+                    filesObj = { ...filesObj, ...fObj }
+                  } catch (err) { }
+                  return (
+                    <Fragment>
+                      <SnackPlayer
+                        platform={platform}
+                        theme={theme}
+                        name={name}
+                        files={JSON.stringify(filesObj)}
+                        preview={preview}
+                        loading={loading}
+                        description={description}
+                        sdkVersion={sdkVersion}
+                        dependencies={dependencies}
+                        contentHidden={contentHidden}
+                        templateId={templateId}
+                        buttonTitle={buttonTitle}
+                      />
+                      <code {...props} />
+                    </Fragment>
+                  );
+                }
                 return <code {...props} />;
               },
             }}