I18n support

Gemfile.lock

@@ -2,6 +2,7 @@ PATH
   remote: .
   specs:
     mayu-live (0.0.0)
+      accept_language (~> 2.0.3)
       async (~> 2.0.3)
       async-container (~> 0.16.12)
       async-http (~> 0.59.1)
@@ -28,10 +29,12 @@ PATH
       syntax_tree-xml (~> 0.1.0)
       terminal-table (~> 3.0.1)
       toml-rb (~> 2.2.0)
+      twitter_cldr (~> 6.11.4)
 
 GEM
   remote: https://rubygems.org/
   specs:
+    accept_language (2.0.3)
     ansi (1.5.0)
     ast (2.4.2)
     async (2.0.3)
@@ -55,8 +58,11 @@ GEM
       async (>= 1.25)
     brotli (0.4.0)
     builder (3.2.4)
+    camertron-eprun (1.1.1)
     citrus (3.0.2)
+    cldr-plurals-runtime-rb (1.1.0)
     coderay (1.1.3)
+    concurrent-ruby (1.1.10)
     console (1.15.3)
       fiber-local
     crass (1.0.6)
@@ -193,6 +199,12 @@ GEM
     toml-rb (2.2.0)
       citrus (~> 3.0, > 3.0)
     traces (0.7.0)
+    twitter_cldr (6.11.4)
+      camertron-eprun
+      cldr-plurals-runtime-rb (~> 1.1)
+      tzinfo
+    tzinfo (2.0.5)
+      concurrent-ruby (~> 1.0)
     unicode-display_width (2.3.0)
     unparser (0.6.5)
       diff-lcs (~> 1.3)

example/Gemfile.lock

@@ -2,6 +2,7 @@ PATH
   remote: ..
   specs:
     mayu-live (0.0.0)
+      accept_language (~> 2.0.3)
       async (~> 2.0.3)
       async-container (~> 0.16.12)
       async-http (~> 0.59.1)
@@ -28,10 +29,12 @@ PATH
       syntax_tree-xml (~> 0.1.0)
       terminal-table (~> 3.0.1)
       toml-rb (~> 2.2.0)
+      twitter_cldr (~> 6.11.4)
 
 GEM
   remote: https://rubygems.org/
   specs:
+    accept_language (2.0.3)
     async (2.0.3)
       console (~> 1.10)
       io-event (~> 1.0.0)
@@ -52,8 +55,11 @@ GEM
     async-pool (0.3.12)
       async (>= 1.25)
     brotli (0.4.0)
+    camertron-eprun (1.1.1)
     citrus (3.0.2)
+    cldr-plurals-runtime-rb (1.1.0)
     coderay (1.1.3)
+    concurrent-ruby (1.1.10)
     console (1.15.3)
       fiber-local
     crass (1.0.6)
@@ -124,6 +130,12 @@ GEM
     toml-rb (2.2.0)
       citrus (~> 3.0, > 3.0)
     traces (0.7.0)
+    twitter_cldr (6.11.4)
+      camertron-eprun
+      cldr-plurals-runtime-rb (~> 1.1)
+      tzinfo
+    tzinfo (2.0.5)
+      concurrent-ruby (~> 1.0)
     unicode-display_width (2.3.0)
 
 PLATFORMS

example/app/components/Clock.haml

@@ -1,8 +1,12 @@
 :ruby
+  def self.get_initial_state(**)
+    time = Time.now.utc + 0.5
+    { hour: time.hour, min: time.min, sec: time.sec }
+  end
+
   def mount
     loop do
-      time = Time.now.utc
-      update(hour: time.hour, min: time.min, sec: time.sec)
+      update(self.class.get_initial_state)
       sleep 0.5
     end
   end
@@ -21,6 +25,10 @@
     height: auto;
   }
 
+  .hand {
+    transition: transform 250ms ease-in-out;
+  }
+
 :ruby
   stroke = props[:stroke] || "#000"
   fill = props[:fill] || "transparent"
@@ -30,13 +38,16 @@
   %svg.svg(width="100" height="100" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg")
     %circle(cx=0 cy=0 r=99 fill=fill stroke=stroke stroke-width="2")
     %g
-      - x1, y1 = [0, 0]
-      - x2, y2 = calculate_pos(state[:hour].to_f * 5, 50.0)
-      %line.hand(x1=x1 y1=y1 x2=x2 y2=y2 stroke=stroke stroke-width="6")
-      - x2, y2 = calculate_pos(state[:min].to_f, 60.0)
-      %line.hand(x1=x1 y1=y1 x2=x2 y2=y2 stroke=stroke stroke-width="3")
-      - x2, y2 = calculate_pos(state[:sec].to_f, 80.0)
-      %line.hand(x1=x1 y1=y1 x2=x2 y2=y2 stroke=stroke stroke-width="1")
+      - x1, y1, x2 = [0, 0, 0]
+      - y2 = -50
+      - style = { transform: format("rotateZ(%.5fturn)", state[:hour] / 12.0) }
+      %line.hand(x1=x1 y1=y1 x2=x2 y2=y2 stroke=stroke stroke-width="6"){style:}
+      - y2 = -60
+      - style = { transform: format("rotateZ(%.5fturn)", state[:hour] + state[:min] / 60.0) }
+      %line.hand(x1=x1 y1=y1 x2=x2 y2=y2 stroke=stroke stroke-width="3"){style:}
+      - y2 = -80
+      - style = { transform: format("rotateZ(%.5fturn)", state[:hour] * 60.0 + state[:min] + state[:sec] / 60.0) }
+      %line.hand(x1=x1 y1=y1 x2=x2 y2=y2 stroke=stroke stroke-width="1"){style:}
     %circle(cx=0 cy=0 r=3 fill=stroke)
     %g
       = 12.times.map do |i|

example/app/components/Form/Button.haml

@@ -8,6 +8,7 @@
     user-select: none;
     font-family: inherit;
     color: #fff;
+    --icon-color: #fff;
   }
 
   .button:not(:disabled):active {
@@ -26,8 +27,13 @@
   .button:disabled {
     background-color: #ccc;
     color: #666;
+    --icon-color: #666;
     cursor: not-allowed;
   }
 
-%button.button{style: { __button_color: props.fetch(:color, "var(--accent-color)")  }, **props.except(:color)}
+%button.button{
+  class: props[:class],
+  style: { __button_color: props.fetch(:color, "var(--accent-color)")  },
+  **props.except(:color)
+}
   %slot

example/app/components/Form/Fieldset.haml

@@ -8,5 +8,5 @@
     font-size: 0.9em;
   }
 
-%fieldset.fieldset
+%fieldset.fieldset{**props}
   %slot

example/app/components/Layout/Badges.haml

@@ -0,0 +1,41 @@
+:ruby
+  Badge = import("./Badge")
+
+  BADGES = [
+    {
+      href: "https://github.com/mayu-live/framework/search?l=Ruby&type=code",
+      alt: "top language",
+      src: "https://img.shields.io/github/languages/top/mayu-live/framework",
+    }, {
+      href: "https://github.com/mayu-live/framework/actions/workflows/ruby.yml",
+      alt: "Ruby build status",
+      src: "https://img.shields.io/github/workflow/status/mayu-live/framework/Ruby/main?label=ruby"
+    }, {
+      href: "https://github.com/mayu-live/framework/actions/workflows/node.js.yml",
+      alt: "JavaScript build status",
+      src: "https://img.shields.io/github/workflow/status/mayu-live/framework/Node.js%20CI/main?label=JavaScript",
+    }, {
+      href: "https://github.com/mayu-live/framework/blob/main/COPYING",
+      alt: "License: AGPL-3.0",
+      src: "https://img.shields.io/github/license/mayu-live/framework",
+    }, {
+      href: "https://status.mayu.live/",
+      alt: "uptime status",
+      src: "https://img.shields.io/badge/uptime-up-green",
+    }, {
+      href: "https://github.com/mayu-live/framework/stargazers",
+      alt: "GitHub Stars",
+      src: "https://img.shields.io/github/stars/mayu-live/framework?style=social",
+    }
+  ]
+
+:css
+  .badges {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    gap: 0.5em;
+  }
+%p.badges
+  = BADGES.map do |badge|
+    %Badge{key: badge[:src], **badge}

example/app/components/Layout/Footer.haml

@@ -1,34 +1,7 @@
 :ruby
   MaxWidth = import("/app/components/Layout/MaxWidth")
-  Badge = import("./Badge")
-
-  BADGES = [
-    {
-      href: "https://github.com/mayu-live/framework/search?l=Ruby&type=code",
-      alt: "top language",
-      src: "https://img.shields.io/github/languages/top/mayu-live/framework",
-    }, {
-      href: "https://github.com/mayu-live/framework/actions/workflows/ruby.yml",
-      alt: "Ruby build status",
-      src: "https://img.shields.io/github/workflow/status/mayu-live/framework/Ruby/main?label=ruby"
-    }, {
-      href: "https://github.com/mayu-live/framework/actions/workflows/node.js.yml",
-      alt: "JavaScript build status",
-      src: "https://img.shields.io/github/workflow/status/mayu-live/framework/Node.js%20CI/main?label=JavaScript",
-    }, {
-      href: "https://github.com/mayu-live/framework/blob/main/COPYING",
-      alt: "License: AGPL-3.0",
-      src: "https://img.shields.io/github/license/mayu-live/framework",
-    }, {
-      href: "https://status.mayu.live/",
-      alt: "uptime status",
-      src: "https://img.shields.io/badge/uptime-up-green",
-    }, {
-      href: "https://github.com/mayu-live/framework/stargazers",
-      alt: "GitHub Stars",
-      src: "https://img.shields.io/github/stars/mayu-live/framework?style=social",
-    }
-  ]
+  Languages = import("./Languages")
+  Badges = import("./Badges")
 
 :css
   .footer {
@@ -53,18 +26,6 @@
     color: #fff;
     opacity: 1;
   }
-
-  .badges {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    gap: 0.5em;
-  }
-
-  .links {
-    display: inline-flex;
-  }
-
 %footer.footer{class: props[:class]}
   %MaxWidth.inner
     %p
@@ -73,6 +34,5 @@
       %a.link(href="https://github.com/mayu-live" target="_blank")<
         github.com/mayu-live
 
-    %p.badges
-      = BADGES.map do |badge|
-        %Badge{key: badge[:src], **badge}
+    %Languages
+    %Badges

example/app/components/Layout/Header.haml

@@ -1,20 +1,22 @@
 :ruby
+  translations("sv-SE", "en-US")
+
   MaxWidth = import("/app/components/Layout/MaxWidth")
   Icon = import("/app/components/UI/Icon")
 
-%header{class: props[:class]}
+%header(lang=lang){class: props[:class]}
   %MaxWidth.inner
-    %a.titleLink(href="/" title="Start page")
+    %a.titleLink(href="/"){title: t(:startpage)}
       Mayu Live
     %nav.nav
       %menu.menu
         %li
           %a.navLink(href="/demos")
-            Demos
+            = t(:demos)
         %li
           %a.navLink(href="/docs")
-            Docs
+            = t(:docs)
         %li
           %a.navLink(href="https://github.com/mayu-live/framework" target="_blank")
-            GitHub
+            = t(:github)
             %Icon.icon(name="up-right-from-square")

example/app/components/Layout/Header.intl.en-US.toml

@@ -0,0 +1,4 @@
+startpage = "Startsida"
+demos = "Demos"
+docs = "Docs"
+github = "GitHub"

example/app/components/Layout/Header.intl.sv-SE.toml

@@ -0,0 +1,4 @@
+startpage = "Startsida"
+demos = "Demo"
+docs = "Dokumentation"
+github = "GitHub"

example/app/components/Layout/Highlight.haml

@@ -20,6 +20,8 @@
       Rouge::Lexers::HTML.new
     when :css
       Rouge::Lexers::CSS.new
+    when :json
+      Rouge::Lexers::JSON.new
     end
   end
 

example/app/components/Layout/Languages.haml

@@ -0,0 +1,37 @@
+:ruby
+  translations("en-US", "sv-SE")
+
+  Icon = import("/app/components/UI/Icon")
+
+  def handle_set_language(e)
+    e => { target: { value: } }
+    helpers.set_prefer_language(value)
+  end
+:css
+  .languages {
+    display: flex;
+    gap: .5em;
+  }
+
+  .title {
+    font-size: inherit;
+    margin: 0;
+  }
+
+  .button {
+    border: 0;
+    background: transparent;
+    color: #fff;
+    cursor: pointer;
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+  }
+
+  .button:hover {
+    text-decoration: underline;
+  }
+%section.languages(lang=lang)
+  %Icon(name="language"){title: t(:title), style: { aspect_ratio: "1.25", width: "2em" }}
+  %button.button(onclick=handle_set_language value="sv-SE" lang="sv-SE") Svenska
+  %button.button(onclick=handle_set_language value="en-US" lang="en-US") English (US)

example/app/components/Layout/Languages.intl.en-US.toml

@@ -0,0 +1 @@
+title = "Change language"

example/app/components/Layout/Languages.intl.sv-SE.toml

@@ -0,0 +1 @@
+title = "Byt språk"

example/app/components/Layout/Menu.haml

@@ -8,5 +8,5 @@
     flex-direction: var(--menu-direction, column);
     gap: 0 1em;
   }
-%menu.menu
+%menu.menu{lang: props[:htmllang]}
   %slot

example/app/components/UI/Icon/fix.rb

@@ -0,0 +1,7 @@
+puts "ICONS = {"
+
+Dir["*.svg"].each do |file|
+  puts "  #{File.basename(file, ".svg").delete_suffix("-solid").inspect} => svg(#{file.inspect}),"
+end
+
+puts "}.transform_keys(&:to_s).freeze"

example/app/components/UI/Image.haml

@@ -25,7 +25,7 @@
 
   classname = props[:class]
 
-%img.img(style=inline_style loading=loading alt=alt class=classname){
+%img.img(style=inline_style loading=loading decoding="async" alt=alt class=classname){
   src: image.src,
   sizes: image.sizes,
   srcset: image.srcset,