docs(tutorial): add Part 5 (#32344)

Co-authored-by: Lennart <lekoarts@gmail.com>
gatsbyjs · Jul 14, 2021 · 97df178 · 97df178
1 parent 9657802
commit 97df178
Show file tree

Hide file tree

Showing 18 changed files with 667 additions and 590 deletions.
diff --git a/docs/docs/tutorial/part-4/index.mdx b/docs/docs/tutorial/part-4/index.mdx
@@ -2,7 +2,7 @@
 title: "Part 4: Query for Data with GraphQL"
 ---
 
-import { Announcement, Notification } from 'gatsby-interface'
+import { Announcement, Notification, LinkButton } from 'gatsby-interface'
 import Collapsible from '@components/collapsible'
 import { MdInfo } from 'react-icons/md'
 
@@ -909,24 +909,10 @@ Use the "Was this doc helpful to you?" form at the bottom of this page to let us
 
 In Part 5, you'll add some content to your blog posts using a special format called MDX. You'll also learn about transformer plugins, which you can use to convert data in your data layer from one type to another.
 
-<Notification
-  Icon={MdInfo}
-  tone="WARNING"
+<LinkButton
+  to="/docs/tutorial/part-5/"
+  rightIcon={<MdArrowForward />}
   variant="SECONDARY"
-  content={
-    <div>
-      <p>
-        <strong>Note:</strong> We{"'"}re still working on updating this Tutorial to use Gatsby v3.
-        You've reached the end of the new content we've released so far. Subsequent parts
-        will be added as we finish them.
-      </p>
-      <p style={{ marginBottom: 0 }}>
-        If you{"'"}re looking for a full experience in the meantime, you can check out the (slightly outdated){" "}
-        <a href="https://v2.gatsbyjs.com/docs/tutorial/">
-          <strong>Gatsby v2 Tutorial</strong>
-        </a>
-        .
-      </p>
-    </div>
-  }
-/>
+>
+  Continue to Part 5
+</LinkButton>
diff --git a/docs/docs/tutorial/part-5/blog-page-with-frontmatter.png b/docs/docs/tutorial/part-5/blog-page-with-frontmatter.png
diff --git a/docs/docs/tutorial/part-5/blog-page-with-full-posts.png b/docs/docs/tutorial/part-5/blog-page-with-full-posts.png
diff --git a/docs/docs/tutorial/part-5/data-layer-with-nodes.png b/docs/docs/tutorial/part-5/data-layer-with-nodes.png
diff --git a/docs/docs/tutorial/part-5/index.mdx b/docs/docs/tutorial/part-5/index.mdx
diff --git a/docs/docs/tutorial/part-five/allfile-query.png b/docs/docs/tutorial/part-five/allfile-query.png
diff --git a/docs/docs/tutorial/part-five/data-in-console.png b/docs/docs/tutorial/part-five/data-in-console.png
diff --git a/docs/docs/tutorial/part-five/filesystem-autocomplete.png b/docs/docs/tutorial/part-five/filesystem-autocomplete.png
diff --git a/docs/docs/tutorial/part-five/filesystem-explorer-options.png b/docs/docs/tutorial/part-five/filesystem-explorer-options.png
diff --git a/docs/docs/tutorial/part-five/filesystem-query.png b/docs/docs/tutorial/part-five/filesystem-query.png
diff --git a/docs/docs/tutorial/part-five/graphiql-filesystem.png b/docs/docs/tutorial/part-five/graphiql-filesystem.png
diff --git a/docs/docs/tutorial/part-five/index.md b/docs/docs/tutorial/part-five/index.md
diff --git a/docs/docs/tutorial/part-five/my-files-page.png b/docs/docs/tutorial/part-five/my-files-page.png