[Website] Performance improvements

website-next/app/blog/[...slug]/page.tsx

@@ -199,7 +199,10 @@ export default async function BlogSlugPage({ params }: PageProps) {
             src={featuredImage}
             alt=""
             priority
-            sizes="(max-width: 1024px) 100vw, 1024px"
+            // Mirrors the layout: a max-w-5xl (1024px) column inside px-5
+            // (sm:px-12) page padding, so the browser picks the smallest
+            // sufficient variant instead of rounding the slot up to 100vw.
+            sizes="(max-width: 639px) calc(100vw - 2.5rem), (max-width: 1119px) calc(100vw - 6rem), 1024px"
             className="mb-6 aspect-video w-full rounded-lg object-cover"
           />
         ) : null}

website-next/content/blog/2022-09-01-new-in-banana-cake-pop-1.md

@@ -11,11 +11,11 @@ authorUrl: https://github.com/rstaib
 authorImageUrl: https://avatars0.githubusercontent.com/u/4325318?s=100&v=4
 ---
 
-## Getting started
+# Getting started
 
 Everything you need to get started with **Banana Cake Pop** you'll find on [bananacakepop.com](https://bananacakepop.com)
 
-## Subscription protocol auto-detection
+# Subscription protocol auto-detection
 
 Auto-detection can save you from a headache when it comes to the following questions:
 
@@ -30,13 +30,13 @@ The new auto-detection is enabled by default. If you prefer a particular subscri
 
 ![Supported subscription protocols](../../public/images/blog/2022-09-01-new-in-banana-cake-pop-1/subscription-protocol-auto-detection-2.png)
 
-## Workspace auto synchronization
+# Workspace auto synchronization
 
 Your local and remote workspace changes will be synchronized every 60 seconds automatically. No need for you to click the synchronize button anymore. The new synchronize button is now located in the status bar and is also an indicator, showing you whether a workspace is synchronizing.
 
 ![Workspace auto synchronization](../../public/images/blog/2022-09-01-new-in-banana-cake-pop-1/workspace-auto-synchronization-1.png)
 
-## Status bar
+# Status bar
 
 The new decent status bar shows you a couple of information. For instance, is my browser connected to a network, or with what account am I signed in?
 
@@ -50,13 +50,13 @@ Furthermore, we introduced a new button in the right corner that shows the curre
 
 ![Version info](../../public/images/blog/2022-09-01-new-in-banana-cake-pop-1/status-bar-3.png)
 
-## Hidden Tabs
+# Hidden Tabs
 
 We introduced a new button that appears when a tab is at least partly hidden. This button, when clicked, will show a menu with partly hidden and completely hidden tabs.
 
 ![Version info](../../public/images/blog/2022-09-01-new-in-banana-cake-pop-1/hidden-tabs-1.png)
 
-## Subscribe
+# Subscribe
 
 To stay up to date, subscribe to our [ChilliCream YouTube Channel](https://www.youtube.com/c/ChilliCream) to get notified whenever we publish new videos.
 

website-next/content/blog/2022-10-05-new-in-banana-cake-pop-2.md

@@ -11,19 +11,19 @@ authorUrl: https://github.com/rstaib
 authorImageUrl: https://avatars0.githubusercontent.com/u/4325318?s=100&v=4
 ---
 
-## Getting started
+# Getting started
 
 Everything you need to get started with **Banana Cake Pop** you'll find on [bananacakepop.com](https://bananacakepop.com)
 
-## Drag & Drop
+# Drag & Drop
 
 We've added _Drag & Drop_ support to the document explorer. That makes moving documents, files and folders around so much easier. Moreover, we've added support for dropping files for _File Upload_ from outside. Just drag one or multiple files (e.g. a photo) from your computer and drop it on the document explorer root or a specific folder.
 
-## Defer/Stream Spec
+# Defer/Stream Spec
 
 We've updated to the latest Defer/Stream spec draft version, but with backward-compatibility in mind. It still works with previous versions of Hot Chocolate or other servers that implemented the prior spec version.
 
-## Operation Extraction
+# Operation Extraction
 
 We've optimized how GraphQL operations are sent over the wire. Before we send an operation, we remove all the superfluous operations and fragments. For instance, if we have two queries in a GraphQL document, query `A` and `B`, we send only the query and its fragments we execute. Such a document could look like the following.
 
@@ -71,15 +71,15 @@ fragment UserFragment on User {
 
 With this technique, we didn't only reduce the request overhead but were also able to send query `A` even though query `B` is not valid.
 
-## Horizontal Scrolling for Tabs
+# Horizontal Scrolling for Tabs
 
 We've added horizontal scrolling on tabs for mice with a scroll wheel. Instead of scrolling up/down, we switched to scrolling left/right. Simply hover over tabs that contain partly visible tabs and use the scroll wheel of the mouse to move hidden tabs into the visible area.
 
-## Insider Version
+# Insider Version
 
 We start now with insider versions for the Electron app, which will run side-by-side with the released app version. Follow this link [bananacakepop.com](https://bananacakepop.com) to download the first insider build.
 
-## Further Improvements
+# Further Improvements
 
 A few more, worth mentioning, improvements are listed below.
 
@@ -88,7 +88,7 @@ A few more, worth mentioning, improvements are listed below.
 1. Removed app leave warning prompt
 1. Increased editor performance
 
-## Subscribe
+# Subscribe
 
 To stay up to date, subscribe to our [ChilliCream YouTube Channel](https://www.youtube.com/c/ChilliCream) to get notified whenever we publish new videos.
 

website-next/content/blog/2023-01-08-new-in-banana-cake-pop-3.md

@@ -12,41 +12,41 @@ authorImageUrl: https://avatars0.githubusercontent.com/u/4325318?s=100&v=4
 
 Version 3 comes with a couple of neat features, e.g. Team Workspaces, Express Middleware, PWA Support, Enterprise SSO, and more. If you would like to download **Banana Cake Pop 3**, go to [bananacakepop.com](https://bananacakepop.com). Now lets see what’s new in detail.
 
-## Team Workspaces
+# Team Workspaces
 
 In **Banana Cake Pop 1**, we've introduced _Personal Workspaces_ for individuals to keep documents safe across devices. _Personal Workspaces_ is a free tier feature and will stay forever free. However, this time we are introducing a new feature called _Team Workspaces_.
 
 _Team Workspaces_, as the name implies, allow teams to work together and share documents. To create _Team Workspaces_ an _Organization_ is required and can be created by anyone. _Organization_ is in preview and becomes a paid feature when the preview phase ends. We'll inform you as soon as the preview phase ends so that you can decide whether to use it.
 
-## Express Middleware
+# Express Middleware
 
 We launched our first NodeJS middleware on [NPM](https://www.npmjs.com/package/@chillicream/bananacakepop-express-middleware).
 
 You can plug **Banana Cake Pop** to your own GraphQL server with just 2 lines of code. Also, you can define per configuration whether to use our _cdn_ hosted version of the app or your own _self_ hosted version, and much more.
 
 Check out our [recipes](https://www.npmjs.com/package/@chillicream/bananacakepop-express-middleware#recipes) for [graphql-http](https://github.com/graphql/graphql-http), [graphql-yoga](https://the-guild.dev/graphql/yoga-server), and [express-graphql](https://github.com/graphql/express-graphql)!
 
-## Progressive Web App (PWA)
+# Progressive Web App (PWA)
 
 With version 3, **Banana Cake Pop** meets the PWA requirements, which allows the web version to be installed as an app. In Chrome on macOS, it looks like this.
 
 ![Banana Cake Pop PWA](../../public/images/blog/2023-01-08-new-in-banana-cake-pop-3/banana-cake-pop-pwa.png)
 
-## Enterprise Single Sign-On (SSO)
+# Enterprise Single Sign-On (SSO)
 
 We've added Enterprise Single Sign-On (SSO) to **Banana Cake Pop**, which lets companies bring their own identity service, so that their employees can use their company logins. Please reach out to us if you're interested.
 
-## Enterprise Services
+# Enterprise Services
 
 For companies, we’re introducing **Banana Cake Pop** enterprise services, which can be deployed under their own Azure subscription. This gives companies control over their own data. Please reach out to us if you're interested.
 
-## Insider Web Version
+# Insider Web Version
 
 We brought the _Insider_ version to the web. Get early access to new features, or even help us find that last-minute show stopper issue.
 
 Check it out here: [insider.bananacakepop.com](https://insider.bananacakepop.com).
 
-## Subscribe
+# Subscribe
 
 To stay up to date, subscribe to our [ChilliCream YouTube Channel](https://www.youtube.com/c/ChilliCream) to get notified whenever we publish new videos.
 

website-next/content/blog/2023-02-07-new-in-banana-cake-pop-4.md

@@ -12,7 +12,7 @@ authorImageUrl: https://avatars0.githubusercontent.com/u/4325318?s=100&v=4
 
 In version 4, we mainly focused on polishing and fixing UI glitches to improve the overall user experience, but that doesn't mean there isn't any new feature. To download **Banana Cake Pop 4**, go to [bananacakepop.com](https://bananacakepop.com). Let me walk you through the most important things we did in Version 4.
 
-## Paste cURL and Fetch
+# Paste cURL and Fetch
 
 Almost any IDE or Tool nowadays allows copying HTTP requests as cURL or fetch. So why not make use of it? Yeah, that's what we thought too. With version 4, we support pasting `cURL` and `fetch` GraphQL requests into **Banana Cake Pop**.
 
@@ -22,7 +22,7 @@ This is very helpful in various scenarios, especially when working with the Chro
 
 There are two ways of creating a new document for a copied `cURL` or `fetch` GraphQL request. First, use the shortcut. `CMD + OPT + V` on macOS and `CTRL + ALT + V` on windows. Second, click the three dots icon next to the save button for tabs, and then click _New document from clipboard_. Ta-da, that's it!
 
-## Schema Reload
+# Schema Reload
 
 Sometimes, reloading a schema takes just a couple of milliseconds, which makes it rather impossible to see the loading indicator spinning. In general, feedback is critical when clicking a button, so we know whether we clicked it. The same goes for the schema reload button. Without knowing whether we clicked it, we’ll click it again and again. In the end, we come to the conclusion that the schema reload does not work. In fact, this isn't true, but how should we know?
 
@@ -32,23 +32,23 @@ Additionally, we merged the schema reload button with the schema fetch status to
 
 Furthermore, we improved the schema fetch status, including its tooltip in the status bar, which makes things more explicit.
 
-## Close Multiple Document Tabs
+# Close Multiple Document Tabs
 
 Finally, after quite some time, we've added a bunch of ways to close multiple document tabs simultaneously. Right-click on a document tab and choose between _close others_, _close to the right_, and _close all_. Enjoy!
 
-## Menu Enhancements
+# Menu Enhancements
 
 We've standardized and enhanced the menu component. We've fixed positioning issues and glitches. Also, we introduce navigation by key (arrow up and down).
 
-## Schema Reference Default Values
+# Schema Reference Default Values
 
 Default values for fields in the schema reference column and type view are now available.
 
-## Become An Insider
+# Become An Insider
 
 Hey you, we're looking for you to become an _Insider_ to help us shape the future of **Banana Cake Pop**. We're constantly pushing new _Insider_ builds, sometimes even daily. Get early access to new features, or help us find that last-minute show-stopper issue. Go to [bananacakepop.com](https://bananacakepop.com) to get the latest version of the _Insider_ app or check out the online web version on [insider.bananacakepop.com](https://insider.bananacakepop.com) instead.
 
-## Subscribe
+# Subscribe
 
 To stay up to date, subscribe to our [ChilliCream YouTube Channel](https://www.youtube.com/c/ChilliCream) to get notified whenever we publish new videos.
 

website-next/content/blog/2025-02-01-hot-chocolate-15.md

@@ -11,7 +11,7 @@ authorImageUrl: https://avatars1.githubusercontent.com/u/9714350?s=100&v=4
 
 Originally, we did not plan on releasing another major version of Hot Chocolate before we release the next major version of Fusion. Really the whole team was focused on working in Fusion, our platform for building distributed GraphQL services. However, while I was upgrading Microsoft’s Azure Data API Builder to Hot Chocolate 14, I stumbled upon a regression introduced between Hot Chocolate 12 and Hot Chocolate 14. Unfortunately, fixing it in 14.4 would have required breaking changes.
 
-## Type System
+# Type System
 
 Microsoft’s Azure Data API Builder uses type interceptors to build a GraphQL schema from a database schema. The intermediary schema it produces is a heavily annotated GraphQL schema document. This approach is straightforward and we do something similar with Hot Chocolate Fusion. However, in the case of Azure Data API Builder, the directives used are more complex and utilize input object structures.
 
@@ -28,15 +28,15 @@ However, this change had broader implications, so we also introduced another ste
 
 If you are using type interceptors, the `OnAfterCompleteTypes` hook may no longer behave as before. This might cause errors that do not break compilation per se but do break the runtime behavior. Because of these changes, we decided to rename the Hot Chocolate 14.4 release to Hot Chocolate 15.
 
-## Opportunities
+# Opportunities
 
 If we are doing a major release, let’s not waste a version bump just for a regression fix. We decided to merge the changes of our current development branch and turn it into a proper major release, shipping a few nice features in the process.
 
-## Supported .NET Versions
+# Supported .NET Versions
 
 With Hot Chocolate 15, we have realigned the frameworks we support and dropped support for .NET Standard 2.0, .NET 6.0, and .NET 7.0. Going forward, Hot Chocolate 15 supports .NET 8.0 and .NET 9.0. This allows us to modernize a lot of code and remove many conditional compilation directives.
 
-## Projections
+# Projections
 
 One long-standing feature of Hot Chocolate is the `HotChocolate.Data` integration, which makes it easy to build on top of _Entity Framework_, Marten, _RavenDB_ or _MongoDB_. It also rich data features like pagination, sorting, filtering, and projections with minimal setup:
 
@@ -64,7 +64,7 @@ public static IQueryable<Product> GetProducts(CatalogContext dbContext)
 
 We introduced some **experimental** features in Hot Chocolate 14 to address these problems, but we weren’t fully satisfied with the implementation. The general direction was good, but the specifics needed work. So we took a step back, refined what worked, and turned it into a proper feature that is no longer experimental.
 
-## DataLoader Basics
+# DataLoader Basics
 
 Let’s first discuss **DataLoader**, a fundamental concept in GraphQL for batching and deferring data fetching. What many people don’t know is that Meta (formals Facebook) used the concept of a "data loader" before GraphQL even existed, calling it "preparables" or "loader." The idea is to have a unified, interface for efficiently fetching data.
 
@@ -153,7 +153,7 @@ public static async Task<Dictionary<int, Brand>> GetBrandByIdAsync(
 
 So, the example above will lead to the DataLoader interface `IBrandByIdDataLoader`.
 
-## Adding Projections, Filtering, and Sorting
+# Adding Projections, Filtering, and Sorting
 
 How do we now introduce _client-driven_ projections, filtering, and sorting without exposing `IQueryable` from our business layer?
 
@@ -244,7 +244,7 @@ public static async Task<Connection<Brand>> GetBrandByIdAsync(
 
 This is a very powerful feature that allows you to keep your business layer clean while still enabling client-driven data fetching. Since we are using DataLoader, we do not have to worry about split queries or other inefficiencies.
 
-## Pagination
+# Pagination
 
 So, how does this change our resolver when we want to filter and sort? Lets say we have a top-level query that fetches all brands.
 
@@ -405,7 +405,7 @@ The beauty of this approach is that the complexity in my business layer remains
 
 ![GreenDonut Packages By Layer](../../public/images/blog/2025-02-01-hot-chocolate-15/greendonut-2.png)
 
-## DataLoader Branching
+# DataLoader Branching
 
 But wait — if we use a DataLoader and fetch by key and path in different query contexts, wouldn’t that lead to conflicting data fetches? It would if we were using the same DataLoader. However, DataLoaders are immutable. When we apply a wither method, we are effectively branching the DataLoader as we are effectively changing what we fetch and how we fetch it.
 
@@ -438,7 +438,7 @@ public async Task<Page<Brand>> Handle(
 
 In this case, the Include is merged into the same DataLoader branch. The new DataLoader allows you to define custom branching rules and introduce custom state, enabling you to extend the base functionality as needed.
 
-## Conclusion
+# Conclusion
 
 While we hadn’t originally planned to release this at this time, I believe it brings a fantastic set of additions and will empower you to build layered and clean GraphQL services better than ever. With the new APIs — and I’ve only shown a fraction of them — you can now create well-structured GraphQL services without compromising performance or abstraction. At the same time, you can keep complexity low and productivity high.