3 |
2 |
3 |
9 | A mac app for asset optimization and compression 10 |
11 | 12 | --- 13 | 14 |
15 |
16 |
17 | ## Installation
18 |
19 | Crimp is currently in beta. Please feel free to report any bugs or error you may come across.
20 |
21 |
22 | 
23 |
24 |
25 | v0.2.0 Beta
26 |
27 |
28 |
29 | ## Contributing
30 |
31 | Crimp is built on web technologies using [Electron](https://electron.atom.io/) and [React](https://reactjs.org/). Incase, you wish to contribute please submit a [Issue](https://github.com/ghosh/Crimp/issues) first outlining the changes you would like to make.
32 |
33 | #### Development setup
34 | 1. Clone Github repo `$ git clone https://github.com/ghosh/Crimp.git`
35 | 2. Install `yarn` package manager, if you don't have it already (Read [installation guide](https://yarnpkg.com/en/docs/install#mac-tab))
36 | 3. Run `yarn install` in the root folder to install all dependencies
37 | 4. Run `yarn start` to start the local electron app. This comes with Hot Module Replacement for react for instant changes.
38 |
39 | Test your changes by compiling the app via
40 | ```
41 | yarn package
42 | ```
43 |
44 |
45 |
46 | ## Licensing
47 | This project is licensed under [MIT license](https://opensource.org/licenses/MIT).
48 |
49 |
50 |
51 | ## Made by
52 | Indrashish Ghosh – [@_ighosh](https://twitter.com/_ighosh) 🇮🇳
53 |
--------------------------------------------------------------------------------
/assets/crimp.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghosh/Crimp/4d71fa79af7cedd8787087c9d885786497649379/assets/crimp.icns
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "crimp",
3 | "productName": "Crimp",
4 | "version": "0.2.0",
5 | "private": true,
6 | "description": "Mac app for image, gif and document compression and minification",
7 | "main": "src/main/index.js",
8 | "scripts": {
9 | "start": "electron-forge start",
10 | "package": "electron-forge package",
11 | "make": "electron-forge make",
12 | "publish": "electron-forge publish",
13 | "lint": "echo \"No linting configured\""
14 | },
15 | "keywords": [
16 | "compression",
17 | "mac",
18 | "electron",
19 | "jpg",
20 | "electron",
21 | "minification",
22 | "mac app"
23 | ],
24 | "author": "ghosh",
25 | "license": "MIT",
26 | "config": {
27 | "forge": {
28 | "make_targets": {
29 | "darwin": [
30 | "zip"
31 | ]
32 | },
33 | "publish_targets": {
34 | "darwin": [
35 | "github"
36 | ]
37 | },
38 | "electronPackagerConfig": {
39 | "appCopyright": "Created by Indrashish Ghosh\nCopyright © 2017 www.ghosh.io",
40 | "appBundleId": "io.ghosh.crimp",
41 | "appCategoryType": "public.app-category.productivity",
42 | "packageManager": "yarn",
43 | "icon": "assets/crimp.icns"
44 | },
45 | "electronInstallerDMG": {
46 | "name": "Crimp"
47 | },
48 | "github_repository": {
49 | "owner": "Ghosh",
50 | "name": "Crimp",
51 | "draft": true
52 | }
53 | }
54 | },
55 | "dependencies": {
56 | "datauri": "^1.1.0",
57 | "electron-compile": "^6.4.2",
58 | "fs-extra": "^5.0.0",
59 | "imagemin": "^5.3.1",
60 | "imagemin-gifsicle": "^5.2.0",
61 | "imagemin-jpegtran": "^5.0.2",
62 | "imagemin-pngquant": "^5.0.1",
63 | "imagemin-svgo": "^6.0.0",
64 | "plur": "^2.1.2",
65 | "pretty-bytes": "^4.0.2",
66 | "react": "^16.2.0",
67 | "react-dom": "^16.2.0",
68 | "react-dropzone": "^4.2.9",
69 | "react-hot-loader": "^4.0.0",
70 | "styled-components": "^3.2.0"
71 | },
72 | "devDependencies": {
73 | "babel-plugin-transform-es2015-classes": "^6.24.1",
74 | "electron-prebuilt-compile": "1.8.2"
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/app/App.js:
--------------------------------------------------------------------------------
1 | import { ipcRenderer } from 'electron';
2 | import React, { Component } from 'react';
3 | import Dropzone from 'react-dropzone';
4 |
5 | import Title from './components/Title';
6 | import Button from './components/Button';
7 | import Loader from './components/Loader';
8 | import { Report, ReportSummary, ReportList } from './components/Report';
9 | import { Widget, WidgetHeader, WidgetBody, WidgetFooter } from './components/Widget';
10 | import { DropzoneIcons, DropzoneTitle, DropzoneSubtitle, DropzoneStyles } from './components/Dropzone';
11 |
12 | const READY = 'READY';
13 | const OPTIMIZING = 'OPTIMIZING';
14 | const REPORTING = 'REPORTING';
15 |
16 | class App extends Component {
17 |
18 | constructor(props, context) {
19 | super(props, context);
20 | this.onDrop = this.onDrop.bind(this);
21 | this.onConversion = this.onConversion.bind(this);
22 | this.state = {
23 | status: READY,
24 | delta: null,
25 | files: null
26 | };
27 | }
28 |
29 | componentDidMount() {
30 | ipcRenderer.on('files:optimized', this.onConversion);
31 | }
32 |
33 | componentWillUnmount() {
34 | ipcRenderer.removeListener('files:optimized', this.onConversion);
35 | }
36 |
37 | shouldComponentUpdate() {
38 | return true;
39 | }
40 |
41 | onConversion(event, fileData, delta) {
42 | this.setState({
43 | status: REPORTING,
44 | delta: delta,
45 | files: fileData
46 | });
47 | }
48 |
49 | onDrop(acceptedFiles) {
50 | if (acceptedFiles.length < 1) return;
51 | const filePaths = acceptedFiles.map( file => file.path );
52 | ipcRenderer.send('files:submit', filePaths);
53 | this.setState({ status: OPTIMIZING });
54 | }
55 |
56 | render() {
57 |
58 | let dropzoneRef;
59 |
60 | return (
61 | Optimizing...
71 |