Theme Version Display Plugin

By Amr

Automatic theme version extraction from gem specification with modal display and footer integration.

Estimated reading time: 3 minutes

• Share on Reddit
• Share on LinkedIn
• Share on Twitter

• ---

Edit on GitHub

Table of Contents

Theme Version Display Plugin

The Zer0-Mistakes theme includes a Jekyll plugin that automatically extracts and displays the theme version from the gem specification.

Overview

The plugin provides:

• Automatic Extraction: Reads version from .gemspec
• Global Variable: site.theme_version available in Liquid
• Footer Display: Shows version in site footer
• Modal Integration: Detailed version info in modal

How It Works

Plugin Location

_plugins/
└── theme_version.rb

Version Extraction

The plugin reads from jekyll-theme-zer0.gemspec:

# _plugins/theme_version.rb
module Jekyll
  class ThemeVersion < Generator
    safe true
    priority :highest

    def generate(site)
      gemspec = File.join(site.source, 'jekyll-theme-zer0.gemspec')
      if File.exist?(gemspec)
        content = File.read(gemspec)
        if content =~ /version\s*=\s*["']([^"']+)["']/
          site.config['theme_version'] = $1
        end
      end
    end
  end
end

Usage

In Templates

Access the version in any template:

<!-- Display version -->
<span>v{{ site.theme_version }}</span>

<!-- Conditional display -->
{% if site.theme_version %}
  Version: {{ site.theme_version }}
{% endif %}

Footer Integration

The default footer includes version display:

<footer class="site-footer">
  <div class="footer-info">
    <span class="theme-version">
      Zer0-Mistakes v{{ site.theme_version | default: "dev" }}
    </span>
  </div>
</footer>

Version Modal

Detailed version information in modal:

<!-- Version info button -->
<button type="button" 
        class="btn btn-link btn-sm" 
        data-bs-toggle="modal" 
        data-bs-target="#themeInfoModal">
  v{{ site.theme_version }}
</button>

<!-- Modal content -->
<div class="modal fade" id="themeInfoModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5>Theme Information</h5>
      </div>
      <div class="modal-body">
        <dl>
          <dt>Theme</dt>
          <dd>Zer0-Mistakes</dd>
          <dt>Version</dt>
          <dd>{{ site.theme_version }}</dd>
          <dt>Jekyll</dt>
          <dd>{{ jekyll.version }}</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

Configuration

Version Source

The plugin looks for version in:

1. jekyll-theme-zer0.gemspec (primary)
2. lib/jekyll-theme-zer0/version.rb (fallback)

Override Version

Set manually in _config.yml:

theme_version: "1.0.0-custom"

Hide Version

To hide version display:

show_theme_version: false

Then in templates:

{% if site.show_theme_version != false %}
  v{{ site.theme_version }}
{% endif %}

Customization

Footer Styling

.theme-version {
  font-size: 0.875rem;
  color: var(--bs-secondary);
}

.theme-version:hover {
  color: var(--bs-primary);
  cursor: pointer;
}

Version Badge

<span class="badge bg-primary">
  v{{ site.theme_version }}
</span>

With Link to Changelog

<a href="/CHANGELOG/" class="version-link">
  v{{ site.theme_version }}
</a>

Development vs Production

Development Mode

When running locally without gem:

# _config_dev.yml
theme_version: "development"

Production Mode

Plugin automatically extracts from gemspec.

Troubleshooting

Version Not Showing

1. Check plugin file exists in _plugins/
2. Verify gemspec file exists
3. Check for Ruby errors in build log

Wrong Version

1. Clear Jekyll cache: rm -rf .jekyll-cache
2. Rebuild: bundle exec jekyll build
3. Verify gemspec version is correct

Plugin Not Loading

1. Check safe mode isn’t enabled
2. Verify Ruby syntax in plugin
3. Check file permissions

Related

• Release Management
• Version Bump
• Gem Publishing