views/stories, views/layouts and other homepage i18n (#15083)

* views/stories and home related i18n

* PR key names fixes

* remove ja.yml

* Update en.yml

* Update fr.yml

* Update articles_search_spec.rb

* Update _meta.html.erb

* Update index.html.erb

* Update _meta.html.erb

* Update articles_search_spec.rb

text in HTML should not contain raw brackets

* Update articles_search_spec.rb

* Update _signup_modal.html.erb

* Add back missing Search text

Co-authored-by: Fernando Valverde <fernando@visualcosita.com>

app/views/articles/index.html.erb

@@ -21,7 +21,7 @@
   <meta name="twitter:description" content="<%= Settings::Community.community_description %>">
   <meta name="twitter:image:src" content="<%= Settings::General.main_social_image %>">
   <meta name="twitter:card" content="summary_large_image">
-  <%= auto_discovery_link_tag(:rss, app_url("feed"), title: "#{community_name} RSS Feed") %>
+  <%= auto_discovery_link_tag(:rss, app_url("feed"), title: t("views.stories.meta.rss", name: community_name)) %>
 <% end %>
 
 <%= javascript_packs_with_chunks_tag "homePage", defer: true %>
@@ -39,37 +39,39 @@
       <%= render(partial: "onboardings/task_card") if user_signed_in? %>
 
       <header class="p-2 px-3 m:p-0 m:px-0 m:mb-2 fs-l">
-        <h1 class="screen-reader-only">Posts</h1>
-        <nav class="-mx-3 m:mx-0 s:flex items-center justify-between" aria-label="View posts by">
+        <h1 class="screen-reader-only"><%= t("views.stories.heading") %></h1>
+        <nav class="-mx-3 m:mx-0 s:flex items-center justify-between" aria-label="<%= t("views.stories.sort.aria_label") %>">
           <ul class="crayons-navigation crayons-navigation--horizontal">
             <li>
-              <a data-text="Feed" href="<%= list_path %>/" class="crayons-navigation__item <%= "crayons-navigation__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"<%= %w[week month year infinity
-                                                                                                                                                                                                                 latest].exclude?(params[:timeframe]) ? ' aria-current="page"'.html_safe : "" %>><%= t("core.feed") %></a>
+              <a data-text="Feed" href="<%= list_path %>/" class="crayons-navigation__item <%= "crayons-navigation__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"
+                <%= %w[week month year infinity latest].exclude?(params[:timeframe]) ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.feed") %></a>
             </li>
             <li>
-              <a data-text="Latest" href="<%= list_path %>/latest" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? ' aria-current="page"'.html_safe : "" %>><%= t("core.latest") %></a>
+              <a data-text="Latest" href="<%= list_path %>/latest" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.latest") %></a>
             </li>
             <li>
               <a data-text="Top" href="<%= list_path %>/top/week"
                 class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") %>"
                 <%= timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>
-                  Top
+                  <%= t("views.stories.sort.top") %>
               </a>
             </li>
           </ul>
           <% if timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") %>
             <ul class="crayons-navigation crayons-navigation--horizontal fs-base">
               <li>
-                <a data-text="Week" href="<%= list_path %>/top/week" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? ' aria-current="page"'.html_safe : "" %>><%= t("core.week") %></a>
+                <a data-text="Week" href="<%= list_path %>/top/week" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.week") %></a>
               </li>
               <li>
-                <a data-text="Month" href="<%= list_path %>/top/month" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? ' aria-current="page"'.html_safe : "" %>><%= t("core.month") %></a>
+                <a data-text="Month" href="<%= list_path %>/top/month" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.month") %></a>
               </li>
               <li>
-                <a data-text="Year" href="<%= list_path %>/top/year" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? ' aria-current="page"'.html_safe : "" %>><%= t("core.year") %></a>
+                <a data-text="Year" href="<%= list_path %>/top/year" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.year") %></a>
               </li>
               <li>
-                <a data-text="Infinity" href="<%= list_path %>/top/infinity" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>><%= t("core.infinity") %></a>
+                <a data-text="Infinity" href="<%= list_path %>/top/infinity" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>
+                  <%= t("views.stories.sort.infinity") %>
+                </a>
               </li>
             </ul>
           <% end %>
@@ -84,7 +86,7 @@
 
       <div id="followed-podcasts" data-episodes="<%= @podcast_episodes.to_json(include: { podcast: { only: %i[slug title id], methods: %i[image_90] } }) %>"></div>
       <div class="loading-articles" id="loading-articles">
-        loading...
+        <%= t("core.loading") %>
       </div>
     </main>
 

app/views/layouts/_footer.html.erb

@@ -1,11 +1,17 @@
 <footer class="crayons-footer print-hidden">
   <div id="footer-container" class="crayons-layout crayons-layout--limited-m crayons-footer__container">
-    <p class="fs-s crayons-footer__description"><a href="/" aria-label="<%= community_name %> Home" class="crayons-link"><%= community_name %></a> – <%= Settings::Community.community_description %></p>
+    <p class="fs-s crayons-footer__description"><a href="/" aria-label="<%= t("views.main.aria_home", community: community_name) %>" class="crayons-link"><%= t("views.main.footer.desc", community: community_name, desc: Settings::Community.community_description) %></p>
     <div class="m:-mb-4 crayons-footer__description">
       <%# The following copy is necessary for compatibility with the Forem AGPL licence which requires instances to link back to the source. %>
-      <p class="fs-s">Built on <a href="https://www.forem.com" class="crayons-link" target="_blank" rel="noopener">Forem</a> — the <a href="https://dev.to/t/opensource" target="_blank" rel="noopener" class="crayons-link">open source</a> software that powers <a href="https://dev.to" target="_blank" rel="noopener" class="crayons-link">DEV</a> and other inclusive communities.</p>
-      <p class="fs-s">Made with love and <a href="https://dev.to/t/rails" target="_blank" rel="noopener" class="crayons-link">Ruby on Rails</a>. <%= community_name %> <span title="copyright">&copy;</span> <%= copyright_notice %>.</p>
-      <div><a href="https://www.forem.com" target="_blank" rel="noopener" class="inline-block mt-4"><%= inline_svg_tag("logo-forem.svg", aria: true, class: "crayons-icon crayons-icon--default", title: "Forem logo") %></a></div>
+      <p class="fs-s"><%= t("views.main.footer.built.text_html",
+                            forem: link_to(t("views.main.footer.built.forem"), "https://www.forem.com", class: "crayons-link", target: "_blank", rel: "noopener"),
+                            opensource: link_to(t("views.main.footer.built.opensource"), "https://dev.to/t/opensource", target: "_blank", rel: "noopener", class: "crayons-link"),
+                            dev: link_to(t("views.main.footer.built.dev"), "https://dev.to", target: "_blank", rel: "noopener", class: "crayons-link")) %></p>
+      <p class="fs-s"><%= t("views.main.footer.powered.text_html",
+                            rails: link_to(t("views.main.footer.powered.rails"), "https://dev.to/t/rails", target: "_blank", rel: "noopener", class: "crayons-link"),
+                            community: community_name,
+                            copyright: copyright_notice) %></p>
+      <div><a href="https://www.forem.com" target="_blank" rel="noopener" class="inline-block mt-4"><%= inline_svg_tag("logo-forem.svg", aria: true, class: "crayons-icon crayons-icon--default", title: t("views.main.footer.logo")) %></a></div>
     </div>
   </div>
 </footer>

app/views/layouts/_logo.html.erb

@@ -1,4 +1,4 @@
-<a href="/" class="site-logo" aria-label="<%= community_name %> Home">
+<a href="/" class="site-logo" aria-label="<%= t("views.main.aria_home") %>">
   <% if Settings::General.logo_svg.present? %>
     <%= logo_svg %>
   <% else %>

app/views/layouts/_main_nav.html.erb

@@ -6,14 +6,14 @@
     <li>
       <a href="<%= root_path %>" class="crayons-link crayons-link--block">
         <%= inline_svg_tag("twemoji/house.svg", class: "crayons-icon crayons-icon--default", aria_hidden: true) %>
-        <%= t("core.home") %>
+        <%= t("views.main.home") %>
       </a>
     </li>
     <li>
       <% unless user_signed_in? %>
         <a href="<%= sign_up_path %>" class="crayons-link crayons-link--block fw-bold">
           <%= inline_svg_tag("twemoji/handshake.svg", class: "crayons-icon crayons-icon--default", aria_hidden: true) %>
-          Sign In/Up
+          <%= t("views.main.signup") %>
         </a>
       <% end %>
     </li>
@@ -26,7 +26,7 @@
 <% if other_nav_links.any? %>
   <nav class="mb-6 <%= "mt-4" if user_signed_in? %>" aria-labelledby="other-nav-heading">
     <h2 id="other-nav-heading" class="mt-6 mb-2 fs-base">
-      Other
+      <%= t("views.main.nav.other") %>
     </h2>
     <ul class="other-navigation-links sidebar-navigation-links spec-sidebar-navigation-links">
       <% other_nav_links.each do |link| %>

app/views/layouts/_nav_menu.html.erb

@@ -3,25 +3,25 @@
     <li id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 pb-2 mb-2">
       <a id="first-nav-link" class="crayons-link crayons-link--block">
         <div>
-          <span class="fw-medium block">...</span>
+          <span class="fw-medium block"><%= t("views.main.nav.placeholder") %></span>
           <small class="fs-s color-base-50"></small>
         </div>
       </a>
     </li>
 
     <li class="js-header-menu-admin-link hidden">
-      <a href="<%= admin_path %>" class="crayons-link crayons-link--block" data-no-instant>Admin</a>
+      <a href="<%= admin_path %>" class="crayons-link crayons-link--block" data-no-instant><%= t("views.main.nav.admin") %></a>
     </li>
-    <li><a href="<%= dashboard_path %>" class="crayons-link crayons-link--block"><%= t("core.dashboard") %></a></li>
-    <li><a href="<%= mod_path %>" class="crayons-link crayons-link--block trusted-visible-block"><%= t("core.moderator_center") %></a></li>
-    <li><a href="<%= new_path %>" class="crayons-link crayons-link--block"><%= t("core.create_post") %></a></li>
-    <li><a href="<%= readinglist_path %>" class="crayons-link crayons-link--block"><%= t("core.reading_list") %></a></li>
+    <li><a href="<%= dashboard_path %>" class="crayons-link crayons-link--block"><%= t("views.main.nav.dashboard") %></a></li>
+    <li><a href="<%= mod_path %>" class="crayons-link crayons-link--block trusted-visible-block"><%= t("views.main.nav.moderator_center") %></a></li>
+    <li><a href="<%= new_path %>" class="crayons-link crayons-link--block"><%= t("views.main.create_post") %></a></li>
+    <li><a href="<%= readinglist_path %>" class="crayons-link crayons-link--block"><%= t("views.main.nav.list") %></a></li>
     <li class="border-0 border-b-1 border-solid border-base-20 pb-2">
-      <a href="<%= user_settings_path %>" class="crayons-link crayons-link--block" id="second-last-nav-link"><%= t("core.settings") %></a>
+      <a href="<%= user_settings_path %>" class="crayons-link crayons-link--block" id="second-last-nav-link"><%= t("views.main.nav.settings") %></a>
     </li>
 
     <li class="pt-2">
-      <a href="<%= signout_confirm_path %>" class="crayons-link crayons-link--block" id="last-nav-link"><%= t("core.sign_out") %></a>
+      <a href="<%= signout_confirm_path %>" class="crayons-link crayons-link--block" id="last-nav-link"><%= t("views.main.signout") %></a>
     </li>
   </ul>
 </div>

app/views/layouts/_sidebar_nav_link.html.erb

@@ -4,7 +4,7 @@
       <span class="crayons-icon crayons-icon--default">
         <%= link.icon.html_safe %>
       </span>
-      <%= link.name %>
+      <%= t("views.main.nav_name.#{link.name}", default: link.name) %>
       <% if link.url.include?("readinglist") %>
         <span id="reading-list-count" class="crayons-indicator"></span>
       <% end %>

app/views/layouts/_sidebar_tags.html.erb

@@ -1,14 +1,14 @@
 <nav class="mb-6" aria-label="Secondary sidebar nav">
   <% if user_signed_in? %>
     <header class="p-2 pr-0 flex items-center justify-between">
-      <h3 class="crayons-subtitle-3"><%= t("core.my_tags") %></h3>
-      <a id="tag-priority-link" href="/dashboard/following_tags" class="crayons-btn crayons-btn--icon crayons-btn--ghost-dimmed" aria-label="Customize tag priority" title="Customize tag priority">
+      <h3 class="crayons-subtitle-3"><%= t("views.main.tags.my_tags") %></h3>
+      <a id="tag-priority-link" href="/dashboard/following_tags" class="crayons-btn crayons-btn--icon crayons-btn--ghost-dimmed" aria-label="<%= t("views.main.tags.aria_label") %>" title="<%= t("views.main.tags.aria_label") %>">
         <%= inline_svg_tag("cog.svg", class: "crayons-icon") %>
       </a>
     </header>
     <div id="sidebar-nav-followed-tags" class="overflow-y-auto mb-2 sidebar-nav-followed-tags" style="max-height: 42vh;"></div>
   <% else %>
-    <h3 class="crayons-subtitle-3 p-2"><%= t("core.popular_tags") %></h3>
+    <h3 class="crayons-subtitle-3 p-2"><%= t("views.main.tags.popular_tags") %></h3>
     <div id="sidebar-nav-default-tags" class="overflow-y-auto" style="max-height: 42vh">
       <% Tag.supported.order(hotness_score: :desc).limit(30).pluck(:id, :name).each do |tag_array| %>
         <div class="sidebar-nav-element" id="default-sidebar-element-<%= tag_array.second %>">
@@ -18,7 +18,7 @@
           <a class="follow-action-button sidebar-nav-link-follow crayons-btn crayons-btn--s"
             href="#" id="sidebar-nav-link-follow-<%= tag_array.second %>"
             data-info='{"id":<%= tag_array.first %>,"className":"Tag", "name": "<%= tag_array.second %>"}'>
-            <%= t("core.follow") %>
+            <%= t("views.main.tags.follow") %>
           </a>
         </div>
       <% end %>

app/views/layouts/_signup_modal.html.erb

@@ -12,11 +12,11 @@
       </p>
     </div>
     <div class="authentication-modal__actions">
-      <a href="<%= sign_up_path %>" class="crayons-btn" aria-label="Log in" data-no-instant>
-        <%= t("core.log_in") %>
+      <a href="<%= sign_up_path %>" class="crayons-btn" aria-label="<%= t("views.main.modal.login.aria_label") %>" data-no-instant>
+        <%= t("views.main.modal.login.text") %>
       </a>
-      <a href="<%= sign_up_path(state: "new-user") %>" class="crayons-btn crayons-btn--ghost-brand" aria-label="Create new account" data-no-instant>
-        <%= t("core.create_account") %>
+      <a href="<%= sign_up_path(state: "new-user") %>" class="crayons-btn crayons-btn--ghost-brand" aria-label="<%= t("views.main.modal.create_account.aria_label") %>" data-no-instant>
+        <%= t("views.main.modal.create_account.text") %>
       </a>
     </div>
   </div>

app/views/layouts/_top_bar.html.erb

@@ -1,21 +1,21 @@
 <div class="navigation-progress" id="navigation-progress"></div>
 <header class="crayons-header print-hidden">
-  <a href="#main-content" class="skip-content-link">Skip to content</a>
+  <a href="#main-content" class="skip-content-link"><%= t("views.main.header.skip") %></a>
   <div class="crayons-header__container">
     <button class="crayons-btn crayons-btn--ghost crayons-btn--icon-rounded js-hamburger-trigger inline-block m:hidden mx-2">
-      <%= inline_svg_tag("hamburger.svg", aria: true, class: "crayons-icon", title: "Navigation menu") %>
+      <%= inline_svg_tag("hamburger.svg", aria: true, class: "crayons-icon", title: t("views.hamburger.icon")) %>
     </button>
     <%= render "layouts/logo" %>
 
     <div id="pwa-nav-buttons" class="pwa-nav-buttons">
       <button type="button" id="app-back-button">
-        <%= inline_svg_tag("keyboard-left-arrow-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: "Back") %>
+        <%= inline_svg_tag("keyboard-left-arrow-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: t("views.hamburger.back")) %>
       </button>
       <button type="button" id="app-forward-button">
-        <%= inline_svg_tag("keyboard-right-arrow-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: "Forward") %>
+        <%= inline_svg_tag("keyboard-right-arrow-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: t("views.hamburger.forward")) %>
       </button>
       <button type="button" id="app-refresh-button">
-        <%= inline_svg_tag("refresh-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: "Refresh") %>
+        <%= inline_svg_tag("refresh-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: t("views.hamburger.refresh")) %>
       </button>
     </div>
 
@@ -23,9 +23,9 @@
       <form accept-charset="UTF-8" method="get" action="<%= search_path %>" role="search">
         <div class="crayons-fields crayons-fields--horizontal">
           <div class="crayons-field flex-1 relative">
-            <input class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="<%= t("core.search") %>..." autocomplete="off" />
-            <button type="submit" aria-label="Search" class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-rounded absolute right-2 bottom-0 top-0 m-1">
-              <%= inline_svg_tag("search.svg", aria_hidden: true, width: 24, height: 24, class: "crayons-icon", title: "Search") %>
+            <input class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="<%= t("views.search.placeholder") %>" autocomplete="off" />
+            <button type="submit" aria-label="<%= t("views.search.icon.aria_label") %>" class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-rounded absolute right-2 bottom-0 top-0 m-1">
+              <%= inline_svg_tag("search.svg", aria_hidden: true, width: 24, height: 24, class: "crayons-icon", title: t("views.search.icon.title")) %>
             </button>
           </div>
         </div>
@@ -33,43 +33,43 @@
     </div>
 
     <div class="flex items-center h-100 ml-auto">
-      <a class="crayons-header__link crayons-btn crayons-btn--ghost crayons-btn--icon-rounded m:hidden <% unless user_signed_in? %>mx-2<% end %>" id="search-link" aria-label="Search" href="<%= search_path %>">
-        <%= inline_svg_tag("search.svg", aria: true, class: "crayons-icon", title: "Search") %>
+      <a class="crayons-header__link crayons-btn crayons-btn--ghost crayons-btn--icon-rounded m:hidden <% unless user_signed_in? %>mx-2<% end %>" id="search-link" aria-label="<%= t("views.search.icon.aria_label") %>" href="<%= search_path %>">
+        <%= inline_svg_tag("search.svg", aria: true, class: "crayons-icon", title: t("views.search.icon.title")) %>
       </a>
       <% if user_signed_in? %>
-        <a href="<%= new_path %>" class="crayons-btn hidden mr-2 whitespace-nowrap m:block ml-auto"><%= t("core.create_post") %></a>
+        <a href="<%= new_path %>" class="crayons-btn hidden mr-2 whitespace-nowrap m:block ml-auto"><%= t("views.main.create_post") %></a>
 
         <span class="trusted-visible-block">
-          <a id="moderation-link" class="crayons-header__link crayons-btn crayons-btn--ghost crayons-btn--icon-rounded m:flex hidden" aria-label="Moderation" href="<%= mod_path %>">
-            <%= inline_svg_tag("mod.svg", aria: true, class: "crayons-icon", title: "Moderation") %>
+          <a id="moderation-link" class="crayons-header__link crayons-btn crayons-btn--ghost crayons-btn--icon-rounded m:flex hidden" aria-label="<%= t("views.main.header.moderation.aria_label") %>" href="<%= mod_path %>">
+            <%= inline_svg_tag("mod.svg", aria: true, class: "crayons-icon", title: t("views.main.header.moderation.icon")) %>
           </a>
         </span>
 
         <% if FeatureFlag.enabled?(:connect) %>
-          <a href="<%= connect_path %>" id="connect-link" class="crayons-header__link crayons-btn crayons-btn--ghost crayons-btn--icon-rounded" aria-label="Connect">
-            <%= inline_svg_tag("connect.svg", aria: true, class: "crayons-icon", title: "Connect") %>
+          <a href="<%= connect_path %>" id="connect-link" class="crayons-header__link crayons-btn crayons-btn--ghost crayons-btn--icon-rounded" aria-label="<%= t("views.main.header.connect.aria_label") %>">
+            <%= inline_svg_tag("connect.svg", aria: true, class: "crayons-icon", title: t("views.main.header.connect.icon")) %>
             <span class="crayons-indicator crayons-indicator--accent hidden" id="connect-number"></span>
           </a>
         <% end %>
 
-        <a href="<%= notifications_path %>" id="notifications-link" class="crayons-header__link crayons-btn crayons-btn--ghost crayons-btn--icon-rounded" aria-label="Notifications">
-          <%= inline_svg_tag("bell.svg", aria: true, class: "crayons-icon", title: "Notifications") %>
+        <a href="<%= notifications_path %>" id="notifications-link" class="crayons-header__link crayons-btn crayons-btn--ghost crayons-btn--icon-rounded" aria-label="<%= t("views.main.header.notifications.aria_label") %>">
+          <%= inline_svg_tag("bell.svg", aria: true, class: "crayons-icon", title: t("views.main.header.notifications.icon")) %>
           <span class="crayons-indicator crayons-indicator--critical hidden" id="notifications-number"></span>
         </a>
 
         <div class="crayons-header__menu" id="crayons-header__menu">
-          <button type="button" class="crayons-header__menu__trigger" id="member-menu-button" aria-label="Navigation menu" aria-expanded="false">
+          <button type="button" class="crayons-header__menu__trigger" id="member-menu-button" aria-label="<%= t("views.main.header.nav.aria_label") %>" aria-expanded="false">
             <span class="crayons-avatar crayons-avatar--l"><img class="crayons-avatar__image" alt="" id="nav-profile-image" /></span>
           </button>
           <%= render "layouts/nav_menu" %>
         </div>
       <% else %>
         <a href="<%= sign_up_path %>" class="crayons-btn crayons-btn--ghost-brand mr-2 hidden m:block whitespace-nowrap ml-auto" data-no-instant>
-          <%= t("core.log_in") %>
+          <%= t("views.main.header.login") %>
         </a>
 
         <a href="<%= sign_up_path(state: "new-user") %>" class="crayons-btn mr-2 whitespace-nowrap fs-s s:fs-base" data-no-instant>
-          <%= t("core.create_account") %>
+          <%= t("views.main.header.create_account") %>
         </a>
       <% end %>
     </div>

app/views/shared/_hamburger.html.erb

@@ -4,7 +4,7 @@
       <h2 class="fs-l fw-bold flex-1 break-word lh-tight"><%= community_name.to_s %></h2>
 
       <button class="crayons-btn crayons-btn--ghost crayons-btn--icon-rounded js-hamburger-trigger shrink-0">
-        <%= inline_svg_tag("x.svg", aria: true, class: "crayons-icon", title: "Close") %>
+        <%= inline_svg_tag("x.svg", aria: true, class: "crayons-icon", title: t("views.hamburger.icon_close")) %>
       </button>
     </header>
 

app/views/sidebars/_homepage_content.html.erb

@@ -12,9 +12,9 @@
     <% if params[:timeframe].blank? && @listings.any? %>
       <section class="crayons-card crayons-card--secondary">
         <header class="crayons-card__header">
-          <h3 class="crayons-subtitle-2"><%= t("core.listings") %></h3>
+          <h3 class="crayons-subtitle-2"><%= t("views.main.side.listings.heading") %></h3>
           <div class="crayons-card__actions">
-            <a href="/listings" class="crayons-link--branded fw-medium fs-s"><%= t("core.see_all") %></a>
+            <a href="/listings" class="crayons-link--branded fw-medium fs-s"><%= t("views.main.side.listings.all") %></a>
           </div>
         </header>
 
@@ -25,7 +25,7 @@
               <div class="crayons-link__secondary"><%= listing.category %></div>
             </a>
           <% end %>
-          <a class="crayons-link crayons-link--branded block align-center p-3 fw-medium fs-s w-100" href="/listings/new">Create a Listing</a>
+          <a class="crayons-link crayons-link--branded block align-center p-3 fw-medium fs-s w-100" href="/listings/new"><%= t("views.main.side.listings.new") %></a>
         </div>
       </section>
     <% end %>
@@ -56,7 +56,7 @@
       <% if boostable_posts.present? %>
         <section class="widget">
           <header>
-            <h4>trending guides/resources</h4>
+            <h4><%= t("views.main.side.trend") %></h4>
           </header>
           <div class="widget-body">
             <div class="widget-link-list">
@@ -71,7 +71,7 @@
       <% if params[:timeframe].blank? && recent_preamble_optimized_posts.present? %>
         <section class="widget">
           <header>
-            <h4>recently queried</h4>
+            <h4><%= t("views.main.side.recent") %></h4>
           </header>
           <div class="widget-body">
             <div class="widget-link-list">

app/views/stories/articles_search/_meta.html.erb

@@ -1,17 +1,17 @@
-<% title "Search Results" %>
+<% title t("views.search.meta.title") %>
 <link rel="canonical" href="<%= app_url(search_path) %>" />
 <meta name="description" content="<%= Settings::Community.community_description %>">
 <%= meta_keywords_default %>
 
 <meta property="og:type" content="website" />
-<meta property="og:url" content="<%= community_name %> => Search Results" />
-<meta property="og:title" content="<%= community_name %>" />
+<meta property="og:url" content="<%= app_url(request.path) %>" />
+<meta property="og:title" content="<%= t("views.search.meta.description", site: community_name) %>" />
 <meta property="og:image" content="<%= Settings::General.main_social_image %>">
 <meta property="og:description" content="<%= Settings::Community.community_description %>">
 <meta property="og:site_name" content="<%= community_name %>" />
 
 <meta name="twitter:site" content="@<%= Settings::General.social_media_handles["twitter"] %>">
-<meta name="twitter:title" content="<%= community_name %> => Search Results">
+<meta name="twitter:title" content="<%= t("views.search.meta.description", site: community_name) %>">
 <meta name="twitter:description" content="<%= Settings::Community.community_description %>">
 <meta name="twitter:image:src" content="<%= Settings::General.main_social_image %>">
 <meta name="twitter:card" content="summary_large_image">

app/views/stories/articles_search/_nav_menu.html.erb

@@ -1,17 +1,17 @@
 <ul class="crayons-navigation">
   <li><a class="query-filter-button crayons-navigation__item" data-filter="class_name:Article" href="javascript:;">
-    Posts
+    <%= t("views.search.nav.posts") %>
   </a></li>
   <li><a class="query-filter-button crayons-navigation__item" data-filter="class_name:PodcastEpisode" href="javascript:;">
-    Podcasts
+    <%= t("views.search.nav.podcasts") %>
   </a></li>
   <li><a class="query-filter-button crayons-navigation__item" data-filter="class_name:User" href="javascript:;">
-    People
+    <%= t("views.search.nav.people") %>
   </a></li>
   <li><a class="query-filter-button crayons-navigation__item" data-filter="class_name:Comment" href="javascript:;">
-    Comments
+    <%= t("views.search.nav.comments") %>
   </a></li>
   <li><a class="query-filter-button my-posts-query-button crayons-navigation__item" data-filter="MY_POSTS" href="javascript:;">
-    My posts only
+    <%= t("views.search.nav.my_posts") %>
   </a></li>
 </ul>

app/views/stories/articles_search/index.html.erb

@@ -15,9 +15,9 @@
         <form accept-charset="UTF-8" method="get" action="/search" role="search">
           <div class="crayons-fields crayons-fields--horizontal">
             <div class="crayons-field flex-1 relative">
-              <input class="crayons-textfield" type="text" name="q" placeholder="Search..." autocomplete="on" />
+              <input class="crayons-textfield" type="text" name="q" placeholder="<%= t("views.search.placeholder") %>" autocomplete="on" />
               <button type="submit" aria-label="Search" class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-rounded absolute right-2 bottom-0 top-0 m-1">
-                <%= inline_svg_tag("search.svg", aria_hidden: true, width: 24, height: 24, class: "crayons-icon", title: "Search") %>
+                <%= inline_svg_tag("search.svg", aria_hidden: true, width: 24, height: 24, class: "crayons-icon", title: t("views.search.icon.title")) %>
               </button>
             </div>
           </div>
@@ -25,19 +25,19 @@
       </div>
 
       <h1 class="crayons-title hidden s:block">
-        Search results <%= "for #{params[:q]}" if params[:q].present? %>
+        <%= t("views.search.heading", for: (params[:q].present? ? t("views.search.for", query: params[:q]) : "")) %>
       </h1>
 
-      <nav id="sorting-option-tabs" aria-label="Search result sort options" class="-mx-3 m:mx-0">
+      <nav id="sorting-option-tabs" aria-label="<%= t("views.search.sort.aria_label") %>" class="-mx-3 m:mx-0">
         <ul class="crayons-navigation crayons-navigation--horizontal">
           <li>
-            <a data-text="Most Relevant" href="javascript:;" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @current_ordering == :relevance %>" aria-current="page">Most Relevant</a>
+            <a data-text="<%= t("views.search.sort.relevance") %>" href="javascript:;" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @current_ordering == :relevance %>" aria-current="page"><%= t("views.search.sort.relevance") %></a>
           </li>
           <li>
-            <a data-text="Newest" href="javascript:;" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @current_ordering == :newest %>" data-sort-by="published_at" data-sort-direction="desc">Newest</a>
+            <a data-text="<%= t("views.search.sort.newest") %>" href="javascript:;" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @current_ordering == :newest %>" data-sort-by="published_at" data-sort-direction="desc"><%= t("views.search.sort.newest") %></a>
           </li>
           <li>
-            <a data-text="Oldest" href="javascript:;" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @current_ordering == :oldest %>" data-sort-by="published_at" data-sort-direction="asc">Oldest</a>
+            <a data-text="<%= t("views.search.sort.oldest") %>" href="javascript:;" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @current_ordering == :oldest %>" data-sort-by="published_at" data-sort-direction="asc"><%= t("views.search.sort.oldest") %></a>
           </li>
         </ul>
       </nav>
@@ -59,7 +59,7 @@
         </div>
       </div>
       <div class="loading-articles" id="loading-articles">
-        loading...
+        <%= t("core.loading") %>
       </div>
     </div>
   </div>

app/views/stories/tagged_articles/_meta.html.erb

@@ -1,23 +1,23 @@
 <% title_with_timeframe(
-     page_title: @tag.capitalize + (@page.present? && @page > 1 ? " Page #{@page}" : ""),
+     page_title: @tag.capitalize + (@page.present? && @page > 1 ? t("views.stories.meta.page", page: @page) : ""),
      timeframe: params[:timeframe],
      content_for: true,
    ) %>
 
 <link rel="canonical" href="<%= tag_url(@tag_model, @page) %>" />
-<meta name="description" content="<%= @tag %> content on <%= community_name %>">
+<meta name="description" content="<%= t("views.stories.meta.description_tagged", tag: @tag, name: community_name) %>">
 <%= meta_keywords_tag(@tag) %>
 
 <meta property="og:type" content="website" />
 <meta property="og:url" content="<%= tag_url(@tag_model, @page) %>" />
 <meta property="og:title" content="<%= title_with_timeframe(page_title: @tag.capitalize, timeframe: params[:timeframe]) %>" />
-<meta property="og:description" content="<%= @tag.capitalize %> content on <%= community_name %>" />
+<meta property="og:description" content="<%= t("views.stories.meta.description_tagged", tag: @tag.capitalize, name: community_name) %>" />
 <meta property="og:site_name" content="<%= community_name %>" />
 
 <meta name="twitter:site" content="@<%= Settings::General.social_media_handles["twitter"] %>">
 <meta name="twitter:creator" content="@<%= @tag.capitalize %>">
 <meta name="twitter:title" content="<%= title_with_timeframe(page_title: @tag.capitalize, timeframe: params[:timeframe]) %>">
-<meta name="twitter:description" content="<%= @tag.capitalize %> content on <%= community_name %>">
+<meta name="twitter:description" content="<%= t("views.stories.meta.description_tagged", tag: @tag.capitalize, name: community_name) %>">
 
 <% if @tag_model %>
   <meta name="twitter:card" content="summary_large_image">

app/views/stories/tagged_articles/_sidebar_additional.html.erb

@@ -6,7 +6,7 @@
       <% if active_threads.present? %>
         <div class="widget">
           <header>
-            <h4>#discuss</h4>
+            <h4><%= t("views.stories.discuss") %></h4>
           </header>
           <div class="widget-body">
             <div class="widget-link-list">
@@ -25,7 +25,7 @@
           <% if boostable_posts.present? %>
             <div class="widget">
               <header>
-                <h4>trending guides/resources</h4>
+                <h4><%= t("views.main.side.trend") %></h4>
               </header>
               <div class="widget-body">
                 <div class="widget-link-list">
@@ -38,7 +38,7 @@
           <% if params[:timeframe].blank? && recent_preamble_optimized_posts.present? %>
             <div class="widget">
               <header>
-                <h4>recently queried</h4>
+                <h4><%= t("views.main.side.recent") %></h4>
               </header>
               <div class="widget-body">
                 <div class="widget-link-list">

app/views/stories/tagged_articles/index.html.erb

@@ -25,7 +25,7 @@
                 id="user-follow-butt"
                 class="crayons-btn follow-action-button"
                 data-info='{"id":<%= @tag_model.id %>,"className":"Tag", "name": "<%= @tag_model.pretty_name || @tag %>"}'>
-                <%= t("core.follow") %>
+                <%= t("views.stories.follow") %>
               </button>
             <% end %>
           </div>
@@ -50,56 +50,56 @@
     <%= render "stories/tagged_articles/sidebar" %>
     <main class="articles-list" id="main-content" data-follow-button-container="true">
       <header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls">
-        <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden" id="on-page-nav-butt-left" aria-label="nav-button-left">
+        <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden" id="on-page-nav-butt-left" aria-label="<%= t("views.stories.menu.aria_left") %>">
           <div class="crayons-icon nav-icon ">
-            <%= inline_svg_tag("hamburger.svg", aria: true, title: "Left menu") %>
+            <%= inline_svg_tag("hamburger.svg", aria: true, title: t("views.hamburger.icon_left")) %>
           </div>
         </button>
         <% if user_signed_in? %>
           <div class="flex-1 flex items-center justify-between">
-            <h2 class="crayons-subtitle-2">Posts</h2>
-            <nav class="crayons-tabs hidden s:flex" aria-label="View tagged posts by">
+            <h2 class="crayons-subtitle-2"><%= t("views.stories.heading") %></h2>
+            <nav class="crayons-tabs hidden s:flex" aria-label="<%= t("views.stories.sort.aria_tagged") %>">
               <ul class="crayons-tabs__list">
                 <li>
-                  <a data-text="Feed" href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"<%= %w[week month year infinity
-                                                                                                                                                                                                         latest].exclude?(params[:timeframe]) ? ' aria-current="page"'.html_safe : "" %>>Feed</a>
+                  <a data-text="Feed" href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"
+                  <%= %w[week month year infinity latest].exclude?(params[:timeframe]) ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.feed") %></a>
                 </li>
                 <li>
-                  <a data-text="Week" href="<%= list_path %>/top/week" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? ' aria-current="page"'.html_safe : "" %>>Week</a>
+                  <a data-text="Week" href="<%= list_path %>/top/week" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.week") %></a>
                 </li>
                 <li>
-                  <a data-text="Month" href="<%= list_path %>/top/month" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? ' aria-current="page"'.html_safe : "" %>>Month</a>
+                  <a data-text="Month" href="<%= list_path %>/top/month" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.month") %></a>
                 </li>
                 <li>
-                  <a data-text="Year" href="<%= list_path %>/top/year" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? ' aria-current="page"'.html_safe : "" %>>Year</a>
+                  <a data-text="Year" href="<%= list_path %>/top/year" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.year") %></a>
                 </li>
                 <li>
-                  <a data-text="Infinity" href="<%= list_path %>/top/infinity" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>Infinity</a>
+                  <a data-text="Infinity" href="<%= list_path %>/top/infinity" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.infinity") %></a>
                 </li>
                 <li>
-                  <a data-text="Latest" href="<%= list_path %>/latest" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? ' aria-current="page"'.html_safe : "" %>>Latest</a>
+                  <a data-text="Latest" href="<%= list_path %>/latest" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.latest") %></a>
                 </li>
               </ul>
             </nav>
 
             <select class="crayons-select s:hidden ml-2 s:ml-auto w-auto" id="feed-filter-select" aria-label="feed-filter-select">
-              <option value="<%= list_path %>/" <% if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %> selected<% end %>>Feed</option>
-              <option value="<%= list_path %>/top/week" <% if timeframe_check("week") %> selected<% end %>>Week</option>
-              <option value="<%= list_path %>/top/month" <% if timeframe_check("month") %> selected<% end %>>Month</option>
-              <option value="<%= list_path %>/top/year" <% if timeframe_check("year") %> selected<% end %>>Year</option>
-              <option value="<%= list_path %>/top/infinity" <% if timeframe_check("infinity") %> selected<% end %>>Infinity</option>
-              <option value="<%= list_path %>/latest" <% if timeframe_check("latest") %> selected<% end %>>Latest</option>
+              <option value="<%= list_path %>/" <% if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %> selected<% end %>><%= t("views.stories.sort.feed") %></option>
+              <option value="<%= list_path %>/top/week" <% if timeframe_check("week") %> selected<% end %>><%= t("views.stories.sort.week") %></option>
+              <option value="<%= list_path %>/top/month" <% if timeframe_check("month") %> selected<% end %>><%= t("views.stories.sort.month") %></option>
+              <option value="<%= list_path %>/top/year" <% if timeframe_check("year") %> selected<% end %>><%= t("views.stories.sort.year") %></option>
+              <option value="<%= list_path %>/top/infinity" <% if timeframe_check("infinity") %> selected<% end %>><%= t("views.stories.sort.infinity") %></option>
+              <option value="<%= list_path %>/latest" <% if timeframe_check("latest") %> selected<% end %>><%= t("views.stories.sort.latest") %></option>
             </select>
           </div>
         <% else %>
           <div class="flex-1 flex items-center justify-between">
-            <div class="crayons-notice w-100" aria-live="polite">👋 <a href="<%= sign_up_path %>">Sign in</a> for the ability sort posts by <strong>top</strong> and  <strong>latest</strong>.</div>
+            <div class="crayons-notice w-100" aria-live="polite"><%= t("views.stories.sort.signin_html", path: sign_up_path) %></div>
           </div>
         <% end %>
 
-        <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden" id="on-page-nav-butt-right" aria-label="nav-button-right">
+        <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden" id="on-page-nav-butt-right" aria-label="<%= t("views.stories.menu.aria_right") %>">
           <div class="crayons-icon nav-icon ">
-            <%= inline_svg_tag("hamburger.svg", aria: true, title: "Right menu") %>
+            <%= inline_svg_tag("hamburger.svg", aria: true, title: t("views.hamburger.icon_right")) %>
           </div>
         </button>
       </header>
@@ -112,7 +112,7 @@
         <% end %>
       </div>
       <div class="loading-articles" id="loading-articles">
-        loading...
+        <%= t("core.loading") %>
       </div>
     </main>
     <%= render "stories/tagged_articles/sidebar_additional" %>

app/views/users/_meta.html.erb

@@ -15,5 +15,5 @@
 <meta name="twitter:description" content="<%= @user.tag_line %>">
 <meta name="twitter:image:src" content="<%= user_social_image_url(@user) %>">
 <% if @stories.any? %>
-  <%= auto_discovery_link_tag(:rss, app_url("/feed/#{@user.username}"), title: "#{community_name} RSS Feed") %>
+  <%= auto_discovery_link_tag(:rss, app_url("/feed/#{@user.username}"), title: t("views.stories.meta.rss", name: community_name)) %>
 <% end %>

config/locales/en.yml

@@ -12,31 +12,22 @@ en:
     community_name_is_great: "%{community_name} is great!"
     copy_link: Copy link
     create_account: Create account
-    create_post: Create Post
     dashboard: Dashboard
     edit_profile: Edit profile
-    feed: Feed
     follow: Follow
     follow_back: Follow back
     follower: Follower
     followers: Followers
     following: Following
-    home: Home
-    infinity: Infinity
     joined: Joined
     joined_on: Joined on
-    latest: Latest
     like: Like
     listings: Listings
     loading: loading...
     location: Location
     log_in: Log in
-    moderator_center: Moderator Center
-    month: Month
     more_from: More from
-    my_tags: My Tags
     pinned: Pinned
-    popular_tags: Popular Tags
     post: Post
     posts: Posts
     reaction: Reaction
@@ -47,17 +38,12 @@ en:
       heart: Heart
       save: Save
       unicorn: Unicorn
-    reading_list: Reading list
     reply: Reply
     report_abuse: Report abuse
     search: Search
-    see_all: See all
     series: Series
     settings: Settings
-    sign_out: Sign Out
     trending_on: Trending on
-    week: Week
-    year: Year
   dashboard:
     empty_follower: You don't have any followers yet...
     empty_post: This is where you can manage your posts, but you haven't written anything yet.

config/locales/fr.yml

@@ -12,31 +12,22 @@ fr:
     community_name_is_great: "%{community_name} est super"
     copy_link: Copier le lien
     create_account: Créer un profil
-    create_post: Créer une publication
     dashboard: Tableau de bord
     edit_profile: Editer le profil
-    feed: Fil
     follow: Suivre
     follow_back: Suivre aussi
     follower: Suiveur
     followers: Suiveurs
     following: Abonné
-    home: Page D'Accueil
-    infinity: Infini
     joined: Rejoint
     joined_on: Rejoint le
-    latest: Récent
     like: Aime
     listings: Annonces
     loading: Chargement en cours...
     location: Lieu
     log_in: Se connecter
-    moderator_center: Centre de modération
-    month: Mois
     more_from: Plus de la part de
-    my_tags: Mes sujets
     pinned: Épinglé
-    popular_tags: Sujets populaires
     post: Publication
     posts: Publications
     reaction: Réaction
@@ -47,17 +38,12 @@ fr:
       heart: Coeur
       save: Sauver
       unicorn: Licorne
-    reading_list: Liste de lecture
     reply: Répondre
     report_abuse: Signaler un abus
     search: Recherche
-    see_all: Tout voir
     series: Séries
     settings: Paramètres
-    sign_out: Se déconnecter
     trending_on: Populaire sur
-    week: Semaine
-    year: Année
   dashboard:
     empty_follower: Vous n'avez pas encore d'abonnés...
     empty_post: C'est ici que vous pouvez gérer vos messages, mais vous n'avez encore rien écrit

config/locales/views/main/en.yml

@@ -0,0 +1,77 @@
+---
+en:
+  views:
+    main:
+      aria_home: "%{community} Home"
+      header:
+        create_account: Create account
+        connect:
+          aria_label: Connect
+          icon: Connect
+        login: Log in
+        nav:
+          aria_label: Navigation menu
+        moderation:
+          aria_label: Moderation
+          icon: Moderation
+        notifications:
+          aria_label: Notifications
+          icon: Notifications
+        skip: Skip to content
+      modal:
+        create_account:
+          aria_label: Create new account
+          text: Create account
+        login:
+          aria_label: Log in
+          text: Log in
+        footer: We strive for transparency and don't collect excess data.
+      nav:
+        admin: Admin
+        dashboard: Dashboard
+        placeholder: "..."
+        list: Reading list
+        moderator_center: Moderator Center
+        other: Other
+        settings: Settings
+      nav_name:
+        About: About
+        Code of Conduct: Code of Conduct
+        Contact: Contact
+        FAQ: FAQ
+        Listings: Listings
+        Podcasts: Podcasts
+        Privacy Policy: Privacy Policy
+        Reading List: Reading List
+        Sponsors: Sponsors
+        Tags: Tags
+        Terms of use: Terms of use
+        Videos: Videos
+      side:
+        listings:
+          heading: Listings
+          all: See all
+          new: Create a Listing
+        trend: trending guides/resources
+        recent: recently queried
+      tags:
+        aria_label: Customize tag priority
+        follow: Follow
+        my_tags: My Tags
+        popular_tags: Popular Tags
+      footer:
+        aria_label: Site information
+        built:
+          text_html: Built on %{forem} — the %{opensource} software that powers %{dev} and other inclusive communities.
+          forem: Forem
+          opensource: open source
+          dev: DEV
+        desc: "%{community} – %{desc}"
+        logo: Forem logo
+        powered:
+          text_html: Made with love and %{rails}. %{community} <span title="copyright">&copy;</span> %{copyright}.
+          rails: Ruby on Rails
+      home: Home
+      create_post: Create Post
+      signout: Sign Out
+      signup: Sign In/Up

config/locales/views/main/fr.yml

@@ -0,0 +1,77 @@
+---
+fr:
+  views:
+    main:
+      aria_home: "%{community} Home"
+      header:
+        create_account: Créer un profil
+        connect:
+          aria_label: Connect
+          icon: Connect
+        login: Se connecter
+        nav:
+          aria_label: Navigation menu
+        moderation:
+          aria_label: Moderation
+          icon: Moderation
+        notifications:
+          aria_label: Notifications
+          icon: Notifications
+        skip: Skip to content
+      modal:
+        create_account:
+          aria_label: Create new account
+          text: Créer un profil
+        login:
+          aria_label: Log in
+          text: Se connecter
+        footer: We strive for transparency and don't collect excess data.
+      nav:
+        admin: Admin
+        dashboard: Tableau de bord
+        placeholder: "..."
+        list: Liste de lecture
+        moderator_center: Centre de modération
+        other: Other
+        settings: Settings
+      nav_name:
+        About: About
+        Code of Conduct: Code of Conduct
+        Contact: Contact
+        FAQ: FAQ
+        Listings: Listings
+        Podcasts: Podcasts
+        Privacy Policy: Privacy Policy
+        Reading List: Reading List
+        Sponsors: Sponsors
+        Tags: Tags
+        Terms of use: Terms of use
+        Videos: Videos
+      side:
+        listings:
+          heading: Listings
+          all: Tout voir
+          new: Create a Listing
+        trend: trending guides/resources
+        recent: recently queried
+      tags:
+        aria_label: Customize tag priority
+        follow: Suivre
+        my_tags: Mes sujets
+        popular_tags: Sujets populaires
+      footer:
+        aria_label: Site information
+        built:
+          text_html: Built on %{forem} — the %{opensource} software that powers %{dev} and other inclusive communities.
+          forem: Forem
+          opensource: open source
+          dev: DEV
+        desc: "%{community} – %{desc}"
+        logo: Forem logo
+        powered:
+          text_html: Made with love and %{rails}. %{community} <span title="copyright">&copy;</span> %{copyright}.
+          rails: Ruby on Rails
+      home: Page D'Accueil
+      create_post: Créer une publication
+      signout: Se déconnecter
+      signup: Sign In/Up

config/locales/views/misc/en.yml

@@ -22,6 +22,14 @@ en:
         back: Take me back
         again: Try again
         install: Install the app
+    hamburger:
+      icon: Navigation menu
+      back: Back
+      forward: Forward
+      refresh: Refresh
+      icon_close: Close
+      icon_left: Left menu
+      icon_right: Right menu
     logo:
       color_1:
         label: Brand color 1
@@ -58,6 +66,27 @@ en:
         description: My saved posts.
         og:
           title: Reading List - %{community}
+    search:
+      heading: Search results%{for}
+      for: " for %{query}"
+      placeholder: Search...
+      icon:
+        aria_label: Search
+        title: Search
+      nav:
+        posts: Posts
+        podcasts: Podcasts
+        people: People
+        comments: Comments
+        my_posts: My posts only
+      sort:
+        aria_label: Search result sort options
+        relevance: Most Relevant
+        newest: Newest
+        oldest: Oldest
+      meta:
+        title: Search Results
+        description: "%{site} => Search Results"
     series:
       meta:
         description: View %{title} on %{site}

config/locales/views/misc/fr.yml

@@ -22,6 +22,14 @@ fr:
         back: Take me back
         again: Try again
         install: Install the app
+    hamburger:
+      icon: Navigation menu
+      back: Back
+      forward: Forward
+      refresh: Refresh
+      icon_close: Close
+      icon_left: Left menu
+      icon_right: Right menu
     logo:
       color_1:
         label: Brand color 1
@@ -58,6 +66,27 @@ fr:
         description: My saved posts.
         og:
           title: Reading List - %{community}
+    search:
+      heading: Search results%{for}
+      for: " for %{query}"
+      placeholder: Recherche...
+      icon:
+        aria_label: Search
+        title: Search
+      nav:
+        posts: Posts
+        podcasts: Podcasts
+        people: People
+        comments: Comments
+        my_posts: My posts only
+      sort:
+        aria_label: Search result sort options
+        relevance: Most Relevant
+        newest: Newest
+        oldest: Oldest
+      meta:
+        title: Search Results
+        description: "%{site} => Search Results"
     series:
       meta:
         description: View %{title} on %{site}

config/locales/views/stories/en.yml

@@ -0,0 +1,25 @@
+---
+en:
+  views:
+    stories:
+      meta:
+        description_tagged: "%{tag} content on %{name}"
+        page: " Page %{page}"
+        rss: "%{name} RSS Feed"
+      heading: Posts
+      discuss: "#discuss"
+      follow: Follow
+      menu:
+        aria_left: nav-button-left
+        aria_right: nav-button-right
+      sort:
+        aria_label: View posts by
+        aria_tagged: View tagged posts by
+        feed: Feed
+        week: Week
+        month: Month
+        year: Year
+        infinity: Infinity
+        latest: Latest
+        signin_html: "👋 <a href=\"%{path}\">Sign in</a> for the ability sort posts by <strong>top</strong> and  <strong>latest</strong>."
+        top: Top

config/locales/views/stories/fr.yml

@@ -0,0 +1,25 @@
+---
+fr:
+  views:
+    stories:
+      meta:
+        description_tagged: "%{tag} content on %{name}"
+        page: " Page %{page}"
+        rss: "%{name} RSS Feed"
+      heading: Posts
+      discuss: "#discuss"
+      follow: Suivre
+      menu:
+        aria_left: nav-button-left
+        aria_right: nav-button-right
+      sort:
+        aria_label: View posts by
+        aria_tagged: View tagged posts by
+        feed: Fil
+        week: Semaine
+        month: Mois
+        year: Année
+        infinity: Infini
+        latest: Récent
+        signin_html: "👋 <a href=\"%{path}\">Sign in</a> for the ability sort posts by <strong>top</strong> and  <strong>latest</strong>."
+        top: Top

spec/requests/stories/articles_search_spec.rb

@@ -4,7 +4,7 @@ RSpec.describe "Stories::ArticlesSearchController", type: :request do
   describe "GET query page" do
     it "renders page with proper header" do
       get "/search?q=hello"
-      expect(response.body).to include("=> Search Results")
+      expect(response.body).to include(CGI.escapeHTML("=> Search Results"))
     end
 
     context "with non-empty query" do
@@ -17,7 +17,7 @@ RSpec.describe "Stories::ArticlesSearchController", type: :request do
     context "with empty query" do
       it "renders default page title" do
         get "/search?q="
-        expect(response.body).to include("Search results\s")
+        expect(response.body).to include("Search results")
       end
     end
   end