fix: split sidebars for doc categories & react errors

docs/tutorials/beginner/graphql.mdx

@@ -34,7 +34,7 @@ Open the explorer in a new tab now so that you can follow along with the tutoria
 On the left we can see the documentation - a list of all the resources we can query. In the middle are the text boxes where we can write our GraphQL query, as well as any variables that we might want to pass with the request. Finally on the right is the "Response" panel, where any results of queries we execute will be displayed.
 
 ## Our First Query
-Let's start by getting a list of all the monsters in the database. To do this, we can build a query using the panel on the left-hand side of the explorer. Scroll down to "monsters" and click the <svg viewBox="0 0 24 24" role="checkbox" aria-checked="false" style={{width: '2ch', color: 'var(--ifm-color-primary-darker)', verticalAlign: 'text-top', marginInline: '0.25ch'}}><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 7.5v9M7.5 12h9M12 .75C18.213.75 23.25 5.787 23.25 12S18.213 23.25 12 23.25.75 18.213.75 12 5.787.75 12 .75z"></path></g></svg> ("plus") icon to the left. You should then be presented with a list of attributes that we can request. You should also see the following code appear in the editor:
+Let's start by getting a list of all the monsters in the database. To do this, we can build a query using the panel on the left-hand side of the explorer. Scroll down to "monsters" and click the <svg viewBox="0 0 24 24" role="checkbox" aria-checked="false" style={{width: '2ch', color: 'var(--ifm-color-primary-darker)', verticalAlign: 'text-top', marginInline: '0.25ch'}}><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"><path d="M12 7.5v9M7.5 12h9M12 .75C18.213.75 23.25 5.787 23.25 12S18.213 23.25 12 23.25.75 18.213.75 12 5.787.75 12 .75z"></path></g></svg> ("plus") icon to the left. You should then be presented with a list of attributes that we can request. You should also see the following code appear in the editor:
 
 ```graphql
 query Monsters {
@@ -115,4 +115,4 @@ To pass variables, we can provide a JSON object along with our request, where ea
 Execute the query and we should see the same results as before, except this time we can request a different monster just by changing the value of our `index` variable. Take this opportunity to pass in different indices and observe how this affects the response.
 
 ## Next Steps
-Now that we can build and test a range of GraphQL queries, we are ready to apply these skills to a real project. In future tutorials, we will bring together GraphQL and other languages and technologies to build fun and interesting tools.
+Now that we can build and test a range of GraphQL queries, we are ready to apply these skills to a real project. In future tutorials, we will bring together GraphQL and other languages and technologies to build fun and interesting tools.

docusaurus.config.js

@@ -131,15 +131,19 @@ const config = {
             type: "doc",
             docId: "introduction",
             position: "left",
-            label: "Get Started",
+            label: "Docs",
           },
           {
             type: "doc",
             docId: "tutorials/index",
             position: "left",
             label: "Tutorials",
           },
-          { to: "/api", label: "API", position: "left" },
+          {
+            to: "/api",
+            position: "left",
+            label: "API",
+          },
           {
             type: "doc",
             docId: "faq",

sidebars.js

@@ -1,31 +1,41 @@
-/**
- * Creating a sidebar enables you to:
- - create an ordered group of docs
- - render a sidebar for each doc of that group
- - provide next/previous navigation
-
- The sidebars can be generated from the filesystem, or explicitly defined here.
-
- Create as many sidebars as you want.
- */
-
 // @ts-check
-
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
-
-  // But you can create a sidebar manually
-  /*
-  tutorialSidebar: [
+  referenceSidebar: [
+    'introduction',
+    'tutorials/index',
     {
       type: 'category',
-      label: 'Tutorial',
-      items: ['hello'],
+      label: 'Reference',
+      items: [
+        { type: 'autogenerated', dirName: 'reference' }
+      ]
     },
   ],
-   */
+  tutorialsSidebar: [
+    'tutorials/index',
+    {
+      type: 'category',
+      label: 'Beginner',
+      items: [
+        { type: 'autogenerated', dirName: 'tutorials/beginner' }
+      ]
+    },
+    {
+      type: 'category',
+      label: 'Basic',
+      items: [
+        { type: 'autogenerated', dirName: 'tutorials/basic' }
+      ]
+    },
+    {
+      type: 'category',
+      label: 'Advanced',
+      items: [
+        { type: 'autogenerated', dirName: 'tutorials/advanced' }
+      ]
+    }
+  ]
 };
 
 module.exports = sidebars;

src/components/LearningObjectives.js

@@ -5,8 +5,8 @@ export default function LearningObjectives({ children, objectives }) {
     <>
       <h2>✅ Learning Objectives</h2>
       <ol>
-        {objectives.map((obj) => {
-          return <li>{obj}</li>;
+        {objectives.map((obj, i) => {
+          return <li key={i}>{obj}</li>;
         })}
       </ol>
       <div>{children}</div>