├── src
    ├── resources
    │   ├── css
    │   │   ├── styles.less
    │   │   └── custom
    │   │   │   └── carousel.less
    │   └── img
    │   │   ├── favicon.ico
    │   │   ├── icon-72x72.png
    │   │   ├── icon-96x96.png
    │   │   ├── icon-128x128.png
    │   │   ├── icon-144x144.png
    │   │   ├── icon-152x152.png
    │   │   ├── icon-192x192.png
    │   │   ├── icon-384x384.png
    │   │   ├── icon-512x512.png
    │   │   ├── Reactpwa-Pawjs-AntDesign.png
    │   │   └── logo.svg
    ├── app
    │   └── components
    │   │   ├── home
    │   │       ├── images
    │   │       │   ├── wildernest-3-600x400.jpg
    │   │       │   └── 600x400-1-50-485b40e293d63f83f7562d5159819329.jpg
    │   │       ├── home.less
    │   │       └── home.js
    │   │   ├── about
    │   │       ├── about.less
    │   │       └── about.js
    │   │   └── layout
    │   │       └── guest-layout.js
    ├── webpack.js
    ├── server.js
    ├── client.js
    └── routes.js
├── .eslintrc
├── pawconfig.json
├── prod.pawconfig.json
├── LICENSE.md
├── package.json
├── .gitignore
└── README.md


/src/resources/css/styles.less:
--------------------------------------------------------------------------------
1 | @import './custom/carousel';
2 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./node_modules/@pawjs/pawjs/.eslintrc"
3 | }
4 | 


--------------------------------------------------------------------------------
/src/resources/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Atyantik/example-pawjs-ant-design/HEAD/src/resources/img/favicon.ico


--------------------------------------------------------------------------------
/src/resources/img/icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Atyantik/example-pawjs-ant-design/HEAD/src/resources/img/icon-72x72.png


--------------------------------------------------------------------------------
/src/resources/img/icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Atyantik/example-pawjs-ant-design/HEAD/src/resources/img/icon-96x96.png


--------------------------------------------------------------------------------
/src/resources/img/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Atyantik/example-pawjs-ant-design/HEAD/src/resources/img/icon-128x128.png


--------------------------------------------------------------------------------
/src/resources/img/icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Atyantik/example-pawjs-ant-design/HEAD/src/resources/img/icon-144x144.png


--------------------------------------------------------------------------------
/src/resources/img/icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Atyantik/example-pawjs-ant-design/HEAD/src/resources/img/icon-152x152.png


--------------------------------------------------------------------------------
/src/resources/img/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Atyantik/example-pawjs-ant-design/HEAD/src/resources/img/icon-192x192.png


--------------------------------------------------------------------------------
/src/resources/img/icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Atyantik/example-pawjs-ant-design/HEAD/src/resources/img/icon-384x384.png


--------------------------------------------------------------------------------
/src/resources/img/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Atyantik/example-pawjs-ant-design/HEAD/src/resources/img/icon-512x512.png


--------------------------------------------------------------------------------
/src/resources/img/Reactpwa-Pawjs-AntDesign.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Atyantik/example-pawjs-ant-design/HEAD/src/resources/img/Reactpwa-Pawjs-AntDesign.png


--------------------------------------------------------------------------------
/src/app/components/home/images/wildernest-3-600x400.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Atyantik/example-pawjs-ant-design/HEAD/src/app/components/home/images/wildernest-3-600x400.jpg


--------------------------------------------------------------------------------
/pawconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "port": "3003",
3 |   "host": "0.0.0.0",
4 |   "appRootUrl": "/",
5 |   "serviceWorker": false,
6 |   "serverSideRender": true,
7 |   "singlePageApplication": false
8 | }
9 | 


--------------------------------------------------------------------------------
/src/app/components/home/images/600x400-1-50-485b40e293d63f83f7562d5159819329.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Atyantik/example-pawjs-ant-design/HEAD/src/app/components/home/images/600x400-1-50-485b40e293d63f83f7562d5159819329.jpg


--------------------------------------------------------------------------------
/prod.pawconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "port": "9003",
 3 |   "host": "0.0.0.0",
 4 |   "appRootUrl": "/examples/ant-design",
 5 |   "serviceWorker": true,
 6 |   "asyncCSS": false,
 7 |   "serverSideRender": true,
 8 |   "singlePageApplication": false
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/webpack.js:
--------------------------------------------------------------------------------
 1 | import LessPlugin from '@pawjs/less/webpack';
 2 | 
 3 | export default class ProjectWebpack {
 4 |   constructor({ addPlugin }) {
 5 |     const options = {
 6 |       javascriptEnabled: true,
 7 |     };
 8 |     addPlugin(new LessPlugin(options));
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/resources/css/custom/carousel.less:
--------------------------------------------------------------------------------
 1 | .custom-carousel {
 2 |   .slick-slide {
 3 |     text-align: center;
 4 |     height: calc(50vh - 64px) !important;
 5 |     background: #364d79;
 6 |     overflow: hidden;
 7 |     display: flex !important;
 8 |     justify-content: center;
 9 |     align-items: center;
10 |   }
11 | }
12 | 
13 |   .custom-carousel {
14 |     .slick-slide {
15 |       h1 {
16 |         color: #fff;
17 |       }
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import FavIcon from './resources/img/favicon.ico';
 3 | 
 4 | export default class Server {
 5 |   apply(serverHandler) {
 6 |     serverHandler.hooks.beforeHtmlRender.tap('AddGoogleAnalytics', (Application) => {
 7 |       Application.htmlProps.head.push(
 8 |         <link key="favicon" rel="shortcut icon" type="image/x-icon" href={FavIcon} />,
 9 |         <script key="addGoogleAnalytics" async src="https://www.google-analytics.com/analytics.js" />,
10 |       );
11 |       return Application;
12 |     });
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/components/about/about.less:
--------------------------------------------------------------------------------
 1 | .header-layout {
 2 |   display: flex;
 3 |   justify-content: space-between;
 4 |   align-items: center;
 5 | }
 6 | 
 7 | .about-section {
 8 |   padding-top: 5.5em;
 9 |   padding-bottom: 2em;
10 |   max-width: 1050px;
11 |   margin: 0 auto !important;
12 |   align-items: center;
13 |   h3 {
14 |     font-size: 30px;
15 |     font-weight: bold;
16 |   }
17 |   p {
18 |     font-size: 16px;
19 |     max-width: 700px;
20 |     margin: 0 auto;
21 |   }
22 | }
23 | .mission-section {
24 |   max-width: 1050px;
25 |   margin: 0 auto !important;
26 |   align-items: center;
27 |   img {
28 |     width: 100%;
29 |   }
30 | }
31 | .mission-section-text {
32 |   margin-top: 2em;
33 | }
34 | 
35 | .align-center {
36 |   text-align: center;
37 | }
38 | .m-0 {
39 |   margin: 0 !important;
40 | }
41 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Atyantik Technologies Private Limited
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example-pawjs-ant-design",
 3 |   "version": "1.0.0",
 4 |   "description": "Example on using Ant Design with PawJS",
 5 |   "scripts": {
 6 |     "start": "pawjs --env=development start",
 7 |     "build": "pawjs --env=production --config=prod.pawconfig.json build"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/Atyantik/example-pawjs-ant-design.git"
12 |   },
13 |   "author": {
14 |     "name": "Atyantik Technologies",
15 |     "email": "admin@atyantik.com",
16 |     "url": "https://www.atyantik.com/"
17 |   },
18 |   "engines": {
19 |     "node": ">=10.12.0"
20 |   },
21 |   "contributors": [
22 |     {
23 |       "name": "Tirth Bodawala",
24 |       "email": "tirthbodawala@atyantik.com",
25 |       "url": "https://www.atyantik.com/"
26 |     },
27 |     {
28 |       "name": "Yash Thakur",
29 |       "email": "thakur.yash514@gmail.com",
30 |       "url": "https://www.yashthakur.in/"
31 |     }
32 |   ],
33 |   "license": "MIT",
34 |   "bugs": {
35 |     "url": "https://github.com/Atyantik/example-pawjs-ant-design/issues"
36 |   },
37 |   "homepage": "https://github.com/Atyantik/example-pawjs-ant-design#readme",
38 |   "dependencies": {
39 |     "@pawjs/less": "^2.0.0",
40 |     "@pawjs/pawjs": "^2.2.6",
41 |     "antd": "^3.10.2"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/client.js:
--------------------------------------------------------------------------------
 1 | import 'antd/dist/antd.less';
 2 | import './resources/css/styles.less';
 3 | 
 4 | export default class Client {
 5 |   loadAds() {
 6 |     setTimeout(() => {
 7 |       // eslint-disable-next-line
 8 |       if (typeof _codefund !== 'undefined' && _codefund.serve) {
 9 |         // eslint-disable-next-line
10 |         _codefund.serve();
11 |       }
12 |       (window.adsbygoogle = window.adsbygoogle || []).push({});
13 |     }, 10);
14 |   }
15 | 
16 |   trackPageView() {
17 |     const { ga } = window;
18 |     if (typeof ga !== 'undefined' && ga) {
19 |       ga('send', {
20 |         hitType: 'pageview',
21 |         page: window.location.pathname,
22 |       });
23 |     }
24 |   }
25 | 
26 |   apply(clientHandler) {
27 |     clientHandler.hooks.beforeRender.tapPromise('InitAds', async () => {
28 |       this.loadAds();
29 |     });
30 |     clientHandler.hooks.renderComplete.tap('InitTracking', () => {
31 |       window.ga = window.ga || function () {
32 |         (window.ga.q = window.ga.q || []).push(arguments);
33 |       };
34 |       window.ga.l = +new Date;
35 |       window.ga('create', 'UA-108804791-1', 'auto');
36 |       window.ga('send', 'pageview', window.location.pathname);
37 |     });
38 |     clientHandler.hooks.locationChange.tapPromise('ReInitAds', async () => {
39 |       this.loadAds();
40 |       this.trackPageView();
41 |     });
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/app/components/home/home.less:
--------------------------------------------------------------------------------
 1 | .header-layout {
 2 |   display: flex;
 3 |   justify-content: space-between;
 4 |   align-items: center;
 5 | }
 6 | img {
 7 |   max-width: 100%;
 8 | }
 9 | .align-center {
10 |   text-align: center;
11 | }
12 | .m-0 {
13 |   margin: 0 !important;
14 | }
15 | 
16 | .about-section {
17 |   padding-top: 5.5em;
18 |   padding-bottom: 5.5em;
19 |   h3 {
20 |     font-size: 30px;
21 |     padding-bottom: 1em;
22 |     font-weight: bold;
23 |   }
24 |   p {
25 |     font-size: 16px;
26 |   }
27 | }
28 | .content-section-text {
29 |   padding: 0 2em;
30 |   display: flex;
31 |   flex-direction: column;
32 |   justify-content: center;
33 |   p{
34 |     font-size: 16px;
35 |   }
36 |   h3 {
37 |     font-size: 24px;
38 |   }
39 | }
40 | .content-section-img {
41 |   img {
42 |     width: 100%;
43 |   }
44 | }
45 | .single-service {
46 |   text-align: center;
47 |   i {
48 |     font-size: 60px;
49 |     padding: 0.5em;
50 |   }
51 | }
52 | @media (min-width: 768px) {
53 |   .content-section>div:nth-child(even) {
54 |     flex-direction: row-reverse;
55 |   }
56 | }
57 | 
58 | @media (max-width: 767px) {
59 |   .content-section-img {
60 |     img {
61 |       width: 100%;
62 |     }
63 |   }
64 |   .content-section-text {
65 |     padding-top: 1em;
66 |     padding-bottom: 1em;
67 |   }
68 |   .about-section {
69 |     h3 {
70 |       padding-bottom: 0.5em;
71 |     }
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | 
 4 | *.log
 5 | npm-debug.log*
 6 | yarn-debug.log*
 7 | yarn-error.log*
 8 | 
 9 | # Runtime data
10 | pids
11 | *.pid
12 | *.seed
13 | *.pid.lock
14 | 
15 | # Directory for instrumented libs generated by jscoverage/JSCover
16 | lib-cov
17 | 
18 | # Coverage directory used by tools like istanbul
19 | coverage
20 | 
21 | # nyc test coverage
22 | .nyc_output
23 | 
24 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
25 | .grunt
26 | 
27 | # Bower dependency directory (https://bower.io/)
28 | bower_components
29 | 
30 | # node-waf configuration
31 | .lock-wscript
32 | 
33 | # Compiled binary addons (http://nodejs.org/api/addons.html)
34 | build/Release
35 | 
36 | # Dependency directories
37 | node_modules/
38 | jspm_packages/
39 | 
40 | # Typescript v1 declaration files
41 | typings/
42 | 
43 | # Optional npm cache directory
44 | .npm
45 | 
46 | # Optional eslint cache
47 | .eslintcache
48 | 
49 | # Optional REPL history
50 | .node_repl_history
51 | 
52 | # Output of 'npm pack'
53 | *.tgz
54 | 
55 | # Yarn Integrity file
56 | .yarn-integrity
57 | 
58 | # dotenv environment variables file
59 | .env
60 | 
61 | # WebStorm configurations
62 | .idea
63 | 
64 | # Ignore the etc folders created by
65 | etc/
66 | 
67 | # Do not add dist to git
68 | dist
69 | 
70 | # ignore the config assets as its generated runtime and thus should notbe included in git
71 | src/config/assets.js
72 | 
73 | # Ignore sass cache
74 | .sass-cache
75 | 


--------------------------------------------------------------------------------
/src/app/components/layout/guest-layout.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | import {
 4 |   Affix, BackTop, Button, Drawer, Icon, Layout,
 5 | } from 'antd';
 6 | import styles from '../home/home.less';
 7 | 
 8 | const {
 9 |   Header, Footer,
10 | } = Layout;
11 | 
12 | export default class GuestLayout extends Component {
13 |   state = {
14 |     visible: false,
15 |   };
16 | 
17 |   showDrawer = () => {
18 |     this.setState({
19 |       visible: true,
20 |     });
21 |   };
22 | 
23 |   onClose = () => {
24 |     this.setState({
25 |       visible: false,
26 |     });
27 |   };
28 | 
29 |   render() {
30 |     const { children } = this.props;
31 |     const { visible } = this.state;
32 |     return (
33 |       <div>
34 |         <Layout>
35 |           <div>
36 |             <BackTop />
37 |           </div>
38 |           <Affix offsetTop={0}>
39 |             <Header className={styles['header-layout']}>
40 |               <Link to="/">
41 |                 <span style={{ color: '#fff' }}>
42 |                   <strong>AntDesign + ReactPWA</strong>
43 |                 </span>
44 |               </Link>
45 |               <Button type="primary" shape="circle" onClick={this.showDrawer}>
46 |                 <Icon type="bars" theme="outlined" />
47 |               </Button>
48 |               <Drawer
49 |                 title="Menu"
50 |                 placement="right"
51 |                 closable={false}
52 |                 onClose={this.onClose}
53 |                 visible={visible}
54 |               >
55 |                 <p><Link to="/">Home</Link></p>
56 |                 <p><Link to="/about">About</Link></p>
57 |               </Drawer>
58 |             </Header>
59 |           </Affix>
60 |           { children }
61 |           <Footer className={styles['align-center']}>
62 |             This is an example of implementation of Ant Design with ReactPWA.
63 |             Help us grow further visit&nbsp;
64 |             <a href="https://opencollective.com/react-pwa" target="_blank" rel="noreferrer nofollow noopener">OpenCollective</a>
65 |           </Footer>
66 |         </Layout>
67 |       </div>
68 |     );
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/src/resources/img/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
  1 | import ShareImg72 from './resources/img/icon-72x72.png';
  2 | import ShareImg96 from './resources/img/icon-96x96.png';
  3 | import ShareImg128 from './resources/img/icon-128x128.png';
  4 | import ShareImg144 from './resources/img/icon-144x144.png';
  5 | import ShareImg152 from './resources/img/icon-152x152.png';
  6 | import ShareImg192 from './resources/img/icon-192x192.png';
  7 | import ShareImg384 from './resources/img/icon-384x384.png';
  8 | import ShareImg512 from './resources/img/icon-512x512.png';
  9 | import ReactAnt from './resources/img/Reactpwa-Pawjs-AntDesign.png';
 10 | 
 11 | export default class Routes {
 12 |   // eslint-disable-next-line
 13 |   apply(routeHandler) {
 14 |     const routes = [
 15 |       {
 16 |         path: '/',
 17 |         exact: true,
 18 |         component: import('./app/components/home/home'),
 19 |       },
 20 |       {
 21 |         path: '/about',
 22 |         exact: true,
 23 |         component: import('./app/components/about/about'),
 24 |       },
 25 |     ];
 26 | 
 27 |     routeHandler.hooks.initRoutes.tapPromise('AppRoutes', async () => {
 28 |       routeHandler.addRoutes(routes);
 29 |       routeHandler.setPwaSchema({
 30 |         name: 'ReactPWA | PawJS - Ant Design',
 31 |         short_name: 'P-AntD',
 32 |         orientation: 'any',
 33 |         background_color: '#111',
 34 |         theme_color: '#111',
 35 |         display: 'standalone',
 36 |         description: 'Ant Design implementation with ReactPWA',
 37 |         icons: [
 38 |           {
 39 |             src: ShareImg72,
 40 |             sizes: '72x72',
 41 |           },
 42 |           {
 43 |             src: ShareImg96,
 44 |             sizes: '96x96',
 45 |           },
 46 |           {
 47 |             src: ShareImg128,
 48 |             sizes: '128x128',
 49 |           },
 50 |           {
 51 |             src: ShareImg144,
 52 |             sizes: '144x144',
 53 |           },
 54 |           {
 55 |             src: ShareImg152,
 56 |             sizes: '152x152',
 57 |           },
 58 |           {
 59 |             src: ShareImg192,
 60 |             sizes: '192x192',
 61 |           },
 62 |           {
 63 |             src: ShareImg384,
 64 |             sizes: '384x384',
 65 |           },
 66 |           {
 67 |             src: ShareImg512,
 68 |             sizes: '512x512',
 69 |           },
 70 |         ],
 71 |       });
 72 | 
 73 |       // eslint-disable-next-line
 74 |       routeHandler.getDefaultSeoSchema = () => ({
 75 |         title: 'ReactPWA | Ant Design | Example',
 76 |         name: 'ReactPWA | Ant Design | Example',
 77 |         description: 'Ant Design implementation with ReactPWA',
 78 |         type: 'website',
 79 |         url: 'https://www.reactpwa.com/examples/ant-design',
 80 |         site_name: 'ReactPWA',
 81 |         image: ReactAnt,
 82 |         meta: [
 83 |           {
 84 |             name: 'author',
 85 |             content: 'Yash Thakur',
 86 |           },
 87 |           {
 88 |             name: 'description',
 89 |             content: 'Ant Design implementation using ReactPWA',
 90 |           },
 91 |           {
 92 |             name: 'theme-color',
 93 |             content: '#111',
 94 |           },
 95 |           {
 96 |             name: 'apple-mobile-web-app-status-bar-style',
 97 |             content: '#111',
 98 |           },
 99 |           {
100 |             name: 'msapplication-TileColor',
101 |             content: '#111',
102 |           },
103 |           {
104 |             name: 'application-name',
105 |             content: 'ReactPWA | Ant Design',
106 |           },
107 |           {
108 |             name: 'generator',
109 |             content: 'Ant Design',
110 |           },
111 |           {
112 |             name: 'apple-mobile-web-app-title',
113 |             content: 'ReactPWA | Ant Design',
114 |           },
115 |         ],
116 |       });
117 |     });
118 |   }
119 | }
120 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![Join the chat at https://gitter.im/react-pwa](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-pwa/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
 2 | 
 3 | 
 4 | <p align="center" style="text-align:center">
 5 |   <img src="https://www.atyantik.com/wp-content/uploads/2018/10/PawJS-AntDesign.png" alt="Paw JS"/>
 6 | </p>
 7 | <h1 align="center" style="text-align:center">ReactPWA - PawJS & Ant Design</h1>
 8 | 
 9 | 
10 | Example repository for integrating Ant Design with ReactPWA project. This repo demonstrates the usage & integration of Ant Design in existing ReactPWA project.
11 | 
12 | 
13 | ### Getting Started
14 | 
15 | ##### 1. Clone the repo to your local PC and go to the installation
16 | ```bash
17 | git clone https://github.com/Atyantik/example-pawjs-ant-design.git reactpwa-ant && cd reactpwa-ant
18 | ```
19 |   
20 | ##### 2. Install the dependencies
21 | ```bash
22 | npm install
23 | ```
24 | 
25 | ##### 2. Start the demo project
26 | ```bash
27 | npm start
28 | ```
29 | 
30 | ### AntDesign
31 | Visit [ant.design](https://ant.design) for more details & documentation on And Design  
32 | 
33 | ### ReactPWA
34 | ReactPWA is a highly scalable, Progressive Web Application foundation, boilerplate, with the best Developer Experience built on top of PawJS
35 | Visit [ReactPWA](https://www.reactpwa.com) for more configuration & documentation.
36 | 
37 | ### Backers
38 | Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/react-pwa#backer)]
39 | <a href="https://opencollective.com/react-pwa#backers" target="_blank"><img src="https://opencollective.com/react-pwa/backers.svg?width=890"></a>
40 | 
41 | 
42 | ### Sponsors
43 | Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/react-pwa#sponsor)]
44 | 
45 | <a href="https://opencollective.com/react-pwa/sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-pwa/sponsor/0/avatar.svg"></a>
46 | <a href="https://opencollective.com/react-pwa/sponsor/1/website" target="_blank"><img src="https://opencollective.com/react-pwa/sponsor/1/avatar.svg"></a>
47 | <a href="https://opencollective.com/react-pwa/sponsor/2/website" target="_blank"><img src="https://opencollective.com/react-pwa/sponsor/2/avatar.svg"></a>
48 | <a href="https://opencollective.com/react-pwa/sponsor/3/website" target="_blank"><img src="https://opencollective.com/react-pwa/sponsor/3/avatar.svg"></a>
49 | <a href="https://opencollective.com/react-pwa/sponsor/4/website" target="_blank"><img src="https://opencollective.com/react-pwa/sponsor/4/avatar.svg"></a>
50 | <a href="https://opencollective.com/react-pwa/sponsor/5/website" target="_blank"><img src="https://opencollective.com/react-pwa/sponsor/5/avatar.svg"></a>
51 | <a href="https://opencollective.com/react-pwa/sponsor/6/website" target="_blank"><img src="https://opencollective.com/react-pwa/sponsor/6/avatar.svg"></a>
52 | <a href="https://opencollective.com/react-pwa/sponsor/7/website" target="_blank"><img src="https://opencollective.com/react-pwa/sponsor/7/avatar.svg"></a>
53 | <a href="https://opencollective.com/react-pwa/sponsor/8/website" target="_blank"><img src="https://opencollective.com/react-pwa/sponsor/8/avatar.svg"></a>
54 | <a href="https://opencollective.com/react-pwa/sponsor/9/website" target="_blank"><img src="https://opencollective.com/react-pwa/sponsor/9/avatar.svg"></a>
55 | 
56 | ### Supporters
57 | ##### Atyantik Technologies Private Limited
58 | Everyone at Atyantik Technologies is contributing their free time for contributing to the project and core discussions.  
59 | <a href="https://www.atyantik.com" target="_blank"><img width="150px" src="https://www.reactpwa.com/img/supporters/atyantik.svg"></a>
60 | 
61 | 
62 | ### License
63 | This project is licensed under the MIT license, Copyright (c) 2018 [Atyantik Technologies Private Limited](https://www.atyantik.com). For more information see [LICENSE.md](https://github.com/Atyantik/example-pawjs-ant-design/blob/master/LICENSE.md).  
64 | 


--------------------------------------------------------------------------------
/src/app/components/about/about.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import {
  3 |   Layout, Carousel, Row, Col,
  4 | } from 'antd';
  5 | import styles from './about.less';
  6 | import Image1 from '../home/images/wildernest-3-600x400.jpg';
  7 | import GuestLayout from '../layout/guest-layout';
  8 | 
  9 | const {
 10 |   Content,
 11 | } = Layout;
 12 | 
 13 | const About = () => (
 14 |   <GuestLayout>
 15 |     <Content>
 16 |       <div>
 17 |         <Carousel className="custom-carousel">
 18 |           <div>
 19 |             <div>
 20 |               <h1>About us</h1>
 21 |             </div>
 22 |           </div>
 23 |         </Carousel>
 24 |       </div>
 25 |       <div>
 26 |         <Row gutter={48} type="flex" className={`${styles['about-section']}`}>
 27 |           <Col md={{ span: 16 }} sm={{ span: 24 }}>
 28 |             <h3>Title</h3>
 29 |             <p>
 30 |               Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 31 |               Lorem Ipsum has been the industry&#39;s standard dummy text ever since&nbsp;
 32 |               the 1500s, when an unknown printer took a galley of type and scrambled it&nbsp;
 33 |               to make a type specimen book.
 34 |             </p>
 35 |           </Col>
 36 |           <Col md={{ span: 8 }} sm={{ span: 24 }}>
 37 |             <script src="https://codefund.io/scripts/fefc6de5-a0ce-46e8-a15d-f43733b5b454/embed.js" />
 38 |             <div id="codefund_ad" />
 39 |           </Col>
 40 |         </Row>
 41 |       </div>
 42 |       <div>
 43 |         <Row type="flex" gutter={48} className={styles['mission-section']}>
 44 |           <Col md={{ span: 12 }} sm={{ span: 24 }}>
 45 |             <img src={Image1} alt="placeholder-img" />
 46 |           </Col>
 47 |           <Col md={{ span: 12 }} sm={{ span: 24 }} className={styles['mission-section-text']}>
 48 |             <div>
 49 |               <h4>
 50 |                 Our Mission
 51 |               </h4>
 52 |               <p>
 53 |                 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 54 |                 Lorem Ipsum has been the industry&#39;s standard dummy text ever since&nbsp;
 55 |                 the 1500s, when an unknown printer took a galley of type and scrambled&nbsp;
 56 |                 it to make a type specimen book.
 57 |               </p>
 58 |             </div>
 59 |             <div>
 60 |               <h4>
 61 |                 Our Vision
 62 |               </h4>
 63 |               <p>
 64 |                 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 65 |                 Lorem Ipsum has been the industry&#39;s standard dummy text ever since&nbsp;
 66 |                 the 1500s, when an unknown printer took a galley of type and scrambled&nbsp;
 67 |                 it to make a type specimen book.
 68 |               </p>
 69 |             </div>
 70 |             <div>
 71 |               <h4>
 72 |                 Our Values
 73 |               </h4>
 74 |               <p>
 75 |                 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 76 |                 Lorem Ipsum has been the industry&#39;s standard dummy text ever since&nbsp;
 77 |                 the 1500s, when an unknown printer took a galley of type and scrambled&nbsp;
 78 |                 it to make a type specimen book.
 79 |               </p>
 80 |             </div>
 81 |           </Col>
 82 |         </Row>
 83 |       </div>
 84 |       <Row>
 85 |         <Col span={24} className={styles['align-center']}>
 86 |           <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" />
 87 |           <ins
 88 |             className="adsbygoogle"
 89 |             style={{ display: 'block' }}
 90 |             data-ad-client="ca-pub-7586505628408924"
 91 |             data-ad-slot="5652642939"
 92 |             data-ad-format="auto"
 93 |           />
 94 |         </Col>
 95 |       </Row>
 96 |     </Content>
 97 |   </GuestLayout>
 98 | );
 99 | 
100 | export default About;
101 | 


--------------------------------------------------------------------------------
/src/app/components/home/home.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import {
  3 |   Layout, Carousel, Button, Icon, Row, Col, Divider,
  4 | } from 'antd';
  5 | import styles from './home.less';
  6 | 
  7 | import Image1 from './images/600x400-1-50-485b40e293d63f83f7562d5159819329.jpg';
  8 | import Image2 from './images/wildernest-3-600x400.jpg';
  9 | import GuestLayout from '../layout/guest-layout';
 10 | 
 11 | const {
 12 |   Content,
 13 | } = Layout;
 14 | 
 15 | const Home = () => (
 16 |   <GuestLayout>
 17 |     <Content>
 18 |       <div>
 19 |         <Carousel autoplay className="custom-carousel">
 20 |           <div>
 21 |             <div>
 22 |               <h1>Ant Design reaches to ReactPWA. Checkout this cool demo</h1>
 23 |               <Row type="flex" gutter={48} justify="space-around">
 24 |                 <Col span={24}>
 25 |                   <Button type="primary" icon="github" href="https://github.com/Atyantik/example-pawjs-ant-design">
 26 |                     View source code
 27 |                   </Button>
 28 |                 </Col>
 29 |               </Row>
 30 |             </div>
 31 |           </div>
 32 |           <div>
 33 |             <h1>Do not limit your creativity with technical difficulties #ReactPWA</h1>
 34 |             <Row type="flex" gutter={48} justify="space-around">
 35 |               <Col span={24}>
 36 |                 <Button type="primary" icon="global" href="https://www.reactpwa.com">
 37 |                   Visit ReactPwa.com
 38 |                 </Button>
 39 |               </Col>
 40 |             </Row>
 41 |           </div>
 42 |         </Carousel>
 43 |       </div>
 44 |       <div>
 45 |         <Row gutter={48} justify="space-around" type="flex" className={`${styles['m-0']} ${styles['about-section']}`} align="middle">
 46 |           <Col md={{ span: 18 }} sm={{ span: 24 }} className={styles['align-center']}>
 47 |             <h3>Title</h3>
 48 |             <p>
 49 |               Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 50 |               Lorem Ipsum has been the industry&#39;s standard dummy text ever since&nbsp;
 51 |               the 1500s, when an unknown printer took a galley of type and scrambled it&nbsp;
 52 |               to make a type specimen book. It has survived not only five centuries,
 53 |               but also the leap into electronic typesetting, remaining essentially unchanged.
 54 |               It was popularised in the 1960s with the release of Letraset sheets&nbsp;
 55 |               containing Lorem Ipsum passages, and more recently with desktop publishing&nbsp;
 56 |               software like Aldus PageMaker including versions of Lorem Ipsum.
 57 |             </p>
 58 |           </Col>
 59 |         </Row>
 60 |       </div>
 61 |       <Divider />
 62 |       <div>
 63 |         <Row gutter={48} justify="space-around" type="flex" className={styles['m-0']} align="middle">
 64 |           <Col md={{ span: 6 }} sm={{ span: 24 }} className={styles['align-center']}>
 65 |             <div className={styles['single-service']}>
 66 |               <Icon type="check-circle" theme="twoTone" />
 67 |               <h3>
 68 |                 Success
 69 |               </h3>
 70 |               <p>
 71 |                 Description content will go here.
 72 |               </p>
 73 |             </div>
 74 |           </Col>
 75 |           <Col md={{ span: 6 }} sm={{ span: 24 }} className={styles['align-center']}>
 76 |             <div className={styles['single-service']}>
 77 |               <Icon type="setting" theme="twoTone" />
 78 |               <h3>
 79 |                 Customizable
 80 |               </h3>
 81 |               <p>
 82 |                 Description content will go here.
 83 |               </p>
 84 |             </div>
 85 |           </Col>
 86 |           <Col md={{ span: 6 }} sm={{ span: 24 }} className={styles['align-center']}>
 87 |             <div className={styles['single-service']}>
 88 |               <Icon type="dashboard" theme="twoTone" />
 89 |               <h3>
 90 |                 Performance
 91 |               </h3>
 92 |               <p>
 93 |                 Description content will go here.
 94 |               </p>
 95 |             </div>
 96 |           </Col>
 97 |           <Col md={{ span: 6 }} sm={{ span: 24 }} className={styles['align-center']}>
 98 |             <script src="https://codefund.io/scripts/fefc6de5-a0ce-46e8-a15d-f43733b5b454/embed.js" />
 99 |             <div id="codefund_ad" />
100 |           </Col>
101 |         </Row>
102 |       </div>
103 |       <Divider />
104 |       <div className={styles['content-section']}>
105 |         <Row type="flex" className={`${styles['m-0']}`}>
106 |           <Col md={{ span: 12 }} sm={{ span: 24 }} className={styles['content-section-img']}>
107 |             <img src={Image1} alt="placeholder" />
108 |           </Col>
109 |           <Col md={{ span: 12 }} sm={{ span: 24 }} className={styles['content-section-text']}>
110 |             <h3>
111 |               Title
112 |             </h3>
113 |             <p>
114 |               Lorem Ipsum is simply dummy text of the printing and typesetting industry.
115 |               Lorem Ipsum has been the industry&#39;s standard dummy text ever since&nbsp;
116 |               the 1500s, when an unknown printer took a galley of type and scrambled it&nbsp;
117 |               to make a type specimen book. It has survived not only five centuries,
118 |               but also the leap into electronic typesetting, remaining essentially unchanged.
119 |               It was popularised in the 1960s with the release of Letraset sheets&nbsp;
120 |               containing Lorem Ipsum passages, and more recently with desktop publishing&nbsp;
121 |               software like Aldus PageMaker including versions of Lorem Ipsum.
122 |             </p>
123 |           </Col>
124 |         </Row>
125 |         <Row type="flex" className={styles['m-0']}>
126 |           <Col md={{ span: 12 }} sm={{ span: 24 }} className={styles['content-section-img']}>
127 |             <img src={Image2} alt="placeholder" />
128 |           </Col>
129 |           <Col md={{ span: 12 }} sm={{ span: 24 }} className={styles['content-section-text']}>
130 |             <h3>
131 |               Title
132 |             </h3>
133 |             <p>
134 |               Lorem Ipsum is simply dummy text of the printing and typesetting industry.
135 |               Lorem Ipsum has been the industry&#39;s standard dummy text ever since&nbsp;
136 |               the 1500s, when an unknown printer took a galley of type and scrambled it&nbsp;
137 |               to make a type specimen book. It has survived not only five centuries,
138 |               but also the leap into electronic typesetting, remaining essentially unchanged.
139 |               It was popularised in the 1960s with the release of Letraset sheets&nbsp;
140 |               containing Lorem Ipsum passages, and more recently with desktop publishing&nbsp;
141 |               software like Aldus PageMaker including versions of Lorem Ipsum.
142 |             </p>
143 |           </Col>
144 |         </Row>
145 |       </div>
146 |       <br />
147 |       <Row>
148 |         <Col span={24} className={styles['align-center']}>
149 |           <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" />
150 |           <ins
151 |             className="adsbygoogle"
152 |             style={{ display: 'block' }}
153 |             data-ad-client="ca-pub-7586505628408924"
154 |             data-ad-slot="5652642939"
155 |             data-ad-format="auto"
156 |           />
157 |         </Col>
158 |       </Row>
159 |     </Content>
160 |   </GuestLayout>
161 | );
162 | 
163 | export default Home;
164 | 


--------------------------------------------------------------------------------