Skip to content

Commit c492914

Browse files
wcandillonwcandillon
authored
chore(📚): docusaurus upgrade (#3005)
1 parent 817acb2 commit c492914

10 files changed

+4682
-2244
lines changed

‎apps/docs/docs/animated-images.md

+1
Original file line numberDiff line numberDiff line change
@@ -111,4 +111,5 @@ bird.decodeNextFrame();
111111
const currentFrame = bird.currentFrameDuration();
112112
// fetch the total number of frames
113113
const frameCount = bird.getFrameCount();
114+
console.log({ frameCount, currentFrame, image });
114115
```

‎apps/docs/docs/animations/hooks.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ import {useSharedValue} from "react-native-reanimated";
157157
const xforms = 100;
158158
const pos = useSharedValue({ x: 0, y: 0 });
159159
// Important to not forget the worklet directive
160-
const transforms = useRSXformBuffer(xforms, (val, i) => {
160+
const transforms = useRSXformBuffer(xforms, (val, _i) => {
161161
"worklet";
162162
const r = Math.atan2(pos.value.y, pos.value.x);
163163
val.set(Math.cos(r), Math.sin(r), 0, 0);

‎apps/docs/docs/backdrop-filters.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const BLACK_AND_WHITE = [
3131
0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
3232
];
3333

34-
const Filter = () => {
34+
export const Filter = () => {
3535
const image = useImage(require("./assets/oslo.jpg"));
3636

3737
return (
@@ -67,7 +67,7 @@ import {
6767
useImage,
6868
} from "@shopify/react-native-skia";
6969

70-
const Filter = () => {
70+
export const Filter = () => {
7171
const image = useImage(require("./assets/oslo.jpg"));
7272

7373
return (

‎apps/docs/docs/canvas/canvas.md

+1-57
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export const Demo = () => {
4747
// you can use image in an <Image> component
4848
// Or save to file using encodeToBytes -> Uint8Array
4949
const bytes = image.encodeToBytes();
50+
console.log({ bytes });
5051
}
5152
}, 1000)
5253
});
@@ -63,60 +64,3 @@ export const Demo = () => {
6364
The Canvas component supports the same properties as a View component including its [accessibility properties](https://reactnative.dev/docs/accessibility#accessible).
6465
You can make elements inside the canvas accessible as well by overlayings views on top of your canvas.
6566
This is the same recipe used for [applying gestures on specific canvas elements](https://shopify.github.io/react-native-skia/docs/animations/gestures/#element-tracking).
66-
67-
<!--
68-
## Offscreen rendering
69-
70-
It is also possible directly possible to get an image directly from a drawing using `drawAsImage`.
71-
72-
```tsx twoslash
73-
import {drawAsImage, Circle, Canvas, Image} from "@shopify/react-native-skia";
74-
75-
const width = 256;
76-
const height = 256;
77-
const r = width / 2;
78-
const image = drawAsImage(
79-
<Circle r={r} cx={r} cy={r} color="lightblue" />,
80-
width,
81-
height
82-
);
83-
84-
// Now we can draw the image in a regular canvas or save it to file
85-
export const Demo = () => {
86-
return (
87-
<Canvas style={{ width, height }}>
88-
<Image image={image} x={0} y={0} width={width} height={height} />
89-
</Canvas>
90-
);
91-
};
92-
```
93-
94-
The offscreen drawing can also be done directly with the canvas API.
95-
96-
```tsx twoslash
97-
import {Skia, Circle, Canvas, Image} from "@shopify/react-native-skia";
98-
99-
const width = 256;
100-
const height = 256;
101-
const r = width / 2;
102-
const image = Skia.Surface.drawAsImage(
103-
(canvas) => {
104-
const paint = Skia.Paint();
105-
paint.setColor(Skia.Color("lightblue"));
106-
canvas.drawCircle(r, r, r, paint);
107-
},
108-
width,
109-
height
110-
);
111-
112-
// Now we can draw the image in a regular canvas or save it to file
113-
export const Demo = () => {
114-
return (
115-
<Canvas style={{ width, height }}>
116-
<Image image={image} x={0} y={0} width={width} height={height} />
117-
</Canvas>
118-
);
119-
};
120-
``` -->
121-
122-

‎apps/docs/docs/shaders/language.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ Shaders can be nested with one another.
3737
| Name | Type | Description |
3838
|:---------|:--------------------------------------------------------------------------------------------------------|:------------------------------|
3939
| source | `RuntimeEffect` | Compiled shaders |
40-
| uniforms | <code>{ [name: string]: number &#124; Vector &#124; Vector[] &#124; number[] &#124; number[][] }</code> | uniform values |
40+
| uniforms | `{ [name: string]: number &#124; Vector &#124; Vector[] &#124; number[] &#124; number[][] }` | uniform values |
4141
| children | `Shader` | Shaders to be used as uniform |
4242

4343
### Simple Shader

‎apps/docs/docusaurus.config.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
// @ts-check
22
// Note: type annotations allow type checking and IDEs autocompletion
33

4-
const lightCodeTheme = require("prism-react-renderer/themes/github");
5-
const darkCodeTheme = require("prism-react-renderer/themes/dracula");
4+
import { themes } from "prism-react-renderer";
65

76
/** @type {import('@docusaurus/types').Config} */
87
const config = {
@@ -57,12 +56,12 @@ const config = {
5756
},
5857
}),
5958
],
60-
[
61-
"docusaurus-preset-shiki-twoslash",
62-
{
63-
themes: ["min-light", "nord"],
64-
},
65-
],
59+
// [
60+
// "docusaurus-preset-shiki-twoslash",
61+
// {
62+
// themes: ["min-light", "nord"],
63+
// },
64+
// ],
6665
],
6766

6867
themeConfig:
@@ -141,8 +140,9 @@ const config = {
141140
copyright: `Copyright © ${new Date().getFullYear()} Shopify, Inc. Built with Docusaurus.`,
142141
},
143142
prism: {
144-
theme: lightCodeTheme,
145-
darkTheme: darkCodeTheme,
143+
//theme: themes.jettwaveLight,
144+
theme: themes.oneLight,
145+
darkTheme: themes.vsDark,
146146
},
147147
}),
148148
};

‎apps/docs/package.json

+12-7
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,20 @@
1313
"write-translations": "docusaurus write-translations",
1414
"write-heading-ids": "docusaurus write-heading-ids",
1515
"typecheck": "tsc",
16-
"lint": "eslint . --ext .ts,.tsx --max-warnings 0"
16+
"lint": "eslint . --ext .ts,.tsx --max-warnings 0",
17+
"test": "ts-node src/validate-twoslash.ts"
1718
},
1819
"dependencies": {
19-
"@docusaurus/core": "2.4.3",
20-
"@docusaurus/preset-classic": "2.4.3",
21-
"@mdx-js/react": "^1.6.21",
20+
"@docusaurus/core": "latest",
21+
"@docusaurus/preset-classic": "latest",
22+
"@mdx-js/react": "^3.1.0",
2223
"@shopify/react-native-skia": "workspace:*",
2324
"@svgr/webpack": "^5.5.0",
2425
"clsx": "^1.1.1",
25-
"docusaurus-preset-shiki-twoslash": "1.1.41",
2626
"expo-asset": "^10.0.6",
2727
"file-loader": "^6.2.0",
2828
"its-fine": "^1.0.8",
29-
"prism-react-renderer": "^1.2.1",
29+
"prism-react-renderer": "^2.4.1",
3030
"react": "18.3.1",
3131
"react-dom": "18.3.1",
3232
"react-native": "0.75.2",
@@ -35,10 +35,15 @@
3535
"url-loader": "^4.1.1"
3636
},
3737
"devDependencies": {
38-
"@docusaurus/module-type-aliases": "2.4.3",
38+
"@docusaurus/module-type-aliases": "latest",
3939
"@tsconfig/docusaurus": "^1.0.4",
40+
"@types/minimist": "^1.2.5",
41+
"@types/node": "^22.13.9",
4042
"eslint": "8.21.0",
4143
"eslint-config-react-native-wcandillon": "3.10.2",
44+
"minimist": "^1.2.8",
45+
"ts-morph": "^25.0.1",
46+
"ts-node": "^10.9.2",
4247
"twoslash-cli": "1.3.24",
4348
"typescript": "5.1.6"
4449
},

0 commit comments

Comments
 (0)