na

app/assets/stylesheets/application.css

@@ -1,33 +1,73 @@
 @font-face {
-  font-family: 'Noto IKEA Latin';
-  font-weight: 400;
-  font-style: normal;
   font-display: swap;
-  src: url('NotoIKEALatin-Regular.ttf') format('truetype');
+  font-family: 'Noto IKEA';
+  font-style: italic;
+  font-weight: 400;
+  src: url(noto-ikea-400i.latin-ext.5f8f91ea.woff2) format("woff2");
+  unicode-range:u + 0100-024f, u + 0259, u + 1e??, u + 2020, u + 20a0-20ab, u + 20ad-20cf, u + 2113, u + 2c60-2c7f, u + a720-a7ff
 }
 
 @font-face {
-  font-family: 'Noto IKEA Latin';
-  font-weight: 400;
+  font-display: swap;
+  font-family: 'Noto IKEA';
   font-style: italic;
+  font-weight: 400;
+  src: url(noto-ikea-400i.latin.10395910.woff2) format("woff2");
+  unicode-range:u + 00??, u + 0131, u + 0152-0153, u + 02bb-02bc, u + 02c6, u + 02da, u + 02dc, u + 2000-206f, u + 2074, u + 20ac, u + 2122, u + 2191, u + 2193, u + 2212, u + 2215, u + feff, u + fffd
+}
+
+@font-face {
   font-display: swap;
-  src: url('NotoIKEALatin-Italic.ttf') format('truetype');
+  font-family: 'Noto IKEA';
+  font-style: italic;
+  font-weight: 700;
+  src: url(noto-ikea-700i.latin-ext.3637155a.woff2) format("woff2");
+  unicode-range:u + 0100-024f, u + 0259, u + 1e??, u + 2020, u + 20a0-20ab, u + 20ad-20cf, u + 2113, u + 2c60-2c7f, u + a720-a7ff
 }
 
 @font-face {
-  font-family: 'Noto IKEA Latin';
+  font-display: swap;
+  font-family: 'Noto IKEA';
+  font-style: italic;
   font-weight: 700;
-  font-style: normal;  
+  src: url(noto-ikea-700i.latin.29eb18bb.woff2) format("woff2");
+  unicode-range:u + 00??, u + 0131, u + 0152-0153, u + 02bb-02bc, u + 02c6, u + 02da, u + 02dc, u + 2000-206f, u + 2074, u + 20ac, u + 2122, u + 2191, u + 2193, u + 2212, u + 2215, u + feff, u + fffd
+}
+
+@font-face {
   font-display: swap;
-  src: url('NotoIKEALatin-Bold.ttf') format('truetype');
+  font-family: 'Noto IKEA';
+  font-style: normal;
+  font-weight: 400;
+  src: url(noto-ikea-400.latin-ext.edd421f4.woff2) format("woff2");
+  unicode-range:u + 0100-024f, u + 0259, u + 1e??, u + 2020, u + 20a0-20ab, u + 20ad-20cf, u + 2113, u + 2c60-2c7f, u + a720-a7ff
 }
 
 @font-face {
-  font-family: 'Noto IKEA Latin';
+  font-display: swap;
+  font-family: 'Noto IKEA';
+  font-style: normal;
+  font-weight: 400;
+  src: url(noto-ikea-400.latin.647e877d.woff2) format("woff2");
+  unicode-range:u + 00??, u + 0131, u + 0152-0153, u + 02bb-02bc, u + 02c6, u + 02da, u + 02dc, u + 2000-206f, u + 2074, u + 20ac, u + 2122, u + 2191, u + 2193, u + 2212, u + 2215, u + feff, u + fffd
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Noto IKEA';
+  font-style: normal;
   font-weight: 700;
-  font-style: italic;  
+  src: url(noto-ikea-700.latin-ext.97f0d455.woff2) format("woff2");
+  unicode-range:u + 0100-024f, u + 0259, u + 1e??, u + 2020, u + 20a0-20ab, u + 20ad-20cf, u + 2113, u + 2c60-2c7f, u + a720-a7ff
+}
+
+@font-face {
   font-display: swap;
-  src: url('NotoIKEALatin-BoldItalic.ttf') format('truetype');
+  font-family: 'Noto IKEA';
+  font-style: normal;
+  font-weight: 700;
+  src: url(noto-ikea-700.latin.d7277c39.woff2) format("woff2");
+  unicode-range:u + 00??, u + 0131, u + 0152-0153, u + 02bb-02bc, u + 02c6, u + 02da, u + 02dc, u + 2000-206f, u + 2074, u + 20ac, u + 2122, u + 2191, u + 2193, u + 2212, u + 2215, u + feff, u + fffd
 }
 
 :root {
@@ -35,8 +75,8 @@
   --clr-black: #000;
   --clr-bumblebee: #F0B902;
 
-  --ff-base: 'Noto IKEA Latin', sans-serif;
-
+  --ff-ikea: "Noto IKEA", "Noto Sans", "Roboto", "Open Sans", system-ui, sans-serif;
+  
   --shadow: 0px 0px 10px 2px rgba(0,0,0,0.1); 
 
   --fs-base: 1.6rem;
@@ -45,7 +85,7 @@
   --fs-2xl: 4.0rem;
   --fs-3xl: 6.4rem;
    
-  font: 10px/1.3 var(--ff-base);
+  font: 10px/1.3 var(--ff-ikea);
 }
 
 body {
@@ -56,4 +96,45 @@ body {
   flex-direction: column;
   gap: 0;
   min-height: 100svh;
-}
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 1rem;
+  
+  & svg {
+    width: 59px;
+    height: auto;
+  }
+
+  & div {
+    line-height: 1.3;
+    font-size: 1.6rem;
+    text-align: right;
+ }
+  
+  & span {
+    font-weight: 700;
+    font-style: italic;    
+  }
+}
+
+main {
+  margin: 0 1rem; 
+}
+
+.start__title {
+  margin: 0 0 0.4375em 0;
+  line-height: 1.1;
+  font-size: var(--fs-3xl);
+  font-weight: 700;
+}
+
+.start__msg {
+  margin: 0;
+  line-height: 1.2;
+  font-size: var(--fs-lg);
+  font-weight: 400;
+}

app/controllers/languages_controller.rb

@@ -0,0 +1,19 @@
+class LanguagesController < ApplicationController
+
+  def index
+    language = parse_accept_language()
+
+
+  end
+
+
+private
+
+  def parse_accept_language(header=request.env['HTTP_ACCEPT_LANGUAGE'])
+    header.to_s.split(',').map { |l|
+      lang, q_factor = l.split(';q=')
+      [lang, (q_factor || '1').to_f]
+    }.sort_by { |_, q| -q }.map(&:first).first
+  end
+
+end

app/controllers/site_controller.rb

@@ -1,19 +1,6 @@
 class SiteController < ApplicationController
 
   def index
-    language = parse_accept_language(request.env['HTTP_ACCEPT_LANGUAGE'])
-    render plain: "Language preference: #{language}"
 
   end
-
-
-private
-
-  def parse_accept_language(header)
-    header.to_s.split(',').map { |l|
-      lang, q_factor = l.split(';q=')
-      [lang, (q_factor || '1').to_f]
-    }.sort_by { |_, q| -q }.map(&:first).first
-  end
-
 end

app/helpers/application_helper.rb

@@ -1,2 +1,14 @@
 module ApplicationHelper
+
+  def svg(name)
+    file_path = "#{Rails.root}/app/assets/images/#{name}.svg"
+    if File.exist?(file_path)
+      Rails.cache.fetch(['svg', name]) do
+        File.read(file_path).html_safe
+      end
+    else
+      '(not found)'
+    end
+  end
+
 end

app/helpers/languages_helper.rb

@@ -0,0 +1,2 @@
+module LanguagesHelper
+end

app/helpers/site_helper.rb

@@ -1,2 +1,13 @@
 module SiteHelper
+
+  def frontend_javascript_importmap_tags
+    only_use = %w"application"
+    importmap_json = JSON.parse(Rails.application.importmap.to_json(resolver: self))['imports'].select{ |k,v| only_use.include?(k)}
+    safe_join [
+          javascript_inline_importmap_tag(JSON.pretty_generate({ "imports" => importmap_json})),
+          javascript_module_preload_tag(*importmap_json.map{|v| v[1]}),
+          javascript_import_module_tag('application')
+        ], "\n"
+  end
+
 end

app/javascript/application.js

@@ -1,3 +0,0 @@
-// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
-import "@hotwired/turbo-rails"
-import "controllers"

app/views/languages/index.html.erb

@@ -0,0 +1,2 @@
+<%= tag.h1 t('start.hello'), class: 'start__title' %>
+<%= tag.p t('start.please_select_a_language_to_get_started'), class: 'start__msg' %>

app/views/layouts/application.html.erb

@@ -1,16 +1,29 @@
-<!DOCTYPE html>
+<!DOCTYPE html lang="<%= I18n.locale %>">
 <html>
   <head>
-    <title>Week2024</title>
+    <title><%= content_for?(:title) ? yield(:title) : t(:client_name) %></title>
+    
+    <%= tag :meta, name: 'description', content: content_for?(:meta_description) ? yield(:meta_description) : (@node.present?? @node.page_description : '') %>
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <%= csrf_meta_tags %>
-    <%= csp_meta_tag %>
-
-    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
-    <%= javascript_importmap_tags %>
+    
+    <link rel="apple-touch-icon" href="/ikea-favicon-300x300.png">
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" sizes="16x16 32x32">
+    <link rel="icon" sizes="192x192" href="/ikea-favicon-300x300.png">    
+        
+    <%= stylesheet_link_tag "application" %>
+    <%= frontend_javascript_importmap_tags %>
+    
   </head>
-
   <body>
-    <%= yield %>
+    <header>
+      <%= svg 'ikea-foundation-week' %>
+      <div>
+        <%= t('can_you_spot_the_link').html_safe %>
+      </div>
+    </header>
+
+    <main>
+      <%= yield %>
+    </main>
   </body>
 </html>

config/application.rb

@@ -32,7 +32,7 @@ module Week2024
 
     config.i18n.default_locale = :en
     config.i18n.available_locales = [:en, :zh, :hr, :cs, :da, :nl, :fi, :fr, :fr, :de, :hu, :it, :ja, :ko, :nb, :pl, :pt, :ro, :sr, :sk, :sl, :es, :sv, :uk]
-    config.i18n.fallbacks = true
+    config.i18n.fallbacks = [:en]
 
     config.active_storage.routes_prefix = 'storage' #change /rails/active_storage to /storage
 

config/importmap.rb

@@ -1,7 +1,9 @@
 # Pin npm packages by running ./bin/importmap
 
-pin "application"
 pin "@hotwired/turbo-rails", to: "turbo.min.js"
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
+
+# site_helper
+pin "application", preload: false

config/locales/en.yml

@@ -22,3 +22,10 @@ en:
     es: Spanish
     sv: Swedish
     uk: Ukrainian
+
+  can_you_spot_the_link: Can you spot <br><span>the link?</span>
+  
+  start:
+    hello: Hello!
+    please_select_a_language_to_get_started: Please select a language to get started.
+    confirm: Confirm

config/routes.rb

@@ -3,8 +3,16 @@ Rails.application.routes.draw do
 
   # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
   # Can be used by load balancers and uptime monitors to verify that the app is live.
-  get "up" => "rails/health#show", as: :rails_health_check
+  # get "up" => "rails/health#show", as: :rails_health_check
+
+
+
+  scope ':locale', constraints: { locale: /en|zh|hr|cs|da|nl|fi|fr|fr|de|hu|it|ja|ko|nb|pl|pt|ro|sr|sk|sl|es|sv|uk/ } do
+    get '', to: 'site#index'
+    get '*url', to: 'site#page', constraints: lambda { |req| req.path.exclude?('storage') }
+  end
+
 
   # Defines the root path route ("/")
-  root "site#index"
+  root "languages#index"
 end

test/controllers/languages_controller_test.rb

@@ -0,0 +1,7 @@
+require "test_helper"
+
+class LanguagesControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end