@pcdevil/eleventy-plugin-intl-utils 0.2.0

package/.eleventy.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const countryNameFactory = require('./src/country_name');
+const languageNameFactory = require('./src/language_name');
+const shortDateTimeFormatFactory = require('./src/short_datetime_format');
+const yearIntervalFactory = require('./src/year_interval');
+
+module.exports = (eleventyConfig, pluginConfig = {}) => {
+	const { locale } = pluginConfig;
+
+	eleventyConfig.addFilter('country_name', countryNameFactory(locale));
+	eleventyConfig.addFilter('language_name', languageNameFactory(locale));
+	eleventyConfig.addFilter('short_datetime_format', shortDateTimeFormatFactory(locale));
+	eleventyConfig.addFilter('year_interval', yearIntervalFactory(locale));
+};

package/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+	"extends": [
+		"eslint:recommended",
+		"standard"
+	],
+
+	"ignorePatterns": [
+		"!.eleventy.js"
+	],
+
+	"parserOptions": {
+		"sourceType": "script"
+	},
+
+	"root": true,
+
+	"rules": {
+		"curly": ["error", "all"],
+		"array-element-newline": ["error", "consistent"],
+		"arrow-parens": ["error", "always"],
+		"comma-dangle": ["error", {
+			"arrays": "always-multiline",
+			"exports": "always-multiline",
+			"functions": "never",
+			"imports": "always-multiline",
+			"objects": "always-multiline"
+		}],
+		"indent": ["error", "tab"],
+		"no-tabs": "off",
+		"object-property-newline": ["error", {
+			"allowAllPropertiesOnSameLine": false
+		}],
+		"semi": ["error", "always"],
+		"valid-jsdoc": "off"
+	}
+}

package/.nvmrc

@@ -0,0 +1 @@
+v16.13.1

package/LICENSE.md

@@ -0,0 +1,20 @@
+# The MIT License
+
+Copyright 2021 Attila Gonda https://attilagonda.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,101 @@
+# eleventy-plugin-intl-utils
+A set of internationalization utils for [Eleventy](https://www.11ty.dev/).
+
+## Motivation
+It's super fast to create a static website with **Eleventy** and with the help of [`eleventy-plugin-i18n`](https://www.npmjs.com/package/eleventy-plugin-i18n) localization can be done with ease too.
+
+However it only gives solution for static data and dynamic data still needs treatment during layout rendering. This plugin aims to help with a set of [filters](https://www.11ty.dev/docs/filters/).
+
+The implementations of the filters are mostly wrappers around the [ECMAScript Internationalization API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) with a little _bit of sugar_.
+
+## Usage
+This guide corresponds to [Eleventy documentation](https://www.11ty.dev/docs/plugins/#add-the-plugin-to-eleventy-in-your-config-file):
+
+1. Install the package
+    ```bash
+    npm install --save @pcdevil/eleventy-plugin-intl-utils
+    ```
+
+2. Add to your config file
+    ```javascript
+    // file: .eleventy.js
+    const intlUtils = require('@pcdevil/eleventy-plugin-intl-utils');
+
+    module.exports = function (eleventyConfig) {
+        // ...
+
+        const intlUtilConfig = {
+            locale: 'en-GB',
+        };
+        eleventyConfig.addPlugin(intlUtils, intlUtilConfig);
+    };
+    ```
+
+## Configuration object
+A general configuration object can be passed optionally via Eleventy config when the plugin is initiated. This sections lists the available configuration properties.
+
+### `locale`
+This property affects the output language of the filters. See [`locales` argument section on Intl page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument) for more info.
+
+- **Type**: String
+- **Default value**: `undefined` (**Node.js** will pick up the system's language)
+- **Example values**: `"en-GB"`, `"hu"`
+
+## Filters
+
+### `country_name`
+Transforms a country code into a country name. Useful to display author's location.
+
+- **Used Internationalization API**: `Intl.DisplayNames()` with _region_ type ([MDN article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames))
+
+#### LiquidJS Example
+
+```
+{% assign country = "FR" %}
+{{ country | country_name }}
+{% comment %} renders "France" when the `intlUtilConfig.locale` is `en` {% endcomment %}
+```
+
+### `language_name`
+Transforms a language code to a renderable text. Useful for language selectors or when the current language is displayed.
+
+- **Used Internationalization API**: `Intl.DisplayNames()` with _language_ type ([MDN article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames#using_type_language_with_languagedisplay))
+
+#### LiquidJS Example
+
+```
+{% assign language = "en-GB" %}
+{{ language | language_name }}
+{% comment %} renders "British English" when the `intlUtilConfig.locale` is `en` {% endcomment %}
+```
+
+### `short_datetime_format`
+Transforms a date string to a short date time text. Useful for blog post dates.
+
+- **Used Internationalization API**: `Intl.DateTimeFormat()` with _short_ date and time style ([MDN article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat))
+
+#### LiquidJS Example
+
+```
+{% assign postDate = "2021-12-12 17:36 +0100" %}
+{{ postDate | short_datetime_format }}
+{% comment %} renders "12/12/21, 5:36 PM" when the `intlUtilConfig.locale` is `en` {% endcomment %}
+```
+
+### `year_interval`
+Transforms two date strings to a year range. Useful when a larger time interval is presented.
+
+The input should be an array with two date string and the first one should precede before the second one.
+
+- **Used Internationalization API**: `Intl.DateTimeFormat.prototype.formatRange()` with _numeric_ year ([MDN article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange))
+
+#### LiquidJS Example
+
+```
+{% assign dates = "2011-05-16 11:00 +0200, 2020-03-01 00:00 +0100" | split: ", " %}
+{{ dates | year_interval }}
+{% comment %} renders "2011 – 2020" (with en dash in the middle) when the `intlUtilConfig.locale` is `en` {% endcomment %}
+```
+
+## License
+Available under the [MIT license](LICENSE.md).

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@pcdevil/eleventy-plugin-intl-utils",
+  "version": "0.2.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "A set of internationalization utils for Eleventy.",
+  "engines": {
+    "node": ">= 16.0.0"
+  },
+  "main": ".eleventy.js",
+  "scripts": {
+    "lint": "npx eslint ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pcdevil/eleventy-plugin-intl-utils.git"
+  },
+  "keywords": [
+    "11ty",
+    "blog",
+    "eleventy",
+    "internationalization",
+    "static-site",
+    "website"
+  ],
+  "author": {
+    "name": "Attila Gonda",
+    "url": "https://attilagonda.com"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/pcdevil/eleventy-plugin-intl-utils/issues"
+  },
+  "homepage": "https://github.com/pcdevil/eleventy-plugin-intl-utils#readme",
+  "devDependencies": {
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.2.0"
+  }
+}

package/src/country_name.js

@@ -0,0 +1,9 @@
+'use strict';
+
+function countryNameFactory (locale) {
+	const displayName = new Intl.DisplayNames([locale], { type: 'region' });
+
+	return (countryCode) => displayName.of(countryCode);
+}
+
+module.exports = countryNameFactory;

package/src/language_name.js

@@ -0,0 +1,9 @@
+'use strict';
+
+function languageNameFactory (locale) {
+	const displayName = new Intl.DisplayNames([locale], { type: 'language' });
+
+	return (language) => displayName.of(language);
+}
+
+module.exports = languageNameFactory;

package/src/short_datetime_format.js

@@ -0,0 +1,12 @@
+'use strict';
+
+function shortDateTimeFormatFactory (locale) {
+	const dateTimeFormat = new Intl.DateTimeFormat(locale, {
+		dateStyle: 'short',
+		timeStyle: 'short',
+	});
+
+	return (date) => dateTimeFormat.format(new Date(date));
+}
+
+module.exports = shortDateTimeFormatFactory;

package/src/year_interval.js

@@ -0,0 +1,11 @@
+'use strict';
+
+function yearIntervalFactory (locale) {
+	const dateTimeFormat = new Intl.DateTimeFormat(locale, {
+		year: 'numeric',
+	});
+
+	return ([startDate, endDate]) => dateTimeFormat.formatRange(new Date(startDate), new Date(endDate));
+}
+
+module.exports = yearIntervalFactory;