ELLO 👋 JEKYLL: A vCard-style Jekyll Theme

Ello is a simple animated Jekyll vCard-style theme by Randall, optimized for use with GitHub Pages (but can be used wherever Jekyll can be installed).

Utilizing this theme you can create a simple vCard-style web site with embedded h-card and Schema data; which can then serve as a centralized location with all your contact data.


Both the CSS and JS have been cache-busted.


Base Theme Demo: ran-dall.github.io/ello-jekyll/
RubyGems page: rubygems.org/gems/ello-jekyll-vcard-theme

You can also look my personal GitHub Pages site, which uses this theme but has several modifications.

My GitHub Pages site: ran-dall.github.io/
My GitHub Pages site repo: github.com/ran-dall/ran-dall.github.io

—

Installation

Add this line to your Jekyll site's Gemfile:

gem "ello-jekyll-vcard-theme"

And add this line to your Jekyll site's _config.yml:

theme: ello-jekyll-vcard-theme

And then execute:

$ bundle

Or install it yourself as:

$ gem install ello-jekyll-vcard-theme

Usage

TL;DR

Use main.yaml to update the information on the contact-box area with whatever you wish to display.

Use details.yaml to list all the profiles you want to link to from your site. Currently, there can be up to 24 contact links; but it's something you can modify {on line 216}.


If you install this theme as a remote-theme for GitHub Pages or as a gem (GitHub Pages or not), you'll be required to make your own index.html, _data/main.yaml, and data/details.yaml files. You can use the files included in this repository (which initially came from my GitHub Pages site) as a working example of what's required.

GitHub Pages

If you plan on using this theme on GitHub Pages, it is prefered you use is as a 'remote theme.' To do so, you must declare ello-jekyll-vcard-theme in your _config.yaml file as a remote-theme as described in this blog post.


{h-card Mircoformat2}[microformats.org/wiki/h-card]

The h-card Mircoformat2 format is a simple specification which updates the hcard Microformat specification, {which focused on bringing vCards to the web.}[https://hcardcreator.com/articles/what-hcard-vcard-microformats] Aside from publishing information about a person, {when combined with XFN}, h-card has some of the basic functionality required to declare relationships to achieve social-network-portability.

The details.yaml file, has an assigned h-card area embedded with the specific h-card options in each contact entry.

Specification Details:
Verification Sample:
Extra Resources:

./favicon.png

If you wish to display a Favicon, you may do so by simply adding a .png image to the root of the site.

main.yaml

details.yaml

includes/hidden.html

It's important to note that Google strongly discourages hidden data, but in case you do want to embed some extra info; you may do so by adding it to the includes/hidden.html file. You can see the example file that's included in this repo for a working example.

Note about STYLES

Currently ONLY the following Networks are supported (#HEX included):

To add more Networks, you must also add the network in _sass/components/contact-box.scss. {On line 262}, you should see the top of the currently supported Networks listed. You can add the network anywhere you desire in the following format…

&.<slug-from-details-yaml> {
    @include icon-styles($<network-variable-from-details-yaml>)
  }

Currently, there can be up to 24 contact links; but it's something you can modify {on line 216}.

You are more than welcome to add more with Jekyll’s override feature for Gem themes and/or contribute the modification to this theme’s GitHub repository.

Contributing

Bug reports and pull requests are welcome on GitHub at github.com/ran-dall/ello-jekyll. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Development

To set up your environment to develop this theme, run bundle install.

Your theme is setup just like a normal Jekyll site! To test your theme, run bundle exec jekyll serve and open your browser at http://localhost:4000. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

When your theme is released, only the files in _layouts, _includes, _sass and assets tracked with Git will be bundled. To add a custom directory to your theme-gem, please edit the regexp in vcard.gemspec accordingly.

License

The theme is available as open source under the terms of the MIT License.


This theme was based on an original Dribbble by Riccardo Cavallo and a CodePen by Aaron Taylor.