Giter Site home page Giter Site logo

burden / jekyll-sponsors-boilerplate Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 0.0 103 KB

A Jekyll theme for giving thanks to your sponsors made extraordinary using Bulma.

Home Page: https://jekyll-sponsors-boilerplate.burden.cc

Ruby 17.37% CSS 11.88% JavaScript 10.28% HTML 60.46%

jekyll-sponsors-boilerplate's Introduction

Build Status

jekyll-sponsors-boilerplate

A Jekyll theme for giving thanks to your sponsors made extraordinary using Bulma.

DEMO

jekyll-sponsors-boilerplate

Features

Dependencies

  1. Install bundler gem install bundler
  2. Install bower npm install -g bower

Getting Started

$ bundle install
$ bower install
$ jekyll serve

Configuring your sponsorship campaign

Everything you need to configure your sponsorship campaign can be found in src/_data/campaign.yml.

Counts

To configure the counter bar, update src/_assets/javascript/main.js and the counts: collection.

// main.js
// EDIT ZONE
// ################
// ex: add_counter('id', begin, end)
add_counter('articles-counter-upper', 3000, 3456);
# campaign.yml
options:
  counts:
    - id: articles-counter-upper
      label: Articles
      value: "3,456"

Be sure that the id: block is set to the same value as the first argument in the javascript statement (articles-counter-upper). The second argument (3000) specifies where the count begins. The value: block is a placeholder in the event js fails (3,456).

If your number requires context, be sure to add a context: block

# campaign.yml
# outputs "456K"
- id: dau-counter-upper
  label: DAU
  value: 456
  context: K

Includes

You can configure strings to be used for repetitive incentives by adding a new sequence to the includes: collection.

# campaign.yml
options:
  includes:
    - id: free-hug
      value: >-
        Large color logo on Sponsors page and a bear hug

id: is referenced from groups: via the items: block
value: is displayed when id: matches

See examples below for usage

Groups

You may choose to display plans individually, or in columns. Feel free to use both. Add as many groups and items as you need.

To display plans individually.

groups:
  - name: Lead Sponsor
    price: 2500
    per: month
    items:
      - id: free-hug
      - id: description
      - id: spacer
  - name: Principal Sponsor
    price: 5000
    per: month
    items:
      - id: free-hug
      - id: description
      - "One-off special perk"

To display in columns.

groups:
  - name: Community Sponsor
    levels:
      - name: Bronze
        price: 500
        per: month
        items:
          - id: small-logo
          - id: spacer
          - id: spacer
      - name: Silver
        price: 750
        per: month
        items:
          - id: small-logo
          - id: slogan
          - id: spacer

Adding Sponsors

Simply add a new sequence to src/_data/sponsors.yml

- name: Principal Sponsor 1
  url: https://example.com
  logo: https://dummyimage.com/440x160/aaa/fff.png
  level: principal
  summary: >-
    Et eam consetetur deterruisset reprehendunt. Mea lorem primis consulatu et, eam semper alterum ei, his omnis malorum consectetuer id? In per similique posidonium, ei nam suscipit luptatum disputationi! Prodesset cotidieque ne eum! Gubergren deterruisset usu ea, sit et tollit voluptaria! Eu eum ferri facete, erroribus consulatu at vis?

name: Sponsor's name
logo: Sponsor's logo (must be 440px x 160px or 220px x 80px)
level: Sponsor's level
summary: Sponsor's slogan or message

Deploy to Github Pages from Travis

  1. Point Travis to repository
  2. Configure Travis
  3. Generate a Personal Access Token from Github
  • The only scope needed is repo:public_repo
  1. Set GITHUB_API=<token> on Travis
  • Make sure Display value in build log toggle is set to Off!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.