├── .gitignore
├── .node-version
├── LICENSE
├── README.md
├── screenshot.png
└── src
├── .babelrc
├── .npmrc
├── app.js
├── components
└── jike.js
├── configureStore.js
├── index.html
├── package-lock.json
├── package.json
├── reducers
└── textReducer.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 | .cache
61 | src/dist
62 | /.idea
63 |
--------------------------------------------------------------------------------
/.node-version:
--------------------------------------------------------------------------------
1 | 8.9.3
2 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Arthur Wang
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 | # jike-like
2 | A practicing project to play with Parcel
3 |
4 | ### What's this
5 |
6 | Basic idea is to generate a simple image just like [即刻](https://okjike.com)'s icon.
7 |
8 | ### How to hack
9 |
10 | 1. clone this repo of course, `cd` to `src` dir
11 | 2. `yarn install`
12 | 3. `parcel index.html`
13 |
14 | 
15 |
16 |
17 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Arthraim/jike-like/b500571664e78ed99bf415929c5c8082cf3ffe73/screenshot.png
--------------------------------------------------------------------------------
/src/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env", "react"]
3 | }
4 |
5 |
--------------------------------------------------------------------------------
/src/.npmrc:
--------------------------------------------------------------------------------
1 | registry=https://registry.npm.taobao.org
2 | @ruguoapp:registry=https://npmjs.ruguoapp.com
3 |
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import { Provider } from 'react-redux'
4 | import { Jike } from './components/jike'
5 |
6 | import { store } from './configureStore'
7 |
8 | const App = () => { return () }
9 |
10 | ReactDOM.render(
11 |
12 |
13 | ,
14 | document.getElementById('container')
15 | )
--------------------------------------------------------------------------------
/src/components/jike.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { connect } from 'react-redux'
3 | import { Stage, Layer, Rect, Text } from 'react-konva'
4 | import { _ } from 'lodash'
5 | import { changeTextAction, changeImgAction } from '../reducers/textReducer'
6 | import { JikeOpenJsSDK } from '@ruguoapp/jike-open-js-sdk'
7 |
8 | const ONE_CHAR_HEIGHT = 400
9 | const jikeSDK = new JikeOpenJsSDK('')
10 |
11 | class JikeComponent extends React.Component {
12 |
13 | componentDidMount() {
14 | this.props.onImgChange(this.getDataUrl())
15 | }
16 |
17 | componentDidUpdate() {
18 | // TODO: konva的文档中没有找到如何在stage绘制完成后响应，暂时这样处理
19 | setTimeout(
20 | () => this.props.onImgChange(this.getDataUrl()),
21 | 100
22 | )
23 | }
24 |
25 | getDataUrl() {
26 | return this.refs.stage._stage.toDataURL()
27 | }
28 |
29 | render() {
30 | const { text, img, onTextChange, onJikeUserinfo } = this.props
31 | return (
32 |
33 |
JIKE-LIKE
34 |
1. 在下面输入框中输入字符（逻辑简单，字符太多会大笨蛋）
35 |
36 | { jikeSDK.isInJikeApp() &&
37 |
或者 { onJikeUserinfo() }}>直接使用即刻用户名}
38 |
42 | 2. 然后随意保存这个图
43 |
{ this.renderStage() }
44 |
45 |