fix: update confusing example in Coder plugin README (#115)

Parkreiner · web-flow · commit ea46efcfaf28 · 2024-04-15T17:16:58.000-04:00
* fix: update confusing example in Coder plugin README

* fix: remove accidental whitespace
diff --git a/plugins/backstage-plugin-coder/README.md b/plugins/backstage-plugin-coder/README.md
@@ -47,7 +47,8 @@ the Dev Container.
 3. Add the `CoderProvider` to the application:
 
    ```tsx
-   // In packages/app/src/App.tsx
+   // packages/app/src/App.tsx
+
    import {
      type CoderAppConfig,
      CoderProvider,
@@ -94,14 +95,26 @@ the Dev Container.
 4. Add the `CoderWorkspacesCard` card to the entity page in your app:
 
    ```tsx
-   // In packages/app/src/components/catalog/EntityPage.tsx
-   import { CoderWorkspacesCard } from '@coder/backstage-plugin-coder';
+   // packages/app/src/components/catalog/EntityPage.tsx
 
-   // ...
+   import { CoderWorkspacesCard } from '@coder/backstage-plugin-coder';
 
-   <Grid item md={6} xs={12}>
-     <CoderWorkspacesCard readEntityData />
-   </Grid>;
+   // We recommend placing the component inside of overviewContent
+   const overviewContent = (
+     <Grid container spacing={3} alignItems="stretch">
+       {entityWarningContent}
+       <Grid item md={6}>
+         <EntityAboutCard variant="gridItem" />
+       </Grid>
+
+       {/* Coder component should go inside Grid to help it work with MUI layouts */}
+       <Grid item md={6} xs={12}>
+         <CoderWorkspacesCard readEntityData />
+       </Grid>
+
+       {/* Other elements for overviewContent go here */}
+     </Grid>
+   );
    ```
 
 ### `app-config.yaml` files
