Components

In addition to basic Markdown syntax, our sites use custom MDX components to display media, interactive elements, and other rich content. Not all components are available on all sites.

Component	eLearning	New Work	PRIF Review	CNTR Monitor
Aside	No	No	Yes	Yes
Callout	No	No	No	Yes
Figure	Yes	Yes	Yes	Yes
Leadin	No	Yes	Yes	Yes
Lecture Video	Yes	No	No	No
Details	Yes	No	No	No
Flip Cards	Yes	No	No	No
Term	Yes	Yes	No	Yes
Related	Yes	No	No	No
Treaty	Yes	No	No	No
Resolution	Yes	No	No	No
Institution	Yes	No	No	No
LineChart	Yes	No	No	No
PieChart	Yes	No	No	No
LayeredMap	Yes	No	No	No

Aside

Display secondary information in smaller type.

<Aside title="This is the title of the aside">

This is the body of the aside. Markdown _is supported_.

</Aside>

Embed

Display external content in an iframe.

<Embed src="/treaty/index.html" size="large" />

Flip Cards

Display a set of flippable cards containing arbitrary Markdown content.

<FlipCards>
  <Card front="This the front of the card.">This is the back of the card.</Card>
  <Card front="This is another card">... and here's the back of that one.</Card>
</FlipCards>

Props

front: String (Required): Text to show on the front of the card. Shouldn't be longer than ~25 words to avoid overflow.

Leadin

Displays text in alternate typography to mark the beginning of an article or section.

<Leadin>The wealth of those societies</<Leadin> in which the capitalist mode of production prevails, presents itself as "an immense accumulation of commodities," its unit being a single commodity.

Lecture Video

<LectureVideo smil="lu19/lu19_vl4-2.smil" poster="https://nonproliferation-elearning.eu/learningunits/cyber/vid/lu19_vl4-2.jpg" subtitles="https://nonproliferation-elearning.eu/learningunits/cyber/vid/lu19_vl4-2.vtt" provider="video-stream">

This is the video's transcript. It can contain **bold**, _italics_, [links](#1), and most of the components listed below.

</LectureVideo>

Props

smil: String (Required). Path to a smil file on our existing server
subtitles: Strign (Required). Path to a .vtt file containing subtitles for the video
provider: String (Required). Defaults to video-stream.
poster: String (Optional). URL to a background image for the video.

Figure

Display an image.

<Figure
  size="large"
  src="ban-is-coming.jpg"
  caption="Campaigners dressed as nuclear bombs express confidence that a treaty banning nuclear weapons is on its way."
  credit="International Campaign to Abolish Nuclear Weapons / Tim Wright"
  license="cc-by-2"
  alt=""
></Figure>

Props

src: String (Required). The name of an image in the learning unit’s assets folder
alt: String (Required). Short, visual description of the image. If you're new to writing alt text, this article is a good reference.
size: String (Optional). How big should the image appear in the layout? Possible values are tiny, medium, large, huge, leftMargin, and rightMargin.
caption: String (Optional). Image caption
credit: String (Optional): Image credit
license: String (Optional). Must be a license_id defined in your site's content model.
discourageSaving: Boolean (Optional).

Term

Show an inline definition of a pre-defined term.

Agreements such as the <Term t="BWC">Biological Weapons Convention</Term> are designed to eliminate biological weapons.

Props

t: String (Required). Term to display. Must be a term_id defined in your site's content model.

Quote

Display a quotation.

<Quote type="document" fullDocument="https://en.wikisource.org/wiki/The_Chance_for_Peace" cite="Dwight D. Eisenhower, 'Chance for Peace', speech to American Society of Newspaper Editors.">

[...] Every gun that is made, every warship launched, every rocket fired signifies, in the final sense, a theft from those who hunger and are not fed, those who are cold and are not clothed. This world in arms is not spending money alone.

</Quote>

Props

type: String (optional, EUNPDC only). Possible values are document and default.
audio: String (Optional, EUNPDC only). Path to a valid .mp3 file in the unit's /asstes folder.
fullDocument: String (Optional, EUNPDC only). URL to the quote's source document.
cite: String (Optional).

Timeline/Event

Display a simple timeline of chronological events. Each event is represented by an <Event>-element containing arbitrary Markdown content.

<Timeline>
  <Event date="1675" title="Strasbourg Agreement">
    Signed between France and the Holy Roman Empire following the Siege of Groningen (1672), this treaty was the first international agreement banning the use of chemical weapons, specifically poisoned bullets.
  </Event>
  <Event date="1863" title="Lieber Code">
    The Lieber Code (named after its author, the legal scholar Franz Lieber) was a set of instructions issued by Abraham Lincoln to Union soldiers in the American Civil War.
  </Event>
</Timeline>

Event Props

date (Optional): When did the event take place? Currently, this is just String that’s not processed in any special way, but that might change in the future.
title (Optional): Title for the event.
collapsed (Optional): Minimize the event description on page load. Defaults to false.

Details

Display a collapsible section of arbitrary markdown content.

<Details summary="Biological weapons and materials" open>
  - 1925 Protocol for the Prohibition of Asphyxiating, Poisonous or Other Gases, and of Bacteriological Methods of Warfare - 1972 Convention on the prohibition of the development, production and stockpiling of bacteriological (biological) and toxin
  weapons and on their destruction (BWC)
</Details>

Props

summary (Required): Text to show when the section is collapsed
open (Optional). If this attribute is set, the details block will be expanded by default.

Wrap multiple <Details> components in a <DetailsGroup> component to display them as a coherent unit:

<DetailsGroup>
  <Details summary="...">...</Details>
  <Details summary="...">...</Details>
</DetailsGroup>

Tabs

Display an interactive tabs component.

<Tabs>
  <Tab title="Biological weapons and materials">Tab content A</Tab>
  <Tab title="Chemical weapons and materials">Tab content B</Tab>
  <Tab title="Nuclear and other radioactive material">Tab content C</Tab>
</Tabs>

Props

title (Required)

Callout

Show notes, warnings, or other important content in an expandable box.

<Callout eyebrow="Background" title="This is the title" expandable={false}>

This is the content of the callout. It can contain **bold**, _italics_, and other rich text and components.

</Callout>

Props

title: String (Optional)
eyebrow: String (Optional)
expandable: Boolean (Optional)

Resolution

Displays reusable information about a UN Resolution. See Data for information about data sources.

<Resolution name="S/RES/1540" />

Props

name (Required): Name of the resolution to show. Must correspond to an entry in /content/data/resolutions.json

Treaty

Displays reusable information about a treaty or other legal instrument. We currently treat all UN states, Niue, and the Cook Islands as potential members in all treaties. See Data for information about data sources.

<Treaty name="cwc" />

Props

name (Required): Name of the treaty to show. Must correspond to an entry in /content/data/treaties.json

Institution

Displays reusable information about an institution. See Data for information about data sources.

<Institution name="opcw" />

Props

name (Required): Name of the institution to show. Must correspond to an entry in /content/data/institutions.json

Quiz

Display an interactive quiz.

<Quiz>
  <Question type="MultipleChoice" question="What is the goal of arms control?" hint="Select all that apply.">
    <Choice correct="true" value="World peace" />
    <Choice value="Protection of civilians" />
    <Choice correct="true" value="Limiting the number of weapons" />
    <Choice value="Eliminating all weapons" />
  </Question>
  <Question type="Radio" question="Which instrument is considered the first attempt at arms control in modern history?">
    <RadioChoice correct="true" value="The Strasbourg Agreement" />
    <RadioChoice value="The Geneva Protocol" />
    <RadioChoice correct="true" value="The Lieber Code" />
    <RadioChoice value="The Hague Conference" />
  </Question>
</Quiz>

Props

type (Required): Possible values are MultipleChoice and Radio.
question (Required): The question text. Should end with a question mark.
correct
hint

BarGraph

The BarGraph component creates bar charts. It is ideal for displaying data that is categorized along the x-axis and represented as bars along the y-axis.

import ChartExampleTemperatureReduced from "../../data/charts-example-temperature-reduced.csv"
;<BarGraph
  data={ChartExampleTemperatureReduced}
  xAxis={"date"}
  xAxisTitle={"Date"}
  yAxisTitle={"temperature (in °C)"}
  series={["Austin", "San Francisco"]}
  colorRangeStart="#FF5733"
  colorRangeEnd="#33FF57"
  maxValue={100}
  title={"Example title"}
  description={"Example description"}
  legendTitle={"Example legend title"}
/>

Props:

data (Required) | Type: JSON or CSV data source
- Data source for the chart. ( Type: JSON or CSV data source)
xAxis | Type: String
- The data property (column) to be used on the x-axis. If this is not set, the first property (column) of the data source is used.
xAxisTitle | Type: String
- Title for the x-axis.
yAxisTitle | Type: String
- Title for the y-axis.
series | Type: Array
- Data properties (columns) to be read. If this is not set all the properties on the data source will be displayed.
colorRangeStart | String (Hexadecimal color code) | Default: '#6889a1'
- Starting color for bar color scale.
colorRangeEnd | String (Hexadecimal color code) | Default: '#203b54'
- Ending color for bar color scale.
maxValue | Type: Number
- Maximum value for the y-axis.
title | Type: String
- An optional chart title for accessibility purposes. This title will be read by a screen reader, but is not visible.
description | Type: String
- An optional chart description for accessibility purposes. This description will be read by a screen reader, but is not visible.
legendTitle | Type: String
- An optional chart legend title for accessibility purposes. This chart legend title will be read by a screen reader, but is not visible.

Data Format:

date	New York	San Francisco	Austin
2011-10-01	63.4	62.7	72.2
2011-10-02	58.0	59.9	67.7
2011-10-03	53.3	59.1	69.4
2011-10-04	55.7	58.8	68.0
2011-10-05	64.2	58.7	72.4
2011-10-06	58.8	57.0	77.0
2011-10-07	57.9	56.7	82.3
...	...	...	...

In this example the date column would be used as the x-axis unless another name is given via the xAxisproperty. The other columns will be displayed as the bars.

LineChart

The LineChart component is designed to create line charts. It is suitable for displaying data over a continuous range, such as time series data.

import ChartExampleTemperatureReduced from "../../data/charts-example-temperature-reduced.csv"
;<LineChart
  data={ChartExampleTemperatureReduced}
  xAxis={"date"}
  xAxisTitle={"time"}
  yAxisTitle={"temperature (°F)"}
  series={["Austin", "San Francisco"]}
  colorRangeStart="#FF5733"
  colorRangeEnd="#33FF57"
  xAxisDateOptions={{
    year: "numeric",
    month: "numeric",
  }}
  title={"Example title"}
  description={"Example description"}
  legendTitle={"Example legend title"}
/>

Props:

data (Required) | Type: JSON or CSV data source
- Data source for the chart. ( Type: JSON or CSV data source)
- The column used for the xAxis must contain either a Number or a date in the following format: yyyy-mm-dd
xAxis | Type: String
- The data property (column) to be used on the x-axis. If this is not set, the first property (column) of the data source is used.
xAxisTitle | Type: String
- Title for the x-axis.
yAxisTitle | Type: String
- Title for the y-axis.
series | Type: Array
- Data properties (columns) to be read. If this is not set all the properties on the data source will be displayed.
colorRangeStart | String (Hexadecimal color code) | Default: '#6889a1'
- Starting color for line color scale.
colorRangeEnd | String (Hexadecimal color code) | Default: '#203b54'
- Ending color for line color scale.
xAxisDateOptions | Type: Object | Default: { month: 'long' }
- Options for formatting dates on the x-axis.
- The object can contain the properties:
  - weekday -> long, short, narrow
  - year -> numeric, 2-digit
  - month -> numeric, 2-digit, long, short, narrow
  - day -> numeric, 2-digit
title | Type: String
- An optional chart title for accessibility purposes. This title will be read by a screen reader, but is not visible.
description | Type: String
- An optional chart description for accessibility purposes. This description will be read by a screen reader, but is not visible.
legendTitle | Type: String
- An optional chart legend title for accessibility purposes. This chart legend title will be read by a screen reader, but is not visible.

Data Format:

date	New York	San Francisco	Austin
2011-10-01	63.4	62.7	72.2
2011-10-02	58.0	59.9	67.7
2011-10-03	53.3	59.1	69.4
2011-10-04	55.7	58.8	68.0
2011-10-05	64.2	58.7	72.4
2011-10-06	58.8	57.0	77.0
2011-10-07	57.9	56.7	82.3
...	...	...	...

In this example the date column would be used as the x-axis, unless another name is given via the xAxis property. The other columns will be displayed as the lines.

PieChart

The PieChart component is designed to create pie charts. It is useful for displaying data as a part of a whole, where each category represents a portion of the whole.

import MapExampleCountries from "../../data/map-example-countries.csv"
;<PieChart data={MapExampleCountries} title={"Example title"} description={"Example description"} legendTitle={"Example legend title"} />

Props:

data: Array (Required). Data for the chart. Can be a plain array or pulled from a csv or json via import.
colors: Array (Optional). Colours for the map. Used as-is for categorical data, for numerical data the first two values are used to compute a gradient scale. Default: ['#6889a1', '#203b54'].
title: String (Optional). A title for screen reader users.
description: String (Optional). An optional description for screen reader users.
legendTitle: String (Optional). An optional title legend title for screen reader users

Data Format:

name	ISO_A3_EH	value
United Kingdom	GBR	68
Germany	DEU	22
Ghana	GHA	45

Following column names are mandatory:

name: serves as the identifier for a pie piece
value: column will be used to calculate the pie piece size.

LayeredMap

The Layered Map component is a customizable React component that allows you to display a world map with various data layers. It can overlay different types of information on the map, such as country statistics and markers.

Display a world map as a base layer.
Add multiple data layers to the map.
Currently supports two types of data layers: "CountryStatisticsLayer" and "MarkerLayer".

Use SVG Crowbar to save maps as SVG for further editing or video use.

<LayeredMap
  centerLat={30} // map center latitude
  centerLong={0} // map center longitude
  mapScale={10} // map scale (zoomed in)
  legendPosition="top-right" // Legend position
  title="My Custom Map" // Map title
  description="This is a custom map with data layers." // Map description
  legendTitle="Legend" // Legend title
>
  {/* Add data layer components here */}
</LayeredMap>

Props

children | Type: React Component(s)
- The children should contain one or more of the specified data layer components. These data layer components will be layered on top of the base map. Other types of components will not be rendered.
centerLat | Type: Number | Default: 0
- Sets the latitude (vertical position) at which the map should be centered.
centerLong | Type: Number | Default: 0
- Sets the longitude (horizontal position) at which the map should be centered.
mapScale | Type: Number | Default: 1
- Specifies the scale or zoom level of the map. The higher the value the more it is zoomed in.
layout (optional): See Figure
legendPosition | Type: String | Default: 'top-left'
- Determines the position of the legend on the map. You can set it to one of the following values: 'top-left', 'top-right', 'bottom-left', or 'bottom-right'.
title | Type: String
- An optional map title for accessibility purposes. This title will be read by a screen reader, but is not visible.
description | Type: String
- An optional map description for accessibility purposes. This description will be read by a screen reader, but is not visible.
legendTitle | Type: String
- An optional legend title for accessibility purposes. This description will be read by a screen reader, but is not visible.

DataLayers

CountryStatisticsLayer

The CountryStatisticsLayer can be used within the LayeredMap component. This component provides the capability to color countries on the map based on given values from a data source, which can be either JSON or CSV format.

import MapExampleData from "../../data/map-example-countries.csv"
;<LayeredMap>
  <CountryStatisticsLayer data={MapExampleData} statisticsGroupName="Population Percentage" legendSize={4} roundLegendValues={false} projection="mercator" renderLegend={true} colorRangeStart="#FF5733" colorRangeEnd="#33FF57" />
</LayeredMap>

Props

The CountryStatisticsLayer component accepts the following props:

data: Array (Required). Data for the chart. Can be a plain array or pulled from a csv or json via import.
colors: Array (Optional). Colours for the map. Used as-is for categorical data, for numerical data the first two values are used to compute a gradient scale. Default: ['#6889a1', '#203b54'].
statisticsGroupName: String (Required). Label for the legend.
legendSize: Integer (Required). Sets the number of visible thresholds in case of numerical data. Default: 5.
roundLegendValues: Boolean (Optional). Should legend values be rounded? Default: true.

Data Format

name	ISO_A3_EH	value
United Kingdom	GBR	68
Germany	DEU	22
Ghana	GHA	45

Following column names are mandatory:

ISO_A3_EH: Identifies a specific country
value: Plotted value

MarkerLayer

The MarkerLayer can be used within the LayeredMap component. This component provides the capability displaying multiple markers on the map.

import MapExampleLocations from "../../data/map-example-locations.csv"
;<LayeredMap>
  <MarkerLayer markerGroupName="Lorem Ipsum Kraftwerke" data={MapExampleLocations} />
</LayeredMap>

Props

The MarkerLayer component accepts the following props:

markerGroupName (Required) | Type: String
- The markerGroupName prop is required and serves as the label for the legend.
data (Required) | Type: JSON or CSV data source
- The data prop is required and is used to provide the location data of the markers.

Data Format

Name	lat	long
Dombarovskiy	51°01'27.29"N	59°47'58.11"E
Uzhur	55°16'05.74"N	89°44'50.15"E
Kozel’sk	53°56'37.77"N	35°46'10.36"E

Following column names are mandatory:

lat: The latitude coordinate of the marker.
long: The longitude coordinate of the marker.

The longitude and latitude values need to be either a DD (Decimal Degrees) or DMS (Decimal, Minutes, Seconds) format.

Components

Aside

Embed

Flip Cards

Props

Leadin

Lecture Video

Props

Figure

Props

Term

Props

Quote

Props

Timeline/Event

Event Props

Details

Props

Tabs

Props

Callout

Props

Resolution

Props

Treaty

Props

Institution

Props

Quiz

Props

Related

Props

BarGraph

Props:

Data Format:

LineChart

Props:

Data Format:

PieChart

Props:

Data Format:

LayeredMap

Props

DataLayers

CountryStatisticsLayer

Props

Data Format

MarkerLayer

Props

Data Format

Clone this wiki locally