update basic tutorial screenshots (#2856)

Author: EmrysMyrddin

website/public/assets/tutorial/basic/06-adding-a-database/prisma-autocomplete-mutation.png

@@ -63,7 +63,7 @@ These are our type definitions that describe what data can be retrieved from the
 
 Up next you define the corresponding resolver functions that are used for resolving the data.
 
-```ts
+```ts filename="src/schema.ts"
 const typeDefinitions = /* GraphQL */ `
   type Query {
     hello: String!
@@ -83,7 +83,7 @@ The typename (`Query`) is an object in which the fields (`hello`) are functions
 
 Now you still need to glue together the type definitions and the resolver map.
 
-```ts
+```ts filename="src/schema.ts"
 import { makeExecutableSchema } from '@graphql-tools/schema'
 
 const typeDefinitions = /* GraphQL */ `

website/public/assets/tutorial/basic/06-adding-a-database/prisma-autocomplete-query.png

@@ -175,7 +175,7 @@ Let's break down what's going on here with the numbered comments:
 Take a moment to re-type the query line and notice the helpful autocompletion you get after typing `prisma.` and `prisma.link.` which lets us see all the possible models we can
 access and operations we can use to query that data:
 
-![typing prisma. and prisma.link.](https://i.imgur.com/Zrrqwmo.png)
+![typing prisma. and prisma.link.](/assets/tutorial/basic/06-adding-a-database/prisma-autocomplete-query.png)
 
 So now let's see things in action.
 
@@ -200,7 +200,7 @@ const newLink = await prisma.link.create({
 })
 ```
 
-![You successfully queried the database with Prisma Client](https://i.imgur.com/AUAtnxZ.png)
+![You successfully queried the database with Prisma Client](/assets/tutorial/basic/06-adding-a-database/prisma-autocomplete-mutation.png)
 
 Great! Re-run the previous command and this time you should now see your newly created link print in the terminal output! Much more satisfying ✨
 

website/src/pages/tutorial/basic/02-getting-started.mdx

@@ -39,7 +39,7 @@ Now, you'll need to import the `createContext` function and make sure you add it
 <details>
   <summary>v2</summary>
 
-```typescript
+```typescript filename="src/main.ts"
 import { createServer } from '@graphql-yoga/node'
 import { schema } from './schema'
 import { createContext } from './context'
@@ -57,7 +57,7 @@ main()
 <details open>
   <summary>v3</summary>
 
-```typescript
+```typescript filename="src/main.ts"
 import { createYoga } from 'graphql-yoga'
 import { createServer } from 'http'
 import { schema } from './schema'
@@ -164,7 +164,7 @@ Now let's understand how these new resolvers are working!
 
 The `feed` resolver is implemented as follows:
 
-```ts
+```ts filename="src/schema.ts"
 const resolvers = {
   Query: {
     // ...
@@ -184,7 +184,7 @@ Now, you should be able to imagine the complete system and workflow of a Prisma/
 
 The `postLink` resolver now looks like this:
 
-```ts
+```ts filename="src/schema.ts"
 const resolvers = {
   Mutation: {
     async postLink(

website/src/pages/tutorial/basic/06-adding-a-database.mdx

@@ -120,7 +120,7 @@ This is the skeleton of your new field resolver. As you might notice, it looks a
 
 Add the following business logic within the resolver, that uses the newly generated Prisma functions:
 
-```ts
+```ts filename="src/schema.ts"
 const resolvers = {
   // ... other resolver maps ...
   Mutation: {
@@ -237,7 +237,7 @@ Instead, you will first create a resolver for retrieving a comment via its id.
 
 Within the `Query` object type resolver map create a new `comment` field resolver function.
 
-```ts
+```ts filename="src/schema.ts"
 const resolvers = {
   // ... other resolver maps ...
   Query: {
@@ -256,7 +256,7 @@ Within the resolver, you want to fetch the comment by its id.
 
 Add the corresponding logic for retrieving a comment by its id.
 
-```ts
+```ts filename="src/schema.ts"
 const resolvers = {
   // ... other resolver maps ...
   Query: {
@@ -351,7 +351,7 @@ Up next, you implement the corresponding `Link.comments` resolver. For this, you
 
 Add the following `Link.resolvers` implementation:
 
-```ts
+```ts filename="src/schema.ts"
 const resolvers = {
   // ... other resolver maps ...
   Link: {

website/src/pages/tutorial/basic/07-connecting-server-and-database.mdx

@@ -11,7 +11,7 @@ In this chapter, you will learn the origin of this error and learn how to proper
 
 This is the resolver implementation that caused the issue when using a `linkId` that has no counter-part within the database.
 
-```ts
+```ts filename="src/schema.ts"
 const resolvers = {
   // ... other resolver maps ...
   Mutation: {
@@ -132,7 +132,7 @@ For doing so you will use the `GraphQLYogaError` class that is exported from the
 
 Add the following catch handler for mapping a foreign key error into a `GraphQLYogaError`:
 
-```ts
+```ts filename="src/schema.ts"
 // ... other imports ...
 import { GraphQLYogaError } from '@graphql-yoga/node'
 // ... other imports ...
@@ -185,7 +185,7 @@ For doing so you will use the `GraphQLError` class that is exported from the `gr
 
 Add the following catch handler for mapping a foreign key error into a `GraphQLError`:
 
-```ts
+```ts filename="src/schema.ts"
 // ... other imports ...
 import { GraphQLError } from 'graphql'
 // ... other imports ...

website/src/pages/tutorial/basic/08-graph-relations.mdx

@@ -36,7 +36,7 @@ Next, you need to update the implementation of the `Query.feed` resolver functio
 
 Now, update the `Query.feed` resolver function to look as follows:
 
-```ts
+```ts filename="src/schema.ts"
 const resolvers = {
   // ... other resolver maps ...
   Query: {
@@ -123,7 +123,7 @@ Now, adjust the field resolver function implementation:
 
 And now adjust the implementation of the `Query.feed` resolver function:
 
-```ts
+```ts filename="src/schema.ts"
 const resolvers = {
   // ... other resolvers maps ...
   Query: {
@@ -185,7 +185,7 @@ Adjust the current schema resolver implementation according to the following.
 <details>
   <summary>v2</summary>
 
-```ts
+```ts filename="src/schema.ts"
 import { GraphQLYogaError } from '@graphql-yoga/node'
 // ... other code ...
 
@@ -241,7 +241,7 @@ const resolvers = {
 <details open>
   <summary>v3</summary>
 
-```ts
+```ts filename="src/schema.ts"
 // ... other code ...
 import { GraphQLError } from 'graphql'