docs: create Docusaurus documentation site for Copilot by Detox

[LironMShemen]

This commit adds a new Docusaurus-based documentation site with:

Guides Section:

• Integrating with Testing Frameworks: Overview of Copilot's capabilities.
• Technical Overview: Adapted from Detox docs (to be removed there).
• Best Practices: Framework-agnostic step-by-step guidance.
• Custom Driver Implementation: Guide to creating and adding testing framework drivers.
• Contributing: Details on adding prompt handlers and drivers, with tips and github link.

API Section:

• Interface Overview: Lifecycle commands (init, start, perform, end).
• Prompt Handlers: Writing and contributing (src/prompt-handlers).
• Framework Drivers: Custom implementation, snapshot support, and type references.

Showcase Page:

• Highlights Detox as the initial use case and invites collaboration with other frameworks.

[noomorph]

Let's start from removing some redundancy, ok?

[noomorph]

I believe this is better to be updated.

[LironMShemen]

How does 'https://copilotbydetox.com/' sound?

[noomorph]

Where do you deploy it to, currently?

[LironMShemen]

I don't know actually. Can I just choose to deploy to this address?

[noomorph]

Also, please fix your .nvmrc to use lts/jod (Node 22), instead of that embarrasing thing inside: 😅 I mean, just like a grenade that did not explode, there's this snippet of Shell script there inside:

echo "20" > .nvmrc

Overall, good job, but a few places still need some polish.

[noomorph]

Look, the bottomRightGif CSS is not good. Even 7+ media queries with hard-coded values don't save your day:

There are two approaches to fix this:

1. If you stick to absolute positioning, use linear interpolation (lerp) principles. Instead of discrete breakpoints, we need a continuous function that smoothly transitions between viewport sizes:

   .bottomRightGif {
     position: absolute;
     /* Linear scaling function: f(x) = mx + b where:
        m = (y2-y1)/(x2-x1) for the scaling rate
        b = y-intercept for minimum values */
     width: min(850px, calc(40vw + 300px));
     right: max(20px, calc(2vw + 10px));
     bottom: max(20px, calc(2vw + 10px));
   }

   This follows the principle of linear regression where we map viewport width to element dimensions (dependent variable), creating a continuous scaling function rather than discrete steps.
   The numbers in the example are random, magical and serve just for illustration. The syntax about min/max has to be taken with a grain of salt — it should work in CSS 2020+, but I never checked it personally as I touch website code not that often, sorry.

2. Maybe consider CSS Grid, who knows?

   .heroBanner {
     display: grid;
     grid-template-columns: 1fr min(850px, 100%); // again, numbers just for illustration
   }

The current implementation with 7+ media queries is essentially trying to approximate a linear function with step functions - that's why you get those awkward jumps between breakpoints.
Either implement proper linear scaling or use some layout systems.

P.S. Whatever approach you choose, test it with various screens (360px, and drag width slider slowly and check). The current implementation breaks on 1200px, for example. We don't want that in production.

[noomorph]

I’m not convinced that GIF is the best solution in this case.

1. It does not compress well; consider using WebP or other more modern formats instead.
2. To enhance user experience, a video file (WebM or whatever) would be ideal. This allows viewers to open it in fullscreen mode, pause/resume, etc. making it more usable, especially on mobile devices.

[noomorph]

This is cursed way to reference assets — it won't work on addresses like https://wix-incubator.github.io/detox-copilot/ where you have some prior base path such as /detox-copilot.

https://docusaurus.io/docs/markdown-features/assets#images

Read the docs, please. You have either require(...).default or import option in such case.

[noomorph]

I noticed several unused imports in your project. Please ensure there are no unused lines. IDEs typically highlight them, and you can automatically remove such imports for the entire folder (just check the available actions).

[noomorph]

And also, please check the narrow viewport (360px+). I don't think your layout looks clean enough there (uneven distances between elements, and abruptly ending bottom padding, at the very least, is what I can notice).

Here's my suggestion (actual vs what-i-would-have-expected-maybe), maybe it will help:

↑ The positioning of the image (whether it has to be 2nd, or 3rd, or 4th) — is not something I am firmly decided on, but still... I tend to believe that it's best to put it either 2nd or 3rd element in this vertical stack. I think, being the last element doesn't make it a good advertising job, especially if it gets cropped on 640px height viewport devices.