Coder Social home page Coder Social logo

philanthrolab / action-takers Goto Github PK

View Code? Open in Web Editor NEW

This project forked from openupsa/action-takers

0.0 1.0 0.0 4.36 MB

Home Page: http://actiontakers.co.za/

License: MIT License

Ruby 1.58% HTML 66.89% CSS 28.31% JavaScript 1.43% Shell 1.80%

action-takers's Introduction

Action Takers

Adding Content - Guides and Categories

Add a new category

  • Ensure the category is shown in the correct section on the landing page index.html - if it was shown to be 'in development', ensure you remove it from that section and add it to the 'guides by topic' section
  • If a new menu item is required, ensure you add it in header.html
  • Create a new category listing page in the project root - e.g. housing.html, adding the relevant metadata of the new category

Add a new guide and steps

  • Add the new guide collection to _config.yml
  • Remember to restart your server to see any config changes made
  • Add the new guide to the category list page
  • Create the guide folder in the project root - e.g. _risk-of-eviction
  • Create the guide steps in this folder - e.g. 1.md
  • Note: pay careful attention to which guide step you are editing - it's easy to get confused with the names, so best double check the folder the file lives in
  • Create the guide file in _guides - e.g. risk-of-eviction.md
  • Note: name this carefully - it must match the name of the collection in the config file
  • Pay careful attention to the frontmatter
  • short-title: used for whatsapp key word
  • title: Displayed on the site as a heading for the guide
  • description: Displayed on the site as a description for the guide
  • name: used to link the collection to the guide
  • category-link: used to link to categories and menu items. Is case sensitive
  • category:
  • In the guide .md file, add a div of class guide panel-group and for each step add a div of class panel single-step
  • For each step, ensure the ids and steps are renamed to reflect the guide step - especially opening and closing of the steps
  • Ensure the loop count is incremented for each step

Generating PDFs

wkhtmltopdf, Webkit required

wkhtmltopdf -g -T 2mm -B 5mm -L 2mm -R 2mm actiontakers.co.za/... --print-media-type --footer-center [page]/[topage] output.pdf

There are two bash scripts in /pdf. Run them from that directory and they will generate the PDFs of the guides listed in those scripts. Note: The heights of the mobile PDFs may not be correct.

PDFs for mobile

First, add mobile-print class to the <section class="single-guide-page"> in _layouts/guide.html.

wkhtmltopdf -g --page-height ... --page-width 320px -L 2mm -R 2mm -T 2mm -B 2mm actiontakers.co.za/... --print-media-type output-mobile.pdf

action-takers's People

Contributors

guushoekman avatar nefiger avatar

Watchers

 avatar

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.