docs: fix readme install instructions

README.md

@@ -68,36 +68,86 @@ The frontend will display the contents of the results plugin for the AutoGov sta
 
 ### Installation into Backstage
 
+#### Update Configuration
+
+1. Add an autogov config section to your `app-config.yaml`
+
+```yaml
+autogov:
+  github:
+    resultsFile:
+      allowOverride: false
+      default: "results"
+    requireAnnotation: true
+    entityKinds:
+      - "component"
+    entityTypes:
+      - "website"
+      - "service"
+    maxReleasesResults: 5
+```
+
+1. Update GitHub integration if you have one
+
+```yaml
+github:
+  - host: github.com # or your github instance
+    apiBaseUrl: https://api.github.com
+    token: ${GITHUB_TOKEN}
+```
+
+#### Release Card install
+
 1. To install to the Autogov Plugins to the appropriate place, run the following two commands:
 
-   ```zsh
+```zsh
    # from root
    yarn --cwd packages/app add @liatrio/backstage-plugin-autogov-releases-card@^1.6.2
    yarn --cwd packages/backend add @liatrio/backstage-plugin-autogov-releases-backend@^1.6.2
-   ```
+```
 
 #### Autogov Plug-in Release Card Backend
 
 1. Update `packages/backend/src/index.ts` with:
 
+`diff`
+
 ```diff
 +  backend.add(
 +    import('@liatrio/backstage-plugin-autogov-releases-backend'),
 +  );
 backend.start();
 ```
 
+`copy paste`
+
+```.ts
+backend.add(
+  import('@liatrio/backstage-plugin-autogov-releases-backend'),
+);
+```
+
 #### Autogov Plug-in Release Card Frontend
 
 1. Update `packages/app/src/components/catalog/EntityPage.tsx` with:
 
-   ```diff
+`diff`
+
+```diff
    + import { AutogovReleasesCard } from '@liatrio/backstage-plugin-autogov-releases-card';
-   ```
+```
+
+`copy paste`
+
+```.tsx
+import { AutogovReleasesCard } from '@liatrio/backstage-plugin-autogov-releases-card';
+```
 
 1. Further down, find the following block of code:
 
-   ```diff
+`diff`
+
+```diff
    const overviewContent = (
      <Grid container spacing={3} alignItems="stretch">
        {entityWarningContent}
@@ -125,7 +175,21 @@ backend.start();
    +    </EntitySwitch>
      </Grid>
    );
-   ```
+```
+
+`copy paste`
+
+```.tsx
+
+    <EntitySwitch>
+      <EntitySwitch.Case
+         if={isKind('component') && isComponentType(['website', 'service'])}>
+        <Grid item md={8} xs={12}>
+          <AutogovReleasesCard />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch>
+```
 
 ## Autogov Releases and Autogov Status Column and Processor Plug-in
 
@@ -156,23 +220,35 @@ The column will display the contents of the results of the Autogov status (pass/
    ```zsh
    # from root
    yarn --cwd packages/app add @liatrio/backstage-plugin-autogov-status-catalog-column@^1.6.2
-   yarn --cwd @liatrio/backstage-plugin-backend-module-autogov-processor@^1.6.2
+   yarn --cwd packages/backend add @liatrio/backstage-plugin-backend-module-autogov-processor@^1.6.2
    ```
 
 #### Autogov Plug-in Latest Release Autogov Status Catalog Processor
 
 1. Update `packages/backend/src/index.ts` with:
 
+`diff`
+
 ```diff
 +  backend.add(
 +    import('@liatrio/backstage-plugin-backend-module-autogov-processor'),
 +  );
 backend.start();
 ```
 
+`copy paste`
+
+```.ts
+backend.add(
+  import('@liatrio/backstage-plugin-backend-module-autogov-processor'),
+);
+```
+
 #### Autogov Plug-in Latest Release Autogov Status Catalog Column
 
-1. Update `packages/app/App.tsx`:
+1. Update `packages/app/src/App.tsx`:
+
+`diff`
 
 ```diff
 +  import {
@@ -184,8 +260,20 @@ backend.start();
 const app = createApp({
 ```
 
+`copy paste`
+
+```.tsx
+import {
+  defaultColumnsWithAutogovStatusRightOf,
+  AutogovLatestReleaseStatusPicker,
+} from '@liatrio/backstage-plugin-autogov-status-catalog-column';
+import { DefaultFilters } from '@backstage/plugin-catalog-react';
+```
+
 1. Further down, find the following code block and update:
 
+`diff`
+
 ```diff
 -      <Route path="/catalog" element={<CatalogIndexPage />} />
 +      <Route
@@ -206,6 +294,27 @@ const app = createApp({
 +      />
 ```
 
+`copy paste`
+
+```.tsx
+    <Route
+      path="/catalog"
+      element={
+        <CatalogIndexPage
+          columns={context =>
+            defaultColumnsWithAutogovStatusRightOf('Description', context)
+          }
+          filters={
+            <>
+              <DefaultFilters />
+              <AutogovLatestReleaseStatusPicker />
+            </>
+          }
+        />
+      }
+    />
+```
+
 ## Configuration Options
 
 The following configuration options are available for the the plugins in your `app-config.yaml` file:
@@ -233,22 +342,6 @@ The following configuration options are available for the the plugins in your `a
 
 - Maximum number of releases to show in autogov results. Default is `5`.
 
-## Example Configuration
-
-```yaml
-autogov:
-  github:
-    resultsFile:
-      allowOverride: false
-      default: "results"
-    requireAnnotation: true
-    entityKinds:
-      - "component"
-    entityTypes:
-      - "website"
-    maxReleasesResults: 5
-```
-
 ## Contributing
 
 See [Contributing](./CONTRIBUTING) to Backstage GitHub Releases Autogov Plugin