Improve Jira & Jenkins pages (#1109)

* Adds information about Jira

* Adds more details to Jenkins page

content/backstage/plugins/jenkins.md

@@ -5,6 +5,21 @@ lead: 'Build, test, and deploy on Jenkins CI/CD platform.'
 attribution:
   text: '@timja'
   href: https://github.com/timja
+intro: | 
+  <p>
+    <a href="https://www.jenkins.io/" target="_blank">Jenkins</a> is an open source automation server to build, test, and deploy software. It lets you execute a series of actions to build a continuous integration pipeline. Jenkins is well known for its extensive set of plugins.
+  </p>
+  <p>
+    The Jenkins Backstage plugin brings builds data associated with your services to your Developer Portal. The  plugin can pull build information from a GitHub Organization project in Jenkins. Other Jenkins project types like Freestyle project and Pipeline are not supported yet.
+    In this guide you'll find:
+  </p>
+  <ul>
+    <li><a href="#installation-steps">Installation steps</a></li>
+    <li><a href="#section-add-annotations">Required annotations</a></li>
+    <li><a href="#things-to-know">How to get a Jenkins API token</a></li>
+    <li><a href="#setting-up-a-local-jenkins-environment">Setting up Jenkins locally</a></li>
+    <li><a href="#supported-types-of-jenkins-projects">Supported types of Jenkins projects</a></li>
+  </ul>
 
 seo:
   title: 'Backstage Jenkins Plugin | Roadie'
@@ -18,6 +33,8 @@ coverImageAlt: 'A screenshot of the Jenkins plugin.'
 availableOnRoadie: true
 roadieDocsPath: /jenkins/
 
+thingsToKnowTitle: How to get a Jenkins API token
+
 gettingStarted:
   - intro: Install the plugin.
     language: bash
@@ -55,6 +72,7 @@ gettingStarted:
       
   - intro: Add Jenkins plugin annotation to your component's config. ()
     language: YAML
+    sectionId: 'add-annotations'
     code: |
       // catalog-info.yaml
       metadata:
@@ -64,22 +82,6 @@ gettingStarted:
 
 ---
 
-### Jenkins plugin features
-
-The Jenkins plugin can pull build information from a GitHub Organization project in Jenkins. Other Jenkins project types like Freestyle project and Pipeline are not supported yet.
-
-![Jenkins menu to create new items](../../assets/backstage/plugins/jenkins/jenkins-new-item-options.png)
-
-The plugin shows a list of the most recent builds in Backstage. This list includes builds from all projects that are available in the GitHub Organization project in Jenkins.
-
-![Jenkins and Backstage side-by-side](../../assets/backstage/plugins/jenkins/jenkins-and-backstage-side-by-side.png)
-
-View additional build information by selecting a build from the list.
-
-![Backstage Jenkins job details](../../assets/backstage/plugins/jenkins/backstage-jenkins-job-details.png)
-
-### How to get a Jenkins API token
-
 Your Backstage app's backend connects to your Jenkins server using the Jenkins API. A Jenkins API token is required. This token can be obtained from a system environment variable (ex. JENKINS_BASIC_AUTH_HEADER) containing a base64 encoded string.
 
 1. Access the settings page of the Jenkins user for which you want to create an API token. For example, for a user named "admin" on a local Jenkins server: [http://localhost:8080/user/admin/](http://localhost:8080/user/admin/).
@@ -98,3 +100,16 @@ Your Backstage app's backend connects to your Jenkins server using the Jenkins A
 If you want to try out this plugin but you don't have a Jenkins server to test it with, you can quickly setup a local Jenkins server with docker. See the instructions available in the [official Jenkins Docker GitHub repo](https://github.com/jenkinsci/docker/blob/master/README.md).
 
 
+### Supported types of Jenkins projects
+
+The  plugin can pull build information from a GitHub Organization project in Jenkins. Other Jenkins project types like Freestyle project and Pipeline are not supported yet.
+
+![Jenkins menu to create new items](../../assets/backstage/plugins/jenkins/jenkins-new-item-options.png)
+
+The plugin shows a list of the most recent builds in Backstage. This list includes builds from all projects that are available in the GitHub Organization project in Jenkins.
+
+![Jenkins and Backstage side-by-side](../../assets/backstage/plugins/jenkins/jenkins-and-backstage-side-by-side.png)
+
+View additional build information by selecting a build from the list.
+
+![Backstage Jenkins job details](../../assets/backstage/plugins/jenkins/backstage-jenkins-job-details.png)

content/backstage/plugins/jira.md

@@ -5,6 +5,19 @@ lead: 'See Jira summary in Backstage'
 attribution:
   text: Roadie
   href: https://roadie.io
+intro: |
+  <p>
+      <a href="https://www.atlassian.com/software/jira" arget="_blank">Jira</a> is an issue tracking product developed by Atlassian that allows bug tracking and agile project management. Jira offers numerous features like sprints for Scrum management and other agile boards like Kanban. This allows teams to organize projects, define, assign and prioritize tasks. Furthermore, Jira is ideal for progress tracking, bug tracking and complete transparency throughout the entire project lifecycle.
+  </p>
+  <p>
+    The Jira Backstage plugin lets you bring the Jira project related to your service into the Catalog. You can keep track of tasks, stories, bugs, and epics from the service page in Backstage. 
+    In this guide you'll find:
+  </p>
+  <ul>
+    <li><a href="#installation-steps">Installation steps</a></li>
+    <li><a href="#section-add-annotations">Required annotations</a></li>
+    <li><a href="#things-to-know">Obtaining a Jira token</a></li>
+  </ul>
 
 seo:
   title: 'Backstage Jira Plugin | Roadie'
@@ -20,6 +33,10 @@ coverImageAlt: 'A preview of Jira plugin including tasks summary, project inform
 availableOnRoadie: true
 roadieDocsPath: /jira/
 
+thingsToKnowTitle: Using a Jira token
+thingsToKnowHostDependant: true
+thingsToKnowOnRoadie: /docs/integrations/jira/#step-1-create-an-api-token
+
 gettingStarted:
   - intro: Install the plugin into Backstage.
     language: bash
@@ -74,26 +91,26 @@ gettingStarted:
 
   - intro: Add annotation to the yaml config file of a component
     language: yaml
+    sectionId: 'add-annotations'
     code: |
       metadata:
         annotations:
           jira/project-key: <example-jira-project-key>
           jira/component: <example-component> # optional, you might skip this value to fetch data for all components
-          jira/token-type: Bearer # optional, used for Activity stream feed. If you are using Basic auth you can skip this. 
-          
+          jira/token-type: Bearer # optional, used for Activity stream feed. If you are using Basic auth you can skip this.
+
   - intro: Even though you can use Bearer token please keep in mind that Activity stream feed will only contain entries that are visible to anonymous users. In order to view restricted content you will need to authenticate via Basic authentication, as described in official documentation (https://developer.atlassian.com/server/framework/atlassian-sdk/consuming-an-activity-streams-feed/#authentication).
 
   - intro: Provide the JIRA_TOKEN environmental variable (instructions at the notes below)
 ---
 
-## Get and provide `JIRA_TOKEN` as env variable.
 
-1. Obtain you personal token from jira - https://id.atlassian.com/manage-profile/security/api-tokens
+1. Obtain you [personal token from Jira](https://id.atlassian.com/manage-profile/security/api-tokens).
 2. Create a base64-encoded string by converting a string in format
 
-     ```
-     <your-atlassian-account-mail>:<your-jira-token>
-    ```
+   ```
+   <your-atlassian-account-mail>:<your-jira-token>
+   ```
 
    for example:
 

src/stylesheets/tailwind.css

@@ -103,3 +103,14 @@ html {
   @apply list-disc;
   @apply pl-6;
 }
+
+.prose-xl a {
+  @apply border-b;
+  @apply border-orange-500;
+}
+.prose-xl a.anchor {
+  @apply border-0;
+}
+.prose-xl > ol {
+  @apply list-decimal;
+}