-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
76 lines (76 loc) · 55.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link rel="preload" href="/_next/static/css/6940058859857f2b.css" as="style"/><link rel="stylesheet" href="/_next/static/css/6940058859857f2b.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script defer="" src="/_next/static/chunks/5452.0e27716840c1d002.js"></script><script defer="" src="/_next/static/chunks/3858.c74783cb709bb2f5.js"></script><script src="/_next/static/chunks/webpack-f23dfb714e1a3e7e.js" defer=""></script><script src="/_next/static/chunks/framework-0657cf0bbe2d78c2.js" defer=""></script><script src="/_next/static/chunks/main-5b3c0682a5671237.js" defer=""></script><script src="/_next/static/chunks/pages/_app-a95d5abdf14c65ba.js" defer=""></script><script src="/_next/static/chunks/4879-022062c38ef2fcf9.js" defer=""></script><script src="/_next/static/chunks/5482-faf7e577e49cb056.js" defer=""></script><script src="/_next/static/chunks/6597-b1506bab6934b73e.js" defer=""></script><script src="/_next/static/chunks/2983-bff17ae06570ab37.js" defer=""></script><script src="/_next/static/chunks/6333-f20a11f4f70ed14e.js" defer=""></script><script src="/_next/static/chunks/1255-fdaa5395cc55e86f.js" defer=""></script><script src="/_next/static/chunks/6948-dcb4f9ed7238e848.js" defer=""></script><script src="/_next/static/chunks/9894-22734986cff9a1e7.js" defer=""></script><script src="/_next/static/chunks/6731-f65f105336c8843d.js" defer=""></script><script src="/_next/static/chunks/5849-1cfebe30034ba573.js" defer=""></script><script src="/_next/static/chunks/2754-ea68e72e157fd488.js" defer=""></script><script src="/_next/static/chunks/8650-a562e079ec9ba02e.js" defer=""></script><script src="/_next/static/chunks/9000-e5909e152999abea.js" defer=""></script><script src="/_next/static/chunks/9148-93e6660f9cc48f09.js" defer=""></script><script src="/_next/static/chunks/pages/index-49fe5beb8d9582f6.js" defer=""></script><script src="/_next/static/FqKz2diUNQs7h8Byk9HBF/_buildManifest.js" defer=""></script><script src="/_next/static/FqKz2diUNQs7h8Byk9HBF/_ssgManifest.js" defer=""></script><style data-styled="" data-styled-version="5.3.6"></style><style data-emotion="css-global o6gwfi">html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;-webkit-text-size-adjust:100%;}*,*::before,*::after{box-sizing:inherit;}strong,b{font-weight:700;}body{margin:0;color:rgba(0, 0, 0, 0.87);font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:400;font-size:1rem;line-height:1.5;letter-spacing:0.00938em;background-color:#fff;}@media print{body{background-color:#fff;}}body::backdrop{background-color:#fff;}</style><style data-emotion="css k008qs 1kvaj0b i6s8oy 15fqszo vubbuv 3wafqk 2j8woe 1o5pq7n 1unfv3a 1l8j5k8 39bbo6 1yo8bqd 1f8bwsm 1tsvksn yb0lig 1ontqvh 185eods lx9657 1ujsas3">.css-k008qs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-1kvaj0b{background-color:#fff;color:rgba(0, 0, 0, 0.87);-webkit-transition:box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;box-shadow:0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:fixed;z-index:1100;top:0;left:auto;right:0;background-color:#1976d2;color:#fff;}@media print{.css-1kvaj0b{position:absolute;}}@media (min-width:600px){.css-1kvaj0b{width:calc(100% - 240px);margin-left:240px;}}.css-i6s8oy{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:16px;padding-right:16px;min-height:56px;}@media (min-width:600px){.css-i6s8oy{padding-left:24px;padding-right:24px;}}@media (min-width:0px){@media (orientation: landscape){.css-i6s8oy{min-height:48px;}}}@media (min-width:600px){.css-i6s8oy{min-height:64px;}}.css-15fqszo{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;text-align:center;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;font-size:1.5rem;padding:8px;border-radius:50%;overflow:visible;color:rgba(0, 0, 0, 0.54);-webkit-transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;margin-left:-12px;color:inherit;margin-right:16px;}.css-15fqszo::-moz-focus-inner{border-style:none;}.css-15fqszo.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-15fqszo{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-15fqszo:hover{background-color:rgba(0, 0, 0, 0.04);}@media (hover: none){.css-15fqszo:hover{background-color:transparent;}}.css-15fqszo.Mui-disabled{background-color:transparent;color:rgba(0, 0, 0, 0.26);}@media (min-width:600px){.css-15fqszo{display:none;}}.css-vubbuv{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;font-size:1.5rem;}.css-3wafqk{margin:0;font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:500;font-size:1.25rem;line-height:1.6;letter-spacing:0.0075em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.css-2j8woe{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;text-align:center;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;font-size:1.5rem;padding:8px;border-radius:50%;overflow:visible;color:rgba(0, 0, 0, 0.54);-webkit-transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;color:inherit;margin-left:auto;}.css-2j8woe::-moz-focus-inner{border-style:none;}.css-2j8woe.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-2j8woe{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-2j8woe:hover{background-color:rgba(0, 0, 0, 0.04);}@media (hover: none){.css-2j8woe:hover{background-color:transparent;}}.css-2j8woe.Mui-disabled{background-color:transparent;color:rgba(0, 0, 0, 0.26);}@media (min-width:600px){.css-1o5pq7n{width:240px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}}.css-1unfv3a{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}@media (min-width:0px){.css-1unfv3a{display:none;}}@media (min-width:600px){.css-1unfv3a{display:block;}}.css-1unfv3a .MuiDrawer-paper{z-index:10;box-sizing:border-box;width:240px;}.css-1l8j5k8{background-color:#fff;color:rgba(0, 0, 0, 0.87);-webkit-transition:box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;box-shadow:none;overflow-y:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;z-index:1200;-webkit-overflow-scrolling:touch;position:fixed;top:0;outline:0;left:0;border-right:1px solid rgba(0, 0, 0, 0.12);}.css-39bbo6{margin:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;border-width:0;border-style:solid;border-color:rgba(0, 0, 0, 0.12);border-bottom-width:thin;}.css-1yo8bqd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;-webkit-text-decoration:none;text-decoration:none;width:100%;box-sizing:border-box;text-align:left;padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;}.css-1yo8bqd.Mui-focusVisible{background-color:rgba(0, 0, 0, 0.12);}.css-1yo8bqd.Mui-selected{background-color:rgba(25, 118, 210, 0.08);}.css-1yo8bqd.Mui-selected.Mui-focusVisible{background-color:rgba(25, 118, 210, 0.2);}.css-1yo8bqd.Mui-disabled{opacity:0.38;}.css-1f8bwsm{min-width:56px;color:rgba(0, 0, 0, 0.54);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}.css-1tsvksn{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;margin-top:4px;margin-bottom:4px;}.css-yb0lig{margin:0;font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:400;font-size:1rem;line-height:1.5;letter-spacing:0.00938em;display:block;}.css-1ontqvh{list-style:none;margin:0;padding:0;position:relative;padding-top:8px;padding-bottom:8px;}.css-185eods{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:24px;background:#f5f5f5;}@media (min-width:600px){.css-185eods{width:calc(100% - 240px);}}.css-lx9657{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:32px;background-color:white;max-width:1280px;margin:auto;}.css-1ujsas3{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:500;font-size:0.875rem;line-height:1.75;letter-spacing:0.02857em;text-transform:uppercase;min-width:64px;padding:6px 8px;border-radius:4px;-webkit-transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;color:#1976d2;}.css-1ujsas3::-moz-focus-inner{border-style:none;}.css-1ujsas3.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-1ujsas3{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-1ujsas3:hover{-webkit-text-decoration:none;text-decoration:none;background-color:rgba(25, 118, 210, 0.04);}@media (hover: none){.css-1ujsas3:hover{background-color:transparent;}}.css-1ujsas3.Mui-disabled{color:rgba(0, 0, 0, 0.26);}</style><style data-href="https://fonts.googleapis.com/css?family=Open+Sans">@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:normal;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVQ.woff) format('woff')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+1F00-1FFF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+0370-03FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVQUwaEQbjB_mQ.woff) format('woff');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVQUwaEQbjA.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id="__next"><div class="MuiBox-root css-k008qs"><header class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-1kvaj0b"><div class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-i6s8oy"><button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-edgeStart MuiIconButton-sizeMedium css-15fqszo" tabindex="0" type="button" aria-label="open drawer"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="MenuIcon"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></button><div class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap css-3wafqk">React Page <!-- -->###VERSION###</div><a class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-2j8woe" tabindex="0" href="https://github.com/react-page/react-page" target="_blank" aria-label="open drawer"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="GitHubIcon"><path d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"></path></svg></a></div></header><nav class="MuiBox-root css-1o5pq7n" aria-label="mailbox folders"><div class="MuiDrawer-root MuiDrawer-docked css-1unfv3a"><div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-1l8j5k8"><div><div class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-i6s8oy"></div><hr class="MuiDivider-root MuiDivider-fullWidth css-39bbo6"/><div><div></div><hr class="MuiDivider-root MuiDivider-fullWidth css-39bbo6"/><a class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1yo8bqd" href="/docs"><div class="MuiListItemIcon-root css-1f8bwsm"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="DescriptionIcon"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"></path></svg></div><div class="MuiListItemText-root css-1tsvksn"><span class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-yb0lig">Docs</span></div></a><a class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1yo8bqd" href="https://github.com/react-page/react-page"><div class="MuiListItemIcon-root css-1f8bwsm"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="GitHubIcon"><path d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"></path></svg></div><div class="MuiListItemText-root css-1tsvksn"><span class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-yb0lig">Github</span></div></a><hr class="MuiDivider-root MuiDivider-fullWidth css-39bbo6"/><a class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1yo8bqd" href="/"><div class="MuiListItemText-root css-1tsvksn"><span class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-yb0lig">Demo</span></div></a><a class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1yo8bqd" href="/readonly"><div class="MuiListItemText-root css-1tsvksn"><span class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-yb0lig">Read only</span></div></a><a class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1yo8bqd" href="/empty"><div class="MuiListItemText-root css-1tsvksn"><span class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-yb0lig">Empty editor</span></div></a><a class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1yo8bqd" href="/examples/reactadmin"><div class="MuiListItemText-root css-1tsvksn"><span class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-yb0lig">React Admin example</span></div></a><hr class="MuiDivider-root MuiDivider-fullWidth css-39bbo6"/><ul class="MuiList-root MuiList-padding css-1ontqvh"><a class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1yo8bqd" href="/old/demo"><div class="MuiListItemText-root css-1tsvksn"><span class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-yb0lig">Old demo (v0)</span></div></a><a class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1yo8bqd" href="/old/fromhtml"><div class="MuiListItemText-root css-1tsvksn"><span class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-yb0lig">Old import-from-html-Demo</span></div></a></ul><hr class="MuiDivider-root MuiDivider-fullWidth css-39bbo6"/><ul class="MuiList-root MuiList-padding css-1ontqvh"><a class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1yo8bqd" href="https://react-page.github.io/"><div class="MuiListItemText-root css-1tsvksn"><span class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-yb0lig">Latest version</span></div></a><a class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1yo8bqd" href="https://react-page.github.io/beta"><div class="MuiListItemText-root css-1tsvksn"><span class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-yb0lig">beta version</span></div></a></ul></div></div></div></div></nav><main class="MuiBox-root css-185eods"><div class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-i6s8oy"></div><div class="MuiBox-root css-lx9657"><div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2 style="text-align:center">Next Level Content Editing</h2><h1 style="text-align:center">ReactPage</h1></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><p><strong>ReactPage</strong> is a next level content editor for react.</p><p>It enables <strong><em>webmasters and content editors </em></strong>to create the content they want with the <code style="white-space:pre-wrap"><Components /></code> you provide as a developer.</p></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12"><div style="padding:0" class="react-page-cell-inner"><div style="display:flex;flex-direction:column;height:100%"><div class="react-page-plugins-layout-background" style="background:linear-gradient(180deg, rgba(72, 39, 39, 0.75), rgba(0, 0, 0, 0.6224999999999999)), url('') center / cover no-repeat fixed"><div class="react-page-plugins-layout-background__backstretch" style="background-image:linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))"></div><div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div><div class="react-page-plugins-content-image-placeholder"></div></div></div></div></div><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2>Batteries included - Key features</h2><ul><li>powerful and customizable <strong>RichText Editor (</strong><em>powered by </em><a href="https://github.com/vazco/uniforms"><em></em></a><em></em><a href="https://github.com/ianstormtaylor/slate/"><em>Slate</em></a>)</li><li>12-column grid responsive grid layout</li><li>Drag & Drop cells</li><li>Undo & Redo, copy and hotkey support</li><li>Multi-Language support</li><li>Add any custom Components you like</li></ul></div></div></div></div></div></div></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2>It's just a react component!</h2></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12"><div class="react-page-row react-page-row-has-floating-children"><div class="react-page-cell react-page-cell-sm-4 react-page-cell-xs-12 react-page-cell-inline-right react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div><img class="react-page-plugins-content-image" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"/></div></div></div></div><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-has-inline-neighbour react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><p><strong>ReactPage</strong> has a simple API - it's basically just like a form field and can be included in any project. </p><p>Pass it's current <code style="white-space:pre-wrap">value</code> that you might read from your datastore and update the value when <code style="white-space:pre-wrap">onChange</code> is called. <strong>It's that simple.</strong></p><p>Set <code style="white-space:pre-wrap">readOnly={true}</code> whenever you want to display content without editing capabilities. <strong>ReactPage</strong> will only load what is really required for displaying thanks to code splitting. This results in a <strong>small bundle size.</strong> </p></div></div></div></div></div></div><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><!--$?--><template id="B:0"></template><!--/$--></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12"><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-4 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div><div class="react-page-plugins-content-image-placeholder"></div></div></div></div></div><div class="react-page-cell react-page-cell-sm-8 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2>Add anything you want</h2><p>Anything can displayed inside a cell of this editor! You can add text, images, videos and any custom Component you want by creating custom <code style="white-space:pre-wrap">CellPlugins.</code></p><p>Provide your webmasters a "recommended products" section for your E-Commerce blog.
Show a contact form directly inside your content.
Embed Tweets and newest posts from Social media.</p><p>Anything is possible with a simple, yet powerful API. </p><p>You provide a Component and some metadata about your new <code style="white-space:pre-wrap">CellPlugin </code>and you are done. If you additionaly provide a schema of the data of this <code style="white-space:pre-wrap">CellPlugin, </code>we will <strong>automatically create a form</strong> for you (<em>powered by </em><a href="https://github.com/vazco/uniforms"><em>Uniforms</em></a>).</p></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2>Powerful Rich Text editing</h2><p>We provide a powerful richtext plugin built upon <a href="https://github.com/vazco/uniforms"></a><a href="https://github.com/ianstormtaylor/slate/">Slate</a>. It works out-of-the-box, but is fully customizable. You can customize how everything is rendered by providing custom component for headlines, paragraphs, links and so-on and you can add create your own custom plugins to bring in <span color="green" style="color:green">color</span>, add custom links or custom paragraph styles.</p><h2></h2></div></div></div></div><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><p><em></em></p><p style="text-align:center"><em>You can customize the rich text editor anyway you like.
You can even add formula editing capabilities:</em></p><p style="text-align:center"><span style="position:relative"><span contenteditable="false"><!--$!--><template data-dgst="DYNAMIC_SERVER_USAGE"></template><!--/$--></span><span style="opacity:0;position:absolute;left:0;top:0">f(x) = x^2 </span></span></p><p></p></div></div></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12"><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2>Embraces Typescript</h2><ol><li>ReactPage is written in modern typescript and enables developer that include ReactPage into their project with typesafety and peace of mind. Thanks to generics, you can give any CellPlugin the data type that you need.</li></ol></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div><h4>A Sample Twitter plugin</h4><div></div></div></div></div></div></div></div><div class="react-page-cell react-page-cell-sm-6 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><!--$?--><template id="B:1"></template><!--/$--></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-8 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><h2>Server Side Rendering out of the box</h2><p><strong>ReactPage </strong>is built with performance in mind. It can be used for <strong>server side rendering (SSR)</strong>, which makes it not only a great tool for editing, but also for displaying. It's battle tested in nextjs, this example itself is created using nextjs and static page generation.</p><p>We try <strong>minimize bundle size</strong> as much as possible. Any UI solely used for editing is not loaded when in readOnly mode. </p></div></div></div></div><div class="react-page-cell react-page-cell-sm-4 react-page-cell-xs-12"><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-12 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf slate"><div style="display:flex;flex-direction:column;height:100%"><div style="position:relative;outline:none;white-space:pre-wrap;overflow-wrap:break-word"><p style="text-align:center"><em></em></p><p><em>ReactPage works in any SSR setup like
Next.js or Gatsby</em></p></div></div></div></div></div><div class="react-page-row"><div class="react-page-cell react-page-cell-sm-4 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div><img class="react-page-plugins-content-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Nextjs-logo.svg/800px-Nextjs-logo.svg.png"/></div></div></div></div><div class="react-page-cell react-page-cell-sm-3 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div class="react-page-plugins-content-spacer"><div style="height:24px"></div></div></div></div></div><div class="react-page-cell react-page-cell-sm-5 react-page-cell-xs-12 react-page-cell-leaf"><div class="react-page-cell-inner react-page-cell-inner-leaf"><div style="display:flex;flex-direction:column;height:100%"><div><img class="react-page-plugins-content-image" src="https://www.gatsbyjs.cn/Gatsby-Logo.svg"/></div></div></div></div></div></div></div></div><button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1ujsas3" tabindex="0" type="button">Reset</button></div></main></div></div><div hidden id="S:0"><pre style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-tsx" style="color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre-wrap;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span><span>
</span></span><span><span></span><span class="token" style="color:#c586c0">import</span><span> </span><span class="token" style="color:#9cdcfe">Editor</span><span> </span><span class="token" style="color:#c586c0">from</span><span> </span><span class="token" style="color:#ce9178">'@react-page/editor'</span><span>
</span></span><span>
</span><span><span></span><span class="token" style="color:#6a9955">// use ReactPage for editing Content</span><span>
</span></span><span><span></span><span class="token" style="color:#808080"><</span><span class="token" style="color:#4ec9b0">Editor</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">cellPlugins</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">yourCellPlugins</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">value</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">theCurrentValue</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">onChange</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">newValue </span><span class="token script language-javascript" style="color:#569cd6">=></span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#dcdcaa">saveTheValue</span><span class="token script language-javascript" style="color:#808080">(</span><span class="token script language-javascript" style="color:#569cd6">newValue</span><span class="token script language-javascript" style="color:#808080">)</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"></span><span class="token" style="color:#808080">/></span><span>
</span></span><span>
</span><span><span></span><span class="token" style="color:#6a9955">// or just for displaying content</span><span>
</span></span><span><span></span><span class="token" style="color:#808080"><</span><span class="token" style="color:#4ec9b0">Editor</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">cellPlugins</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">yourCellPlugins</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">value</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">theCurrentValue</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">readOnly</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">true</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"></span><span class="token" style="color:#808080">/></span><span>
</span></span><span></span></code></pre></div><script>function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}};$RC("B:0","S:0")</script><div hidden id="S:1"><pre style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-tsx" style="color:#9cdcfe;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre-wrap;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span><span class="token" style="color:#c586c0">import</span><span> </span><span class="token" style="color:#569CD6">type</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span> </span><span class="token" style="color:#4ec9b0">CellPlugin</span><span> </span><span class="token" style="color:#d4d4d4">}</span><span> </span><span class="token" style="color:#c586c0">from</span><span> </span><span class="token" style="color:#ce9178">'@react-page/editor'</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span><span></span><span class="token" style="color:#c586c0">import</span><span> </span><span class="token" style="color:#9cdcfe">React</span><span> </span><span class="token" style="color:#c586c0">from</span><span> </span><span class="token" style="color:#ce9178">'react'</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span><span></span><span class="token" style="color:#c586c0">import</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span class="token"> </span><span class="token" style="color:#9cdcfe">Timeline</span><span class="token"> </span><span class="token" style="color:#d4d4d4">}</span><span> </span><span class="token" style="color:#c586c0">from</span><span> </span><span class="token" style="color:#ce9178">'react-twitter-widgets'</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span>
</span><span><span></span><span class="token" style="color:#569CD6">type</span><span> </span><span class="token" style="color:#4ec9b0">Data</span><span> </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> screenName</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">string</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span><span> height</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">number</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span><span> title</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">string</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span><span></span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span><span></span><span class="token" style="color:#6a9955">// you can pass the shape of the data as the generic type argument</span><span>
</span></span><span><span></span><span class="token" style="color:#569CD6">const</span><span> customContentPluginTwitter</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#4ec9b0">CellPlugin</span><span class="token" style="color:#d4d4d4"><</span><span class="token" style="color:#4ec9b0">Data</span><span class="token" style="color:#d4d4d4">></span><span> </span><span class="token" style="color:#d4d4d4">=</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> </span><span class="token function-variable" style="color:#dcdcaa">Renderer</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">(</span><span class="token" style="color:#d4d4d4">{</span><span> data </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">)</span><span> </span><span class="token" style="color:#569CD6">=></span><span> </span><span class="token" style="color:#d4d4d4">(</span><span>
</span></span><span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#808080">></span><span class="token plain-text">
</span></span><span><span class="token plain-text"> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">h4</span><span class="token" style="color:#808080">></span><span class="token" style="color:#d4d4d4">{</span><span>data</span><span class="token" style="color:#d4d4d4">.</span><span class="token property-access">title</span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">h4</span><span class="token" style="color:#808080">></span><span class="token plain-text">
</span></span><span><span class="token plain-text"> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#4ec9b0">Timeline</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">dataSource</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">
</span></span><span><span class="token script language-javascript" style="color:#569cd6"> sourceType</span><span class="token script language-javascript" style="color:#d4d4d4">:</span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#ce9178">'profile'</span><span class="token script language-javascript" style="color:#808080">,</span><span class="token script language-javascript" style="color:#569cd6">
</span></span><span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#6a9955">// data has already the right type!</span><span class="token script language-javascript" style="color:#569cd6">
</span></span><span><span class="token script language-javascript" style="color:#569cd6"> screenName</span><span class="token script language-javascript" style="color:#d4d4d4">:</span><span class="token script language-javascript" style="color:#569cd6"> data</span><span class="token script language-javascript" style="color:#808080">.</span><span class="token script language-javascript property-access" style="color:#569cd6">screenName</span><span class="token script language-javascript" style="color:#808080">,</span><span class="token script language-javascript" style="color:#569cd6">
</span></span><span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#808080">}</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">options</span><span class="token script language-javascript script-punctuation" style="color:#569cd6">=</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#808080">{</span><span class="token script language-javascript" style="color:#569cd6">
</span></span><span><span class="token script language-javascript" style="color:#569cd6"> height</span><span class="token script language-javascript" style="color:#d4d4d4">:</span><span class="token script language-javascript" style="color:#569cd6"> data</span><span class="token script language-javascript" style="color:#808080">.</span><span class="token script language-javascript property-access" style="color:#569cd6">height</span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#d4d4d4">||</span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#b5cea8">600</span><span class="token script language-javascript" style="color:#808080">,</span><span class="token script language-javascript" style="color:#569cd6">
</span></span><span><span class="token script language-javascript" style="color:#569cd6"> </span><span class="token script language-javascript" style="color:#808080">}</span><span class="token script language-javascript" style="color:#808080">}</span><span class="token" style="color:#569cd6">
</span></span><span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#808080">/></span><span class="token plain-text">
</span></span><span><span class="token plain-text"> </span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#808080">></span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">)</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> id</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'twitter-timeline'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> title</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'Twitter timeline'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> description</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'A twitter timeline'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> version</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">1</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> controls</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> type</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'autoform'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> schema</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> </span><span class="token" style="color:#6a9955">// this JSONschema is type checked against the generic type argument</span><span>
</span></span><span><span> </span><span class="token" style="color:#6a9955">// the autocompletion of your IDE helps to create this schema</span><span>
</span></span><span><span> properties</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> title</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> type</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'string'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#c586c0">default</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'A Sample Twitter plugin'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> screenName</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> type</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'string'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#c586c0">default</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'typescript'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> height</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span></span><span><span> type</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#ce9178">'number'</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#c586c0">default</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">600</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> required</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#d4d4d4">[</span><span class="token" style="color:#ce9178">'screenName'</span><span class="token" style="color:#d4d4d4">]</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span> </span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">,</span><span>
</span></span><span><span></span><span class="token" style="color:#d4d4d4">}</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span>
</span><span><span></span><span class="token" style="color:#c586c0">export</span><span> </span><span class="token" style="color:#c586c0">default</span><span> customContentPluginTwitter</span><span class="token" style="color:#d4d4d4">;</span><span>
</span></span><span></span></code></pre></div><script>$RC("B:1","S:1")</script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"FqKz2diUNQs7h8Byk9HBF","nextExport":true,"autoExport":true,"isFallback":false,"dynamicIds":[13858],"scriptLoader":[]}</script></body></html>