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

``bash
npm install gitbook-plugin-platform-tabs
`

Usage

$3

Add the plugin to your book.json:

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

$3

Use the platformtabs block to display platform-specific content:

`markdown


Android specific content here...


iOS specific content here...


HarmonyOS specific content here...


`

$3

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

`markdown



`java
// Java code example
`


`kotlin
// Kotlin code example
`




`objectivec
// Objective-C code example
`


`swift
// Swift code example
`



`

$3

You can also use Liquid tag syntax:

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

`markdown
{% codesample id="code-example" %}
{% platform "Android" %}
{% lang "Java" %}
`java
// Java code
`
{% endlang %}
{% lang "Kotlin" %}
`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

$3

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

$3

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

Development

$3

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

$3

`bash
npm install
`

$3

To test the plugin in your GitBook project:

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