Convert shared HAML partials to the default ERB in Rails

.devcontainer/devcontainer.json

@@ -32,7 +32,7 @@
   "customizations": {
     "codespaces": {
       "openFiles": [
-        "app/views/home/show.html.haml"
+        "app/views/home/show.html.erb"
       ]
     },
     "vscode": {

Gemfile

@@ -13,7 +13,6 @@ gem 'jquery-rails'
 
 gem 'bootstrap-sass'
 gem 'font-awesome-rails'
-gem 'haml-rails'
 gem 'rails-html-sanitizer', '~> 1.4.4'
 gem 'sass-rails', '>= 5'
 gem 'simple_grid_rails'

Gemfile.lock

@@ -205,15 +205,6 @@ GEM
       multi_json (~> 1.11)
       os (>= 0.9, < 2.0)
       signet (~> 0.15)
-    haml (6.3.0)
-      temple (>= 0.8.2)
-      thor
-      tilt
-    haml-rails (2.1.0)
-      actionpack (>= 5.1)
-      activesupport (>= 5.1)
-      haml (>= 4.0.6)
-      railties (>= 5.1)
     hash-deep-merge (0.1.1)
     httpclient (2.9.0)
       mutex_m
@@ -482,7 +473,6 @@ GEM
       activesupport (>= 6.1)
       sprockets (>= 3.0.0)
     stackprof (0.2.27)
-    temple (0.10.3)
     thor (1.3.2)
     tilt (2.6.0)
     timeout (0.4.3)
@@ -531,7 +521,6 @@ DEPENDENCIES
   flamegraph
   font-awesome-rails
   google_drive
-  haml-rails
   jbuilder
   jquery-rails
   koala

app/helpers/application_helper.rb

@@ -77,34 +77,21 @@ def lazy_image_tag(source, options={})
     end
   end
 
-  def welcome_path(options={anchor: 'welcome'})
-    root_path(options)
-  end
-
-  def news_path(options={anchor: 'news'})
-    root_path(options)
-  end
-
-  def news_url(path='/')
-    'https://news.coderdojo.jp' + path
-  end
+  def welcome_path(options={anchor: 'welcome'}); root_path(options); end
+  def news_path   (options={anchor: 'news'});    root_path(options); end
 
-  def decadojo_url; 'https://decadojo.coderdojo.jp'; end
-  def dojocon_url;  'https://dojocon.coderdojo.jp';  end
+  def news_url   (path='/'); 'https://news.coderdojo.jp' + path; end
+  def dojomap_url(path='/'); 'https://map.coderdojo.jp'  + path; end
+  def zen_url(path='/find'); 'https://zen.coderdojo.com' + path; end
 
-  def dojoletter_url()
-    'https://news.coderdojo.jp/category/DojoLetterバックナンバー'
-  end
+  def decadojo_url;   'https://decadojo.coderdojo.jp'; end
+  def dojocon_url;    'https://dojocon.coderdojo.jp';  end
+  def dojoletter_url; 'https://news.coderdojo.jp/category/DojoLetterバックナンバー'; end
+  def foundation_url; 'https://speakerdeck.com/helloworldfoundation'; end
 
-  def dojomap_url(path='/')
-    'https://map.coderdojo.jp' + path
-  end
+  def facebook_group_url; 'https://www.facebook.com/groups/coderdojo.jp'; end
+  def facebook_page_url;  'https://www.facebook.com/coderdojo.jp'; end
+  def twitter_url;        'https://twitter.com/CoderDojoJapan'; end
+  def youtube_url;        'https://youtube.com/CoderDojoJapan'; end
 
-  def foundation_url
-    'https://speakerdeck.com/helloworldfoundation'
-  end
-
-  def zen_url(path='/find')
-    'https://zen.coderdojo.com' + path
-  end
 end

app/views/home/show.html.erb

@@ -105,7 +105,8 @@
   </div>
 </section>
 
-<!-- 以下のイベントお知らせ部分は HAML でコメントアウトされているため、HTMLコメントで残しています
+<!-- イベントのお知らせ (任意) -->
+<!--
 <hr>
 <section id="events" class="detail-introduction text-center">
   <h2>
@@ -161,7 +162,7 @@
 </section>
 
 <!--
-  以下の .text-center.grayscale-bg は HAML 上でコメントアウトされているため、HTMLコメントで残しています
+  以下の .text-center.grayscale-bg は section 数を増やしたときの調整用。
   <div class="text-center grayscale-bg" style="padding-top: 40px; padding-bottom: 50px;">
     <section class="detail-introduction" id="news">
       ...
@@ -203,7 +204,19 @@
     <br class="ignore-pc">
     <small>(毎月配信)</small>
   </p>
-  <%= render partial: 'shared/newsletter' %>
+
+  <div id="mc_embed_signup">
+    <form id="mc-embedded-subscribe-form" class="validate" action="https://coderdojo.us17.list-manage.com/subscribe/post?u=39a5824e42ab56ec44bb4e84e&amp;id=097dfa6a14" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
+      <div id="mc_embed_signup_scroll">
+	<input id="mce-EMAIL" type="email" name="EMAIL" class="email" placeholder="your@example.com">
+	<div style="position: absolute; left: -5000px;" aria-hidden="true">
+          <input tabindex="-1" name="b_39a5824e42ab56ec44bb4e84e_097dfa6a14" type="text" value="">
+	</div>
+	<input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="購読する">
+      </div>
+    </form>
+  </div> 
+
   <div class="btn-cover" style="margin-top: 40px;">
     <a class="btn-blue" href="<%= news_url %>">
       <i class="far fa-newspaper"></i>
@@ -213,7 +226,7 @@
 </section>
 
 <!--
-  以下も HAML 上でコメントアウトされている「最近の CoderDojo (Twitter タイムライン)」部分です
+  「最近の CoderDojo (Twitter タイムライン)」部分。公式の埋め込み機能が復旧されるまではコメントアウト。
   <section id="timeline" class="text-center" style="margin-bottom: 50px;">
     <h3 class="text-center" style="margin-bottom: 30px;">
       <a href="https://x.com/search?vertical=default&q=dojocon%20OR%20coderdojo%20OR%20コーダー道場%20lang%3Aja">

app/views/layouts/application.html.erb

@@ -96,6 +96,8 @@
 
     <%= render 'shared/footer' %>
 
+    <%= yield :javascript %>
+
     <!-- at the end of the BODY -->
     <script>
       // Twemoji parse

app/views/shared/_dojo.html+smartphone.erb

@@ -0,0 +1,27 @@
+<li class="dojo dojo-sp">
+  <header>
+    <%= link_to lazy_image_tag(dojo.logo, alt: "CoderDojo #{dojo.name}", class: 'dojo-picture-sp'), dojo.url,
+              target: "_blank", rel: "external noopener" %>
+    <p class="dojo-sp-info">
+      <span class="dojo-name dojo-name-sp">
+        <%= link_to "#{dojo.name} (#{dojo.prefecture.name})", dojo.url, target: "_blank", rel: "external noopener" %>
+        <% if not dojo.counter == 1 %>
+          <span class="dojo-counter" data-original-title="道場数"
+                data-placement="bottom"
+                data-toggle="tooltip"><%= dojo.counter %></span>
+        <% end %>
+      </span>
+      <span class="dojo-description">
+        <%= dojo.description %>
+        <% if dojo.is_private %>
+          <%= link_to 'Private', doc_path('private-dojo'), class: 'dojo-private' %>
+        <% end %>
+      </span>
+    </p>
+  </header>
+  <ul class="tags">
+    <% dojo.tags.each do |tag| %>
+      <li><%= tag %></li>
+    <% end %>
+  </ul>
+</li> 

app/views/shared/_dojo.html.erb

@@ -0,0 +1,25 @@
+<li class="dojo" id="<%= dojo.name %>">
+  <header>
+    <%= link_to lazy_image_tag(dojo.logo, alt: "CoderDojo #{dojo.name}", class: 'dojo-picture'), dojo.url,
+              target: "_blank", rel: "external noopener" %>
+    <span class="dojo-name">
+      <%= link_to "#{dojo.name} (#{dojo.prefecture.name})", dojo.url, target: "_blank", rel: "external noopener" %>
+      <% if not dojo.counter == 1 %>
+        <span class="dojo-counter" data-original-title="道場数"
+              data-placement="bottom"
+              data-toggle="tooltip"><%= dojo.counter %></span>
+      <% end %>
+    </span>
+  </header>
+  <ul class="tags">
+    <% dojo.tags.each do |tag| %>
+      <li><%= tag %></li>
+    <% end %>
+  </ul>
+  <p class="dojo-description">
+    <%= dojo.description %>
+    <% if dojo.is_private %>
+      <%= link_to 'Private', doc_path('private-dojo'), class: 'dojo-private' %>
+    <% end %>
+  </p>
+</li> 

app/views/shared/_dojos.html+smartphone.erb

@@ -0,0 +1,33 @@
+<div id="accordion" class="panel-group" aria-multiselectable="true" role="tablist">
+  <% regions_and_dojos.each_with_index do |(region, dojos), index| %>
+    <div class="panel panel-default">
+      <div class="panel-heading" id="heading<%= index %>" role="tab">
+        <h4 class="panel-title">
+          <a data-toggle="collapse"
+             href="#collapse<%= index %>" role="button">
+            <i class="fa fa-chevron-right" aria-hidden="true"></i>
+            <%= region %>
+            - <%= dojos.pluck(:counter).sum %> Dojos
+          </a>
+        </h4>
+      </div>
+      <div class="panel-collapse collapse" id="collapse<%= index %>" role="tabpanel">
+        <div class="panel-body grayscale-bg dojo-flex">
+          <%= render partial: 'shared/dojo', collection: dojos %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<script>
+  $(document).ready(function() {
+    $('.collapse').on('shown.bs.collapse', function() {
+      $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-down");
+    });
+
+    $('.collapse').on('hidden.bs.collapse', function() {
+      $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-right");
+    });
+  });
+</script> 

app/views/shared/_dojos.html.erb

@@ -0,0 +1,3 @@
+<ul class="loaded dojo-flex">
+  <%= render partial: 'shared/dojo', collection: regions_and_dojos.values.flatten %>
+</ul> 

app/views/shared/_dojos_stats.html.erb

@@ -0,0 +1 @@
+_dojos.html+smartphone.erb

app/views/shared/_footer.html.erb

@@ -0,0 +1,55 @@
+<footer id="footer" class="footer-bottom text-center">
+  <h2 style="line-height: 30px;">
+    <a class="footer-link" href="/" title="トップページに戻ります">Top</a>
+    | <a class="footer-link" href="/kata"  title="道場情報まとめ「Kata」を見る">Kata</a>
+    | <a class="footer-link" href="/#news" title="最近のニュース「DojoLetter」を見る">News</a>
+    | <a class="footer-link" href="/docs"  title="公式資料まとめ「Docs」を見る">資料</a>
+    | <a class="footer-link" href="/charter" title="CoderDojo 憲章を見る">憲章</a>
+    | <a class="footer-link" href="/stats"   title="CoderDojo の統計データを見る">統計</a>
+    | <a class="footer-link" href="/sotechsha2" title="CoderDojo Japan 公式ブックを見る">書籍</a>
+    | <a class="footer-link" href="<%= dojomap_url %>" title="地図から探せる「DojoMap」を見る">地図</a>
+    | <a class="footer-link" href="/privacy" title="プライバシーポリシーを見る">Privacy</a>
+    | <a class="footer-link" href="/podcasts" title="ポッドキャスト番組「DojoCast」を見る">Podcast</a>
+    | <a class="footer-link" href="<%= decadojo_url %>" title="CoderDojo の地域カンファレンス「DecaDojo」を見る">DecaDojo</a>
+    | <a class="footer-link" href="<%= dojocon_url %>"  title="CoderDojo の全国カンファレンス「DojoCon Japan」を見る">DojoCon</a>
+    | <a class="footer-link" href="/english" hreflang="en" title="Read CoderDojo Japan's website in English">English</a>
+  </h2>
+
+  <h2>
+    <%= link_to news_url do %>
+      <i class="fa fa-newspaper-o fa-3x fa-fw" aria-hidden="true" title="News"></i>
+    <% end %>
+    <%= link_to facebook_page_url do %>
+      <i class="fa fa-facebook fa-3x fa-fw" aria-hidden="true" title="Facebook"></i>
+    <% end %>
+    <%= link_to twitter_url do %>
+      <i class="fa fa-twitter fa-3x fa-fw" aria-hidden="true" title="Twitter"></i>
+    <% end %>
+    <%= link_to youtube_url do %>
+      <i class="fa fa-youtube fa-3x fa-fw" aria-hidden="true" title="YouTube"></i>
+    <% end %>
+    <%= link_to podcasts_path do %>
+      <i class="fa fa-podcast fa-3x fa-fw" aria-hidden="true" title="Podcast"></i>
+    <% end %>
+    <%= link_to english_path do %>
+      <i class="fa fa-globe fa-3x fa-fw" aria-hidden="true" title="English"></i>
+    <% end %>
+  </h2>
+
+  <p style="margin-bottom: 30px;">
+    本サイトのソースコードは<br class="ignore-pc">
+    <a class="footer-link" href="https://github.com/coderdojo-japan/coderdojo.jp">GitHub</a>
+    上で公開されています。
+  </p>
+  <p style="font-size: 90%; color: #DDDDDD;">
+    Copyright &copy;
+    <a href="/about-coderdojo-japan" style="color: #DDDDDD; text-decoration: none;">
+      一般社団法人 CoderDojo Japan
+    </a>
+    <br>
+    新宿区高田馬場1-28-10 三慶ビル4F
+    <a href="https://case-shinjuku.com/" style="color: #DDDDDD; text-decoration: none;">
+      ケイス新宿
+    </a>
+  </p>
+</footer>