Merge pull request #1774 from wix/infra/DocSite_design

Docs site design

README.md

@@ -9,7 +9,6 @@ The package is both **Android** and **iOS** compatible.
 
 See our new [Docs site](https://wix.github.io/react-native-calendars/)
 
-
 ## Try it out
 
 You can run example module by performing these steps:

docsRNC/docs/AgendaList.md

@@ -1,10 +1,13 @@
-Agenda list component  
+Agenda list component for the `ExpandableCalendar` component.  
 [(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendar.tsx)
 :::info
 This component extends **[FlatList](https://reactnative.dev/docs/flatlist)** props.
 :::
+**NOTE: This component should be wrapped with `CalendarProvider` component.**
 
-<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}></div>
+<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/expandable-calendar.gif?raw=true'}/>
+
+</div>
 
 ## API
 

docsRNC/docs/ExpandableCalendar.md

@@ -3,8 +3,11 @@ Expandable calendar component
 :::info
 This component extends **[CalendarList](https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.tsx)** props.
 :::
+**NOTE: This component should be wrapped with `CalendarProvider` component.**
 
-<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}></div>
+<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/expandable-calendar.gif?raw=true'}/>
+
+</div>
 
 ## API
 

docsRNC/docs/Timeline.md

@@ -4,7 +4,9 @@ Timeline component
 This component extends **[ScrollView](https://reactnative.dev/docs/scrollview)** props.
 :::
 
-<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}></div>
+<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/timeline-calendar.gif?raw=true'}/>
+
+</div>
 
 ## API
 

docsRNC/docs/WeekCalendar.md

@@ -4,7 +4,9 @@ Week calendar component
 This component extends **[CalendarList](https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.tsx)** props.
 :::
 
-<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}></div>
+<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/week-calendar.gif?raw=true'}/>
+
+</div>
 
 ## API
 

docsRNC/docusaurus.config.js

@@ -12,7 +12,7 @@ const config = {
   baseUrl: '/react-native-calendars/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
-  favicon: 'img/fav-icon.png',
+  favicon: 'img/logo.png',
   organizationName: 'wix', // Usually your GitHub org/user name.
   projectName: 'react-native-calendars', // Usually your repo name.
   trailingSlash: false,
@@ -46,7 +46,7 @@ const config = {
         title: 'RNC',
         logo: {
           alt: 'RNC Logo',
-          src: 'img/RNC.png'
+          src: 'img/logo.png'
         },
         items: [
           {

docsRNC/src/components/HomepageFeatures.js

@@ -6,36 +6,26 @@ const FeatureList = [
   {
     title: 'Calendar',
     img: require('../../static/img/calendar.png').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and used to get your website up and running
-        quickly.
-      </>
-    )
+    description: <>Calendar component</>
   },
   {
     title: 'Calendar Markings',
     img: require('../../static/img/calendar-markings.png').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go ahead and move your docs into the{' '}
-        <code>docs</code> directory.
-      </>
-    )
+    description: <>Marked dates on Calendar's components</>
   },
   {
     title: 'Expandable Calendar',
     img: require('../../static/img/expandableCalendar.png').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can be extended while reusing the same
-        header and footer.
-      </>
-    )
+    description: <>Expandable calendar component</>
   }
+  // {
+  //   title: 'Timeline Calendar',
+  //   img: require('../../static/img/timeline-calendar.png').default,
+  //   description: (<>Timeline calendar component</>)
+  // }
 ];
 
-function Feature({img, title, description}) {
+function Feature({img, title /* , description */}) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center padding-horiz--md">

docsRNC/src/css/custom.css

@@ -6,13 +6,13 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #ffae2f;
-  --ifm-color-primary-dark: #ffa416;
-  --ifm-color-primary-darker: #fb9900;
-  --ifm-color-primary-darkest: #e28a00;
-  --ifm-color-primary-light: #ffb849;
-  --ifm-color-primary-lighter: #ffc262;
-  --ifm-color-primary-lightest: #ffcc7c;
+  --ifm-color-primary: #ffb968;
+  --ifm-color-primary-dark: #ff9416;
+  --ifm-color-primary-darker: #ff9416;
+  --ifm-color-primary-darkest: #ff9416;
+  --ifm-color-primary-light: #ffdaae;
+  --ifm-color-primary-lighter: #ffdaae;
+  --ifm-color-primary-lightest: #ffdaae;
   --ifm-code-font-size: 95%;
 }
 

docsRNC/src/pages/index.js

@@ -19,9 +19,8 @@ function HomepageHeader() {
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
   return (
-    <Layout title={`Hello from ${siteConfig.title}`} description="Description will go into a meta tag in <head />">
+    <Layout title={`Home`} description="Site main title <head />">
       <HomepageHeader />
       <main>
         <HomepageFeatures />

docsRNC/src/pages/index.module.css

@@ -4,10 +4,11 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 6rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
+  height: 180px;
 }
 
 @media screen and (max-width: 966px) {