docs: add website

.github/actions/setup/action.yml

@@ -34,3 +34,8 @@ runs:
           **/node_modules
           .yarn/install-state.gz
         key: ${{ steps.yarn-cache.outputs.cache-primary-key }}
+
+    - name: Sync Astro
+      working-directory: website
+      run: yarn astro sync
+      shell: bash

eslint.config.mjs

@@ -24,6 +24,6 @@ export default defineConfig([
     },
   },
   {
-    ignores: ['node_modules/', 'lib/'],
+    ignores: ['node_modules/', 'lib/', 'website/.astro'],
   },
 ]);

package.json

@@ -92,7 +92,8 @@
   },
   "workspaces": [
     "example",
-    "packages/*"
+    "packages/*",
+    "website"
   ],
   "packageManager": "yarn@4.11.0",
   "react-native-builder-bob": {

packages/polyfills/package.json

@@ -9,11 +9,11 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@react-native/babel-preset": "^0.83.0",
+    "abort-controller": "3.0.0",
     "metro": "^0.83.0",
     "metro-babel-transformer": "^0.83.0",
     "metro-minify-terser": "^0.83.0",
-    "metro-resolver": "^0.83.0",
-    "abort-controller": "3.0.0"
+    "metro-resolver": "^0.83.0"
   },
   "repository": {
     "type": "git",

tsconfig.build.json

@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig",
-  "exclude": ["example", "lib"]
+  "exclude": ["example", "lib", "website"]
 }

tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "include": ["website/.astro/types.d.ts", "**/*"],
   "compilerOptions": {
     "rootDir": ".",
     "paths": {

website/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

website/README.md

@@ -0,0 +1,49 @@
+# Starlight Starter Kit: Basics
+
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+
+```
+yarn create astro@latest -- --template starlight
+```
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro + Starlight project, you'll see the following folders and files:
+
+```
+.
+├── public/
+├── src/
+│   ├── assets/
+│   ├── content/
+│   │   └── docs/
+│   └── content.config.ts
+├── astro.config.mjs
+├── package.json
+└── tsconfig.json
+```
+
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+
+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+
+Static assets, like favicons, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `yarn install`             | Installs dependencies                            |
+| `yarn dev`             | Starts local dev server at `localhost:4321`      |
+| `yarn build`           | Build your production site to `./dist/`          |
+| `yarn preview`         | Preview your build locally, before deploying     |
+| `yarn astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `yarn astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

website/astro.config.mjs

@@ -0,0 +1,51 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+import tailwindcss from '@tailwindcss/vite';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    starlight({
+      title: 'RN WebWorker',
+      logo: {
+        src: './src/assets/logo.svg',
+      },
+      social: [
+        {
+          icon: 'github',
+          label: 'GitHub',
+          href: 'https://github.com/V3RON/react-native-webworker',
+        },
+      ],
+
+      customCss: ['./src/styles/global.css'],
+      sidebar: [
+        {
+          label: 'Start here',
+          items: [{ label: 'Getting started', slug: 'getting-started' }],
+        },
+        {
+          label: 'Guides',
+          items: [
+            {
+              label: 'Workers vs. Worklets',
+              slug: 'guides/workers-vs-worklets',
+            },
+            { label: 'Networking', slug: 'guides/networking' },
+            { label: 'Polyfills', slug: 'guides/polyfills' },
+          ],
+        },
+        {
+          label: 'Reference',
+          autogenerate: { directory: 'reference' },
+        },
+      ],
+    }),
+  ],
+
+  vite: {
+    plugins: [tailwindcss()],
+  },
+});

website/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "website",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/starlight": "^0.37.2",
+    "@tailwindcss/vite": "^4.1.18",
+    "astro": "^5.6.1",
+    "sharp": "^0.34.2",
+    "tailwindcss": "^4.1.18"
+  }
+}

website/src/components/GridBackground.astro

@@ -0,0 +1,173 @@
+<canvas id="bg-grid" class="absolute inset-0 w-full h-full z-0 opacity-40 pointer-events-none"></canvas>
+
+<script>
+  const canvas = document.getElementById('bg-grid');
+  const ctx = canvas.getContext('2d');
+
+  // Vercel-like aesthetics: cleaner, thinner lines, subtle glowing beams
+  const GRID_SIZE = 60; // Larger grid for cleaner look
+  const BEAM_LENGTH = 150; // Longer beams
+  const BEAM_SPEED = 1.5; // Smooth, moderate speed
+  const MAX_BEAMS = 8; // Fewer beams for minimalism
+
+  // Subtle gradient colors for beams
+  const COLORS = [
+    'rgba(255, 255, 255, 0.4)', // White-ish
+    'rgba(161, 161, 170, 0.4)', // Zinc-400
+  ];
+
+  let width = 0;
+  let height = 0;
+
+  let beams = [];
+
+  function createBeam() {
+    const axis = Math.random() > 0.5 ? 'x' : 'y';
+    const direction = Math.random() > 0.5 ? 1 : -1;
+
+    // Snap starting position to grid
+    const gridX = Math.floor(Math.random() * (width / GRID_SIZE)) * GRID_SIZE;
+    const gridY = Math.floor(Math.random() * (height / GRID_SIZE)) * GRID_SIZE;
+
+    // Start slightly off-screen based on direction
+    let startOffset = 0;
+    if (axis === 'x') {
+        startOffset = direction === 1 ? -BEAM_LENGTH : width + BEAM_LENGTH;
+    } else {
+        startOffset = direction === 1 ? -BEAM_LENGTH : height + BEAM_LENGTH;
+    }
+
+    return {
+      x: gridX,
+      y: gridY,
+      axis,
+      direction,
+      speed: BEAM_SPEED + Math.random() * 0.5, // Slight speed variation
+      color: COLORS[Math.floor(Math.random() * COLORS.length)],
+      offset: startOffset,
+      dead: false
+    };
+  }
+
+  function init() {
+    resize();
+    window.addEventListener('resize', resize);
+
+    // Initial population
+    for(let i=0; i<MAX_BEAMS; i++) {
+        beams.push(createBeam());
+        // Randomize initial positions so they don't all start at edge
+        const beam = beams[i];
+        if (beam.axis === 'x') beam.offset = Math.random() * width;
+        else beam.offset = Math.random() * height;
+    }
+
+    requestAnimationFrame(loop);
+  }
+
+  function resize() {
+    const parent = canvas.parentElement;
+    if (parent) {
+        width = parent.clientWidth;
+        height = parent.clientHeight;
+        canvas.width = width;
+        canvas.height = height;
+    }
+  }
+
+  function drawGrid() {
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.03)'; // Very subtle grid
+    ctx.lineWidth = 1;
+
+    ctx.beginPath();
+    // Vertical lines
+    // Center the grid
+    const offsetX = (width % GRID_SIZE) / 2;
+    const offsetY = (height % GRID_SIZE) / 2;
+
+    for (let x = offsetX; x <= width; x += GRID_SIZE) {
+      ctx.moveTo(x + 0.5, 0);
+      ctx.lineTo(x + 0.5, height);
+    }
+    // Horizontal lines
+    for (let y = offsetY; y <= height; y += GRID_SIZE) {
+      ctx.moveTo(0, y + 0.5);
+      ctx.lineTo(width, y + 0.5);
+    }
+    ctx.stroke();
+  }
+
+  function updateAndDrawBeams() {
+    // Manage population
+    if (beams.length < MAX_BEAMS && Math.random() < 0.02) {
+        beams.push(createBeam());
+    }
+
+    beams.forEach((beam, index) => {
+        // Update
+        beam.offset += beam.speed * beam.direction;
+
+        // Check bounds (kill if far off screen)
+        if (beam.axis === 'x') {
+            if ((beam.direction === 1 && beam.offset > width + BEAM_LENGTH) || 
+                (beam.direction === -1 && beam.offset < -BEAM_LENGTH)) {
+                beam.dead = true;
+            }
+        } else {
+             if ((beam.direction === 1 && beam.offset > height + BEAM_LENGTH) || 
+                (beam.direction === -1 && beam.offset < -BEAM_LENGTH)) {
+                beam.dead = true;
+            }
+        }
+
+        // Draw
+        if (!beam.dead) {
+            const gradient = ctx.createLinearGradient(
+                beam.axis === 'x' ? beam.offset : beam.x,
+                beam.axis === 'y' ? beam.offset : beam.y,
+                beam.axis === 'x' ? beam.offset - (BEAM_LENGTH * beam.direction) : beam.x,
+                beam.axis === 'y' ? beam.offset - (BEAM_LENGTH * beam.direction) : beam.y
+            );
+
+            gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
+            gradient.addColorStop(0.5, beam.color); // Middle is brightest
+            gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+
+            ctx.lineWidth = 2; // Slightly thicker beam
+            ctx.lineCap = 'round';
+            ctx.strokeStyle = gradient;
+            ctx.shadowColor = 'rgba(255, 255, 255, 0.2)';
+            ctx.shadowBlur = 10;
+
+            ctx.beginPath();
+            if (beam.axis === 'x') {
+                const y = beam.y + 0.5 + (height % GRID_SIZE) / 2; // Align to grid
+                ctx.moveTo(beam.offset, y);
+                ctx.lineTo(beam.offset - (BEAM_LENGTH * beam.direction), y);
+            } else {
+                const x = beam.x + 0.5 + (width % GRID_SIZE) / 2; // Align to grid
+                ctx.moveTo(x, beam.offset);
+                ctx.lineTo(x, beam.offset - (BEAM_LENGTH * beam.direction));
+            }
+            ctx.stroke();
+
+            // Reset shadow for grid
+            ctx.shadowBlur = 0;
+        }
+    });
+
+    // Cleanup dead beams
+    beams = beams.filter(b => !b.dead);
+  }
+
+  function loop() {
+    ctx.clearRect(0, 0, width, height);
+
+    drawGrid();
+    updateAndDrawBeams();
+
+    requestAnimationFrame(loop);
+  }
+
+  init();
+</script>