jekyll-components 0.0.1 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7a14e0263cadc7b385c8fe3c0ddf649939d33483
-  data.tar.gz: '0128cc1f9b026ab32d5c43fa926d8b06b03a4eae'
+  metadata.gz: 4fafd5492ef563c250f16ad6c4c0e6aaef7c70eb
+  data.tar.gz: c88265b0c8a796f546c2a46c8fd76d206f7a6e14
 SHA512:
-  metadata.gz: 7bd917e02476d4c7806aeaa424e90ffe3881a7b8fb508746f1b9b568f60ca4a7d2be37a3bd8b44b7ccb5ecdb6e63f4f177f9cacada592debf90b7dbeff1f04fb
-  data.tar.gz: 7a4ce03b483d9ceb13772ac9cc4d47d502baadee68f34dbe2aa6ec685a8eb2584c5068ee631686a8d2808589b574588b8a51d50ae24f6ffceebdd8f9098c4e6a
+  metadata.gz: 7aca41a1e291457646bc52dde8017f81d7f3c60ba8bc4cd3b565b9cbd81807315e4e8f58d9918393716926ea637453c4c14d25afe1e0b05b4646cb7431875390
+  data.tar.gz: 9c521b6beb4993f0d0b89a16bfd17ea4aba4b4123e48906f5311a10b04fcf88ca6b45011278d0244bb91519bbfb55c008d4e43548b06a79b10869495e1111afe

data/README.md

@@ -1,8 +1,18 @@
-# jekyll-components 🌟
+# jekyll-components 🌟 [![Build Status](https://travis-ci.org/helpscout/jekyll-components.svg?branch=master)](https://travis-ci.org/helpscout/jekyll-components) [![Gem Version](https://badge.fury.io/rb/jekyll-components.svg)](https://badge.fury.io/rb/jekyll-components)
+
+## DEPRECATED: Please use [jekyll-spark](https://github.com/helpscout/jekyll-spark) instead!!!
 
 A Jekyll library for building component-based UI
 
-## Installation
+This library was heavily inspired by view/component creation from modern Javascript libraries like [React](https://facebook.github.io/react/) and [Vue](https://vuejs.org/).
+
+**Table of Contents**
+
+- [Install](#install)
+- [Documentation](#documenation)
+- [Examples](#examples)
+
+## Install
 
 Add this line to your application's Gemfile:
 
@@ -19,3 +29,14 @@ Or install it yourself as:
 ```
 gem install jekyll-components
 ```
+
+
+
+## Documentation
+
+**[View the docs](https://github.com/helpscout/jekyll-components/blob/master/docs/introduction.md)** to get started with Jekyll Components!
+
+
+## Examples
+
+**[View the starter](https://github.com/helpscout/jekyll-components/tree/master/examples)** Component view files.

data/docs/creating-a-component.md

@@ -0,0 +1,164 @@
+# Creating a component
+
+Let's create our first component under `_plugins/tags`.
+
+We'll call it `napolean.rb`! Below is the [starting template](https://github.com/helpscout/jekyll-components/tree/master/examples) of any Jekyll Component:
+
+```ruby
+require "jekyll-components"
+
+module Jekyll
+  # Create your component class
+  class NapoleanComponent < ComponentTag
+    def template(context)
+      render = %Q[
+        # Put markup here!
+      ]
+    end
+  end
+end
+
+# Register your component with Liquid
+Liquid::Template.register_tag(
+  "Napolean", # Namespace your component
+  Jekyll::NapoleanComponent, # Pass your newly created component class
+)
+```
+
+### Rendering markup
+
+Let's make this component render this GIF:
+
+![Happy hands](https://media.giphy.com/media/9QbDWTcnq4wmc/giphy.gif)
+
+
+```ruby
+require "jekyll-components"
+
+module Jekyll
+  class NapoleanComponent < ComponentTag
+    def template(context)
+      render = %Q[
+        <div class="napolean">
+          <img src="https://media.giphy.com/media/9QbDWTcnq4wmc/giphy.gif">
+        </div>
+      ]
+    end
+  end
+end
+
+Liquid::Template.register_tag(
+  "Napolean",
+  Jekyll::NapoleanComponent,
+)
+```
+
+To use our tag component, all we have to do is use `{% Napolean %}` in our Jekyll `.html` or `.md` file:
+
+```html
+Check out this component!
+{% Napolean %}
+```
+
+That's it!
+
+
+### Adding props
+
+"Props" are data that we can pass to our component.
+
+For our example, let's provide the ability to adjust the width of our image as well as provide a caption:
+
+```html
+{% Napolean
+  width: "300"
+  caption: "Way to eat all the friggen chips Kip!"
+%}
+```
+
+You can totally write everything in a single line (below). However, we recommend the above approach as it makes it much easier to add/remove/edit props.
+
+```html
+{% Napolean width: "300" caption: "Way to eat all the friggen chips Kip!" %}
+```
+
+In order to use our new `width` and `caption` props, we have to update our `template` method in our Napolean component. Prop data being passed to our component will be available in a `@prop` instance variable in our `.rb` file:
+
+```ruby
+require "jekyll-components"
+
+module Jekyll
+  class NapoleanComponent < ComponentTag
+    def template(context)
+      # Declare props as variables
+      # Not necessary, but highly recommended
+      caption = @props["caption"]
+      width = @props["width"]
+
+      render = %Q[
+        <div class="napolean">
+          <img src="https://media.giphy.com/media/9QbDWTcnq4wmc/giphy.gif" width="#{width}">
+          #{caption}
+        </div>
+      ]
+    end
+  end
+end
+
+Liquid::Template.register_tag(
+  "Napolean",
+  Jekyll::NapoleanComponent,
+)
+```
+
+The resulting compiled markup will be:
+
+```html
+<div class="napolean">
+  <img src="https://media.giphy.com/media/9QbDWTcnq4wmc/giphy.gif" width="300">
+  Way to eat all the friggen chips Kip!
+</div>
+```
+
+
+### Syntax
+
+Below is a comparison between some syntax differences between Jekyll Components (Ruby) and React (ES6 Javascript):
+
+| Ruby | Javascript (React) | Description |
+| --- | --- | --- |
+| `@props["key"]` | `this.props.key` | Component prop data. |
+| `render =` | `render() { return ... } ` | Outputting the component's markup. |
+| `%Q[ ... ]` | `` `...` `` | String interpolation wrapper. |
+| `#{var}` | `${var} ` | String interpolated variable. |
+
+
+
+## Creating a block component
+
+Let's say we want to update our component to be a block instead. It'll make it more intuitive to add caption. Maybe something like:
+
+```html
+{% Napolean width: "300" %}
+  This tastes like the cow got into an onion patch.
+{% endNapolean %}
+```
+
+It's pretty easy! The only thing we need to change in our `napolean.rb` file is the Class our component inherits from.
+
+Before:
+```ruby
+class NapoleanComponent < ComponentTag
+```
+
+After:
+```ruby
+class NapoleanComponent < ComponentBlock
+```
+
+
+### That's it!
+
+You've got the basics to create some awesome components in Jekyll.
+
+![Yesssssssssssssssss](https://media.giphy.com/media/uTuLngvL9p0Xe/giphy.gif)

data/docs/introduction.md

@@ -0,0 +1,45 @@
+# Introduction
+
+Components are `.rb` files that are added to your Jekyll project's default `_plugins/` directory:
+
+```shell
+my-jekyll/
+└── _plugins/
+    └── *Add components here*
+```
+
+There are two types are Components:
+
+**Tags**
+
+These components are created using Liquid [Tags](http://www.rubydoc.info/github/Shopify/liquid/Liquid/Tag), and they do not contain content when used.
+
+Example:
+```html
+{% Napolean id: "skillz" class: "nunchucks bow staff computer-hacking" %}
+```
+
+**Blocks**
+
+These components are created using Liquid [Blocks](http://www.rubydoc.info/github/Shopify/liquid/Liquid/Block), and they **do** contain content when used.
+
+Example:
+```html
+{% Napolean class: "chapstick" %}
+  But my lips hurt real bad!
+{% endNapolean %}
+```
+
+Because of these types, we recommend you organize your components in your `_plugins/` directory into `tags` and `blocks` directories:
+
+```shell
+my-jekyll/
+└── _plugins/
+    ├── blocks/
+    └── tags/
+```
+
+
+### Up next
+
+Learn how to [create a component](creating-a-component.md).

data/examples/block_component.rb

@@ -0,0 +1,22 @@
+require "jekyll-components"
+
+module Jekyll
+  class ExampleBlockComponent < ComponentBlock
+    def template(context)
+      # Declare props as variables here
+      content = @props["content"]
+
+      # Output rendered markup
+      render = %Q[
+        <div class="component">
+          #{content}
+        </div>
+      ]
+    end
+  end
+end
+
+Liquid::Template.register_tag(
+  "ExampleBlock",
+  Jekyll::ExampleBlockComponent,
+)

data/examples/tag_component.rb

@@ -0,0 +1,21 @@
+require "jekyll-components"
+
+module Jekyll
+  class ExampleTagComponent < ComponentTag
+    def template(context)
+      # Declare props as variables here
+
+      # Output rendered markup
+      render = %Q[
+        <div class="component">
+          Example
+        </div>
+      ]
+    end
+  end
+end
+
+Liquid::Template.register_tag(
+  "ExampleTag",
+  Jekyll::ExampleTagComponent,
+)

data/jekyll-components.gemspec

@@ -28,7 +28,7 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "minitest-reporters"
   spec.add_development_dependency "minitest-profile"
   spec.add_development_dependency "minitest", "~> 5.8"
-  spec.add_development_dependency "nokogiri", "~> 1.7.1"
+  spec.add_development_dependency "nokogiri", "~> 1.8.2"
   spec.add_development_dependency "rspec-mocks"
   spec.add_development_dependency "shoulda"
   spec.add_development_dependency "kramdown"

data/lib/jekyll/components/base.rb

@@ -47,7 +47,7 @@ module Jekyll
         end
       }
 
-      template
+      return template
     end
 
     def selector_data_props(attr = @attributes)
@@ -58,7 +58,7 @@ module Jekyll
         end
       }
 
-      template
+      return template
     end
 
     def selector_props(attr = @default_selector_attr)
@@ -66,7 +66,7 @@ module Jekyll
       template += selector_data_props
       template += selector_default_props(attr)
 
-      template
+      return template
     end
 
     def set_props(props = Hash.new)
@@ -98,15 +98,6 @@ module Jekyll
       return content
     end
 
-    def markdown_file?()
-      file = @context["page"]["name"]
-      if file
-        file.include?(".md") || file.include?(".markdown")
-      else
-        false
-      end
-    end
-
     def render(context)
       @context = context
       @site = @context.registers[:site]
@@ -114,20 +105,18 @@ module Jekyll
       serialize_data
       output = template(context)
 
-      # if (markdown_file?)
-      #   output = "{::nomarkdown type='html'}#{output}{:/nomarkdown}"
-      # end
-
       if (output.instance_of?(String))
         output = Liquid::Template.parse(output).render()
         output = @@compressor.compress(unindent(output))
       else
-        output
+        output = ""
       end
+
+      return output
     end
 
     def template(context = @context)
-      context
+      return context
     end
 
   end

data/lib/jekyll/components/version.rb

@@ -1,5 +1,5 @@
 module Jekyll
   module Components
-    VERSION = "0.0.1"
+    VERSION = "0.1.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-components
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.1.0
 platform: ruby
 authors:
 - ItsJonQ
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-05-16 00:00:00.000000000 Z
+date: 2018-04-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -114,14 +114,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.7.1
+        version: 1.8.2
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.7.1
+        version: 1.8.2
 - !ruby/object:Gem::Dependency
   name: rspec-mocks
   requirement: !ruby/object:Gem::Requirement
@@ -177,6 +177,10 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- docs/creating-a-component.md
+- docs/introduction.md
+- examples/block_component.rb
+- examples/tag_component.rb
 - jekyll-components.gemspec
 - lib/jekyll-components.rb
 - lib/jekyll/components.rb
@@ -204,7 +208,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.2
+rubygems_version: 2.4.5.1
 signing_key: 
 specification_version: 4
 summary: A Jekyll library for building component-based UI