Cloud-native API Administration with Red Hat 3scale API Management

Procedure 5.2. Instructions

1. Update the company name for use within the developer portal.

   1. Within a web browser, navigate to the 3scale API Management Admin Portal. The URL to the Admin Portal is https://3scale-admin.apps.ocp4.example.com.

   2. Using the top pane navigation drop-down, click Account Settings.

   3. Next to Account Details, click Edit.

   4. Change the organization name to Bob's Boxes and click Update Account.

2. Review the default look and feel of the developer portal.

   1. Using the top pane navigation drop-down, click Audience.

   2. Preview the current version of the developer portal by clicking Developer Portal > Visit Portal.

      Close the CMS toolbar by clicking the X (close) button in the top right corner.

   3. Review the default style and theme of the portal. Notice the blue theme and that the company name is Bob's Boxes.

      Leave this tab open because you will visit the portal several times to view your changes.

3. Add a custom company logo to the navigation of the portal.

   1. Within the Admin Portal, navigate to Developer Portal → Logo and upload the file ~/DO240/labs/portal-customizing/icon.png.

   2. Navigate to Developer Portal → Content.

      This area displays the structure and content of your developer portal. The right side of the page is further divided into two sections: the file hierarchy and file editing.

   3. Within the file hierarchy, under the Layouts heading, select the file called Main layout. This file provides the structure for many of the pages within the default developer portal.

   4. Modify the contents of the file by adding an img tag referencing the provider.logo_url variable. After your updates, the file should match the following contents:

      ...output omitted...
            <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
              <div class="container tabbed">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="/">
                    <img src="{{ provider.logo_url }}" height="32px" />
                    {{  provider.name }}
                  </a>
                </div>
                {% include 'submenu'%}
              </div>
            </nav>
      ...output omitted...

   5. Deploy your changes to the developer portal by clicking Publish at the bottom of the file editing panel.

   6. Select the developer portal tab and refresh the page to view the logo in the navigation bar.

4. Customize the style of the developer portal by modifying the included CSS file.

   1. Within the Admin Portal tab, select the default.css file from the file hierarchy.

   2. Modify the background color of the body selector to orange. The file should match the following excerpt:

      ...output omitted...
      body {
        background-color: darkorange; /* fallback */
        background-color: rgb(255, 140, 0);
        ...output omitted...
      }
      ...output omitted...

   3. Deploy your changes to the developer portal by clicking Publish at the bottom of the file editing panel.

      Select the developer portal tab and refresh the page to view the color theme change to orange.

5. Add a new page to the developer portal that shows company information.

   1. Within the Admin Portal, open the file called Documentation. Click New Page at the top right.

   2. Fill out the form according to the following table:

      Field	Value
      Title	About
      Path	/about

      Within the Advanced Options section, make sure Liquid enabled is checked.

      Leave all other fields as their default values and click Create Page.

   3. Update the contents for the about page by pasting the following HTML snippet into the editor:

      <h1>About</h1>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan est id neque interdum posuere. Ut eleifend et sapien nec pharetra. Vivamus condimentum magna vitae justo rutrum, non vestibulum odio ultricies. Morbi eget sem sit amet erat dapibus molestie. Nullam nec felis et massa tincidunt interdum. Integer imperdiet nisi ac lacus feugiat pretium. Suspendisse accumsan consequat augue, a feugiat metus commodo sed.</p>

   4. Deploy your changes to the developer portal by clicking Publish at the bottom of the file editing panel.

      Select the developer portal tab and navigate to https://3scale.apps.ocp4.example.com/about to view the new about page.

6. Add a button to the navigation for the about page.

   1. Within the Admin Portal tab, open the file called submenu under the Partials heading.

   2. Update the contents of the partial to include an anchor tag for the about page. The file should match the following excerpt:

      ...output omitted...
        {% if current_user %}
          ...output omitted...
              <li><a class="{% if urls.docs.active? %}active{% endif %}" href="/docs">Documentation</a></li>
      
              <li class="{% if request.path == "/about" %}active{% endif %}">
                <a href="/about">About</a>
              </li>
      
            </ul>
        ...output omitted...
        {% else %}
          <ul class="nav navbar-nav">
            <li><a href="/docs">Documentation</a></li>
            <li><a href="/#plans">Plans</a></li>
            <li class="{% if request.path == "/about" %}active{% endif %}">
                <a href="/about">About</a>
            </li>
          </ul>
          ...output omitted...
        {% endif %}
      </div>

   3. Deploy your changes to the developer portal by clicking Publish at the bottom of the file editing panel.

      Select the developer portal tab and refresh the page. Use the navigation at the top of the page to navigate between the different pages, including the new about page.