Merge pull request #171 from joyofrails/feat/metatags

rossta · web-flow · commit e13e01bce7cb · 2024-07-15T22:12:37.000-04:00
Adopt metatags for articles for better social media sharing
diff --git a/Gemfile b/Gemfile
@@ -37,6 +37,7 @@ gem "phlex-rails", group: [:default, :wasm] # An object-oriented alternative to
 gem "commonmarker", require: false
 gem "invisible_captcha", group: [:default, :wasm] # Unobtrusive and flexible spam protection for Rails apps [https://github.com/markets/invisible_captcha]
 gem "color_conversion", group: [:default, :wasm] # A ruby gem to perform color conversions [https://github.com/devrieda/color_conversion]
+gem "meta-tags", group: [:default, :wasm] # Search Engine Optimization (SEO) for Ruby on Rails applications. [https://github.com/kpumuk/meta-tags]
 
 gem "bootsnap", require: false # Reduces boot times through caching; required in config/boot.rb [https://github.com/Shopify/bootsnap]
 
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -271,6 +271,8 @@ GEM
       net-smtp
     marcel (1.0.4)
     matrix (0.4.2)
+    meta-tags (2.22.0)
+      actionpack (>= 6.0.0, < 8.1)
     mime-types (3.5.2)
       mime-types-data (~> 3.2015)
     mime-types-data (3.2024.0305)
@@ -571,6 +573,7 @@ DEPENDENCIES
   js
   letter_opener
   litestream
+  meta-tags
   mission_control-jobs
   phlex-rails
   postmark-rails
diff --git a/app/assets/images/articles/custom-color-schemes-with-ruby-on-rails/screenshot.jpg b/app/assets/images/articles/custom-color-schemes-with-ruby-on-rails/screenshot.jpg
diff --git a/app/assets/images/articles/introducing-joy-of-rails/screenshot.jpg b/app/assets/images/articles/introducing-joy-of-rails/screenshot.jpg
diff --git a/app/content/layouts/article.html.erb b/app/content/layouts/article.html.erb
@@ -1,3 +1,23 @@
+<% set_meta_tags(
+  title: current_page.data.title!,
+  description: current_page.data.description,
+  keywords: %w[rails hotwire],
+  index: true,
+  icon: "/favicon.ico",
+  og: {
+    title: :title,
+    description: :description,
+    type: "article",
+    url: current_page.url,
+    site_name: "Joy of Rails",
+    locale: "en_US",
+    image: current_page.data.meta_image && asset_url(current_page.data.meta_image)
+  },
+  twitter: {
+    card: current_page.data.meta_image ? "summary_large_image" : "summary",
+    site: "@joyofrails",
+  }
+) %>
 <%= render "application/skip_to_content" %>
 <%= render_layout "application" do %>
   <article itemscope itemtype="http://schema.org/Article">
diff --git a/app/content/pages/articles/custom-color-schemes-with-ruby-on-rails.html.mdrb b/app/content/pages/articles/custom-color-schemes-with-ruby-on-rails.html.mdrb
@@ -6,6 +6,7 @@ description: You can edit the color scheme of this website right in content of t
 summary: You can edit the color scheme of this website right in content of this blog post. Play with the controls while we highlight the benefits of Rails, Hotwire, and CSS variables.
 published: 2024-07-15
 image: articles/custom-color-schemes-with-ruby-on-rails/rainbows.jpg
+meta_image: articles/custom-color-schemes-with-ruby-on-rails/screenshot.jpg
 uuid: d99f045b-f3f7-4408-811e-9701b1a13ce8
 tags:
   - Rails
diff --git a/app/content/pages/articles/introducing-joy-of-rails.html.mdrb b/app/content/pages/articles/introducing-joy-of-rails.html.mdrb
@@ -8,6 +8,7 @@ published: '2024-05-02'
 toc: false
 uuid: 4106248b-ae8f-40a3-9853-48b91d815a71
 image: articles/introducing-joy-of-rails/adventure-world.gif
+meta_image: articles/introducing-joy-of-rails/screenshot.jpg
 tags:
   - Rails
 ---
diff --git a/app/javascript/css/components/code.scss b/app/javascript/css/components/code.scss
@@ -40,18 +40,21 @@
 
   & .code-title {
     font-weight: 600;
-    /* color: rgb(209 213 219 / var(--tw-text-opacity)); */
     display: block;
     text-align: center;
     line-height: 1;
 
     & a {
       font-family: var(--sans-serif);
-      font-weight: normal;
       gap: 0.25rem;
       align-items: center;
       display: flex;
-      color: var(--joy-text);
+      font-weight: bold;
+      color: var(--joy-light);
+      text-decoration: none;
+      & svg {
+        fill: var(--joy-light);
+      }
     }
   }
 }
diff --git a/app/views/components/pages/header.rb b/app/views/components/pages/header.rb
@@ -14,11 +14,8 @@ def initialize(title: nil, description: nil, published_on: nil, updated_on: nil)
   def view_template
     header(class: "page-header") do
       div(class: "container header-content") do
-        if @title_block
-          h1(&@title_block)
-        else
-          h1 { @title }
-        end
+        title = @title_block ? capture(&@title_block) : @title
+        h1 { title }
         p(class: "description") { @description } if @description
         if @published_on || @updated_on
           span(class: "block") do
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html class="motion-safe:scroll-smooth">
   <head>
-    <title>Joy of Rails</title>
+    <%= display_meta_tags site: "Joy of Rails" %>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <%= render "application/google_fonts" %>
@@ -22,7 +22,6 @@
     <%= vite_javascript_tag "application.js", media: "all", "data-turbo-track": "reload" %>
 
     <%= auto_discovery_link_tag(:rss, feed_index_url, {title: "joyofrails.com"}) %>
-
     <script type="text/javascript" defer data-domain="joyofrails.com" src="https://plausible.io/js/script.tagged-events.outbound-links.js"></script>
     <script type="text/javascript">window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
     <%= yield :head %>
diff --git a/config/application_wasm.rb b/config/application_wasm.rb
@@ -30,6 +30,7 @@
 require "inline_svg"
 require "invisible_captcha"
 require "color_conversion"
+require "meta-tags"
 
 module Joy
   class Application < Rails::Application
diff --git a/config/initializers/meta_tags.rb b/config/initializers/meta_tags.rb
@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+# Use this setup block to configure all options available in MetaTags.
+MetaTags.configure do |config|
+  # How many characters should the title meta tag have at most. Default is 70.
+  # Set to nil or 0 to remove limits.
+  # config.title_limit = 70
+
+  # When true, site title will be truncated instead of title. Default is false.
+  # config.truncate_site_title_first = false
+
+  # Add HTML attributes to the <title> HTML tag. Default is {}.
+  # config.title_tag_attributes = {}
+
+  # Natural separator when truncating. Default is " " (space character).
+  # Set to nil to disable natural separator.
+  # This also allows you to use a whitespace regular expression (/\s/) or
+  # a Unicode space (/\p{Space}/).
+  # config.truncate_on_natural_separator = " "
+
+  # Maximum length of the page description. Default is 300.
+  # Set to nil or 0 to remove limits.
+  # config.description_limit = 300
+
+  # Maximum length of the keywords meta tag. Default is 255.
+  # config.keywords_limit = 255
+
+  # Default separator for keywords meta tag (used when an Array passed with
+  # the list of keywords). Default is ", ".
+  # config.keywords_separator = ', '
+
+  # When true, keywords will be converted to lowercase, otherwise they will
+  # appear on the page as is. Default is true.
+  # config.keywords_lowercase = true
+
+  # When true, the output will not include new line characters between meta tags.
+  # Default is false.
+  # config.minify_output = false
+
+  # When false, generated meta tags will be self-closing (<meta ... />) instead
+  # of open (`<meta ...>`). Default is true.
+  # config.open_meta_tags = true
+
+  # List of additional meta tags that should use "property" attribute instead
+  # of "name" attribute in <meta> tags.
+  # config.property_tags.push(
+  #   'x-hearthstone:deck',
+  # )
+end
diff --git a/spec/views/components/pages/header_spec.rb b/spec/views/components/pages/header_spec.rb
@@ -1,15 +1,19 @@
 require "rails_helper"
 
 RSpec.describe Pages::Header, type: :view do
-  def render(**kwargs)
-    described_class.new(**kwargs).call(view_context: view)
+  def render(**kwargs, &block)
+    described_class.new(**kwargs, &block).call(view_context: view)
   end
 
   describe "#call" do
-    it "renders the header" do
+    it "renders the title" do
       expect(render(title: "Hello")).to have_css(".page-header h1", text: "Hello")
     end
 
+    it "renders the title block" do
+      expect(render { |h| h.title { "Hello" } }).to have_css(".page-header h1", text: "Hello")
+    end
+
     it "renders the description" do
       expect(render(description: "Describe me")).to have_css(".page-header p", text: "Describe me")
     end
