# 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:

```javascript
// 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
```html
<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
```html
<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
```html
<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:

```json
[
  {
    "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": "john@example.com"
    }
  }
]
```

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:

```html
<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`:

```javascript
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