customgrav

Custom scripts and styles for Gravitee API Portal customization.

Features

• Mobile Menu: Responsive mobile navigation menu
• Try-It REST Client: Interactive API request builder modal

Usage

Include the scripts and styles in your Gravitee API Portal via jsDelivr CDN.

Important: Set configuration BEFORE loading the script:

// 1. Set configuration (optional)
window.CustomGravConfig = {
  examplesUrl: 'https://yourserver.com/examples.json',
  triggerPrefix: '#id-',
  defaultHeaders: {
    'X-Gravitee-Api-Key': 'your-api-key-here'
  }
};

// 2. Load CSS
(function () {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://cdn.jsdelivr.net/npm/customgrav/custom-styles.css';
  document.head.appendChild(link);
})();

// 3. Load JavaScript after page loads
window.addEventListener('load', function () {
  var script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/customgrav/custom-scripts.js';
  document.body.appendChild(script);
});

Alternative: Direct Script Tags

<script>
  window.CustomGravConfig = {
    examplesUrl: 'https://yourserver.com/examples.json',
    defaultHeaders: {
      'X-Gravitee-Api-Key': 'your-api-key-here'
    }
  };
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/customgrav/custom-styles.css">
<script src="https://cdn.jsdelivr.net/npm/customgrav/custom-scripts.js"></script>

Specific Version

<script src="https://cdn.jsdelivr.net/npm/customgrav@1/custom-scripts.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/customgrav@1/custom-styles.css">

Minified Versions

<script src="https://cdn.jsdelivr.net/npm/customgrav/custom-scripts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/customgrav/custom-styles.min.css">

Try-It REST Client Configuration

The Try-It feature activates when users click links with href="#id-{example-id}" pattern.

Setup Steps

1. Create an examples.json file with your API endpoint examples:

[
  {
    "id": "weather",
    "name": "Get Weather",
    "method": "GET",
    "url": "https://api.example.com/weather",
    "headers": {
      "Content-Type": "application/json"
    }
  },
  {
    "id": "create-user",
    "name": "Create User",
    "method": "POST",
    "url": "https://api.example.com/users",
    "body": {
      "name": "John Doe",
      "email": "[email protected]"
    }
  }
]

2. Host your examples.json file and configure the URL using window.CustomGravConfig (see Usage section above)

3. Add Try-It links in your documentation:

<a href="#id-weather">Try it</a>
<a href="#id-create-user">Try it</a>

When clicked, these links will open the REST client modal pre-filled with the corresponding example from your examples.json.

Configuration Options

All configuration options for window.CustomGravConfig:

window.CustomGravConfig = {
  // Required: URL to your examples.json file
  examplesUrl: 'https://yourserver.com/examples.json',
  
  // Optional: Link prefix to trigger the Try-It modal (default: '#id-')
  triggerPrefix: '#id-',
  
  // Optional: Default headers to include with every request
  defaultHeaders: {
    'X-Gravitee-Api-Key': 'your-api-key-here',
    'Content-Type': 'application/json'
  }
};

Files Included

• custom-scripts.js - Mobile menu and Try-It REST client functionality
• custom-styles.css - Responsive styles and mobile optimizations

License

MIT