Component Reference

Using the components

To use these components, you need to:

• ensure your Markdown file uses the .mdx extension
• import the component(s) you want to use below the frontmatter section but before any other page content, using a declaration such as:

import Character from '/src/components/Character.astro';

If your component content doesn’t show up on the rendered page, check it has the .mdx extension and that you’ve imported the component correctly.

Additional examples of using these components can be found in Component Coredata Examples.

Currently-recommended components

ArticlesList component

Displays a list of articles associated with the given tag.

Required import

import ArticlesList from '/src/components/ArticlesList.astro';

Syntax

<ArticlesList [tag="..."] [subset="articlelibonly|topicsonly"] [header="..."] />

Property	Description
tag	optional tag to filter the articles listed
subset	optional subset of articles to display, either articlelibonly or topicsonly
header	optional header text to display above the list

Unless subset is defined, the component lists contents from both the Article Library and Topic pages.

Example

Source

<ArticlesList tag="encoding" subset="articlelibonly" header="Encoding Articles" />

Result

Encoding Articles

• Glyph Variant for open o - Description of glyph variants for the Latin character "open o" and their recommended use cases.

---

BibEntry component

Displays a single source in a format suitable for a formal bibliography. Used by the BibList component, but may also be used independently.

Required import

import BibEntry from '/src/components/BibEntry.astro';

Syntax

<BibEntry key="..." />

Property	Description
key	source record id in YAML file

Example

Source

<BibEntry key="alone1946" />

Result

Alone, John Philip Herbert Mackenzie. The Alone-Stokes Short Manual of the Amharic Language (with vocabularies). Macmillan, 1946.

---

BibList component

Displays a list of related sources in a format suitable for a formal bibliography.

Required import

import BibList from '/src/components/BibList.astro';

Syntax

<BibList tag="..." [header="..."] [entrytype="non-online|article|etc."]/>

Property	Description
tag	optional tag to filter the articles listed; all will display all items; if the tag is omitted nothing will be displayed
header	optional header text to display above the list
entrytype	type of sources to display; valid values are online, article, book, inbook, inproceedings, misc, non-online, all; defaults to all types

Example

Source

<BibList tag='script-cham' header='Bibliography' entrytype='non-online' />

Result

Bibliography

• Blood, Doris. “The ascendancy of the Cham script: how a literacy workshop became the catalyst”. International Journal of the Sociology of Language, vol. 2008, no. 192, 2008, pp. 45-55, http://dx.doi.org/10.1515/IJSL.2008.034.
• Brunelle, Marc. “Diglossia, Bilingualism, and the Revitalization of Written Eastern Cham”. 2008.

---

SourceLinksList

Displays a list of related sources using an informal format.

Required import

import SourceLinksList from '/src/components/SourceLinksList.astro';

Syntax

<SourceLinksList tag="..." [header="..."] [entrytype="online|article|etc."]/>

Property	Description
tag	optional tag to filter the articles listed; ‘all’ will display all items; if the tag is omitted nothing will be displayed
header	optional header text to display above the list
entrytype	type of sources to display; valid values are online, article, book, inbook, inproceedings, misc, non-online, all; defaults to all types

Example

Source

<SourceLinksList tag='script-gran' header='External Links' entrytype='online' />

Result

External Links

• Grantha (ScriptSource)  
• Grantha script (Wikipedia)  
• Grantha Alphabet (Omniglot)  

---

Character component

Required import

import Character from '/src/components/Character.astro';

Syntax

<Character usv="XXXX"|char="a" [options="usv,char,name"]/>

Note: Either usv or char must be provided.

Property	Description
usv	The USV of the character to display
char	A literal character
options	A comma-separated list of options to display. Options are usv, char, and name. The default is all three.

Inline examples

This example uses the default options, where all three elements appear.

<Character usv="0634"/>

Result: U+0634 ش ARABIC LETTER SHEEN

This example uses just usv and char options:

<Character usv="0634" options="usv,char"/>

Result: U+0634 ش

List example

• U+0020 SPACE
• U+0636 ض ARABIC LETTER DAD

Combining marks

Combining marks are automatically displayed with a dotted circle to indicate their combining nature.

<Character usv="0301"/>

Result: U+0301 ◌́ COMBINING ACUTE ACCENT

---

Directive syntax

:usv[XXXX]
:char[a]
:usv[XXXX]{usv char name}
:char[a]{usv char name}

These directives are able to work in both .md and .mdx files. Please note the :char directive is a little more limited, and cannot accept any whitespace, or certain meta characters without escaping \[, \{, or wrapping in inline code quotes. Astro processes directives after smart quote translation, so :char['] produces U+2019 ’ RIGHT SINGLE QUOTATION MARK instead or the expected U+0027 ' APOSTROPHE.
The following attributes are supported which correspond to the component’s options= attribute.

Attribute	Description
usv	Display the USV
char	Display the character
name	Display the Unicode name

No specified attributes displays all three by default

Inline examples

This example uses the default options, where all three elements appear.

:usv[0634]

Result: U+0634 ش ARABIC LETTER SHEEN

This example uses just usv and char options:

:usv[0635]{usv char}

Result: U+0635 ص

This example shows the use of :char

:char[` `] and :char[@]{name char}

Result: U+0020 SPACE and @ COMMERCIAL AT

List example

• U+0020 SPACE
• U+0636 ض ARABIC LETTER DAD
• U+0024 $ DOLLAR SIGN

Table example

USV	Char	Name	Phoneme
U+0628	ب	ARABIC LETTER BEH	/b/
U+0633	س	ARABIC LETTER SEEN	/s/
U+0634	ش	ARABIC LETTER SHEEN	/ʃ/
U+0645	م	ARABIC LETTER MEEM	/m/

---

Components in development

Caution

These components are prototypes for possible future use: their specification is not yet agreed. You are welcome to try them out and give feedback, but be aware that they will likely change.

---

CharacterTable component

Required import

import CharacterTable from '/src/components/CharacterTable.astro';

Syntax

<CharacterTable startUsv="XXXX" endUsv="XXXX" [caption="..."]/>

Property	Description
startUsv	The Unicode scalar value of the first character to display
endUsv	The Unicode scalar value of the last character to display
caption	The caption to display below the table

Examples

Source

<CharacterTable
  startUsv = "0627"
  endUsv   = "0632"
  caption  = "Arabic characters 0627-0632"
/>

Result

USV	Char	Unicode Character Name
U+0627	ا	ARABIC LETTER ALEF
U+0628	ب	ARABIC LETTER BEH
U+0629	ة	ARABIC LETTER TEH MARBUTA
U+062A	ت	ARABIC LETTER TEH
U+062B	ث	ARABIC LETTER THEH
U+062C	ج	ARABIC LETTER JEEM
U+062D	ح	ARABIC LETTER HAH
U+062E	خ	ARABIC LETTER KHAH
U+062F	د	ARABIC LETTER DAL
U+0630	ذ	ARABIC LETTER THAL
U+0631	ر	ARABIC LETTER REH
U+0632	ز	ARABIC LETTER ZAIN

Arabic characters 0627-0632

---