README.md in objective_elements-0.2.0 vs README.md in objective_elements-0.3.0

- old
+ new

@@ -1,17 +1,22 @@ # Objective Elements This is a tiny gem that builds nicely formatted HTML using sane, readable Ruby. I use it for jekyll plugins, but you can use it anywhere. It's ~100 lines, tested with rspec, and has no dependencies. -This gem doesn't actually know any HTML. It just knows how to format it. +It doesn't actually know any HTML, just how to format it. +This is meant to be less involved and more flexible than nokogiri's XML/HTML generator. There's no +DSL to learn, and no cleverness to wrap your mind around. Its specialty is taking fragmented, +disjointed information and condensing it into a string of properly formatted HTML. It's as agnostic +as possible on the input, while being extremely consistent with its output. + ## How it works: * Instantiate a `SingleTag` or `DoubleTag` -* Add attributes & content in one of a few ways. Nest tags infinitely. +* Add attributes & content. Nest tags infinitely. * Render it with `.to_s` ## Motivation: @@ -19,18 +24,19 @@ enough, but once you account for all the what-ifs, the indentation, the closing tags, and the spaces you only need sometimes, it turns into a horrible mess. The problem, of course, is that building long, complex, varying blocks of text with string concatenation and interpolation is fragile, unreadable, and painful. You know this, but you're not -going to write an entirely new class or pull in some big new dependency just for 10 lines of HTML. -Instead, you hammer through it and end up with code like this: +going to write an entirely new class or pull in some big new dependency just for 10 lines of HTML, +so instead you hammer through it and end up with code like this: ```ruby picture_tag = "<picture>\n"\ - "#{source_tags}"\ - "#{markdown_escape * 4}<img src=\"#{url}#{instance['source_default'][:generated_src]}\" #{html_attr_string}>\n"\ -"#{markdown_escape * 2}</picture>\n" + "#{source_tags}"\ + "#{markdown_escape * 4}"\ + "<img src=\"#{url}#{instance['source_default'][:generated_src]}\" "\ + "#{html_attr_string}>\n"\"#{markdown_escape * 2}</picture>\n" ``` or this: ```ruby def build_li(this_item_data, icon_location, label) @@ -54,47 +60,57 @@ p = DoubleTag.new 'p' p.to_s # <p> # </p> -# Add attributes as a hash, values can be strings or symbols: +# Add attributes as a hash. keys can be strings or symbols, values can be arrays or strings: p.add_attributes class: 'stumpy grumpy', 'id' => 'the-ugly-one' -# Add them as a string! + +# Add attributes as a string! p.add_attributes 'class="slimy" data-awesomeness="11"' + +# Add content. It can be anything, or an array of anythings. p.add_content "Icky" + p.to_s # <p class="stumpy grumpy slimy" id="the-ugly-one" data-awesomeness="11"> # Icky # </p> # Want a oneliner? p.oneline = true p.to_s -# <p class="stumpy mopey grumpy slimy" id="the-ugly-one" data-awesomeness="11">Icky</p> +# <p class="stumpy grumpy slimy" id="the-ugly-one" data-awesomeness="11">Icky</p> p.oneline = false -# Build it up step by step, or all at once: +# Build a tag all at once: p.add_content DoubleTag.new( 'a', content: 'Link!', attributes: {href: 'awesome-possum.com'}, oneline: true ) -# Add a parent tag! + +# Add a parent tag: div = p.add_parent DoubleTag.new 'div' # Ruby implicitly calls .to_s on things when you try to perform string functions with them, so -# things like this work: +# this works: "#{div}" # <div> # <p class="stumpy mopey grumpy slimy" id="the-ugly-one" data-awesomeness="11"> # Icky # <a href="awesome-possum.com">Link!</a> # </p> # </div> ``` + +For complete example usage, see [jekyll_icon_list](https://github.com/rbuchberger/jekyll_icon_list), or +this [pull request](https://github.com/robwierzbowski/jekyll-picture-tag/pull/87/commits/d6b2deca0f19f173251a2984037e5e5f8d7c21d1) +to [jekyll-picture-tag](https://github.com/robwierzbowski/jekyll-picture-tag). + ## Installation ```ruby # Gemfile @@ -117,50 +133,59 @@ - b - attributes - a+b - opening tag - c - content - d - closing tag + +## Usage + There are 2 classes: `SingleTag` is the base class, and `DoubleTag` inherits from it. A `SingleTag` is a self-closing tag, meaning it has no content and no closing tag. A `DoubleTag` is the other kind. -## Usage - ### SingleTag Properties: #### element - String - Mandatory - Which type of tag it is, such as 'hr' or 'img' - - Defined on initialization, cannot be changed afterwards. (Should it be? I'm on the fence about it.) #### attributes - Hash - Optional - - Keys are symbols, values are arrays of strings. `{class: ['stumpy', 'slimy']}` + - Keys are stored as symbols, values are stored as arrays of strings: `{class: ['stumpy', 'slimy']}` - add them with `.add_attributes`, which can accept a few different formats. ### SingleTag Methods (that you care about) `SingleTag.new(element, attributes: {})` `.to_s` - The big one. Returns your HTML as a string, nondestructively. +`.add_attributes(new)` - The strongly recommended way to add new attributes. Can accept a hash (keys +can be either symbols or strings, values can be either arrays or strings), or a string in the +standard HTML syntax (`attribute="value" attribute2="value2 value3"`). Returns self. + `.reset_attributes(new)` - Deletes all attributes, calls add_attributes on supplied argument if given. -`.add_attributes(new)` - The only way we add new attributes. Can accept a hash (keys can be either -symbols or strings), or a string in the standard HTML syntax (`attribute="value" attribute2="value2 -value3"`). Returns self. +`.delete_attributes(keys)` - Accepts a single attribute, or an array of attributes (keys or +strings), and deletes it. +`.rewrite_attributes` - Accepts anything add_attributes understands, but replaces existing +attributes instead of appending to them. + `.add_parent(DoubleTag)` - returns supplied DoubleTag, with self added as a child. -`attr_reader :attributes, :element` + +`attr_reader :attributes` +`attr_accessor :element` + ### DoubleTag Properties: -#### `DoubleTag` Inherits all of `SingleTag`'s properties and methods, but adds content and a closing tag. +#### `DoubleTag` Inherits all of `SingleTag`'s properties and methods, and adds content and a closing tag. #### content - Array - Optional @@ -182,22 +207,24 @@ `DoubleTag.new(element, attributes: {}, oneline: false, content: [])` - You can initialize it with content. `add_content(anything)` - Smart enough to handle both arrays and not-arrays without getting dorked -up. +up. When given an array, its elements will be appended to the content array. When given a single +item, that item will be inserted at the end of the array. (Remember each element in the content +array gets at least one line!) `attr_accessor: content` - You can modify the content array directly if you like. If you're just adding items, you should use `.add_content` `.to_a` - Mostly used internally, but if you want an array of strings, each element a line with appropriate indentation applied, this is how you can get it. ## Configuration - Indentation is defined by the `indent` method on the DoubleTag class. If you'd like to change - it: + Indentation is defined by the `indent` method on the DoubleTag class, which is two markdown-escaped + spaces by default ("\ \ "). If you'd like to change it: 1. Make a new class, inherit from DoubleTag. 2. Override `indent` with whatever you want. 3. Use your new class instead of DoubleTag. @@ -221,15 +248,14 @@ ``` ## Limitations -* It doesn't know a single HTML element on its own, so it does nothing to ensure your - HTML is valid. Garbage in, garbage out. +* It doesn't know a single HTML element on its own, so it does nothing to ensure your HTML is valid. -* A parent tag can't put siblings on the same line. You can either - do this (with `oneline: true` on the strong tag): +* A parent tag can't put siblings on the same line. You can either do this (with `oneline: true` on + the strong tag): ```html Here is some <strong>strong</strong> @@ -245,21 +271,21 @@ strong </strong> text. ``` - But you can't do this without string interpolation: + But you can't do this without string interpolation or something: ```html Here is some <strong>strong</strong> text. ``` This doesn't affect how the browser will render it, but it might bug you if you're particular about source code layout. * If you set 'oneline: true' on a parent DoubleTag, but not all its children DoubleTags, the output - will not be pretty. I advise against it. + will not be pretty. I advise against it. Handling this situation is on the TODO list. * It doesn't wrap long lines of text, and it doesn't indent text with newlines embedded. It's on the TODO list. ## Contributing