gitbook-plugin-platform-tabs

A GitBook plugin for displaying platform-specific content with tabbed interfaces. Supports Android, iOS, and HarmonyOS with multi-language code samples (Java/Kotlin, Objective-C/Swift, TypeScript/JavaScript).

Features

• Single-level platform tabs: Switch between Android, iOS, and HarmonyOS content
• Two-level code sample tabs: Platform tabs with nested language tabs for code examples
• Mintlify-inspired design: Clean, modern UI with smooth transitions
• Responsive: Works on desktop and mobile devices
• Print-friendly: All content visible when printing

Installation

npm install gitbook-plugin-platform-tabs

Usage

Configuration

Add the plugin to your book.json:

{
  "plugins": ["platform-tabs"],
  "pluginsConfig": {
    "platform-tabs": {
      "defaultPlatform": "Android",
      "platforms": ["Android", "iOS", "HarmonyOS"]
    }
  }
}

Single-level Platform Tabs

Use the platformtabs block to display platform-specific content:

<!-- platformtabs id="unique-id" -->
<!-- platform:Android -->
Android specific content here...
<!-- /platform -->
<!-- platform:iOS -->
iOS specific content here...
<!-- /platform -->
<!-- platform:HarmonyOS -->
HarmonyOS specific content here...
<!-- /platform -->
<!-- /platformtabs -->

Two-level Code Sample Tabs

Use the codesample block for code examples with platform and language tabs:

<!-- codesample id="method-example" -->
<!-- platform:Android -->
<!-- lang:Java -->
```java
// Java code example

// Kotlin code example

// Objective-C code example

// Swift code example

### Liquid Tag Syntax (Alternative)

You can also use Liquid tag syntax:

```markdown
{% platformtabs id="my-tabs" %}
{% platform "Android" %}
Android content
{% endplatform %}
{% platform "iOS" %}
iOS content
{% endplatform %}
{% endplatformtabs %}

{% codesample id="code-example" %}
{% platform "Android" %}
{% lang "Java" %}
```java
// Java code

{% endlang %} {% lang "Kotlin" %}

// Kotlin code

{% endlang %} {% endplatform %} {% endcodesample %}

## Styling

The plugin includes built-in CSS with a Mintlify-inspired design. The styles include:

- Platform tab headers with icons (Font Awesome)
- Language tab pills for code samples
- Responsive layout for mobile devices
- Print styles for offline reading

Font Awesome icons are used:
- Android: `fa-android` (green)
- iOS: `fa-apple` (black)
- HarmonyOS: `fa-mobile` (red)

## Example Output

### Platform Tabs

┌─────────────────────────────────────────────────────────┐ │ [Android] [iOS] [HarmonyOS] │ ├─────────────────────────────────────────────────────────┤ │ Android specific content here... │ │ │ └─────────────────────────────────────────────────────────┘

### Code Sample Tabs

┌─────────────────────────────────────────────────────────┐ │ [Android] [iOS] [HarmonyOS] │ ├─────────────────────────────────────────────────────────┤ │ [ Java ] [ Kotlin ] │ │ ───────────────────────────────────────────────────────│ │ java │ │ // Java code example │ │ │ └─────────────────────────────────────────────────────────┘

## Development

### Project Structure

gitbook-plugin-platform-tabs/ ├── index.js # Main plugin file ├── package.json # NPM package configuration ├── README.md # This file ├── assets/ │ ├── platform-tabs.js # Client-side JavaScript │ └── platform-tabs.css # Styles └── utils/ └── defined.js # Utility functions

### Building

```bash
npm install

Testing in Local GitBook

To test the plugin in your GitBook project:

cd /path/to/your/gitbook-project
npm install /path/to/gitbook-plugin-platform-tabs

Then add it to your book.json plugins list.

License

MIT