Add PWA metadata endpoint and icons

app/controllers/static_controller.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class StaticController < ApplicationController
+  include ThemeHelper
+
   def index
     if user_signed_in?
       @timeline = current_user.cursored_timeline(last_id: params[:last_id])
@@ -53,4 +55,37 @@ class StaticController < ApplicationController
   def terms
 
   end
+
+  def webapp_manifest
+    render json: {
+      name: APP_CONFIG["site_name"],
+      description: t(".front.subtitle"),
+      start_url: root_url(source: "pwa"),
+      scope: root_url,
+      display: "standalone",
+      categories: %w[social],
+      lang: I18n.locale,
+      shortcuts: [
+        {
+          name: t('views.navigation.inbox'),
+          url: inbox_url,
+          icons: [
+            {
+              src: "/icons/shortcuts/inbox.svg",
+              sizes: "96x96"
+            }
+          ]
+        }
+      ],
+      icons: %i[1024 512 384 192 128 96 72 48].map do |size|
+        [
+          { src: "/icons/maskable_icon_x#{size}.webp", size: "#{size}x#{size}", type: "image/webp" },
+          { src: "/icons/maskable_icon_x#{size}.png", size: "#{size}x#{size}", type: "image/png" }
+        ]
+      end.flatten,
+      theme_color: theme_color,
+      background_color: mobile_theme_color,
+      orientation: "any"
+    }
+  end
 end

app/views/layouts/base.haml

@@ -1,5 +1,5 @@
 !!! 5
-%html{ lang: 'en', prefix: 'og: https://ogp.me/ns#' }
+%html{ lang: I18n.locale, prefix: 'og: https://ogp.me/ns#' }
   %head
     %meta{ charset: 'utf-8' }
     %meta{ 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }
@@ -9,7 +9,9 @@
       %meta{ name: 'theme-color', content: mobile_theme_color, media: '(max-width: 992px)' }
     - else
       %meta{ name: 'theme-color', content: theme_color }
+    %link{ rel: 'manifest', href: '/manifest.json', crossorigin: 'use-credentials' }
     %link{ rel: 'apple-touch-icon', href: '/apple-touch-icon-precomposed.png' }
+    %link{ rel: 'mask-icon', href: '/icons/icon.svg', color: theme_color }
     %link{ rel: 'icon', href: '/images/favicon/favicon-16.png', sizes: '16x16' }
     %link{ rel: 'icon', href: '/icon-152.png', sizes: '152x152' }
     %link{ rel: 'icon', href: '/images/favicon/favicon-32.png', sizes: '32x32' }

config/routes.rb

@@ -42,6 +42,7 @@ Rails.application.routes.draw do
   match '/privacy', to: 'static#privacy_policy', via: 'get', as: :privacy_policy
   match '/terms', to: 'static#terms', via: 'get', as: :terms
   match '/linkfilter', to: 'static#linkfilter', via: 'get', as: :linkfilter
+  match '/manifest.json', to: 'static#webapp_manifest', via: 'get', as: :webapp_manifest
 
   # Devise routes
   devise_for :users, path: 'user', skip: [:sessions, :registrations]

public/icons/icon.svg

@@ -0,0 +1 @@
+<svg height="1792" viewBox="0 0 1792 1792" width="1792" xmlns="http://www.w3.org/2000/svg"><path d="m1408 768q0 139-94 257t-256.5 186.5-353.5 68.5q-86 0-176-16-124 88-278 128-36 9-86 16h-3q-11 0-20.5-8t-11.5-21q-1-3-1-6.5t.5-6.5 2-6l2.5-5 3.5-5.5 4-5 4.5-5 4-4.5q5-6 23-25t26-29.5 22.5-29 25-38.5 20.5-44q-124-72-195-177t-71-224q0-139 94-257t256.5-186.5 353.5-68.5 353.5 68.5 256.5 186.5 94 257zm384 256q0 120-71 224.5t-195 176.5q10 24 20.5 44t25 38.5 22.5 29 26 29.5 23 25q1 1 4 4.5t4.5 5 4 5 3.5 5.5l2.5 5 2 6 .5 6.5-1 6.5q-3 14-13 22t-22 7q-50-7-86-16-154-40-278-128-90 16-176 16-271 0-472-132 58 4 88 4 161 0 309-45t264-129q125-92 192-212t67-254q0-77-23-152 129 71 204 178t75 230z"/></svg>

public/icons/shortcuts/inbox.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1151 960h316q-1-3-2.5-8.5t-2.5-7.5l-212-496h-708l-212 496q-1 3-2.5 8.5t-2.5 7.5h316l95 192h320zm513 30v482q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-482q0-62 25-123l238-552q10-25 36.5-42t52.5-17h832q26 0 52.5 17t36.5 42l238 552q25 61 25 123z"/></svg>