PORT-7361 | Added width to image, fixed typo

docs/build-your-software-catalog/sync-data-to-catalog/git/github/guides/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Guides",
+  "position": 7
+}

docs/build-your-software-catalog/sync-data-to-catalog/git/github/guides/connect-github-repository-with-sonarqube-project.md

@@ -21,12 +21,12 @@ Tagging repositories with topics allows you to categorize, filter and add metada
 1. **Log in to GitHub** as a user with sufficient permissions to edit topics for a repository.
 2. **Navigate to the repository** you want to add a topic to.
 3. **Click on the settings icon**
-<img src='/img/build-your-software-catalog/sync-data-to-catalog/github/editGitHubTopics.png' border='1px' />
+<img src='/img/build-your-software-catalog/sync-data-to-catalog/github/editGitHubTopics.png' width='60%' border='1px' />
 
 4. **Click on the `Topics` field** to add a topic.
 
 5. **Add a topic** that represents the SonarQube project the service is related to, `port-sonarqube-kafka`. For this guide, let's assume there is a service entity identified by `kafka` in your `sonarQubeProject` blueprint in Port.
-<img src='/img/build-your-software-catalog/sync-data-to-catalog/github/addTopicToService.png' border='1px' />
+<img src='/img/build-your-software-catalog/sync-data-to-catalog/github/addTopicToService.png' width='60%' border='1px' />
 
 :::note Control the topic name
 Since our GitHub repository may already have several labels, we will need a mechanism to control how these topics will be related to our `sonarQubeProject` blueprint. A way to achieve this relation is to prefix the topic name with the keyword `port-sonarqube-`. We will then use JQ to select the topics that starts with this keyword. So, our example topic will be named `port-sonarqube-kafka`, which will correspond to a SonarQube Project entity identified by `kafka` in Port.
@@ -39,22 +39,22 @@ First, we will need to create a [relation](/build-your-software-catalog/customiz
 
 1. Head back to the [Builder](https://app.getport.io/settings/data-model), choose the `Service` (GitHub repository) <PortTooltip id="blueprint">blueprint</PortTooltip>, and click on `New relation`:
 
-<img src='/img/build-your-software-catalog/sync-data-to-catalog/github/addNewRelationToService.png' border='1px' />
+<img src='/img/build-your-software-catalog/sync-data-to-catalog/github/addNewRelationToService.png' width='50%' border='1px' />
 
 <br/><br/>
 
 2. Fill out the form like this, then click `Create`:
 
-<img src='/img/build-your-software-catalog/sync-data-to-catalog/github/createSonarQubeRelationOnService.png' width='60%' border='1px' />
+<img src='/img/build-your-software-catalog/sync-data-to-catalog/github/createSonarQubeRelationOnService.png' width='50%' border='1px' />
 
 <br/><br/>
 
 Now that the <PortTooltip id="blueprint">blueprints</PortTooltip> are related, we need to assign the relevant Services to each of our SonarQube Projects. This can be done by adding some mapping logic. Go to your [data sources page](https://app.getport.io/settings/data-sources), and click on your GitHub integration:
 
-<img src='/img/build-your-software-catalog/sync-data-to-catalog/github/githubServiceDataSources.png' border='1px' />
+<img src='/img/build-your-software-catalog/sync-data-to-catalog/github/githubServiceDataSources.png' width='60%' border='1px' />
 <br/><br/>
 
-Under the `resources` key, modify the mapping for the `servuce` kind by using the following YAML block. Then click `Save & Resync`:
+Under the `resources` key, modify the mapping for the `service` kind by using the following YAML block. Then click `Save & Resync`:
 
 <details>
 <summary><b>Relation mapping (Click to expand)</b></summary>
@@ -95,7 +95,7 @@ sonarQubeProject: .topics | map(select(startswith("port-sonarqube-"))) | map(sub
 What we just did was map the `SonarQube Project` to the relation between it and our `Services`.  
 Now, if our `SonarQube Project` identifier is equal to the GitHub service label, the `service` will automatically be linked to it &nbsp;🎉
 
-<img src='/img/build-your-software-catalog/sync-data-to-catalog/github/githubServiceAfterMapping.png' border='1px' />
+<img src='/img/build-your-software-catalog/sync-data-to-catalog/github/githubServiceAfterMapping.png' width='60%' border='1px' />
 
 ### Conclusion