tabs and modes

Custom. Provide tabbed alternatives (tabs/tab) and richer mode panels (modes/mode) for CLI, PowerShell, Portal etc. Supports query parameter and persistence.

Note that this page was generated by Agent mode in GitHub Copilot and then manually modified.

Purpose

These shortcodes let you present alternative instructions or code paths (e.g. Bash vs PowerShell, or Portal vs CLI) in a compact UI. They are progressively enhanced by a small JavaScript file so content still appears (all expanded) if JavaScript is disabled.

tabs + tab: Lightweight code/text variants.
modes + mode: Rich, bordered panels (steps, images, code, notes).
Unified query parameter override: ?tabs=bash or ?tabs=powershell.
Persistence: last chosen variant remembered across pages.

Shortcodes

Container	Child	Use Case
`tabs`	`tab`	Short code or textual alternatives
`modes`	`mode`	Longer instructions, mixed content

Query Parameter & Persistence

Append ?tabs=<name> (normalized to lowercase, alphanumeric only) to a page URL. All groups will attempt to activate the matching variant. Choices are stored in localStorage (global and per-group) so a user’s preference carries over.

When a user manually clicks a tab or mode, the current page URL is updated (via history.replaceState) to set ?tabs=<normalized-key> without causing a reload. This lets you copy/share a link that preserves the active variant.

Examples:

?tabs=bash
?tabs=powershell
?tabs=powershell,bash (comma list; first match per group wins)

Normalization

Display title → key transformation: lowercase + strip non-alphanumeric.

Title	Key
Bash	`bash`
PowerShell	`powershell`
Azure CLI	`azurecli`
Portal (UI)	`portalui`

tabs shortcode (tabs/tab)

Raw tabs

Raw example so the shortcode is shown literally:

{{< tabs default="Bash" >}}
{{< tab title="Bash" >}}
```bash
az group create --name rg1 --location westeurope
```
{{< /tab >}}
{{< tab title="PowerShell" >}}
```powershell
New-AzResourceGroup -Name rg1 -Location westeurope
```
{{< /tab >}}
{{< /tabs >}}

Rendered tabs

Authenticate
```
az login
```
```
Connect-AzAccount
```

Show current context

az account show --output jsonc

Get-AzContext | Format-List

modes/mode shortcodes

Raw modes example

{{< modes default="Portal" >}}
  {{< mode title="Portal" >}}

  1. Open the Azure Portal.
  1. Create a resource group.

  {{< /mode >}}
  {{< mode title="Bash" >}}

  1. Authenticate

      ```shell
      az login
      ```

  1. Create a resource group

      ```shell
      az group create --name rg1 --location westeurope
      ```

  {{< /mode >}}
  {{< mode title="PowerShell" >}}

  1. Authenticate

      ```shell
      Connect-AzAccount
      ```

  1. Create a resource group

      ```shell
      New-AzResourceGroup -Name rg1 -Location westeurope
      ```

  {{< /mode >}}
{{< /modes >}}

Rendered modes example

Open the Azure Portal.
Create a resource group.

Authenticate
```
az login
```

Create a resource group

az group create --name rg1 --location westeurope

Authenticate
```
Connect-AzAccount
```

Create a resource group

New-AzResourceGroup -Name rg1 -Location westeurope

Nested Shortcodes

Both tabs/tab and modes/mode now support nested shortcodes! You can include flash, img, details, button, and other shortcodes within tab or mode panels.

Example: Modes with Nested Flash and Image

{{< modes default="Portal" >}}
  {{< mode title="Portal" >}}

  {{< flash >}}
  **Important:** Ensure you have the correct permissions before proceeding.
  {{< /flash >}}

  1. Open the Azure Portal
  1. Navigate to Resource Groups

  {{< img light="/images/portal-light.png" dark="/images/portal-dark.png" alt="Azure Portal Resource Groups" >}}

  {{< /mode >}}

  {{< mode title="CLI" >}}

  {{< flash >}}
  **Note:** Make sure Azure CLI is installed and authenticated.
  {{< /flash >}}

  ```bash
  az group create --name mygroup --location westeurope
  ```

  {{< /mode >}}
{{< /modes >}}

Example: Tabs with Nested Details

{{< tabs default="Bash" >}}
  {{< tab title="Bash" >}}

  ```bash
  curl -X GET "https://api.example.com/data"
  ```

  {{< details "Advanced Options" >}}
  You can add additional headers:
  ```bash
  curl -H "Authorization: Bearer token" -X GET "https://api.example.com/data"
  ```
  {{< /details >}}

  {{< /tab >}}

  {{< tab title="PowerShell" >}}

  ```powershell
  Invoke-RestMethod -Uri "https://api.example.com/data"
  ```

  {{< details "Advanced Options" >}}
  You can add authentication:
  ```powershell
  $headers = @{ Authorization = "Bearer token" }
  Invoke-RestMethod -Uri "https://api.example.com/data" -Headers $headers
  ```
  {{< /details >}}

  {{< /tab >}}
{{< /tabs >}}

Working Example:

curl -X GET "https://api.example.com/data"

Advanced Options

You can add additional headers:

curl -H "Authorization: Bearer token" -X GET "https://api.example.com/data"

Invoke-RestMethod -Uri "https://api.example.com/data"

Advanced Options

You can add authentication:

$headers = @{ Authorization = "Bearer token" }
Invoke-RestMethod -Uri "https://api.example.com/data" -Headers $headers

Comprehensive Nesting Example

Here’s an example showcasing all shortcodes that support nesting within modes:

Important: This demonstrates nested shortcode functionality within modes.

Getting Started

First, review the prerequisites
Choose your preferred method below
Follow the detailed instructions

Prerequisites

Before you begin, ensure you have:

Administrative access
Network connectivity
Required permissions

View Full Prerequisites

Installation Methods

./install.sh --auto

Troubleshooting

If the automated installation fails:

./install.sh --debug --verbose

Common issues:

Permission denied: Run with sudo
Network timeout: Check firewall settings

# Step 1: Download wget https://example.com/installer.tar.gz # Step 2: Extract tar -xzf installer.tar.gz

# Step 3: Install cd installer && make install

Configuration Steps

Warning: Always backup your configuration before making changes.

Configuration File Location

The main configuration file is located at:

Linux: /etc/myapp/config.yaml
Windows: C:\ProgramData\MyApp\config.yaml
macOS: /usr/local/etc/myapp/config.yaml

Environment-Specific Settings

environment: production
debug: false
log_level: warn

Security Considerations

For production environments:

Enable SSL/TLS
Use strong authentication
Implement rate limiting
Monitor access logs

Security Best Practices

environment: development
debug: true
log_level: debug

Development Tools

Additional tools for development:

Hot reload enabled
Debug endpoints available
Verbose logging active

Advanced Features

Pro Tip: These features require advanced configuration knowledge.

Custom Extensions

You can create custom extensions by:

Creating a new module
Implementing the required interface
Registering with the plugin system

class CustomExtension(BaseExtension):
    def initialize(self):
        pass
<span class="k">def</span> <span class="nf">process</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">data</span><span class="p">):</span>
    <span class="k">return</span> <span class="n">processed_data</span>

class CustomExtension extends BaseExtension {
    initialize() {
        // Setup code
    }
<span class="nx">process</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">processedData</span><span class="p">;</span>
<span class="p">}</span>

}

Extension Development Guide

Performance Tuning

Database Optimization

For better database performance:

Index frequently queried columns
Use connection pooling
Implement query caching

Query Examples

Example optimized queries:

-- Good: Uses index
SELECT * FROM users WHERE user_id = ?

-- Bad: Full table scan
SELECT * FROM users WHERE UPPER(username) = ?

Author Tips

Use a single consistent title form (e.g. “Bash” not “Bash Shell”).
Prefer fewer than 4 variants per group to avoid horizontal crowding.
Use default="..." on the container to specify a preferred initial variant.
For large mode panels, keep early lines concise; readers can switch quickly.

Accessibility & Keyboard

role="tablist", role="tab", role="tabpanel" applied at runtime.
Keys: Left / Right move; Home / End jump.
Panels hidden via display: none; all content present in HTML for screen readers with scripting disabled.

Print & No-JS

Currently only active panel prints. Future enhancement may expand all on @media print. If JavaScript is disabled the raw HTML shows all panels stacked.

Roadmap

Copy button per active panel
Analytics event on variant change
Optional print expansion
Smoother visual parity with Microsoft Learn

Table of Contents