Merge branch 'master' of https://github.com/flotiq/flotiq-docs into f…

…eature/22922-ctd-webhook-documentation

docs/Deep-Dives/Building-a-blog-in-3-minutes.md

@@ -1,21 +1,9 @@
-title: Building a blog in 3 minutes with Flotiq, Gatsby and Heroku | Flotiq docs
-description: A deep dive tutorial on how to build your first blog using a headless CMS system like Flotiq, GatsbyJS and Heroku.
-
-!!! caution
-    This tutorial is based on a deprecated starter. We strongly advise you to look at our new blog starters - 
-    [Gatsby Blog 1 – Gradient](https://flotiq.com/starters/gatsby-blog-1-gradient) and 
-    [Gatsby Blog 2 – Modern](https://flotiq.com/starters/gatsby-blog-2-modern) - described in 
-    [our blog post](https://blog.flotiq.com/flotiq-starter-gatsby-blog). Look at our other 
-    [starters](https://flotiq.com/starters/) if Gatsby blogs don't match your need.
-
-# Building a blog in 3 minutes with Flotiq, Gatsby and Heroku
-
-In this deep dive you will learn how easy it is to build and deploy a blog with Flotiq, Gatsby and Heroku. Follow along and you should end up with a working blog page in no more than 3 minutes!
+title: Building a blog in 3 minutes with Flotiq, Gatsby and Netlify | Flotiq docs
+description: A deep dive tutorial on how to build your first blog using a headless CMS system like Flotiq, GatsbyJS and Netlify.
 
+# Building a blog in 3 minutes with Flotiq, Gatsby and Netlify
 
-<div class="video-wrapper">
-  <iframe width="1280" height="720" src="https://www.youtube.com/embed/hz3RK5qqhrQ" frameborder="0" allowfullscreen></iframe>
-</div>    
+In this deep dive you will learn how easy it is to build and deploy a blog with Flotiq, Gatsby and Netlify. Follow along and you should end up with a working blog page in no more than 3 minutes!
 
 ## Define a Content Type
 
@@ -26,26 +14,28 @@ First off - you will need to define how your content will be structured in Floti
 
 We labeled the new Content Type `Blog Post` and gave it an API name `blogpost`. Once you do that - you'll have to add the properties that will be defined for each of the entries. The `Add property` button will open a form, where you will define the characteristics of each of the fields (like if it's required, what kind of a field it is, etc.):
 
-![](images/3-minute-blog-content-type-title-field.png){: .center .width75 .border}
+![](images/building-a-blog-in-3-minutes/3-minute-blog-content-type-title-field.png){: .center .width75 }
+
+
 Here are the details of the fields we added for this tutorial:
 
 | Field name | Field type | Additional attributes | Comments |
 |------------|------------|-----------------------|----------|
 | title | Text | Required, Part of object title | Title of your post |
 | slug | Text | Required, Unique | URL of the post |
-| content | Richtext | - | The post itself |
-| thumbnail | Relation | Restrict to type: Media | Thumbnail image |
+| content | Richtext | Required | The post itself |
+| excerpt | Text area | Required | Short post description |
 | headerImage | Relation | Restrict to type: Media | Main image of the post |
 
 and this is how the Content Type Editor should look like in the end:
 
-![](images/3-minute-blog-content-type-all-fields.png){: .center .width75 .border}
+![](images/building-a-blog-in-3-minutes/3-minute-blog-content-type-all-fields.png){: .center .width75 }
 
 If you're happy with the result - click the `Save` button and navigate to `Content` → `Blog Posts` in the side menu. 
 
 !!! hint
     At this point you can also verify the result of your work in the [Dynamic Content API](../API/dynamic-content-api.md) - head to you API docs and see how the API has automatically expanded to support your new Content Type:
-    ![](images/3-minute-blog-content-api.png)
+    ![](images/building-a-blog-in-3-minutes/3-minute-blog-content-api.png)
 
     Three important things to note here:
 
@@ -62,40 +52,44 @@ If you're happy with the result - click the `Save` button and navigate to `Conte
 
 It's now time to write your first post! The first time you go to the `Blog Posts` item in the `Content` menu you will be prompted with a screen encouraging to create your first Content Object, go ahead and click the `Add new Blog Post object` button. You will see an empty form that is automatically generated based on the Content Type Definition you provided in the previous step. Fill it in, however you like!
 
-![](images/3-minute-blog-first-post.png){: .center .width75 .border}
+![](images/building-a-blog-in-3-minutes/3-minute-blog-first-post.png){: .center .width75 }
 
 That's it. Now make sure you have your [read-only API key](../API/index.md) in your clipboard!
 
 ## Deploy
 
 !!! caution
-    This part assumes you already have a Heroku account. It's free to create and doesn't require a Credit Card, just like Flotiq, so we really recommend it. If you don't have a Heroku account yet, [click here to sign up](https://signup.heroku.com/).
+    This part assumes you already have a Netlify account. It's free to create and doesn't require a Credit Card, just like Flotiq, so we really recommend it. If you don't have a Netlify account yet, [click here to sign up](https://app.netlify.com/signup){:target="_blank"}
 
 Ok, we're almost done. Have your API key in the clipboard? 
-Click here: [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/flotiq/gatsby-starter-blog) and paste the key in the `Flotiq API key` field. 
+Click here: [![Deploy](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/flotiq/flotiq-gatsby-blog-1){: .button-center-vertical} and paste the key in the `YOUR FLOTIQ API KEY` field. 
 
-![](images/3-minute-blog-deploy-to-heroku.png){: .center .width75 .border}
+![](images/building-a-blog-in-3-minutes/3-minute-blog-deploy-to-netlify.png){: .center .width75 .border}
 
-Also make sure to give your app a name, then click `Deploy app` and there - in a minute your blog will become publicly available! Just like [this one](https://flotiq-blog.herokuapp.com/).
+Also make sure to give your app a name, then click `Save & Deploy` and there - in a minute your blog will become publicly available! Just like [this one](https://flotiq-gatsby-blog-1.netlify.app/).
 
 
 !!! success
     Congratulations! You just deployed your Flotiq-based blog. Please share your success with us - drop us an email, a chat message or mention us on Twitter. We're eager to see what you build!
 
 !!! note 
-    For this particular example we used the seminal work of Gatsby developers and forked their `gatsbyjs/gatsby-starter-blog` in order to provide integrations with Flotiq and Heroku. You can explore [our Github repository](https://github.com/flotiq/gatsby-starter-blog) to see how easy it was to connect Gatsby to Flotiq. 
+    For this particular example we used our blog boilerplate with the main Gatsby configuration in order to provide integrations with Flotiq and Netlify. You can explore [our Github repository](https://github.com/flotiq/flotiq-gatsby-blog-1) to see how easy it was to connect Gatsby to Flotiq. 
 
 The end result should look like this:
 
-![](images/3-minute-blog-published-post.png){: .center .border .width75}
+![](images/building-a-blog-in-3-minutes/3-minute-blog-published-post.png){: .center .border .width75}
+
+Result after open the post:
+
+![](images/building-a-blog-in-3-minutes/3-minute-blog-published-post-open.png){: .center .border .width75}
 
 ## Summary
 
 Congrats! Your all-shiny blog should now be live. You also learned a couple of important concepts that will help you make the most out of your Flotiq account, here's the recap:
 
 1. Defining Content Types with constraints,
 2. Populating data,
-3. Deploying a Flotiq-powered blog to Heroku, via Gatsby.
+3. Deploying a Flotiq-powered blog to Netlify, via Gatsby.
 
 You probably want to get your hands dirty now, huh? Try the [next deep dive](wordpress-import.md) and see how Flotiq makes your work easier with SDK packages that will put your Content Types straight into your favorite IDE. Oh, and by the way we will import all your Wordpress posts at the same time.
 

docs/Deep-Dives/jamstack-recipes-website-complex-data-structures.md

@@ -1,13 +1,6 @@
 title: Building a stunning recipe website with Flotiq and Gatsby | Flotiq docs
 description: A deep dive tutorial on Flotiq's complex data structures and accidentally building a stunning recipes website with Gatsby.
 
-!!! caution
-    This tutorial is based on a deprecated starter. We strongly advise you to look at our new blog starters - 
-    [Gatsby Recipe 1 – Black and White Classic](https://flotiq.com/starters/gatsby-recipe-1-black-and-white-classic) and 
-    [Gatsby Recipe 2 – All you can eat](https://flotiq.com/starters/gatsby-recipe-2-all-you-can-eat) - described in 
-    [our blog post](https://blog.flotiq.com/recipe-website-using-complex-data-structure-and-gatsby-starter). Look at our other 
-    [starters](https://flotiq.com/starters/) if Gatsby recipe website don't match your need.
-
 # Building a recipes website using complex data structures
 
 ## Introduction
@@ -16,7 +9,7 @@ Once you start building data models that are a little more complex you'll find t
 
 In this article we'll discuss a couple of particular problems you might encounter in designing a data model and later - working with it. Accidentally - we'll also build a stunning website with your favorite culinary recipes (scrambled eggs, of course). 
 
-![Recipes website built using Gatsby and Flotiq](https://editor.flotiq.com/images/flotiq-starter-recipes.png){: .center .width75 .border}
+![Recipes website built using Gatsby and Flotiq](images/jamstack-recipes-complex-data-structures/flotiq-starter-gatsby-recipe.png){: .center .width75 .border}
 
 A simple `Recipe` model you might find useful for a recipe website could look like this:
 
@@ -31,11 +24,11 @@ A simple `Recipe` model you might find useful for a recipe website could look li
 
 For such a model - Flotiq would generate a form looking like this:
 
-![Flotiq form for a simple data model](images/jamstack-recipes-complex-data-structures/upload_5466699a3bcd1bdc5e419f2d17240c37.png){: .center .width75 .border}
+![Flotiq form for a simple data model](images/jamstack-recipes-complex-data-structures/flotiq-form-simple-data-model.png){: .center .width75 .border}
 
 and your API docs would describe that model this way:
 
-![Flotiq API docs for a simple data model](images/jamstack-recipes-complex-data-structures/upload_0158c43f8d5cc1154fddd8ae68a15ae9.png){: .center .width75 .border}
+![Flotiq API docs for a simple data model](images/jamstack-recipes-complex-data-structures/flotiq-api-docs-simple-model.png){: .center .width75 .border}
 
 This model might be acceptable for very simple websites, but having the `Ingredients` and `Steps` entered as unstructured text (even if using HTML `<li>`) will soon become an issue. 
 
@@ -79,7 +72,7 @@ The problem of unstructured data can be solved using repeatable content fragment
 
 Here's how you would go about it with Flotiq's `list` data type:
 
-![Flotiq's list data type](images/jamstack-recipes-complex-data-structures/upload_9ecd3721c970774c2735a195ff55643f.png){: .center .width75 .border}
+![Flotiq's list data type](images/jamstack-recipes-complex-data-structures/flotiq-list-data-type.png){: .center .width75 .border}
 
 
 Benefits:
@@ -112,21 +105,21 @@ We can now extend the example mentioned above:
 
 Your Content Type definition in Flotiq would then look like this:
 
-![Recipe content type definition using lists](images/jamstack-recipes-complex-data-structures/upload_7d565cfe5f5df4287c3d7e0d7004fc94.png){: .center .width75 .border}
+![Recipe content type definition using lists](images/jamstack-recipes-complex-data-structures/recipe-content-type-definition-list.png){: .center .width75 .border}
 
 and you would expect this in the API docs:
 
-![Recipe API docs showing lists](images/jamstack-recipes-complex-data-structures/upload_769871eca6460389041c8c52c381826f.png){: .center .width75 .border}
+![Recipe API docs showing lists](images/jamstack-recipes-complex-data-structures/recipe-api-doc-showing-lists.png){: .center .width75 .border}
 
 > Yup, we know, we're drooling over Flotiq's API docs every time, too. And you know what? You don't need to write a line of code - the docs, just as your entire RESTful API are generated every time you change your model definitions!
 
 And this is how the form for that Content Type would render:
 
-![Flotiq form for a content object using lists](images/jamstack-recipes-complex-data-structures/upload_a99534a9bf1aee346e58aec39037bfd5.png){: .center .width75 .border}
+![Flotiq form for a content object using lists](images/jamstack-recipes-complex-data-structures/recipe-object-scrambled-eggs-list.png){: .center .width75 }
 
 We used the `list` datatype in this [Gatsby & Flotiq recipes starter](https://github.com/flotiq/gatsby-starter-recipes) and you can see the results [here](https://flotiq-starter-recipes.herokuapp.com/). With this data model it's now really simple for a frontend developer to interpret that content on the website.
 
-![Full example of a recipe using Flotiq lists](images/jamstack-recipes-complex-data-structures/upload_7dd4947f6433fabfaf9c94170b445dc4.png){: .center .width75 .border}
+![Full example of a recipe using Flotiq lists](images/jamstack-recipes-complex-data-structures/full-example-recipe-scrambled-eggs.png){: .center .width75 .border}
 
 ## Experiment with the Gatsby starter
 
@@ -149,7 +142,7 @@ If you'd like to dig a little deeper into this recipe website, here's your quick
 
     Create your [Flotiq.com](https://flotiq.com) account. Next, create the `Recipe` Content Type:
 
-    ![Recipe content type in flotiq](images/create-definition-recipe.png){: .center .width75 .border}
+    ![Recipe content type in flotiq](images/jamstack-recipes-complex-data-structures/add-definition-type-recipe.png){: .center .width75 .border}
 
     _Note: You can also create `Recipe` using [Flotiq REST API](https://flotiq.com/docs/API/)._