fix(docs): fixed images links to use always ./images (#19875)

Co-authored-by: Muescha <>

docs/blog/2018-08-24-gatsby-aws-hosting/index.md

@@ -7,7 +7,7 @@ excerpt: "In this post, we'll walk through how to host & publish your next Gatsb
 canonicalLink: "https://aws-amplify.github.io/amplify-js/media/hosting_guide"
 ---
 
-![Publishing Your Next Gatsby Site to AWS With AWS Amplify](images/gatsbyaws.jpeg)
+![Publishing Your Next Gatsby Site to AWS With AWS Amplify](./images/gatsbyaws.jpeg)
 
 In this post, we'll walk through how to host & publish your next Gatsby site to AWS using [AWS Amplify](https://aws-amplify.github.io/).
 
@@ -57,33 +57,33 @@ Now that the GitHub project has been created we can log into the [Amplify Consol
 
 From here, under Deploy we can click GET STARTED:
 
-![Amplify Console](images/amplify1.png)
+![Amplify Console](./images/amplify1.png)
 
 Next, we'll choose GitHub as our repository & click **Next**.
 
-![Choosing repo](images/amplify2.png)
+![Choosing repo](./images/amplify2.png)
 
 Then connect the mater branch of the new repo we just created & click **Next**:
 
-![Choosing branch](images/amplify3.png)
+![Choosing branch](./images/amplify3.png)
 
 In this view, we can review the default build settings & click **Next** to continue:
 
-![Build settings](images/amplify4.png)
+![Build settings](./images/amplify4.png)
 
 Finally, we can review the deployment & click **Save & Deploy** when we're ready to deploy our app:
 
-![Deploying](images/amplify5.png)
+![Deploying](./images/amplify5.png)
 
 Once the deployment is successful, you should see this:
 
-![Successful deployment](images/amplify6.png)
+![Successful deployment](./images/amplify6.png)
 
 To view details of the deployment, click on the name of the branch (in our case, **master**).
 
 In this view, you can see details about the deployment including a link to view the app & screenshots of the app on different devices.
 
-![Deployment details](images/amplify7.png)
+![Deployment details](./images/amplify7.png)
 
 ## Kicking off a new build
 
@@ -113,11 +113,11 @@ git push origin master
 
 Now, when we go back into the Amplify console we'll see that a new build has been started:
 
-![New build](images/amplify8.png)
+![New build](./images/amplify8.png)
 
 When the build is completed & we launch the app, we should now see our new heading:
 
-![New build completed](images/amplify9.png)
+![New build completed](./images/amplify9.png)
 
 ## Next Steps
 

docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md

@@ -49,7 +49,7 @@ which updates packages.json
 ...
 ```
 
-![Kentico Cloud source plugin](images/illustration-01.png)
+![Kentico Cloud source plugin](./images/illustration-01.png)
 
 The plugin acts as a middle layer between the headless CMS and your website implementation. It gets all content items, creates GraphQL nodes out of them, and it builds all kinds of relationships among them. This allows you to leverage GraphQL in any component or page to properly separate functionality into blocks and modules.
 
@@ -101,7 +101,7 @@ Implementing the site using Gatsby and the Kentico Cloud source plugin is super
 
 The first question is clear; you can keep using the same hosting provider and plan you have currently, right? But with the new implementation, all generated pages are just static files. You probably won't need the same amount of computing power or server memory. In our case, we decided to host the website on GitHub Pages, as the git repository is already hosted there, and the price is very tempting (0 USD). It also supports custom domains.
 
-![Deploying static site](images/illustration-02.png)
+![Deploying static site](./images/illustration-02.png)
 
 The answer to the second question is a bit more complicated. A static site needs to be regenerated every time the content or the site's source code is changed. We are using the Travis CI tool for automatic build and deployment to GitHub Pages. When there is an implementation change (push to GitHub repository), Travis is invoked automatically. For content changes, we are using [Kentico Cloud webhooks](http://bit.ly/2QzOdeS) - this works flawlessly! Whenever an editor publishes a new content item, webhook notification triggers a Travis build. Travis pulls the content from Kentico Cloud, fetches source code from GitHub, and after few moments of magic combines them into a nice set of static files - your static site. The last step of Travis is deployment to GitHub Pages.
 

docs/blog/2019-01-24-swag-store/index.md

@@ -57,13 +57,13 @@ Since we had so many things to choose from, we needed something lightweight as a
 
 We also wanted the process of buying swag to be a fun and personable experience from beginning to end. People so willingly show their appreciation for Gatsby, and we wanted to be able to show our excitement and appreciation, too.
 
-![Tina Fey in a money shower](images/money-shower.gif)
+![Tina Fey in a money shower](./images/money-shower.gif)
 
 ## Figuring Out Our Limitations and Our Strengths
 
 Now that we’d decided on _what_ we were going to have, we came up against the inevitable, ever burning question, “How the hell can we make this work?”
 
-![Rosie Perez "What?"](images/giphy-1.gif)
+![Rosie Perez "What?"](./images/giphy-1.gif)
 
 And that question could only be answered by looking at what we had—and what we didn’t have. We had to identify our limitations and strengths.
 
@@ -181,7 +181,7 @@ But what did that process actually look like? We had our starting point — some
 
 Basically, our process looked like this:
 
-![South Park Underpants Gnomes](images/1_93222BZZGSWF__LBsgVvPg.jpg)
+![South Park Underpants Gnomes](./images/1_93222BZZGSWF__LBsgVvPg.jpg)
 _The Gatsby Swag Project off to a strong start!_
 
 So we worked with what we had — starting at the end and worked our way backwards.
@@ -222,7 +222,7 @@ Since we were going with an “automation first” framework, we had a lot to co
 
 Eventually, by working backwards from the end, we created a full process and recorded it using [Whimsical](https://whimsical.co/). You can see our flow chart [here](https://whimsical.co/HrgMvcBZxyyWxcPPAUzPXf)!
 
-![Flow chart with the step by step swag process](images/1_tzPNjNB2Lf0w_7mu21JDTQ.png)
+![Flow chart with the step by step swag process](./images/1_tzPNjNB2Lf0w_7mu21JDTQ.png)
 _Flow chart with the step by step swag process_
 
 The top section lists each tool that we’re using to manage and automated the swag process.

docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md

@@ -133,7 +133,7 @@ gatsby develop
 
 After running that command, you can visit [localhost:8000](http://localhost:8000) in the browser and you should see the site pictured below:
 
-![Initial appearance of Gatsby.js starter](images/gatsby1.png)
+![Initial appearance of Gatsby.js starter](./images/gatsby1.png)
 
 The site provides a navbar with a link going back to the homepage. There is also a bit of content with a link to page 2 which then provides a link back to page 1. It's a very simple site, but already you can see how fast Gatsby.js is.
 
@@ -228,7 +228,7 @@ If the Gatsby site is currently running, you need to stop it and restart it so i
 
 Once you've restarted your server, you can visit [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql) to use the "graphical" playground. Here, you can use GraphQL to query your data for testing purposes. You should create opening and closing curly braces and then you can use shift+space (or ctrl+space on windows) to get suggestions. Once you have the data you want, you will be able to paste the query into your components, pages, and templates so you can use the information available. Here's what my query looks like for now:
 
-![GraphQL query tests](images/gatsby2.png)
+![GraphQL query tests](./images/gatsby2.png)
 
 You may notice that there are several drilldowns inside of the `acf` field. This is saying "hey, look for the ACF field called feat_img and get the local, optimized versions of these images so you can use them". Gatsby also provides fragments which means inside of your application you could just put `...GatsbyImageSharpSizes` instead of drilling down so far and Gatsby will know what to do with it.
 
@@ -331,7 +331,7 @@ Just like before, you will need to restart your development server to see these
 
 You can now see all of the pages available and clicking on one should take you to the blog post template you created earlier that just shows Hello World. If this is what you're seeing, congrats! You're ready to move to the next section.
 
-![See a list of pages on the development 404 page](images/gatsby3.png)
+![See a list of pages on the development 404 page](./images/gatsby3.png)
 
 ## Updating our blog post template
 
@@ -402,7 +402,7 @@ The SEO component allows you to pass in dynamic data such as title, description,
 
 Here's what your completed Blog Post looks like after you update the template:
 
-![Completed Blog Post Page](images/gatsby4.png)
+![Completed Blog Post Page](./images/gatsby4.png)
 
 ## Wrapping up blog posts
 

docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/index.md

@@ -117,7 +117,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
 
 Just like before, you can test this to make sure the pages were created as expected by starting your development server and visiting [localhost:8000/stuff](http://localhost:8000/stuff) to get a list of all of the available pages. Again, this is only available in a development environment since a live site will show a different 404 page. You should see an `/about` page and a `/sample-page` page in there. If so, your gatsby-node.js file worked and you can update the template to show the data you want.
 
-![See a list of available pages](images/gatsby1.png)
+![See a list of available pages](./images/gatsby1.png)
 
 ## Updating the page template
 
@@ -279,7 +279,7 @@ export const query = graphql`
 
 And here's what it looks like when you visit the homepage of your blog:
 
-![Finished blog home page](images/gatsby2.png)
+![Finished blog home page](./images/gatsby2.png)
 
 It's looking pretty good so far. You're getting pretty close to being done, you just have a few more things to change and you're ready to start blogging!
 
@@ -316,7 +316,7 @@ The title you're seeing in the header comes from the title listed here. You can
 
 Since you are building a blog using WordPress and want your users to have full control over the data, you should get your site name from WordPress so if it ever changes the user can update it. Fortunately, WordPress makes this available to us through the API, so you can query it in GraphQL like so:
 
-![Graphql query to get siteName from WordPress](images/gatsby3.png)
+![Graphql query to get siteName from WordPress](./images/gatsby3.png)
 
 Using queries works a bit differently inside of components. Rather than just writing a query which drops data into your page or template, you have to use a new component called `StaticQuery` which is designed specifically for using queries inside of components.
 
@@ -421,7 +421,7 @@ export default Header
 
 The header component above looks a little different than it originally did, but as you start to dig into it a bit more you can see it hasn't changed much. You essentially just wrapped your header in the StaticQuery component and then ran your query inside of that component to give the header the necessary data.
 
-![Your Gatsby.js blog after updating the header component](images/gatsby4.png)
+![Your Gatsby.js blog after updating the header component](./images/gatsby4.png)
 
 ### Adding a Menu to the Header
 
@@ -505,7 +505,7 @@ module.exports = {
 
 If you look at the code above, you'll notice you have added two new routes to the gatsby-source-wordpress. These routes are created automatically by the plugin inside of WordPress without any additional configuration. Remember, after making changes to files outside of the src folder, you need to restart your development server by running `gatsby develop`. After restarting, you can visit [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql) and query for the menu information, which will look like the screenshot below.
 
-![GraphiQL query to get menu items from WordPress](images/gatsby6.png)
+![GraphiQL query to get menu items from WordPress](./images/gatsby6.png)
 
 The final step is to add this query into your static query and create the menu itself in the header component. You can just drop this in under the wordpressSiteMetadata piece. Once you have it added into the query, you can just use a `map()` function to iterate over the menu items and create it dynamically, allowing the user to update it through WordPress. Doing it this way does require us to specify which menu you want, so you need the name of the menu which is set in WordPress. In this case, your menu is called Main Menu so you will use that in your query.
 
@@ -584,7 +584,7 @@ export default Header
 
 That's a good looking component! Let's see what it looks like when you visit the site:
 
-![Blog after adding menu to header](images/gatsby7.png)
+![Blog after adding menu to header](./images/gatsby7.png)
 
 ## Wrapping up
 

docs/blog/2019-08-07-theme-jam/index.md

@@ -13,7 +13,7 @@ At the beginning of July, [Brent Jackson](https://twitter.com/jxnblk) joined _Le
 
 ## What is the Theme Jam?
 
-![Theme Jam illustration by Maggie Appleton.](images/theme-jam.png)
+![Theme Jam illustration by Maggie Appleton.](./images/theme-jam.png)
 
 In a nutshell, the Theme Jam was a way for Gatsby to give back to its community: everyone who published a theme and submitted it to the Theme Jam will receive exclusive swag designed by [Maggie Appleton](https://maggieappleton.com/). Two creators who published themes our team reviewed as exemplary are getting an all-expenses paid trip to [Gatsby Days](https://www.gatsbyjs.com/resources/gatsby-days/). (For more details, see the [rules](https://themejam.gatsbyjs.org/rules).)
 
@@ -61,15 +61,15 @@ Two of the themes we received stood out especially. As we reviewed, we all took
 
 ### Vojtěch’s Simplecast Gatsby Theme
 
-![Demo of the Simplecast Gatsby theme.](images/gatsby-theme-simplecast.gif)
+![Demo of the Simplecast Gatsby theme.](./images/gatsby-theme-simplecast.gif)
 
 Vojtěch combined data sourcing from [Simplecast](https://simplecast.com/)’s API, beautiful design, and an explorable UX to create this powerful theme for podcasters.
 
 **Check out the theme: [source code](https://github.com/vojtaholik/gatsby-theme-simplecast) · [demo](https://gatsby-theme-simplecast.netlify.com/)**
 
 ### Allan’s Prismic-Powered Legal Pages Theme
 
-![Screenshot of the Gatsby Prismic Legals theme.](images/gatsby-theme-legals-prismic-mockup.jpg)
+![Screenshot of the Gatsby Prismic Legals theme.](./images/gatsby-theme-legals-prismic-mockup.jpg)
 
 Allan turned something boring (required legal pages) into something beautiful by pulling common legal pages — such as a “terms & conditions” page — from [Prismic](https://prismic.io/) and putting them into a gorgeous UI. This theme highlights theme composability: combine this theme with others to quickly add required legal pages to any Gatsby site!
 

docs/blog/2019-08-13-Localised-strings-from-Kentico-Cloud-GatsbyJS-GraphQL/index.md

@@ -34,11 +34,11 @@ If you want to look at building localized strings, the first step is to head to
 
 Here is a [Content Item](https://docs.kenticocloud.com/tutorials/write-and-collaborate/write-content/adding-content-items) derived from a '_localized String_' Content Type, which has a single field for the 'value'.
 
-![An example of the localized content item](images/Localise-Content-Item.png)
+![An example of the localized content item](./images/Localise-Content-Item.png)
 
 As I mentioned earlier, localized strings work in a pair of 'key' and 'value'. The good thing about Kentico Cloud is that the 'key' is something you could derive from the 'Code name' for the content item and it saves you creating additional fields for it.
 
-![An example of the localized content item, showing the code name](images/Localise-Content-Item-Codename.png)
+![An example of the localized content item, showing the code name](./images/Localise-Content-Item-Codename.png)
 
 You will most likely be utilizing the IDs for the content item, but it's useful to have the code name as well.
 
@@ -47,7 +47,7 @@ You will most likely be utilizing the IDs for the content item, but it's useful
 With your content type set up, the next step is to get your content in – ensuring you add the content for all your languages (I’m assuming you’ve already set up your languages in the settings!).
 
 _(If you need to know how to switch the content from one culture to another have a look at the [switching languages](https://docs.kenticocloud.com/tutorials/write-and-collaborate/create-multilingual-content/switching-languages) section in the Kentico Cloud documentation.)_
-![An example of the localized content item in FR, showing the code name](images/Localise-Content-Item-FR.png)
+![An example of the localized content item in FR, showing the code name](./images/Localise-Content-Item-FR.png)
 
 One thing to remember at this point is that if you want to use similar text (or simply give yourself a starting point) in the destination culture to your original culture, then you can use the [Copy from language](https://docs.kenticocloud.com/tutorials/write-and-collaborate/create-multilingual-content/translating-content-items#a-translating-a-content-item) option once you have switched over to the new culture.
 
@@ -60,18 +60,18 @@ _(Another assumption for you... We’re assuming you have GatsbyJS + GraphQL set
 With your content items in Kentico Cloud, you should be able to see them when you conduct a GraphQL query.
 
 Here is an example of the GraphQL query you will use to retrieve the ID and CodeName for the Content Items from Kentico Cloud using GatsbyJS. Think of this as the 'key' you would need to retrieve the 'value'. You can see the 'codename' and 'id' as potential options that you could use in the below GraphQL query.
-![A view of the GraphiQL preview of retrieving language nodes](images/GraphiQL-retrieve-lang-nodes.png)
+![A view of the GraphiQL preview of retrieving language nodes](./images/GraphiQL-retrieve-lang-nodes.png)
 
 You can retrieve all localization strings using the following GraphQL query.
-![Retrieving all language versions of the localized strings](images/GraphiQL-retrieve-lang-variants.png)
+![Retrieving all language versions of the localized strings](./images/GraphiQL-retrieve-lang-variants.png)
 
 However, to retrieve the actual 'value', there’s a little more to do in your GraphQL query.
 
 Here is an example of a GraphQL query where I am using the 'CodeName'.
-![GraphiQL retrieve language nodes localized strings condition code name](images/GraphiQL-retrieve-lang-variants-based-on-condition-codename.png)
+![GraphiQL retrieve language nodes localized strings condition code name](./images/GraphiQL-retrieve-lang-variants-based-on-condition-codename.png)
 
 And, here is an example of a GraphQL query where I am using the ID.
-![GraphiQL retrieve language nodes localized strings condition ID](images/GraphiQL-retrieve-lang-variants-based-on-condition-id.png)
+![GraphiQL retrieve language nodes localized strings condition ID](./images/GraphiQL-retrieve-lang-variants-based-on-condition-id.png)
 
 As you can see, once you know which 'key' you need, then it's pretty simple to get the 'value' and also detect the language variant you need to retrieve in GatsbyJS using this GraphQL query format.
 

docs/blog/2019-08-14-strivectin-case-study/index.md

@@ -51,7 +51,7 @@ Gatsby provides us with a superior DX and a fast site. This includes:
 
 Gatsby provides conveniences around data fetching. The “Content Mesh” is a mesh of different content sources stitched into a single data layer. You can query this layer using GraphQL. Our “Content Mesh” consists of Prismic, Shopify, and Yotpo. You can see how those data sources make up the Homepage below:
 
-![Strivectin content mesh.](images/content-mesh.png)
+![Strivectin content mesh.](./images/content-mesh.png)
 
 ### Leaving the server behind
 

docs/blog/gatsby-v1.md

@@ -48,7 +48,7 @@ In the last year, Gatsby community and usage have exploded. Milestones reached:
 - JavaScript consultancy
   [Formidable built their website on Gatsby](https://formidable.com/)
 
-![screenshots of above sites](images/site-screenshots.png)
+![screenshots of above sites](./images/site-screenshots.png)
 
 And you're on of course a Gatsby website 😛