web: add i18n support

package-lock.json

@@ -9,11 +9,13 @@
       "version": "0.1.0",
       "license": "AGPL-3.0",
       "dependencies": {
+        "@lit/localize": "^0.11.4",
         "bootstrap-icons": "^1.10.2",
         "lit": "^2.4.1",
         "redux": "^4.2.0"
       },
       "devDependencies": {
+        "@lit/localize-tools": "^0.6.5",
         "@typescript-eslint/eslint-plugin": "^5.45.0",
         "@typescript-eslint/parser": "^5.45.0",
         "@web/dev-server": "^0.1.35",
@@ -195,6 +197,49 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@lit/localize": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/@lit/localize/-/localize-0.11.4.tgz",
+      "integrity": "sha512-RRIwIX2tAm3+DuEndoXSJrFjGrAK5cb5IXo5K6jcJ6sbgD829B8rSqHC5MaKVUmXTVLIR1bk5IZOZDf9wFereA==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.4.0",
+        "lit": "^2.3.0"
+      }
+    },
+    "node_modules/@lit/localize-tools": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@lit/localize-tools/-/localize-tools-0.6.5.tgz",
+      "integrity": "sha512-/zBl7PuY5ZKCHD5quqF2SgGpJejPEK6ae6G8r1YJjbK7edTH4Ukaha+c5cBmtyIagFVCD6DpQDBkiLYUZ92UoQ==",
+      "dev": true,
+      "dependencies": {
+        "@lit/localize": "^0.11.0",
+        "@xmldom/xmldom": "^0.8.2",
+        "fast-glob": "^3.2.7",
+        "fs-extra": "^10.0.0",
+        "jsonschema": "^1.4.0",
+        "lit": "^2.2.0",
+        "minimist": "^1.2.5",
+        "parse5": "^6.0.1",
+        "source-map-support": "^0.5.19",
+        "typescript": "~4.7.4"
+      },
+      "bin": {
+        "lit-localize": "bin/lit-localize.js"
+      }
+    },
+    "node_modules/@lit/localize-tools/node_modules/typescript": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/@lit/reactive-element": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.2.tgz",
@@ -773,6 +818,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.6",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.6.tgz",
+      "integrity": "sha512-uRjjusqpoqfmRkTaNuLJ2VohVr67Q5YwDATW3VU7PfzTj6IRaihGrYI7zckGZjxQPBIp63nfvJbM+Yu5ICh0Bg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -935,6 +989,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
     "node_modules/builtin-modules": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
@@ -1750,6 +1810,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1855,6 +1929,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "dev": true
+    },
     "node_modules/grapheme-splitter": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
@@ -2199,6 +2279,27 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonschema": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.4.1.tgz",
+      "integrity": "sha512-S6cATIPVv1z0IlxdN+zUk5EPjkGCdnhN4wVSBlvoUO1tOLJootbo9CquNJmbIh4yikWHiUedhRYrNPn1arpEmQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -3010,6 +3111,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "node_modules/statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -3228,6 +3348,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -3502,6 +3631,41 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@lit/localize": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/@lit/localize/-/localize-0.11.4.tgz",
+      "integrity": "sha512-RRIwIX2tAm3+DuEndoXSJrFjGrAK5cb5IXo5K6jcJ6sbgD829B8rSqHC5MaKVUmXTVLIR1bk5IZOZDf9wFereA==",
+      "requires": {
+        "@lit/reactive-element": "^1.4.0",
+        "lit": "^2.3.0"
+      }
+    },
+    "@lit/localize-tools": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@lit/localize-tools/-/localize-tools-0.6.5.tgz",
+      "integrity": "sha512-/zBl7PuY5ZKCHD5quqF2SgGpJejPEK6ae6G8r1YJjbK7edTH4Ukaha+c5cBmtyIagFVCD6DpQDBkiLYUZ92UoQ==",
+      "dev": true,
+      "requires": {
+        "@lit/localize": "^0.11.0",
+        "@xmldom/xmldom": "^0.8.2",
+        "fast-glob": "^3.2.7",
+        "fs-extra": "^10.0.0",
+        "jsonschema": "^1.4.0",
+        "lit": "^2.2.0",
+        "minimist": "^1.2.5",
+        "parse5": "^6.0.1",
+        "source-map-support": "^0.5.19",
+        "typescript": "~4.7.4"
+      },
+      "dependencies": {
+        "typescript": {
+          "version": "4.7.4",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+          "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+          "dev": true
+        }
+      }
+    },
     "@lit/reactive-element": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.2.tgz",
@@ -3947,6 +4111,12 @@
         "parse5": "^6.0.1"
       }
     },
+    "@xmldom/xmldom": {
+      "version": "0.8.6",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.6.tgz",
+      "integrity": "sha512-uRjjusqpoqfmRkTaNuLJ2VohVr67Q5YwDATW3VU7PfzTj6IRaihGrYI7zckGZjxQPBIp63nfvJbM+Yu5ICh0Bg==",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -4070,6 +4240,12 @@
         "fill-range": "^7.0.1"
       }
     },
+    "buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
     "builtin-modules": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
@@ -4686,6 +4862,17 @@
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "dev": true
     },
+    "fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4757,6 +4944,12 @@
         "slash": "^3.0.0"
       }
     },
+    "graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "dev": true
+    },
     "grapheme-splitter": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
@@ -5003,6 +5196,22 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
+    "jsonschema": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.4.1.tgz",
+      "integrity": "sha512-S6cATIPVv1z0IlxdN+zUk5EPjkGCdnhN4wVSBlvoUO1tOLJootbo9CquNJmbIh4yikWHiUedhRYrNPn1arpEmQ==",
+      "dev": true
+    },
     "keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -5602,6 +5811,22 @@
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true
     },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
+    },
+    "source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -5752,6 +5977,12 @@
       "integrity": "sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==",
       "dev": true
     },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",

package.json

@@ -18,6 +18,7 @@
   "author": "anna <owo@fef.moe>",
   "license": "AGPL-3.0",
   "devDependencies": {
+    "@lit/localize-tools": "^0.6.5",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "@web/dev-server": "^0.1.35",
@@ -26,6 +27,7 @@
     "typescript": "^4.9.3"
   },
   "dependencies": {
+    "@lit/localize": "^0.11.4",
     "bootstrap-icons": "^1.10.2",
     "lit": "^2.4.1",
     "redux": "^4.2.0"

public/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

public/theme.css

@@ -18,6 +18,10 @@
     --accent-text-color: #e0d1e1;
     --accent-highlight-text-color: var(--accent-text-color);
 
+    --success-color: #00ff00;
+    --warning-color: #d78318;
+    --error-color: #f21736;
+
     /* border radius for smaller components like buttons */
     --border-radius: 8px;
     /* border radius for larger components like modals */

src/web/app.ts

@@ -1,5 +1,6 @@
 import {LitElement, html} from "lit";
 import {customElement} from "lit/decorators.js";
+import {msg} from "@lit/localize";
 
 import "./features/compose-form";
 import "./layout/column-layout";
@@ -11,7 +12,7 @@ export default class NyanoBlog extends LitElement {
     protected render() {
         return html`
             <column-layout>
-                <side-panel slot="left" headline="Compose">
+                <side-panel slot="left" headline="${msg("Compose")}">
                     <compose-form></compose-form>
                 </side-panel>
 
@@ -19,7 +20,7 @@ export default class NyanoBlog extends LitElement {
 
                 <div slot="main">main slot</div>
 
-                <side-panel slot="right" headline="Notifications">
+                <side-panel slot="right" headline="${msg("Notifications")}">
                     <scroll-list style="max-height: 400px">
                         <p>test uwu</p>
                         <p>test uwu</p>

src/web/features/compose-form.ts

@@ -1,5 +1,6 @@
 import {LitElement, html, css} from "lit";
 import {customElement, query, state} from "lit/decorators.js";
+import {msg, str} from "@lit/localize";
 
 import { maxNoteChars } from "../config";
 import withSharedStyles from "../theme";
@@ -31,27 +32,31 @@ export default class ComposeForm extends LitElement {
         return html`
             <input-field
                 id="summary"
-                placeholder="Content warning (optional)"
+                placeholder="${msg("Content warning (optional)")}"
                 maxlength="${maxNoteChars - this.content.length}"
                 @input=${() => this.summary = this.summaryInput.value}
             ></input-field>
             <textarea
                 id="content"
-                placeholder="Say something nice"
+                placeholder="${msg("Say something nice")}"
                 @input=${() => this.content = this.contentInput.value}
                 maxlength="${maxNoteChars - this.summary.length}"
             ></textarea>
             <div id="bar">
                 <div id="actions">
-                    <icon-button icon="paperclip" label="Add attachment"></icon-button>
+                    <icon-button icon="paperclip" label="${msg("Add attachment")}"></icon-button>
-                    <icon-button icon="list-ul" label="Add poll"></icon-button>
+                    <icon-button icon="list-ul" label="${msg("Add poll")}"></icon-button>
-                    <icon-button icon="emoji-laughing" label="Insert emoji"></icon-button>
+                    <icon-button icon="emoji-laughing" label="${msg("Insert emogi")}"></icon-button>
-                    <icon-button icon="${this.getGlobeIconName()}" label="Note visibility"></icon-button>
+                    <icon-button icon="${this.getGlobeIconName()}" label="${msg("Note visibility")}"></icon-button>
                 </div>
-                <div id="remaining-chars" class="${this.getRemainingCharsClass()}">
+                <div
+                    id="remaining-chars"
+                    class="${this.getRemainingCharsClass()}"
+                    aria-description="${msg(str`${this.remainingChars} characters remaining`)}"
+                >
                     ${this.remainingChars}
                 </div>
-                <nyano-button ?disabled=${this.content.length === 0}>Meow!</nyano-button>
+                <nyano-button ?disabled=${this.content.length === 0}>${msg("Meow!")}</nyano-button>
             </div>
         `;
     }