diff --git a/docs/docs/awesome-gatsby.md b/docs/docs/awesome-gatsby.md index f20a32f63f83f..a515303328679 100644 --- a/docs/docs/awesome-gatsby.md +++ b/docs/docs/awesome-gatsby.md @@ -66,6 +66,7 @@ See the [library of official and community plugins](/plugins/) - [Zero to Deploy: A Practical Guide to Static Sites with Gatsby.js](https://scotch.io/tutorials/zero-to-deploy-a-practical-guide-to-static-sites-with-gatsbyjs) - [Build blazing fast web applications with Gatsby 101](https://gatsbyguides.com/) - [Build a Coffee Shop Website w/ Gatsby, Contentful, SnipCard & Formspree](https://www.youtube.com/watch?v=oAVhEPey_qA) +- [Why I used GatsbyJS](https://medium.com/@jameshunt.co/why-i-used-gatsbyjs-70bbb0f5c4a7) ### German diff --git a/docs/docs/dropping-images-into-static-folders.md b/docs/docs/dropping-images-into-static-folders.md deleted file mode 100644 index 7107bafc0157a..0000000000000 --- a/docs/docs/dropping-images-into-static-folders.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Dropping Images into Static Folders -issue: https://github.com/gatsbyjs/gatsby/issues/8103 ---- - -This is a stub. Help our community expand it. - -Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your -pull request gets accepted. diff --git a/docs/docs/images-and-files.md b/docs/docs/images-and-files.md index 26e90445b5140..13c4b49b15afc 100644 --- a/docs/docs/images-and-files.md +++ b/docs/docs/images-and-files.md @@ -1,8 +1,8 @@ --- -title: Images and Files +title: Images, Video, and Files overview: true --- -Gatsby provides multiple solutions for adding images and files into your projects. This section will walk you through several common patterns for handling images and files in Gatsby projects. +Gatsby provides multiple solutions for adding images, video, and files into your projects. This section will walk you through several common patterns for handling media in Gatsby projects. [[guidelist]] diff --git a/docs/docs/importing-media-content.md b/docs/docs/importing-media-content.md index 49937acce878d..81a8c3f23ff73 100644 --- a/docs/docs/importing-media-content.md +++ b/docs/docs/importing-media-content.md @@ -1,9 +1,25 @@ --- -title: Importing media content -issue: https://github.com/gatsbyjs/gatsby/issues/8103 +title: Importing Media Content --- -This is a stub. Help our community expand it. +"Media content" is a broad term that generally includes images, videos, documents and files that are displayed on your website. For Gatsby sites, you have multiple options for importing media content depending on the type: -Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your -pull request gets accepted. +## Images, SVG, and PDFs + +- [Image graphics can be imported](/docs/adding-images-fonts-files/) with Webpack and queried with GraphQL. +- Images can also be [included from the `static folder`](/docs/adding-images-fonts-files/#using-the-static-folder). +- SVG content can be embedded into JSX. Here's a [handy JSX converter](https://transform.now.sh/html-to-jsx/). +- SVG can be included in `img` tags or CSS backgrounds. [SVG Tips from CSS Tricks](https://css-tricks.com/using-svg/). +- For PDF files, we recommend embedding an [image of the PDF](https://helpx.adobe.com/acrobat/using/exporting-pdfs-file-formats.html) with [alternative text](https://a11y-101.com/development/infographics), and providing a link to download a [tagged PDF](https://helpx.adobe.com/acrobat/using/creating-accessible-pdfs.html). + +## Video assets + +Like images, video assets present many options and requirements for cross-browser support. Learn about video embeds on the Gatsby docs page on [working with video](/docs/working-with-video/). + +## Canvas and WebGL + +The HTML5 `` element provides a space for 2-dimensional drawing in a web environment. In Gatsby and React, it may help to include a library like [react-konva](https://github.com/konvajs/react-konva) or one of the comparison libraries to cut down on boilerplate and make drawing easier. + +[WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL), on the other hand, creates a 3-dimensional space in a web environment using the `` element. Libraries like [Three.js](https://threejs.org/) are often used to enable WebGL experiences in React apps. + +> Using canvas and/or WebGL may require modifying your Webpack config. Do you have experience with making this work in your Gatsby site? Contribute to the docs by adding more details to this page. diff --git a/docs/docs/importing-single-files.md b/docs/docs/importing-single-files.md deleted file mode 100644 index 042393195c6aa..0000000000000 --- a/docs/docs/importing-single-files.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Importing single files -issue: https://github.com/gatsbyjs/gatsby/issues/8103 ---- - -This is a stub. Help our community expand it. - -Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your -pull request gets accepted. diff --git a/docs/docs/working-with-video.md b/docs/docs/working-with-video.md new file mode 100644 index 0000000000000..1c75b4d098893 --- /dev/null +++ b/docs/docs/working-with-video.md @@ -0,0 +1,142 @@ +--- +title: Working With Video +--- + +- [Sourcing video from a host](#sourcing-video-from-a-host) +- [Embedding hosted videos in Markdown](#embedding-hosted-videos-in-markdown) +- [Writing custom components for hosted video](#writing-custom-components-for-hosted-video) +- [Querying video data from Markdown with GraphQL](#querying-video-data-from-markdown-with-graphql) +- [Hosting your own HTML5 video files](#hosting-your-own-html5-video-files) +- [Using custom video players](#using-custom-video-players) + +## Sourcing video from a host + +The easiest method for including video on a Gatsby site is to source an uploaded file from a site like YouTube, Vimeo, or Twitch. Using the source URL from one of those hosts, you can use Remark plugins or create a custom `