3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-21 13:06:58 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs: improve alt messages (#8047)

Browse source
This commit is contained in:
Joshua Chen 2022-09-04 01:33:25 -04:00 • committed by GitHub
parent 1f1f898d73
commit 36db64ed1d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 76 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-logger/README.md
View file

@ -57,4 +57,4 @@ An embedded expression is optionally preceded by a flag in the form `[a-z]+=` (a
If the expression is an array, it's formatted by `` `\n- ${array.join('\n- ')}\n` `` (note it automatically gets a leading line end). Each member is formatted by itself and the bullet is not formatted. So you would see the above message printed as: If the expression is an array, it's formatted by `` `\n- ${array.join('\n- ')}\n` `` (note it automatically gets a leading line end). Each member is formatted by itself and the bullet is not formatted. So you would see the above message printed as:
![demo](./demo.png) ![Some text output in the terminal, containing array, code, name, and number formatting](./demo.png)

8
website/blog/2017-12-14-introducing-docusaurus.md
View file

@ -4,7 +4,7 @@ authors: JMarcey
tags: [documentation, blog, docusaurus] tags: [documentation, blog, docusaurus]
--- ---
![Introducing Slash](/img/slash-introducing.svg) ![](/img/slash-introducing.svg)
We are very happy to introduce [Docusaurus](https://github.com/facebook/docusaurus) to help you manage one or many open source websites. We are very happy to introduce [Docusaurus](https://github.com/facebook/docusaurus) to help you manage one or many open source websites.
@ -23,7 +23,7 @@ Docusaurus also provides core website and documentation features out-of-the-box
## The Birth of docusaurus ## The Birth of docusaurus
![Birth of Slash](/img/slash-birth.png) ![](/img/slash-birth.png)
When Facebook first started their open source program, many teams implemented a custom website for each of their open source projects. This approach presented challenges when the open source program team was asked to help the project teams improve their documentation. Since each site was unique, adding basic infrastructure such as a blog, consistent navigation, search, etc. became challenging undertakings. When Facebook first started their open source program, many teams implemented a custom website for each of their open source projects. This approach presented challenges when the open source program team was asked to help the project teams improve their documentation. Since each site was unique, adding basic infrastructure such as a blog, consistent navigation, search, etc. became challenging undertakings.
@ -39,7 +39,7 @@ At Facebook, Docusaurus allows us to quickly get different projects up and runni
## Getting Up and Running ## Getting Up and Running
![Slash Up and Running](/img/slash-up-and-running.png) ![](/img/slash-up-and-running.png)
At its core, we wanted sites running Docusaurus to be simple to use. With one [installation](https://v1.docusaurus.io/docs/en/installation.html) command and some simple [configuration](https://v1.docusaurus.io/docs/en/site-preparation.html), you can actually have a default running website. At its core, we wanted sites running Docusaurus to be simple to use. With one [installation](https://v1.docusaurus.io/docs/en/installation.html) command and some simple [configuration](https://v1.docusaurus.io/docs/en/site-preparation.html), you can actually have a default running website.
@ -127,7 +127,7 @@ build
## Community ## Community
![Docusaurus](/img/docusaurus.svg) ![](/img/docusaurus.svg)
We welcome your [contributions](https://github.com/facebook/docusaurus/blob/master/CONTRIBUTING.md) to Docusaurus, whether you want to use it for your own site, you want to [contribute](https://github.com/facebook/docusaurus/blob/master/CONTRIBUTING.md) to the Docusaurus core or just have questions. Follow us on [GitHub](https://github.com/facebook/docusaurus) and [Twitter](https://twitter.com/docusaurus). We welcome your [contributions](https://github.com/facebook/docusaurus/blob/master/CONTRIBUTING.md) to Docusaurus, whether you want to use it for your own site, you want to [contribute](https://github.com/facebook/docusaurus/blob/master/CONTRIBUTING.md) to the Docusaurus core or just have questions. Follow us on [GitHub](https://github.com/facebook/docusaurus) and [Twitter](https://twitter.com/docusaurus).

48
website/blog/2018-04-30-How-I-Converted-Profilo-To-Docusaurus.md
View file

@ -48,37 +48,41 @@ Here's an overview of the steps taken to convert to a website. I'll discuss some
1. Added metadata to the existing Markdown files found in the `docs` folder, for example: 1. Added metadata to the existing Markdown files found in the `docs` folder, for example:
+--- ```md
+id: architecture ---
+title: Architecture id: architecture
+sidebar_label: Architecture title: Architecture
+--- sidebar_label: Architecture
---
```
1. Added the logo assets to the `website/static/img` folder. 2. Added the logo assets to the `website/static/img` folder.
1. Modified `website/pages/en/index.js`, the landing page, to highlight Profilo features. 3. Modified `website/pages/en/index.js`, the landing page, to highlight Profilo features.
1. Modified `website/core/Footer.js`, the footer, to simplify it for Profilo. 4. Modified `website/core/Footer.js`, the footer, to simplify it for Profilo.
1. Edited `website/siteConfig.js` (website configuration file) to specify the previously chosen primary and secondary colors. 5. Edited `website/siteConfig.js` (website configuration file) to specify the previously chosen primary and secondary colors.
1. Modified `website/sidebars.json` that specifies the sidebar navigation. Listed all the docs and customized it based on the metadata added to the Markdown files. 6. Modified `website/sidebars.json` that specifies the sidebar navigation. Listed all the docs and customized it based on the metadata added to the Markdown files.
1. Edited the website configuration file to specify the GitHub properties, logo images, header links, and the website link. 7. Edited the website configuration file to specify the GitHub properties, logo images, header links, and the website link.
1. Tested the website locally throughout this phase. (I ran `yarn start` from the `website` folder to start the server.) 8. Tested the website locally throughout this phase. (I ran `yarn start` from the `website` folder to start the server.)
**Feedback and review changes:** **Feedback and review changes:**
1. Sent a [pull request](https://github.com/facebookincubator/profilo/pull/6) to the project. 1. Sent a [pull request](https://github.com/facebookincubator/profilo/pull/6) to the project.
1. Updated the colors after the designer rightly gasped at the ones I had chosen (IANAD). 2. Updated the colors after the designer rightly gasped at the ones I had chosen (IANAD).
1. Updated the colors and updated the PR. 3. Updated the colors and updated the PR.
1. The PR was then accepted and [merged](https://github.com/facebookincubator/profilo/commit/6ad033aaf5a7d54e6d842f45a5bccd051a8e45ad). Yay! 4. The PR was then accepted and [merged](https://github.com/facebookincubator/profilo/commit/6ad033aaf5a7d54e6d842f45a5bccd051a8e45ad). Yay!
**Website publishing:** **Website publishing:**
1. Pushed the first website version by running the Docusaurus publish script from the command line: 1. Pushed the first website version by running the Docusaurus publish script from the command line:
```bash
USE_SSH=true \ USE_SSH=true \
GIT_USER=caabernathy \ GIT_USER=caabernathy \
CURRENT_BRANCH=master \ CURRENT_BRANCH=master \
yarn run publish-gh-pages yarn run publish-gh-pages
```
1. Configured CircleCI using the [provided Docusaurus instructions](https://v1.docusaurus.io/docs/en/publishing.html#automating-deployments-using-continuous-integration). There were 2 PRs for this, [the first](https://github.com/facebookincubator/profilo/pull/8)for the initial config and [the second](https://github.com/facebookincubator/profilo/pull/12) to make sure CircleCI only triggered for changes in the master branch (thanks Joel Marcey!). 2. Configured CircleCI using the [provided Docusaurus instructions](https://v1.docusaurus.io/docs/en/publishing.html#automating-deployments-using-continuous-integration). There were 2 PRs for this, [the first](https://github.com/facebookincubator/profilo/pull/8)for the initial config and [the second](https://github.com/facebookincubator/profilo/pull/12) to make sure CircleCI only triggered for changes in the master branch (thanks Joel Marcey!).
The final website was published on https://facebookincubator.github.io/profilo/. It had taken 1.5 hours to get to the initial PR stage and another half an hour or so to respond to review feedback and publish the website. The final website was published on https://facebookincubator.github.io/profilo/. It had taken 1.5 hours to get to the initial PR stage and another half an hour or so to respond to review feedback and publish the website.
@ -86,15 +90,15 @@ The final website was published on https://facebookincubator.github.io/profilo/.
Here's what the initial website looked like when the first pull request was sent out: Here's what the initial website looked like when the first pull request was sent out:
![Website Initial Design](/img/profilo_blog_post_website_initial.png) ![The website's front page, with a quite bright and saturated red color as the primary color, closely resembling the Profilo logo color, making the logo unrecognizable in the navbar](/img/profilo_blog_post_website_initial.png)
Most of the time in the content creation was spent picking colors that worked reasonably well with the given logo. These colors were a good jumping off point for designer feedback. I used Photoshop to sample various portions of the logo. Most of the time in the content creation was spent picking colors that worked reasonably well with the given logo. These colors were a good jumping off point for designer feedback. I used Photoshop to sample various portions of the logo.
![Picking Color Photoshop](/img/profilo_blog_post_photoshop_color_picker.png) ![Picking colors in Photoshop, with the Profilo logo and the main working area in the background and a color picker dialog in the foreground, selected to a red shade](/img/profilo_blog_post_photoshop_color_picker.png)
I then took the RGB representation of the color and set it as the baseline color on [Paletton](http://paletton.com/). The website then gave me various color options to try on the website by editing the Docusaurus website configuration file. I then took the RGB representation of the color and set it as the baseline color on [Paletton](http://paletton.com/). The website then gave me various color options to try on the website by editing the Docusaurus website configuration file.
![Picking Color Paletton](/img/profilo_blog_post_palette_website_color_picker.png) ![Using Paletton to generate a full palette from the red shade selected. There's a color wheel showing all hues on the left, and a square showing various shades of red on the right.](/img/profilo_blog_post_palette_website_color_picker.png)
The selected primary and secondary colors were a good jumping off point for designer feedback. The selected primary and secondary colors were a good jumping off point for designer feedback.
@ -102,17 +106,17 @@ There were also modifications made to the default website generated by Docusauru
Here's what the final website looked like: Here's what the final website looked like:
![Website Final Design](/img/profilo_blog_post_website_final.png) ![The website's front page, with a much darker red color as the primary color, making both the logo and the primary-colored title text clearly legible.](/img/profilo_blog_post_website_final.png)
This is an example page showing the core content, in this case the Getting Started page: This is an example page showing the core content, in this case the Getting Started page:
![Website Docs Example](/img/profilo_blog_post_website_final_docs.png) ![A doc page with the sidebar on the left quarter of the screen and the main content occupying the rest. Some text is using the primary color and the main body uses multiple kinds of typesetting including bold, list, and code](/img/profilo_blog_post_website_final_docs.png)
This also shows the sidebar structure that was set up through editing `website/sidebars.json`. This also shows the sidebar structure that was set up through editing `website/sidebars.json`.
Lastly, I didn't have to worry about handling responsive design. You get this out of the box with Docusaurus! Lastly, I didn't have to worry about handling responsive design. You get this out of the box with Docusaurus!
![Mobile Site](/img/profilo_blog_post_android_ios.png) ![Mobile screenshots of the front page and sample doc page. The layout is automatically adjusted to make it appear more natural. The doc sidebar is hidden behind a button.](/img/profilo_blog_post_android_ios.png)
## Final Thoughts ## Final Thoughts

2
website/blog/2018-12-14-Happy-First-Birthday-Slash.md
View file

@ -6,7 +6,7 @@ authors:
tags: [birth] tags: [birth]
--- ---
![First Birthday Slash](/img/docusaurus-slash-first-birthday.svg) ![Docusaurus makes 1 year! Happy Birthday Slash!](/img/docusaurus-slash-first-birthday.svg)
Docusaurus [went live](https://v1.docusaurus.io/blog/2017/12/14/introducing-docusaurus) on December 14, 2017. At the time, we had [8 early adopters](https://v1.docusaurus.io/blog/2017/12/14/introducing-docusaurus#acknowledgements). Docusaurus [went live](https://v1.docusaurus.io/blog/2017/12/14/introducing-docusaurus) on December 14, 2017. At the time, we had [8 early adopters](https://v1.docusaurus.io/blog/2017/12/14/introducing-docusaurus#acknowledgements).

2
website/blog/2020-01-07-tribute-to-endi.md
View file

@ -20,4 +20,4 @@ We are working on ways to honor Endi's contributions - a commemorative sticker,
The Docusaurus project will not be the same without Endi, and those of us who worked with him will miss him greatly. 😔 The Docusaurus project will not be the same without Endi, and those of us who worked with him will miss him greatly. 😔
![Endi](/img/endi.jpg) ![A photo from behind Endi's back, with Endi sitting on a rock cliff, facing the vast sea. His right hand forms a V pose.](/img/endi.jpg)

10
website/blog/2021-01-19-docusaurus-2020-recap.md
View file

@ -13,7 +13,7 @@ We now **recommend Docusaurus 2** as the **default choice** to start a new Docus
We are **still in alpha**, but expect **some good news very soon**! We are **still in alpha**, but expect **some good news very soon**!
![Docusaurus v1 vs v2 npm trends](/img/blog/2020-recap/docusaurus-plushie-banner.jpeg) ![Three Docusaurus plushies laid side-by-side on the table](/img/blog/2020-recap/docusaurus-plushie-banner.jpeg)
<!--truncate--> <!--truncate-->
@ -40,7 +40,7 @@ We have worked on many features this year, and would like to highlight the most
The plan to [rebuild Docusaurus from scratch in 2019](https://docusaurus.io/blog/2019/12/30/docusaurus-2019-recap) paid off: after a slow start, Docusaurus 2 has been widely adopted and has **already outgrown Docusaurus 1** usage. The plan to [rebuild Docusaurus from scratch in 2019](https://docusaurus.io/blog/2019/12/30/docusaurus-2019-recap) paid off: after a slow start, Docusaurus 2 has been widely adopted and has **already outgrown Docusaurus 1** usage.
![Docusaurus v1 vs v2 npm trends](/img/blog/2020-recap/docusaurus-npm-trends.png) ![Docusaurus v1 vs. v2 npm trends of the year 2020. The installations of Docusaurus v2 is visibly up-growing, while v1 is slightly downward. V1 starts at 15000 and ends at 10000, while v2 starts at 2000 and ends at 25000. The intersection happens around June 2020.](/img/blog/2020-recap/docusaurus-npm-trends.png)
Notable **projects, startups, large companies, and individuals** adopted Docusaurus 2 ([showcase](https://docusaurus.io/showcase)): Notable **projects, startups, large companies, and individuals** adopted Docusaurus 2 ([showcase](https://docusaurus.io/showcase)):
@ -57,15 +57,15 @@ We helped **large scale Docusaurus 1 sites to upgrade**, ensuring a proper **mig
[React Native](https://reactnative.dev/) was successfully upgraded to Docusaurus 2 ([archived v1 site](http://archive.reactnative.dev/)): [React Native](https://reactnative.dev/) was successfully upgraded to Docusaurus 2 ([archived v1 site](http://archive.reactnative.dev/)):
![React Native screenshot](/img/blog/2020-recap/react-native-screenshot.png) ![React Native's new website built with Docusaurus v2](/img/blog/2020-recap/react-native-screenshot.png)
Localized Docusaurus 1 sites (like **Jest**) will be able to upgrade too: Localized Docusaurus 1 sites (like **Jest**) will be able to upgrade too:
![Jest in Japanese screenshot](/img/blog/2020-recap/jest-screenshot.png) ![Jest's new website built with Docusaurus v2 in Japanese](/img/blog/2020-recap/jest-screenshot.png)
We also saw the **[first right-to-left](https://datagit.ir/)** Docusaurus 2 site published: We also saw the **[first right-to-left](https://datagit.ir/)** Docusaurus 2 site published:
![Datagit screenshot](/img/blog/2020-recap/datagit-rtl-screenshot.png) ![Datagit's website in Persian, a right-to-left language. The sidebar appears on the right of the window and the TOC appears on the left.](/img/blog/2020-recap/datagit-rtl-screenshot.png)
## GitHub Activity ## GitHub Activity

6
website/blog/2021-03-09-releasing-docusaurus-i18n.md
View file

@ -58,7 +58,7 @@ We have made it possible to **upgrade** a **translated Docusaurus 1 site** to Do
The Docusaurus 2 migration was successful and the new site is now deployed in production ([announcement post](https://jestjs.io/blog/2021/03/09/jest-website-upgrade)). The Docusaurus 2 migration was successful and the new site is now deployed in production ([announcement post](https://jestjs.io/blog/2021/03/09/jest-website-upgrade)).
[![Jest i18n screenshot](/img/blog/2021-03-09-releasing-docusaurus-i18n/jest.png)](https://jestjs.io) [![Jest's website front page in Japanese](/img/blog/2021-03-09-releasing-docusaurus-i18n/jest.png)](https://jestjs.io)
### Redwood: adopting Docusaurus ### Redwood: adopting Docusaurus
@ -66,7 +66,7 @@ The Docusaurus 2 migration was successful and the new site is now deployed in pr
They were looking for a solution to create an **internationalized learning platform**, and became early adopters of Docusaurus 2 i18n for [learn.redwoodjs.com](https://learn.redwoodjs.com/), using Crowdin to get it translated to French. They were looking for a solution to create an **internationalized learning platform**, and became early adopters of Docusaurus 2 i18n for [learn.redwoodjs.com](https://learn.redwoodjs.com/), using Crowdin to get it translated to French.
[![Redwood i18n screenshot](/img/blog/2021-03-09-releasing-docusaurus-i18n/redwood.png)](https://learn.redwoodjs.com/) [![Redwood's doc page in French](/img/blog/2021-03-09-releasing-docusaurus-i18n/redwood.png)](https://learn.redwoodjs.com/)
### Datagit: using LTR support ### Datagit: using LTR support
@ -74,7 +74,7 @@ The i18n system should work with any language, including **Right-to-Left languag
[Datagit.ir](https://datagit.ir/) is using Farsi, and a simple configuration option is able to **flip the Docusaurus theme** to add the required Right-to-Left support. [Datagit.ir](https://datagit.ir/) is using Farsi, and a simple configuration option is able to **flip the Docusaurus theme** to add the required Right-to-Left support.
[![Datagit i18n screenshot](/img/blog/2021-03-09-releasing-docusaurus-i18n/datagit.png)](https://datagit.ir/) [![Datagit's website in Persian, a right-to-left language. The sidebar appears on the right of the window and the TOC appears on the left.](/img/blog/2021-03-09-releasing-docusaurus-i18n/datagit.png)](https://datagit.ir/)
## Conclusion ## Conclusion

6
website/blog/2021-05-12-announcing-docusaurus-two-beta/index.md
View file

@ -15,7 +15,7 @@ After a lengthy alpha stage in order to ensure feature parity and quality, we ar
With the announcement of this beta, the team is even more confident that Docusaurus 2 is **ready for mainstream adoption**! With the announcement of this beta, the team is even more confident that Docusaurus 2 is **ready for mainstream adoption**!
![Docusaurus beta party](./img/image_cropped.png) ![](./img/image_cropped.png)
<!--truncate--> <!--truncate-->
@ -25,13 +25,13 @@ With the announcement of this beta, the team is even more confident that Docusau
Docusaurus 2 is widely adopted and growing fast: Docusaurus 2 is widely adopted and growing fast:
[![Docusaurus growth](./img/trend.png)](https://www.npmtrends.com/docusaurus-vs-@docusaurus/core) [![Docusaurus v1 vs. v2 npm trends from 2019 to mid 2021. The installations of Docusaurus v2 is sharply rising, while v1 is mostly stable. V1 fluctuates between 10000 and 20000, while v2 starts at 0 and ends at almost 60000. The intersection happens around June 2020.](./img/trend.png)](https://www.npmtrends.com/docusaurus-vs-@docusaurus/core)
To get a fuller understanding of the quality of current Docusaurus 2 sites, our new [showcase](https://docusaurus.io/showcase) page allows you to filter Docusaurus sites by features, so you may get inspired by real-world production sites with a similar use-case as yours! To get a fuller understanding of the quality of current Docusaurus 2 sites, our new [showcase](https://docusaurus.io/showcase) page allows you to filter Docusaurus sites by features, so you may get inspired by real-world production sites with a similar use-case as yours!
Don't miss our [favorite](https://docusaurus.io/showcase?tags=favorite) sites; they all stand out with something unique: Don't miss our [favorite](https://docusaurus.io/showcase?tags=favorite) sites; they all stand out with something unique:
[![Docusaurus growth](./img/favorites.png)](https://docusaurus.io/showcase?tags=favorite) [![A screenshot of the showcase's favorites section, with 12 cards each displaying the information and preview of one site](./img/favorites.png)](https://docusaurus.io/showcase?tags=favorite)
## Why was Docusaurus v2 in alpha for so long? ## Why was Docusaurus v2 in alpha for so long?

8
website/blog/2021-11-21-algolia-docsearch-migration/index.md
View file

@ -74,9 +74,9 @@ DocSearch now leverages the [Algolia Crawler](https://www.algolia.com/products/s
- Edit your config file from a live editor - Edit your config file from a live editor
- Test your results with DocSearch v3 - Test your results with DocSearch v3
![Algolia crawler overview](./img/crawler-overview.png) ![The Algolia crawler front page showing the project's overview, such as last complete crawl and indices](./img/crawler-overview.png)
![Algolia config editor](./img/editor.png) ![The Algolia config editor opened to the docusaurus-2 config. The right pane shows the results for index and various facet filters.](./img/editor.png)
But also, more Algolia features in **your own Algolia app**: But also, more Algolia features in **your own Algolia app**:
@ -84,9 +84,9 @@ But also, more Algolia features in **your own Algolia app**:
- Browse and see how your records are indexed in Algolia - Browse and see how your records are indexed in Algolia
- Try other Algolia features with free trials - Try other Algolia features with free trials
![Algolia index overview](./img/index-overview.png) ![The Algolia index overview page, showing various filters and the details of every single index](./img/index-overview.png)
![Algolia index analytics](./img/index-analytics.png) ![The Algolia index analytics page, showing trends for total users, total searches, etc.](./img/index-analytics.png)
And of course, **a lot more, for free**. And of course, **a lot more, for free**.

14
website/blog/2022-01-24-docusaurus-2021-recap/index.md
View file

@ -11,7 +11,7 @@ We've **reached full feature parity** with v1 after [the release of internationa
The **official v2 release** is just around the corner! Follow the [roadmap issue](https://github.com/facebook/docusaurus/issues/6113) for any latest news. The **official v2 release** is just around the corner! Follow the [roadmap issue](https://github.com/facebook/docusaurus/issues/6113) for any latest news.
![thumbnail image](./img/thumbnail.png) ![](./img/thumbnail.png)
<!--truncate--> <!--truncate-->
@ -38,7 +38,7 @@ Our codebase has been polished over time as well. We have improved test coverage
Docusaurus v2 continues to grow steadily. V2 installation is now 8 times more than v1. In terms of weekly downloads, we have witnessed another three-fold increase (+209.4%), growing from 28,066 in early January to a peak of 86,846 in mid-December. Docusaurus v2 continues to grow steadily. V2 installation is now 8 times more than v1. In terms of weekly downloads, we have witnessed another three-fold increase (+209.4%), growing from 28,066 in early January to a peak of 86,846 in mid-December.
[![npm download trend](./img/npm-trend.png)](https://www.npmtrends.com/docusaurus-vs-@docusaurus/core) [![Docusaurus v1 vs. v2 npm trends of the year 2021. The installations of Docusaurus v2 is constantly rising, while v1 is almost constant. V1 stays at 10000, while v2 grows from 30000 to almost 90000. There's a sharp drop from 90000 to 40000 just before the Jan 2022 line.](./img/npm-trend.png)](https://www.npmtrends.com/docusaurus-vs-@docusaurus/core)
(Ah, the classic Christmas dip...) (Ah, the classic Christmas dip...)
@ -55,11 +55,11 @@ We released 18 versions, going from `2.0.0-alpha.71` to `2.0.0-beta.14`. That's
Our star trend is also very positive. Compared to similar projects, we are **growing at a faster rate**: Our star trend is also very positive. Compared to similar projects, we are **growing at a faster rate**:
![stars trend by year](./img/star-history.png) ![Stars trend by year of 9 static site generators. Next.js grows the fastest, with Docusaurus at the 4th place in terms of growth rate.](./img/star-history.png)
With an 8.4k increase in stars, we are ranked number 3 in this year's [JavaScript rising stars of static site generators](https://risingstars.js.org/2021/en#section-ssg), preceded only by Next.js and Astro. With an 8.4k increase in stars, we are ranked number 3 in this year's [JavaScript rising stars of static site generators](https://risingstars.js.org/2021/en#section-ssg), preceded only by Next.js and Astro.
![rising stars ranking](./img/rising-stars.png) ![Docusaurus placing 3rd in the "Static Sites" ranking list](./img/rising-stars.png)
## Featured adoptions ## Featured adoptions
@ -67,15 +67,15 @@ Our showcase has welcomed a few new ["favorite" sites](/showcase?tags=favorite)
- [**IOTA-wiki**](https://wiki.iota.org/) - [**IOTA-wiki**](https://wiki.iota.org/)
![Iota wiki light](./img/iota-light.png#gh-light-mode-only)![Iota wiki dark](./img/iota-dark.png#gh-dark-mode-only) ![Iota wiki light mode](./img/iota-light.png#gh-light-mode-only)![Iota wiki dark mode](./img/iota-dark.png#gh-dark-mode-only)
- [**Dyte**](https://docs.dyte.io/docs/home/introduction/) - [**Dyte**](https://docs.dyte.io/docs/home/introduction/)
![Dyte light](./img/dyte-light.png#gh-light-mode-only)![Dyte dark](./img/dyte-dark.png#gh-dark-mode-only) ![Dyte light mode](./img/dyte-light.png#gh-light-mode-only)![Dyte dark mode](./img/dyte-dark.png#gh-dark-mode-only)
- [**Ionic**](https://ionicframework.com/docs) - [**Ionic**](https://ionicframework.com/docs)
![Ionic light](./img/ionic-light.png#gh-light-mode-only)![Ionic dark](./img/ionic-dark.png#gh-dark-mode-only) ![Ionic light mode](./img/ionic-light.png#gh-light-mode-only)![Ionic dark mode](./img/ionic-dark.png#gh-dark-mode-only)
- [**Courier**](https://www.courier.com/docs/) - [**Courier**](https://www.courier.com/docs/)

2
website/docs/api/docusaurus.config.js.md
View file

@ -563,7 +563,7 @@ module.exports = {
}; };
``` ```
![baseUrlIssueBanner](/img/baseUrlIssueBanner.png) ![A sample base URL issue banner. The style is very raw since the stylesheets failed to load. The text says "Your Docusaurus site did not load properly... Current configured baseUrl = / (default value); We suggest trying baseUrl = /build/](/img/baseUrlIssueBanner.png)
:::caution :::caution

2
website/docs/api/misc/logger/logger.md
View file

@ -66,4 +66,4 @@ An embedded expression is optionally preceded by a flag in the form `[a-z]+=` (a
If the expression is an array, it's formatted by `` `\n- ${array.join('\n- ')}\n` `` (note it automatically gets a leading line end). Each member is formatted by itself and the bullet is not formatted. So you would see the above message printed as: If the expression is an array, it's formatted by `` `\n- ${array.join('\n- ')}\n` `` (note it automatically gets a leading line end). Each member is formatted by itself and the bullet is not formatted. So you would see the above message printed as:
![demo](./demo.png) ![Some text output in the terminal, containing array, code, name, and number formatting](./demo.png)

4
website/docs/api/plugins/plugin-pwa.md
View file

@ -66,7 +66,7 @@ For a more exhaustive list of what it takes for your site to be a PWA, refer to
If your browser supports it, you should be able to install a Docusaurus site as an app. If your browser supports it, you should be able to install a Docusaurus site as an app.
![pwa_install.gif](/img/pwa_install.gif) ![A screen recording of the installation process. A button appears in the address bar of the browser, which displays a dialog asking "install this application?" when clicked. After clicking the "Install" button, a new application is opened in the operating system, opening to the Docusaurus homepage.](/img/pwa_install.gif)
:::note :::note
@ -298,6 +298,6 @@ The `@theme/PwaReloadPopup` component is rendered when a new service worker is w
The default theme includes an implementation for the reload popup and uses [Infima Alerts](https://infima.dev/docs/components/alert). The default theme includes an implementation for the reload popup and uses [Infima Alerts](https://infima.dev/docs/components/alert).
![pwa_reload.gif](/img/pwa_reload.gif) ![A screen recording of the reload process. An alert box shows in the bottom right of the window, saying "New content available". After clicking the "Refresh" button, the page's main heading changes from "Introduction" to "PWA :))".](/img/pwa_reload.gif)
Your component can render `null`, but this is not recommended: users won't have a way to get up-to-date content. Your component can render `null`, but this is not recommended: users won't have a way to get up-to-date content.

2
website/docs/introduction.md
View file

@ -15,7 +15,7 @@ slug: /
🧐 Docusaurus is a **static-site generator**. It builds a **single-page application** with fast client-side navigation, leveraging the full power of **React** to make your site interactive. It provides out-of-the-box **documentation features** but can be used to create **any kind of site** (personal website, product, blog, marketing landing pages, etc). 🧐 Docusaurus is a **static-site generator**. It builds a **single-page application** with fast client-side navigation, leveraging the full power of **React** to make your site interactive. It provides out-of-the-box **documentation features** but can be used to create **any kind of site** (personal website, product, blog, marketing landing pages, etc).
![Docusaurus Slash Introduction](/img/slash-introducing.svg) ![](/img/slash-introducing.svg)
## Fast Track ⏱️ {#fast-track} ## Fast Track ⏱️ {#fast-track}

2
website/versioned_docs/version-2.0.1/api/docusaurus.config.js.md
View file

@ -567,7 +567,7 @@ module.exports = {
}; };
``` ```
![baseUrlIssueBanner](/img/baseUrlIssueBanner.png) ![A sample base URL issue banner. The style is very raw since the stylesheets failed to load. The text says "Your Docusaurus site did not load properly... Current configured baseUrl = / (default value); We suggest trying baseUrl = /build/](/img/baseUrlIssueBanner.png)
:::caution :::caution

2
website/versioned_docs/version-2.0.1/api/misc/logger/logger.md
View file

@ -66,4 +66,4 @@ An embedded expression is optionally preceded by a flag in the form `[a-z]+=` (a
If the expression is an array, it's formatted by `` `\n- ${array.join('\n- ')}\n` `` (note it automatically gets a leading line end). Each member is formatted by itself and the bullet is not formatted. So you would see the above message printed as: If the expression is an array, it's formatted by `` `\n- ${array.join('\n- ')}\n` `` (note it automatically gets a leading line end). Each member is formatted by itself and the bullet is not formatted. So you would see the above message printed as:
![demo](./demo.png) ![Some text output in the terminal, containing array, code, name, and number formatting](./demo.png)

4
website/versioned_docs/version-2.0.1/api/plugins/plugin-pwa.md
View file

@ -66,7 +66,7 @@ For a more exhaustive list of what it takes for your site to be a PWA, refer to
If your browser supports it, you should be able to install a Docusaurus site as an app. If your browser supports it, you should be able to install a Docusaurus site as an app.
![pwa_install.gif](/img/pwa_install.gif) ![A screen recording of the installation process. A button appears in the address bar of the browser, which displays a dialog asking "install this application?" when clicked. After clicking the "Install" button, a new application is opened in the operating system, opening to the Docusaurus homepage.](/img/pwa_install.gif)
:::note :::note
@ -298,6 +298,6 @@ The `@theme/PwaReloadPopup` component is rendered when a new service worker is w
The default theme includes an implementation for the reload popup and uses [Infima Alerts](https://infima.dev/docs/components/alert). The default theme includes an implementation for the reload popup and uses [Infima Alerts](https://infima.dev/docs/components/alert).
![pwa_reload.gif](/img/pwa_reload.gif) ![A screen recording of the reload process. An alert box shows in the bottom right of the window, saying "New content available". After clicking the "Refresh" button, the page's main heading changes from "Introduction" to "PWA :))".](/img/pwa_reload.gif)
Your component can render `null`, but this is not recommended: users won't have a way to get up-to-date content. Your component can render `null`, but this is not recommended: users won't have a way to get up-to-date content.

2
website/versioned_docs/version-2.0.1/introduction.md
View file

@ -15,7 +15,7 @@ slug: /
🧐 Docusaurus is a **static-site generator**. It builds a **single-page application** with fast client-side navigation, leveraging the full power of **React** to make your site interactive. It provides out-of-the-box **documentation features** but can be used to create **any kind of site** (personal website, product, blog, marketing landing pages, etc). 🧐 Docusaurus is a **static-site generator**. It builds a **single-page application** with fast client-side navigation, leveraging the full power of **React** to make your site interactive. It provides out-of-the-box **documentation features** but can be used to create **any kind of site** (personal website, product, blog, marketing landing pages, etc).
![Docusaurus Slash Introduction](/img/slash-introducing.svg) ![](/img/slash-introducing.svg)
## Fast Track ⏱️ {#fast-track} ## Fast Track ⏱️ {#fast-track}

2
website/versioned_docs/version-2.1.0/api/docusaurus.config.js.md
View file

@ -563,7 +563,7 @@ module.exports = {
}; };
``` ```
![baseUrlIssueBanner](/img/baseUrlIssueBanner.png) ![A sample base URL issue banner. The style is very raw since the stylesheets failed to load. The text says "Your Docusaurus site did not load properly... Current configured baseUrl = / (default value); We suggest trying baseUrl = /build/](/img/baseUrlIssueBanner.png)
:::caution :::caution

2
website/versioned_docs/version-2.1.0/api/misc/logger/logger.md
View file

@ -66,4 +66,4 @@ An embedded expression is optionally preceded by a flag in the form `[a-z]+=` (a
If the expression is an array, it's formatted by `` `\n- ${array.join('\n- ')}\n` `` (note it automatically gets a leading line end). Each member is formatted by itself and the bullet is not formatted. So you would see the above message printed as: If the expression is an array, it's formatted by `` `\n- ${array.join('\n- ')}\n` `` (note it automatically gets a leading line end). Each member is formatted by itself and the bullet is not formatted. So you would see the above message printed as:
![demo](./demo.png) ![Some text output in the terminal, containing array, code, name, and number formatting](./demo.png)

4
website/versioned_docs/version-2.1.0/api/plugins/plugin-pwa.md
View file

@ -66,7 +66,7 @@ For a more exhaustive list of what it takes for your site to be a PWA, refer to
If your browser supports it, you should be able to install a Docusaurus site as an app. If your browser supports it, you should be able to install a Docusaurus site as an app.
![pwa_install.gif](/img/pwa_install.gif) ![A screen recording of the installation process. A button appears in the address bar of the browser, which displays a dialog asking "install this application?" when clicked. After clicking the "Install" button, a new application is opened in the operating system, opening to the Docusaurus homepage.](/img/pwa_install.gif)
:::note :::note
@ -298,6 +298,6 @@ The `@theme/PwaReloadPopup` component is rendered when a new service worker is w
The default theme includes an implementation for the reload popup and uses [Infima Alerts](https://infima.dev/docs/components/alert). The default theme includes an implementation for the reload popup and uses [Infima Alerts](https://infima.dev/docs/components/alert).
![pwa_reload.gif](/img/pwa_reload.gif) ![A screen recording of the reload process. An alert box shows in the bottom right of the window, saying "New content available". After clicking the "Refresh" button, the page's main heading changes from "Introduction" to "PWA :))".](/img/pwa_reload.gif)
Your component can render `null`, but this is not recommended: users won't have a way to get up-to-date content. Your component can render `null`, but this is not recommended: users won't have a way to get up-to-date content.

2
website/versioned_docs/version-2.1.0/introduction.md
View file

@ -15,7 +15,7 @@ slug: /
🧐 Docusaurus is a **static-site generator**. It builds a **single-page application** with fast client-side navigation, leveraging the full power of **React** to make your site interactive. It provides out-of-the-box **documentation features** but can be used to create **any kind of site** (personal website, product, blog, marketing landing pages, etc). 🧐 Docusaurus is a **static-site generator**. It builds a **single-page application** with fast client-side navigation, leveraging the full power of **React** to make your site interactive. It provides out-of-the-box **documentation features** but can be used to create **any kind of site** (personal website, product, blog, marketing landing pages, etc).
![Docusaurus Slash Introduction](/img/slash-introducing.svg) ![](/img/slash-introducing.svg)
## Fast Track ⏱️ {#fast-track} ## Fast Track ⏱️ {#fast-track}