jekyll-stepper 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 7c0671026469134aa7f18902648e87a6292a1429775fe781461fce71771d9a63
+  data.tar.gz: e7ef7b95f2934dd92d90291b792fceaf0fe951736083255143a468fd5fbf83ab
+SHA512:
+  metadata.gz: 22aa1374ab61abecfc81236f9c409088b313e956e6f597f84ff8a5a81c568f4e6e48bb5a235b49eef4903032c10bd75911e297227b9220fcd184949e2d231087
+  data.tar.gz: 107fe0bc78215a87ca8f7e0b755cfe0e6c7737dbf7fdfaa63907fbb6edbf532c8d55f97c6c1c1d42d22a1f0d43d06077d141630db876518359362af0ac240d86

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Jean-Francois Morin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,167 @@
+# Jekyll Stepper
+
+A Jekyll plugin for step-by-step tutorial accordions. Converts fenced code blocks with the `stepper` language identifier into interactive accordion components with Previous/Next navigation.
+
+## Installation
+
+Add to your `Gemfile`:
+
+```ruby
+gem "jekyll-stepper"
+```
+
+Then run:
+
+```bash
+bundle install
+```
+
+Add to your `_config.yml`:
+
+```yaml
+plugins:
+  - jekyll-stepper
+```
+
+## Usage
+
+Use a fenced code block with `stepper` as the language identifier:
+
+````markdown
+````stepper
+# Step 1: First step title
+
+Content for the first step in markdown.
+
+# Step 2: Second step title
+
+Content for the second step, including code blocks:
+
+```html
+<h1>Hello World</h1>
+```
+
+# Step 3: Final step
+
+More content here.
+````
+````
+
+### Syntax rules
+
+- Use **4 backticks** for the outer block to allow nested code blocks inside
+- Each `# Title` becomes an accordion header
+- Content between titles is rendered as Markdown
+- A navigation bar with Previous/Next buttons is added automatically
+- The first step is open by default
+
+## Styling
+
+The plugin generates HTML with these CSS classes:
+
+- `.stepper` — Container wrapper
+- `.stepper-nav` — Navigation bar
+- `.stepper-prev` / `.stepper-next` — Navigation buttons
+- `.stepper-progress` — Step counter
+- `details` / `summary` — Accordion elements
+
+If your theme doesn't include stepper styles, add this to your CSS:
+
+```css
+.stepper {
+  margin-bottom: 2rem;
+}
+
+.stepper details {
+  border: 1px solid var(--color-border, #E5E8EA);
+  border-radius: 8px;
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+}
+
+.stepper details summary {
+  padding: 1rem 2rem;
+  cursor: pointer;
+  font-weight: 500;
+  background: var(--color-code-bg, #F4F6F8);
+  transition: background 0.2s;
+  list-style: none;
+}
+
+.stepper details summary::-webkit-details-marker {
+  display: none;
+}
+
+.stepper details summary::before {
+  content: "\25B8";
+  margin-right: 0.5rem;
+  transition: transform 0.2s;
+  display: inline-block;
+}
+
+.stepper details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.stepper details[open] summary {
+  background: var(--color-border, #E5E8EA);
+  border-left: 3px solid var(--color-red, #E40046);
+}
+
+.stepper details summary:hover {
+  background: var(--color-border, #E5E8EA);
+}
+
+.stepper .stepper-content {
+  padding: 1rem 2rem;
+}
+
+.stepper .stepper-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-top: 1rem;
+  margin-top: 1rem;
+  border-top: 1px solid var(--color-border, #E5E8EA);
+}
+
+.stepper-prev,
+.stepper-next {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-border, #E5E8EA);
+  border-radius: 6px;
+  background: var(--color-bg, #FFFFFF);
+  color: var(--color-text, #1A1A1A);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: opacity 0.2s, background 0.2s;
+}
+
+.stepper-prev:hover:not(:disabled),
+.stepper-next:hover:not(:disabled) {
+  background: var(--color-border, #E5E8EA);
+}
+
+.stepper-prev:disabled,
+.stepper-next:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.stepper-progress {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary, #5A6A72);
+}
+```
+
+## Development
+
+```bash
+gem build jekyll-stepper.gemspec
+gem install jekyll-stepper-0.1.0.gem
+```
+
+## License
+
+MIT

data/jekyll-stepper.gemspec

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require_relative "lib/jekyll-stepper/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "jekyll-stepper"
+  spec.version       = Jekyll::Stepper::VERSION
+  spec.authors       = ["Jean-Francois Morin"]
+  spec.email         = ["jmorin@simplon.co"]
+
+  spec.summary       = "A Jekyll plugin for step-by-step tutorial accordions"
+  spec.description   = "Converts fenced code blocks with the 'stepper' language identifier into interactive accordion components with navigation for step-by-step tutorials."
+  spec.homepage      = "https://github.com/jmorin-simplon/jekyll-stepper"
+  spec.license       = "MIT"
+
+  spec.required_ruby_version = ">= 2.7.0"
+
+  spec.files = `git ls-files -z`.split("\x0").reject { |f|
+    f.match(%r!^(test|spec|features|\.github)/!)
+  }
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "jekyll", ">= 3.9"
+  spec.add_dependency "kramdown-parser-gfm", ">= 1.0"
+
+  if spec.respond_to?(:metadata)
+    spec.metadata["allowed_push_host"] = "https://rubygems.org"
+    spec.metadata["rubygems_mfa_required"] = "true"
+  end
+end

data/lib/jekyll-stepper/converter.rb

@@ -0,0 +1,120 @@
+# frozen_string_literal: true
+
+module Jekyll
+  module Stepper
+    class Converter
+      def initialize(config)
+        @config = config
+      end
+
+      def convert(content)
+        lines = content.lines
+        result = []
+        i = 0
+
+        while i < lines.length
+          line = lines[i]
+          match = line.match(/^(`{3,})(\S*)\s*$/)
+
+          if match
+            backtick_count = match[1].length
+            info_string = match[2]
+
+            if info_string == "stepper"
+              block_lines = []
+              i += 1
+              closer = /^`{#{backtick_count}}\s*$/
+
+              while i < lines.length
+                break if lines[i].match(closer)
+                block_lines << lines[i]
+                i += 1
+              end
+
+              i += 1 if i < lines.length
+
+              steps = parse_steps(block_lines.join)
+              if steps.empty?
+                result << "#{match[1]}stepper\n"
+                result.concat(block_lines)
+                result << "`" * backtick_count + "\n"
+              else
+                result << render_stepper(steps)
+              end
+            else
+              result << line
+              i += 1
+              closer = /^`{#{backtick_count}}\s*$/
+
+              while i < lines.length
+                result << lines[i]
+                break if lines[i].match(closer)
+                i += 1
+              end
+
+              i += 1
+            end
+          else
+            result << line
+            i += 1
+          end
+        end
+
+        result.join
+      end
+
+      private
+
+      def parse_steps(content)
+        steps = []
+        current_title = nil
+        current_content = []
+
+        content.lines.each do |line|
+          if (match = line.match(/^#\s+(.+)$/))
+            steps << { title: current_title, content: current_content.join } if current_title
+            current_title = match[1].strip
+            current_content = []
+          else
+            current_content << line
+          end
+        end
+
+        steps << { title: current_title, content: current_content.join } if current_title
+        steps
+      end
+
+      def render_stepper(steps)
+        step_count = steps.length
+        html = %(<div class="stepper" data-steps="#{step_count}">\n)
+
+        steps.each_with_index do |step, index|
+          html << %(  <hr />\n) if index > 0
+          html << %(  <details#{index.zero? ? " open" : ""}>\n)
+          html << %(    <summary>#{step[:title]}</summary>\n)
+          html << %(    <div class="stepper-content">\n)
+
+          html << render_markdown(step[:content])
+
+          html << %(    <div class="stepper-nav">\n)
+          html << %(      <button class="stepper-prev"#{index.zero? ? " disabled" : ""}>\u2190 Pr\u00e9c\u00e9dent</button>\n)
+          html << %(      <span class="stepper-progress">\u00c9tape #{index + 1} / #{step_count}</span>\n)
+          html << %(      <button class="stepper-next"#{index == step_count - 1 ? " disabled" : ""}>Suivant \u2192</button>\n)
+          html << %(    </div>\n)
+          html << %(    </div>\n)
+          html << %(  </details>\n)
+        end
+
+        html << %(</div>\n)
+        html
+      end
+
+      def render_markdown(content)
+        return "" if content.strip.empty?
+
+        doc = Kramdown::Document.new(content, input: "GFM")
+        doc.to_html
+      end
+    end
+  end
+end

data/lib/jekyll-stepper/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Jekyll
+  module Stepper
+    VERSION = "0.1.0"
+  end
+end

data/lib/jekyll-stepper.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require "jekyll"
+require "jekyll-stepper/version"
+require "jekyll-stepper/converter"
+
+module Jekyll
+  module Stepper
+  end
+end
+
+Jekyll::Hooks.register [:pages, :posts, :documents], :pre_render do |doc|
+  converter = Jekyll::Stepper::Converter.new(doc.site.config)
+  doc.content = converter.convert(doc.content)
+end

metadata

@@ -0,0 +1,82 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-stepper
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Jean-Francois Morin
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2026-08-17 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.9'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.9'
+- !ruby/object:Gem::Dependency
+  name: kramdown-parser-gfm
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.0'
+description: Converts fenced code blocks with the 'stepper' language identifier into
+  interactive accordion components with navigation for step-by-step tutorials.
+email:
+- jmorin@simplon.co
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE.txt
+- README.md
+- jekyll-stepper.gemspec
+- lib/jekyll-stepper.rb
+- lib/jekyll-stepper/converter.rb
+- lib/jekyll-stepper/version.rb
+homepage: https://github.com/jmorin-simplon/jekyll-stepper
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  rubygems_mfa_required: 'true'
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.7.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.23
+signing_key:
+specification_version: 4
+summary: A Jekyll plugin for step-by-step tutorial accordions
+test_files: []