docs: various minor updates (#2177)

* docs: date and time MessageFormat syntax
* docs: add comment to examples
* chore: minor refactoring of blog social images

README.md

@@ -58,7 +58,10 @@ import { Trans } from "@lingui/react/macro"
 
 function App() {
   return (
-    <Trans id="msg.docs" /* id is optional */>
+    <Trans
+      id="msg.docs" // Optional message id
+      comment="Docs link on the website" // Comment for translators, optional
+    >
       Read the <a href="https://lingui.dev">documentation</a>
       for more info.
     </Trans>

website/blog/2023-04-26-announcing-lingui-4.0/index.md

@@ -2,14 +2,14 @@
 title: Announcing Lingui 4.0
 authors: andrii-bodnar
 tags: [release]
-image: ./img/social-card.png
+image: ./social-card.png
 ---
 
 Today we are happy to finally announce Lingui 4.0! 🥳️
 
 ---
 
-![social-card image](./img/social-card.png)
+![social-card image](./social-card.png)
 
 ## What is Lingui exactly?
 

website/blog/2023-12-12-4k-stars/index.md

@@ -2,10 +2,10 @@
 title: Lingui hits 4k Stars on GitHub ⭐
 authors: andrii-bodnar
 tags: [news, community]
-image: ./img/social-card.png
+image: ./social-card.png
 ---
 
-![social-card image](./img/social-card.png)
+![social-card image](./social-card.png)
 
 We're thrilled to announce that the [Lingui repository](https://github.com/lingui/js-lingui) has reached an important milestone - **4,000** stars! This achievement is a testament to the growing popularity of Lingui as a powerful and flexible internationalization solution for global products.
 

website/docs/ref/core.md

@@ -153,6 +153,7 @@ The core method for translating and formatting messages.
 - `messageId`: a unique message ID which identifies message in catalog.
 - `values`: an object containing variables used in translated message.
 - `options.message`: the default translation (optional). This is mostly used when application doesn't use message IDs in natural language (e.g.: `msg.id` or `Component.title`).
+- `options.formats`: custom format definitions for dates and times (optional). An object where keys are format names and values are either `Intl.DateTimeFormatOptions` or `Intl.NumberFormatOptions`.
 
 ```ts
 import { i18n } from "@lingui/core";
@@ -165,6 +166,21 @@ i18n._("My name is {name}", { name: "Tom" });
 
 // Message with custom messageId
 i18n._("msg.id", { name: "Tom" }, { message: "My name is {name}" });
+
+const date = new Date("2014-12-06");
+const time = new Date("2014-12-06T17:40:00Z");
+
+// Short date format
+i18n._("It starts on {someDate, date, short}", { someDate: date });
+
+// Short time format
+i18n._("It starts on {someTime, time, short}", { someTime: time });
+
+// Date skeleton format
+i18n._("It starts on {someDate, date, ::GrMMMdd}", { someDate: date });
+
+// Custom date format
+i18n._("It starts on {someDate, date, myStyle}", { someDate: date }, { formats: { myStyle: { day: "numeric" } } });
 ```
 
 ### `i18n._(messageDescriptor)`

website/src/components/Code.tsx

@@ -11,7 +11,10 @@ import { Trans } from "@lingui/react/macro"
 
 function App() {
   return (
-    <Trans id="msg.docs">
+    <Trans
+      id="msg.docs" // Optional message id
+      comment="Docs link on the website" // Comment for translators, optional
+    >
       Read the <a href="https://lingui.dev">documentation</a>
       for more info.
     </Trans>