Merge pull request #6 from Shopify/feat/documentation

Documentation

docs/.eslintrc

@@ -0,0 +1,17 @@
+{
+  "extends": "react-native-wcandillon",
+  "rules": {
+    "prefer-destructuring": [
+      "error",
+      {
+        "object": true,
+        "array": false
+      }
+    ],
+    "no-bitwise": "off",
+    "no-var": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-empty-function": "off"
+  }
+}

docs/.gitignore

@@ -0,0 +1,22 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.cache

docs/README.md

@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/blog/2019-05-28-first-blog-post.md

@@ -0,0 +1,12 @@
+---
+slug: first-blog-post
+title: First Blog Post
+authors:
+  name: Gao Wei
+  title: Docusaurus Core Team
+  url: https://github.com/wgao19
+  image_url: https://github.com/wgao19.png
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

docs/blog/2019-05-29-long-blog-post.md

@@ -0,0 +1,44 @@
+---
+slug: long-blog-post
+title: Long Blog Post
+authors: endi
+tags: [hello, docusaurus]
+---
+
+This is the summary of a very long blog post,
+
+Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
+
+<!--truncate-->
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

docs/blog/2021-08-01-mdx-blog-post.mdx

@@ -0,0 +1,20 @@
+---
+slug: mdx-blog-post
+title: MDX Blog Post
+authors: [slorber]
+tags: [docusaurus]
+---
+
+Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
+
+:::tip
+
+Use the power of React to create interactive blog posts.
+
+```js
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+```
+
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+
+:::

docs/blog/2021-08-26-welcome/index.md

@@ -0,0 +1,25 @@
+---
+slug: welcome
+title: Welcome
+authors: [slorber, yangshun]
+tags: [facebook, hello, docusaurus]
+---
+
+[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
+
+Simply add Markdown files (or folders) to the `blog` directory.
+
+Regular blog authors can be added to `authors.yml`.
+
+The blog post date can be extracted from filenames, such as:
+
+- `2019-05-30-welcome.md`
+- `2019-05-30-welcome/index.md`
+
+A blog post folder can be convenient to co-locate blog post images:
+
+![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
+
+The blog supports tags as well!
+
+**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

docs/blog/authors.yml

@@ -0,0 +1,17 @@
+endi:
+  name: Endilie Yacop Sucipto
+  title: Maintainer of Docusaurus
+  url: https://github.com/endiliey
+  image_url: https://github.com/endiliey.png
+
+yangshun:
+  name: Yangshun Tay
+  title: Front End Engineer @ Facebook
+  url: https://github.com/yangshun
+  image_url: https://github.com/yangshun.png
+
+slorber:
+  name: Sébastien Lorber
+  title: Docusaurus maintainer
+  url: https://sebastienlorber.com
+  image_url: https://github.com/slorber.png

docs/docs/animations/overview.md

@@ -0,0 +1,13 @@
+---
+id: overview
+title: Animations
+sidebar_label: Overview
+slug: /animations/overview
+---
+
+
+:::warning
+
+Under construction.
+
+:::

docs/docs/color-filters.md

@@ -0,0 +1,80 @@
+---
+id: color-filters
+title: Color Filters
+sidebar_label: Color Filters
+slug: /color-filters
+---
+
+## Color Matrix
+
+Creates a color filter using the provided color matrix.
+A playground to build color matrices is available [here](https://fecolormatrix.com/). 
+
+| Name       | Type          |  Description                               |
+|:-----------|:--------------|:-------------------------------------------|
+| value      | `number[]`    | Color Matrix (5x4)                         |
+| children?  | `ColorFilter` | Optional color filter to be applied first. |
+
+```tsx twoslash
+import { Canvas, Paint, ColorMatrix, Image } from "@shopify/react-native-skia";
+
+const MatrixColorFilter = () => {
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Paint>
+        <ColorMatrix
+          value={[
+            -0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015,
+            1.69, -0.703, 0, 0, 0, 0, 0, 1, 0,
+          ]}
+        />
+      </Paint>
+      <Image
+        x={0}
+        y={0}
+        width={256}
+        height={256}
+        source={require("./assets/oslo.jpg")}
+        fit="cover"
+      />
+    </Canvas>
+  );
+};
+```
+
+![Matrix Color Filter](assets/color-filters/matrix.png)
+
+## Blend
+
+Creates a color filter with the given color and blend mode.
+
+| Name       | Type          |  Description                                      |
+|:-----------|:--------------|:--------------------------------------------------|
+| color      | `Color`       | Color                                             |
+| mode       | `BlendMode`   | see [blend modes](paint/properties.md#blend-mode).|
+| children?  | `ColorFilter` | Optional color filter to be applied first.        |
+
+## Lerp
+
+Creates a color filter that is linearly interpolated between two other color filters.
+
+| Name      | Type          |  Description                               |
+|:----------|:--------------|:-------------------------------------------|
+| t         | `number`      | Value between 0 and 1.                     |
+| children  | `ColorFilter` | The two filters to interpolate from. |
+
+## LinearToSRGBGamma
+
+Creates a color filter that converts between linear colors and sRGB colors.
+
+| Name       | Type          |  Description                                      |
+|:-----------|:--------------|:--------------------------------------------------|
+| children?  | `ColorFilter` | Optional color filter to be applied first.        |
+
+## SRGBToLinearGamma
+
+Creates a color filter that converts between sRGB colors and linear colors.
+
+| Name       | Type          |  Description                                      |
+|:-----------|:--------------|:--------------------------------------------------|
+| children?  | `ColorFilter` | Optional color filter to be applied first.        |

docs/docs/getting-started/hello-world.md

@@ -0,0 +1,81 @@
+---
+id: hello-world
+title: Hello World
+sidebar_label: Hello World
+slug: /getting-started/hello-world
+---
+
+React Native Skia has two APIs: a declarative API available as a React Native Renderer and an imperative API backed by JSI.
+The recommended way to use this library is via the declarative API.
+Library developers may take advantage of the imperative API to provide custom features.
+
+## Declarative API
+
+### Example
+
+```tsx twoslash
+import {Canvas, Circle, Group} from "@shopify/react-native-skia";
+
+export const HelloWorld = () => {
+  const width = 256;
+  const height = 256;
+  const r = 215;
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Group blendMode="multiply">
+        <Circle cx={r} cy={r} r={r} color="cyan" />
+        <Circle cx={width - r} cy={r} r={r} color="magenta" />
+        <Circle
+          cx={width/2}
+          cy={height - r}
+          r={r}
+          color="yellow"
+        />
+      </Group>
+    </Canvas>
+  );
+};
+```
+
+### Result
+
+![Hello World](assets/helloworld.png)
+
+## Imperative API
+
+### Example
+
+```tsx twoslash
+import {Skia, BlendMode, SkiaView, useDrawCallback} from "@shopify/react-native-skia";
+
+const paint = Skia.Paint();
+paint.setAntiAlias(true);
+paint.setBlendMode(BlendMode.Multiply);
+
+export const HelloWorld = () => {
+  const width = 256;
+  const height = 256;
+  const r = 215;
+  const onDraw = useDrawCallback((canvas) => {
+    // Cyan Circle
+    const cyan = paint.copy();
+    cyan.setColor(Skia.Color("cyan"));
+    canvas.drawCircle(r, r, r, cyan);
+    // Magenta Circle
+    const magenta = paint.copy();
+    magenta.setColor(Skia.Color("magenta"));
+    canvas.drawCircle(width - r, r, r, magenta);
+    // Yellow Circle
+    const yellow = paint.copy();
+    yellow.setColor(Skia.Color("yellow"));
+    canvas.drawCircle(width/2, height - r, r, yellow);
+  });
+  return (
+    <SkiaView style={{ flex: 1 }} onDraw={onDraw} />
+  );
+};
+```
+
+### Result
+
+![Hello World](assets/helloworld.png)