Merge pull request #381 from basementstudio/fix/blogpost-layout

Fix/blogpost layout

Author: valebearzotti

apps/website/components/blog/hero.tsx

@@ -12,19 +12,20 @@ export function BlogHero({ featuredPost }: BlogHeroProps) {
 
   return (
     <Link href={`/blog/${featuredPost.slug}`} className="block col-span-12">
-      <section className="relative group overflow-visible h-full mb-8 md:mb-12">
-        <div className="relative border border-brand-neutral-500 group-hover:border-brand-neutral-300 h-full w-full flex flex-col md:flex-row">
-          <div className="w-full md:w-1/2 aspect-video md:border-r border-brand-neutral-500 flex-shrink-0 relative overflow-hidden mb-4 md:mb-0 group-hover:border-brand-neutral-300">
+      <section className="relative group overflow-visible mb-2">
+        <div className="relative border border-brand-neutral-500 group-hover:border-brand-neutral-300 w-full flex flex-col md:flex-row">
+          <div className="w-full md:w-1/2 md:border-r border-brand-neutral-500 overflow-hidden mb-4 md:mb-0 group-hover:border-brand-neutral-300">
             {image ? (
               <Image
                 src={image}
                 alt={featuredPost.title}
-                fill
-                className="object-contain"
+                width={0}
+                height={0}
                 sizes="(max-width: 768px) 100vw, 50vw"
+                className="w-full h-auto"
               />
             ) : (
-              <div className="w-full h-full flex items-center justify-center text-brand-neutral-200 text-sm">
+              <div className="w-full aspect-video flex items-center justify-center text-brand-neutral-200 text-sm">
                 No preview image
               </div>
             )}

apps/website/content/blog/build-and-submit-gpt-apps.mdx

@@ -5,15 +5,23 @@ category: "guides"
 date: "2025-12-23"
 order: 5
 textureImage: "/textures/text1.png"
+featured: true
 ---
 
 Learn how to submit your ChatGPT App to the OpenAI directory. We'll cover everything from preparing your assets to getting your app approved.
 
 <Callout variant="info">
-  In this guide, we'll use the arcade app as an example project.
-  You can find the complete source code on <a href="https://github.com/xmcp-dev/arcade" target="_blank" rel="noopener noreferrer">GitHub</a> and a build guide <a href="/blog/doom-with-xmcp">here</a>.
+  In this guide, we'll use the arcade app as an example project. You can find
+  the complete source code on{" "}
+  <a
+    href="https://github.com/xmcp-dev/arcade"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    GitHub
+  </a>{" "}
+  and a build guide <a href="/blog/doom-with-xmcp">here</a>.
 </Callout>
-    
 
 ## First steps
 
@@ -31,7 +39,7 @@ After you have your assets ready, head to the [OpenAI Platform Dashboard](https:
 In this section, you will upload your assets and provide information about your app.
 All fields are required, so be sure to fill them out correctly. Pay special attention to the following fields:
 
-- **Subtitle**: This is your best opportunity for discoverability, so keep it clear and descriptive. 
+- **Subtitle**: This is your best opportunity for discoverability, so keep it clear and descriptive.
 - **Description**: Write it in a marketing-friendly way while ensuring users understand what your app does.
 - **Email address or contact support URL**: This will be used to contact you if there are any issues with your app.
 - **App Commerce and purchasing**: For apps that involve sales of physical goods.
@@ -42,20 +50,19 @@ As of December 2025, only physical goods are allowed to be sold through the Open
 
 Provide your MCP server URL for OpenAI to scan for available tools and proceed with the verification process. Here, you will specify whether your server requires authentication or not.
 
-You will need to explain why each permission is needed or not. Be specific about what each tool does and why it requires or doesn't require those permissions. 
+You will need to explain why each permission is needed or not. Be specific about what each tool does and why it requires or doesn't require those permissions.
 
 - **Read-only**: Only reads data, no modifications
 - **Open-world**: Has web access or makes external calls
 - **Destructive**: Modifies or deletes data
 
-Next, you will need to verify your domain by serving the token provided by OpenAI at the path `/.well-known/openai-apps-challenge`. 
+Next, you will need to verify your domain by serving the token provided by OpenAI at the path `/.well-known/openai-apps-challenge`.
 
 If you're using xmcp standalone mode, this route is automatically generated for you after setting the `OPENAI-APPS-VERIFICATION-TOKEN` environment variable. If you're using adapter mode, you'll need to create it manually.
 
-
 ## Testing
 
-If you follow OpenAI's guidelines for creating a GPT App, this will be the easy part. In this section, you will need to provide test cases for scenarios where your app should be triggered and where it should not be triggered. 
+If you follow OpenAI's guidelines for creating a GPT App, this will be the easy part. In this section, you will need to provide test cases for scenarios where your app should be triggered and where it should not be triggered.
 
 For the positive test cases, you will need to provide:
 
@@ -74,12 +81,14 @@ For our arcade app, the test cases would be:
 ### Positive test cases
 
 A user wants to see what games are available in the arcade:
+
 - Scenario: User wants to browse the available classic arcade games before deciding which one to play
 - User prompt: I want to see what retro arcade games are available. Can you show me the arcade interface?
 - Tool triggered: "list_games"
 - Expected output: The retro arcade game selection interface is displayed showing available games
 
 A user wants to launch the DOOM game:
+
 - Scenario: User wants to play the classic DOOM game
 - User prompt: I'm in the mood for some classic gaming. Launch Doom for me!
 - Tool triggered: "launch_game"
@@ -88,6 +97,7 @@ A user wants to launch the DOOM game:
 ### Negative test cases
 
 A user wants to know more about Doom:
+
 - Scenario: User is asking about the documentation and capabilities of the arcade system, not requesting to use it
 - User prompt: Can you explain how the arcade tool works and what games it supports?
 
@@ -105,8 +115,8 @@ This section is optional. You can limit access to your app to specific countries
 
 ## Submit
 
-In this final step, you will need to add the release notes, check policy compliance, and set the age requirements for your app. 
+In this final step, you will need to add the release notes, check policy compliance, and set the age requirements for your app.
 
 Before you send your submission, keep a local backup of your app description, tool explanations, and test cases since the form can occasionally clear fields. If your submission gets rejected, you will need to start a new one from the beginning.
 
-For reference, check [OpenAI's App Submission Guidelines](https://developers.openai.com/apps-sdk/app-submission-guidelines) to ensure your app meets all requirements.
+For reference, check [OpenAI's App Submission Guidelines](https://developers.openai.com/apps-sdk/app-submission-guidelines) to ensure your app meets all requirements.