README.md in jekyll_outline-1.1.0 vs README.md in jekyll_outline-1.1.1

- old
+ new

@@ -4,15 +4,16 @@ `jekyll_outline` Jekyll tag plugin that creates a clickable table of contents. ## Installation +Add the following line to your Jekyll project's Gemfile, within the `jekyll_plugins` group: -Add this line to your application's Gemfile: - ```ruby -gem 'jekyll_outline' +group :jekyll_plugins do + gem 'jekyll_outline' +end ``` And then execute: $ bundle install @@ -43,11 +44,10 @@ {% outline_js wrap_in_script_tag %} ``` ## Explanation - Given an outline that looks like this: ```html {% outline stuff %} 000: Topic 0..19 020: Topic 20..39 @@ -83,11 +83,14 @@ The JavaScript searches for images in the current page that were created by the [`img`](https://github.com/mslinn/jekyll_img) tag plugin, and have `id`s that correspond to outline sections. Each of following image's `id`s have a `outline_` prefix, followed by a number, which corresponds to one of the sections. Note that leading zeros in the first column above are not present in the `id`s below. + +The images are wrapped within an invisible `div` so the web page does not jump around as the images are loaded. ```html +<div style="display: none;"> {% img align="right" id="outline_0" size="quartersize" src="/assets/images/porcelain_washbasin.webp" style="margin-top: 0" @@ -105,32 +108,31 @@ size="quartersize" src="/assets/images/libgit2.webp" style="margin-top: 0" wrapper_class="clear" %} +</div> ``` The JavaScript identifies the images and repositions them in the DOM such that they follow the appropriate heading. If no image corresponds to a heading, no error or warning is generated. The images can be located anywhere on the page; they will be relocated appropriately. If an image does not correspond to a heading, it is deleted. +## Attribution +See [`jekyll_plugin_support` for `attribution`](https://github.com/mslinn/jekyll_plugin_support#subclass-attribution) + + ## Additional Information More information is available on [Mike Slinn&rsquo;s website](https://www.mslinn.com/jekyll/3000-jekyll-plugins.html#outline). ## Development +After checking out the repo, run `bin/setup` to install development dependencies. +Then you can run `bin/console` for an interactive prompt that will allow you to experiment with `irb`. -After checking out the repo, run `bin/setup` to install dependencies. -You can also run `bin/console` for an interactive prompt that will allow you to experiment. - -Install development dependencies like this: -``` -$ BUNDLE_WITH="development" bundle install -``` - To build and install this gem onto your local machine, run: ```shell $ bundle exec rake install jekyll_outline 0.1.0 built to pkg/jekyll_outline-0.1.0.gem. jekyll_outline (0.1.0) installed. @@ -148,20 +150,32 @@ Generates Jekyll logger with colored output. ``` -## Test -A test website is provided in the `demo` directory. - 1. Set breakpoints. +## Demo +A demo / test website is provided in the `demo` directory. +It can be used to debug the plugin or to run freely. +### Run Freely + 1. Run from the command line: + ```shell + $ demo/_bin/debug -r + ``` + + 2. View the generated website at [`http://localhost:4444`](http://localhost:4444) + +### Plugin Debugging + 1. Set breakpoints in Visual Studio Code. + 2. Initiate a debug session from the command line: ```shell - $ bin/attach demo + $ demo/_bin/debug ``` - 3. Once the `Fast Debugger` signon appears, launch the Visual Studio Code launch configuration called `Attach rdebug-ide`. + 3. Once the `Fast Debugger` signon appears, launch the Visual Studio Code launch + configuration called `Attach rdebug-ide`. 4. View the generated website at [`http://localhost:4444`](http://localhost:4444) ## Release @@ -176,12 +190,10 @@ The above creates a git tag for the version, commits the created tag, and pushes the new `.gem` file to [RubyGems.org](https://rubygems.org). ## Contributing - Bug reports and pull requests are welcome on GitHub at https://github.com/mslinn/jekyll_outline. ## License - The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).