├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── main.js
├── package-lock.json
├── package.json
├── src
    ├── assets
    │   ├── css
    │   │   ├── App.scss
    │   │   ├── _globals.scss
    │   │   └── _variables.scss
    │   ├── icons
    │   │   ├── linux
    │   │   │   └── iconLinux.png
    │   │   ├── mac
    │   │   │   └── iconMac.icns
    │   │   └── win
    │   │   │   └── iconWin.ico
    │   └── images
    │   │   ├── house.png
    │   │   ├── logo2.png
    │   │   └── screenshot.PNG
    ├── components
    │   ├── About.js
    │   ├── App.js
    │   ├── Home.js
    │   ├── Nav.js
    │   └── sub-components
    │   │   ├── CDN
    │   │       └── CDN.js
    │   │   ├── Colors
    │   │       └── Colors.js
    │   │   ├── EmojiPicker
    │   │       ├── EmojiModal.js
    │   │       ├── EmojiPicker.js
    │   │       └── emojis.json
    │   │   ├── Epsum
    │   │       └── Epsum.js
    │   │   ├── Font
    │   │       └── Font.js
    │   │   ├── Icons
    │   │       └── Icons.js
    │   │   ├── ImageCompressor
    │   │       └── ImageCompressor.js
    │   │   └── URLShortener
    │   │       └── URLShortener.js
    └── index.js
├── webpack.build.config.js
└── webpack.dev.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | *npm-debug.log
3 | *.DS_Store
4 | dist/
5 | builds/
6 | .env
7 | release-builds/
8 | electron-packager/
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Idrees Dargahwala
 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.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![screenshot](src/assets/images/screenshot.PNG)
 2 | # Source me
 3 | > **Source Me** is a cross platform desktop application which has some essential tools while making a project.
 4 | 
 5 | <em>Version: 0.2.1</em>
 6 | 
 7 | ## Features
 8 | 
 9 | - <strong>Material Design Colors by [Google](https://material.io/guidelines/style/color.html)</strong>
10 | The application contains a full stack of material designed colors created by Google. These can be very useful when one needs these colors at one place. It uses <a href="https://github.com/wwayne/react-tooltip">`react-tooltip`</a> to show the hex codes.
11 | 
12 | - <strong>Content Delivery Networks Library by [CDN](https://cdnjs.com/)</strong>
13 | These are libraries provided by cdn in one place. You can import the links to your project.
14 | 
15 | - <strong>Material Designed Icons by [Google](https://material.io/icons/)</strong>
16 | These are material designed icons made by Google. It is similar to the colors component.
17 | 
18 | - <strong>Epsum Generator from [bacon ipsum](https://baconipsum.com/)</strong>
19 | A generator which generates standalone text which can be useful to your HTML mockups.
20 | 
21 | - <strong>URL Shortner</strong>
22 | A URL shortener which uses a free <a href="https://is.gd">is.gd</a> to shorten urls quickly.
23 | 
24 | - <strong>Emoji Picker</strong>
25 | It is a picker which has a curated list of Emojis. Click one of them &amp; you get the unicode!
26 | 
27 | - <strong>Image Compressor</strong>
28 | A tool which compresses your images quickly. It uses <a href="https://github.com/xkeshi/image-compressor">@xkeshi/image-compressor</a>.
29 | 
30 | ## Use
31 | <a href="https://github.com/theIYD/source-me/releases">Download the latest version of Source me from the releases page</a>
32 | 
33 | ## Build
34 | The app can be used locally by following commands:
35 | 
36 | ```bash
37 | $ git clone https://github.com/theIYD/source-me.git
38 | $ cd source-me
39 | $ npm install
40 | $ npm run dev
41 | ```
42 | 
43 | <strong>The application has been abandoned and further updates have been stopped.</strong>
44 | 
45 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Import parts of electron to use
 4 | const {app, BrowserWindow} = require('electron');
 5 | const path = require('path')
 6 | const url = require('url')
 7 | 
 8 | // Keep a global reference of the window object, if you don't, the window will
 9 | // be closed automatically when the JavaScript object is garbage collected.
10 | let mainWindow;
11 | 
12 | // Keep a reference for dev mode
13 | let dev = false;
14 | if ( process.defaultApp || /[\\/]electron-prebuilt[\\/]/.test(process.execPath) || /[\\/]electron[\\/]/.test(process.execPath) ) {
15 |   dev = true;
16 | }
17 | 
18 | function createWindow() {
19 |   // Create the browser window.
20 |   let config = {
21 |     title: 'SourceMe',
22 |     width: 1024,
23 |     height: 840,
24 |     backgroundColor: '#7E57C2',
25 |     autoHideMenuBar: true,
26 |     icon: path.join(__dirname, 'src/assets/icons/linux/iconLinux.png'),
27 |     resizable: process.platform === 'darwin',
28 |     maximizable: process.platform === 'darwin',
29 |     show: false,
30 |     titleBarStyle: 'hiddenInset'
31 |   }
32 |   mainWindow = new BrowserWindow(config);
33 | 
34 |   // and load the index.html of the app.
35 |   let indexPath;
36 |   if ( dev && process.argv.indexOf('--noDevServer') === -1 ) {
37 |     indexPath = url.format({
38 |       protocol: 'http:',
39 |       host: 'localhost:8080',
40 |       pathname: 'index.html',
41 |       slashes: true
42 |     });
43 |   } else {
44 |     indexPath = url.format({
45 |       protocol: 'file:',
46 |       pathname: path.join(__dirname, 'dist', 'index.html'),
47 |       slashes: true
48 |     });
49 |   }
50 | 
51 | 
52 | 
53 |   mainWindow.loadURL( indexPath );
54 | 
55 |   // Don't show until we are ready and loaded
56 |   
57 |   mainWindow.once('ready-to-show', () => {
58 |     
59 |     mainWindow.show();
60 |     // Open the DevTools automatically if developing
61 |     if (dev) {
62 |       mainWindow.webContents.openDevTools();
63 |     }
64 |   });
65 | 
66 |   // Emitted when the window is closed.
67 |   mainWindow.on('closed', function() {
68 |     // Dereference the window object, usually you would store windows
69 |     // in an array if your app supports multi windows, this is the time
70 |     // when you should delete the corresponding element.
71 |     mainWindow = null;
72 |   });
73 | }
74 | 
75 | // This method will be called when Electron has finished
76 | // initialization and is ready to create browser windows.
77 | // Some APIs can only be used after this event occurs.
78 | app.on('ready', createWindow);
79 | 
80 | // Quit when all windows are closed.
81 | app.on('window-all-closed', () => {
82 |   // On macOS it is common for applications and their menu bar
83 |   // to stay active until the user quits explicitly with Cmd + Q
84 |   if (process.platform !== 'darwin') {
85 |     app.quit();
86 |   }
87 | });
88 | 
89 | app.on('activate', () => {
90 |   // On macOS it's common to re-create a window in the app when the
91 |   // dock icon is clicked and there are no other windows open.
92 |   if (mainWindow === null) {
93 |     createWindow();
94 |   }
95 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "source-me",
 3 |   "version": "0.2.1",
 4 |   "description": "A tool which provides necessary tools needed for web development",
 5 |   "author": "Idrees Dargahwala",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/theIYD/source-me"
 9 |   },
10 |   "license": "MIT",
11 |   "main": "main.js",
12 |   "scripts": {
13 |     "prod": "webpack --config webpack.build.config.js && electron --noDevServer .",
14 |     "dev": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
15 |     "build": "webpack --config webpack.build.config.js",
16 |     "package": "webpack --config webpack.build.config.js",
17 |     "postpackage-win": "npm run build && electron-packager ./ --out=./builds --overwrite --platform=win32 --arch=ia32 --icon=src/assets/icons/win/iconWin.ico --prune=true && bestzip release-builds/source-me-win-x64.zip builds/source-me-win32-ia32",
18 |     "postpackage-linux": "npm run build && electron-packager ./ --overwrite --platform=linux --arch=x64 --icon=src/assets/icons/linux/iconLinux.png --prune=true --out=builds && bestzip release-builds/source-me-linux-x64.zip builds/source-me-linux-x64",
19 |     "postpackage-darwin": "npm run build && electron-packager ./ SourceMe --overwrite --ignore=electron-packager --platform=darwin --arch=x64 --icon=src/assets/icons/mac/iconMac.icns --prune=true --out=builds"
20 |   },
21 |   "devDependencies": {
22 |     "babel-core": "^6.26.3",
23 |     "babel-loader": "^7.1.2",
24 |     "babel-preset-react": "^6.24.1",
25 |     "babili-webpack-plugin": "^0.1.2",
26 |     "css-loader": "^0.28.1",
27 |     "electron": "^2.0.2",
28 |     "electron-packager": "^12.1.0",
29 |     "extract-text-webpack-plugin": "^3.0.1",
30 |     "file-loader": "^1.1.5",
31 |     "html-webpack-plugin": "^2.28.0",
32 |     "react": "^16.0.0",
33 |     "react-dom": "^16.0.0",
34 |     "style-loader": "^0.19.0",
35 |     "webpack": "^3.6.0",
36 |     "webpack-cli": "^3.0.7",
37 |     "webpack-dev-server": "^3.1.4"
38 |   },
39 |   "dependencies": {
40 |     "@xkeshi/image-compressor": "^0.5.2",
41 |     "axios": "^0.17.0",
42 |     "bestzip": "^1.1.4",
43 |     "dotenv": "^4.0.0",
44 |     "file-saver": "^1.3.3",
45 |     "node-sass": "^4.9.0",
46 |     "node-url-shortener": "^1.0.1",
47 |     "react-modal": "^3.1.0",
48 |     "react-router-dom": "^4.2.2",
49 |     "react-spinners": "^0.2.1",
50 |     "react-tooltip": "^3.4.0",
51 |     "sass-loader": "^6.0.6",
52 |     "webfontloader": "^1.6.28"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/assets/css/App.scss:
--------------------------------------------------------------------------------
  1 | @import 'variables';
  2 | @import 'globals';
  3 | 
  4 | .navbar {
  5 |   width: 350px;
  6 |   flex: 3;
  7 |   background: $body-background;
  8 |   padding: 1em 0 2.5em 0;
  9 |   //border-right: 2px solid $grey-light-accent-color; 
 10 |   height: 100%;
 11 |   overflow-x: hidden;
 12 |   overflow-y: auto;
 13 | 
 14 |   &::-webkit-scrollbar {
 15 |     width: 6px;
 16 |     background-color: $grey-dark-accent-color;
 17 |   }
 18 |   &::-webkit-scrollbar-thumb{
 19 |     background-color: $indigo-300;
 20 |     border-radius: 10px;
 21 |   }
 22 | 
 23 |   .m-icon {
 24 |     position: relative;
 25 |     top: 6px;
 26 |     right: 6px;
 27 |   }
 28 | 
 29 |   .about-navigate {
 30 |     /*position: relative;
 31 |     top: 4em;
 32 |     padding: 2em 0; 
 33 |     text-align: center;
 34 |     display: block;
 35 |     margin: 0 auto;*/
 36 |     //border-top: 1px solid $grey-light-accent-color;
 37 | 
 38 |     p {
 39 |       font-size: 13px;
 40 |       margin-top: 10px;
 41 |     }
 42 |     a{
 43 |       text-decoration: none;
 44 |       color: $grey-600;
 45 |     }
 46 |   }
 47 | }
 48 | 
 49 | .nav-category {
 50 |   margin: .2em 0;
 51 |   padding-left: 2rem;
 52 |   font-size: 11px;
 53 |   font-weight: normal;
 54 |   text-transform: uppercase;
 55 | 
 56 |   h3 {
 57 |     color: $white;
 58 |   }
 59 | }
 60 | 
 61 | .nav-item {
 62 |   padding: 0.25em 0 0.25em 0;
 63 | 
 64 |   h5 {
 65 |     padding: .3rem 0 .3rem .3rem;
 66 |     padding-left: calc(2rem + 16px + .5rem);
 67 |     width: 100%;
 68 |     line-height: 2;
 69 |     text-align: left;
 70 |     color: $white;
 71 |     font-weight: 500;
 72 | 
 73 |     &:hover {
 74 |       text-decoration: underline;
 75 |       font-weight: bold;
 76 |       color: $white;
 77 |       cursor: pointer;
 78 |     }
 79 |     
 80 |     a {
 81 |       display: block;
 82 |       text-decoration: none;
 83 |       color: inherit;
 84 |     }
 85 |   }
 86 | }
 87 | 
 88 | .container {
 89 |   flex: 5;
 90 |   position: relative;
 91 |   opacity: 1;
 92 |   min-height: 100%;
 93 | }
 94 | 
 95 | .about {
 96 |   text-align: center;
 97 |   img {
 98 |     margin-top: 4em;
 99 |     width: 200px;
100 |     height: 200px;
101 |   }
102 |   .about-sourceme {
103 |     margin-top: 20px;
104 |     p {
105 |         line-height: 1.2;
106 |         color: $grey-paragraph;
107 |         font-family: $font-stack-secondary;
108 |         font-size: 17px;
109 |         font-weight: 400;
110 |     }
111 |   }
112 | }
113 | 
114 | .wrapper {
115 |   padding: 2em 3em 1em 3em;
116 |   position: relative;
117 |   display: block;
118 |   top: 2em;
119 |   hr {
120 |     width: 25%;
121 |     border: 1px solid $grey-light-accent-color;
122 |     margin: 0.5em auto 0 auto;
123 |   }
124 |   h2 {
125 |     color: $black;
126 |   }
127 |   .dropdown {
128 |     margin-top: 1em;
129 |   }
130 | }
131 | .cdn {
132 |   text-align: center;
133 |   .color-cdn-link {
134 |     border-radius: 5px;
135 |     text-align: center;
136 |     margin: 0 auto;
137 |     .cdn-link {
138 |       margin-top: 2em;
139 |       color: $grey-dark-color;
140 |       text-align: center;
141 |       font-weight: 700;
142 |       padding: 0.25em;
143 |     }
144 |   }
145 | }
146 | .about-library {
147 |   margin: 2em 0;
148 |   color: $grey-paragraph;
149 |   opacity: 0.6;
150 |   text-align: center;
151 |   a{
152 |     text-decoration: underline inherit;
153 |     color: inherit;
154 |   }
155 | }
156 | 
157 | .wrap-colors {
158 |   width: 50%;
159 |   margin-left: auto;
160 |   margin-right: auto;
161 |   display: block; 
162 |   text-align: center;
163 |   margin-bottom: 20px;
164 |   margin-top: 2em;
165 | 
166 |   .color-div {
167 |     width: 80px;
168 |     height: 30px;
169 |     display: inline-flex;
170 |     align-items: center;
171 |     justify-content: center;
172 |     margin-left: auto;
173 |     margin-right: auto;
174 |     padding: 20px;
175 |     margin-right: 10px;
176 |     margin-bottom: 10px;
177 |     border-radius: 5px;
178 |   } 
179 | }
180 | 
181 | .wrap-icons, .wrap-ipsum, .wrap-emojis {
182 |   margin: 0 0 0 2em;
183 |   max-height: 450px;
184 |   overflow-y: auto;
185 | 
186 |   &::-webkit-scrollbar {
187 |     width: 3px;
188 |     background-color: $grey-dark-accent-color;
189 |   }
190 |   &::-webkit-scrollbar-thumb{
191 |     background-color: $grey-paragraph;
192 |     border-radius: 10px;
193 |   }
194 |   .icons {
195 |     margin-right: 1em;
196 |   }
197 | }
198 | 
199 | .popup {
200 |   position: fixed;
201 |   width: 100%;
202 |   height: 100%;
203 |   top: 0;
204 |   left: 0;
205 |   right: 0;
206 |   bottom: 0;
207 |   margin: auto;
208 |   background-color: rgba(0,0,0, 0.5);
209 | 
210 |   .popup_inner {
211 |     position: absolute;
212 |     left: 35%;
213 |     right: 35%;
214 |     top: 35%;
215 |     bottom: 35%;
216 |     margin: auto;
217 |     background: white;
218 |     border-radius: 10px;
219 |     box-shadow: 6px 6px 10px 1px rgba(0, 0, 0, 0.5); 
220 |   }
221 | }
222 | 
223 | .submit {
224 |   background: #7f8ff4;
225 |   color: $white;
226 |   border-radius: 2px;
227 |   padding: 12px 36px;
228 |   margin-top: 20px;
229 |   outline: none;
230 |   border: 0;
231 |   cursor: pointer;
232 |   transition: background-color ease-in-out 200ms;
233 |   -webkit-box-shadow: 5px 4px 8px -2px rgba(0,0,0,0.54);
234 |   -moz-box-shadow: 5px 4px 8px -2px rgba(0,0,0,0.54);
235 |   box-shadow: 5px 4px 8px -2px rgba(0,0,0,0.54);
236 | 
237 |   &:hover {
238 |     background-color: $indigo-800 !important; 
239 |   }
240 | }
241 | 
242 | .containFile {
243 |   overflow: hidden;
244 |   position: relative;
245 |   padding: 0.5em 1em;
246 |   background-color: #7f8ff4;
247 |   border-radius: 5px;
248 |   color: $white;
249 |   font-size: 14px;
250 |   transition: background-color ease-in-out 200ms;
251 |   -webkit-box-shadow: 5px 4px 8px -2px rgba(0,0,0,0.54);
252 |   -moz-box-shadow: 5px 4px 8px -2px rgba(0,0,0,0.54);
253 |   box-shadow: 5px 4px 8px -2px rgba(0,0,0,0.54);
254 | 
255 |   &:hover {
256 |     background-color: $indigo-800 !important; 
257 |   }
258 | }
259 | 
260 | .containFile [type=file] {
261 |   cursor: pointer;
262 |   display: block;
263 |   filter: alpha(opacity=0);
264 |   min-height: 100%;
265 |   min-width: 100%;
266 |   opacity: 0;
267 |   position: absolute;
268 |   right: 0;
269 |   text-align: right;
270 |   top: 0;
271 | }
272 | 


--------------------------------------------------------------------------------
/src/assets/css/_globals.scss:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 |     font-family: $font-stack-primary;
 6 | }
 7 |   
 8 | html {
 9 |     height: 100%;
10 |     overflow: hidden;
11 |     background-color: $white;
12 |     background-image: $background;
13 | }
14 |   
15 | body {
16 |     height: 100%;
17 |     display: flex;
18 |     min-height: 100%;
19 | }
20 |   
21 | #root {
22 | width: 100%;
23 | height: 100%;
24 | }
25 | 
26 | #app {
27 | height: 100%;
28 | }
29 | 
30 | pre {
31 |     font-family: "Courier 10 Pitch", Courier, monospace;
32 |     font-size: 95%;
33 |     line-height: 140%;
34 |     white-space: pre;
35 |     white-space: pre-wrap;
36 |     white-space: -moz-pre-wrap;
37 |     white-space: -o-pre-wrap;
38 | }       
39 | 
40 | code {
41 |     font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
42 |     font-size: 95%;
43 |     line-height: 140%;
44 |     white-space: pre;
45 |     white-space: pre-wrap;
46 |     white-space: -moz-pre-wrap;
47 |     white-space: -o-pre-wrap;
48 | }


--------------------------------------------------------------------------------
/src/assets/css/_variables.scss:
--------------------------------------------------------------------------------
 1 | //Font stacks
 2 | $font-stack-primary: 'Titillium Web', Helvetica, sans-serif;
 3 | $font-stack-secondary: 'Roboto', Helvetica, sans-serif;
 4 | 
 5 | //Colors 
 6 | $white: #FFFFFF;
 7 | $black: #000000;
 8 | $body-background: #312450;
 9 | $grey-dark-accent-color: hsl(0,0%,96%);
10 | $grey-light-accent-color: hsl(0,0%,88%);
11 | $grey-dark-color: hsl(0,0%,44%);
12 | $indigo-300: #7986CB;
13 | $indigo-800: #283593;
14 | $grey-600: #757575;
15 | $grey-paragraph: #494C4E;
16 | 
17 | //SVG
18 | $background: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%23673ab7' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E");
19 | 
20 | 
21 | 


--------------------------------------------------------------------------------
/src/assets/icons/linux/iconLinux.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theIYD/source-me/c13cbcfff6408e2a70b9e624759df86eb07195d0/src/assets/icons/linux/iconLinux.png


--------------------------------------------------------------------------------
/src/assets/icons/mac/iconMac.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theIYD/source-me/c13cbcfff6408e2a70b9e624759df86eb07195d0/src/assets/icons/mac/iconMac.icns


--------------------------------------------------------------------------------
/src/assets/icons/win/iconWin.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theIYD/source-me/c13cbcfff6408e2a70b9e624759df86eb07195d0/src/assets/icons/win/iconWin.ico


--------------------------------------------------------------------------------
/src/assets/images/house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theIYD/source-me/c13cbcfff6408e2a70b9e624759df86eb07195d0/src/assets/images/house.png


--------------------------------------------------------------------------------
/src/assets/images/logo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theIYD/source-me/c13cbcfff6408e2a70b9e624759df86eb07195d0/src/assets/images/logo2.png


--------------------------------------------------------------------------------
/src/assets/images/screenshot.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theIYD/source-me/c13cbcfff6408e2a70b9e624759df86eb07195d0/src/assets/images/screenshot.PNG


--------------------------------------------------------------------------------
/src/components/About.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import logo from '../assets/images/logo2.png';
 3 | 
 4 | class About extends React.Component {
 5 | 
 6 |     render() {
 7 |       return (
 8 |          <div className="about" style={{
 9 |            position: 'absolute',
10 |            top: '0',
11 |            left: '0',
12 |            right: '0',
13 |            bottom: '0',
14 |            overflowX: 'hidden',
15 |            overflowY: 'auto',
16 |            padding: '0 6em'
17 |          }}>
18 |           <img src={logo} className="logo" />
19 |           <h1>Source Me</h1>
20 |           <hr style={{
21 |             border: '1px solid #E0E0E0',
22 |             width: '40%',
23 |             marginLeft: 'auto',
24 |             marginRight: 'auto',
25 |             marginTop: '10px'
26 |           }} />
27 |           <div className="about-sourceme">
28 |             <p>Source Me is a small application which provides the necessary tools while developing a web application. The need for this application was because i was too lazy to go to the web & search for the packages, or fonts, or material design colors. So a small app was to be built to provide the necessary resources in a single click ! </p>
29 |             <button style={{
30 |               position: 'relative',
31 |               top: '2em',
32 |               background: 'transparent',
33 |               outline: 'none',
34 |               cursor: 'pointer',
35 |               border: '2px solid #283593',
36 |               borderRadius: '10px',
37 |               padding: '0.5em 2em',
38 |               fontWeight: '700'
39 |             }} onClick={this.props.toggle}>Get Started</button>
40 |           </div>
41 |           <p style={{
42 |             marginTop: '50px',
43 |             fontSize: '20px'
44 |           }}>&#128153;&#128156;&#128154;</p>
45 |         </div>
46 |       );
47 |     }
48 |   }
49 |   
50 |   export default About;


--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
  1 | import '../assets/css/App.scss';
  2 | import React, { Component } from 'react';
  3 | import Nav from './Nav';
  4 | 
  5 | import CDN from './sub-components/CDN/CDN';
  6 | import Font from './sub-components/Font/Font';
  7 | import Colors from './sub-components/Colors/Colors';
  8 | import Icons from './sub-components/Icons/Icons';
  9 | import Epsum from './sub-components/Epsum/Epsum';
 10 | import URLShortener from './sub-components/URLShortener/URLShortener';
 11 | import EmojiPicker from './sub-components/EmojiPicker/EmojiPicker';
 12 | import ImageCompressor from './sub-components/ImageCompressor/ImageCompressor';
 13 | 
 14 | import Home from './Home';
 15 | 
 16 | import {
 17 |   BrowserRouter as Router,
 18 |   Route,
 19 |   Link,
 20 |   Switch
 21 | } from 'react-router-dom';
 22 | 
 23 | const routes = [
 24 |   {
 25 |     path: './',
 26 |     exact: true,
 27 |     main: () => <Home />
 28 |   },
 29 |   {
 30 |     path: '/font',
 31 |     main: () => <Font url='https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyBwIX97bVWr3-6AIUvGkcNnmFgirefZ6Sw' />
 32 |   },
 33 |   {
 34 |     path: '/epsum',
 35 |     main: () => <Epsum url="https://baconipsum.com/api/?type=meat-and-filler" />
 36 |   },
 37 |   {
 38 |     path: '/cdn',
 39 |     main: () => <CDN url='https://api.cdnjs.com/libraries' />
 40 |   },
 41 |   {
 42 |     path: '/icons',
 43 |     main: () => <Icons url='https://api.myjson.com/bins/fzihv' />
 44 |   },
 45 |   {
 46 |     path: '/colors',
 47 |     main: () => <Colors url='https://gist.githubusercontent.com/amitzur/6ef49f01a662bae992a4/raw/93d6836dcaadb997314944edc3f6a09a11ebecb7/colors.json' />
 48 |   },
 49 |   {
 50 |     path: '/urlshortner',
 51 |     main: () => <URLShortener />
 52 |   },
 53 |   {
 54 |     path: '/emojis',
 55 |     main: () => <EmojiPicker url='https://raw.githubusercontent.com/theIYD/source-me/development/src/components/sub-components/EmojiPicker/emojis.json' />
 56 |   },
 57 |   {
 58 |     path: '/imagecompress',
 59 |     main: () => <ImageCompressor />
 60 |   }
 61 | ];
 62 | 
 63 | class App extends Component {
 64 |   constructor(props) {
 65 |     super(props);
 66 |   }
 67 | 
 68 |   componentDidMount() {
 69 |     this._isMounted = true;
 70 |   }
 71 | 
 72 |   componentWillUnmount() {
 73 |     this._isMounted = false;  
 74 |   }
 75 | 
 76 |   render() {
 77 |     return (
 78 |       <div id="app">
 79 |       <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
 80 |       rel="stylesheet" />
 81 |         <Router>
 82 |           <Switch>
 83 |             <div style={{display: 'flex', height: '100%'}}>
 84 |               <Nav />
 85 |                 <div id="main" className="content container">
 86 |                   {routes.map((route, index) => (
 87 |                     <Route
 88 |                       key={index}
 89 |                       path={route.path}
 90 |                       exact={route.exact}
 91 |                       component={route.main}
 92 |                     />
 93 |                   ))}
 94 |                 </div>
 95 |             </div>
 96 |           </Switch>
 97 |       </Router>
 98 |       </div>
 99 |     );
100 |   }
101 | }
102 | 
103 | export default App;
104 | 


--------------------------------------------------------------------------------
/src/components/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import homeLogo from '../assets/images/house.png';
 3 | 
 4 | class Home extends Component {
 5 |     render() {
 6 |         return (
 7 |             <div style={{
 8 |                 display: 'flex',
 9 |                 alignItems: 'center',
10 |                 justifyContent: 'center',
11 |                 height: '100%'
12 |             }}>
13 |                 <span title='Start by navigating tools on your left'><img style={{
14 |                     width: '80px',
15 |                     height: '80px',
16 |                     opacity: '0.3'
17 |                 }} src={homeLogo} alt="You are home." />
18 |                 </span>
19 |             </div>
20 |         );
21 |     }
22 | }
23 | 
24 | export default Home;


--------------------------------------------------------------------------------
/src/components/Nav.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import Modal from 'react-modal';
  3 | import pjson from '../../package.json';
  4 | import About from './About';
  5 | 
  6 | import {
  7 |     BrowserRouter as Router,
  8 |     Route,
  9 |     Link,
 10 |     Switch
 11 |   } from 'react-router-dom';
 12 | 
 13 | class Nav extends Component {
 14 |     constructor(props) {
 15 |         super(props);
 16 |         this.state = {
 17 |             isActive: false
 18 |         }
 19 |         this.toggleModal = this.toggleModal.bind(this);
 20 |     }
 21 | 
 22 |     componentWillMount() {
 23 |         Modal.setAppElement('body');
 24 |       }
 25 | 
 26 |     toggleModal() {
 27 |         this.setState({
 28 |           isActive: !this.state.isActive
 29 |         });
 30 |       }
 31 | 
 32 |     render() {
 33 |         return(
 34 |             <div>
 35 |                 <nav className="navbar">
 36 |                     `<div className="nav-category">
 37 |                         <h3>Tools &amp; Utilities</h3>
 38 |                     </div>
 39 |                     <div className="nav-item">
 40 |                         <h5><Link to="/colors"><i className="material-icons md-dark md-36 m-icon">&#xE3B7;</i>Material Colors from <strong>Google</strong></Link></h5>
 41 |                     </div>
 42 |                     <div className="nav-item">
 43 |                         <h5><Link to="/cdn"><i className="material-icons md-dark md-36 m-icon">&#xE252;</i>Content Delivery Networks Library from <strong>cdnjs</strong></Link></h5>
 44 |                     </div>
 45 |                     <div className="nav-item">
 46 |                         <h5><Link to="/font"><i className="material-icons md-dark md-36 m-icon">&#xE245;</i>Fonts from <strong>Google</strong></Link></h5>
 47 |                     </div>
 48 |                     <div className="nav-item">
 49 |                         <h5><Link to="/icons"><i className="material-icons md-dark md-36 m-icon">&#xE1BD;</i>Material icons from <strong>Google</strong></Link></h5>
 50 |                     </div>
 51 |                     <div className="nav-item">
 52 |                         <h5><Link to="/epsum"><i className="material-icons md-dark md-36 m-icon">&#xE234;</i>Epsum Generator from <strong>bacon ipsum</strong></Link></h5>
 53 |                     </div>
 54 |                     <div className="nav-item">
 55 |                         <h5><Link to="/urlshortner"><i className="material-icons md-dark md-36 m-icon">&#xE250;</i>URL Shortner</Link></h5>
 56 |                     </div>
 57 |                     <div className="nav-item">
 58 |                         <h5><Link to="/emojis"><i className="material-icons md-dark md-36 m-icon">&#xE24E;</i>Emoji Picker</Link></h5>
 59 |                     </div>
 60 |                     <div className="nav-item">
 61 |                         <h5><Link to="/imagecompress"><i className="material-icons md-dark md-36 m-icon">&#xE251;</i>Image Compress</Link></h5>
 62 |                     </div>
 63 | 
 64 |                     <footer className="about-navigate">
 65 |                         <h6><a><button style={{
 66 |                             backgroundColor: 'transparent',
 67 |                             backgroundRepeat: 'no-repeat',
 68 |                             border: 'none',
 69 |                             cursor: 'pointer',
 70 |                             overflow: 'hidden',
 71 |                             outline: 'none',
 72 |                             color: '#fff',
 73 |                             position: 'absolute',
 74 |                             bottom: '0',
 75 |                             left: '280px',
 76 |                             marginBottom: '20px',
 77 |                             marginRight: '20px',
 78 |                             opacity: '0.6',
 79 |                             fontSize: '12px'
 80 |                         }} onClick={this.toggleModal}>About</button></a></h6>
 81 |                         
 82 |                         <Modal isOpen={this.state.isActive}>
 83 |                             <About toggle={this.toggleModal} />
 84 |                         </Modal>
 85 |                     </footer>
 86 | 
 87 |                         <em style={{
 88 |                             position: 'absolute',
 89 |                             bottom: '0',
 90 |                             marginBottom: '20px',
 91 |                             marginLeft: '20px',
 92 |                             fontSize: '10px'
 93 |                         }} className="version">Version: {pjson.version}</em>
 94 |                 </nav>
 95 |             </div>
 96 |         );
 97 |     }
 98 | }
 99 | 
100 | export default Nav;


--------------------------------------------------------------------------------
/src/components/sub-components/CDN/CDN.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import axios from 'axios';
 3 | 
 4 | class CDN extends React.Component {
 5 |     constructor(props) {
 6 |         super(props);
 7 |         this.handleChangeOption = this.handleChangeOption.bind(this);
 8 |         this.state = {
 9 |             data: []
10 |         };
11 |     }
12 |     componentDidMount() {
13 |         this._isMounted = true;
14 |         axios.get(`${this.props.url}`)
15 |         .then(res => {
16 |           this.setState({ 
17 |               data: res.data.results,
18 |               link: ''
19 |             });
20 |         });
21 |     }
22 | 
23 |     componentWillUnmount() {
24 |         this._isMounted = false;    
25 |     }
26 | 
27 |     handleChangeOption(e) {
28 |         let id = e.target.options[e.target.selectedIndex].id;
29 |         let cdn_link = this.state.data[id].latest;
30 |         this.setState({
31 |             link: cdn_link
32 |         });
33 |     }
34 | 
35 |     render() {
36 |         return (
37 |             <div>
38 |                 <section className="wrapper cdn">
39 |                     <h2>Content Delivery Network Library</h2>
40 |                     <hr />
41 |                     <p className="about-library">CDNJS is one of the most famous free and public web front-end CDN services which is used by ~2,380,000 websites worldwide</p>
42 |                     <select className="dropdown" onChange={this.handleChangeOption}>
43 |                         {this.state.data.map((each, index) => <option id={index} key={each.name}>{each.name}</option>)}
44 |                     </select>
45 |                     <div className="color-cdn-link">
46 |                         <p className="cdn-link">{this.state.link}</p>
47 |                     </div>
48 |                 </section>
49 |             </div>
50 |         );
51 |     }
52 | }
53 | 
54 | export default CDN;


--------------------------------------------------------------------------------
/src/components/sub-components/Colors/Colors.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import axios from 'axios';
 3 | import ReactTooltip from 'react-tooltip';
 4 | 
 5 | class Colors extends React.Component {
 6 |     constructor(props) {
 7 |         super(props);
 8 |         this.state = {
 9 |             data: [],
10 |             colors: []
11 |         }
12 | 
13 |         this.handleChangeOption = this.handleChangeOption.bind(this);
14 |     }
15 |     componentDidMount() {
16 |         this._isMounted = true;
17 |         axios.get(`${this.props.url}`)
18 |         .then(res => {
19 |           this.setState({ 
20 |               data: res.data,
21 |             });
22 |         });
23 |     }
24 |     componentWillUnmount() {
25 |         this._isMounted = false;
26 |     }
27 |     handleChangeOption(e) {
28 |         let id = e.target.options[e.target.selectedIndex].id;
29 |         let colors = this.state.data[id];
30 |         this.setState({
31 |             colors: colors
32 |         });
33 |     }
34 |     render() {
35 |         return (
36 |             <div>
37 |                 <section className='wrapper' style={{textAlign: 'center'}}>
38 |                     <h2 style={{textAlign: 'center'}}>Google Material Colors</h2>
39 |                     <hr />
40 |                     <p className="about-library">The Material Colors by Google are one of the finest palettes available on the web. These are vibrant, attractive and soft making the design excellent !</p>
41 |                     <select className='dropdown' onChange={this.handleChangeOption}>
42 |                         {Object.keys(this.state.data).map((color, index) => {
43 |                             return <option key={index} id={color}>{color}</option>
44 |                         })}
45 |                     </select>
46 |                     <div className='wrap-colors'>
47 |                         {Object.values(this.state.colors).map((shade, index) => {
48 |                             return (
49 |                                 <div data-tip={shade} data-for={shade} className='color-div' style={{backgroundColor: `${shade}`}} key={shade} id={shade}>
50 |                                     <ReactTooltip key={index} id={shade} type="dark" effect="solid" place="top"></ReactTooltip>
51 |                                 </div>
52 |                             );
53 |                         })}
54 |                     </div>
55 |                 </section>
56 |             </div>
57 |         );
58 |     }
59 | }
60 | 
61 | export default Colors;


--------------------------------------------------------------------------------
/src/components/sub-components/EmojiPicker/EmojiModal.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | class EmojiModal extends Component {
 4 |     render() {
 5 |         return (
 6 |             <div>
 7 |             <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
 8 |             rel="stylesheet" />
 9 |                 <div className='popup'>
10 |                     <div className='popup_inner'>
11 |                         <div style={{
12 |                             display: 'inline-block',
13 |                             position: 'relative',
14 |                             top: '1em'
15 |                         }}>
16 |                             <span style={{
17 |                                 fontSize: '4em'
18 |                             }}>{this.props.emoji}</span>
19 |                         </div>
20 |                         <h2 style={{marginTop: '30px', fontWeight: 'bold'}}><span>&#x</span>{this.props.emojiCode}<span>;</span></h2>
21 |                         <button style={{background: 'transparent', cursor: 'pointer', outline: 'none', fontWeight: 'bold', border: 'none', position: 'relative', top: '15px'}} onClick={this.props.toggle}><i className="material-icons md-dark md-36">&#xE14C;</i></button>
22 |                     </div>
23 |                 </div>
24 |             </div>
25 |         );
26 |     }
27 | }
28 | 
29 | export default EmojiModal;


--------------------------------------------------------------------------------
/src/components/sub-components/EmojiPicker/EmojiPicker.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import axios from 'axios';
 3 | import { ClipLoader } from 'react-spinners';
 4 | 
 5 | import EmojiModal from './EmojiModal';
 6 | 
 7 | class EmojiPicker extends Component {
 8 |     constructor(props) {
 9 |         super(props);
10 |         this.state = {
11 |             data: [],
12 |             isActive: false,
13 |             currentEmojiCode: '',
14 |             currentEmoji: '',
15 |             loading: true
16 |         }
17 |         this.toggleModal = this.toggleModal.bind(this);
18 |     }
19 |     
20 |     componentDidMount() {
21 |         this._isMounted = true;
22 |         axios.get(`${this.props.url}`)
23 |         .then(res => {
24 |           this.setState({ 
25 |               data: res.data
26 |             });
27 |         });
28 |     }
29 | 
30 |     componentWillUnmount() {
31 |         this._isMounted = false;
32 |     }
33 | 
34 |     toggleModal(e) {
35 |         this.setState({
36 |             isActive: !this.state.isActive,
37 |             currentEmojiCode: e.target.getAttribute('data-emoji-code'),
38 |             currentEmoji: e.target.getAttribute('data-emoji')
39 |         });
40 |     }
41 |     
42 |     render() {
43 |         return (
44 |             <div>
45 |             <section className="wrapper">
46 |                 <h2 style={{textAlign: 'center'}}>Emoji Picker</h2>
47 |                 <hr />
48 |                 <p className="about-library">A small digital image or icon used to express an idea or emotion in electronic communication.</p>
49 |                 <div className="wrap-emojis" style={{textAlign: 'center', position: 'relative', top: '1em'}}>
50 |                 {
51 |                     ((!this.state.data.length) ? (
52 |                         <div style={{
53 |                             display: 'flex',
54 |                             alignItems: 'center',
55 |                             justifyContent: 'center'
56 |                         }}>
57 |                             <ClipLoader
58 |                                 color={'#283593'}
59 |                                 loading={this.state.loading}
60 |                             />
61 |                         </div>
62 |                     ) : (
63 |                         this.state.data.map((emoji, index) => {
64 |                             return (
65 |                                 <div onClick={this.toggleModal} key={emoji.name} data-emoji={emoji.char} data-emoji-code={emoji.code} style={{
66 |                                     display: 'inline-flex',
67 |                                     width: '20px',
68 |                                     height: '20px',
69 |                                     padding: '30px',
70 |                                     margin: '10px',
71 |                                     borderRadius: '2px',
72 |                                     boxShadow: '2px 2px 10px 2px rgba(0, 0, 0, 0.1)',
73 |                                     cursor: 'pointer',
74 |                                     alignItems: 'center', 
75 |                                     justifyContent: 'center',
76 |                                     fontSize: '20px'
77 |                                 }}>{emoji.char}</div>
78 |                                 );
79 |                             }))
80 |                         )
81 |                 }
82 |                     {this.state.isActive ? 
83 |                         <EmojiModal emoji={this.state.currentEmoji} emojiCode={this.state.currentEmojiCode} toggle={this.toggleModal} />
84 |                         : null
85 |                       }
86 |                 </div>
87 |             </section>
88 |         </div>
89 |         );
90 |     }
91 | }
92 | 
93 | export default EmojiPicker;


--------------------------------------------------------------------------------
/src/components/sub-components/EmojiPicker/emojis.json:
--------------------------------------------------------------------------------
  1 | [
  2 |     {
  3 |         "no": 1,
  4 |         "code": "1F600",
  5 |         "char": "😀",
  6 |         "name": "grinning face"
  7 |       },
  8 |       {
  9 |         "no": 2,
 10 |         "code": "1F601",
 11 |         "char": "😁",
 12 |         "name": "beaming face with smiling eyes"
 13 |       },
 14 |       {
 15 |         "no": 3,
 16 |         "code": "1F602",
 17 |         "char": "😂",
 18 |         "name": "face with tears of joy"
 19 |       },
 20 |       {
 21 |         "no": 4,
 22 |         "code": "1F923",
 23 |         "char": "🤣",
 24 |         "name": "rolling on the floor laughing"
 25 |       },
 26 |       {
 27 |         "no": 5,
 28 |         "code": "1F603",
 29 |         "char": "😃",
 30 |         "name": "grinning face with big eyes"
 31 |       },
 32 |       {
 33 |         "no": 6,
 34 |         "code": "1F604",
 35 |         "char": "😄",
 36 |         "name": "grinning face with smiling eyes"
 37 |       },
 38 |       {
 39 |         "no": 7,
 40 |         "code": "1F605",
 41 |         "char": "😅",
 42 |         "name": "grinning face with sweat"
 43 |       },
 44 |       {
 45 |         "no": 8,
 46 |         "code": "1F606",
 47 |         "char": "😆",
 48 |         "name": "grinning squinting face"
 49 |       },
 50 |       {
 51 |         "no": 9,
 52 |         "code": "1F609",
 53 |         "char": "😉",
 54 |         "name": "winking face"
 55 |       },
 56 |       {
 57 |         "no": 10,
 58 |         "code": "1F60A",
 59 |         "char": "😊",
 60 |         "name": "smiling face with smiling eyes"
 61 |       },
 62 |       {
 63 |         "no": 11,
 64 |         "code": "1F60B",
 65 |         "char": "😋",
 66 |         "name": "face savoring food"
 67 |       },
 68 |       {
 69 |         "no": 12,
 70 |         "code": "1F60E",
 71 |         "char": "😎",
 72 |         "name": "smiling face with sunglasses"
 73 |       },
 74 |       {
 75 |         "no": 13,
 76 |         "code": "1F60D",
 77 |         "char": "😍",
 78 |         "name": "smiling face with heart-eyes"
 79 |       },
 80 |       {
 81 |         "no": 14,
 82 |         "code": "1F618",
 83 |         "char": "😘",
 84 |         "name": "face blowing a kiss"
 85 |       },
 86 |       {
 87 |         "no": 15,
 88 |         "code": "1F617",
 89 |         "char": "😗",
 90 |         "name": "kissing face"
 91 |       },
 92 |       {
 93 |         "no": 16,
 94 |         "code": "1F619",
 95 |         "char": "😙",
 96 |         "name": "kissing face with smiling eyes"
 97 |       },
 98 |       {
 99 |         "no": 17,
100 |         "code": "1F61A",
101 |         "char": "😚",
102 |         "name": "kissing face with closed eyes"
103 |       },
104 |       {
105 |         "no": 18,
106 |         "code": "263A",
107 |         "char": "☺",
108 |         "name": "smiling face"
109 |       },
110 |       {
111 |         "no": 19,
112 |         "code": "1F642",
113 |         "char": "🙂",
114 |         "name": "slightly smiling face"
115 |       },
116 |       {
117 |         "no": 20,
118 |         "code": "1F917",
119 |         "char": "🤗",
120 |         "name": "hugging face"
121 |       },
122 |       {
123 |         "no": 21,
124 |         "code": "1F929",
125 |         "char": "🤩",
126 |         "name": "⊛ star-struck"
127 |       },
128 |       {
129 |         "no": 22,
130 |         "code": "1F914",
131 |         "char": "🤔",
132 |         "name": "thinking face"
133 |       },
134 |       {
135 |         "no": 23,
136 |         "code": "1F928",
137 |         "char": "🤨",
138 |         "name": "⊛ face with raised eyebrow"
139 |       },
140 |       {
141 |         "no": 24,
142 |         "code": "1F610",
143 |         "char": "😐",
144 |         "name": "neutral face"
145 |       },
146 |       {
147 |         "no": 25,
148 |         "code": "1F611",
149 |         "char": "😑",
150 |         "name": "expressionless face"
151 |       },
152 |       {
153 |         "no": 26,
154 |         "code": "1F636",
155 |         "char": "😶",
156 |         "name": "face without mouth"
157 |       },
158 |       {
159 |         "no": 27,
160 |         "code": "1F644",
161 |         "char": "🙄",
162 |         "name": "face with rolling eyes"
163 |       },
164 |       {
165 |         "no": 28,
166 |         "code": "1F60F",
167 |         "char": "😏",
168 |         "name": "smirking face"
169 |       },
170 |       {
171 |         "no": 29,
172 |         "code": "1F623",
173 |         "char": "😣",
174 |         "name": "persevering face"
175 |       },
176 |       {
177 |         "no": 30,
178 |         "code": "1F625",
179 |         "char": "😥",
180 |         "name": "sad but relieved face"
181 |       },
182 |       {
183 |         "no": 31,
184 |         "code": "1F62E",
185 |         "char": "😮",
186 |         "name": "face with open mouth"
187 |       },
188 |       {
189 |         "no": 32,
190 |         "code": "1F910",
191 |         "char": "🤐",
192 |         "name": "zipper-mouth face"
193 |       },
194 |       {
195 |         "no": 33,
196 |         "code": "1F62F",
197 |         "char": "😯",
198 |         "name": "hushed face"
199 |       },
200 |       {
201 |         "no": 34,
202 |         "code": "1F62A",
203 |         "char": "😪",
204 |         "name": "sleepy face"
205 |       },
206 |       {
207 |         "no": 35,
208 |         "code": "1F62B",
209 |         "char": "😫",
210 |         "name": "tired face"
211 |       },
212 |       {
213 |         "no": 36,
214 |         "code": "1F634",
215 |         "char": "😴",
216 |         "name": "sleeping face"
217 |       },
218 |       {
219 |         "no": 37,
220 |         "code": "1F60C",
221 |         "char": "😌",
222 |         "name": "relieved face"
223 |       },
224 |       {
225 |         "no": 38,
226 |         "code": "1F61B",
227 |         "char": "😛",
228 |         "name": "face with tongue"
229 |       },
230 |       {
231 |         "no": 39,
232 |         "code": "1F61C",
233 |         "char": "😜",
234 |         "name": "winking face with tongue"
235 |       },
236 |       {
237 |         "no": 40,
238 |         "code": "1F61D",
239 |         "char": "😝",
240 |         "name": "squinting face with tongue"
241 |       },
242 |       {
243 |         "no": 41,
244 |         "code": "1F924",
245 |         "char": "🤤",
246 |         "name": "drooling face"
247 |       },
248 |       {
249 |         "no": 42,
250 |         "code": "1F612",
251 |         "char": "😒",
252 |         "name": "unamused face"
253 |       },
254 |       {
255 |         "no": 43,
256 |         "code": "1F613",
257 |         "char": "😓",
258 |         "name": "downcast face with sweat"
259 |       },
260 |       {
261 |         "no": 44,
262 |         "code": "1F614",
263 |         "char": "😔",
264 |         "name": "pensive face"
265 |       },
266 |       {
267 |         "no": 45,
268 |         "code": "1F615",
269 |         "char": "😕",
270 |         "name": "confused face"
271 |       },
272 |       {
273 |         "no": 46,
274 |         "code": "1F643",
275 |         "char": "🙃",
276 |         "name": "upside-down face"
277 |       },
278 |       {
279 |         "no": 47,
280 |         "code": "1F911",
281 |         "char": "🤑",
282 |         "name": "money-mouth face"
283 |       },
284 |       {
285 |         "no": 48,
286 |         "code": "1F632",
287 |         "char": "😲",
288 |         "name": "astonished face"
289 |       },
290 |       {
291 |         "no": 49,
292 |         "code": "2639",
293 |         "char": "☹",
294 |         "name": "frowning face"
295 |       },
296 |       {
297 |         "no": 50,
298 |         "code": "1F641",
299 |         "char": "🙁",
300 |         "name": "slightly frowning face"
301 |       },
302 |       {
303 |         "no": 51,
304 |         "code": "1F616",
305 |         "char": "😖",
306 |         "name": "confounded face"
307 |       },
308 |       {
309 |         "no": 52,
310 |         "code": "1F61E",
311 |         "char": "😞",
312 |         "name": "disappointed face"
313 |       },
314 |       {
315 |         "no": 53,
316 |         "code": "1F61F",
317 |         "char": "😟",
318 |         "name": "worried face"
319 |       },
320 |       {
321 |         "no": 54,
322 |         "code": "1F624",
323 |         "char": "😤",
324 |         "name": "face with steam from nose"
325 |       },
326 |       {
327 |         "no": 55,
328 |         "code": "1F622",
329 |         "char": "😢",
330 |         "name": "crying face"
331 |       },
332 |       {
333 |         "no": 56,
334 |         "code": "1F62D",
335 |         "char": "😭",
336 |         "name": "loudly crying face"
337 |       },
338 |       {
339 |         "no": 57,
340 |         "code": "1F626",
341 |         "char": "😦",
342 |         "name": "frowning face with open mouth"
343 |       },
344 |       {
345 |         "no": 58,
346 |         "code": "1F627",
347 |         "char": "😧",
348 |         "name": "anguished face"
349 |       },
350 |       {
351 |         "no": 59,
352 |         "code": "1F628",
353 |         "char": "😨",
354 |         "name": "fearful face"
355 |       },
356 |       {
357 |         "no": 60,
358 |         "code": "1F629",
359 |         "char": "😩",
360 |         "name": "weary face"
361 |       },
362 |       {
363 |         "no": 61,
364 |         "code": "1F92F",
365 |         "char": "🤯",
366 |         "name": "⊛ exploding head"
367 |       },
368 |       {
369 |         "no": 62,
370 |         "code": "1F62C",
371 |         "char": "😬",
372 |         "name": "grimacing face"
373 |       },
374 |       {
375 |         "no": 63,
376 |         "code": "1F630",
377 |         "char": "😰",
378 |         "name": "anxious face with sweat"
379 |       },
380 |       {
381 |         "no": 64,
382 |         "code": "1F631",
383 |         "char": "😱",
384 |         "name": "face screaming in fear"
385 |       },
386 |       {
387 |         "no": 65,
388 |         "code": "1F633",
389 |         "char": "😳",
390 |         "name": "flushed face"
391 |       },
392 |       {
393 |         "no": 66,
394 |         "code": "1F92A",
395 |         "char": "🤪",
396 |         "name": "⊛ crazy face"
397 |       },
398 |       {
399 |         "no": 67,
400 |         "code": "1F635",
401 |         "char": "😵",
402 |         "name": "dizzy face"
403 |       },
404 |       {
405 |         "no": 68,
406 |         "code": "1F621",
407 |         "char": "😡",
408 |         "name": "pouting face"
409 |       },
410 |       {
411 |         "no": 69,
412 |         "code": "1F620",
413 |         "char": "😠",
414 |         "name": "angry face"
415 |       },
416 |       {
417 |         "no": 70,
418 |         "code": "1F92C",
419 |         "char": "🤬",
420 |         "name": "⊛ face with symbols on mouth"
421 |       },
422 |       {
423 |         "no": 71,
424 |         "code": "1F637",
425 |         "char": "😷",
426 |         "name": "face with medical mask"
427 |       },
428 |       {
429 |         "no": 72,
430 |         "code": "1F912",
431 |         "char": "🤒",
432 |         "name": "face with thermometer"
433 |       },
434 |       {
435 |         "no": 73,
436 |         "code": "1F915",
437 |         "char": "🤕",
438 |         "name": "face with head-bandage"
439 |       },
440 |       {
441 |         "no": 74,
442 |         "code": "1F922",
443 |         "char": "🤢",
444 |         "name": "nauseated face"
445 |       },
446 |       {
447 |         "no": 75,
448 |         "code": "1F92E",
449 |         "char": "🤮",
450 |         "name": "⊛ face vomiting"
451 |       },
452 |       {
453 |         "no": 76,
454 |         "code": "1F927",
455 |         "char": "🤧",
456 |         "name": "sneezing face"
457 |       },
458 |       {
459 |         "no": 77,
460 |         "code": "1F607",
461 |         "char": "😇",
462 |         "name": "smiling face with halo"
463 |       },
464 |       {
465 |         "no": 78,
466 |         "code": "1F920",
467 |         "char": "🤠",
468 |         "name": "cowboy hat face"
469 |       },
470 |       {
471 |         "no": 79,
472 |         "code": "1F921",
473 |         "char": "🤡",
474 |         "name": "clown face"
475 |       },
476 |       {
477 |         "no": 80,
478 |         "code": "1F925",
479 |         "char": "🤥",
480 |         "name": "lying face"
481 |       },
482 |       {
483 |         "no": 81,
484 |         "code": "1F92B",
485 |         "char": "🤫",
486 |         "name": "⊛ shushing face"
487 |       },
488 |       {
489 |         "no": 82,
490 |         "code": "1F92D",
491 |         "char": "🤭",
492 |         "name": "⊛ face with hand over mouth"
493 |       },
494 |       {
495 |         "no": 83,
496 |         "code": "1F9D0",
497 |         "char": "🧐",
498 |         "name": "⊛ face with monocle"
499 |       },
500 |       {
501 |         "no": 84,
502 |         "code": "1F913",
503 |         "char": "🤓",
504 |         "name": "nerd face"
505 |       },
506 |       {
507 |         "no": 85,
508 |         "code": "1F608",
509 |         "char": "😈",
510 |         "name": "smiling face with horns"
511 |       },
512 |       {
513 |         "no": 86,
514 |         "code": "1F47F",
515 |         "char": "👿",
516 |         "name": "angry face with horns"
517 |       },
518 |       {
519 |         "no": 87,
520 |         "code": "1F479",
521 |         "char": "👹",
522 |         "name": "ogre"
523 |       },
524 |       {
525 |         "no": 88,
526 |         "code": "1F47A",
527 |         "char": "👺",
528 |         "name": "goblin"
529 |       },
530 |       {
531 |         "no": 89,
532 |         "code": "1F480",
533 |         "char": "💀",
534 |         "name": "skull"
535 |       },
536 |       {
537 |         "no": 90,
538 |         "code": "2620",
539 |         "char": "☠",
540 |         "name": "skull and crossbones"
541 |       },
542 |       {
543 |         "no": 91,
544 |         "code": "1F47B",
545 |         "char": "👻",
546 |         "name": "ghost"
547 |       },
548 |       {
549 |         "no": 92,
550 |         "code": "1F47D",
551 |         "char": "👽",
552 |         "name": "alien"
553 |       },
554 |       {
555 |         "no": 93,
556 |         "code": "1F47E",
557 |         "char": "👾",
558 |         "name": "alien monster"
559 |       },
560 |       {
561 |         "no": 94,
562 |         "code": "1F916",
563 |         "char": "🤖",
564 |         "name": "robot face"
565 |       },
566 |       {
567 |         "no": 95,
568 |         "code": "1F4A9",
569 |         "char": "💩",
570 |         "name": "pile of poo"
571 |       },
572 |       {
573 |         "no": 96,
574 |         "code": "1F63A",
575 |         "char": "😺",
576 |         "name": "grinning cat face"
577 |       },
578 |       {
579 |         "no": 97,
580 |         "code": "1F638",
581 |         "char": "😸",
582 |         "name": "grinning cat face with smiling eyes"
583 |       },
584 |       {
585 |         "no": 98,
586 |         "code": "1F639",
587 |         "char": "😹",
588 |         "name": "cat face with tears of joy"
589 |       },
590 |       {
591 |         "no": 99,
592 |         "code": "1F63B",
593 |         "char": "😻",
594 |         "name": "smiling cat face with heart-eyes"
595 |       },
596 |       {
597 |         "no": 100,
598 |         "code": "1F63C",
599 |         "char": "😼",
600 |         "name": "cat face with wry smile"
601 |       },
602 |       {
603 |         "no": 101,
604 |         "code": "1F63D",
605 |         "char": "😽",
606 |         "name": "kissing cat face"
607 |       },
608 |       {
609 |         "no": 102,
610 |         "code": "1F640",
611 |         "char": "🙀",
612 |         "name": "weary cat face"
613 |       },
614 |       {
615 |         "no": 103,
616 |         "code": "1F63F",
617 |         "char": "😿",
618 |         "name": "crying cat face"
619 |       },
620 |       {
621 |         "no": 104,
622 |         "code": "1F63E",
623 |         "char": "😾",
624 |         "name": "pouting cat face"
625 |       },
626 |       {
627 |         "no": 105,
628 |         "code": "1F648",
629 |         "char": "🙈",
630 |         "name": "see-no-evil monkey"
631 |       },
632 |       {
633 |         "no": 106,
634 |         "code": "1F649",
635 |         "char": "🙉",
636 |         "name": "hear-no-evil monkey"
637 |       },
638 |       {
639 |         "no": 107,
640 |         "code": "1F64A",
641 |         "char": "🙊",
642 |         "name": "speak-no-evil monkey"
643 |       },
644 |       {
645 |         "no": 108,
646 |         "code": "1F476",
647 |         "char": "👶",
648 |         "name": "baby"
649 |       },
650 |       {
651 |         "no": 109,
652 |         "code": "1F9D2",
653 |         "char": "🧒",
654 |         "name": "⊛ child"
655 |       },
656 |       {
657 |         "no": 110,
658 |         "code": "1F466",
659 |         "char": "👦",
660 |         "name": "boy"
661 |       },
662 |       {
663 |         "no": 111,
664 |         "code": "1F467",
665 |         "char": "👧",
666 |         "name": "girl"
667 |       },
668 |       {
669 |         "no": 112,
670 |         "code": "1F9D1",
671 |         "char": "🧑",
672 |         "name": "⊛ adult"
673 |       },
674 |       {
675 |         "no": 113,
676 |         "code": "1F468",
677 |         "char": "👨",
678 |         "name": "man"
679 |       },
680 |       {
681 |         "no": 114,
682 |         "code": "1F469",
683 |         "char": "👩",
684 |         "name": "woman"
685 |       },
686 |       {
687 |         "no": 115,
688 |         "code": "1F9D3",
689 |         "char": "🧓",
690 |         "name": "⊛ older adult"
691 |       },
692 |       {
693 |         "no": 116,
694 |         "code": "1F474",
695 |         "char": "👴",
696 |         "name": "old man"
697 |       },
698 |       {
699 |         "no": 117,
700 |         "code": "1F475",
701 |         "char": "👵",
702 |         "name": "old woman"
703 |       }
704 | ]


--------------------------------------------------------------------------------
/src/components/sub-components/Epsum/Epsum.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import axios from 'axios';
 3 | 
 4 | class Epsum extends React.Component {
 5 |     constructor(props) {
 6 |         super(props);
 7 |         this.state = {
 8 |             data: '',
 9 |             text: 'Generate'
10 |         }
11 |         this.toggleEpsum = this.toggleEpsum.bind(this);
12 |     }
13 |     componentDidMount() {
14 |         this._isMounted = true;
15 |     }
16 |     componentWillUnmount() {
17 |         this._isMounted = false;
18 |     }
19 |     toggleEpsum() {
20 |         axios.get(`${this.props.url}`)
21 |         .then(res => {
22 |           this.setState({ 
23 |               data: res.data,
24 |               text: 'Regenerate'
25 |             });
26 |         });
27 |     }
28 |     render() {
29 |         return (
30 |             <div>
31 |                 <section className="wrapper">
32 |                     <h2 style={{textAlign: 'center'}}>Epsum Ipsum</h2>
33 |                     <hr />
34 |                     <p className="about-library">Epsum ipsum(a.k.a lorem ipsum) is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation.</p>
35 | 
36 |                     <div className="wrap-ipsum">
37 |                         <p>{this.state.data}</p>
38 |                     </div>
39 |                     <div style={{textAlign: 'center'}}>
40 |                     <button style={{
41 |                         margin: '20px auto 0 auto',
42 |                         boxShadow: '0 1px 4px rgba(0, 0, 0, .6)',
43 |                         padding: '5px 10px',
44 |                         cursor: 'pointer',
45 |                         backgroundColor: '#1565C0',
46 |                         color: '#fff',
47 |                         borderRadius: '2px',
48 |                         outline: 'none',
49 |                         overflow: 'hidden',
50 |                         border: 'none',
51 |                         textAlign: 'center'
52 |                     }} onClick={this.toggleEpsum}>{this.state.text}</button>
53 |                     </div>
54 |                 </section>
55 |             </div>
56 |         );
57 |     }
58 | }
59 | 
60 | export default Epsum;


--------------------------------------------------------------------------------
/src/components/sub-components/Font/Font.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import axios from 'axios';
 3 | 
 4 | class Font extends React.Component {
 5 |     constructor(props) {
 6 |         super(props);
 7 |         this.state = {
 8 |             data: [],
 9 |             name: ''
10 |         };
11 |         this.handleChangeOption = this.handleChangeOption.bind(this);
12 |     }
13 |     componentDidMount() {
14 |         this._isMounted = true;
15 |         axios.get(`${this.props.url}`)
16 |         .then(res => {
17 |           this.setState({ 
18 |               data: res.data.items,
19 |               link: ''
20 |             });
21 |         });
22 |     }
23 |     componentWillUnmount() {
24 |         this._isMounted = false;
25 |     }
26 |     handleChangeOption(e) {
27 |         let id = e.target.options[e.target.selectedIndex].id;
28 |         let font_name = this.state.data[id].family;
29 |         this.setState({
30 |             name: font_name
31 |         });
32 |     }
33 |     render() {
34 |         return(
35 |             <div>
36 |                 <link rel="stylesheet" type="text/css" href={`https://fonts.googleapis.com/css?family=`+`${this.state.name}`}/>
37 |                 <section className="wrapper" style={{textAlign: 'center'}}>
38 |                     <h2 style={{textAlign: 'center'}}>Google Fonts Library</h2>
39 |                     <hr />
40 |                     <p className="about-library">The Google Fonts Library is an interactive directory of free hosted application programming interfaces for web fonts. There are over 800 font families available through the main website. All the files are accessible through <a href='https://github.com/google/fonts'>Github's</a> repository</p>
41 |                     <select className="dropdown" onChange={this.handleChangeOption}>
42 |                         {this.state.data.map((font, index) => <option id={index} key={font.family}>{font.family}</option>)}
43 |                     </select>
44 |                     <div className="color-font">
45 |                         <p style={{
46 |                             fontFamily: `${this.state.name}, sans-serif`,
47 |                             marginTop: '2em',
48 |                             color: '#494C4E',
49 |                             textAlign: 'center',
50 |                             fontWeight: '700',
51 |                             padding: '0.25em',
52 |                             fontSize: '1.2em'
53 |                         }}>The quick brown fox jumps over the lazy dog</p>
54 |                     </div>
55 |                 </section>
56 |             </div>
57 |         );
58 |     }
59 | }
60 | 
61 | export default Font;


--------------------------------------------------------------------------------
/src/components/sub-components/Icons/Icons.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import axios from 'axios';
 3 | import ReactTooltip from 'react-tooltip';
 4 | import { ClipLoader } from 'react-spinners';
 5 | 
 6 | class Icons extends React.Component {
 7 |     constructor(props) {
 8 |         super(props);
 9 |         this.state = {
10 |             data: [],
11 |             error: '',
12 |             isError: false,
13 |             loading: true
14 |         }
15 |     }
16 |     componentDidMount() {
17 |         this._isMounted = true;
18 |         axios.get(`${this.props.url}`)
19 |         .then(res => {
20 |           this.setState({ 
21 |               data: res.data
22 |             });
23 |         })
24 |         .catch((error) => {
25 |             this.setState({
26 |                 error: error,
27 |                 isError: true
28 |             });
29 |         });
30 |     }
31 | 
32 |     componentWillUnMount() {
33 |         this._isMounted = false;    
34 |     }
35 | 
36 |     render() {
37 |         return (
38 |             <div>
39 |                 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
40 |                 rel="stylesheet" />
41 |                 <section className='wrapper'>
42 |                     <h2 style={{textAlign: 'center'}}>Material Design Icons</h2>
43 |                     <hr />
44 |                     <p className="about-library">The Material Design Icons by Google are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI.</p>
45 | 
46 |                     <div className="wrap-icons">
47 |                         {
48 |                             ((!this.state.data.length) ? (
49 |                                 <div style={{
50 |                                     display: 'flex',
51 |                                     alignItems: 'center',
52 |                                     justifyContent: 'center'
53 |                                 }}>
54 |                                     <ClipLoader
55 |                                         color={'#283593'}
56 |                                         loading={this.state.loading}
57 |                                     />
58 |                                 </div>
59 |                             ) : (
60 |                                 Object.values(this.state.data).map((icon, index) => {
61 |                                     return ([
62 |                                         <i data-tip data-for={icon.class} id={icon.label} key={index} className='material-icons icons'>{icon.class}</i>,
63 |                                         <ReactTooltip id={icon.class} key={icon.label} type="dark" effect="solid" place="top">
64 |                                             <span>
65 |                                                 <code>&lt;i class='material-icons'>{icon.class}&lt;/i></code>
66 |                                             </span>
67 |                                         </ReactTooltip>
68 |                                     ]);
69 |                                 })
70 |                             ))
71 |                         }
72 |                     </div>
73 |                     {
74 |                         ((this.state.isError) 
75 |                         ? (<div className="wrap-error" style={{
76 |                             textAlign: 'center',
77 |                             margin: '20px auto',
78 |                             backgroundColor: '#EF9A9A',
79 |                             padding: '12px 20px'
80 |                             
81 |                         }}>
82 |                             <p style={{
83 |                                 color: '#D50000'
84 |                             }}><strong style={{
85 |                                 color: '#D50000'
86 |                             }}>Error:</strong> Something did not work. Check your internet connection.</p>
87 |                             </div>)
88 |                         : null)
89 |                     }
90 |                 </section>
91 |             </div>
92 |         );
93 |     }
94 | }
95 | 
96 | export default Icons;


--------------------------------------------------------------------------------
/src/components/sub-components/ImageCompressor/ImageCompressor.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | const FileSaver = require('file-saver');
 3 | import compressImage from '@xkeshi/image-compressor';
 4 | 
 5 | class ImageCompressor extends Component {
 6 |     constructor(props) {
 7 |         super(props);
 8 |         this.setImage = this.setImage.bind(this);
 9 |     }
10 | 
11 |     setImage(event) {
12 |         const REGEXP_IMAGE_TYPE = /^image\/.+$/;
13 |         const file = event.target.files[0];
14 | 
15 |         if(!REGEXP_IMAGE_TYPE.test(file.type)) {
16 |             alert('The file must be an image. Please try again.');
17 |         }
18 | 
19 |         const imageCompressor = new compressImage();
20 |         imageCompressor.compress(file, {
21 |             quality: 0.6
22 |         })
23 |         .then((result) => {
24 |             FileSaver.saveAs(result, result.name);
25 | 
26 |         }).catch((err) => {
27 |             console.log(err);
28 |         });
29 |     }
30 | 
31 |     render() {
32 |         return (
33 |             <div>
34 |                 <section className='wrapper'>
35 |                     <h2 style={{textAlign: 'center'}}>Image Compressor</h2>
36 |                     <hr />
37 |                     <p className="about-library">It is a simple Javascript image compressor which takes help of the Browser's native <code>canvas.toBlob</code> API to compress the images without disturbing the quality.</p>
38 | 
39 |                     <div className='wrap-input' style={{textAlign: 'center'}}>
40 |                         <label className='containFile'>
41 |                             Choose an image
42 |                             <input onChange={event => this.setImage(event)} type="file" id="file" accept="image/*" />
43 |                         </label>
44 |                     </div>
45 |                 </section>
46 |             </div>
47 |         );
48 |     }
49 | }
50 | 
51 | export default ImageCompressor;


--------------------------------------------------------------------------------
/src/components/sub-components/URLShortener/URLShortener.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import url_shortner from 'node-url-shortener';
 3 | 
 4 | class URLShortener extends Component {
 5 |     constructor(props) {
 6 |         super(props);
 7 |         this.state = {
 8 |             shortURL: '',
 9 |             longUrl: '',
10 |         }
11 |         this.getShortURL = this.getShortURL.bind(this);
12 |         this.getInput = this.getInput.bind(this);
13 |     }
14 | 
15 |     componentDidMount() {
16 |         this._isMounted = true;
17 |     }
18 | 
19 |     componentWillUnMount() {
20 |         this._isMounted = false;
21 |     }
22 | 
23 |     getShortURL(e) {
24 |         e.preventDefault();
25 |         url_shortner.short(`https://is.gd/create.php?format=simple&url=${this.state.longUrl}`, (err, url) => {
26 |             this.setState({
27 |                 shortURL: url
28 |             });
29 | 
30 |             if(err) {
31 |                 console.log(err);
32 |             }
33 |         });
34 |     }
35 | 
36 |     getInput(event) {
37 |         this.setState({
38 |             longUrl: event.target.value
39 |         });
40 |     }
41 |     render() {
42 |         return (
43 |             <div>
44 |                 <section className='wrapper'>
45 |                     <h2 style={{textAlign: 'center'}}>URL Shortener</h2>
46 |                     <hr />
47 |                     <p className="about-library">URL shortening is a technique on the World Wide Web in which a Uniform Resource Locator (URL) may be made substantially shorter and still direct to the required page. This is achieved by using a redirect which links to the web page that has a long URL.</p>
48 |                     <div className="wrap-input" style={{textAlign: 'center'}}>
49 |                         <form id="url-form" onSubmit={this.getShortURL}>
50 |                             <input style={{
51 |                                 width: '360px',
52 |                                 background: '#fff',
53 |                                 color: '#a3a3a3',
54 |                                 font: 'inherit',
55 |                                 boxShadow: '6px 6px 10px 1px rgba(0, 0, 0, 0.1)',
56 |                                 border: '0',
57 |                                 outline: '0',
58 |                                 padding: '22px 18px',
59 |                                 margin: '50px auto 0 auto',
60 |                                 display: 'block',
61 |                                 textAlign: 'center'
62 |                             }} onChange={event => this.getInput(event)} type="text" placeholder="Place your url" required />
63 |                             <input type="submit" className='submit'/>
64 |                         </form>
65 |                             <p style={{
66 |                                 fontWeight: 'bold',
67 |                                 marginTop: '20px',
68 |                                 padding: '12px 36px'
69 |                             }}>{this.state.shortURL}</p>
70 |                     </div>
71 |                 </section>
72 |                 
73 |             </div>
74 |         );
75 |     }
76 | }
77 | 
78 | export default URLShortener;


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from 'react-dom';
 3 | import App from './components/App';
 4 | import WebFont from 'webfontloader';
 5 | 
 6 | WebFont.load({
 7 |     google: {
 8 |       families: ['Titillium Web:300,400,700', 'Roboto:300,400,500,900', 'sans-serif']
 9 |     }
10 | });
11 | 
12 | // Since we are using HtmlWebpackPlugin WITHOUT a template, we should create our own root node in the body element before rendering into it
13 | let root = document.createElement('div');
14 | root.id = "root";
15 | document.body.appendChild( root );
16 | 
17 | // Now we can render our application into it
18 | render( <App />, document.getElementById('root') );
19 | 


--------------------------------------------------------------------------------
/webpack.build.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const path = require('path');
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 4 | const BabiliPlugin = require('babili-webpack-plugin');
 5 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 6 | 
 7 | // Config directories
 8 | const SRC_DIR = path.resolve(__dirname, 'src');
 9 | const OUTPUT_DIR = path.resolve(__dirname, 'dist');
10 | 
11 | // Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up
12 | const defaultInclude = [SRC_DIR];
13 | 
14 | module.exports = {
15 |   entry: SRC_DIR + '/index.js',
16 |   output: {
17 |     path: OUTPUT_DIR,
18 |     publicPath: './',
19 |     filename: 'bundle.js'
20 |   },
21 |   node: {
22 |     __dirname: false,
23 |     __filename: false
24 |   },
25 |   module: {
26 |     rules: [
27 |       {
28 |         test: /\.css$/,
29 |         use: ExtractTextPlugin.extract({
30 |           fallback: 'style-loader',
31 |           use: 'css-loader'
32 |         }),
33 |         include: defaultInclude
34 |       },
35 |       { // sass / scss loader for webpack
36 |         test: /\.(sass|scss)$/,
37 |         loader: ExtractTextPlugin.extract({
38 |           fallback: 'style-loader',
39 |           use: ['css-loader', 'sass-loader']
40 |         }),
41 |         include: defaultInclude
42 |       },
43 |       {
44 |         test: /\.jsx?$/,
45 |         use: [{ loader: 'babel-loader' }],
46 |         include: defaultInclude
47 |       },
48 |       {
49 |         test: /\.(jpe?g|png|gif)$/,
50 |         use: [{ loader: 'file-loader?name=img/[name]__[hash:base64:5].[ext]' }],
51 |         include: defaultInclude
52 |       },
53 |       {
54 |         test: /\.(eot|svg|ttf|woff|woff2)$/,
55 |         use: [{ loader: 'file-loader?name=font/[name]__[hash:base64:5].[ext]' }],
56 |         include: defaultInclude
57 |       }
58 |     ]
59 |   },
60 |   target: 'electron-renderer',
61 |   plugins: [
62 |     new HtmlWebpackPlugin({
63 |       title: 'Source Me'
64 |     }),
65 |     new ExtractTextPlugin('bundle.css'),
66 |     new webpack.DefinePlugin({
67 |       'process.env.NODE_ENV': JSON.stringify('production')
68 |     }),
69 |     new BabiliPlugin()
70 |   ],
71 |   stats: {
72 |     colors: true,
73 |     children: false,
74 |     chunks: false,
75 |     modules: false
76 |   }
77 | };
78 | 


--------------------------------------------------------------------------------
/webpack.dev.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const path = require('path');
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 4 | const { spawn } = require('child_process');
 5 | 
 6 | // Config directories
 7 | const SRC_DIR = path.resolve(__dirname, 'src');
 8 | const OUTPUT_DIR = path.resolve(__dirname, 'dist');
 9 | 
10 | // Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up
11 | const defaultInclude = [SRC_DIR];
12 | 
13 | module.exports = {
14 |   entry: SRC_DIR + '/index.js',
15 |   output: {
16 |     path: OUTPUT_DIR,
17 |     publicPath: '/',
18 |     filename: 'bundle.js'
19 |   },
20 |   module: {
21 |     rules: [
22 |       {
23 |         test: /\.(scss|css)$/,
24 |         use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader'}],
25 |         include: defaultInclude
26 |       },
27 |       {
28 |         test: /\.jsx?$/,
29 |         use: [{ loader: 'babel-loader' }],
30 |         include: defaultInclude
31 |       },
32 |       {
33 |         test: /\.(jpe?g|png|gif)$/,
34 |         use: [{ loader: 'file-loader?name=img/[name]__[hash:base64:5].[ext]' }],
35 |         include: defaultInclude
36 |       },
37 |       {
38 |         test: /\.(eot|svg|ttf|woff|woff2)$/,
39 |         use: [{ loader: 'file-loader?name=font/[name]__[hash:base64:5].[ext]' }],
40 |         include: defaultInclude
41 |       }
42 |     ]
43 |   },
44 |   target: 'electron-renderer',
45 |   plugins: [
46 |     new HtmlWebpackPlugin({
47 |       title: 'Source Me'
48 |     }),
49 |     new webpack.DefinePlugin({
50 |       'process.env.NODE_ENV': JSON.stringify('development')
51 |     })
52 |   ],
53 |   devtool: 'cheap-source-map',
54 |   devServer: {
55 |     contentBase: OUTPUT_DIR,
56 |     stats: {
57 |       colors: true,
58 |       chunks: false,
59 |       children: false
60 |     },
61 |     setup() {
62 |       spawn(
63 |         'electron',
64 |         ['.'],
65 |         { shell: true, env: process.env, stdio: 'inherit' }
66 |       )
67 |       .on('close', code => process.exit(0))
68 |       .on('error', spawnError => console.error(spawnError));
69 |     }
70 |   }
71 | };
72 | 


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