diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 0000000000..221e44f843 --- /dev/null +++ b/.markdownlint.json @@ -0,0 +1,20 @@ +{ + "MD033": { + "allowed_elements": [ + "author-details", + "view-source", + "img", + "text-tester", + "symbol-tester-width", + "symbol-tester-area", + "rule-tester", + "rect-tester", + "path-tester", + "line-tester", + "group-tester", + "area-tester-vertical", + "area-tester-horizontal", + "arc-tester" + ] + } +} diff --git a/.vscode/launch.json b/.vscode/launch.json index 0ceed919ae..00f430b0c6 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -1,22 +1,44 @@ { - // Use IntelliSense to learn about possible attributes. - // Hover to view descriptions of existing attributes. - // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 - "version": "0.2.0", - "configurations": [ - { - "type": "chrome", - "request": "attach", - "name": "Attach to Chrome", - "port": 9222, - "webRoot": "${workspaceFolder}" - }, - { - "type": "chrome", - "request": "launch", - "name": "Launch Chrome against localhost", - "url": "http://localhost:6006", - "webRoot": "${workspaceFolder}" - } - ] -} \ No newline at end of file + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "attach", + "name": "Attach to Chrome", + "port": 9222, + "webRoot": "${workspaceFolder}" + }, + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:6006", + "webRoot": "${workspaceFolder}" + }, + { + "name": "Gatsby develop", + "type": "node", + "request": "launch", + "protocol": "inspector", + "program": "${workspaceRoot}/packages/docs/docsite/node_modules/gatsby/dist/bin/gatsby", + "args": ["develop"], + "stopOnEntry": false, + "runtimeArgs": ["--nolazy"], + "sourceMaps": false + }, + { + "name": "Gatsby build", + "type": "node", + "request": "launch", + "protocol": "inspector", + "program": "${workspaceRoot}/packages/docs/docsite/node_modules/gatsby/dist/bin/gatsby", + "args": ["build"], + "stopOnEntry": false, + "runtimeArgs": ["--nolazy"], + "sourceMaps": false + } + ] +} diff --git a/package.json b/package.json index 68ab4899a0..9d0bcc1981 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ "start:packages": "lerna run start --parallel --stream", "test:packages": "lerna run test --stream", "release:packages": "lerna run release --stream", - "lint": "eslint . --ext .js,.ts,.jsx,.tsx", + "lint:js": "eslint . --ext .js,.ts,.jsx,.tsx", + "lint:md": "markdownlint 'packages/docs/docsite/content/markdown/**/*.md'", + "lint": "run-s lint:*", "unit_test": "jest --coverage --ci", "test": "run-s lint build unit_test test:packages", "publish_libs": "lerna publish", @@ -44,6 +46,7 @@ "jest": "^24.9.0", "jest-html": "^1.5.0", "lerna": "^3.16.4", + "markdownlint-cli": "^0.18.0", "npm-run-all": "^4.1.5", "prettier": "^1.18.2", "pretty-quick": "^1.11.1", diff --git a/packages/docs/docsite/content/markdown/documentation/00_introduction.md b/packages/docs/docsite/content/markdown/documentation/00_introduction.md index 00291c61d9..00fff149be 100644 --- a/packages/docs/docsite/content/markdown/documentation/00_introduction.md +++ b/packages/docs/docsite/content/markdown/documentation/00_introduction.md @@ -1,17 +1,29 @@ --- -title: 'Introduction' -path: '/documentation/introduction' +title: Introduction +path: /documentation/introduction order: 0 --- -# Introduction +## Introduction -_chart-parts_ is a flexible [Grammar-of-Graphics](https://www.springer.com/us/book/9780387245447) rendering pipeline designed for application developers. +_chart-parts_ is a flexible +[Grammar-of-Graphics](https://www.springer.com/us/book/9780387245447) +rendering pipeline designed for application developers. -## Project Vision +### Project Vision -In his seminal book _The Grammar of Graphics_, Leland Wilkinson envisioned a system of charting components and data-flows to support charts. There have been several systems that have implemented these ideas, such as [Vega](http://vega.github.io/), [Vega-Lite](https://vega.github.io/vega-lite/) and [Altair](https://altair-viz.github.io/). +In his seminal book _The Grammar of Graphics_, Leland Wilkinson envisioned a +system of charting components and data-flows to support charts. There have been +several systems that have implemented these ideas, such as +[Vega](http://vega.github.io/), [Vega-Lite](https://vega.github.io/vega-lite/) +and [Altair](https://altair-viz.github.io/). ![Wilkinson's Book](/images/wilkinson_book.png) -The vision of `chart-parts` is to support the _rendering phases_ of Wilkinson's pipeline in a flexible, architecture-agnostic way while dovetailing nicely with React. To date, implementations of the _Grammar of Graphics_ have tended to exist as closed systems. While a closed system can be useful for certain users, and for certain abstraction levels, we believe that a closed graphical system should be built on top of an open graphics system to allow for maximum architectural flexibility. +The vision of `chart-parts` is to support the _rendering phases_ of +Wilkinson's pipeline in a flexible, architecture-agnostic way while +dovetailing nicely with React. To date, implementations of the +_Grammar of Graphics_ have tended to exist as closed systems. While a closed +system can be useful for certain users, and for certain abstraction levels, we +believe that a closed graphical system should be built on top of an open +graphics system to allow for maximum architectural flexibility. diff --git a/packages/docs/docsite/content/markdown/documentation/00_introduction_architecture.md b/packages/docs/docsite/content/markdown/documentation/00_introduction_architecture.md index 18d58e7512..22c06a4d77 100644 --- a/packages/docs/docsite/content/markdown/documentation/00_introduction_architecture.md +++ b/packages/docs/docsite/content/markdown/documentation/00_introduction_architecture.md @@ -1,14 +1,26 @@ --- -title: 'Architecture' -path: '/documentation/introduction/architecture' +title: Architecture +path: /documentation/introduction/architecture order: 2 --- ## Architecture -Creating charts is a process similar to compiling executable programs from source code. In a compilation process, there are two distinct phases "frontend compilation" and "backend compilation". These compilation phases use a generic representation known as an _Abstract Syntax Tree_ (AST) to communicate the structural representation of the source code. The frontend turns source code into this abstract representation, and the backend turns this abstract representation into executable software. - -The charting process is very similar. In charting, our notion of an AST comes from the [Vega Scenegraph](https://github.com/vega/vega-scenegraph). Vega's scenegraph is a plain Javascript object that is the result of binding a charting specification to user data. The scenegraph is then handled by rendering components to emit charts for users. We believe that the scenegraph specification is a useful abstraction that should allow any number of front-ends or back-ends to interact with, much like how modern compilers work. +Creating charts is a process similar to compiling executable programs from +source code. In a compilation process, there are two distinct phases "frontend +compilation" and "backend compilation". These compilation phases use a generic +representation known as an _Abstract Syntax Tree_ (AST) to communicate the +structural representation of the source code. The frontend turns source code +into this abstract representation, and the backend turns this abstract +representation into executable software. + +The charting process is very similar. In charting, our notion of an AST comes +from the [Vega Scenegraph](https://github.com/vega/vega-scenegraph). Vega's +scenegraph is a plain Javascript object that is the result of binding a +charting specification to user data. The scenegraph is then handled by +rendering components to emit charts for users. We believe that the scenegraph +specification is a useful abstraction that should allow any number of +front-ends or back-ends to interact with, much like how modern compilers work. ### Architecture Diagram @@ -16,16 +28,26 @@ The charting process is very similar. In charting, our notion of an AST comes fr ### Frontend Charting Components -The front-end of our charting system is comprised of everything required to turn data into a Scenegraph. The frontend consists primarily of: +The front-end of our charting system is comprised of everything required to +turn data into a Scenegraph. The frontend consists primarily of: - A _SceneBuilder_ API that is used to create scene specifications. -- A _React Renderless_ component set that is used as a convenience for the SceneNodeBuilder API. -- A _Scene Generator_ that binds a scene specification to user data and emits Scenegraph objects. +- A _React Renderless_ component set that is used as a convenience for the + SceneNodeBuilder API. +- A _Scene Generator_ that binds a scene specification to user data and emits + Scenegraph objects. ### Backend Charting Components -The goal of the backend charting components is to translate the Scenegraph object into an output that is viewable by users. Our goal is to support several rendering options, from dom-based SVG to more advanced WebGL rendering. +The goal of the backend charting components is to translate the Scenegraph +object into an output that is viewable by users. Our goal is to support +several rendering options, from dom-based SVG to more advanced WebGL rendering. #### SVG Renderers -We support (or plan to support) of number of SVG-based output rendering options. Currently there is support for rendering SVG in **React-DOM** and **React-Native-SVG**. SVG-based renderers operate by first translating the scenegraph into a _Virtual SVG_, which is a virtual-dom of SVG-based nodes. This is then translated into any svg-based output. Our react-based outputs emit React virtual-dom based on whatever SVG elements are appropriate for the platform. +We support (or plan to support) of number of SVG-based output rendering +options. Currently there is support for rendering SVG in **React-DOM** and +**React-Native-SVG**. SVG-based renderers operate by first translating the +scenegraph into a _Virtual SVG_, which is a virtual-dom of SVG-based nodes. +This is then translated into any svg-based output. Our react-based outputs emit +React virtual-dom based on whatever SVG elements are appropriate for the platform. diff --git a/packages/docs/docsite/content/markdown/documentation/00_introduction_background.md b/packages/docs/docsite/content/markdown/documentation/00_introduction_background.md index dd3626572b..3ac5ec88ed 100644 --- a/packages/docs/docsite/content/markdown/documentation/00_introduction_background.md +++ b/packages/docs/docsite/content/markdown/documentation/00_introduction_background.md @@ -1,22 +1,38 @@ --- -title: 'History & Related Work' -path: '/documentation/introduction/background' +title: History & Related Work +path: /documentation/introduction/background order: 1 --- ## Mark-Based Visualization Systems -Mark-based visualization systems implement a concept known as the _Grammar of Graphics_. These systems are built on the analogy that graphical elements are to charting as words are to prose, and they are constructed of a "language" of fundamental charting elements. These charting elements are described at a higher level than raw graphics primitives. +Mark-based visualization systems implement a concept known as the +_Grammar of Graphics_. These systems are built on the analogy that graphical +elements are to charting as words are to prose, and they are constructed of a +"language" of fundamental charting elements. These charting elements are +described at a higher level than raw graphics primitives. -In _The Grammar of Graphics_, Leland Wilkinson envisions a sequenced pipeline of steps that are common to creating charts: including data transformations, scale applications, mark binding, and rendering of marks and guides. +In _The Grammar of Graphics_, Leland Wilkinson envisions a sequenced pipeline +of steps that are common to creating charts: including data transformations, +scale applications, mark binding, and rendering of marks and guides. ![Leland Wilkinson's Grammar of Graphics Pipeline](/images/pipeline.png) -### Vega -Mark-based systems are common in data-visualization research, but are relatively rare in practice. The most notable implementations of these systems presently are [Vega](http://vega.github.io/) and systems based on Vega such as [Vega-Lite](https://vega.github.io/vega-lite/) and [Altair](https://altair-viz.github.io/). +### Vega -Vega's mark-based abstraction is excellent, but there are some design issues with its API that make it suboptimal for integrating into applications: +Mark-based systems are common in data-visualization research, but are +relatively rare in practice. The most notable implementations of these systems +presently are [Vega](http://vega.github.io/) and systems based on Vega such as +[Vega-Lite](https://vega.github.io/vega-lite/) +and [Altair](https://altair-viz.github.io/). -- The pure-declarative nature of the JSON-specifications can be cumbersome to work with. -- The signal/state system of Vega allows for the observation and mutation of chart state, but application developers often want to control their own state and have control over what happens with events. -- The rendering engine is browser-dependent, precluding it from being used in native contexts. +Vega's mark-based abstraction is excellent, but there are some design issues +with its API that make it suboptimal for integrating into applications: + +- The pure-declarative nature of the JSON-specifications can be cumbersome to + work with. +- The signal/state system of Vega allows for the observation and mutation of + chart state, but application developers often want to control their own state + and have control over what happens with events. +- The rendering engine is browser-dependent, precluding it from being used in + native contexts. diff --git a/packages/docs/docsite/content/markdown/documentation/00_introduction_problem.md b/packages/docs/docsite/content/markdown/documentation/00_introduction_problem.md index 7523325ef7..f07f944e24 100644 --- a/packages/docs/docsite/content/markdown/documentation/00_introduction_problem.md +++ b/packages/docs/docsite/content/markdown/documentation/00_introduction_problem.md @@ -1,13 +1,25 @@ --- -title: 'The Missing Abstraction' -path: '/documentation/introduction/missing_abstraction' +title: The Missing Abstraction +path: /documentation/introduction/missing_abstraction order: 0 --- ## The Missing Abstraction of Charting -Charting is a common and complex problem. Charting libraries are often implemented with the most common visualizations and use-cases in mind. When a developer wants to augment a chart or make something slightly out-of-the-box, such as a mean line in a bar chart, it's often necessary to eject out of the charting library and work directly with a 2D rendering API such as _svg_, _canvas_ or _webgl_. Additionally, charting libraries are often browser-dependent, which precludes the ability to abstractly describe charts independently of platform. +Charting is a common and complex problem. Charting libraries are often +implemented with the most common visualizations and use-cases in mind. When a +developer wants to augment a chart or make something slightly out-of-the-box, +such as a mean line in a bar chart, it's often necessary to eject out of the +charting library and work directly with a 2D rendering API such as _svg_, +_canvas_ or _webgl_. Additionally, charting libraries are often +browser-dependent, which precludes the ability to abstractly describe charts +independently of platform. ![The missing abstraction of charting](/images/missing_abstraction.png) -We believe that the notion of a _Grammar of Graphics_, sometimes referred to as _mark-based visualization_, has been proved in many contexts to be an elegant way to describe expressive, beautiful charts that are not as constrained by the charting library that is selected. Moreover, this level of abstraction is easier to develop software at than low-level graphics libraries, and is not bound a-priori to any platform. +We believe that the notion of a _Grammar of Graphics_, sometimes referred to as +_mark-based visualization_, has been proved in many contexts to be an elegant +way to describe expressive, beautiful charts that are not as constrained by +the charting library that is selected. Moreover, this level of abstraction is +easier to develop software at than low-level graphics libraries, and is not +bound a-priori to any platform. diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts.md b/packages/docs/docsite/content/markdown/documentation/01_concepts.md index 60f6773b1e..af4c13ba1e 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts.md @@ -1,14 +1,17 @@ --- -title: 'Concepts' -path: '/documentation/concepts' +title: Concepts +path: /documentation/concepts order: 1 --- ## Key Concepts -In this section we will describe, at overview-level, the key concepts that are used to create charts using chart-parts. These concepts will likely be familiar to people with a background in data-visulization, especially if they have used mark-based visulization systems before. +In this section we will describe, at overview-level, the key concepts that are +used to create charts using chart-parts. These concepts will likely be familiar +to people with a background in data-visulization, especially if they have used +mark-based visulization systems before. -* [Scales](/documentation/concepts/scales) -* [Marks](/documentation/concepts/marks) -* [Axes](/documentation/concepts/axes) -* [View Nesting](/documentation/concepts/view_nesting) \ No newline at end of file +- [Scales](/documentation/concepts/scales) +- [Marks](/documentation/concepts/marks) +- [Axes](/documentation/concepts/axes) +- [View Nesting](/documentation/concepts/view_nesting) diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_axes.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_axes.md index a8df52dc7f..34dcb34ed2 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_axes.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_axes.md @@ -1,6 +1,6 @@ --- -title: 'Axes' -path: '/documentation/concepts/axes' +title: Axes +path: /documentation/concepts/axes order: 2 --- @@ -8,6 +8,11 @@ order: 2 ![Bar Chart](/images/barchart.png) -Axes are a common feature of charts where we can understand the encoding of a dimension in the view-space. Our system provides the ability to create Axes with a chart orientation (Top, Bottom, Left, Right) that are bound to a scale. For more information on creating scales, see the [Client API](/documentation/apis) section. +Axes are a common feature of charts where we can understand the encoding of a +dimension in the view-space. Our system provides the ability to create Axes +with a chart orientation (Top, Bottom, Left, Right) that are bound to a scale. +For more information on creating scales, see the +[Client API](/documentation/apis) section. -Axes can be constructed with a variety of options, including tick and label parameterization. \ No newline at end of file +Axes can be constructed with a variety of options, including tick and label +parameterization. diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks.md index fc30bb9a50..1717f9f346 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks.md @@ -1,24 +1,32 @@ --- -title: 'Marks' -path: '/documentation/concepts/marks' +title: Marks +path: /documentation/concepts/marks order: 1 --- ## Marks -_Marks_ are a key concept in chart-parts, and any system implementing a _grammar-of-graphics_. Marks are the fundamental building blocks of these "grammars". Marks' relation to charts are analagous to words' relationship to text. +_Marks_ are a key concept in chart-parts, and any system implementing a +_grammar-of-graphics_. Marks are the fundamental building blocks of these +"grammars". Marks' relation to charts are analagous to words' relationship to +text. ![Mark-to-word Analogy](/images/analogy.png) ### Mark Parameterization -Marks often have multiple parameters to describe how they appear. For example, to describe a rectangle, one needs at a minumum: (height, width, (x,y) position, and color). +Marks often have multiple parameters to describe how they appear. For example, +to describe a rectangle, one needs at a minumum: (height, width, (x,y) +position, and color). Mark Encoding Example ### Encoding Mark Parameters -In our system, when we bind these parameters to our data, this is called an _encoding_. When we encode a parameter, we create an instance of the mark for each row in our data table, and parameterize the mark against that data context. +In our system, when we bind these parameters to our data, this is called an +_encoding_. When we encode a parameter, we create an instance of the mark for +each row in our data table, and parameterize the mark against that data +context. #### Renderless API @@ -48,14 +56,18 @@ rect() }) ``` -In the above examples we specify an object where the keys are _parameter names_ (e.g _x_, _y_, _height_, _width_, and _fill_) and the values are _encoding functions_. +In the above examples we specify an object where the keys are _parameter names_ +(e.g _x_, _y_, _height_, _width_, and _fill_) and the values are _encoding functions_. Encoding functions have the following signature: - **_encode_(_data_: MarkData, _scales_: Scales)** - - **data**: this parameter contains the data context for binding the mark. This contains the following properties: + - **data**: this parameter contains the data context for binding the mark. + This contains the following properties: - **d**: The current datum (row) in the bound table that this mark is reflecting - **index**: The index of the current row in its table - **data**: the table the current d is a member of - - **tables**: An object where the keys are the names of all available tables and the values are the data-tables. - - **scales**: an object where the keys are the names of the available scales and the values are the scales. + - **tables**: An object where the keys are the names of all available + tables and the values are the data-tables. + - **scales**: an object where the keys are the names of the available scales + and the values are the scales. diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_arc.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_arc.md index 831caba9cc..f509297678 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_arc.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_arc.md @@ -1,9 +1,9 @@ --- -title: 'Arc Mark' -path: '/documentation/concepts/marks/arc' +title: Arc Mark +path: /documentation/concepts/marks/arc order: 0 --- ## Arc - \ No newline at end of file + diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_area.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_area.md index ac196a4e50..8bb690359e 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_area.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_area.md @@ -1,13 +1,19 @@ --- -title: 'Area Mark' -path: '/documentation/concepts/marks/area' +title: Area Mark +path: /documentation/concepts/marks/area order: 1 --- ## Area ### Vertical Mode + +Area tester in vertical mode: + ### Horizontal Mode + +Area tester in horizontal mode: + diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_group.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_group.md index 086af4cedb..eb49725b43 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_group.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_group.md @@ -1,9 +1,9 @@ --- -title: 'Group Mark' -path: '/documentation/concepts/marks/group' +title: Group Mark +path: /documentation/concepts/marks/group order: 2 --- ## Group - \ No newline at end of file + diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_line.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_line.md index 2a8627f1e9..64f7032fd2 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_line.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_line.md @@ -1,9 +1,9 @@ --- -title: 'Line Mark' -path: '/documentation/concepts/marks/line' +title: Line Mark +path: /documentation/concepts/marks/line order: 4 --- ## Line - \ No newline at end of file + diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_path.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_path.md index 163be46651..92db55607c 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_path.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_path.md @@ -1,9 +1,9 @@ --- -title: 'Path Mark' -path: '/documentation/concepts/marks/path' +title: Path Mark +path: /documentation/concepts/marks/path order: 5 --- ## Path - \ No newline at end of file + diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_rect.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_rect.md index b276094d2c..d8d4a70f29 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_rect.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_rect.md @@ -1,9 +1,9 @@ --- -title: 'Rect Mark' -path: '/documentation/concepts/marks/rect' +title: Rect Mark +path: /documentation/concepts/marks/rect order: 6 --- ## Rect - \ No newline at end of file + diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_rule.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_rule.md index ef63e8703e..def808d214 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_rule.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_rule.md @@ -1,9 +1,9 @@ --- -title: 'Rule Mark' -path: '/documentation/concepts/marks/rule' +title: Rule Mark +path: /documentation/concepts/marks/rule order: 7 --- ## Rule - \ No newline at end of file + diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_symbol.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_symbol.md index a615b61175..a4767c316f 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_symbol.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_symbol.md @@ -1,15 +1,17 @@ --- -title: 'Symbol Mark' -path: '/documentation/concepts/marks/symbol' +title: Symbol Mark +path: /documentation/concepts/marks/symbol order: 10 --- ## Symbol ### Using Size -_Size describes the area of the symbol_ + +Size describes the area of the symbol ### Using Width - \ No newline at end of file + + diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_text.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_text.md index 3b60c41074..a6c02768bd 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_text.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_marks_text.md @@ -1,9 +1,9 @@ --- -title: 'Text Mark' -path: '/documentation/concepts/marks/text' +title: Text Mark +path: /documentation/concepts/marks/text order: 9 --- ## Text - \ No newline at end of file + diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_scales.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_scales.md index ffea34ac68..900377aa4e 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_scales.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_scales.md @@ -1,35 +1,46 @@ --- -title: 'Scales' -path: '/documentation/concepts/scales' +title: Scales +path: /documentation/concepts/scales order: 0 --- ## Scales -Scales are a construct that allow us to translate values from a source domain into a target domain. Practically, what this means is that we can translate values from our data into values that are shown to users, namely screen coordinates, colors, etc.. +Scales are a construct that allow us to translate values from a source domain +into a target domain. Practically, what this means is that we can translate +values from our data into values that are shown to users, namely screen +coordinates, colors, etc.. -Scales are based on d3 scales, and assume basic familiarity with how they operate. +Scales are based on d3 scales, and assume basic familiarity with how they +operate. Here are some resources regarding d3 scales that may he helpful: -* [d3-scale Github repository](https://github.com/d3/d3-scale) -* [d3-scale-chromatic Github repository](https://github.com/d3/d3-scale-chromatic) -* [_Introducing d3-scale_ by Mike Bostock](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f) + +- [d3-scale Github repository](https://github.com/d3/d3-scale) +- [d3-scale-chromatic Github repository](https://github.com/d3/d3-scale-chromatic) +- [_Introducing d3-scale_ by Mike Bostock](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f) ## Supported Scale Types -These are the basic scale types supported by the system. More details about using and creating them can be found in the [Client APIs](/documentation/apis) documentation section. + +These are the basic scale types supported by the system. More details about +using and creating them can be found in the [Client APIs](/documentation/apis) +documentation section. ### Quantitative -* Linear -* Log -* Pow -* Sequential -* Sqrt -* Time -* UTC + +- Linear +- Log +- Pow +- Sequential +- Sqrt +- Time +- UTC ### Discrete -* band -* ordinal -* point -In our system, each created scale has a name. This allows us to reference the scale when we are defining [mark encodings](/documentation/concepts/marks). \ No newline at end of file +- band +- ordinal +- point + +In our system, each created scale has a name. This allows us to reference the +scale when we are defining [mark encodings](/documentation/concepts/marks). diff --git a/packages/docs/docsite/content/markdown/documentation/01_concepts_view_nesting.md b/packages/docs/docsite/content/markdown/documentation/01_concepts_view_nesting.md index 60a75a12a3..78805297e7 100644 --- a/packages/docs/docsite/content/markdown/documentation/01_concepts_view_nesting.md +++ b/packages/docs/docsite/content/markdown/documentation/01_concepts_view_nesting.md @@ -1,28 +1,38 @@ --- -title: 'View Nesting' -path: '/documentation/concepts/view_nesting' +title: View Nesting +path: /documentation/concepts/view_nesting order: 3 --- ## View Nesting -A common task in charting is to divide the view-space into separate sub-charts. There are a variety of reasons we may want to do this. +A common task in charting is to divide the view-space into separate sub-charts. +There are a variety of reasons we may want to do this. -- Rendering different chart types in adjacent areas to focus on different aspects of the data -- Rendering a detail view and an overview to allow brush-selection of what's show in detail +- Rendering different chart types in adjacent areas to focus on different + aspects of the data +- Rendering a detail view and an overview to allow brush-selection of what's + show in detail - Data faceting and small-multiple views View Nesting -To support this, our view model supports the idea of recursively splitting view areas based on data-faceting or manual definition. +To support this, our view model supports the idea of recursively splitting +view areas based on data-faceting or manual definition. ## Group Marks -**Group** type marks are how we split views into sub-views. Each group instance provides a localized view-space to marks nested within it. Groups, like any other mark type, can be bound rows in a table or defined as singleton instances. When groups are data-bound they may optionally define a "facet" parameter to facet the source data table. +**Group** type marks are how we split views into sub-views. Each group +instance provides a localized view-space to marks nested within it. Groups, +like any other mark type, can be bound rows in a table or defined as singleton +instances. When groups are data-bound they may optionally define a "facet" +parameter to facet the source data table. ### Singletons -Any mark be specified as a _singleton_ by not providing a table or faceting option, in which case it is unbound to a data-table and emits only a single item. +Any mark be specified as a _singleton_ by not providing a table or faceting +option, in which case it is unbound to a data-table and emits only a single +item. ```js group() /* no tabledefined */ @@ -30,7 +40,12 @@ group() /* no tabledefined */ ### Faceting -Groups may specify a **facet** value that describes how to facet incoming data. In this case, the data is partitioned into a set of sub-tables, each representing a view of the source table, and one group item is emitted per each data partition. When faceting is used, the data partition is given a name and provided to child marks so that they can render based on the faceted view of the data the group provides. +Groups may specify a **facet** value that describes how to facet incoming data. +In this case, the data is partitioned into a set of sub-tables, each +representing a view of the source table, and one group item is emitted per each +data partition. When faceting is used, the data partition is given a name and +provided to child marks so that they can render based on the faceted view of +the data the group provides. ```js group() @@ -44,5 +59,10 @@ group() #### Faceting Specification Object - **name**: The name of the facet table to provide to child-marks. -- **partitionOn**: A string describing a field to use as a _partition key_, or a function that returns a _partition key_ for each row of the incoming data set. The partition key is used to separate the data rows into different partitions. -- **transform**: A function that accepts a partition of data and performs final transformation before providing it to chlidren. Clients may use this to define aggregation, layout-transformations, or any other augmentation that is necessary for child marks to render. Default is an identity function. +- **partitionOn**: A string describing a field to use as a _partition key_, or + a function that returns a _partition key_ for each row of the incoming data + set. The partition key is used to separate the data rows into different partitions. +- **transform**: A function that accepts a partition of data and performs final + transformation before providing it to chlidren. Clients may use this to + define aggregation, layout-transformations, or any other augmentation that is + necessary for child marks to render. Default is an identity function. diff --git a/packages/docs/docsite/content/markdown/documentation/02_apis.md b/packages/docs/docsite/content/markdown/documentation/02_apis.md index 11f9f11afd..6bda41d1ac 100644 --- a/packages/docs/docsite/content/markdown/documentation/02_apis.md +++ b/packages/docs/docsite/content/markdown/documentation/02_apis.md @@ -1,12 +1,13 @@ --- -title: 'Client APIs' -path: '/documentation/apis' +title: Client APIs +path: /documentation/apis order: 2 --- ## Client APIs -This section describes the client APIs used to describe charting specifications and assemble charting pipelines. +This section describes the client APIs used to describe charting specifications +and assemble charting pipelines. - [SceneNodeBuilder API](/documentation/apis/builder) - [React API](/documentation/apis/react) diff --git a/packages/docs/docsite/content/markdown/documentation/02_apis_builder.md b/packages/docs/docsite/content/markdown/documentation/02_apis_builder.md index c084c6a144..b76483ee90 100644 --- a/packages/docs/docsite/content/markdown/documentation/02_apis_builder.md +++ b/packages/docs/docsite/content/markdown/documentation/02_apis_builder.md @@ -1,6 +1,6 @@ --- -title: 'SceneNodeBuilder' -path: '/documentation/apis/builder' +title: SceneNodeBuilder +path: /documentation/apis/builder order: 1 --- @@ -8,9 +8,14 @@ order: 1 **Package**: [_@chart-parts/builder_](/apidocs/client/builder/index.html) -The Scene Builder API is a set of classes that implement a [builder pattern](https://en.wikipedia.org/wiki/Builder_pattern) for describing charting scene specifications. +The Scene Builder API is a set of classes that implement a +[builder pattern](https://en.wikipedia.org/wiki/Builder_pattern) +for describing charting scene specifications. -The top-level [_scene_](/apidocs/client/builder/modules/_index_.html#scene) function can be used to create a new scene and start the building process. The other top-level functions are factory functions for individual [marks](/documentation/concepts/marks): +The top-level [_scene_](/apidocs/client/builder/modules/_index_.html#scene) +function can be used to create a new scene and start the building process. +The other top-level functions are factory functions for individual +[marks](/documentation/concepts/marks): - [_arc_](/apidocs/client/builder/modules/_index_.html#arc) - [_area_](/apidocs/client/builder/modules/_index_.html#area) @@ -19,5 +24,5 @@ The top-level [_scene_](/apidocs/client/builder/modules/_index_.html#scene) func - [_line_](/apidocs/client/builder/modules/_index_.html#line) - [_path_](/apidocs/client/builder/modules/_index_.html#path) - [_rect_](/apidocs/client/builder/modules/_index_.html#rect) -- [_rule_](/apidocs/client/builder/modules/_index_.html#rule) and +- [_rule_](/apidocs/client/builder/modules/_index_.html#rule) - [_shape_](/apidocs/client/builder/modules/_index_.html#shape) diff --git a/packages/docs/docsite/content/markdown/documentation/02_apis_interfaces.md b/packages/docs/docsite/content/markdown/documentation/02_apis_interfaces.md index 6e80a42c2b..51ed979bcb 100644 --- a/packages/docs/docsite/content/markdown/documentation/02_apis_interfaces.md +++ b/packages/docs/docsite/content/markdown/documentation/02_apis_interfaces.md @@ -1,6 +1,6 @@ --- -title: 'Interfaces' -path: '/documentation/apis/interfaces' +title: Interfaces +path: /documentation/apis/interfaces order: 0 --- @@ -8,4 +8,10 @@ order: 0 **Package**: [_@chart-parts/interfaces_](/apidocs/client/interfaces/index.html) -The key typescript interface that are used in chart-parts are defined in the [_@chart-parts/interfaces_](/apidocs/client/interfaces/index.html) project. These contain enumerations for potential mark values, virtual-dom specification, and other useful definitions. If you're using TypeScript, you may need to import types from this package in addition to either the [_SceneBuilder_](/apidocs/client/builder/index.html) or [_React_](/apidocs/client/react/index.html) APIs. +The key typescript interface that are used in chart-parts are defined in the +[_@chart-parts/interfaces_](/apidocs/client/interfaces/index.html) project. +These contain enumerations for potential mark values, virtual-dom +specification, and other useful definitions. If you're using TypeScript, you +may need to import types from this package in addition to either the +[_SceneBuilder_](/apidocs/client/builder/index.html) or +[_React_](/apidocs/client/react/index.html) APIs. diff --git a/packages/docs/docsite/content/markdown/documentation/02_apis_react.md b/packages/docs/docsite/content/markdown/documentation/02_apis_react.md index ad2503bffb..ae2926da23 100644 --- a/packages/docs/docsite/content/markdown/documentation/02_apis_react.md +++ b/packages/docs/docsite/content/markdown/documentation/02_apis_react.md @@ -1,6 +1,6 @@ --- -title: 'React' -path: '/documentation/apis/react' +title: React +path: /documentation/apis/react order: 2 --- @@ -8,8 +8,9 @@ order: 2 **Package**: [_@chart-parts/react_](/apidocs/client/react/index.html) -The React API contains a set of React Component classes for describing charting scene specifications. -These components use the Renderless Component pattern to interact with the SceneNodeBuilder API. +The React API contains a set of React Component classes for describing charting +scene specifications. These components use the Renderless Component pattern to +interact with the SceneNodeBuilder API. ## Components diff --git a/packages/docs/docsite/content/markdown/documentation/03_examples.md b/packages/docs/docsite/content/markdown/documentation/03_examples.md index 8da3c85617..fa73719262 100644 --- a/packages/docs/docsite/content/markdown/documentation/03_examples.md +++ b/packages/docs/docsite/content/markdown/documentation/03_examples.md @@ -1,6 +1,6 @@ --- -title: 'Examples' -path: '/documentation/examples' +title: Examples +path: /documentation/examples order: 3 --- diff --git a/packages/docs/docsite/content/markdown/documentation/03_examples_area_chart.md b/packages/docs/docsite/content/markdown/documentation/03_examples_area_chart.md index 95e002cbeb..fe8845f12f 100644 --- a/packages/docs/docsite/content/markdown/documentation/03_examples_area_chart.md +++ b/packages/docs/docsite/content/markdown/documentation/03_examples_area_chart.md @@ -1,6 +1,6 @@ --- -title: 'Area Chart' -path: '/documentation/examples/area_chart' +title: Area Chart +path: /documentation/examples/area_chart order: 4 --- diff --git a/packages/docs/docsite/content/markdown/documentation/03_examples_barchart.md b/packages/docs/docsite/content/markdown/documentation/03_examples_barchart.md index ea4f8c82e8..f8a8760985 100644 --- a/packages/docs/docsite/content/markdown/documentation/03_examples_barchart.md +++ b/packages/docs/docsite/content/markdown/documentation/03_examples_barchart.md @@ -1,6 +1,6 @@ --- -title: 'Bar Chart' -path: '/documentation/examples/bar_chart' +title: Bar Chart +path: /documentation/examples/bar_chart order: 0 --- diff --git a/packages/docs/docsite/content/markdown/documentation/03_examples_barchart_with_mean.md b/packages/docs/docsite/content/markdown/documentation/03_examples_barchart_with_mean.md index 576a6cd9e4..ff33fa64f7 100644 --- a/packages/docs/docsite/content/markdown/documentation/03_examples_barchart_with_mean.md +++ b/packages/docs/docsite/content/markdown/documentation/03_examples_barchart_with_mean.md @@ -1,6 +1,6 @@ --- -title: 'Bar Chart with Mean' -path: '/documentation/examples/bar_chart_with_mean' +title: Bar Chart with Mean +path: /documentation/examples/bar_chart_with_mean order: 8 --- diff --git a/packages/docs/docsite/content/markdown/documentation/03_examples_grouped_barchart.md b/packages/docs/docsite/content/markdown/documentation/03_examples_grouped_barchart.md index 574a1188db..07ed74d55b 100644 --- a/packages/docs/docsite/content/markdown/documentation/03_examples_grouped_barchart.md +++ b/packages/docs/docsite/content/markdown/documentation/03_examples_grouped_barchart.md @@ -1,6 +1,6 @@ --- -title: 'Grouped Bar Chart' -path: '/documentation/examples/grouped_bar_chart' +title: Grouped Bar Chart +path: /documentation/examples/grouped_bar_chart order: 1 --- diff --git a/packages/docs/docsite/content/markdown/documentation/03_examples_job_voyager.md b/packages/docs/docsite/content/markdown/documentation/03_examples_job_voyager.md index 6e0ba1ada4..24dc274a6b 100644 --- a/packages/docs/docsite/content/markdown/documentation/03_examples_job_voyager.md +++ b/packages/docs/docsite/content/markdown/documentation/03_examples_job_voyager.md @@ -1,6 +1,6 @@ --- -title: 'Job Voyager' -path: '/documentation/examples/job_voyager' +title: Job Voyager +path: /documentation/examples/job_voyager order: 7 --- diff --git a/packages/docs/docsite/content/markdown/documentation/03_examples_line_chart.md b/packages/docs/docsite/content/markdown/documentation/03_examples_line_chart.md index d2b07a1045..879143aba6 100644 --- a/packages/docs/docsite/content/markdown/documentation/03_examples_line_chart.md +++ b/packages/docs/docsite/content/markdown/documentation/03_examples_line_chart.md @@ -1,6 +1,6 @@ --- -title: 'Line Chart' -path: '/documentation/examples/line_chart' +title: Line Chart +path: /documentation/examples/line_chart order: 3 --- diff --git a/packages/docs/docsite/content/markdown/documentation/03_examples_population_pyramid.md b/packages/docs/docsite/content/markdown/documentation/03_examples_population_pyramid.md index 53c3d5aee2..b9559ed97d 100644 --- a/packages/docs/docsite/content/markdown/documentation/03_examples_population_pyramid.md +++ b/packages/docs/docsite/content/markdown/documentation/03_examples_population_pyramid.md @@ -1,6 +1,6 @@ --- -title: 'Population Pyramid' -path: '/documentation/examples/population_pyramid' +title: Population Pyramid +path: /documentation/examples/population_pyramid order: 6 --- diff --git a/packages/docs/docsite/content/markdown/documentation/03_examples_stacked_area_chart.md b/packages/docs/docsite/content/markdown/documentation/03_examples_stacked_area_chart.md index 23dd0d289b..b5bfa3bcd3 100644 --- a/packages/docs/docsite/content/markdown/documentation/03_examples_stacked_area_chart.md +++ b/packages/docs/docsite/content/markdown/documentation/03_examples_stacked_area_chart.md @@ -1,6 +1,6 @@ --- -title: 'Stacked Area Chart' -path: '/documentation/examples/stacked_area_chart' +title: Stacked Area Chart +path: /documentation/examples/stacked_area_chart order: 5 --- diff --git a/packages/docs/docsite/content/markdown/documentation/03_examples_stacked_barchart.md b/packages/docs/docsite/content/markdown/documentation/03_examples_stacked_barchart.md index c977744b30..f65b262851 100644 --- a/packages/docs/docsite/content/markdown/documentation/03_examples_stacked_barchart.md +++ b/packages/docs/docsite/content/markdown/documentation/03_examples_stacked_barchart.md @@ -1,6 +1,6 @@ --- -title: 'Stacked Bar Chart' -path: '/documentation/examples/stacked_bar_chart' +title: Stacked Bar Chart +path: /documentation/examples/stacked_bar_chart order: 0 --- diff --git a/packages/docs/docsite/content/markdown/documentation/07_apidocs.md b/packages/docs/docsite/content/markdown/documentation/07_apidocs.md index 59f6fe5ae4..e664fdbb70 100644 --- a/packages/docs/docsite/content/markdown/documentation/07_apidocs.md +++ b/packages/docs/docsite/content/markdown/documentation/07_apidocs.md @@ -1,30 +1,29 @@ --- -title: 'API Documentation' -path: '/documentation/apidocs' +title: API Documentation +path: /documentation/apidocs order: 7 --- -# API Documentation +## API Documentation -## Client API Packages +### Client API Packages - [@chart-parts/react](/apidocs/client/react/index.html) - [@chart-parts/interfaces](/apidocs/client/interfaces/index.html) - [@chart-parts/builder](/apidocs/client/builder/index.html) -## Processing Pipeline Packages +### Processing Pipeline Packages - [@chart-parts/orchestrator](/apidocs/processing/orchestrator/index.html) -- [@chart-parts/scene](/apidocs/processing/scene/index.html) - [@chart-parts/scenegraph](/apidocs/processing/scenegraph/index.html) - [@chart-parts/vsvg](/apidocs/processing/vsvg/index.html) -## Renderer Implementations +### Renderer Implementations - [@chart-parts/react-svg-renderer](/apidocs/renderers/react-svg/index.html) - [@chart-parts/react-native-svg-renderer](/apidocs/renderers/react-native-svg/index.html) -## Utility Packages +### Utility Packages - [@chart-parts/scales](/apidocs/util/scales/index.html) - [@chart-parts/shapes](/apidocs/util/shapes/index.html) diff --git a/packages/docs/docsite/content/markdown/documentation/08_feedback.md b/packages/docs/docsite/content/markdown/documentation/08_feedback.md index 0298c794e5..6f0ebc7a48 100644 --- a/packages/docs/docsite/content/markdown/documentation/08_feedback.md +++ b/packages/docs/docsite/content/markdown/documentation/08_feedback.md @@ -1,11 +1,11 @@ --- -title: 'Feedback' -path: '/documentation/feedback' +title: Feedback +path: /documentation/feedback order: 8 --- ## Feedback -### Questions or Comments? +### Questions or Comments -twitter.com/darthtrevino \ No newline at end of file +twitter.com/darthtrevino diff --git a/packages/docs/docsite/content/markdown/posts/01_introducing_lib.md b/packages/docs/docsite/content/markdown/posts/01_introducing_lib.md index f224efd903..2d09fbc242 100644 --- a/packages/docs/docsite/content/markdown/posts/01_introducing_lib.md +++ b/packages/docs/docsite/content/markdown/posts/01_introducing_lib.md @@ -1,19 +1,33 @@ --- -title: 'Introducing chart-parts' +title: Introducing chart-parts date: '2018-07-18' -path: '/blog/introduction ' +path: /blog/introduction --- -# Introducing chart-parts (apologies for the late post) +## Introducing chart-parts (apologies for the late post) -By: Chris Trevino - [GitHub](https://github.com/darthtrevino) [Twitter](https://twitter.com/darthtrevino) + -Our team at Microsoft Research is passionate about making great user experiences, and often our user experiences involve making charts. One idea that we've found is particularly interesting is the [_Grammar of Graphics_](https://www.springer.com/us/book/9780387245447) by Leland Wilkinson. +Our team at Microsoft Research is passionate about making great user +experiences, and often our user experiences involve making charts. One idea +that we've found is particularly interesting is the +[_Grammar of Graphics_](https://www.springer.com/us/book/9780387245447) +by Leland Wilkinson. -Here's a [link to a talk](https://www.youtube.com/watch?v=qqffsEHKMcM) I gave at React-Conf 2018 describing the intent behind this project. There are a lot of great charting libraries in the JavaScript ecosystem - however, we wanted something more flexible, that did have an encoded taxonomy, but was less legwork than using raw d3. We surveyed the landscape of Grammar of Graphics implementations, and did not find any that suited our particular needs: Vega was the best implementation, however it's a relatively sealed system and difficult to customize and integrate with in application code. +Here's a [link to a talk](https://www.youtube.com/watch?v=qqffsEHKMcM) I gave +at React-Conf 2018 describing the intent behind this project. There are a lot +of great charting libraries in the JavaScript ecosystem - however, we wanted +something more flexible, that did have an encoded taxonomy, but was less +legwork than using raw d3. We surveyed the landscape of Grammar of Graphics +implementations, and did not find any that suited our particular needs: Vega +was the best implementation, however it's a relatively sealed system and +difficult to customize and integrate with in application code. -Our goal with chart-parts has been to make a library with the same expressiveness of Vega, but that interacted naturally in application code, particularly with React. +Our goal with chart-parts has been to make a library with the same +expressiveness of Vega, but that interacted naturally in application code, +particularly with React. -There's a lot of work left to be done, but this is an idea we're passionate about and we hope you find it useful. +There's a lot of work left to be done, but this is an idea we're passionate +about and we hope you find it useful. -Chris diff --git a/packages/docs/docsite/gatsby-node.js b/packages/docs/docsite/gatsby-node.js index 2f8a4020ea..845b53c217 100644 --- a/packages/docs/docsite/gatsby-node.js +++ b/packages/docs/docsite/gatsby-node.js @@ -8,7 +8,7 @@ const path = require('path') /** * Dynamically creates pages in the static website */ -function createPages({ actions, graphql }) { +exports.createPages = function createPages({ actions, graphql }) { const retrieveMarkdownPages = () => graphql(` { @@ -52,7 +52,7 @@ function createPages({ actions, graphql }) { }) } -function onCreateWebpackConfig({ actions }) { +exports.onCreateWebpackConfig = function onCreateWebpackConfig({ actions }) { actions.setWebpackConfig({ resolve: { alias: { @@ -66,6 +66,3 @@ function onCreateWebpackConfig({ actions }) { }, }) } - -exports.createPages = createPages -exports.onCreateWebpackConfig = onCreateWebpackConfig diff --git a/packages/docs/docsite/package.json b/packages/docs/docsite/package.json index 12db0d553c..1203026fdb 100644 --- a/packages/docs/docsite/package.json +++ b/packages/docs/docsite/package.json @@ -51,12 +51,12 @@ "clean_gatsby": "gatsby clean", "clean_generated": "rimraf apidocs static/examples", "clean": "run-p clean_generated clean_gatsby", - "build_package_docs": "run-s clean:docs gen:docs", + "build_docs": "run-s clean:docs gen:docs", "start": "gatsby develop -H 0.0.0.0", "type-check": "tsc --noEmit", "clean:docs": "rimraf static/apidocs", "gen:docs": "run-p gen:doc:*", - "gen:doc": "typedoc --theme minimal --out static/apidocs/$LIB --tsconfig ../$LIB/tsconfig.typedoc.json --ignoreCompilerErrors --excludePrivate --hideGenerator", + "gen:doc": "typedoc --theme minimal --out static/apidocs/$LIB --tsconfig ../../$LIB/tsconfig.typedoc.json --ignoreCompilerErrors --excludePrivate --hideGenerator", "gen:doc:builder": "LIB=client/builder yarn gen:doc", "gen:doc:interfaces": "LIB=client/interfaces yarn gen:doc", "gen:doc:react": "LIB=client/react yarn gen:doc", @@ -76,7 +76,7 @@ "build_static_site": "gatsby build --prefix-paths", "publish_gh_pages": "NODE_DEBUG=gh-pages gh-pages -d public -t", "clean_release": "run-s clean build release", - "release": "run-s clean process_examples build_package_docs build_static_site publish_gh_pages" + "release": "run-s clean process_examples build_docs build_static_site publish_gh_pages" }, "devDependencies": { "gh-pages": "^2.0.1", diff --git a/packages/docs/docsite/src/components/authorship.tsx b/packages/docs/docsite/src/components/authorship.tsx new file mode 100644 index 0000000000..6557700115 --- /dev/null +++ b/packages/docs/docsite/src/components/authorship.tsx @@ -0,0 +1,23 @@ +import React, { memo } from 'react' + +export interface AuthorshipProps { + name: string + twitter?: string + github?: string +} +export const Authorship: React.FC = memo( + ({ name, twitter, github }) => { + return ( + + by: {name}  + {twitter ? ( + <> + Twitter +   + + ) : null} + {github ? GitHub : null} + + ) + } +) diff --git a/packages/docs/docsite/src/components/md.ts b/packages/docs/docsite/src/components/md.ts index 5a6b3c3aa3..9fb253a97c 100644 --- a/packages/docs/docsite/src/components/md.ts +++ b/packages/docs/docsite/src/components/md.ts @@ -5,8 +5,10 @@ import markTesters from './mark-testers' import { ExampleTabs } from './example-tabs' +import { Authorship } from './authorship' export default { 'view-source': ExampleTabs, + 'author-details': Authorship, ...markTesters, } diff --git a/packages/docs/docsite/src/pages/blog.tsx b/packages/docs/docsite/src/pages/blog.tsx index 27353dd1ad..27c2c6bf9a 100644 --- a/packages/docs/docsite/src/pages/blog.tsx +++ b/packages/docs/docsite/src/pages/blog.tsx @@ -13,7 +13,6 @@ import convertGraphqlToc from '../util/convertGraphqlToc' const Blog = ({ data: { toc, latestPost } }: any) => { return ( diff --git a/packages/docs/docsite/src/templates/blogTemplate.tsx b/packages/docs/docsite/src/templates/blogTemplate.tsx index 857d8ebb48..ac2a11876f 100644 --- a/packages/docs/docsite/src/templates/blogTemplate.tsx +++ b/packages/docs/docsite/src/templates/blogTemplate.tsx @@ -12,10 +12,9 @@ import convertGraphqlToc from '../util/convertGraphqlToc' export default function Template(arg: any) { const { post, toc } = arg.data - + console.log('POST', post, toc) return ( = 1.0.0" + common-tags@^1.8.0: version "1.8.0" resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937" @@ -6564,6 +6571,11 @@ deep-extend@^0.6.0: resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac" integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA== +deep-extend@~0.5.1: + version "0.5.1" + resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.5.1.tgz#b894a9dd90d3023fbf1c55a394fb858eb2066f1f" + integrity sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w== + deep-is@~0.1.3: version "0.1.3" resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" @@ -8785,6 +8797,11 @@ get-stdin@^6.0.0: resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b" integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g== +get-stdin@~5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398" + integrity sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g= + get-stream@3.0.0, get-stream@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14" @@ -8917,7 +8934,7 @@ glob-to-regexp@^0.3.0: resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab" integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs= -glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4: +glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@~7.1.2: version "7.1.4" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255" integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A== @@ -9126,6 +9143,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3 resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02" integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q== +"graceful-readlink@>= 1.0.0": + version "1.0.1" + resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725" + integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU= + graphql-compose@^6.3.5: version "6.3.5" resolved "https://registry.yarnpkg.com/graphql-compose/-/graphql-compose-6.3.5.tgz#019a5a4441293cdf15dbe0173438a2c997017e26" @@ -11429,6 +11451,13 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA= +linkify-it@^2.0.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf" + integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw== + dependencies: + uc.micro "^1.0.1" + load-bmfont@^1.3.1, load-bmfont@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/load-bmfont/-/load-bmfont-1.4.0.tgz#75f17070b14a8c785fe7f5bee2e6fd4f98093b6b" @@ -11562,6 +11591,11 @@ lodash.debounce@4.0.8, lodash.debounce@^4.0.8: resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= +lodash.differencewith@~4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.differencewith/-/lodash.differencewith-4.5.0.tgz#bafafbc918b55154e179176a00bb0aefaac854b7" + integrity sha1-uvr7yRi1UVTheRdqALsK76rIVLc= + lodash.escaperegexp@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz#64762c48618082518ac3df4ccf5d5886dae20347" @@ -11572,6 +11606,11 @@ lodash.every@^4.6.0: resolved "https://registry.yarnpkg.com/lodash.every/-/lodash.every-4.6.0.tgz#eb89984bebc4364279bb3aefbbd1ca19bfa6c6a7" integrity sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc= +lodash.flatten@~4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f" + integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8= + lodash.flattendeep@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2" @@ -11877,6 +11916,17 @@ markdown-escapes@^1.0.0: resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.3.tgz#6155e10416efaafab665d466ce598216375195f5" integrity sha512-XUi5HJhhV5R74k8/0H2oCbCiYf/u4cO/rX8tnGkRvrqhsr5BRNU6Mg0yt/8UIx1iIS8220BNJsDb7XnILhLepw== +markdown-it@9.0.1: + version "9.0.1" + resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-9.0.1.tgz#aafe363c43718720b6575fd10625cde6e4ff2d47" + integrity sha512-XC9dMBHg28Xi7y5dPuLjM61upIGPJG8AiHNHYqIaXER2KNnn7eKnM5/sF0ImNnyoV224Ogn9b1Pck8VH4k0bxw== + dependencies: + argparse "^1.0.7" + entities "~1.1.1" + linkify-it "^2.0.0" + mdurl "^1.0.1" + uc.micro "^1.0.5" + markdown-table@^1.1.0: version "1.1.3" resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60" @@ -11890,6 +11940,29 @@ markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3: prop-types "^15.6.2" unquote "^1.1.0" +markdownlint-cli@^0.18.0: + version "0.18.0" + resolved "https://registry.yarnpkg.com/markdownlint-cli/-/markdownlint-cli-0.18.0.tgz#bd1cee72739049d42dcea5f6db0c0f57c6eb8096" + integrity sha512-mQ2zvjMLoy0P2kb9Y03SqC24WPH4fTRN0/CyCorB122c4Chg9vWJKgUKBz3KR7swpzqmlI0SYq/7Blbqe4kb2g== + dependencies: + commander "~2.9.0" + deep-extend "~0.5.1" + get-stdin "~5.0.1" + glob "~7.1.2" + js-yaml "^3.13.1" + lodash.differencewith "~4.5.0" + lodash.flatten "~4.4.0" + markdownlint "~0.16.0" + minimatch "~3.0.4" + rc "~1.2.7" + +markdownlint@~0.16.0: + version "0.16.0" + resolved "https://registry.yarnpkg.com/markdownlint/-/markdownlint-0.16.0.tgz#69f73cc755a44231fbe5dc7c37a5909cedc0ac6e" + integrity sha512-Zo+iPezP3eM6lLhKepkUw+X98H44lipIdx4d6faaugfB0+7VuDB3R0hXmx7z9F1N3/ypn46oOFgAD9iF++Ie6A== + dependencies: + markdown-it "9.0.1" + marked@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/marked/-/marked-0.7.0.tgz#b64201f051d271b1edc10a04d1ae9b74bb8e5c0e" @@ -12254,7 +12327,7 @@ minimatch@3.0.3: dependencies: brace-expansion "^1.0.0" -minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4: +minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== @@ -14577,7 +14650,7 @@ raw-loader@^2.0.0: loader-utils "^1.1.0" schema-utils "^1.0.0" -rc@^1.0.1, rc@^1.1.6, rc@^1.2.7: +rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@~1.2.7: version "1.2.8" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw== @@ -17436,6 +17509,11 @@ ua-parser-js@^0.7.18: resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098" integrity sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw== +uc.micro@^1.0.1, uc.micro@^1.0.5: + version "1.0.6" + resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac" + integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== + uglify-js@3.4.x: version "3.4.10" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"