From f260375285af2d37632ef9d40f6a5c135592f63e Mon Sep 17 00:00:00 2001 From: Anton Lavrenov Date: Tue, 11 Aug 2020 08:39:43 -0500 Subject: [PATCH] site update --- react-demos/basic_demo/src/index.js | 118 +++++++++++--------- scripts/helpers.js | 22 ++-- source/docs/react/Intro.md | 50 +++++++++ source/docs/react/_index.jade | 57 ++++++++++ source/docs/react/index.md | 14 +-- themes/hexo3/_config.yml | 8 +- themes/hexo3/layout/_partial/comment.ejs | 11 +- themes/hexo3/layout/_partial/subscribe.ejs | 1 - themes/hexo3/layout/demo_page.ejs | 17 +-- themes/hexo3/layout/index_react.ejs | 33 ++++++ themes/hexo3/layout/page.ejs | 13 +-- themes/hexo3/layout/post.ejs | 2 +- themes/hexo3/layout/react_page.ejs | 17 +-- themes/hexo3/layout/vue_page.ejs | 17 +-- themes/hexo3/source/css/_partial/index.styl | 10 ++ themes/hexo3/source/css/_partial/page.styl | 9 +- themes/hexo3/source/css/style.styl | 2 +- 17 files changed, 277 insertions(+), 124 deletions(-) create mode 100644 source/docs/react/Intro.md create mode 100644 source/docs/react/_index.jade create mode 100644 themes/hexo3/layout/index_react.ejs diff --git a/react-demos/basic_demo/src/index.js b/react-demos/basic_demo/src/index.js index 6cfeefee0..e028636d2 100755 --- a/react-demos/basic_demo/src/index.js +++ b/react-demos/basic_demo/src/index.js @@ -1,57 +1,75 @@ -import React, { Component } from 'react'; -import Konva from 'konva'; +import React from 'react'; import { render } from 'react-dom'; import { Stage, Layer, Star, Text } from 'react-konva'; -class App extends Component { - handleDragStart = e => { - e.target.setAttrs({ - shadowOffset: { - x: 15, - y: 15 - }, - scaleX: 1.1, - scaleY: 1.1 - }); - }; - handleDragEnd = e => { - e.target.to({ - duration: 0.5, - easing: Konva.Easings.ElasticEaseOut, - scaleX: 1, - scaleY: 1, - shadowOffsetX: 5, - shadowOffsetY: 5 - }); +function generateShapes() { + return [...Array(10)].map((_, i) => ({ + id: i.toString(), + x: Math.random() * window.innerWidth, + y: Math.random() * window.innerHeight, + rotation: Math.random() * 180, + isDragging: false, + })); +} + +const INITIAL_STATE = generateShapes(); + +const App = () => { + const [stars, setStars] = React.useState(INITIAL_STATE); + + const handleDragStart = (e) => { + const id = e.target.id(); + setStars( + stars.map((star) => { + return { + ...star, + isDragging: star.id === id, + }; + }) + ); }; - render() { - return ( - - - - {[...Array(10)].map((_, i) => ( - - ))} - - + const handleDragStart = (e) => { + setStars( + stars.map((star) => { + return { + ...star, + isDragging: false, + }; + }) ); - } -} + }; + + return ( + + + + {stars.map((star) => ( + + ))} + + + ); +}; render(, document.getElementById('root')); diff --git a/scripts/helpers.js b/scripts/helpers.js index fc7e6b71b..2273363ba 100644 --- a/scripts/helpers.js +++ b/scripts/helpers.js @@ -1,8 +1,8 @@ var links = { - index: 'https://github.com/konvajs/konva' + index: 'https://github.com/konvajs/konva', }; -hexo.extend.helper.register('github_link', function(data) { +hexo.extend.helper.register('github_link', function (data) { var match = data.file.match(/(\w+)\/lib\/(.+)/), name = match[1], path = 'lib/' + match[2]; @@ -29,10 +29,10 @@ hexo.extend.helper.register('github_link', function(data) { ); }); -hexo.extend.helper.register('item_flags', function(data) { +hexo.extend.helper.register('item_flags', function (data) { var result = ''; - ['static', 'chainable', 'async', 'final'].forEach(function(i) { + ['static', 'chainable', 'async', 'final'].forEach(function (i) { if (data[i]) result += '' + i + ''; }); @@ -40,11 +40,17 @@ hexo.extend.helper.register('item_flags', function(data) { return result; }); -hexo.extend.helper.register('page_nav', function() { - var sidebar = this.theme.doc_sidebar, - path = this.path.replace(/^docs\//, ''), +hexo.extend.helper.register('page_nav', function () { + var sidebar = Object.assign( + {}, + this.theme.doc_sidebar, + this.theme.react_sidebar, + this.theme.vue_sidebar, + this.theme.demo_sidebar + ); + (path = this.path.replace(/^docs\//, '')), // path = this.path, - list = {}; + (list = {}); for (var i in sidebar) { for (var j in sidebar[i]) { diff --git a/source/docs/react/Intro.md b/source/docs/react/Intro.md new file mode 100644 index 000000000..04c08f0ca --- /dev/null +++ b/source/docs/react/Intro.md @@ -0,0 +1,50 @@ +title: react-konva - declarative canvas components for React +layout: react_page +--- + +```bash +npm install react-konva konva +``` + + + +
+
+

All common shapes for graphical applications

+
+
+

Support for desktop and mobile devices

+
+
+

Node nesting, grouping and event bubbling

+
+
+

Hight quality exports into data URLs, image data, or image objects

+
+
+ +## How it looks? + +```js +import { Stage, Layer, Rect } from 'react-konva'; + +export const App = () => { + return ( + // Stage - is a div wrapper + // Layer - is an actual 2d canvas element, so you can clear several layers inside the stage + // Rect and Circle are not DOM elements. It is 2d shapes on canvas + + + + + + + ); +} +``` + +## Demo + + + + \ No newline at end of file diff --git a/source/docs/react/_index.jade b/source/docs/react/_index.jade new file mode 100644 index 000000000..7413df270 --- /dev/null +++ b/source/docs/react/_index.jade @@ -0,0 +1,57 @@ +layout: react_page +title: react-konva - declarative canvas components for React +description: react-konva is react library for canvas for drawings shapes, animations, node nesting, layering, filtering, event handling, drag and drop and much more. +comments: false +--- +.intro-wrap + + .outer + + h2.intro-features Features + + .features + .feature + img(src="/assets/features/undraw_abstract_x68e.svg") + h3.desc Object Oriented API with support of many shapes + .feature + img(src="/assets/features/undraw_file_sync_ot38.svg") + h3.desc Support for desktop and mobile devices + + .feature + img(src="/assets/features/undraw_animating_1rgh.svg") + h3.desc Animations and tweens + + .feature + img(src="/assets/features/undraw_fitting_pieces_cli3.svg") + h3.desc Node nesting, grouping and event bubbling + + .feature + img(src="/assets/features/undraw_image_viewer_wxce.svg") + h3.desc Hight quality exports into data URLs, image data, or image objects + + .feature + img(src="/assets/features/undraw_options_2fvi.svg") + h3.desc Nice read-to-use filters + + .feature + img(src="/assets/features/undraw_voice_interface_eckp.svg") + h3.desc Native integration with web frameworks such as React and Vue + + .feature + img(src="/assets/features/undraw_drag_5i9w.svg") + h3.desc Built-in Drag&drop support + + h2.intro-features Demo + + iframe(src='https://codesandbox.io/embed/github/konvajs/site/tree/master/react-demos/basic_demo?hidenavigation=1&view=split&fontsize=10',style='width:100%; height:600px; box-shadow: 0 0 10px grey; border-radius: 4px; overflow:hidden;',sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin") + + + + #intro-btn-wrap + a.add-app(href="https://github.com/konvajs/konva/issues/256") Do you want to add your app here? + + + + .outer + #intro-btn-wrap + a#intro-btn(href="/docs/index.html") Get Started diff --git a/source/docs/react/index.md b/source/docs/react/index.md index c1d3c3ad9..ded43f0d0 100644 --- a/source/docs/react/index.md +++ b/source/docs/react/index.md @@ -2,9 +2,11 @@ title: Getting started with react and canvas via Konva layout: react_page --- -![ReactKonva Logo](https://cloud.githubusercontent.com/assets/1443320/12193428/3bda2fcc-b623-11e5-8319-b1ccfc95eaec.png) +
+ +
-React Konva is a JavaScript library for drawing complex canvas graphics using [React](http://facebook.github.io/react/). It provides declarative and reactive bindings to the [Konva Framework](https://konvajs.org/). +`react-konva` is a JavaScript library for drawing complex canvas graphics using [React](http://facebook.github.io/react/). It provides declarative and reactive bindings to the [Konva Framework](https://konvajs.org/). [Github Repo](https://github.com/lavrton/react-konva) @@ -14,9 +16,9 @@ An attempt to make [React](http://facebook.github.io/react/) work with the HTML5 **Currently, `react-konva` is not supported in React Native environment.** -Currently you can use all `Konva` nodes and shapes as React components and all `Konva` events are supported on them in same way as normal browser events are supported. +Currently you can use all `Konva` nodes and shapes as React components and all `Konva` events are supported on them in same way. -**Note: you can find a lot of demos and examples of using Konva there: [https://konvajs.org/](https://konvajs.org/). Really, just go there and take a look what Konva can do for you. You will be able to do the same with react-konva too. You don't need to learn `react-konva`, just learn Konva.** +**Note: you can find a lot of demos and examples of using Konva there: [https://konvajs.org/](https://konvajs.org/). Really, just go there and take a look what Konva can do for you. You will be able to do the same with react-konva too. `Konva` for `react-konva` is like DOM for `React`.** ## Installation @@ -45,7 +47,5 @@ shapes. ### react-konva vs vanilla canvas -Vanilla canvas is faster because when you use `react-konva` you have two layers of abstractions. Konva framework is on top of canvas and React is on top of Konva. -Depending on the use case this approach can be slow. -The purpose of `react-konva` is to reduce the complexity of the application and use well-known declarative way for drawing on canvas. +Vanilla canvas can is faster because when you use `react-konva` you have two layers of abstractions: (1) `Konva` framework is on top of canvas and (2) `React` is on top of `Konva`. For many applications is performance is still very good. The purpose of `react-konva` is to reduce the complexity of the application and use well-known declarative way for drawing on canvas. diff --git a/themes/hexo3/_config.yml b/themes/hexo3/_config.yml index 644e568da..72b168fcb 100644 --- a/themes/hexo3/_config.yml +++ b/themes/hexo3/_config.yml @@ -2,7 +2,7 @@ menu: Tutorials: /docs/index.html Demos: /docs/sandbox/index.html API docs: /api/Konva.html - React: /docs/react/index.html + React: /docs/react/Intro.html Vue: /docs/vue/index.html Support Konva: /docs/donate.html Need help?: /docs/support.html @@ -355,11 +355,11 @@ demo_sidebar: # Touch Gestures: sandbox/Gestures.html react_sidebar: - Getting Started with React: - Intro: react/index.html + Docs and demos: + Intro: react/Intro.html + Overview: react/index.html Basic shapes: react/Shapes.html Custom shape: react/Custom_Shape.html - React demos: Events: react/Events.html Images: react/Images.html Filters: react/Filters.html diff --git a/themes/hexo3/layout/_partial/comment.ejs b/themes/hexo3/layout/_partial/comment.ejs index f8b3942e2..f02fb990c 100644 --- a/themes/hexo3/layout/_partial/comment.ejs +++ b/themes/hexo3/layout/_partial/comment.ejs @@ -1,7 +1,12 @@ <% if (page.comments && config.disqus_shortname){ %> -
+
- +
-<% } %> \ No newline at end of file +<% } %> diff --git a/themes/hexo3/layout/_partial/subscribe.ejs b/themes/hexo3/layout/_partial/subscribe.ejs index 6d855b618..fcc65eae9 100644 --- a/themes/hexo3/layout/_partial/subscribe.ejs +++ b/themes/hexo3/layout/_partial/subscribe.ejs @@ -4,7 +4,6 @@ Adapted from: http://blog.heyimcat.com/universal-signup-form/ */ .mc_embed_signup form { - text-align: center; padding: 10px 0 10px 0; } .mc-field-group { diff --git a/themes/hexo3/layout/demo_page.ejs b/themes/hexo3/layout/demo_page.ejs index 4fbe66068..944833e7d 100644 --- a/themes/hexo3/layout/demo_page.ejs +++ b/themes/hexo3/layout/demo_page.ejs @@ -1,21 +1,21 @@
-
-

- <%= page.title %> -

+
+

<%= page.title %>

+ <%- partial('_partial/subscribe') %>
+
- <%- partial('_partial/subscribe') %>
+ <%- partial('_partial/demo_sidebar') %>
@@ -25,16 +25,9 @@ <%- page.content %>
- <%- page_nav() %>
<%- partial('_partial/comment') %>
- <%- partial('_partial/demo_sidebar') %>
diff --git a/themes/hexo3/layout/index_react.ejs b/themes/hexo3/layout/index_react.ejs new file mode 100644 index 000000000..1ffff2a19 --- /dev/null +++ b/themes/hexo3/layout/index_react.ejs @@ -0,0 +1,33 @@ + + +<%- page.content %> diff --git a/themes/hexo3/layout/page.ejs b/themes/hexo3/layout/page.ejs index d018130f3..6bb7ac28d 100644 --- a/themes/hexo3/layout/page.ejs +++ b/themes/hexo3/layout/page.ejs @@ -1,7 +1,7 @@
-
+

<%= page.title %>

+ <%- partial('_partial/subscribe') %>
- <%- partial('_partial/subscribe') %> +
+ <%- partial('_partial/sidebar') %>
@@ -23,16 +25,9 @@ <%- page.content %>
- <%- page_nav() %>
<%- partial('_partial/comment') %>
- <%- partial('_partial/sidebar') %>
diff --git a/themes/hexo3/layout/post.ejs b/themes/hexo3/layout/post.ejs index df7e398d3..768529426 100644 --- a/themes/hexo3/layout/post.ejs +++ b/themes/hexo3/layout/post.ejs @@ -3,4 +3,4 @@
<%- partial('_partial/article', {post: page, full: true, index: false}) %>
- \ No newline at end of file + diff --git a/themes/hexo3/layout/react_page.ejs b/themes/hexo3/layout/react_page.ejs index 59295a313..8d2661011 100644 --- a/themes/hexo3/layout/react_page.ejs +++ b/themes/hexo3/layout/react_page.ejs @@ -1,21 +1,21 @@
-
-

- <%= page.title %> -

+
+

<%= page.title %>

+ <%- partial('_partial/subscribe') %>
- <%- partial('_partial/subscribe') %> +
+ <%- partial('_partial/react-sidebar') %>
@@ -25,16 +25,9 @@ <%- page.content %>
- <%- page_nav() %>
<%- partial('_partial/comment') %>
- <%- partial('_partial/react-sidebar') %>
diff --git a/themes/hexo3/layout/vue_page.ejs b/themes/hexo3/layout/vue_page.ejs index 25a0d157f..4f444abf4 100644 --- a/themes/hexo3/layout/vue_page.ejs +++ b/themes/hexo3/layout/vue_page.ejs @@ -1,21 +1,21 @@
-
-

- <%= page.title %> -

+
+

<%= page.title %>

+ <%- partial('_partial/subscribe') %>
- <%- partial('_partial/subscribe') %> +
+ <%- partial('_partial/vue-sidebar') %>
@@ -25,16 +25,9 @@ <%- page.content %>
<%- partial('_partial/comment') %>
- <%- partial('_partial/vue-sidebar') %>
diff --git a/themes/hexo3/source/css/_partial/index.styl b/themes/hexo3/source/css/_partial/index.styl index 7f48a1cd2..52c3339e1 100644 --- a/themes/hexo3/source/css/_partial/index.styl +++ b/themes/hexo3/source/css/_partial/index.styl @@ -55,6 +55,13 @@ intro-quick-start-column = 2 text-shadow: 1px 0 #eee line-height: 1.3 +#banner-subtitle + color: #555 + font: 300 25px font-title + text-shadow: 1px 0 #eee + line-height: 1.3 + margin: 50px + $banner-getting-started-font font-family: font-mono font-size: 14px @@ -157,6 +164,9 @@ $banner-getting-started-font @media mq-normal width: 50%; +.page-content .features .feature img + width: 100% + .features .feature .desc width: 100% padding-top: 10px diff --git a/themes/hexo3/source/css/_partial/page.styl b/themes/hexo3/source/css/_partial/page.styl index acec451b3..98f9b4fd3 100644 --- a/themes/hexo3/source/css/_partial/page.styl +++ b/themes/hexo3/source/css/_partial/page.styl @@ -4,14 +4,16 @@ note-warn = hsl(0, 100%, 50%) #page-banner @extend $banner-background - padding: 30px 0 + padding: 20px 0 text-align: center + margin-bottom: 20px @media mq-normal - padding: 40px 0 + padding: 20px 0 text-align: left #page-banner-inner position: relative + padding-bottom: 20px; #page-title color: #555 @@ -26,11 +28,10 @@ note-warn = hsl(0, 100%, 50%) content: "\f040" .page-content + max-width: 800px column(12) - padding: 20px 0 @media mq-normal column(9) - float: right .page-entry line-height: line-height diff --git a/themes/hexo3/source/css/style.styl b/themes/hexo3/source/css/style.styl index 1273e95a6..cb6863bdb 100644 --- a/themes/hexo3/source/css/style.styl +++ b/themes/hexo3/source/css/style.styl @@ -12,7 +12,7 @@ body .outer clearfix() - max-width: (column-width + gutter-width) * columns + gutter-width + max-width: 1400px margin: 0 auto padding: 0 gutter-width