nyanogang/nyanoblog
2
1
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity

web: add i18n support

Browse source
This commit is contained in:
anna 2022-12-14 01:02:24 +01:00
parent aeb51c7cea
commit a62f6983d3
Signed by: fef
GPG key ID: EC22E476DC2D3D84
6 changed files with 254 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

231
package-lock.json generated
View file

@ -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",

2
package.json
View file

@ -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"

2
public/index.html
View file

@ -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">

4
public/theme.css
View file

@ -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 */

5
src/web/app.ts
View file

@ -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>

21
src/web/features/compose-form.ts
View file

@ -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="list-ul" label="Add poll"></icon-button>
<icon-button icon="emoji-laughing" label="Insert emoji"></icon-button>
<icon-button icon="${this.getGlobeIconName()}" label="Note visibility"></icon-button>
<icon-button icon="paperclip" label="${msg("Add attachment")}"></icon-button>
<icon-button icon="list-ul" label="${msg("Add poll")}"></icon-button>
<icon-button icon="emoji-laughing" label="${msg("Insert emogi")}"></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>
`;
}