diff --git a/docs/api-pages.md b/docs/api-pages.md index 9d5403c220bf..f926b87a1edf 100644 --- a/docs/api-pages.md +++ b/docs/api-pages.md @@ -64,6 +64,7 @@ The `contents` attribute is an array containing the contents of each section of - `imageAlign` field for image alignment relative to the text, which defaults to `top` and can be set to `bottom`, `left`, or `right` - `title` for the title to display for this section, which is parsed from markdown - `imageLink` for a link destination from clicking the image +- `imageAlt` for the description of what text will be shown in case the image is not available Example: @@ -75,7 +76,8 @@ Example: content: "Learn how to use this project", image: siteConfig.baseUrl + "img/learn.png", title: `[Learn](${siteConfig.baseUrl}docs/tutorial.html)`, - imageLink: siteConfig.baseUrl + "docs/tutorial.html" + imageLink: siteConfig.baseUrl + "docs/tutorial.html", + imageAlt: "Learn how to use this project" }, { content: "Questions gathered from the community", diff --git a/examples/basics/pages/en/index.js b/examples/basics/pages/en/index.js index 2a2fa426a4e2..d6db81ee8f65 100755 --- a/examples/basics/pages/en/index.js +++ b/examples/basics/pages/en/index.js @@ -177,7 +177,7 @@ const Showcase = props => { .map((user, i) => { return ( - + {user.caption} ); }); diff --git a/examples/basics/pages/en/users.js b/examples/basics/pages/en/users.js index 297e4194c33c..c113bf5c7264 100644 --- a/examples/basics/pages/en/users.js +++ b/examples/basics/pages/en/users.js @@ -21,7 +21,7 @@ class Users extends React.Component { const showcase = siteConfig.users.map((user, i) => { return ( - + {user.caption} ); }); diff --git a/lib/core/BlogPost.js b/lib/core/BlogPost.js index bb5b123aca21..0effbcb6eadb 100644 --- a/lib/core/BlogPost.js +++ b/lib/core/BlogPost.js @@ -51,6 +51,7 @@ class BlogPost extends React.Component { post.authorFBID + '/picture/?height=200&width=200' } + alt={post.author} /> diff --git a/lib/core/GridBlock.js b/lib/core/GridBlock.js index 5e3ee3c84e90..a6c19b66fc7e 100755 --- a/lib/core/GridBlock.js +++ b/lib/core/GridBlock.js @@ -29,11 +29,11 @@ class GridBlock extends React.Component { const topLeftImage = (block.imageAlign === 'top' || block.imageAlign === 'left') && - this.renderBlockImage(block.image, block.imageLink); + this.renderBlockImage(block.image, block.imageLink, block.imageAlt); const bottomRightImage = (block.imageAlign === 'bottom' || block.imageAlign === 'right') && - this.renderBlockImage(block.image, block.imageLink); + this.renderBlockImage(block.image, block.imageLink, block.imageAlt); return (
@@ -47,20 +47,20 @@ class GridBlock extends React.Component { ); } - renderBlockImage(image, imageLink) { + renderBlockImage(image, imageLink, imageAlt) { if (image) { if (imageLink) { return (
- + {imageAlt}
); } else { return (
- + {imageAlt}
); } diff --git a/lib/core/nav/HeaderNav.js b/lib/core/nav/HeaderNav.js index fb59101b5bbf..63b9033ded2e 100644 --- a/lib/core/nav/HeaderNav.js +++ b/lib/core/nav/HeaderNav.js @@ -217,6 +217,7 @@ class HeaderNav extends React.Component { {siteConfig.title} )} {!this.props.config.disableHeaderTitle && ( diff --git a/website/blog/2017-12-14-introducing-docusaurus.md b/website/blog/2017-12-14-introducing-docusaurus.md index 2aa47fcf4453..b67d3af44134 100644 --- a/website/blog/2017-12-14-introducing-docusaurus.md +++ b/website/blog/2017-12-14-introducing-docusaurus.md @@ -5,7 +5,7 @@ authorURL: http://twitter.com/JoelMarcey authorFBID: 611217057 --- -![](/img/slash-introducing.png) +![Introducing Slash](/img/slash-introducing.png) We are very happy to introduce [Docusaurus](https://github.com/facebook/Docusaurus) to help you manage one or many open source websites. @@ -24,7 +24,7 @@ Docusaurus also provides core website and documentation features out-of-the-box ## The Birth of docusaurus -![](/img/slash-birth.png) +![Birth of Slash](/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. @@ -40,7 +40,7 @@ At Facebook, Docusaurus allows us to quickly get different projects up and runni ## Getting Up and Running -![](/img/slash-upandrunning.png) +![Slash Up and Running](/img/slash-upandrunning.png) At its core, we wanted sites running Docusaurus to be simple to use. With one [installation](https://docusaurus.io/docs/en/installation.html) command and some simple [configuration](https://docusaurus.io/docs/en/site-preparation.html), you can actually have a default running website. @@ -129,7 +129,7 @@ build ## Community -![](/img/docusaurus.svg) +![Docusaurus](/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). diff --git a/website/pages/en/about-slash.js b/website/pages/en/about-slash.js index 49f10fddad78..a9709806d760 100644 --- a/website/pages/en/about-slash.js +++ b/website/pages/en/about-slash.js @@ -19,14 +19,14 @@ class AboutSlash extends React.Component {

About Slash

- + Docusaurus

Slash is the official mascot of Docusaurus. You will find different variations of her throughout the website, whether she is moving fast on her scooter or writing documentation at her standing desk. At Facebook, we have actual Slash plushies -- and you never know, you may see these plushies at various events and conferences in the future.

Birth of Slash

- + Birth of Slash

The team sat in a conference room trying to come up with a name for the project. Dinosaurs became a theme, finally landing on Docusaurus, combining documentation with those many dinosaurs that end in "saurus". Of course, we needed a logo for our new project. Eric sat down and designed a logo that was quite beyond the norm of our normal open source project logos, but yet was just so awesome, we had to use it. We needed a name for this cute Docusaur. "Marky" for markdown? "Docky" for documentation? No, "Slash" for the normal way someone starts code documentation in many programming languages // or /* or ///. And Slash was born.

diff --git a/website/pages/en/index.js b/website/pages/en/index.js index fa92a7726c31..d1ca2de59763 100755 --- a/website/pages/en/index.js +++ b/website/pages/en/index.js @@ -39,7 +39,7 @@ class HomeSplash extends React.Component {
- + Docusaurus with Keytar

@@ -79,7 +79,7 @@ class Index extends React.Component { .map((user, i) => { return ( - + {user.caption} ); }); @@ -100,6 +100,7 @@ class Index extends React.Component { to serve.`, image: `${siteConfig.baseUrl}img/markdown.png`, imageAlign: "top", + imageAlt: "Markdown", title: "Powered by Markdown" }, { @@ -109,6 +110,7 @@ class Index extends React.Component { extended while reusing the same header and footer.`, image: `${siteConfig.baseUrl}img/react.svg`, imageAlign: "top", + imageAlt: "React", title: "Built Using React" }, { @@ -118,6 +120,7 @@ class Index extends React.Component { into over 70 languages.`, image: `${siteConfig.baseUrl}img/translation.svg`, imageAlign: "top", + imageAlt: "Translation", title: "Ready for Translations" } ]} @@ -135,6 +138,7 @@ class Index extends React.Component { helps you keep documentation in sync with project releases.`, image: `${siteConfig.baseUrl}img/versioning.svg`, imageAlign: "top", + imageAlt: "Document Versioning", title: "Document Versioning" }, { @@ -143,6 +147,7 @@ class Index extends React.Component { We proudly support [Algolia documentation search](https://www.algolia.com/).`, image: `${siteConfig.baseUrl}img/search.svg`, imageAlign: "top", + imageAlt: "Document Search", title: "Document Search" } ]} @@ -158,6 +163,7 @@ class Index extends React.Component { quickly without having to worry about site design.`, imageAlign: "right", image: `${siteConfig.baseUrl}img/docusaurus_speed.svg`, + imageAlt: "Docusaurus on a Scooter", title: "Quick Setup" } ]} @@ -177,6 +183,7 @@ class Index extends React.Component { like CircleCI.`, imageAlign: "left", image: `${siteConfig.baseUrl}img/docusaurus_live.gif`, + imageAlt: "Docusaurus Demo", title: "Develop and Deploy" } ]} @@ -197,6 +204,7 @@ class Index extends React.Component { contribute on [GitHub](https://github.com/facebook/docusaurus)!`, imageAlign: "right", image: `${siteConfig.baseUrl}img/docusaurus_monochrome.svg`, + imageAlt: "Monochromatic Docusaurus", title: "Website Features" } ]} @@ -225,6 +233,7 @@ class Index extends React.Component { "I’ve helped open source many projects at Facebook and every one needed a website. They all had very similar constraints: the documentation should be written in markdown and be deployed via GitHub pages. None of the existing solutions were great, so I hacked my own and then forked it whenever we needed a new website. I’m so glad that Docusaurus now exists so that I don’t have to spend a week each time spinning up a new one.", image: `${siteConfig.baseUrl}img/christopher-chedeau.jpg`, imageAlign: "top", + imageAlt: 'Christopher "vjeux" Chedeau', title: 'Christopher "vjeux" Chedeau
Lead Prettier Developer' }, { @@ -232,6 +241,7 @@ class Index extends React.Component { "Open source contributions to the React Native docs have skyrocketed after our move to Docusaurus. The docs are now hosted on a small repo in plain markdown, with none of the clutter that a typical static site generator would require. Thanks Slash!", image: `${siteConfig.baseUrl}img/hector-ramos.png`, imageAlign: "top", + imageAlt: "Hector Ramos", title: 'Hector Ramos
Lead React Native Advocate' }, { @@ -239,6 +249,7 @@ class Index extends React.Component { "Docusaurus has been a great choice for the ReasonML family of projects. It makes our documentation consistent, i18n-friendly, easy to maintain, and friendly for new contributors.", image: `${siteConfig.baseUrl}img/ricky-vetter.jpg`, imageAlign: "top", + imageAlt: "Ricky Vetter", title: 'Ricky Vetter
ReasonReact Developer' } ]} diff --git a/website/pages/en/users.js b/website/pages/en/users.js index 351990865891..1a6ff45a1161 100644 --- a/website/pages/en/users.js +++ b/website/pages/en/users.js @@ -21,7 +21,7 @@ class Users extends React.Component { .map((user, i) => { return ( - + {user.caption} ); }); @@ -33,7 +33,7 @@ class Users extends React.Component { .map((user, i) => { return ( - + {user.caption} ); });