Update "Get started" guide

templates/v12/server/Query.cs

@@ -2,15 +2,25 @@
 
 public class Query
 {
-    public Person GetPerson() => new Person("Luke Skywalker");
+    public Book GetBook() =>
+        new Book
+        {
+            Title = "C# in depth.",
+            Author = new Author
+            {
+                Name = "Jon Skeet"
+            }
+        };
 }
 
-public class Person
+public class Book
 {
-    public Person(string name)
-    {
-        Name = name;
-    }
+    public string Title { get; set; }
 
-    public string Name { get; }
+    public Author Author { get; set; }
+}
+
+public class Author
+{
+    public string Name { get; set; }
 }

website/src/components/mdx/api-choice-tabs.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from "react";
+import { List, Panel, Tab, Tabs } from "./tabs";
+
+export interface ApiChoiceTabsComposition {
+  MinimalApis: FC;
+  Regular: FC;
+}
+
+export const ApiChoiceTabs: FC & ApiChoiceTabsComposition = ({ children }) => {
+  return (
+    <Tabs defaultValue={"minimal-apis"} groupId="api-choice">
+      <List>
+        <Tab value="minimal-apis">.NET 6</Tab>
+        <Tab value="regular">.NET 5 or earlier</Tab>
+      </List>
+      {children}
+    </Tabs>
+  );
+};
+
+const MinimalApis: FC = ({ children }) => (
+  <Panel value="minimal-apis">{children}</Panel>
+);
+
+const Regular: FC = ({ children }) => <Panel value="regular">{children}</Panel>;
+
+ApiChoiceTabs.MinimalApis = MinimalApis;
+ApiChoiceTabs.Regular = Regular;

website/src/components/mdx/input-choice-tabs.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from "react";
+import { List, Panel, Tab, Tabs } from "./tabs";
+
+export interface InputChoiceTabsComposition {
+  CLI: FC;
+  VisualStudio: FC;
+}
+
+export const InputChoiceTabs: FC & InputChoiceTabsComposition = ({
+  children,
+}) => {
+  return (
+    <Tabs defaultValue={"cli"} groupId="input-choice">
+      <List>
+        <Tab value="cli">CLI</Tab>
+        <Tab value="visual-studio">Visual Studio</Tab>
+      </List>
+      {children}
+    </Tabs>
+  );
+};
+
+const CLI: FC = ({ children }) => <Panel value="cli">{children}</Panel>;
+
+const VisualStudio: FC = ({ children }) => (
+  <Panel value="visual-studio">{children}</Panel>
+);
+
+InputChoiceTabs.CLI = CLI;
+InputChoiceTabs.VisualStudio = VisualStudio;

website/src/docs/docs.json

@@ -185,8 +185,8 @@
                 "title": "Overview"
               },
               {
-                "path": "middleware",
-                "title": "Middleware"
+                "path": "endpoints",
+                "title": "Endpoints"
               },
               {
                 "path": "interceptors",

website/src/docs/hotchocolate/defining-a-schema/arguments.md

@@ -2,7 +2,7 @@
 title: "Arguments"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 GraphQL allows us to specify arguments on a field and access their values in the field's resolver.
 

website/src/docs/hotchocolate/defining-a-schema/documentation.md

@@ -2,7 +2,7 @@
 title: Documentation
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 Documentation allows us to enrich our schema with additional information that is useful for a consumer of our API.
 

website/src/docs/hotchocolate/defining-a-schema/enums.md

@@ -2,7 +2,7 @@
 title: "Enums"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 An Enum is a special kind of [scalar](/docs/hotchocolate/defining-a-schema/scalars) that is restricted to a particular set of allowed values. It can be used as both an input and an output type.
 

website/src/docs/hotchocolate/defining-a-schema/extending-types.md

@@ -2,7 +2,7 @@
 title: "Extending Types"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 Type extensions allow us to add, remove or replace fields on existing types, without necessarily needing access to these types.
 

website/src/docs/hotchocolate/defining-a-schema/input-object-types.md

@@ -2,7 +2,7 @@
 title: "Input Object Types"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 We already looked at [arguments](/docs/hotchocolate/defining-a-schema/arguments), which allow us to use simple [scalars](/docs/hotchocolate/defining-a-schema/scalars) like `String` to pass data into a field. GraphQL defines input object types to allow us to use objects as arguments on our fields.
 

website/src/docs/hotchocolate/defining-a-schema/interfaces.md

@@ -2,7 +2,7 @@
 title: "Interfaces"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 An interface is an abstract type that defines a certain set of fields that an object type or another interface must include to implement the interface. Interfaces can only be used as output types, meaning we can't use interfaces as arguments or as fields on input object types.
 

website/src/docs/hotchocolate/defining-a-schema/lists.md

@@ -2,7 +2,7 @@
 title: "Lists"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 GraphQL allows us to return lists of elements from our fields.
 

website/src/docs/hotchocolate/defining-a-schema/mutations.md

@@ -2,7 +2,7 @@
 title: "Mutations"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 The mutation type in GraphQL is used to mutate/change data. This means that when we are doing mutations, we are intending to cause side-effects in the system.
 

website/src/docs/hotchocolate/defining-a-schema/non-null.md

@@ -2,7 +2,7 @@
 title: "Non-Null"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 Per default all fields on an object type can be either `null` or the specified type.
 

website/src/docs/hotchocolate/defining-a-schema/object-types.md

@@ -2,7 +2,7 @@
 title: "Object Types"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 The most important type in a GraphQL schema is the object type. It contains fields that can return simple scalars like `String`, `Int`, or again object types.
 

website/src/docs/hotchocolate/defining-a-schema/queries.md

@@ -2,7 +2,7 @@
 title: "Queries"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 The query type in GraphQL represents a read-only view of all of our entities and ways to retrieve them. A query type is required for every GraphQL server.
 

website/src/docs/hotchocolate/defining-a-schema/relay.md

@@ -2,7 +2,7 @@
 title: "Relay"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 > Note: Even though they originated in Relay, the design principles described in this document are not exclusive to Relay. They lead to an overall better schema design, which is why we recommend them to **all** users of Hot Chocolate.
 

website/src/docs/hotchocolate/defining-a-schema/scalars.md

@@ -2,7 +2,7 @@
 title: "Scalars"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 Scalar types are the primitives of our schema and can hold a specific type of data. They are leaf types, meaning we cannot use e.g. `{ fieldname }` to further drill down into the type. The main purpose of a scalar is to define how a value is serialized and deserialized.
 
@@ -286,6 +286,8 @@ To use these scalars we have to add the `HotChocolate.Types.Scalars` package.
 dotnet add package HotChocolate.Types.Scalars
 ```
 
+> ⚠️ Note: All `HotChocolate.*` packages need to have the same version.
+
 **Available Scalars:**
 
 | Type             | Description                                                                                                                                              |
@@ -346,6 +348,8 @@ It can be installed like the following.
 dotnet add package HotChocolate.Types.NodaTime
 ```
 
+> ⚠️ Note: All `HotChocolate.*` packages need to have the same version.
+
 **Available Scalars:**
 
 | Type           | Description                                                                               | Example                                       |

website/src/docs/hotchocolate/defining-a-schema/subscriptions.md

@@ -2,7 +2,7 @@
 title: "Subscriptions"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 The subscription type in GraphQL is used to add real-time capabilities to our applications. Clients can subscribe to events and receive the event data in real-time, as soon as the server publishes it.
 
@@ -177,6 +177,8 @@ In order to use the Redis provider we have to add the `HotChocolate.Subscription
 dotnet add package HotChocolate.Subscriptions.Redis
 ```
 
+> ⚠️ Note: All `HotChocolate.*` packages need to have the same version.
+
 After we have added the package we can setup the Redis subscription provider.
 
 ```csharp

website/src/docs/hotchocolate/defining-a-schema/unions.md

@@ -2,7 +2,7 @@
 title: "Unions"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 A union type represents a set of object types. It is very similar to an [interface](/docs/hotchocolate/defining-a-schema/interfaces), except that there is no requirement for common fields between the specified types.
 

website/src/docs/hotchocolate/defining-a-schema/versioning.md

@@ -2,7 +2,7 @@
 title: "Versioning"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 Whilst we could version our GraphQL API similar to REST, i.e. `/graphql/v1`, it is not a best practice and often unnecessary.
 

website/src/docs/hotchocolate/distributed-schema/schema-federations.md

@@ -18,6 +18,8 @@ You will need to add a package reference to `HotChocolate.Stitching.Redis` to al
 dotnet add package HotChocolate.Stitching.Redis
 ```
 
+> ⚠️ Note: All `HotChocolate.*` packages need to have the same version.
+
 ## Configuration of a domain service
 
 A domain service has to _publish the schema definition_.
@@ -103,6 +105,8 @@ You will need to add a package reference to `HotChocolate.Stitching` to all your
 dotnet add package HotChocolate.Stitching
 ```
 
+> ⚠️ Note: All `HotChocolate.*` packages need to have the same version.
+
 ## Configuration of a domain service
 
 ```csharp

website/src/docs/hotchocolate/distributed-schema/schema-stitching.md

@@ -12,6 +12,8 @@ You will need to add a package reference to `HotChocolate.Stitching` to your gat
 dotnet add package HotChocolate.Stitching
 ```
 
+> ⚠️ Note: All `HotChocolate.*` packages need to have the same version.
+
 ```csharp
 public static class WellKnownSchemaNames
 {

website/src/docs/hotchocolate/fetching-data/dataloader.md

@@ -2,7 +2,7 @@
 title: "DataLoader"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 > If you want to read more about data loaders in general, you can head over to Facebook's [GitHub repository](https://github.com/facebook/dataloader).
 

website/src/docs/hotchocolate/fetching-data/fetching-from-databases.md

@@ -2,7 +2,7 @@
 title: "Fetching from Databases"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 In this section, you find a simple example on how you can fetch data from a database and expose it as a GraphQL API.
 

website/src/docs/hotchocolate/fetching-data/fetching-from-rest.md

@@ -2,7 +2,7 @@
 title: "Fetching from REST"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 In this section, we will cover how you can easily integrate a REST API into your GraphQL API.
 

website/src/docs/hotchocolate/fetching-data/filtering.md

@@ -2,7 +2,7 @@
 title: Filtering
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 With Hot Chocolate filters, you can expose complex filter objects through your GraphQL API that translates to native database queries. The default filter implementation translates filters to expression trees that are applied to `IQueryable`.
 Hot Chocolate by default will inspect your .NET model and infer the possible filter operations from it.
@@ -48,6 +48,8 @@ Filtering is part of the `HotChocolate.Data` package. You can add the dependency
 dotnet add package HotChocolate.Data
 ```
 
+> ⚠️ Note: All `HotChocolate.*` packages need to have the same version.
+
 To use filtering you need to register it on the schema:
 
 ```csharp

website/src/docs/hotchocolate/fetching-data/pagination.md

@@ -2,7 +2,7 @@
 title: "Pagination"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs";
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs";
 
 Pagination is one of the most common problems that we have to solve when implementing our backend. Often, sets of data are too large to pass them directly to the consumer of our service.
 

website/src/docs/hotchocolate/fetching-data/projections.md

@@ -2,7 +2,7 @@
 title: Projections
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 Every GraphQL request specifies exactly what data should be returned. Over or under fetching can be reduced
 or even eliminated. Hot Chocolate projections leverage this concept and directly projects incoming queries
@@ -35,9 +35,11 @@ LEFT JOIN "Address" AS "a" ON "u"."AddressId" = "a"."Id"
 Filtering is part of the `HotChocolate.Data` package. You can add the dependency with the `dotnet` cli
 
 ```bash
-  dotnet add package HotChocolate.Data
+dotnet add package HotChocolate.Data
 ```
 
+> ⚠️ Note: All `HotChocolate.*` packages need to have the same version.
+
 To use projections with your GraphQL endpoint you have to register projections on the schema:
 
 ```csharp

website/src/docs/hotchocolate/fetching-data/resolvers.md

@@ -2,7 +2,7 @@
 title: "Resolvers"
 ---
 
-import { ExampleTabs } from "../../../components/mdx/example-tabs"
+import { ExampleTabs, Annotation, Code, Schema } from "../../../components/mdx/example-tabs"
 
 When it comes to fetching data in a GraphQL server, it will always come down to a resolver.