Support for `.astro` file

[SebinSong]

Problem

A .astro file is a component file used in the Astro web framework.
Currently this is not recognised by strings utility but would be helpful if it this is supported, for a project like groupincome.org that uses this framework to build the website.

There are a couple of things to note about .astro file.

1. Curly braces({...}) as JSX syntax.

.astro file uses JSX-like syntax to inject Javascript expressions into its HTML template and uses curly braces for it. For example:

---
const name = "Astro";
---

<div>
  <h1>Hello {name}!</h1>  <!-- Outputs <h1>Hello Astro!</h1> -->
</div>

Or for specifying html attributes like:

---
const name = "Astro";
---
<h1 class={name}>Attribute expressions are supported</h1>

This means if {} is used for variable replacements like below i18n.vue usage:

i18n(:args='{ name: chatRoomAttributes.name, ...LTags("strong") }') Yes, I want to {strong_}delete {name} permanently{_strong}.

This will results in a compile error if used in .astro file.

2. I18n instead of i18n

Astro follows a React-like convention where it distinguishes html tags from custom component tags by checking if the tag name starts with a captial letter or not(if captial, it is a custom component and an html tag if not). So i18n.astro component must be used as <I18n>...</I18n> in order for the content to be rendered properly. So updates for strings to recognise <I18n>...</I18n> with captial letter I as well is required as part of this issue.

Solution

• Making the utility recognise .astro file as well.
• Unless there is a better idea, could the pipe symbol | be used for variable replacements too? For example, .astro version of the above i18n example would be like this:

<I18n args={{ name: chatRoomAttributes.name, ...LTags("strong") }}>Yes, I want to |strong_|delete |name| permanently|_strong|.</I18n>

This is my own idea for the solution but if there is a better alternative, please go ahead with it.

[SebinSong]

Issue description has been updated with 2. above.