From b68a63fed1ce820421b702cb4f6cd8a330146a46 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sun, 16 Sep 2018 16:15:06 +0800 Subject: [PATCH 1/9] Update primary color and implement logo to Home page --- website/siteConfig.js | 30 ++++++++++-------- website/static/img/favicon.ico | Bin 0 -> 17542 bytes .../static/img/logo/hybrid-white-large.svg | 1 + website/static/img/logo/pure-color-square.svg | 1 + 4 files changed, 18 insertions(+), 14 deletions(-) create mode 100644 website/static/img/favicon.ico create mode 100644 website/static/img/logo/hybrid-white-large.svg create mode 100644 website/static/img/logo/pure-color-square.svg diff --git a/website/siteConfig.js b/website/siteConfig.js index cdaf997..ad1d50a 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -4,23 +4,27 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +const ORGANIZATION_NAME = 'react-bootstrap-table'; +const PROJECT_NAME = 'react-bootstrap-table2'; +const PRIMARY_COLOR = '#007bff'; +const SECONDARY_COLOR = '#1769aa'; /* List of projects/orgs using your project for the users page */ const users = [ { caption: '', - // image: '/react-bootstrap-table2/img/docusaurus.svg', + image: '/react-bootstrap-table2/img/logo/pure-color-square.svg', infoLink: 'https://github.com/react-bootstrap-table/react-bootstrap-table2', pinned: true, }, ]; const siteConfig = { - title: 'react-bootstrap-table2' /* title for your website */, + title: PROJECT_NAME /* title for your website */, tagline: 'Next Generation of react-bootstrap-table', url: 'https://react-bootstrap-table.github.io' /* your website url */, baseUrl: '/react-bootstrap-table2/' /* base url for your project */, - projectName: 'react-bootstrap-table2', + projectName: PROJECT_NAME, headerLinks: [ {doc: 'about', label: 'Docs'}, {doc: 'table-props', label: 'API'}, @@ -29,21 +33,19 @@ const siteConfig = { ], users, /* path to images for header/footer */ - // headerIcon: 'img/docusaurus.svg', - // footerIcon: 'img/docusaurus.svg', - // favicon: 'img/favicon.png', + headerIcon: 'img/logo/hybrid-white-large.svg', + favicon: 'img/favicon.ico', + disableHeaderTitle: true, + /* colors for website */ colors: { - primaryColor: '#294E80', - secondaryColor: '#3CA7F2', + primaryColor: PRIMARY_COLOR, + secondaryColor: SECONDARY_COLOR, }, // This copyright info is used in /core/Footer.js and blog rss/atom feeds. - copyright: - 'Copyright © ' + - new Date().getFullYear() + - ' react-bootstrap-table2', - organizationName: 'react-bootstrap-table', // or set an env variable ORGANIZATION_NAME - projectName: 'react-bootstrap-table2', // or set an env variable PROJECT_NAME + copyright: `Copyright © ${new Date().getFullYear()} ${PROJECT_NAME}`, + organizationName: ORGANIZATION_NAME, + projectName: PROJECT_NAME, highlight: { // Highlight.js theme to use for syntax highlighting in code blocks theme: 'default', diff --git a/website/static/img/favicon.ico b/website/static/img/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..8fc5cecac4430bbf902619d075d39674a19b114e GIT binary patch literal 17542 zcmeI3Ux-yz6vnr9hD^i;5%FQrK};lk5DSSxoE{{?2N97RB*f|^d=ME1lMsyxk&qrl zqPa*#L`X#RASxmu8tOx-^bq1h$utfkB9nzoI^EOn+vlt^XYS0s-h1cVe{m0dtiAWy zd#!J+z0N-S?m6S!EEl-WPKWGvZwJo3;+$K&II16h#<}lk>+X)~C+N3!zH_Tr$Mxr& z`)!GHD;dKrG(_!)x?Cf<4hI%gYb+jr2l)|LRE?h7xsFwgJpo2<=Yp#BFg~TH22=K(|t^0e4%FpxMTHFl5r0F4Z5r!W0!!vRxc%|8-J?Lt)l%{sd08MJ)ZLO z;2SWCPi6UEF#ZVjkg*@bVV>D2C2c%$T%&%}*MW2BxLInP-HXS6f_wlz1xpya0$Eo4 zQ+m1?lLON8eWl~4(KBRi)kxyO3XuI3hRzB9fboNrmxAA&drbYYB=twV$j_Y{qn@W8 zQnqngXGDzU$FEn}Gi-j1tT)SeKIhhoDZ2ZyF^t?@3p*o&LC@{M;06f6Ft#$cgN*?0 zJHQPPf??XQ6J#1UxKFaf`agVoaAyAS>`%Gi9}ue@skps9rBj&=tWP^x9}i$>PT>&j z^hEIrW}?5J^&>?8s;T+|>DQd-5w7Y&Z&Cfkf9}uk%$|e&g;gnM5M%qXF@-;E0ob8; z1DIKSQu>(-uNNu3dVdXL=cQ`-Gd78jIOESv%?JALP~VOIDf3>5EyYLr(6tJkvnijA z^*=-&qdnP6RHE1VGQJ%LY=OJZnQ>(hr(JwvN_z}Jv(B&^l+PB9xs-NFJ zw-CLD!2_WAya2o%Z1kuN+g0l~r_r$peTUKgz;o{NcHZ^n8RVzwHz_;v2V2^k$e)n< zjQN{>lj!ySpj&n_*Pqyl{8?u8|Dz1qFeNxhc`3LI{siM74-Np`liUa10&m3S^~m|) z0vH7vlhUbuST}eX=yzlLYTXF%F4k}8jbL^oyol@v_mJ1YR`yhN<-wj%{*M6d6GQC( zLfcl#b>lHI*wMwl@hCPQ8V~lX#G}qUavfdRKZ@;yhvEV18xP}=jzU?OvyC3&`}nfW9gDhu_<2H-EL~K9sdxOO@&D)3ywp z0mfmRvd$&ffJ`sx1C!!!258sszEeQ<#YHk__p^}bOWXgD`lK_W`2Jet4?rAhk^eVi z-O@h-_JGMewz*AlpG@s5hUC{gbngW^Bd|HwIYh#PJ~gv%^N789*eT@ULP*-v;(%*)-_cINqKwn|AKkBR)KdHjoUiFsta0u{5?Zl7rcI5U`hU88yt z+yZ00VVHlG!Uy1wFue9x465pPO>Nw}N}sDsBdPjj+Aq>~6pX(>$EUzWK)vA7ImK$Q z6SU7M2txa6N1z>nBm(*^$8Y;X$Q4Or3l%*7Trk9$#2Dqz_>H{0h3MAh*n)G38Zj_|Y*Rp8I*G?^;e#w%mHeym&w8)6|a#u}|d{{FAv*xpmen`B5sb zn41>KtH93(zTC6CGRbp(rV+`+?>U`4RCJN|^ND%#oRdq+t+N#=$*41D5;{Bj0w31P zmr5@D*b8i(Y6yRE=6qFW|Ks>@4!NvcAK*Ta5^9RszAKB3LN4WzB<b^-pKO#z;3es6y^{0+1%H6uJ83 zM&F@Y3}+%0f8smw{z~m1;HP_Q@#!Se&x7W|z|C&Z`#TpY{VElDxvFmWaRcH%T5@ULCQvR+PlQeYGRd zjzE%f@$r(RI!LO6m$wc^a?Hzo zI3CH~Liw-npV&jK#^rnSasPOHZ=^5Z8|lxlkL=~wMfMYE?bgr6Esga&9oY|O#q#`q fZzmk>isZP9WN7kyTpx{PJTBC~mdW3U?-S&I+dEV< literal 0 HcmV?d00001 diff --git a/website/static/img/logo/hybrid-white-large.svg b/website/static/img/logo/hybrid-white-large.svg new file mode 100644 index 0000000..e63f010 --- /dev/null +++ b/website/static/img/logo/hybrid-white-large.svg @@ -0,0 +1 @@ +logo color \ No newline at end of file diff --git a/website/static/img/logo/pure-color-square.svg b/website/static/img/logo/pure-color-square.svg new file mode 100644 index 0000000..bc897b9 --- /dev/null +++ b/website/static/img/logo/pure-color-square.svg @@ -0,0 +1 @@ +logo square \ No newline at end of file From 8b3fc4a6620f4f775c84ef47f5562970fef57587 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sun, 16 Sep 2018 16:57:14 +0800 Subject: [PATCH 2/9] Modulize component for home page --- website/core/button.js | 19 ++++ website/core/homeSplash.js | 50 +++++++++ website/core/utils/index.js | 19 ++++ website/pages/en/index.js | 176 ++++-------------------------- website/static/css/custom.css | 6 +- website/static/img/icon/bulb.svg | 4 + website/static/img/icon/store.svg | 4 + website/static/img/icon/tool.svg | 4 + 8 files changed, 125 insertions(+), 157 deletions(-) create mode 100644 website/core/button.js create mode 100644 website/core/homeSplash.js create mode 100644 website/core/utils/index.js create mode 100644 website/static/img/icon/bulb.svg create mode 100644 website/static/img/icon/store.svg create mode 100644 website/static/img/icon/tool.svg diff --git a/website/core/button.js b/website/core/button.js new file mode 100644 index 0000000..597088d --- /dev/null +++ b/website/core/button.js @@ -0,0 +1,19 @@ +const React = require('react'); + +class Button extends React.Component { + render() { + return ( + + ); + } +} + +Button.defaultProps = { + target: '_self', +}; + +module.exports = Button; diff --git a/website/core/homeSplash.js b/website/core/homeSplash.js new file mode 100644 index 0000000..543547e --- /dev/null +++ b/website/core/homeSplash.js @@ -0,0 +1,50 @@ +const React = require('react'); +const Button = require('./button'); +const utils = require('./utils'); + +const siteConfig = require(process.cwd() + '/siteConfig.js'); + +const SplashContainer = props => ( +
+
+
{props.children}
+
+
+); + +const ProjectTitle = () => ( +

+ {siteConfig.title} + {siteConfig.tagline} +

+); + +const PromoSection = props => ( +
+
+
{props.children}
+
+
+); + +class HomeSplash extends React.Component { + render() { + let language = this.props.language || ''; + + return ( + + {/* */} +
+ + + + + + +
+ + ); + } +} + +module.exports = HomeSplash; diff --git a/website/core/utils/index.js b/website/core/utils/index.js new file mode 100644 index 0000000..a1b35f6 --- /dev/null +++ b/website/core/utils/index.js @@ -0,0 +1,19 @@ +const siteConfig = require(process.cwd() + '/siteConfig.js'); + +const imgUrl = (img) => { + return siteConfig.baseUrl + 'img/' + img; +} + +const docUrl = (doc, language) => { + return siteConfig.baseUrl + 'docs/' + (language ? language + '/' : '') + doc; +} + +const pageUrl = (page, language) => { + return siteConfig.baseUrl + (language ? language + '/' : '') + page; +} + +module.exports = { + imgUrl, + docUrl, + pageUrl +} diff --git a/website/pages/en/index.js b/website/pages/en/index.js index d17369b..a9046b5 100755 --- a/website/pages/en/index.js +++ b/website/pages/en/index.js @@ -7,116 +7,49 @@ const React = require('react'); +// Built-in library const CompLibrary = require('../../core/CompLibrary.js'); -const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ const Container = CompLibrary.Container; const GridBlock = CompLibrary.GridBlock; -const siteConfig = require(process.cwd() + '/siteConfig.js'); - -function imgUrl(img) { - return siteConfig.baseUrl + 'img/' + img; -} - -function docUrl(doc, language) { - return siteConfig.baseUrl + 'docs/' + (language ? language + '/' : '') + doc; -} - -function pageUrl(page, language) { - return siteConfig.baseUrl + (language ? language + '/' : '') + page; -} - -class Button extends React.Component { - render() { - return ( - - ); - } -} - -Button.defaultProps = { - target: '_self', -}; - -const SplashContainer = props => ( -
-
-
{props.children}
-
-
-); - -const Logo = props => ( -
- -
-); - -const ProjectTitle = props => ( -

- {siteConfig.title} - {siteConfig.tagline} -

-); - -const PromoSection = props => ( -
-
-
{props.children}
-
-
-); - -class HomeSplash extends React.Component { - render() { - let language = this.props.language || ''; - return ( - - {/* */} -
- - - - - - -
- - ); - } -} +// Customized component and utils +const HomeSplash = require(process.cwd() + '/core/homeSplash.js'); +const utils = require(process.cwd() + '/core/utils'); +const imgUrl = utils.imgUrl; const Block = props => ( - + background={props.background} + > + ); -const Features = props => ( - +const Features = () => ( + {[ { content: 'Sortable, Row Selection, Cell Editor, Row Expand, Column Filter Pagination etc.', - // image: imgUrl('docusaurus.svg'), + image: imgUrl('icon/bulb.svg'), imageAlign: 'top', title: 'Rich Functionality', }, { content: 'Configurable and customizable table', - // image: imgUrl('docusaurus.svg'), + image: imgUrl('icon/tool.svg'), imageAlign: 'top', title: 'Customization', }, { content: 'Satisfy for Redux/Mobx or any other state management tool.', - // image: imgUrl('docusaurus.svg'), + image: imgUrl('icon/store.svg'), imageAlign: 'top', title: 'Remote', }, @@ -124,20 +57,11 @@ const Features = props => ( ); -// const FeatureCallout = props => ( -//
-//

Feature Callout

-// These are features of this project -//
-// ); - -const LearnHow = props => ( +const LearnHow = () => ( {[ { - content: 'Intuitive to use.
Compatitable for Bootstrap 3 and 4.
Better than legacy react-bootstrap-table2!!
', + content: 'Intuitive to use.
Compatible for Bootstrap 3 and 4.
Better than legacy react-bootstrap-table2!!
', image: imgUrl('react-bootstrap-table2-sample.png'), imageAlign: 'right', title: 'react-bootstrap-table2', @@ -146,62 +70,6 @@ const LearnHow = props => ( ); -const TryOut = props => ( - - {[ - { - content: 'Talk about trying this out', - image: imgUrl('docusaurus.svg'), - imageAlign: 'left', - title: 'Try it Out', - }, - ]} - -); - -const Description = props => ( - - {[ - { - content: 'This is another description of how this project is useful', - image: imgUrl('docusaurus.svg'), - imageAlign: 'right', - title: 'Description', - }, - ]} - -); - -const Showcase = props => { - if ((siteConfig.users || []).length === 0) { - return null; - } - const showcase = siteConfig.users - .filter(user => { - return user.pinned; - }) - .map((user, i) => { - return ( - - - - ); - }); - - return ( -
-

{"Who's Using This?"}

-

This project is used by all these people

-
{showcase}
- -
- ); -}; - class Index extends React.Component { render() { let language = this.props.language || ''; @@ -211,11 +79,7 @@ class Index extends React.Component {
- {/* */} - {/* - - */}
); diff --git a/website/static/css/custom.css b/website/static/css/custom.css index 220c1dd..8f7e870 100644 --- a/website/static/css/custom.css +++ b/website/static/css/custom.css @@ -13,4 +13,8 @@ } @media only screen and (min-width: 1500px) { -} \ No newline at end of file +} + +.feature-block .blockImage img { + width: 48px; +} diff --git a/website/static/img/icon/bulb.svg b/website/static/img/icon/bulb.svg new file mode 100644 index 0000000..3861a54 --- /dev/null +++ b/website/static/img/icon/bulb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/website/static/img/icon/store.svg b/website/static/img/icon/store.svg new file mode 100644 index 0000000..cecd62e --- /dev/null +++ b/website/static/img/icon/store.svg @@ -0,0 +1,4 @@ + + + + diff --git a/website/static/img/icon/tool.svg b/website/static/img/icon/tool.svg new file mode 100644 index 0000000..1ee2297 --- /dev/null +++ b/website/static/img/icon/tool.svg @@ -0,0 +1,4 @@ + + + + From ac52d17a3bc2f55150fb5d1af42143b78f30a148 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sun, 16 Sep 2018 18:17:02 +0800 Subject: [PATCH 3/9] Add to hero in home page --- website/core/homeSplash.js | 8 +++++++- website/pages/en/index.js | 5 ++--- website/static/css/custom.css | 4 ++++ 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/website/core/homeSplash.js b/website/core/homeSplash.js index 543547e..f34f3a4 100644 --- a/website/core/homeSplash.js +++ b/website/core/homeSplash.js @@ -12,6 +12,12 @@ const SplashContainer = props => ( ); +const Logo = props => ( +
+ +
+); + const ProjectTitle = () => (

{siteConfig.title} @@ -33,7 +39,7 @@ class HomeSplash extends React.Component { return ( - {/* */} +
diff --git a/website/pages/en/index.js b/website/pages/en/index.js index a9046b5..0827159 100755 --- a/website/pages/en/index.js +++ b/website/pages/en/index.js @@ -21,7 +21,6 @@ const Block = props => ( ( ); const LearnHow = () => ( - + {[ { - content: 'Intuitive to use.
Compatible for Bootstrap 3 and 4.
Better than legacy react-bootstrap-table2!!
', + content: 'Intuitive to use.
Compatible for Bootstrap 3 and 4.
Better than legacy react-bootstrap-table!!
', image: imgUrl('react-bootstrap-table2-sample.png'), imageAlign: 'right', title: 'react-bootstrap-table2', diff --git a/website/static/css/custom.css b/website/static/css/custom.css index 8f7e870..3b38a1d 100644 --- a/website/static/css/custom.css +++ b/website/static/css/custom.css @@ -15,6 +15,10 @@ @media only screen and (min-width: 1500px) { } +.homeContainer .homeWrapper .projectLogo { + justify-content: flex-start; +} + .feature-block .blockImage img { width: 48px; } From cd5da99cb16105bb7388e341b9b289ee123bca7b Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sun, 16 Sep 2018 18:18:24 +0800 Subject: [PATCH 4/9] Darken background of