Feature/rails seo

app/controllers/about_controller.rb

@@ -1,5 +1,5 @@
 class AboutController < ApplicationController
-  layout 'about'
+  layout 'application_react'
 
   def index
     @title = 'About'

app/controllers/countries_controller.rb

@@ -1,12 +1,12 @@
 class CountriesController < ApplicationController
-  before_action :check_country_iso, only: :show
+  before_action :set_country, only: :show
 
   include ActionView::Helpers::NumberHelper
 
   layout 'countries'
 
   def index
-    @countries = find_countries
+    @countries = Country.find_all
     @title = 'Country Profiles'
     @desc = 'Explore country-specific statistics and graphs to see the how forests change and contribute to various sectors.'
     @keywords = 'GFW, list, forest data, visualization, data, national, country, analysis, statistic, tree cover loss, tree cover gain, climate domain, boreal, tropical, subtropical, temperate, deforestation, overview'
@@ -44,53 +44,8 @@ def overview
   end
 
   private
-    def find_countries
-      response = Typhoeus.get("#{ENV['GFW_API_HOST']}/countries", headers: {"Accept" => "application/json"})
-      if response.success?
-        Rails.cache.fetch 'countries', expires_in: 1.day do
-          JSON.parse(response.body)['countries']
-        end
-      else
-        nil
-      end
-    end
-
-    def find_by_iso(iso)
-      unless iso.blank?
-        # CACHE: &bust=true if you want to flush the cache
-        iso = iso.downcase
-        response = Typhoeus.get(
-            "#{ENV['GFW_API_HOST']}/countries/#{iso}?thresh=30",
-            headers: {"Accept" => "application/json"}
-        )
-        if response.success? and (response.body.length > 0)
-          JSON.parse(response.body)
-        else
-          nil
-        end
-      end
-    end
-
-    def find_by_name(country_name)
-      country_name, *_ = country_name.split(/_/)
-      country_name = country_name.capitalize
-      response = Typhoeus.get("https://wri-01.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20gfw2_countries%20where%20name%20like%20'#{country_name}%25'",
-        headers: {"Accept" => "application/json"}
-        )
-      if response.success?
-        JSON.parse(response.body)['rows'][0]
-      else
-        nil
-      end
-    end
 
-    def check_country_iso
-      @country = find_by_iso(params[:id])
-      unless @country.nil?
-        @country
-      else
-        @country = find_by_name(params[:id])
-      end
-        @country
+    def set_country
+      @country = Country.find_by_iso_or_name(params[:id])
     end
 end

app/controllers/country_controller.rb

@@ -1,14 +1,29 @@
 class CountryController < ApplicationController
 
-  layout 'country'
+  layout 'application_react'
+  before_action :set_country, only: [:show]
 
-  def index
-    @desc = 'Data about forest change, tenure, forest related employment and land use'
+  def show
+    @title = @country["name"]
+    @desc = "Data about forest change, tenure, forest related employment and land use in #{@title}"
+    if params[:widget]
+      widgets_config = JSON.parse(File.read(Rails.root.join('app', 'javascript', 'pages', 'country', 'data', 'widgets-config.json')))
+      widget_data = widgets_config[params[:widget]]
+      @og_title = "#{widget_data["title"]} in #{@country["name"]}"
+      # for dynamic widget image when the feature is ready
+      # @img = "widgets/#{@widget}.png"
+    end
   end
 
   def embed
-    @desc = 'Data about forest change, tenure, forest related employment and land use'
-    render layout: 'country_embed'
+    @title = @country["name"]
+    @desc = "Data about forest change, tenure, forest related employment and land use in #{@title}"
+    render layout: 'application_react_embed'
   end
 
+  private
+
+  def set_country
+    @country = Country.find_by_iso(params[:iso])
+  end
 end

app/controllers/small_grants_fund_controller.rb

@@ -1,5 +1,11 @@
 class SmallGrantsFundController < ApplicationController
 
+  if ENV['FEATURE_ENV'] == 'staging'
+    layout 'application_react'
+  else
+    layout 'small_grants_fund'
+  end
+
   def index
     @title = 'Small Grants Fund'
   end

app/javascript/components/button/button-styles.scss

@@ -3,6 +3,7 @@ $button-height: rem(40px);
 
 .c-button {
   height: $button-height;
+  font-family: $font-family-1;
   border-radius: rem(20px);
   width: 100%;
   padding: 0 rem(15px);

app/javascript/components/modal/modal-component.jsx

@@ -28,7 +28,7 @@ class CustomModal extends PureComponent {
       >
         <button
           onClick={onRequestClose}
-          className={`c-modal-close ${closeClass}`}
+          className={`modal-close ${closeClass}`}
         >
           <Icon icon={closeIcon} />
         </button>

app/javascript/components/modal/modal-styles.scss

@@ -6,14 +6,19 @@ $close-position: 25px;
   overflow: hidden;
 }
 
-.c-modal-close {
+.modal-close {
   position: absolute;
   top: $close-position;
   right: $close-position;
   border: none;
   outline: none;
   cursor: pointer;
   z-index: 10;
+
+  svg {
+    width: rem(15px);
+    height: rem(15px);
+  }
 }
 
 html,

app/javascript/pages/country/meta/meta-component.jsx

@@ -6,39 +6,28 @@ import { Helmet } from 'react-helmet';
 class Meta extends PureComponent {
   // eslint-disable-line react/prefer-stateless-function
   render() {
-    const { page, widgetImage } = this.props;
+    const { page } = this.props;
     return (
       <Helmet>
         <title>{`${page ? `${page} | ` : ''}Global Forest Watch`}</title>
         <meta
           name="description"
           content={`Data about forest change, tenure, forest related employment and land use in ${page}`}
         />
-        <meta name="author" content="World Resources Institute" />
         <meta name="DC.title" content={`${page} | Global Forest Watch`} />
         <meta property="og:title" content={`${page} | Global Forest Watch`} />
         <meta
           property="og:description"
           content={`Data about forest change, tenure, forest related employment and land use in ${page}`}
         />
         <meta property="og:url" content={window.location.href} />
-        <meta
-          property="og:image"
-          content={
-            widgetImage ||
-            'http://www.globalforestwatch.org/assets/backgrounds/home-slider/bg_slide1.png'
-          }
-        />
-        <meta name="twitter:card" content="summary" />
-        <meta name="twitter:site" content="@globalforests" />
       </Helmet>
     );
   }
 }
 
 Meta.propTypes = {
-  page: PropTypes.string,
-  widgetImage: PropTypes.string
+  page: PropTypes.string
 };
 
 export default Meta;

app/javascript/pages/country/root/root-component.js

@@ -133,7 +133,13 @@ class Root extends PureComponent {
         {widgetAnchor && <ScrollTo target={widgetAnchor} />}
         <CountryDataProvider />
         <WhitelistsProvider />
-        <Meta page={currentLocation} />
+        <Meta
+          page={
+            locationNames &&
+            locationNames.country &&
+            locationNames.country.label
+          }
+        />
       </div>
     );
   }

app/javascript/pages/country/widget/components/widget-header/widget-header.js

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 import compact from 'lodash/compact';
-import replace from 'lodash/replace';
 import moment from 'moment';
 
 import shareActions from 'components/share/share-actions';
@@ -43,11 +42,11 @@ const mapStateToProps = ({ location, modalMeta }, ownProps) => {
       subtitle: `${title} in ${
         locationNames.current ? locationNames.current.label : ''
       }`,
-      shareUrl: `${replace(
-        window.location.href,
-        window.location.hash,
-        ''
-      )}#${widget}`,
+      shareUrl: `http://${window.location.host}${window.location.pathname}?${
+        location && location.category && location.query.category
+          ? `category=${location.query.category}&`
+          : ''
+      }${`widget=${widget}`}#${widget}`,
       embedUrl,
       embedSettings:
         settingsConfig.config.size === 'small'

app/javascript/pages/country/widget/widgets/widget-glad-alerts/widget-glad-alerts-selectors.js

@@ -58,7 +58,7 @@ export const getData = createSelector(
     if (!data || isEmpty(data)) return null;
     const groupedByYear = groupBy(data, 'year');
     const years = [];
-    const latestFullWeek = moment(latest).subtract('weeks', 1);
+    const latestFullWeek = moment(latest).subtract(1, 'weeks');
     const lastWeek = {
       isoWeek: latestFullWeek.isoWeek(),
       year: latestFullWeek.year()

app/models/country.rb

@@ -0,0 +1,49 @@
+class Country
+  class << self
+    def base_path
+      ENV['GFW_API_HOST']
+    end
+
+    def find_all
+      url = "#{base_path}/countries"
+      response = Typhoeus.get(url, headers: {"Accept" => "application/json"})
+      if response.success?
+        Rails.cache.fetch 'countries', expires_in: 1.day do
+          JSON.parse(response.body)['countries']
+        end
+      else
+        nil
+      end
+    end
+
+    def find_by_iso_or_name(value)
+      find_by_iso(value) || find_by_name(value)
+    end
+
+    def find_by_iso(iso)
+      return nil unless iso
+      url = "#{base_path}/countries/#{iso.downcase}?thresh=30"
+      # CACHE: &bust=true if you want to flush the cache
+      response = Typhoeus.get(url, headers: {"Accept" => "application/json"})
+
+      if response.success? and (response.body.length > 0)
+        JSON.parse(response.body)
+      else
+        nil
+      end
+    end
+
+    def find_by_name(country_name)
+      country_name, *_ = country_name.split(/_/)
+      country_name = country_name.capitalize
+      url = "https://wri-01.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20gfw2_countries%20where%20name%20like%20'#{country_name}%25'"
+      response = Typhoeus.get(url, headers: {"Accept" => "application/json"})
+
+      if response.success?
+        JSON.parse(response.body)['rows'][0]
+      else
+        nil
+      end
+    end
+  end
+end

app/views/about/index.html.erb

@@ -1,6 +1,10 @@
+<%= content_for :head do %>
+  <%= render 'shared/icons' %>
+  <%= controller_stylesheet_link_tag %>
+<% end %>
+
+<%= requirejs_include_tag 'about' %>
 <%= render 'shared/js_config' %>
 <%= render 'shared/icons/svg_icons_about' %>
 <%= render 'shared/icons/svg_icons_social' %>
-<%= render 'shared/gfw_assets' %>
-<%= render 'header' %>
-<%= render 'about_page' %>
+<div id="about-page"></div>

app/views/countries/overview.html.erb

@@ -1,4 +1,4 @@
-<%= render 'shared/svg_icons_countries' %>
+<%= render 'shared/icons/svg_icons_countries' %>
 <% content_for :js do %>
   <%= render "countries_templates" %>
   <%= render "shared/js_templates" %>

app/views/countries/show.html.erb

@@ -1,5 +1,5 @@
-<%= render 'layouts/svg_icons' %>
-<%= render 'shared/svg_icons_countries' %>
+<%= render 'shared/icons/svg_icons' %>
+<%= render 'shared/icons/svg_icons_countries' %>
 <% content_for :header do %>
   <h1 class="header-title">
     <a href="/">Global Forest Watch</a>

app/views/country/show.html.erb

@@ -0,0 +1,6 @@
+<%= content_for :head do %>
+  <%= render 'shared/google_v3_30_carto' %>
+  <%= stylesheet_link_tag "http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css", :media => 'all' %>
+<% end %>
+
+<div id="country-page"></div>

app/views/embed/countries_overview.html.erb

@@ -1,5 +1,5 @@
-<%= render 'layouts/svg_icons' %>
-<%= render 'shared/svg_icons_countries' %>
+<%= render 'shared/icons/svg_icons' %>
+<%= render 'shared/icons/svg_icons_countries' %>
 <%= render 'shared/modal' %>
 
 <% content_for :css do %>

app/views/layouts/application.html.erb

@@ -19,7 +19,6 @@
 
     <link rel="canonical" href="<%= request.original_url %>" />
 
-
     <link href='http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,400italic' rel='stylesheet' type='text/css'>
 
     <meta name="google-translate-customization" content="af2414ea962843fc-f48b15cdb6a3ab9b-gd8c738d3a7ff42de-1a">
@@ -33,12 +32,12 @@
     <%= render 'shared/gfw_assets' %>
   </head>
   <body class="<%= "is-#{controller_name}-page is-#{action_name}-action" %>">
-    <%= render 'layouts/svg_icons' %>
+    <%= render 'shared/icons/svg_icons' %>
 
-    <%= render 'shared/svg_icons_footer' %>
+    <%= render 'shared/icons/svg_icons_footer' %>
     <%= render 'shared/modal' %>
     <%= render 'shared/notifications' %>
-    
+
     <div class="wrap">
         <%= render "shared/header_landing" %>
         <div class="layout-content">