na

app/assets/stylesheets/application.css

@@ -448,9 +448,22 @@ ul.card__stack {
   padding: 1.142857142857143em 1em;  
   grid-template-rows: 1fr 4fr 1fr;
   justify-items: center;
-
+  
   & div {
     text-align: center;
+    overflow: hidden;
+    width: 100%;
+    & span {
+      display: block;
+      
+      overflow-wrap: break-word;
+      
+      word-wrap: break-word;
+      hyphens: auto;
+      
+    }
+  
+
   }
 
   svg {

app/assets/stylesheets/forms.css

@@ -308,6 +308,7 @@ form[data-locale='da'] .i18n__input-da,
 form[data-locale='nl'] .i18n__input-nl,
 form[data-locale='fi'] .i18n__input-fi,
 form[data-locale='fr'] .i18n__input-fr,
+form[data-locale='fr_ca'] .i18n__input-fr_ca,
 form[data-locale='de'] .i18n__input-de,
 form[data-locale='hu'] .i18n__input-hu,
 form[data-locale='it'] .i18n__input-it,
@@ -566,6 +567,7 @@ p[role="alert"] {
   margin-top: 8px;;
 
   gap: 4px;
+
   & label {
     font-size: 1.5rem;
     cursor: pointer;
@@ -580,7 +582,29 @@ p[role="alert"] {
     line-height: 32px;
     text-align: center;
     user-select: none;
+
+    &:has(em:nth-child(2)) {
+      position: relative;
+
+      & em:nth-child(2) {
+        position: absolute;
+        right: -12px;
+        top: -12px;
+        font-size: 1rem;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        border-radius: 50%;
+        font-family: var(--font-mono);
+      }
+    }
+  }
+
+  & em {
+    font-style: normal;
   }
+
   & input {
     position: absolute;
     opacity: 0;
@@ -590,6 +614,12 @@ p[role="alert"] {
     &:checked + span {
       background-color: var(--clr-grey-600);
       color: var(--white);
+
+      & em:nth-child(2) {
+        z-index: -1;
+        background-color: var(--clr-grey-500);
+  
+      }
     }
   }
 }

app/controllers/admin/admin_controller.rb

@@ -8,7 +8,7 @@ class Admin::AdminController < ApplicationController
 
   helper_method :current_user
   helper_method :user_signed_in?
-  helper_method :form_locale
+  helper_method :form_locale, :available_locales
 
   # DELETE admin/cache/clear
   def clear_cache
@@ -33,7 +33,12 @@ private
 
 
   def form_locale
-    (params['form_locale'] || I18n.locale).to_sym
+    (params['form_locale'] || I18n.locale).to_s
+  end
+
+
+  def available_locales
+    @available_locales ||= I18n.available_locales.map(&:to_s).map(&:downcase).map{|v| v.sub('-', '_')}
   end
 
 

app/controllers/admin/nodes_controller.rb

@@ -140,12 +140,12 @@ private
   def node_params
     params.require(:node).permit(
       :parent_id,
-      :title_en, :title_zh, :title_hr, :title_cs, :title_da, :title_nl, :title_fi, :title_fr, :title_de, :title_hu, :title_it, :title_ja, :title_ko, :title_nb, :title_pl, :title_pt, :title_ro, :title_sr, :title_sk, :title_sl, :title_es, :title_sv, :title_uk,
-      :page_title_en, :page_title_zh, :page_title_hr, :page_title_cs, :page_title_da, :page_title_nl, :page_title_fi, :page_title_fr, :page_title_de, :page_title_hu, :page_title_it, :page_title_ja, :page_title_ko, :page_title_nb, :page_title_pl, :page_title_pt, :page_title_ro, :page_title_sr, :page_title_sk, :page_title_sl, :page_title_es, :page_title_sv, :page_title_uk,
-      :page_description_en, :page_description_zh, :page_description_hr, :page_description_cs, :page_description_da, :page_description_nl, :page_description_fi, :page_description_fr, :page_description_de, :page_description_hu, :page_description_it, :page_description_ja, :page_description_ko, :page_description_nb, :page_description_pl, :page_description_pt, :page_description_ro, :page_description_sr, :page_description_sk, :page_description_sl, :page_description_es, :page_description_sv, :page_description_uk,
-      :slug_en, :slug_zh, :slug_hr, :slug_cs, :slug_da, :slug_nl, :slug_fi, :slug_fr, :slug_de, :slug_hu, :slug_it, :slug_ja, :slug_ko, :slug_nb, :slug_pl, :slug_pt, :slug_ro, :slug_sr, :slug_sk, :slug_sl, :slug_es, :slug_sv, :slug_uk,
+      :title_en, :title_zh, :title_hr, :title_cs, :title_da, :title_nl, :title_fi, :title_fr, :title_fr_ca, :title_de, :title_hu, :title_it, :title_ja, :title_ko, :title_nb, :title_pl, :title_pt, :title_ro, :title_sr, :title_sk, :title_sl, :title_es, :title_sv, :title_uk,
+      :page_title_en, :page_title_zh, :page_title_hr, :page_title_cs, :page_title_da, :page_title_nl, :page_title_fi, :page_title_fr, :page_title_fr_ca, :page_title_de, :page_title_hu, :page_title_it, :page_title_ja, :page_title_ko, :page_title_nb, :page_title_pl, :page_title_pt, :page_title_ro, :page_title_sr, :page_title_sk, :page_title_sl, :page_title_es, :page_title_sv, :page_title_uk,
+      :page_description_en, :page_description_zh, :page_description_hr, :page_description_cs, :page_description_da, :page_description_nl, :page_description_fi, :page_description_fr, :page_description_fr_ca, :page_description_de, :page_description_hu, :page_description_it, :page_description_ja, :page_description_ko, :page_description_nb, :page_description_pl, :page_description_pt, :page_description_ro, :page_description_sr, :page_description_sk, :page_description_sl, :page_description_es, :page_description_sv, :page_description_uk,
+      :slug_en, :slug_zh, :slug_hr, :slug_cs, :slug_da, :slug_nl, :slug_fi, :slug_fr, :slug_fr_ca, :slug_de, :slug_hu, :slug_it, :slug_ja, :slug_ko, :slug_nb, :slug_pl, :slug_pt, :slug_ro, :slug_sr, :slug_sk, :slug_sl, :slug_es, :slug_sv, :slug_uk,
       :template,
-      :href_en, :href_zh, :href_hr, :href_cs, :href_da, :href_nl, :href_fi, :href_fr, :href_de, :href_hu, :href_it, :href_ja, :href_ko, :href_nb, :href_pl, :href_pt, :href_ro, :href_sr, :href_sk, :href_sl, :href_es, :href_sv, :href_uk,
+      :href_en, :href_zh, :href_hr, :href_cs, :href_da, :href_nl, :href_fi, :href_fr, :href_fr_ca, :href_de, :href_hu, :href_it, :href_ja, :href_ko, :href_nb, :href_pl, :href_pt, :href_ro, :href_sr, :href_sk, :href_sl, :href_es, :href_sv, :href_uk,
       :status,
       :page_description,
       :parent_id,
@@ -155,10 +155,10 @@ private
       :is_allowlist,
       excluded_locales: [],
       settings: [],
-      tags_en: [], tags_zh: [], tags_hr: [], tags_cs: [], tags_da: [], tags_nl: [], tags_fi: [], tags_fr: [], tags_de: [], tags_hu: [], tags_it: [], tags_ja: [], tags_ko: [], tags_nb: [], tags_pl: [], tags_pt: [], tags_ro: [], tags_sr: [], tags_sk: [], tags_sl: [], tags_es: [], tags_sv: [], tags_uk: [],
+      tags_en: [], tags_zh: [], tags_hr: [], tags_cs: [], tags_da: [], tags_nl: [], tags_fi: [], tags_fr: [], tags_fr_ca: [], tags_de: [], tags_hu: [], tags_it: [], tags_ja: [], tags_ko: [], tags_nb: [], tags_pl: [], tags_pt: [], tags_ro: [], tags_sr: [], tags_sk: [], tags_sl: [], tags_es: [], tags_sv: [], tags_uk: [],
       attachments_attributes: [
         :id, :asset_id,
-        :body_en, :body_zh, :body_hr, :body_cs, :body_da, :body_nl, :body_fi, :body_fr, :body_de, :body_hu, :body_it, :body_ja, :body_ko, :body_nb, :body_pl, :body_pt, :body_ro, :body_sr, :body_sk, :body_sl, :body_es, :body_sv, :body_uk,
+        :body_en, :body_zh, :body_hr, :body_cs, :body_da, :body_nl, :body_fi, :body_fr, :body_fr_ca, :body_de, :body_hu, :body_it, :body_ja, :body_ko, :body_nb, :body_pl, :body_pt, :body_ro, :body_sr, :body_sk, :body_sl, :body_es, :body_sv, :body_uk,
         :fg_color, :bg_color, :alignment, :template, :position, :_destroy
       ]
     )

app/javascript/application.js

@@ -85,7 +85,6 @@ function init() {
     confirm_btn.addEventListener('click', (e) => {    
       // window.location.href = '/' + document.getElementById('language_select').value
       Turbo.visit('/' + document.getElementById('language_select').value, {advance: 'advance'})
-
     })
   })
 

app/javascript/controllers/i18n_form_controller.js

@@ -16,7 +16,7 @@ export default class extends Controller {
   
   setFormLocale(event) {
     const locale = event.target.getAttribute('value')
-
+    
     this.input.value = locale
     this.element.setAttribute('data-locale', locale)
   }

app/models/concerns/ancestry_with_sorted_url.rb

@@ -27,8 +27,9 @@ private
 
   def format_slug
     I18n.available_locales.each do |l|
+      l_key = l.to_s.downcase.sub('-', '_')
       v = self.root? ? l.to_s :
-                       self.send("slug_#{l}").blank? ? (self.title(locale: l) || '').parameterize : self.send("slug_#{l}").parameterize
+                       self.send("slug_#{l_key}").blank? ? (self.title(locale: l) || '').parameterize : self.send("slug_#{l_key}").parameterize
 
       self.send(:slug=, v, locale: l)
     end

app/models/concerns/has_tags.rb

@@ -12,34 +12,34 @@ module HasTags
   end
 
 
-  def descendant_tags
-    return self.class.tags unless self.respond_to?(:descendants)
-
-    result = {}
-    I18n.available_locales.each { |l| result[l] = [] }
-
-    self.descendants.viewable.pluck(:tags).flatten.map do |tags|
-      tags.each do |k,v|
-        result[k.to_sym] += v
-      end
-    end
-    result.each{ |k, v| result[k] = v.flatten.uniq.sort }
-  end
+  # def descendant_tags
+  #   return self.class.tags unless self.respond_to?(:descendants)
+  #
+  #   result = {}
+  #   I18n.available_locales.each { |l| result[l] = [] }
+  #
+  #   self.descendants.viewable.pluck(:tags).flatten.map do |tags|
+  #     tags.each do |k,v|
+  #       result[k.to_sym] += v
+  #     end
+  #   end
+  #   result.each{ |k, v| result[k] = v.flatten.uniq.sort }
+  # end
 
 
   module ClassMethods
 
-    def tags
-      result = {}
-      I18n.available_locales.each { |l| result[l] = [] }
-
-      pluck(:tags).flatten.map do |tags|
-        tags.each do |k,v|
-          result[k.to_sym] += v
-        end
-      end
-      result.each{ |k, v| result[k] = v.flatten.uniq.sort }
-    end
+    # def tags
+    #   result = {}
+    #   I18n.available_locales.map.each { |l| result[l] = [] }
+    #
+    #   pluck(:tags).flatten.map do |tags|
+    #     tags.each do |k,v|
+    #       result[k.to_sym] += v
+    #     end
+    #   end
+    #   result.each{ |k, v| result[k] = v.flatten.uniq.sort }
+    # end
 
   end
 

app/models/node.rb

@@ -13,7 +13,7 @@ class Node < ApplicationRecord
   translates :slug,
              :tags,
              locale_accessors: I18n.available_locales,
-             fallbacks: {zh: :en, hr: :en, cs: :en, da: :en, nl: :en, fi: :en, fr: :en, de: :en, hu: :en, it: :en, ja: :en, ko: :en, nb: :en, pl: :en, pt: :en, ro: :en, sr: :en, sk: :en, sl: :en, es: :en, sv: :en, uk: :en}
+             fallbacks: {zh: :en, hr: :en, cs: :en, da: :en, nl: :en, fi: :en, fr: :en, fr_ca: :en, de: :en, hu: :en, it: :en, ja: :en, ko: :en, nb: :en, pl: :en, pt: :en, ro: :en, sr: :en, sk: :en, sl: :en, es: :en, sv: :en, uk: :en}
 
   translates :title,
              :url,
@@ -21,7 +21,7 @@ class Node < ApplicationRecord
              :page_title,
              :page_description,
              locale_accessors: I18n.available_locales,
-             fallbacks: {zh: :en, hr: :en, cs: :en, da: :en, nl: :en, fi: :en, fr: :en, de: :en, hu: :en, it: :en, ja: :en, ko: :en, nb: :en, pl: :en, pt: :en, ro: :en, sr: :en, sk: :en, sl: :en, es: :en, sv: :en, uk: :en}
+             fallbacks: {zh: :en, hr: :en, cs: :en, da: :en, nl: :en, fi: :en, fr: :en, fr_ca: :en, de: :en, hu: :en, it: :en, ja: :en, ko: :en, nb: :en, pl: :en, pt: :en, ro: :en, sr: :en, sk: :en, sl: :en, es: :en, sv: :en, uk: :en}
 
 
   NODE_TEMPLATES = %w"tmpl_article tmpl_index tmpl_list"
@@ -73,7 +73,8 @@ class Node < ApplicationRecord
   def self.tags
     result = {}
     I18n.available_locales.each do |locale|
-      result[locale] = pluck(Arel.sql("tags->'#{locale}'")).flatten.compact.uniq.sort.reject{|v| v.blank?}
+      key = locale.to_s.downcase.sub('-','_')
+      result[key] = pluck(Arel.sql("tags->'#{locale}'")).flatten.compact.uniq.sort.reject{|v| v.blank?}
     end
     result
   end
@@ -130,7 +131,7 @@ class Node < ApplicationRecord
 private
 
   def remove_empty_tags
-    %w"settings excluded_locales tags_en tags_zh tags_hr tags_cs tags_da tags_nl tags_fi tags_fr tags_de tags_hu tags_it tags_ja tags_ko tags_nb tags_pl tags_pt tags_ro tags_sr tags_sk tags_sl tags_es tags_sv tags_uk ".map do |k|
+    %w"settings excluded_locales tags_en tags_zh tags_hr tags_cs tags_da tags_nl tags_fi tags_fr tags_fr_ca tags_de tags_hu tags_it tags_ja tags_ko tags_nb tags_pl tags_pt tags_ro tags_sr tags_sk tags_sl tags_es tags_sv tags_uk ".map do |k|
       self.send "#{k}=", self.send(k).reject { |v| v.blank? } unless self.send(k).blank?
     end
   end

app/views/admin/nodes/_form.html.erb

@@ -12,11 +12,11 @@
       <%= render partial: 'material/text_field_i18n_simple', locals: { f: form, attr: :title } %>
     <% end %>
 
-    <div class="i18n__from-ctrls">
-      <%- I18n.available_locales.each do |locale| %>
+    <div class="i18n__from-ctrls">      
+      <%- available_locales.each do |locale| %>
         <%= label_tag do %>
-          <%= radio_button_tag 'form_locale', locale, form_locale == locale, data: {action: 'change->i18n-form#setFormLocale' } %>
-          <%= tag.span locale %>
+          <%= radio_button_tag 'form_locale', locale, form_locale.to_s == locale, data: {action: 'change->i18n-form#setFormLocale' } %>
+          <%= tag.span locale.split('_').map{|v| tag.em v}.join.html_safe %>
         <% end %>          
       <% end %>
     </div>

app/views/languages/index.html.erb

@@ -1,16 +1,16 @@
 <%- content_for :title, t('project_name') %>
 
 <div class="msg__container msg__container-language">
-  <%= tag.h1 t('hello') %>
+  <%= tag.h1 t('hello', locale: accept_language) %>
 
-  <%= tag.div t('please_select_a_language_to_get_started') %>
+  <%= tag.div t('please_select_a_language_to_get_started', locale: accept_language) %>
 
   <div class="form__container">
     <div class="language__selector-select">
       <%= select_tag :language, options_for_select(languages_for_select, accept_language), id: 'language_select' %>
     </div>
     <button type="button" class="button__base" id="confirm_btn">
-      <%= t 'confirm' %>
+      <%= t 'confirm', locale: accept_language %>
     </button>
   </div>
 </div>

app/views/material/_text_field_i18n.html.erb

@@ -4,7 +4,7 @@
   </div>
 
   <div>
-    <%- I18n.available_locales.each do |locale| %>
+    <%- available_locales.each do |locale| %>
       <%- i18n_attr = "#{attr}_#{locale}" -%>
       <%= f.label i18n_attr, class: "input-box i18n__input i18n__input-#{locale}" do %>    
         

app/views/material/_text_field_i18n_simple.html.erb

@@ -1,4 +1,4 @@
-<%- I18n.available_locales.each do |locale| %>
+<%- available_locales.each do |locale| %>
   <%- i18n_attr = "#{attr}_#{locale}" -%>  
     <div class="i18n__input i18n__input-<%= locale %>">
     <%= f.text_field i18n_attr,                     

app/views/material/_tom_select_field_i18n.html.erb

@@ -4,7 +4,7 @@
   </div>
 
   <div>
-    <%- I18n.available_locales.each do |locale| %>
+    <%- available_locales.each do |locale| %>
       <%- i18n_attr = "#{attr}_#{locale}" -%>
       <%= f.label i18n_attr, class: "input-box i18n__input i18n__input-#{locale}" do %>    
         

app/views/material/_trix_field_i18n.html.erb

@@ -1,6 +1,6 @@
 <%= content_tag :div, class: 'trix__field-i18n' do %>  
 
-  <%- I18n.available_locales.each do |locale| %>
+  <%- available_locales.each do |locale| %>
     <%- i18n_attr = "#{attr}_#{locale}" -%>
     <%= render partial: 'material/trix_field', 
                locals: { 

app/views/site/tmpl_list.html.erb

@@ -17,9 +17,9 @@
                 <%= svg "ico-arrow-updown" %>
               </div>
               <div class="card-front">
-                <%= tag.div node.tags[0] %>
+                <%= tag.div tag.span(node.tags[0]) %>
                 <%= svg "ico-arrow-updown" %>
-                <%= tag.div node.tags[1] %>
+                <%= tag.div tag.span(node.tags[1]) %>
               </div>
             </div>
           </div>