### Conditional CSS class with Liquid

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/liquids

This example demonstrates using a Liquid 'if' tag to conditionally apply an 'active' class to a navigation menu item based on the current request URI.

```html
<!-- if we are inside '/documentation' URL -->
<li class="{% if request.request_uri contains "/documentation" %}active{% endif %}"><!-- add the active class to the menu item -->
  <a href="/documentation">Documentation</a>
</li>
```

--------------------------------

### Configuring service signup columns

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/multi-service-signup

Structure service information into div containers with the service-column class.

```html
{% for service in provider.services %}
  <div class="service-column">
    <p>{{ service.name }}</p>
    <p>{{ service.description }}</p>
    .
    .
    .
  </div>
{% endfor %}
```

--------------------------------

### Generating a signup link

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/multi-service-signup

Construct a signup link using the signup URL and service ID.

```html
<a href="{{ urls.signup }}?{{ service | toparam }}">Signup to {{ service.name }}</a>
```

--------------------------------

### Looping through services

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/multi-service-signup

Iterate through the provider's services to access service objects.

```liquid
{% for service in provider.services %}
  .
  .
  .
{% endfor %}
```

--------------------------------

### Include a partial in a template

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/overview-of-creating-your-developer-portal-for-threescale-managed-apis_creating-dev-portal

Use the include command to insert a partial, such as the submenu, into a page, layout, partial, or email template.

```liquid
{% include “submenu” %}
```

--------------------------------

### Final multi-service signup code

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/multi-service-signup

The complete loop structure including service details and conditional subscription links.

```liquid
{% for service in provider.services %}
  <div class="service-column">
      <p>{{ service.name }}</p>
      <p>{{ service.description }}</p>
      {% unless service.subscribed? %}
        <a href="{{ urls.signup }}?{{ service | to_param }}">Signup to {{ service.name }}</a>
      {% endunless %}
  </div>
{% endfor %}
```

--------------------------------

### Update Homepage Heading

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/overview-of-creating-your-developer-portal-for-threescale-managed-apis_creating-dev-portal

Change the landing page heading from 'Echo API' to 'Petstore API' in the Homepage template.

```html
<h1>Echo API</h1>
```

```html
<h1>Petstore API</h1>
```

--------------------------------

### Conditional subscription check

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/multi-service-signup

Use an unless block to display the signup link only if the user is not already subscribed to the service.

```liquid
{% unless service.subscribed? %}
  <a href="{{ urls.signup }}?{{ service | toparam }}">Signup to {{ service.name }}</a>
{% endunless %}
```

--------------------------------

### Configure ActiveDocs Specification

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/overview-of-creating-your-developer-portal-for-threescale-managed-apis_creating-dev-portal

Modify the documentation page template to select the second OpenAPI specification entry instead of the default first entry.

```liquid
{% assign spec = provider.api_specs.first %}
```

```liquid
{% assign spec = provider.api_specs[1] %}
```

--------------------------------

### Styling service columns

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/multi-service-signup

CSS for the service-column div to create a percentage-based layout.

```css
.service-column {
    float: left;
    margin-left: 10%;
    width: 45%;
}
.service-column:first-child {
  margin-left: 0;
}
```

--------------------------------

### Update Font Awesome stylesheet link in Main layout

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/overview-of-creating-your-developer-portal-for-threescale-managed-apis_creating-dev-portal

Replace the external CDN link for Font Awesome with the internal cdn_asset tag in the Main layout.

```Liquid
{{ '//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' | stylesheet_link_tag }}
```

```Liquid
{% cdn_asset /font-awesome/4.3.0/css/font-awesome.css %}
```

--------------------------------

### Update jQuery script include in Main layout

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/overview-of-creating-your-developer-portal-for-threescale-managed-apis_creating-dev-portal

Replace the external CDN link for jQuery with the internal cdn_asset tag in the Main layout.

```Liquid
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' | javascript_include_tag }}
```

```Liquid
{% cdn_asset /jquery/1.7.1/jquery.min.js %}
```

--------------------------------

### Reference an asset using an HTML anchor element

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/overview-of-creating-your-developer-portal-for-threescale-managed-apis_creating-dev-portal

Use an HTML <a> element to link to an asset uploaded to the content library by specifying its path.

```html
<a href="/images/MyLogo.png"/>
```

--------------------------------

### Generate SSO token via cURL

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/creating_the_developer_portal/sso

Use this POST request to generate a URL with a built-in SSO token for a specific user. The expires_in parameter defines the token validity in seconds.

```bash
curl -X POST -d "provider_key=YOUR_PROVIDER_KEY&username=USERNAME&expires_in=60" https://YOUR_ADMIN_PORTAL.3scale.net/admin/api/sso_tokens.xml
```

--------------------------------

### cURL command for testing API access

Source: https://docs.redhat.com/en/documentation/red_hat_3scale_api_management/2.16/html/getting_started/launching-apis

Use this cURL statement to verify that the 3scale access control layer is correctly configured by making an authenticated call to your staging endpoint.

```bash
curl "https://api-2445581407825.staging.apicast.io:443/v1/fast/track?user_key=287d64924e6120d215b1000ac07c063b"
```