feat(docs): introduce static docs built with vitepress

[lucpotage]

Hi @antfu,

When moving from Windi CSS to UnoCSS, I found it difficult to understand the on-demand concept of UnoCSS and how to get an ISO experience from Windi CSS. While interactive docs are great to check that utilities work, it does not help finding the right information about presets, but also transformers that I wrongly thought were provided by default. There are articles with the guide prefix, but I found traditional static docs easier to browse: no need to know to find out.

Since the Nuxt team provided a great starter template for docs with Docus. I spent some time copying content from individual files to a new docs directory that is just waiting to be published (I suppose some CD setup would be required).

• Install Docus boilerplate
• Add content from individual README files
• Adapt content with Docus components for alerts, embedded playgrounds, etc
• Create a landing page with pointers to Getting started and Guide entries, and sponsors
• Add favicon and cover image for social networks
• Add license and contributors info in the footer, and links to Nuxt and Netlify
• Configure Netlify
• Check that links to Interactive docs and Playground work from the new docs

I obviously kept the original README files since they are useful as descriptions of individual packages in npm registry. I’m sure we could find a way to avoid duplicating content between the new docs and those README files, but I’m not sure how, especially since some files are not exactly the same (few Docus components).

I hope you’ll enjoy this new docs! 😃

[netlify]

❌ Deploy Preview for unocss failed.

Name	Link
🔨 Latest commit	46c2e25
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/641fa1eed852d00008ab0bd2

[antfu]

Hey, thanks for working on it, and I am happy to have it, it can be a good start to introduce more explanation of the concepts.

I have a few feedback before we move on:

• I prefer to use VitePress over Docus, to align more with Vite ecosystem
• We could make the README of each package minimal and link to the corresponding page (you can assume the docs site is deployed under https://unocss.dev

Once you are done, I will merge it and handle the rest deploy setup. Thanks

[lucpotage]

Thanks for your super fast feedback. Here is the Vitepress version!

I slightly changed the routes to make them match the package names to have something like unocss.dev/preset-mini for instance. I also double checked dead links.

I kept the default theme, feel free to tell me if you have any special color palette in mind.

[userquin]

@lucpotage add docs to pnpm-workspace.yml file:

packages:
 - bench
 - docs
 - playground
 - interactive
 - 'packages/*'
 - 'test/fixtures/*'
 - examples/vue-cli4
 - examples/vue-cli5

[userquin]

docs/src/public folder should be on docs root folder: move public folder from here docs/src/public to here docs/public

[userquin]

@antfu I can include team cards, contributors, sponsors and so on... I can include previous stuff in this PR or wait an initial version merged.

[lucpotage]

docs/src/public folder should be on docs root folder: move public folder from here docs/src/public to here docs/public

I actually tried this at the beginning but it does not work. So I looked at available examples in GitHub. StackBlitz Docs for instance have a public dir inside docs which is their srcDir in config.ts. Did I miss something?

[userquin]

I actually tried this at the beginning but it does not work. So I looked at available examples in GitHub. StackBlitz Docs for instance have a public dir inside docs which is their srcDir in config.ts. Did I miss something?

I need to check latest changes in VitePress.

You can test it removing the srcDir option and moving all inside src folder to docs root. I didn't see that flag, for example, on VitePWA docs repo we have md files at root, or in Vitest repo (docs folder) we have md files on docs root folder.

EDIT: there is no changes on VitesPress, and so you can proceed (VitePress docs folder also with the md src files).

[userquin]

I'm fixing types in config.ts module, do you want I move all src one level up?

[lucpotage]

Does it mean you prefer having the md files at the root level?

[userquin]

Does it mean you prefer having the md files at the root level?

No, we want the md files on docs root level not inside src folder.

[antfu]

@lucpotage thanks for working on it! I just restructured the document a bit. It would be better to pull first before making changes in case of conflictions.

[lucpotage]

Thanks @antfu. Sorry for the mess. I use the UI Sync feature of VSCode that says it does pull before push. 😳

[antfu]

I have merged this PR into /docs-next branch as there are still a lot of things to do before making it public. @lucpotage if you want to help, feel free to send more PRs against that branch. Thanks