diff --git a/docs/lib/PremiumThemes/index.js b/docs/lib/PremiumThemes/index.js index 9c0656f6c..6ca194a86 100644 --- a/docs/lib/PremiumThemes/index.js +++ b/docs/lib/PremiumThemes/index.js @@ -1,144 +1,91 @@ import React from 'react'; -import { Card, Button, CardBody, CardHeader, Container, Row, Col, Jumbotron } from 'reactstrap'; - -const creativeTimProducts = [ - { - productTitle: "Now UI Kit PRO with Reactstrap", - productTagline: "Premium Kit Template for Bootstrap 4 and Reactstrap", - productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/now-ui-kit-pro-react/opt_nukp_react_thumbnail.jpg", - productURL: "https://www.creative-tim.com/product/now-ui-kit-pro-react" - }, - { - productTitle: "Now UI Dashboard PRO with Reactstrap", - productTagline: "Premium Reactstrap (Bootstrap 4) Admin Template", - productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/now-ui-dashboard-pro-react/now-ui-dashboard-pro-react.jpg", - productURL: "https://www.creative-tim.com/product/now-ui-dashboard-pro-react" - }, - { - productTitle: "Argon Design System with Reactstrap", - productTagline: "Free Design System for Bootstrap 4 and Reactstrap", - productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-design-system-react/argon-design-system-react.jpg", - productURL: "https://www.creative-tim.com/product/argon-design-system-react" - }, - { - productTitle: "Argon Dashboard PRO with Reactstrap", - productTagline: "Premium Reactstrap (Bootstrap 4) Admin Template", - productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro-react/argon-dashboard-pro-react.jpg", - productURL: "https://www.creative-tim.com/product/argon-dashboard-pro-react" - }, - { - productTitle: "Paper Kit PRO with Reactstrap", - productTagline: "Premium Kit Template for Bootstrap 4 and Reactstrap", - productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/paper-kit-pro-react/opt_pkp_react_thumbnail.jpg", - productURL: "https://www.creative-tim.com/product/paper-kit-pro-react" - }, - { - productTitle: "Paper Dashboard PRO with Reactstrap", - productTagline: "Premium Reactstrap (Bootstrap 4) Admin Template", - productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/paper-dashboard-2-pro-react/opt_pdp_react.jpg", - productURL: "https://www.creative-tim.com/product/paper-dashboard-pro-react" - }, - { - productTitle: "BLK• Design System PRO with Reactstrap", - productTagline: "Premium Design System for Bootstrap 4 and Reactstrap", - productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/blk-design-system-pro-react/blk-design-system-pro-react.jpg", - productURL: "https://www.creative-tim.com/product/blk-design-system-pro-react" - }, - { - productTitle: "Black Dashboard PRO with Reactstrap", - productTagline: "Premium Reactstrap (Bootstrap 4) Admin Template", - productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/black-dashboard-pro-react/black-dashboard-pro-react.jpg", - productURL: "https://www.creative-tim.com/product/black-dashboard-pro-react" - } -]; +import { + Card, + Button, + CardBody, + CardHeader, + Container, + Row, + Col, + Jumbotron, +} from 'reactstrap'; +import premiumThemes from './premium'; export default () => { - return ( -
- -

- -

-

Reactstrap Themes & Templates

-

A collection of free and premium React templates and themes powered by Reactstrap

-
- -

- UiFort -

-

Check out some examples that our partners from UiFort created using the Reactstrap components library.

- - - - -
- - Bamburgh React Admin Dashboard with Reactstrap PRO - -
-

- Premium React Admin Template -

-
- - - - - -
- - - -
- More themes will be added soon ! -
-
- -
-
- -
-
- -

- Creative Tim -

-

Check out some examples that our partners from Creative Tim created using the Reactstrap components library.

- - { - creativeTimProducts.map((prop,key) => { - return ( - - - -
- - {prop.productTitle} - -
-

- {prop.productTagline} -

-
- - - - - -
- - ); - }) - } -
-
- -
-
-
- ); + return ( +
+ +

+ +

+

Reactstrap Themes & Templates

+

+ A collection of free and premium React templates and themes powered by + Reactstrap +

+
+ {premiumThemes.map(company => ( + +

{company.creator.name}

+

{company.creator.tagLine}

+ + {company.products.map(product => { + return ( + + + +

+ + {product.title} + +

+

{product.tagLine}

+
+ + + + + +
+ + ); + })} + {company.products.length % 2 !== 0 && ( + + +
More themes will be added soon !
+
+ + )} +
+
+ +
+
+ ))} +
+ ); }; diff --git a/docs/lib/PremiumThemes/premium.js b/docs/lib/PremiumThemes/premium.js new file mode 100644 index 000000000..9eed3e3f4 --- /dev/null +++ b/docs/lib/PremiumThemes/premium.js @@ -0,0 +1,87 @@ +export default [ + { + creator: { + name: 'UiFort', + tagLine: + 'Check out some examples that our partners from UiFort created using the Reactstrap components library.', + link: 'https://uifort.com', + }, + products: [ + { + title: 'Bamburgh React Admin Dashboard with Reactstrap PRO', + tagLine: 'Premium React Admin Template', + imgUrl: + '/assets/themes/bamburgh-react-admin-dashboard-reactstrap-pro.jpg', + link: + 'https://uifort.com/template/bamburgh-react-admin-dashboard-reactstrap-pro/?ref=reactstrap.github.io', + }, + ], + }, + { + creator: { + name: 'Creative Tim', + tagLine: + 'Check out some examples that our partners from Creative Tim created using the Reactstrap components library.', + link: 'https://www.creative-tim.com', + }, + products: [ + { + title: 'Now UI Kit PRO with Reactstrap', + tagLine: 'Premium Kit Template for Bootstrap 4 and Reactstrap', + imgUrl: + 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/now-ui-kit-pro-react/opt_nukp_react_thumbnail.jpg', + link: 'https://www.creative-tim.com/product/now-ui-kit-pro-react', + }, + { + title: 'Now UI Dashboard PRO with Reactstrap', + tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template', + imgUrl: + 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/now-ui-dashboard-pro-react/now-ui-dashboard-pro-react.jpg', + link: 'https://www.creative-tim.com/product/now-ui-dashboard-pro-react', + }, + { + title: 'Argon Design System with Reactstrap', + tagLine: 'Free Design System for Bootstrap 4 and Reactstrap', + imgUrl: + 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-design-system-react/argon-design-system-react.jpg', + link: 'https://www.creative-tim.com/product/argon-design-system-react', + }, + { + title: 'Argon Dashboard PRO with Reactstrap', + tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template', + imgUrl: + 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro-react/argon-dashboard-pro-react.jpg', + link: 'https://www.creative-tim.com/product/argon-dashboard-pro-react', + }, + { + title: 'Paper Kit PRO with Reactstrap', + tagLine: 'Premium Kit Template for Bootstrap 4 and Reactstrap', + imgUrl: + 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/paper-kit-pro-react/opt_pkp_react_thumbnail.jpg', + link: 'https://www.creative-tim.com/product/paper-kit-pro-react', + }, + { + title: 'Paper Dashboard PRO with Reactstrap', + tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template', + imgUrl: + 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/paper-dashboard-2-pro-react/opt_pdp_react.jpg', + link: 'https://www.creative-tim.com/product/paper-dashboard-pro-react', + }, + { + title: 'BLK• Design System PRO with Reactstrap', + tagLine: 'Premium Design System for Bootstrap 4 and Reactstrap', + imgUrl: + 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/blk-design-system-pro-react/blk-design-system-pro-react.jpg', + link: + 'https://www.creative-tim.com/product/blk-design-system-pro-react', + }, + { + title: 'Black Dashboard PRO with Reactstrap', + tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template', + imgUrl: + 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/black-dashboard-pro-react/black-dashboard-pro-react.jpg', + link: 'https://www.creative-tim.com/product/black-dashboard-pro-react', + }, + ], + }, +]; diff --git a/docs/static/docs.css b/docs/static/docs.css index 4f57e21ab..e7063e08e 100644 --- a/docs/static/docs.css +++ b/docs/static/docs.css @@ -246,6 +246,10 @@ pre, code { max-width: 620px; } } +.premium-section + .premium-section { + border-top: 1px solid lightgrey; + padding-top: 3em; +} /* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+bash+jsx&plugins=autolinker */ /** diff --git a/scripts/docs b/scripts/docs index 5c3b5d0ad..81c8ae9c5 100755 --- a/scripts/docs +++ b/scripts/docs @@ -49,5 +49,7 @@ git config user.email "reactstrap@github.io" git add --all git commit -m "docs(travis): publish documentation for $TRAVIS_TAG ($TRAVIS_COMMIT)" git push origin $BRANCH > /dev/null 2>&1 +git tag -a $VERSION -m "docs $TRAVIS_TAG" +git push --tags > /dev/null 2>&1 success "Successfully published documentation for $TRAVIS_TAG ($TRAVIS_COMMIT)!" diff --git a/webpack.docs.config.js b/webpack.docs.config.js index 341c75152..12cd7e81a 100644 --- a/webpack.docs.config.js +++ b/webpack.docs.config.js @@ -41,6 +41,7 @@ const paths = [ '/utilities/', '/utilities/colors/', '/utilities/clearfix/', + '/premium-themes/', '/404.html' ];