Giter Site home page Giter Site logo

opencookmailer's Introduction

Sinatra/Padrino App for Frontend developers

Use HAML, SASS and Coffee Script for frontend development right now!

Installation on Windows

Ruby Install

Download .ZIP archive with Application

You can use git-clone way if you want

Windows command line actions

  • start Windows command line with cmd command
  • gem install bundler --no-ri --no-rdoc
  • go to directory of Application
  • bundle
  • padrino start -p 3000

Welcome to Application

  • open your browser
  • localhost:3000

Installation on *NIX

Ruby Install

Use your OS way to install git, ruby, gems or rvm

Clone Application

  • git clone git://github.com/the-teacher/the_template.git

Terminal Action

  • gem install bundler --no-ri --no-rdoc
  • go to directory of Application
  • bundle
  • padrino start -p 3000

Welcome to Application

  • open your browser
  • localhost:3000

How to use HAML

  • Create new action in application file app\app.rb
get '/new_action' do
  haml :new_action
end
  • Create new HAML file app\views\new_action.haml

  • Go to localhost:3000/new_action

How to use SASS

  • Create new SASS file in *public\stylesheets\scss*

  • Include SASS file in Application Layout file app\views\layouts\layout.haml

= stylesheet_link_tag 'reset'
= stylesheet_link_tag 'headers'
= stylesheet_link_tag 'custom'

= stylesheet_link_tag 'NEW_SASS_FILE'
  • Look at result localhost:3000/stylesheets/NEW_SASS_FILE.css

How to use Coffee Script

  • Create new Coffee Script file in *public\javascripts\coffee*

  • Include Coffee Script file in Application Layout file app\views\layouts\layout.haml

= javascript_include_tag 'jquery'
= javascript_include_tag 'jquery-ui'
= javascript_include_tag 'application'

= javascript_include_tag 'NEW_COFFEE_SCRIPT_FILE'
  • Look at result localhost:3000/javascripts/NEW_COFFEE_SCRIPT_FILE.js

Helpers

MD5 Helper

Just wrapper for Digest::MD5.hexdigest

def md5 str = ''
  Digest::MD5.hexdigest str.to_s
end

Email Image Helper

Gives direct link to Image if :is_mail => false, and build image tag with image cid if :is_email => true

def email_image name, options, is_mail = false
  return image_tag(name, options) unless is_mail
  options.merge!(:src => "cid:#{name}")
  tag :img, options
end
= email_image 'sinatra.png', {}, true
= email_image 'sinatra.png', {}, false

Partial Helper

Emulate behavior of haml partials with Rails-like style. Partials directory is *app\views\partials*

Names of partials starts with underscore

def partial name, options = {}
  parts = name.split '/'
  name  = parts.pop
  path  = [parts, "_#{name}"].join '/'
  haml path.to_sym, :locals => options[:locals], :layout => false
end
= partial 'partials/test', :locals => { :hello_variable => 'SOME VARIABLE FOR PARTIAL' }

app\views\partials\_test.haml

HTML letters

  • Setup you Email service options in app\app.rb file
set :delivery_method, :smtp => { 
  :address              => "smtp.gmail.com",
  :port                 => 587,
  :user_name            => '[email protected]',
  :password             => 'qwerty',
  :authentication       => :plain,
  :enable_starttls_auto => true  
}
  • Use direct link localhost:3000/mail/letter to see your HTML letter in browser
get '/mail/letter' do
  haml :"../mailers/letter", :locals => { :is_mail => false }
end
  • Use send mail link localhost:3000/mail/send to send your email. You will be redirected to /mail/letter at end of sending process.

  • Add attachments with before filter

before '/mail/send' do
  @@img_path    = "#{Padrino.root}/public/images/"
  @@attachments = [
    'sinatra.png'
  ]
end
  • Use email_image 'sinatra.png', {}, true on email sending

  • Use email_image 'sinatra.png', {}, false one HTML letter cteating

opencookmailer's People

Contributors

the-teacher avatar

Watchers

 avatar James Cloos 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.