My Gists

This README would normally document whatever steps are necessary to get the application up and running.

1. Ruby version: 2.4.1, Rails – 5.0.2

2. Uses rouge gem – a pure-ruby code highlighter that is compatible with pygments.

Tutorials:

1. Deployment instructions for Heroku by M. Hartl

2. Adding a Second Model

   Kod jest na gałęzi add_comments

   git checkout add_comments
   # git push -u origin add_comments # pushing local branch to GitHub

Cloning repo on a new computer:

git pull git@github.com:rails4/my_gists_5.0.git
cd my_gists_5.0
git checkout --track origin/add_comments

Responders (responders branch contains an example – adding remarks to gists):

• gem responders

• also includes a responders controller generator, so your scaffold can be customized to use respond_with instead of default respond_to blocks.

  you need to explicitly opt-in to use this generator by adding the following to your config/application.rb:

config.app_generators.scaffold_controller :responders_controller

From the beginning

rails new my_gists
cd my_gists
# bundle install
# bundle install --local
bundle install --without production
# bundle install --without production --local
# bundle --path vendor/bundle --without production
# bundle --path /tmp/<unique id> --without production  # w laboratoriach (quota)
rails server --help
# rails server -p 3000 -b 0.0.0.0
rails server

Generate Gist model/views/controlers:

rails generate --help
rails generate scaffold gist src:text lang:string desc:string
# rails db:migrate RAILS_ENV=development
rails db:migrate
# check available routes
# rails routes
# open http://localhost:3000/gists

You can have the root of your site routed with "root"

config/routes.rb

root 'gists#index'
# http://localhost:3000

Deploying to production – Heroku

Zobacz też Deploying.

Important

W pliku Gemfile należy przenieść gem sqlite3 do grupy :development, :test, a gem pg należy wpisać do grupy :production.

Gemfile

group :development, :test do
  gem 'byebug', platform: :mri
  gem 'sqlite3'
end

group :production do
  gem 'pg', '0.19.0'
end

Teraz czas na instalację Heroku Toolbelt. Po instalacji wykonujemy:

bundle install --without production
git commit -am "update for Heroku"

# wykonujemy tylko raz
heroku login
heroku keys:add

Dodajemy nową aplikację na Dashboard albo dodajemy ją na konsoli.

heroku create
# Creating app... done, ⬢ still-falls-28867
# https://still-falls-28867.herokuapp.com/ | https://git.heroku.com/still-falls-28867.git

Deploying, zob. też Deploying with Git.

git push heroku master
# remote: ###### WARNING:
# remote:        You have not declared a Ruby version in your Gemfile.
# remote:        To set your Ruby version add this line to your Gemfile:
# remote:        ruby '2.2.6'
# remote:        # See https://devcenter.heroku.com/articles/ruby-versions for more information.
# remote:
# remote: ###### WARNING:
# remote:        No Procfile detected, using the default web server.
# remote:        We recommend explicitly declaring how to boot your server process via a Procfile.
# remote:        https://devcenter.heroku.com/articles/ruby-default-web-server
# remote:
# remote: -----> Discovering process types
# remote:        Procfile declares types     -> (none)
# remote:        Default types for buildpack -> console, rake, web, worker
# remote:
# remote: -----> Compressing...
# remote:        Done: 28M
# remote: -----> Launching...
# remote:        Released v5
# remote:        https://still-falls-28867.herokuapp.com/ deployed to Heroku
# remote:
# remote: Verifying deploy.... done.
# To https://git.heroku.com/still-falls-28867.git
#  * [new branch]      master -> master

heroku run rails db:migrate
# heroku open https://still-falls-28867.herokuapp.com/

heroku apps:rename gists5
# Renaming still-falls-28867 to gists5... done
# https://gists5.herokuapp.com/ | https://git.heroku.com/gists5.git
# Git remote heroku updated
#  ▸    Don't forget to update git remotes for all other local checkouts of the app.
# heroku open https://gists5.herokuapp.com/

Ostrzeżenia powyżej sugerują, że warto zmienić kilka rzeczy, np. dodać wersję Ruby do pliku Gemfile:

ruby '2.4.0'

dodać plik Procfile w którym wymienimy domyślny (dla wersji Rails 4) serwer webowy Webrick na szybką pumę 😓

Procfile

web: bundle exec puma -C config/puma.rb

Zobacz też Deploying Rails Applications with the Puma Web Server.

Source code prettyprinting

Gemfile

gem 'rouge', '~> 2.0.0'

W pliku app/views/gists/index.html.erb wymieniamy element table na element pre i kilka akapitów p.

<% @gists.each do |gist| %>
  <pre><%= gist.src %></pre>
  <p>Lang: <%= gist.lang %></p>
  <p>Desc: <%= gist.desc %></p>
  <p>
    <%= link_to 'Show', gist %> |
    <%= link_to 'Edit', edit_gist_path(gist) %> |
    <%= link_to 'Destroy', gist, method: :delete, data: { confirm: 'Are you sure?' } %>
  </p>
<% end %>

W pliku app/views/gists/show.html.erb podmieniamy element z @gist.src na:

<pre class="highlight"><%= raw Rouge.highlight @gist.src, @gist.lang, 'html' %></pre>

Tworzymy nowy plik app/assets/stylesheets/rouge.css.erb o zawartości:

<%= Rouge::Themes::Github.render(scope: '.highlight')%>

Custom layout with Bootstrap

Co to jest layout? layout aplikacji? gdzie definiujemy layout?

1. Bootstrap – the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web

2. Bootstrap and custom CSS

3. rails-bootstrap-forms – a Rails form builder that makes it super easy to create beautiful-looking forms with Twitter Bootstrap 3+. Wraps the standard Rails form helpers so it’s practically a drop-in replacement.

Gemfile

# Make all the necessary Bootstrap files available to the current application
gem 'bootstrap-sass', '3.3.7'
gem 'bootstrap-sass-extras', '0.0.7'

# Optionally install
group :development do
  # gem 'quiet_assets' # see https://github.com/evrone/quiet_assets
  gem 'rubocop', require: false # for Atom editor
  gem 'scss_lint', require: false # for Atom editor
end

Po tych poprawkach w pliku Gemfile wykonujemy na konsoli te polecenia:

bundle
rails generate
rails generate bootstrap:install
rails generate bootstrap:themed gists # <- liczba mnoga!

Bootstrap krok po kroku

Dodajemy pionowy odstęp u góry każdej strony app/assets/stylesheets/custom.css.scss:

@import 'bootstrap-sprockets';
@import 'bootstrap';
// body {
//   padding-top: 60px;
// }

Zmieniamy layout aplikacji app/views/layouts/application.html.erb:

<body>
  <%= render 'layouts/header' %>
  <div class="container">
    <%= yield %>
  </div>
</body>

Dodajemy widok częściowy app/views/layouts/_header.html.erb:

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",  '/' %></li>
        <li><%= link_to "About", '/about' %></li>
      </ul>
    </nav>
  </div>
</header>

Pozostaje przywrócić kolorowanie fragmentów kodu (gists), dodać podstronę About, poprawić index.html.erb, itd.