Makes a contribution

.github/workflows/pr-annotations.yaml

@@ -1,4 +1,4 @@
 name: CI
 
 on:
   push:
@@ -17,7 +17,10 @@
 
 jobs:
   Lint:
+    name: Trunk Check Annotate
     runs-on: ubuntu-latest
+    permissions:
+      checks: write
     steps:
       - name: Checkout
         uses: actions/checkout@v3

.gitignore

@@ -19,3 +19,5 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+package-lock.json

src/components/RedSquareWithResize.tsx

@@ -6,8 +6,8 @@
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [x, setX] = useState(0);
   const [y, setY] = useState(0);
-  const [w, setW] = useState(50);
-  const [h, setH] = useState(50);
+  const [w, setW] =  useState(50);
+    const [h, setH] = useState(50);
 
   const draw = (ctx: {
     fillStyle: string;
@@ -29,6 +29,7 @@
   return (
     <div>
       <canvas ref={canvasRef} height={200} width={200} />
+      <p>The box is positioned at {{x}}, {{y}} with size {{w}} by {{h}}.<p/>
       <div
         style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px" }}
       >
@@ -38,7 +39,7 @@
             max={100}
             step={1}
             value={x}
-            label="X"
+            label='X-Position'
             handleChange={(event) => {
               setX(parseInt(event.target.value));
             }}
@@ -50,7 +51,7 @@
             max={100}
             step={1}
             value={y}
-            label="Y"
+            label='Y-Position'
             handleChange={(event) => {
               setY(parseInt(event.target.value));
             }}

src/content/docs/4-advanced-drawing-and-events/clipping.md

@@ -1,5 +1,6 @@
 ---
 title: placeholder
 description: placeholder
-prev: true
+    prev: true
+
 ---