From c935c705b56e7e7d1d5f4b34b310e4c792c656e3 Mon Sep 17 00:00:00 2001 From: Amine Ben hammou Date: Sat, 14 Sep 2019 06:06:10 +0100 Subject: [PATCH] Add docs --- .dockerignore | 2 + Dockerfile | 10 + README.md | 67 - docker-compose.yml | 18 + docs/install.md | 7 + docs/introduction.md | 5 + docs/use-storage.md | 55 + package-lock.json | 2 +- website/README.md | 193 + website/build/react-tidy-gh-pages | 1 + website/build/react-tidy/css/main.css | 1 + website/build/react-tidy/css/prism.css | 115 + website/build/react-tidy/docs/install.html | 59 + .../build/react-tidy/docs/introduction.html | 58 + .../build/react-tidy/docs/use-storage.html | 99 + website/build/react-tidy/img/favicon.png | Bin 0 -> 272 bytes website/build/react-tidy/img/language.svg | 3 + website/build/react-tidy/img/logo-light.svg | 1 + website/build/react-tidy/img/logo.svg | 1 + website/build/react-tidy/index.html | 14 + website/build/react-tidy/js/codetabs.js | 31 + website/build/react-tidy/js/scrollSpy.js | 76 + website/build/react-tidy/sitemap.xml | 1 + website/core/Footer.js | 22 + website/i18n/en.json | 29 + website/package.json | 14 + website/pages/index.html | 14 + website/sidebars.json | 6 + website/siteConfig.js | 65 + website/static/css/custom.css | 16 + website/static/img/favicon.png | Bin 0 -> 349 bytes website/static/img/logo-light.svg | 93 + website/static/img/logo.svg | 93 + website/yarn.lock | 6735 +++++++++++++++++ 34 files changed, 7838 insertions(+), 68 deletions(-) create mode 100755 .dockerignore create mode 100755 Dockerfile create mode 100755 docker-compose.yml create mode 100644 docs/install.md create mode 100755 docs/introduction.md create mode 100644 docs/use-storage.md create mode 100755 website/README.md create mode 160000 website/build/react-tidy-gh-pages create mode 100644 website/build/react-tidy/css/main.css create mode 100644 website/build/react-tidy/css/prism.css create mode 100644 website/build/react-tidy/docs/install.html create mode 100644 website/build/react-tidy/docs/introduction.html create mode 100644 website/build/react-tidy/docs/use-storage.html create mode 100644 website/build/react-tidy/img/favicon.png create mode 100755 website/build/react-tidy/img/language.svg create mode 100644 website/build/react-tidy/img/logo-light.svg create mode 100644 website/build/react-tidy/img/logo.svg create mode 100644 website/build/react-tidy/index.html create mode 100755 website/build/react-tidy/js/codetabs.js create mode 100755 website/build/react-tidy/js/scrollSpy.js create mode 100644 website/build/react-tidy/sitemap.xml create mode 100755 website/core/Footer.js create mode 100644 website/i18n/en.json create mode 100644 website/package.json create mode 100644 website/pages/index.html create mode 100755 website/sidebars.json create mode 100644 website/siteConfig.js create mode 100755 website/static/css/custom.css create mode 100644 website/static/img/favicon.png create mode 100644 website/static/img/logo-light.svg create mode 100644 website/static/img/logo.svg create mode 100644 website/yarn.lock diff --git a/.dockerignore b/.dockerignore new file mode 100755 index 0000000..27d2dae --- /dev/null +++ b/.dockerignore @@ -0,0 +1,2 @@ +*/node_modules +*.log diff --git a/Dockerfile b/Dockerfile new file mode 100755 index 0000000..d369844 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,10 @@ +FROM node:8.11.4 + +WORKDIR /app/website + +EXPOSE 3000 35729 +COPY ./docs /app/docs +COPY ./website /app/website +RUN yarn install + +CMD ["yarn", "start"] diff --git a/README.md b/README.md index ccd537f..b0e6bd5 100644 --- a/README.md +++ b/README.md @@ -7,73 +7,6 @@ A collection of handy, flexible, tested and documented React custom hooks. **This library is still under construction. The API will change many time!** -## Installation -``` -npm i react-tidy -``` - -## Contents - ### Custom Hooks - - [useStorage](#usestorage) - ### Functions - - [createMemoryStorage](#creatememorystorage) - ### Interfaces - - [Storage](#storage) - -## Custom Hooks - -### useStorage -Get and set an item of a storage like `localStorage` and `sessionStorage`. - -```ts -function useStorage( - key: string, - defaultValue: any = null, - storage: Storage = defaultStorage -) -``` - -#### Parameters -- **key**: The key of the item on the storage. -- **defaultValue**(optional): The value to return and set into the storage when no item with given key is found. (Default: `null`). -- **storage**(optional): The storage object to use. You can pass `window.localStorage`, `window.sessionStorage`, or any object implementing the [`Storage`](#storage) interface. By default, a [memory storage](#creatememorystorage) will be used. - -#### Usage -```tsx -import {useStorage} from 'react-tidy' -``` -Then inside a React functional component: -```ts -const [token, setToken] = useStorage('auth-token', 'default', window.localStorage) -``` -`token` will contain the value stored in localStorage for the key `auth-token`. -if no item with that key is found, then `default` will be stored in localStorage. -```ts -setToken('foo') // stores the value on localStorage and sets token to 'foo' -setToken(null) // removes the item from localStorage and sets token to `null` -``` - -The value can be anything, not just a string. -```ts -const [state, setState] = useStorage('state', {isLoading: true}) -//... -setState({isLoading: false, data: {...}}) -``` -`JSON.stringify` and `JSON.parse` are used to serialize/unserialize the value. - -You can also give a function as value similar to `React.useState`. -```ts -const [lazyState, setLazyState] = useStorage('lazy-state', () => { - // do some computation ... - return data -}) -//... -setLazyState(currentState => { - // ... - return newState -}) -``` - ## Functions ### createMemoryStorage diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100755 index 0000000..6711192 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,18 @@ +version: "3" + +services: + docusaurus: + build: . + ports: + - 3000:3000 + - 35729:35729 + volumes: + - ./docs:/app/docs + - ./website/blog:/app/website/blog + - ./website/core:/app/website/core + - ./website/i18n:/app/website/i18n + - ./website/pages:/app/website/pages + - ./website/static:/app/website/static + - ./website/sidebars.json:/app/website/sidebars.json + - ./website/siteConfig.js:/app/website/siteConfig.js + working_dir: /app/website diff --git a/docs/install.md b/docs/install.md new file mode 100644 index 0000000..e0f29a8 --- /dev/null +++ b/docs/install.md @@ -0,0 +1,7 @@ +--- +title: Install +--- + +``` +npm i react-tidy +``` \ No newline at end of file diff --git a/docs/introduction.md b/docs/introduction.md new file mode 100755 index 0000000..149b660 --- /dev/null +++ b/docs/introduction.md @@ -0,0 +1,5 @@ +--- +title: Introduction +--- + +**React Tidy** is a library of React custom hooks. These hooks are built with flexibility and testing in mind. \ No newline at end of file diff --git a/docs/use-storage.md b/docs/use-storage.md new file mode 100644 index 0000000..eaa0451 --- /dev/null +++ b/docs/use-storage.md @@ -0,0 +1,55 @@ +--- +title: useStorage +--- + +### useStorage +Get and set an item of a storage like `localStorage` and `sessionStorage`. + +```ts +function useStorage( + key: string, + defaultValue: any = null, + storage: Storage = defaultStorage +) +``` + +#### Parameters +- **key**: The key of the item on the storage. +- **defaultValue**(optional): The value to return and set into the storage when no item with given key is found. (Default: `null`). +- **storage**(optional): The storage object to use. You can pass `window.localStorage`, `window.sessionStorage`, or any object implementing the [`Storage`](#storage) interface. By default, a [memory storage](#creatememorystorage) will be used. + +#### Usage +```tsx +import {useStorage} from 'react-tidy' +``` +Then inside a React functional component: +```ts +const [token, setToken] = useStorage('auth-token', 'default', window.localStorage) +``` +`token` will contain the value stored in localStorage for the key `auth-token`. +if no item with that key is found, then `default` will be stored in localStorage. +```ts +setToken('foo') // stores the value on localStorage and sets token to 'foo' +setToken(null) // removes the item from localStorage and sets token to `null` +``` + +The value can be anything, not just a string. +```ts +const [state, setState] = useStorage('state', {isLoading: true}) +//... +setState({isLoading: false, data: {...}}) +``` +`JSON.stringify` and `JSON.parse` are used to serialize/unserialize the value. + +You can also give a function as value similar to `React.useState`. +```ts +const [lazyState, setLazyState] = useStorage('lazy-state', () => { + // do some computation ... + return data +}) +//... +setLazyState(currentState => { + // ... + return newState +}) +``` \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 4788bc6..c4fa929 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-tidy", - "version": "0.1.0", + "version": "0.0.1-alpha.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/website/README.md b/website/README.md new file mode 100755 index 0000000..f3da77f --- /dev/null +++ b/website/README.md @@ -0,0 +1,193 @@ +This website was created with [Docusaurus](https://docusaurus.io/). + +# What's In This Document + +* [Get Started in 5 Minutes](#get-started-in-5-minutes) +* [Directory Structure](#directory-structure) +* [Editing Content](#editing-content) +* [Adding Content](#adding-content) +* [Full Documentation](#full-documentation) + +# Get Started in 5 Minutes + +1. Make sure all the dependencies for the website are installed: + +```sh +# Install dependencies +$ yarn +``` +2. Run your dev server: + +```sh +# Start the site +$ yarn start +``` + +## Directory Structure + +Your project file structure should look something like this + +``` +my-docusaurus/ + docs/ + doc-1.md + doc-2.md + doc-3.md + website/ + blog/ + 2016-3-11-oldest-post.md + 2017-10-24-newest-post.md + core/ + node_modules/ + pages/ + static/ + css/ + img/ + package.json + sidebar.json + siteConfig.js +``` + +# Editing Content + +## Editing an existing docs page + +Edit docs by navigating to `docs/` and editing the corresponding document: + +`docs/doc-to-be-edited.md` + +```markdown +--- +id: page-needs-edit +title: This Doc Needs To Be Edited +--- + +Edit me... +``` + +For more information about docs, click [here](https://docusaurus.io/docs/en/navigation) + +## Editing an existing blog post + +Edit blog posts by navigating to `website/blog` and editing the corresponding post: + +`website/blog/post-to-be-edited.md` +```markdown +--- +id: post-needs-edit +title: This Blog Post Needs To Be Edited +--- + +Edit me... +``` + +For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) + +# Adding Content + +## Adding a new docs page to an existing sidebar + +1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`: + +```md +--- +id: newly-created-doc +title: This Doc Needs To Be Edited +--- + +My new content here.. +``` + +1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`: + +```javascript +// Add newly-created-doc to the Getting Started category of docs +{ + "docs": { + "Getting Started": [ + "quick-start", + "newly-created-doc" // new doc here + ], + ... + }, + ... +} +``` + +For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation) + +## Adding a new blog post + +1. Make sure there is a header link to your blog in `website/siteConfig.js`: + +`website/siteConfig.js` +```javascript +headerLinks: [ + ... + { blog: true, label: 'Blog' }, + ... +] +``` + +2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`: + +`website/blog/2018-05-21-New-Blog-Post.md` + +```markdown +--- +author: Frank Li +authorURL: https://twitter.com/foobarbaz +authorFBID: 503283835 +title: New Blog Post +--- + +Lorem Ipsum... +``` + +For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) + +## Adding items to your site's top navigation bar + +1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`: + +`website/siteConfig.js` +```javascript +{ + headerLinks: [ + ... + /* you can add docs */ + { doc: 'my-examples', label: 'Examples' }, + /* you can add custom pages */ + { page: 'help', label: 'Help' }, + /* you can add external links */ + { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' }, + ... + ], + ... +} +``` + +For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation) + +## Adding custom pages + +1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`: +1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element: + +`website/siteConfig.js` +```javascript +{ + headerLinks: [ + ... + { page: 'my-new-custom-page', label: 'My New Custom Page' }, + ... + ], + ... +} +``` + +For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages). + +# Full Documentation + +Full documentation can be found on the [website](https://docusaurus.io/). diff --git a/website/build/react-tidy-gh-pages b/website/build/react-tidy-gh-pages new file mode 160000 index 0000000..4dcecbb --- /dev/null +++ b/website/build/react-tidy-gh-pages @@ -0,0 +1 @@ +Subproject commit 4dcecbbd4697a1eefef9f4209ba3450a32c0b2ec diff --git a/website/build/react-tidy/css/main.css b/website/build/react-tidy/css/main.css new file mode 100644 index 0000000..78ac61b --- /dev/null +++ b/website/build/react-tidy/css/main.css @@ -0,0 +1 @@ +a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}body{color:#24292e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-wrap:break-word}*{box-sizing:border-box}b,strong{font-weight:600}em,i{font-style:italic}[type=checkbox]{box-sizing:border-box;padding:0}a,a:hover{color:#0c6ad6;text-decoration:none}a:active,a:hover{outline-width:0}a:not([href]){color:inherit;text-decoration:none}p{margin-bottom:1em;margin-top:0}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:600;line-height:1.25;margin-bottom:16px;margin-top:1.5em}h1{font-size:32px}h2{font-size:24px}h3{font-size:20px}h4{font-size:16px}h5{font-size:14px}h6{font-size:13.6px}ol,ul{margin-bottom:1em;margin-top:0;padding-left:2em}ol ol,ul ol{list-style-type:lower-roman}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;margin-top:0}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-alpha}li{word-wrap:break-all}li>p{margin-top:1em}li+li{margin-top:.25em}img{border-style:none;box-sizing:content-box;max-width:100%}img[align=right]{padding-left:1.25em}img[align=left]{padding-right:1.25em}table{border-collapse:collapse;border-spacing:0;display:block;margin-bottom:16px;margin-top:0;overflow:auto;width:100%}table tr{background-color:transparent;border-top:1px solid #dfe2e5}table tr:nth-child(2n){background-color:#f6f8fa}table td,table th{border:1px solid #dfe2e5;padding:6px 13px}table th{background-color:inherit;font-weight:600}table td,table th{color:inherit}blockquote{color:#6a737d;font-size:16px;margin:0 0 16px;padding:0 1em}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}code{background-color:rgba(27,31,35,.05);border-radius:3px;color:inherit;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:85%;margin:0;padding:3.2px 6.4px}pre{margin-bottom:16px}pre code{background-color:transparent;border:0;display:inline;font-size:85%;line-height:inherit;margin:0;max-width:auto;overflow:visible;padding:0;white-space:pre;word-break:normal;word-wrap:normal}kbd{background-color:#fafbfc;border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px 0 #c6cbd1;color:#444d56;display:inline-block;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:68.75%;line-height:10px;padding:3px 5px;vertical-align:middle}hr{border:1px solid #dfe2e5;box-sizing:content-box;margin:1.5em 0;overflow:hidden;padding:0}hr:after,hr:before{content:"";display:table}hr:after{clear:both}body{background-color:#fff;min-height:100vh;text-rendering:optimizeLegibility}@media only screen and (min-width:736px){body{display:flex;flex-direction:column}}article:after,article:before{content:"";display:table}article:after{clear:both}article>:first-child{margin-top:0}article>:last-child{margin-bottom:0}article iframe,article p img{display:block;margin-left:auto;margin-right:auto;max-width:100%}.anchor{display:block;position:relative;top:-80px}.hash-link{line-height:1;margin-left:-20px;opacity:0;padding-right:4px;transition:opacity .3s}.hash-link:hover{opacity:1!important;transition:none}.hash-link .hash-link-icon{vertical-align:middle}.button{border:1px solid #0c6ad6;border-radius:3px;color:#0c6ad6;display:inline-block;font-size:14px;font-weight:400;line-height:1.2em;padding:10px;text-decoration:none!important;text-transform:uppercase;transition:background .3s,color .3s}.button:hover{background:#0c6ad6;color:#fff}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link{opacity:.5;transition:none}blockquote{background-color:rgba(255,229,100,.3);border-left:8px solid #ffe564;padding:15px 30px 15px 15px}.wrapper{margin:0 auto;max-width:1100px;padding:0 20px}.wrapper blockquote>p:first-child{padding-top:0}.center{display:block}.center,.homeContainer{text-align:center}.homeContainer .homeWrapper{padding:2em 10px}.homeContainer .homeWrapper .wrapper{margin:0 auto;max-width:900px;padding:0 20px}.homeContainer .homeWrapper .projectLogo img{height:100px;margin-bottom:0}.homeContainer .homeWrapper #project_title{font-size:300%;letter-spacing:-.08em;line-height:1em;margin-bottom:80px}.homeContainer .homeWrapper #project_tagline{font-size:200%;letter-spacing:-.04em;line-height:1em}.projectLogo{display:none;pointer-events:none}.projectLogo img{height:100px;margin-bottom:0}.projectIntro{margin:40px 0}.projectTitle{color:#0c6ad6;font-size:250%;line-height:1em}.projectTitle>small{display:block;font-weight:400;font-size:50%;line-height:1em;margin:.7em 0 1.3em}@media only screen and (min-width:480px){.projectTitle{font-size:300%;margin:.3em 0}.projectLogo img{height:200px;margin-bottom:10px}.homeContainer .homeWrapper{padding-left:10px;padding-right:10px}}@media only screen and (min-width:736px){.homeContainer .homeWrapper{position:relative}.homeContainer .homeWrapper #inner{max-width:600px;padding-right:40px}}@media only screen and (min-width:1200px){.homeContainer .homeWrapper #inner{max-width:750px}.homeContainer .homeWrapper .projectLogo{align-items:center;bottom:0;display:flex;justify-content:flex-end;left:0;padding:2em 100px 4em;position:absolute;right:0;top:0}.homeContainer .homeWrapper .projectLogo img{height:100%;max-height:250px}}@media only screen and (min-width:1500px){.homeContainer .homeWrapper #inner{max-width:1100px;padding-bottom:40px;padding-top:40px}.wrapper{max-width:1400px}}.mainContainer{flex:1 1 auto;max-width:100%;padding:40px 0}.mainContainer .wrapper{text-align:left}.mainContainer .wrapper .allShareBlock{padding:10px 0}.mainContainer .wrapper .allShareBlock .pluginBlock{margin:12px 0;padding:0}.mainContainer .wrapper .post{position:relative}.mainContainer .wrapper .post.basicPost{margin-top:30px}.mainContainer .wrapper .post .postHeader{margin-bottom:16px}.mainContainer .wrapper .post .postHeaderTitle{margin-top:0;padding:0}.mainContainer .wrapper .post .postSocialPlugins{padding-top:1em}.mainContainer .wrapper .post .docPagination{background:#0c6ad6;bottom:0;left:0;position:absolute;right:0}.mainContainer .wrapper .post .docPagination .pager{display:inline-block;width:50%}.mainContainer .wrapper .post .docPagination .pagingNext{float:right;text-align:right}.mainContainer .wrapper .post .docPagination a{border:none;color:#fff;display:block;padding:4px 12px}.mainContainer .wrapper .post .docPagination a:hover{background-color:#f9f9f9;color:#393939}.mainContainer .wrapper .post .docPagination a .pagerLabel{display:inline}.mainContainer .wrapper .post .docPagination a .pagerTitle{display:none}@media only screen and (min-width:480px){.mainContainer .wrapper .post .docPagination a .pagerLabel{display:none}.mainContainer .wrapper .post .docPagination a .pagerTitle{display:inline}}@media only screen and (min-width:1024px){.mainContainer .wrapper .post{display:block}.mainContainer .wrapper .posts .post{width:100%}}.fixedHeaderContainer{background:#0c6ad6;color:#fff;min-height:50px;padding:8px 0;position:fixed;width:100%;z-index:9999;transform:translateZ(0)}@media only screen and (min-width:1024px){.fixedHeaderContainer{flex-shrink:0}}.fixedHeaderContainer a{align-items:center;border:0;color:#fff;display:flex;flex-flow:row nowrap;height:34px;z-index:10000}.fixedHeaderContainer header{display:flex;flex-flow:row nowrap;position:relative;text-align:left}.fixedHeaderContainer header img{height:100%;margin-right:10px}.fixedHeaderContainer header .headerTitle{font-size:1.25em;margin:0}.fixedHeaderContainer header .headerTitleWithLogo{display:block;font-size:1.25em;line-height:18px;margin:0;position:relative;z-index:9999}.fixedHeaderContainer header h3{color:#fff;font-size:16px;margin:0 0 0 10px;text-decoration:underline}@media (max-width:480px){.headerTitle{font-size:17px}.headerTitleWithLogo{display:none!important}}.promoSection{display:flex;flex-flow:column wrap;font-size:125%;line-height:1.6em;position:relative;z-index:99}.promoSection .promoRow{padding:10px 0}.promoSection .promoRow .pluginWrapper{display:block}.promoSection .promoRow .pluginWrapper.ghStarWrapper,.promoSection .promoRow .pluginWrapper.ghWatchWrapper{height:28px}.promoSection .promoRow .pluginRowBlock{display:flex;flex-wrap:wrap;justify-content:center;margin:0 -2px}.promoSection .promoRow .pluginRowBlock .pluginWrapper{padding:0 2px}.promoSection .promoRow .pluginRowBlock iframe{margin-left:2px;margin-top:5px}input[type=search]{-moz-appearance:none;-webkit-appearance:none}.navSearchWrapper{align-items:center;align-self:center;display:flex;justify-content:center;padding-left:10px;position:absolute;right:10px;top:15px}.navSearchWrapper:before{border:3px solid #e5e5e5;border-radius:50%;content:" ";display:block;height:6px;left:15px;position:absolute;top:50%;transform:translateY(-58%);width:6px;z-index:1}.navSearchWrapper:after{background:#e5e5e5;content:" ";height:7px;left:24px;position:absolute;top:55%;transform:rotate(-45deg);width:3px;z-index:1}.navSearchWrapper .aa-dropdown-menu{background:#f9f9f9;border:3px solid rgba(57,57,57,.25);color:#393939;font-size:14px;left:auto!important;line-height:1.2em;right:0!important}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header{background:#0c6ad6;color:#fff;font-size:14px;font-weight:400}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight{background-color:#0c6ad6;color:#fff}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight,.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--title .algolia-docsearch-suggestion--highlight{color:#0c6ad6}.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion--subcategory-column,.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion__secondary{border-color:rgba(57,57,57,.3)}input#search_input_react{background-color:rgba(0,0,0,.2);border:none;border-radius:20px;color:#fff;font-size:14px;font-weight:300;line-height:20px;outline:none;padding-left:25px;position:relative;transition:width .5s ease;width:170px}.navSearchWrapper:before{left:24px}.navSearchWrapper:after{left:35px}input#search_input_react:active,input#search_input_react:focus{color:#fff;width:220px}.navigationSlider .slidingNav .navSearchWrapper .algolia-docsearch-footer a{height:auto}@media only screen and (max-width:735px){.navSearchWrapper{width:40%}}input::-webkit-input-placeholder{color:#e5e5e5}input::-moz-placeholder{color:#e5e5e5}input:-ms-input-placeholder{color:#e5e5e5}input::-ms-input-placeholder{color:#e5e5e5}input::placeholder{color:#e5e5e5}.hljs{padding:1.25rem 1.5rem}.gridBlock{padding:0}.gridBlock>*{box-sizing:border-box}.gridBlock .fourByGridBlock img,.gridBlock .threeByGridBlock img,.gridBlock .twoByGridBlock img{max-width:100%}.gridBlock .gridClear{clear:both}@media only screen and (max-width:735px){.gridBlock .fourByGridBlock{flex:1 0 26%}}@media only screen and (min-width:736px){.gridBlock{display:flex;flex-direction:row;flex-wrap:wrap}.gridBlock>*{margin:0 12px}.gridBlock>:first-child{margin-left:0}.gridBlock>:last-child{margin-right:0}.gridBlock .twoByGridBlock{flex:1 0 40%}.gridBlock .threeByGridBlock{flex:1 0 26%}.gridBlock .fourByGridBlock{flex:1 0 20%}h2+.gridBlock{padding-top:20px}}@media only screen and (min-width:1400px){.gridBlock{display:flex;flex-direction:row;flex-wrap:wrap}}.alignCenter{text-align:center}.alignRight{text-align:right}.imageAlignSide{display:flex;flex-flow:row wrap}.blockImage{max-width:730px}.imageAlignSide .blockImage{flex:0 1 500px;max-width:500px}@media only screen and (max-width:735px){.imageAlignSide .blockImage{display:none}}.imageAlignSide .blockContent{flex:1 1}.imageAlignBottom .blockImage{margin:0 auto 20px;max-width:730px}.imageAlignBottom.alignCenter .blockImage{margin-left:auto;margin-right:auto}.imageAlignTop .blockImage{margin-bottom:20px;max-width:80px}.imageAlignTop.alignCenter .blockImage{margin-left:auto;margin-right:auto}.imageAlignRight .blockImage{margin-left:40px}.imageAlignLeft .blockImage{margin-right:40px}.container .gridBlock .blockContent p{padding:0}.container .wrapper .alignCenter h2{text-align:center}.container .wrapper .imageAlignSide h2{text-align:left}.container .wrapper .imageAlignSide p{margin:0 0 40px;max-width:560px}.highlightBackground{background:rgba(153,66,79,.7);color:#fff}.highlightBackground a{font-weight:800}.container.highlightBackground .wrapper h1,.container.highlightBackground .wrapper h2,.container.highlightBackground .wrapper h3,.container.highlightBackground .wrapper h4,.container.highlightBackground .wrapper h5,.highlightBackground a{border-color:#fff;color:#fff}.lightBackground{background:#f7f7f7}.darkBackground{background:grey;color:#fff}.darkBackground a,.darkBackground code{color:#d6b3b8}.container.darkBackground .wrapper h1,.container.darkBackground .wrapper h2,.container.darkBackground .wrapper h3,.container.darkBackground .wrapper h4,.container.darkBackground .wrapper h5{border-color:#fff;color:#fff}.container.paddingAll{padding:40px}.container.paddingBottom{padding-bottom:80px}.container.paddingLeft{padding-left:40px}.container.paddingRight{padding-right:40px}.container.paddingTop{padding-top:80px}@media only screen and (max-width:735px){.container.paddingBottom{padding-bottom:40px}.container.paddingTop{padding-top:20px}}@media only screen and (max-width:1023px){.responsiveList .blockContent{position:relative}.responsiveList .blockContent>div{padding-left:20px}.responsiveList .blockContent:before{content:"\2022";position:absolute}}.navigationSlider .navSlideout{cursor:pointer;padding-top:4px;position:absolute;right:10px;top:0;transition:top .3s;z-index:101}.navigationSlider .slidingNav{bottom:auto;box-sizing:border-box;left:0;position:fixed;right:0;top:0}.navigationSlider .slidingNav.slidingNavActive{height:auto;padding-top:42px;width:300px}.navigationSlider .slidingNav ul{background:#08448a;box-sizing:border-box;color:#fff;display:flex;flex-wrap:nowrap;list-style:none;margin-top:50px;padding:0;width:100%}.navigationSlider .slidingNav.slidingNavActive ul{display:block}.navigationSlider .slidingNav ul li{flex:1 1 auto;margin:0;text-align:center;white-space:nowrap}.navigationSlider .slidingNav ul li a{align-items:center;box-sizing:border-box;color:#0c6ad6;color:inherit;display:flex;font-size:.9em;height:auto;height:50px;justify-content:center;margin:0;padding:10px;transition:background-color .3s}.navigationSlider .slidingNav ul li.siteNavGroupActive>a,.navigationSlider .slidingNav ul li.siteNavItemActive>a,.navigationSlider .slidingNav ul li>a:focus,.navigationSlider .slidingNav ul li>a:hover{background-color:#0c6ad6}.languages-icon{width:20px}#languages-dropdown{pointer-events:none;position:absolute;width:100%}#languages-dropdown.visible{display:flex}#languages-dropdown.hide{display:none}#languages-dropdown-items{background-color:#0c6ad6;display:flex;flex-direction:column;min-width:120px;pointer-events:all}#languages li{display:block}.navPusher{left:0;min-height:100%;padding-top:100px;position:relative;z-index:99}.singleRowMobileNav.navPusher{padding-top:50px}.navPusher:after{background:rgba(0,0,0,.4);content:"";height:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s,width .1s .5s,height .1s .5s;width:0}@media screen and (min-width:1024px){.navPusher{display:flex;flex-direction:column;min-height:calc(100vh - 50px);padding-top:50px}.navPusher,.navPusher>:first-child{flex-grow:1}}.sliderActive .navPusher:after{height:100%;opacity:1;transition:opacity .5s;width:100%;z-index:100}@media only screen and (max-width:1024px){.reactNavSearchWrapper input#search_input_react{background-color:rgba(242,196,178,.25);border:none;border-radius:20px;box-sizing:border-box;color:#393939;font-size:14px;line-height:20px;outline:none;padding-left:38px;position:relative;transition:background-color .2s cubic-bezier(.68,-.55,.265,1.55),width .2s cubic-bezier(.68,-.55,.265,1.55),color .2s ease;width:100%}.reactNavSearchWrapper input#search_input_react:active,.reactNavSearchWrapper input#search_input_react:focus{background-color:#0c6ad6;color:#fff}.reactNavSearchWrapper .algolia-docsearch-suggestion--subcategory-inline{display:none}.reactNavSearchWrapper>span{width:100%}.reactNavSearchWrapper .aa-dropdown-menu{font-size:12px;line-height:2em;padding:0;border-width:1px;min-width:500px}.reactNavSearchWrapper .algolia-docsearch-suggestion__secondary{border-top:none}.aa-suggestions{min-height:140px;max-height:60vh;-webkit-overflow-scrolling:touch;overflow-y:scroll}#languages-dropdown{left:0;top:50px}#languages-dropdown-items{background-color:#0c6ad6;display:flex;flex-direction:row}}@media only screen and (min-width:1024px){.navSearchWrapper{padding-left:10px;position:relative;right:auto;top:auto}.reactNavSearchWrapper input#search_input_react{height:100%;padding-top:8px;padding-bottom:8px;padding-left:38px}.navSearchWrapper .algolia-autocomplete{display:block}.navigationSlider{height:34px;margin-left:auto;position:relative}.navigationSlider .navSlideout{display:none}.navigationSlider nav.slidingNav{background:none;height:auto;position:relative;right:auto;top:auto;width:auto}.navigationSlider .slidingNav ul{background:none;display:flex;flex-flow:row nowrap;margin:0;padding:0;width:auto}.navigationSlider .slidingNav ul li a{border:0;color:hsla(0,0%,100%,.8);display:flex;font-size:16px;font-size:1em;font-weight:300;height:32px;line-height:1.2em;margin:0;padding:6px 10px}.navigationSlider .slidingNav ul li.siteNavGroupActive a,.navigationSlider .slidingNav ul li.siteNavItemActive a,.navigationSlider .slidingNav ul li a:hover{color:#fff}}@media only screen and (max-width:735px){.navigationSlider .slidingNav ul{overflow-x:auto}.navigationSlider .slidingNav ul::-webkit-scrollbar{display:none}.reactNavSearchWrapper .aa-dropdown-menu{min-width:400px}}@media only screen and (max-width:475px){.reactNavSearchWrapper .aa-dropdown-menu{min-width:300px}}.docMainWrapper .wrapper{padding-left:0;padding-right:0;padding-top:10px}@media only screen and (min-width:1024px){.docMainWrapper{width:100%}.docMainWrapper>*{margin:0 24px}.docMainWrapper>:first-child{margin-left:0}.docMainWrapper>:last-child{margin-right:0}.docMainWrapper .mainContainer{min-width:0}}.edit-page-link{float:right;font-size:10px;font-weight:400;margin-top:3px;text-decoration:none}@media only screen and (max-width:1023px){.edit-page-link{display:none}}.docLastUpdate{font-size:13px;font-style:italic;margin:20px 0;text-align:right}.docs-prevnext{margin:20px 0}.docs-prevnext:after{clear:both;content:" ";display:table}.docs-next{float:right}.docs-prev{float:left}@media only screen and (max-width:735px){.docs-next{clear:both;float:left}.docs-next,.docs-prev{margin:10px 0}.arrow-next{float:right;margin-left:10px}.arrow-prev{float:left;margin-right:10px}.function-name-prevnext{width:200px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.hide{display:none}.collapsible{cursor:pointer}.collapsible .arrow{float:right;margin-right:8px;margin-top:-4px;transform:rotate(90deg);transition:transform .2s linear}.collapsible .arrow.rotate{transform:rotate(180deg)}@media only screen and (max-width:1023px){.docsNavContainer{background:#fff;left:0;position:fixed;width:100%;z-index:100}}@media only screen and (min-width:1024px){.docsNavContainer{flex:0 0 240px;height:calc(100vh - 50px);position:-webkit-sticky;position:sticky;overflow-y:auto;top:50px}}.docsSliderActive.docsNavContainer{box-sizing:border-box;height:100%;-webkit-overflow-scrolling:touch;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding-bottom:50px}.docsNavContainer .toc .navBreadcrumb{background-color:#f1f1f1;box-sizing:border-box;display:flex;flex-flow:row nowrap;font-size:12px;height:48px;overflow:hidden;padding:8px 20px}.docsNavContainer .toc .navWrapper{padding:0}@media only screen and (min-width:1024px){.docsNavContainer .toc .navBreadcrumb{display:none}.navBreadcrumb h2{padding:0 10px}.separateOnPageNav .docsNavContainer{flex:0 0 240px}}.navBreadcrumb a,.navBreadcrumb span{border:0;color:#393939}@media only screen and (max-width:735px){.anchor{top:-144px}}@media only screen and (min-width:1024px){.toc{padding:40px 0}}.toc section{padding:0;position:relative}.toc section .navGroups{display:none;padding:48px 20px 60px}.toc .toggleNav{color:#393939;position:relative}.toc .toggleNav .navToggle{cursor:pointer;height:32px;margin-right:10px;position:relative;text-align:left;width:18px}.hamburger-menu{position:absolute;top:6px;width:100%}.line1,.line2,.line3{width:100%;height:3px;background-color:#393939;margin:3px 0;transition:.4s;border-radius:10px}.docsSliderActive .hamburger-menu{top:12px}.docsSliderActive .line1{position:absolute;top:50%;transform:rotate(-45deg)}.docsSliderActive .line2{display:none}.docsSliderActive .line3{position:absolute;top:50%;transform:rotate(45deg)}.toggleNav h2 i{padding:0 4px}.toc .toggleNav .navGroup{margin-bottom:16px}.toc .toggleNav .subNavGroup{margin-bottom:0}.toc .toggleNav .navGroup .navGroupCategoryTitle{color:#393939;font-size:18px;font-weight:500;line-height:1.2em;margin-bottom:8px;margin-top:0}.toc .toggleNav .navGroup .navGroupSubcategoryTitle{color:#393939;font-size:14px;font-weight:500;line-height:1.5;margin-bottom:0;margin-top:0;padding:4px 0}.toc .toggleNav .navGroup .navListItem{margin:0}.toc .toggleNav .navGroup h3 i:not(:empty){box-sizing:border-box;color:rgba(57,57,57,.5);display:inline-block;height:16px;margin-right:10px;text-align:center;transition:color .2s;width:16px}.toc .toggleNav ul{padding:0 8px}.docsSliderActive .toc .toggleNav ul{padding-left:0}.toc .toggleNav ul li{list-style-type:none;padding:0}.toc .toggleNav ul li a{border:none;color:#717171;display:block;font-size:14px;padding:4px 0;transition:color .3s}.toc .toggleNav ul li.navListItemActive a,.toc .toggleNav ul li a:focus,.toc .toggleNav ul li a:hover{color:#0c6ad6}.docsSliderActive .toc .navBreadcrumb,.tocActive .navBreadcrumb{border-bottom:1px solid #ccc;margin-bottom:20px;position:fixed;width:100%}.toc .toggleNav .navBreadcrumb h2{border:0;flex-grow:1;font-size:16px;font-weight:600;line-height:32px;margin:0;padding:0}.docsSliderActive .toc section .navGroups{display:block;padding-top:60px}.tocToggler{cursor:pointer;height:32px;line-height:32px;margin-right:-10px;padding:0 10px}.icon-toc{box-sizing:border-box;display:inline-block;line-height:normal;position:relative;top:-1px;vertical-align:middle}.icon-toc,.icon-toc:after,.icon-toc:before{background-color:currentColor;border:1px solid;border-radius:50%;box-sizing:border-box;height:4px;width:4px}.icon-toc:after,.icon-toc:before{content:"";position:absolute}.icon-toc:before{left:-1px;top:-7px}.icon-toc:after{left:-1px;top:5px}.tocActive .icon-toc{border-radius:0;height:16px;transform:rotate(45deg);width:3px}.tocActive .icon-toc:before{border-radius:0;height:3px;left:50%;top:50%;transform:translate(-50%,-50%);width:16px}.tocActive .icon-toc:after{content:""}@media only screen and (min-width:1024px){.docMainWrapper{display:flex;flex-flow:row nowrap}.docMainWrapper .wrapper{padding-top:0;padding-left:0;padding-right:0}}.onPageNav{display:none;margin-bottom:40px}.onPageNav::-webkit-scrollbar{width:7px}.onPageNav::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.onPageNav::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.onPageNav::-webkit-scrollbar-thumb:hover{background:#555}.onPageNav a{color:#717171}.onPageNav .toc-headings>li>a.active{font-weight:600;color:#0c6ad6}.onPageNav ul{list-style:none}.onPageNav ul li{font-size:12px;line-height:16px;padding-bottom:8px}.onPageNav ul ul{padding:8px 0 0 20px}.onPageNav ul ul li{padding-bottom:5px}@media only screen and (min-width:1024px){.toc section .navGroups{display:block;padding:8px 0 0}.navBreadcrumb h2{padding:0 10px}}@supports ((position: -webkit-sticky) or (position: sticky)){@media only screen and (max-width:1023px){.tocActive .onPageNav{background:#fff;bottom:0;display:block;left:0;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding:0 20px;position:fixed;right:0;top:148px;z-index:10;margin-bottom:0}.tocActive .singleRowMobileNav .onPageNav{top:98px}.tocActive .navBreadcrumb h2,.tocActive .navToggle{visibility:hidden}.tocActive .onPageNav>.toc-headings{padding:12px 0}}@media only screen and (min-width:1024px){.separateOnPageNav .headerWrapper.wrapper,.separateOnPageNav .wrapper{max-width:1400px}.separateOnPageNav .toc{width:auto}.separateOnPageNav.sideNavVisible .navPusher .mainContainer{flex:1 auto;max-width:100%;min-width:0}.onPageNav{align-self:flex-start;display:block;flex:0 0 240px;max-height:calc(100vh - 90px);overflow-y:auto;position:-webkit-sticky;position:sticky;top:90px}.onPageNav>.toc-headings{border-left:1px solid #e0e0e0;padding:10px 0 2px 15px}.tocToggler{display:none}}}.blog .wrapper{max-width:1100px}.blogContainer .posts .post{border-bottom:1px solid #e0e0e0;border-radius:3px;margin-bottom:20px;padding-bottom:20px}.blogContainer .postHeader{margin-bottom:10px}.blogContainer .postHeaderTitle{margin-top:0}.blogContainer .postHeader p.post-meta{margin-bottom:10px;padding:0}.blogContainer .postHeader .authorBlock{display:flex}.blogContainer .postHeader .post-authorName{color:rgba(57,57,57,.7);display:flex;flex-direction:column;font-size:14px;font-weight:400;justify-content:center;margin-right:10px;margin-top:0;margin-bottom:0;padding:0}.blogContainer .postHeader .authorPhoto{border-radius:50%;height:30px;overflow:hidden;width:30px}.blogContainer .postHeader .authorPhoto.authorPhotoBig{height:50px;width:50px}.blog-recent{margin:20px 0}.blog-recent>a{float:left}@media only screen and (max-width:735px){.blog-recent{height:40px}}.blogSocialSection{display:block;padding:36px 0}.blogSocialSection .blogSocialSectionItem{padding-bottom:5px}.fb-like{display:block;margin-bottom:20px;width:100%}.more-users{margin:0 auto;max-width:560px;text-align:center}.productShowcaseSection{padding:0 20px;text-align:center}.productShowcaseSection.paddingTop{padding-top:20px}.productShowcaseSection.paddingBottom{padding-bottom:80px}.productShowcaseSection h2{color:#0c6ad6;font-size:30px;line-height:1em;margin-top:20px;padding:10px 0;text-align:center}.productShowcaseSection p{margin:0 auto;max-width:560px;padding:.8em 0}.productShowcaseSection .logos{align-items:center;display:flex;flex-flow:row wrap;justify-content:center;padding:20px}.productShowcaseSection .logos img{max-height:110px;padding:20px;width:110px}@media only screen and (max-width:735px){.productShowcaseSection .logos img{max-height:64px;padding:20px;width:64px}}.showcaseSection{margin:0 auto;max-width:900px}.showcaseSection,.showcaseSection .prose h1{text-align:center}.showcaseSection .prose{margin:0 auto;max-width:560px;text-align:center}.showcaseSection .logos{align-items:center;display:flex;flex-flow:row wrap;justify-content:center}.showcaseSection .logos img{max-height:128px;padding:20px;width:128px}@media only screen and (max-width:735px){.showcaseSection .logos img{max-height:64px;padding:20px;width:64px}}.nav-footer{background:#20232a;border:none;color:#202020;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:24px;padding-bottom:2em;padding-top:2em;position:relative}@media only screen and (min-width:1024px){.nav-footer{flex-shrink:0}}.nav-footer .sitemap{display:flex;justify-content:space-between;margin:0 auto 3em;max-width:1080px}.nav-footer .sitemap div{flex:1}.nav-footer .sitemap .nav-home{display:table;height:72px;margin:-12px 20px 0 0;opacity:.4;padding:10px;transition:opacity .15s ease-in-out;width:72px}.nav-footer .sitemap .nav-home:focus,.nav-footer .sitemap .nav-home:hover{opacity:1}@media only screen and (max-width:735px){.nav-footer .sitemap{display:flex;flex-direction:column;margin:0 2em 3em;width:calc(100% - 4em)}.nav-footer .sitemap>div{margin-bottom:18px}}.nav-footer .sitemap a{color:hsla(0,0%,100%,.6);display:block;margin:2px -10px;padding:3px 10px}.nav-footer .sitemap a:focus,.nav-footer .sitemap a:hover,.nav-footer .sitemap h5>a:focus,.nav-footer .sitemap h5>a:hover{color:#fff;text-decoration:none}.nav-footer .sitemap h5,.nav-footer .sitemap h6{margin:0 0 10px}.nav-footer .sitemap h5,.nav-footer .sitemap h5>a,.nav-footer .sitemap h6,.nav-footer .sitemap h6>a{color:#fff}.nav-footer .sitemap h5>a,.nav-footer .sitemap h6>a{margin:0 -10px}.nav-footer .fbOpenSource{display:block;margin:1em auto;opacity:.4;transition:opacity .15s ease-in-out;width:170px}.nav-footer .fbOpenSource:hover{opacity:1}.nav-footer .copyright{color:hsla(0,0%,100%,.4);text-align:center}.nav-footer .social{padding:5px 0}.tabs{border-top:1px solid #cfcfcf}.nav-tabs{display:flex;border-bottom:4px solid #e0e0e0;width:100%;padding:0;overflow-x:auto;white-space:nowrap;max-height:100%}.nav-tabs::-webkit-scrollbar{display:none}.tabs .tab-pane:focus{outline:none}.tabs .nav-tabs>div{font-size:14px;line-height:1.14286;padding:12px 16px;text-decoration:none;display:block;cursor:pointer}.tabs .nav-tabs>div.active{border-bottom:4px solid #0c6ad6}.tab-pane{display:none}.tab-pane.active{display:block}.tab-pane>pre{white-space:pre-wrap}.tab-pane>pre>code{margin-top:0;border-radius:0;box-shadow:none} \ No newline at end of file diff --git a/website/build/react-tidy/css/prism.css b/website/build/react-tidy/css/prism.css new file mode 100644 index 0000000..d783edb --- /dev/null +++ b/website/build/react-tidy/css/prism.css @@ -0,0 +1,115 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * Modified prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*='language-'], +pre[class*='language-'] { + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: 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; +} + +/* Code blocks */ +pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; +} + +/* Inline code */ +:not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: 0.7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.number, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #dd4a68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/website/build/react-tidy/docs/install.html b/website/build/react-tidy/docs/install.html new file mode 100644 index 0000000..06261fa --- /dev/null +++ b/website/build/react-tidy/docs/install.html @@ -0,0 +1,59 @@ +Install · React Tidy

Install

npm i react-tidy
+
+
Last updated on 9/14/2019
← IntroductionuseStorage →
\ No newline at end of file diff --git a/website/build/react-tidy/docs/introduction.html b/website/build/react-tidy/docs/introduction.html new file mode 100644 index 0000000..9f659f2 --- /dev/null +++ b/website/build/react-tidy/docs/introduction.html @@ -0,0 +1,58 @@ +Introduction · React Tidy

Introduction

React Tidy is a library of React custom hooks. These hooks are built with flexibility and testing in mind.

+
Last updated on 9/14/2019
Install →
\ No newline at end of file diff --git a/website/build/react-tidy/docs/use-storage.html b/website/build/react-tidy/docs/use-storage.html new file mode 100644 index 0000000..7f5e4d7 --- /dev/null +++ b/website/build/react-tidy/docs/use-storage.html @@ -0,0 +1,99 @@ +useStorage · React Tidy

useStorage

useStorage

+

Get and set an item of a storage like localStorage and sessionStorage.

+
function useStorage(
+  key: string,
+  defaultValue: any = null,
+  storage: Storage = defaultStorage
+)
+
+

Parameters

+
    +
  • key: The key of the item on the storage.
    • +
  • defaultValue(optional): The value to return and set into the storage when no item with given key is found. (Default: null).
    • +
  • storage(optional): The storage object to use. You can pass window.localStorage, window.sessionStorage, or any object implementing the Storage interface. By default, a memory storage will be used.
    • +
+

Usage

+
import {useStorage} from 'react-tidy'
+
+

Then inside a React functional component:

+
const [token, setToken] = useStorage('auth-token', 'default', window.localStorage)
+
+

token will contain the value stored in localStorage for the key auth-token. +if no item with that key is found, then default will be stored in localStorage.

+
setToken('foo') // stores the value on localStorage and sets token to 'foo'
+setToken(null) // removes the item from localStorage and sets token to `null`
+
+

The value can be anything, not just a string.

+
const [state, setState] = useStorage('state', {isLoading: true})
+//...
+setState({isLoading: false, data: {...}})
+
+

JSON.stringify and JSON.parse are used to serialize/unserialize the value.

+

You can also give a function as value similar to React.useState.

+
const [lazyState, setLazyState] = useStorage('lazy-state', () => {
+  // do some computation ...
+  return data
+})
+//...
+setLazyState(currentState => {
+  // ...
+  return newState
+})
+
+
Last updated on 9/10/2019
← Install
\ No newline at end of file diff --git a/website/build/react-tidy/img/favicon.png b/website/build/react-tidy/img/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..961f13b424770f0359987a5f848ed93a4dec4944 GIT binary patch literal 272 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyegQrqu0UE{U0qF0O#=*oY&Zib zh$aq{g#d^+jEA6=q9u5MCQ6nB`2{nWm|9v{+dC8#78RG2RaMv2)-`YX^Jpu)+#=aIoQ7XFxkiV(&SMq_>+gTez5b9xFK z#n@C7v=~{Fcy2Hr>YBLL!9|A4rBLI+qgJMO7bh(7VVo}@@ + + diff --git a/website/build/react-tidy/img/logo-light.svg b/website/build/react-tidy/img/logo-light.svg new file mode 100644 index 0000000..9d179ba --- /dev/null +++ b/website/build/react-tidy/img/logo-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/build/react-tidy/img/logo.svg b/website/build/react-tidy/img/logo.svg new file mode 100644 index 0000000..aab9b55 --- /dev/null +++ b/website/build/react-tidy/img/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/build/react-tidy/index.html b/website/build/react-tidy/index.html new file mode 100644 index 0000000..fcdbab0 --- /dev/null +++ b/website/build/react-tidy/index.html @@ -0,0 +1,14 @@ + + + + + + + React Tidy + + + If you are not redirected automatically, please click here. + + \ No newline at end of file diff --git a/website/build/react-tidy/js/codetabs.js b/website/build/react-tidy/js/codetabs.js new file mode 100755 index 0000000..dd01ebf --- /dev/null +++ b/website/build/react-tidy/js/codetabs.js @@ -0,0 +1,31 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +// Turn off ESLint for this file because it's sent down to users as-is. +/* eslint-disable */ +window.addEventListener('load', function() { + // add event listener for all tab + document.querySelectorAll('.nav-link').forEach(function(el) { + el.addEventListener('click', function(e) { + const groupId = e.target.getAttribute('data-group'); + document + .querySelectorAll(`.nav-link[data-group=${groupId}]`) + .forEach(function(el) { + el.classList.remove('active'); + }); + document + .querySelectorAll(`.tab-pane[data-group=${groupId}]`) + .forEach(function(el) { + el.classList.remove('active'); + }); + e.target.classList.add('active'); + document + .querySelector(`#${e.target.getAttribute('data-tab')}`) + .classList.add('active'); + }); + }); +}); diff --git a/website/build/react-tidy/js/scrollSpy.js b/website/build/react-tidy/js/scrollSpy.js new file mode 100755 index 0000000..0632e6c --- /dev/null +++ b/website/build/react-tidy/js/scrollSpy.js @@ -0,0 +1,76 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/* eslint-disable prefer-arrow-callback */ +(function scrollSpy() { + const OFFSET = 10; + let timer; + let headingsCache; + const findHeadings = function findHeadings() { + return headingsCache || document.querySelectorAll('.toc-headings > li > a'); + }; + const onScroll = function onScroll() { + if (timer) { + // throttle + return; + } + timer = setTimeout(function() { + timer = null; + let activeNavFound = false; + const headings = findHeadings(); // toc nav anchors + /** + * On every call, try to find header right after <-- next header + * the one whose content is on the current screen <-- highlight this + */ + for (let i = 0; i < headings.length; i++) { + // headings[i] is current element + // if an element is already active, then current element is not active + // if no element is already active, then current element is active + let currNavActive = !activeNavFound; + /** + * Enter the following check up only when an active nav header is not yet found + * Then, check the bounding rectangle of the next header + * The headers that are scrolled passed will have negative bounding rect top + * So the first one with positive bounding rect top will be the nearest next header + */ + if (currNavActive && i < headings.length - 1) { + const heading = headings[i + 1]; + const next = decodeURIComponent(heading.href.split('#')[1]); + const nextHeader = document.getElementById(next); + + if (nextHeader) { + const top = nextHeader.getBoundingClientRect().top; + currNavActive = top > OFFSET; + } else { + console.error('Can not find header element', { + id: next, + heading, + }); + } + } + /** + * Stop searching once a first such header is found, + * this makes sure the highlighted header is the most current one + */ + if (currNavActive) { + activeNavFound = true; + headings[i].classList.add('active'); + } else { + headings[i].classList.remove('active'); + } + } + }, 100); + }; + + document.addEventListener('scroll', onScroll); + document.addEventListener('resize', onScroll); + document.addEventListener('DOMContentLoaded', function() { + // Cache the headings once the page has fully loaded. + headingsCache = findHeadings(); + onScroll(); + }); +})(); diff --git a/website/build/react-tidy/sitemap.xml b/website/build/react-tidy/sitemap.xml new file mode 100644 index 0000000..e70e7cd --- /dev/null +++ b/website/build/react-tidy/sitemap.xml @@ -0,0 +1 @@ +https://webneat.github.io/react-tidy/docs/install.htmlhourly1.0https://webneat.github.io/react-tidy/docs/introduction.htmlhourly1.0https://webneat.github.io/react-tidy/docs/use-storage.htmlhourly1.0 \ No newline at end of file diff --git a/website/core/Footer.js b/website/core/Footer.js new file mode 100755 index 0000000..51d1faf --- /dev/null +++ b/website/core/Footer.js @@ -0,0 +1,22 @@ +const React = require('react'); + +class Footer extends React.Component { + docUrl(doc, language) { + const baseUrl = this.props.config.baseUrl; + const docsUrl = this.props.config.docsUrl; + const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`; + const langPart = `${language ? `${language}/` : ''}`; + return `${baseUrl}${docsPart}${langPart}${doc}`; + } + + pageUrl(doc, language) { + const baseUrl = this.props.config.baseUrl; + return baseUrl + (language ? `${language}/` : '') + doc; + } + + render() { + return null; + } +} + +module.exports = Footer; diff --git a/website/i18n/en.json b/website/i18n/en.json new file mode 100644 index 0000000..a0a9223 --- /dev/null +++ b/website/i18n/en.json @@ -0,0 +1,29 @@ +{ + "_comment": "This file is auto-generated by write-translations.js", + "localized-strings": { + "next": "Next", + "previous": "Previous", + "tagline": "A collection of handy, flexible, tested and documented React custom hooks.", + "docs": { + "install": { + "title": "Install" + }, + "introduction": { + "title": "Introduction" + }, + "use-storage": { + "title": "useStorage" + } + }, + "links": {}, + "categories": { + "Getting Started": "Getting Started", + "Custom Hooks": "Custom Hooks" + } + }, + "pages-strings": { + "Help Translate|recruit community translators for your project": "Help Translate", + "Edit this Doc|recruitment message asking to edit the doc source": "Edit", + "Translate this Doc|recruitment message asking to translate the docs": "Translate" + } +} diff --git a/website/package.json b/website/package.json new file mode 100644 index 0000000..c83e7fc --- /dev/null +++ b/website/package.json @@ -0,0 +1,14 @@ +{ + "scripts": { + "examples": "docusaurus-examples", + "start": "docusaurus-start", + "build": "docusaurus-build", + "publish-gh-pages": "docusaurus-publish", + "write-translations": "docusaurus-write-translations", + "version": "docusaurus-version", + "rename-version": "docusaurus-rename-version" + }, + "devDependencies": { + "docusaurus": "^1.12.0" + } +} diff --git a/website/pages/index.html b/website/pages/index.html new file mode 100644 index 0000000..fcdbab0 --- /dev/null +++ b/website/pages/index.html @@ -0,0 +1,14 @@ + + + + + + + React Tidy + + + If you are not redirected automatically, please click here. + + \ No newline at end of file diff --git a/website/sidebars.json b/website/sidebars.json new file mode 100755 index 0000000..11d6cf8 --- /dev/null +++ b/website/sidebars.json @@ -0,0 +1,6 @@ +{ + "docs": { + "Getting Started": ["introduction", "install"], + "Custom Hooks": ["use-storage"] + } +} diff --git a/website/siteConfig.js b/website/siteConfig.js new file mode 100644 index 0000000..dbd7576 --- /dev/null +++ b/website/siteConfig.js @@ -0,0 +1,65 @@ +const siteConfig = { + title: 'React Tidy', + tagline: 'A collection of handy, flexible, tested and documented React custom hooks.', + url: 'https://webneat.github.io', + baseUrl: '/react-tidy/', + projectName: 'react-tidy', + organizationName: 'webneat', + headerLinks: [ + // {doc: 'doc1', label: 'Docs'}, + // {doc: 'doc4', label: 'API'}, + // {page: 'help', label: 'Help'} + ], + headerIcon: 'img/logo-light.svg', + footerIcon: 'img/logo-light.svg', + favicon: 'img/favicon.png', + colors: { + primaryColor: '#0c6ad6', + secondaryColor: '#08448a', + }, + + /* Custom fonts for website */ + /* + fonts: { + myFont: [ + "Times New Roman", + "Serif" + ], + myOtherFont: [ + "-apple-system", + "system-ui" + ] + }, + */ + copyright: `Copyright © ${new Date().getFullYear()} Amine Ben hammou`, + highlight: { + theme: 'default', // Highlight.js theme + }, + + // Add custom scripts here that would be placed in