Pick the first image in a doc if exists and set it as OGP image

Author: yasulab

app/controllers/docs_controller.rb

@@ -26,8 +26,9 @@ def show
       @doc.content.gsub! "{{ NUM_OF_PARTNERSHIPS }}", Dojo::NUM_OF_PARTNERSHIPS
     end
 
-    @content = Kramdown::Document.new(@doc.content, input: 'GFM').to_html
-    @url     = request.url
+    @content    = Kramdown::Document.new(@doc.content, input: 'GFM').to_html
+    @url        = request.url
+    @meta_image = Nokogiri::HTML.parse(@content).at("//img")&.attribute('data-src')&.value || "/img/ogp-docs.jpeg"
 
     # Add here if you want to optimize meta description.
     case @doc.filename

app/views/docs/show.html.erb

@@ -5,6 +5,7 @@
 <% provide :desc,  @doc.description  %>
 <% provide :url,   @url              %>
 <% provide :lang,  @lang             %>
+<% provide :meta_image, @meta_image  %>
 
 <div class='container' style='line-height: 1.9em;'>
   <section class='doc' style='padding: 50px 0px 100px 0px;'>

db/docs/tobitate-japan.md

@@ -1,14 +1,16 @@
 # ✈️ トビタテ！留学JAPAN / CoderDojo 留学
 
-<a href='#example'>
-  <img class="lazyload img-responsive center-block" alt="CoderDojo 留学 - Supported by トビタテ！留学 JAPAN"
-       style="width: 90%; margin: 50px auto;" data-src="/docs/tobitate-coderdojo-1.webp" loading="lazy" src="/spinner.svg"/>
-</a>
+<br>
 
 トビタテ！留学JAPAN「日本代表プログラム」は、返済不要の奨学金や研修等を通して学生の留学を支援する奨学金制度です。
 
 高校生・高専生・大学生を対象とした文科省主催の取り組みで、返済不要の奨学金や研修など通して **好きなこと** で留学ができるプログラムです。
 
+<a href='#example'>
+  <img class="lazyload img-responsive center-block" alt="CoderDojo 留学 - Supported by トビタテ！留学 JAPAN"
+       style="width: 90%; margin: 50px auto;" data-src="/docs/tobitate-coderdojo-1.webp" loading="lazy" src="/spinner.svg"/>
+</a>
+
 <br>
 
 ## [✅](#agenda) 特長 {#agenda}