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’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).