Add Newsletter (#7114)

* Adds newsletter

* Adds newsletter

* Adds newsletter

* fix lanuage

* Added newsletter

* Fix build

Author: PascalSenn

website/src/blog/2024-04-01-fullstack-workshop/2024-04-01-fullstack-workshop.md

@@ -0,0 +1,90 @@
+---
+path: "/blog/2024/04/01/fullstack-workshop"
+date: "2024-04-01"
+title: "Full Stack GraphQL Workshop"
+description: "We're excited to announce our new Full Stack GraphQL Workshop. Learn more about the workshop here!"
+tags: ["bananacakepop", "graphql", "hotchocolate", "workshops"]
+featuredImage: "header.png"
+author: Pascal Senn 
+authorUrl: https://github.com/pascalsenn
+authorImageUrl: https://avatars.githubusercontent.com/u/14233220?v=4
+---
+
+In today's rapidly evolving technology landscape, staying ahead requires not only understanding the latest technologies but also how to implement them effectively. This two-day workshop is a hands-on journey designed to demystify advanced concepts by building from the ground up. We'll start with the basics and progressively build a fully functional distributed web shop using HotChocolate, Relay.js, Fusion, multiple subgraphs .NET Aspire and also concepts like domain driven design, CQRS and clean architecture.
+
+Book your seat now and learn more about the workshop [here](https://learn.chillicream.com/blog/2024-04-01/fullstack-workshop).
+
+![Full Stack GraphQL Workshop](img1.png)
+
+Over two days, we'll cover everything from basic concepts to advanced techniques. We start by getting to know GraphQL, learning about its features and benefits compared to traditional methods. Later, we introduce Relay.js, focusing on how it works with GraphQL to improve data handling and application performance.
+
+**Day 1:** We begin with basic GraphQL concepts, then move on to how you can build efficient APIs. In the afternoon, we'll learn about Relay.js, starting with the fundamentals and advancing to more complex topics.
+
+**Day 2:** We explore deeper topics like how to change and improve your GraphQL setup, how to handle data updates smoothly, and how other advanced techniques fit into the GraphQL world. We end by learning about real-time data updates with subscriptions.
+
+For the next online workshop you [find more information here](https://learn.chillicream.com/blog/2024-04-01).
+
+This workshop can also be tailored to meet your company's specific needs. We offer the flexibility to customize the content and focus areas to best match your team's requirements and goals.
+
+Here are the detailed modules available:
+
+**Module 1: Getting Started with GraphQL**
+
+Kick off with GraphQL by understanding its fundamental concepts such as operations, types system, syntax, and reasons for using GraphQL over other APIs. The session ends with setting up a first GraphQL server, providing hands-on experience from the start.
+
+**Module 2: Building a Database Driven Application**
+
+Explore how to build GraphQL apis using Entity Framework Core, with features like paging, filtering, sorting, and projections. The session will also cover some advanced concepts like field middlewares.
+
+**Module 3: Building APIs with Simple Layering**
+
+This session focuses on API with simple layering, including applying filtering and pagination in layered architectures. It also covers best practices using DataLoaders for optimized data fetching operations.
+
+**Module 4: GraphQL Query Patterns and Best Practices**
+
+Detailed exploration of advanced GraphQL patterns such as evolving schemas, entity and connection patterns for large-scale applications, ensuring best practices are met for enterprise development.
+
+**Module 5: Getting Started with Relay.js**
+
+Introduction to Relay.js, focusing on queries, using fragments and arguments effectively.
+Module 6: Advanced Fetching Patterns
+This module covers complex data fetching strategies in Relay.js, including transitions, refetching, and pagination, essential for managing data in applications and providing peak user experience.
+
+**Module 7: Understanding Relay**
+
+Expands on Relay's core concepts, including store management, data prefetching methods, and internal workings of Relay for performance improvements and predictable state management.
+
+**Module 8: GraphQL Mutations Patterns and Best Practices**
+
+Deep dive into the structure and patterns of GraphQL mutations, focusing on how to effectively manage errors and ensure robust mutation operations.
+
+**Module 9: Mutations In Relay**
+
+This module focuses on teaching effective methods for managing mutations, error handling, and executing optimistic updates within Relay.
+
+**Module 10: GraphQL Schema Evolution**
+
+Review of techniques to evolve a GraphQL schema over time without breaking existing operations, including the use of client and schema registries and implementing open telemetry.
+
+**Module 11: Introduction to Distributed GraphQL**
+
+Covering the concepts and implementation of distributed GraphQL with fusion to allow scalable, efficiently distributed data across different services and servers.
+
+**Module 12: Authentication / Authorization**
+
+Detailed breakdown of implementing authentication and authorization in GraphQL applications, ensuring secure and controlled access to data through proper practices.
+
+**Module 13: CQRS, DDD and GraphQL, the Perfect Fit?**
+
+Exploration of how CQRS and Domain Driven Design can be integrated with GraphQL to optimize complexity management in large-scale domains.
+
+**Module 14: GraphQL Subscriptions Patterns and Best Practices**
+
+In-depth look at implementing real-time functionalities via GraphQL subscriptions, with specific focus on patterns. Implemented in both the backend and frontend..
+
+**Closing Session: Q&A**
+
+An open session where attendees can ask questions or clarify doubts about the topics covered, facilitating deeper understanding and practical implementations.
+
+## We Want to Hear From You
+Your insights are invaluable to us. If you have questions, need more information, or just want to talk to use, don’t hesitate to reach out on [email protected] or on [slack.chillicream.com](https://slack.chillicream.com/blog/2024/04/01/fullstack-workshop) 

website/src/blog/2024-04-01-fullstack-workshop/header.png

@@ -0,0 +1,63 @@
+---
+path: "/blog/2024/05/21/newsletter-may"
+date: "2024-05-21"
+title: "What we have been up to!"
+description: "We just released the Operation Builder, Telemetry, and a new Full Stack GraphQL Workshop. Checkout the blog post to learn more!"
+tags: ["bananacakepop", "graphql", "hotchocolate", "workshops", "cloud", "release"]
+featuredImage: "header.png"
+author: Pascal Senn 
+authorUrl: https://github.com/pascalsenn
+authorImageUrl: https://avatars.githubusercontent.com/u/14233220?v=4
+---
+
+We’re excited to bring you some significant updates from ChiliCream that can genuinely make a difference in your day-to-day development. This isn't just about new features—it's about making your workflow more effective and your projects more successful.
+
+# 🛠️ Operation Builder
+We’re proud to introduce the Operation Builder in Banana Cake Pop, a tool designed to make creating and managing your GraphQL operations a breeze.
+
+![Operation Builder](img1.png)
+
+The Operation Builder simplifies the process of creating and managing queries, making it easier than ever to draft, edit, and inspect your operations. Dive deep into your schema, seamlessly navigate fields and fragments, and gain instant insights into your data structure.
+
+This is perfect for both quick edits and detailed explorations, helping you understand and optimize your queries with ease.
+
+Try out the Operation Builder today and transform the way you work with GraphQL!
+
+**[Check out the video here](https://link.chillicream.com/2024/05/21/ops-builder-video)**
+
+# 📊 Telemetry
+
+![Telemetry](img2.png)
+We’re want to put a spotlight on our Telemetry integration. Why did we build this? The answer is simple. Understanding your application’s performance shouldn't be a guessing game and GraphQL Telemetry is difficult. With our telemetry integration, you can have complete visibility into your GraphQL server.
+
+![Telemetry](img3.png)
+- **Trace Visualization:** See every trace in detail. This helps you pinpoint precisely where your system can be improved.
+- **Latency Monitoring:** Track average latency and critical percentiles to ensure top-notch performance.
+- **Throughput Metrics:** Keep an eye on operations per minute, so you can manage and scale your resources effectively.
+- **Client Insights:** Identify which clients impact your system the most, helping you make data-driven decisions.
+- **Error Tracking:** Stay ahead of potential issues with real-time error reports.
+- **In-depth Operation Analysis:** Gain a comprehensive overview of each operation's latency, throughput, and error rates.
+
+The fusion dashboard offers extensive monitoring capabilities, presenting real-time tracing and telemetry insights of your gateway and subgraphs. The topology view reveals interconnections and client activities, while status indicators provide a quick overview of latency, throughput, and error rates.
+
+_Create, Collaborate, Conquer! Get Started with Banana Cake Pop Pro. Use the promo code **BCPROCKS** to get a discount on your first year and start using our GraphQL IDE to enhance your projects efficiently._
+
+**[Check out the video here](https://link.chillicream.com/2024/05/21/telemetry-video)**
+
+or read the docs: [Open Telemetry Documentation](https://link.chillicream.com/2024/05/21/otel-docs)
+
+# 🛠️ Announcing Our New Full Stack GraphQL Workshop
+
+In today's rapidly evolving technology landscape, staying ahead requires not only understanding the latest technologies but also knowing how to implement them effectively. Our brand-new Full Stack GraphQL Workshop is a two-day, hands-on journey designed to demystify advanced concepts.
+
+![Full Stack GraphQL Workshop](img4.png)
+
+We'll start with the basics and progressively build a fully functional distributed web shop using HotChocolate, Relay.js, Fusion, multiple subgraphs, and .NET Aspire. We’ll also delve into foundational principles like domain-driven design, CQRS, and clean architecture.
+
+Learn more about the workshop here: [learn.chillicream.com](https://link.chillicream.com/2024/05/21/learn)
+
+## We Want to Hear From You
+Your insights are invaluable to us. If you have questions, need more information, or want to discuss how our tools can fit into your projects, don’t hesitate to reach out on [email protected] or on [slack.chillicream.com](https://link.chillicream.com/2024/05/21/slack) 
+
+## ❤️️ Thank You 
+We appreciate your engagement and are thrilled to support your projects with our evolving GraphQL solutions. Keep an eye out for HotChocolate 14, and let us help you take your projects to the next level.

website/src/blog/2024-04-01-fullstack-workshop/img1.png

@@ -0,0 +1,39 @@
+import { graphql, useStaticQuery } from "gatsby";
+import { GatsbyImage } from "gatsby-plugin-image";
+import React, { FC } from "react";
+import styled from "styled-components";
+
+import { GetFullStackWorkshopQuery } from "@/graphql-types";
+
+export const FullstackWorkshop: FC = () => {
+  const data = useStaticQuery<GetFullStackWorkshopQuery>(graphql`
+    query getFullStackWorkshop {
+      file(
+        relativePath: { eq: "2024-04-01-fullstack-workshop/header.png" }
+        sourceInstanceName: { eq: "blog" }
+      ) {
+        childImageSharp {
+          gatsbyImageData(layout: CONSTRAINED, width: 1200, quality: 100)
+        }
+      }
+    }
+  `);
+
+  return (
+    <Container>
+      <GatsbyImage
+        image={data.file?.childImageSharp?.gatsbyImageData}
+        alt="Fullstack Workshop"
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  padding: 30px;
+
+  .gatsby-image-wrapper {
+    border-radius: var(--border-radius);
+    box-shadow: 0 9px 18px rgba(0, 0, 0, 0.25);
+  }
+`;

website/src/blog/2024-05-21-newsletter-may/2024-05-21-newsletter-may.md

@@ -0,0 +1,39 @@
+import { graphql, useStaticQuery } from "gatsby";
+import { GatsbyImage } from "gatsby-plugin-image";
+import React, { FC } from "react";
+import styled from "styled-components";
+
+import { GetNewsletterMay2024ImageQuery } from "@/graphql-types";
+
+export const NewsletterMay2024: FC = () => {
+  const data = useStaticQuery<GetNewsletterMay2024ImageQuery>(graphql`
+    query getNewsletterMay2024Image {
+      file(
+        relativePath: { eq: "2024-05-21-newsletter-may/header.png" }
+        sourceInstanceName: { eq: "blog" }
+      ) {
+        childImageSharp {
+          gatsbyImageData(layout: CONSTRAINED, width: 1200, quality: 100)
+        }
+      }
+    }
+  `);
+
+  return (
+    <Container>
+      <GatsbyImage
+        image={data.file?.childImageSharp?.gatsbyImageData}
+        alt="Newsletter May 2024"
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  padding: 30px;
+
+  .gatsby-image-wrapper {
+    border-radius: var(--border-radius);
+    box-shadow: 0 9px 18px rgba(0, 0, 0, 0.25);
+  }
+`;

website/src/blog/2024-05-21-newsletter-may/header.png

@@ -229,7 +229,7 @@ While Hot Chocolate's internals rely heavily on Microsoft's dependency injection
 
 You can switch out the service provider used for GraphQL requests, as long as your dependency injection container implements the [`IServiceProvider`](https://docs.microsoft.com/dotnet/api/system.iserviceprovider) interface.
 
-To switch out the service provider you need to call [`SetServices`](/docs/hotchocolate/v12/server/interceptors#setservices) on the [`OperationRequestBuilder`](/docs/hotchocolate/v12/server/interceptors#OperationRequestBuilder) in both the [`IHttpRequestInterceptor`](/docs/hotchocolate/v12/server/interceptors#ihttprequestinterceptor) and the [`ISocketSessionInterceptor`](/docs/hotchocolate/v12/server/interceptors#isocketsessioninterceptor).
+To switch out the service provider you need to call [`SetServices`](/docs/hotchocolate/v12/server/interceptors#setservices) on the [`OperationRequestBuilder`](/docs/hotchocolate/v12/server/interceptors#operationrequestbuilder) in both the [`IHttpRequestInterceptor`](/docs/hotchocolate/v12/server/interceptors#ihttprequestinterceptor) and the [`ISocketSessionInterceptor`](/docs/hotchocolate/v12/server/interceptors#isocketsessioninterceptor).
 
 ```csharp
 public class HttpRequestInterceptor : DefaultHttpRequestInterceptor

website/src/blog/2024-05-21-newsletter-may/img1.png

@@ -51,7 +51,7 @@ public override ValueTask OnCreateAsync(HttpContext context,
 
 Most of the configuration will be done through the `OperationRequestBuilder`, injected as argument to this method.
 
-[Learn more about the OperationRequestBuilder](#OperationRequestBuilder)
+[Learn more about the OperationRequestBuilder](#operationrequestbuilder)
 
 If we want to fail the request, before it is being executed, we can throw a `GraphQLException`. The middleware will then translate this exception to a proper GraphQL error response for the client.
 
@@ -149,7 +149,7 @@ public override ValueTask OnRequestAsync(ISocketConnection connection,
 
 Most of the configuration will be done through the `OperationRequestBuilder`, injected as argument to this method.
 
-[Learn more about the OperationRequestBuilder](#OperationRequestBuilder)
+[Learn more about the OperationRequestBuilder](#operationrequestbuilder)
 
 If we want to fail the request, before it is being executed, we can throw a `GraphQLException`. The middleware will then translate this exception to a proper GraphQL error response for the client.
 

website/src/blog/2024-05-21-newsletter-may/img2.png

@@ -229,7 +229,7 @@ While Hot Chocolate's internals rely heavily on Microsoft's dependency injection
 
 You can switch out the service provider used for GraphQL requests, as long as your dependency injection container implements the [`IServiceProvider`](https://docs.microsoft.com/dotnet/api/system.iserviceprovider) interface.
 
-To switch out the service provider you need to call [`SetServices`](/docs/hotchocolate/v13/server/interceptors#setservices) on the [`OperationRequestBuilder`](/docs/hotchocolate/v13/server/interceptors#OperationRequestBuilder) in both the [`IHttpRequestInterceptor`](/docs/hotchocolate/v13/server/interceptors#ihttprequestinterceptor) and the [`ISocketSessionInterceptor`](/docs/hotchocolate/v13/server/interceptors#isocketsessioninterceptor).
+To switch out the service provider you need to call [`SetServices`](/docs/hotchocolate/v13/server/interceptors#setservices) on the [`OperationRequestBuilder`](/docs/hotchocolate/v13/server/interceptors#operationrequestbuilder) in both the [`IHttpRequestInterceptor`](/docs/hotchocolate/v13/server/interceptors#ihttprequestinterceptor) and the [`ISocketSessionInterceptor`](/docs/hotchocolate/v13/server/interceptors#isocketsessioninterceptor).
 
 ```csharp
 public class HttpRequestInterceptor : DefaultHttpRequestInterceptor

website/src/blog/2024-05-21-newsletter-may/img3.png

@@ -51,7 +51,7 @@ public override ValueTask OnCreateAsync(HttpContext context,
 
 Most of the configuration will be done through the `OperationRequestBuilder`, injected as argument to this method.
 
-[Learn more about the OperationRequestBuilder](#OperationRequestBuilder)
+[Learn more about the OperationRequestBuilder](#operationrequestbuilder)
 
 If we want to fail the request, before it is being executed, we can throw a `GraphQLException`. The middleware will then translate this exception to a proper GraphQL error response for the client.
 
@@ -149,7 +149,7 @@ public override ValueTask OnRequestAsync(ISocketConnection connection,
 
 Most of the configuration will be done through the `OperationRequestBuilder`, injected as argument to this method.
 
-[Learn more about the OperationRequestBuilder](#OperationRequestBuilder)
+[Learn more about the OperationRequestBuilder](#operationrequestbuilder)
 
 If we want to fail the request, before it is being executed, we can throw a `GraphQLException`. The middleware will then translate this exception to a proper GraphQL error response for the client.
 

website/src/blog/2024-05-21-newsletter-may/img4.png

@@ -5,9 +5,9 @@ import styled from "styled-components";
 
 import { BananaCakePop } from "@/components/images/banana-cake-pop";
 import { BlogPostBananaCakePopApis } from "@/components/images/blog-post-banana-cake-pop-apis";
-import { BlogPostEFMeetsGraphQL } from "@/components/images/blog-post-ef-meets-graphql";
-import { BlogPostHotChocolate13 } from "@/components/images/blog-post-hot-chocolate-13";
 import { BlogPostGraphQLFusion } from "@/components/images/blog-post-graphql-fusion";
+import { BlogPostHotChocolate13 } from "@/components/images/blog-post-hot-chocolate-13";
+import { NewsletterMay2024 } from "@/components/images/newsletter-may-2024";
 import { Layout } from "@/components/layout";
 import { Link } from "@/components/misc/link";
 import {
@@ -30,6 +30,7 @@ import { GetIndexPageDataQuery } from "@/graphql-types";
 import { THEME_COLORS } from "@/shared-style";
 
 // Artwork
+import { FullstackWorkshop } from "@/components/images/fullstack-workshop";
 import { SrOnly } from "@/components/misc/sr-only";
 import ContactUsSvg from "@/images/artwork/contact-us.svg";
 import DashboardSvg from "@/images/artwork/dashboard.svg";
@@ -75,6 +76,16 @@ const IndexPage: FC = () => {
           showStatus={false}
           showThumbs={false}
         >
+          <Slide>
+            <Link to="/blog/2024/05/21/newsletter-may">
+              <NewsletterMay2024 />
+            </Link>
+          </Slide>
+          <Slide>
+            <Link to="/blog/2024/04/01/fullstack-workshop">
+              <FullstackWorkshop />
+            </Link>
+          </Slide>
           <Slide>
             <Link to="/blog/2023/08/15/graphql-fusion">
               <BlogPostGraphQLFusion />
@@ -102,17 +113,6 @@ const IndexPage: FC = () => {
               </SlideContent>
             </Link>
           </Slide>
-          <Slide>
-            <Link to="/blog/2020/03/18/entity-framework">
-              <BlogPostEFMeetsGraphQL />
-              <SlideContent>
-                <SlideTitle>Entity Framework Meets GraphQL</SlideTitle>
-                <SlideDescription>
-                  Get started with Hot Chocolate and Entity Framework
-                </SlideDescription>
-              </SlideContent>
-            </Link>
-          </Slide>
         </Slideshow>
       </Intro>
       <Section>