docs: Rewrite and restructure the documentation website

[aklinker1]

This closes #704

TODOs:

• [x] https://github.com/wxt-dev/wxt/issues/868#issuecomment-2364195570

[netlify[bot]]

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name	Link
🔨 Latest commit	9d03fcacc4d4119718e74f3dc895b1d1336c8f2b
🔍 Latest deploy log	https://app.netlify.com/sites/creative-fairy-df92c4/deploys/67126f3fcae75d0008d39fb8
😎 Deploy Preview	https://deploy-preview-933--creative-fairy-df92c4.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 82.21%. Comparing base (1b900e9) to head (9d03fca). Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #933      +/-   ##
==========================================
+ Coverage   82.04%   82.21%   +0.16%     
==========================================
  Files         127      127              
  Lines        6634     6634              
  Branches     1103     1105       +2     
==========================================
+ Hits         5443     5454      +11     
+ Misses       1177     1166      -11     
  Partials       14       14              

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[pkg-pr-new[bot]]

Open in Stackblitz

@wxt-dev/i18n

pnpm add https://pkg.pr.new/@wxt-dev/i18n@933

@wxt-dev/auto-icons

pnpm add https://pkg.pr.new/@wxt-dev/auto-icons@933

@wxt-dev/module-react

pnpm add https://pkg.pr.new/@wxt-dev/module-react@933

@wxt-dev/module-solid

pnpm add https://pkg.pr.new/@wxt-dev/module-solid@933

@wxt-dev/module-svelte

pnpm add https://pkg.pr.new/@wxt-dev/module-svelte@933

@wxt-dev/module-vue

pnpm add https://pkg.pr.new/@wxt-dev/module-vue@933

wxt

pnpm add https://pkg.pr.new/wxt@933

commit: 9d03fca

[placoderm]

Do you want us to put specific comments on the wording of things in the new docs here? For example on this page this phrase is tripping me up:

All files inside the entrypoints/ directory are built by WXT and bundled into the .output directory.

That doesn't mean WTX creates them, though? WTX uses them to build the final files, right? Maybe I'm just not familiar with the proper terminology.

[aklinker1]

Do you want us to put specific comments on the wording of things in the new docs here?

Yup, that's fine!

[aklinker1]

That doesn't mean WTX creates them, though? WTX uses them to build the final files, right? Maybe I'm just not familiar with the proper terminology.

I see how it could be read that way... Let's update it! What about this?

WXT uses the files inside the entrypoints/ directory as inputs when bundling your extension.

[placoderm]

Perfect!

[placoderm]

This is just a formatting thing, but in the old docs the number of sub items was styled:

Now they aren't:

[placoderm]

Small misspelling here

Warning: run_at Caveots

Should be "caveat" I think. I mean, it should be spelled the way you wrote, but unfortunately it isn't, 😅

[aklinker1]

This is just a formatting thing, but in the old docs the number of sub items was styled:

@placoderm Fixed

These feature links are all not working anymore except modular architecture

@Timeraa fixed

Should be "caveat" I think

@placoderm fixed

I'm using Zed, which doesn't have a spellcheck plugin yet, so there's probably a lot of these lol...

[aklinker1]

Sent all the files through AI, and it found lots of typos. They should all be fixed now.

[Timeraa]

https://deploy-preview-933--creative-fairy-df92c4.netlify.app/guide/resources/migrate.html Third checklist item is not at the next line

[placoderm]

I'm not sure the level of knowledge you are expecting from the folks reading the docs.

For example in the vite plugin instructions It wasn't clear to me that at the top of my wxt.config.ts file I needed to import the plugin. It also wasn't clear that instead of just putting the name of the plugin, this is where all the arguments for the function went.

Instead of:

To add a plugin, install it and add it to the config:

Perhaps it could say:

To add a plugin, install it, import the function and add the function with parameters to the config:

Personally I would have appreciated an example like this:

import { defineConfig } from "wxt";
import removeConsole from "vite-plugin-remove-console";

export default defineConfig({
  vite: () => ({
    plugins: [removeConsole({ includes: ["log"] })],
  }),
});

Again, I don't know what level of user you are targeting.

[aklinker1]

I'm not sure the level of knowledge you are expecting from the folks reading the docs.

For example in the vite plugin instructions It wasn't clear to me that at the top of my wxt.config.ts file I needed to import the plugin. It also wasn't clear that instead of just putting the name of the plugin, this is where all the arguments for the function went.

Again, I don't know what level of user you are targeting.

I expect people to read Vite's docs if they want to learn more about Vite's features. On that page, I felt my only requirements were to show people how to add vite config and mention that they can use Vite plugins. I do think adding a plugin as an example is a good idea. I got a bit lazy there.

[placoderm]

I do think adding a plugin as an example is a good idea. I got a bit lazy there.

If there is anything you can be accused of it is certainly not being lazy, lol. You have done a huge service to your community of users.

After I posted the above snippet I realize that it was working, but not the way I intended. I wanted to see the .logs in dev but not production. @1natsu172 was kind enough to give me better code. You may like to use this instead since it explains a common pattern:

vite: (configEnv) => ({
    plugins: [configEnv.mode === "production" && removeConsole({ includes: ["log"] })],
  }),

[aklinker1]

That's a good example of the differences between vite plugins and how they're used in WXT. I'll add a different example for the basic setup, and add that one as an example for the behavior differences section.

[aklinker1]

Alright, gonna get this merged today. Just need to update all the redirect links to make sure old links still work, then we're good to go!

[placoderm]

Thank you so much for doing all this. It's a great blessing.

[aklinker1]

Alright, made a few final changes, gonna merge! Thanks everyone for your feedback :) I don't plan on doing another huge rewrite like this again... it sucked lol but I'm happy with how it's turned out!

[placoderm]

it sucked lol but I'm happy with how it's turned out

Thank you so much! It's clear you put a lot of time and care into it. First class work.