Enhanced Markdown

Some parts of FF Logs let you use Enhanced Markdown when writing content (in particular, article titles and bodies can use Enhanced Markdown).

Enhanced Markdown has the typical properties of markdown, as well as access to extra components via angle bracket syntax (< and >).

The SiteTitle component

The <SiteTitle> component lets you write the current name of the site that the article is being viewed on.

The GameName component

The <GameName> component lets you write the current name of the game that the site the article is being viewed on centers around.

The SupportEmailLink component

The <SupportEmailLink> component lets you insert an email link for the support email address of the site that the article is being viewed on.

You can also customise the text that is displayed.

<SupportEmailLink>Send an email to the <SiteTitle> support team!</SupportEmailLink>

The DiscordInviteLink component

The <DiscordInviteLink> component lets you insert an invite link for the Discord server of the site that the article is being viewed on.

You can also customise the text that is displayed.

<DiscordInviteLink>Join the <SiteTitle> Discord!</DiscordInviteLink>

The Styled component

The <Styled> component lets you display styled text based on the type property.

The <Styled type="Gunbreaker">Gunbreaker</Styled> casts <Styled type="LimitBreak">Limit Break</Styled>.

However, extra shorthand components have been added to make this more concise:

The <Gunbreaker>Gunbreaker</Gunbreaker> casts <LimitBreak>Limit Break</LimitBreak>.

And, if you don't want to customise the colored text at all, you can leave it out and make things even more concise:

The <Gunbreaker> casts <LimitBreak>.

Here is an example list of all styles available across all games:

The ActorIcon component

You can add player spec icons within text using the <ActorIcon> component. Set the type property to be the class/spec combination that you want to show an icon for.

Healers: <ActorIcon type="Astrologian"> <ActorIcon type="Scholar"> <ActorIcon type="WhiteMage">

You can also add text inside the component, which will ensure that the text is appropriately colored based on the spec that the icon is showing:

There is a dark knight named <ActorIcon type="DarkKnight">Xyä</ActorIcon> and he likes to tank.
There is an astrologian named <ActorIcon type="Astrologian">Flucloxx</ActorIcon> and he likes to heal.
There is a bard named <ActorIcon type="Bard">Rustedarrow</ActorIcon> and he likes to deal damage.

The AbilityIcon component

You can add ability icons within text using the <AbilityIcon> component. It requires both the id of the spell and its icon. Additionally, set the type property to color based on spell school.

You can also add text inside the component to name the ability which will be colored based on the given type.

<AbilityIcon id={24312} icon="003000-003680.png">Dosis III</AbilityIcon> deals unaspected damage.

The EncounterIcon component

You can add encounter icons within text using the <EncounterIcon> component. Set the id property to be the FF Logs encounter id you want to show an icon for. You can check the rankings of an encounter to find its id appended to the url, e.g. boss=2512.

You can also add text inside the component.

<EncounterIcon id={83}>Proto-Carbuncle</EncounterIcon> is the first encounter of Abysssos.
<EncounterIcon id={1065}>Dragonsong's Reprise</EncounterIcon> is an encounter.
<EncounterIcon id={87}>Hephaistos II</EncounterIcon> is the final encounter of Abyssos.

The If component

The <If> component wraps content that should only render for certain sites. This is useful if a help article needs to give slightly different instructions depending on what site it is being viewed on.

<If warcraft>

This paragraph will only show on Warcraft Logs (retail or classic).

</If>

If no text is shown, you must not be on Warcraft Logs!

Or:

<If classicWarcraft eso>

This paragraph will only show on Warcraft Logs Classic and ESO Logs.

</If>

If no text is shown, you must not be on Warcraft Logs Classic or ESO Logs!

The Image component

You can include images with the <Image> component.

Available properties are:

• src: URL to the image
  • Must be provided and must start with https://assets.rpglogs.com
• alt: Description of the image
  • Must be provided
• width: Desired width in pixels
• height: Desired height in pixels

If src and alt are not provided, then the image will not show.

width and height are optional, and if only one is provided, then the other will be inferred based on the aspect ratio of the image.

For example:

Screenshot of our desktop client:

<Image src="https://assets.rpglogs.com/img/companion/warcraft-ingame-replay.png" alt="Desktop client being used to view the replay of a live logged fight">

Smaller:

<Image src="https://assets.rpglogs.com/img/companion/warcraft-ingame-replay.png" alt="Desktop client being used to view the replay of a live logged fight" width={150}>

The Video component

You can include videos with the <Video> component.

Available properties are:

• url: URL to the video embed. Currently, only YouTube is supported.
  • Must be provided and must include v= (you can copy and paste the URL from the browser)

For example:

<Video url="https://www.youtube.com/watch?v=dQw4w9WgXcQ">

The DescriptionList component

The <DescriptionList> component allows you to neatly format a list of terms and their descriptions.

<DescriptionList>
<Term>Tank</Term>
<Description>A player that ensures enemies are attacking them instead of their party members, and uses defensive abilities to survive the incoming damage.</Description>
<Term>Healer</Term>
<Description>A player that uses healing abilities to restore the health of their party members and prevent them from dying.</Description>
<Term>Damage Dealer</Term>
<Description>A player that uses damaging abilities as an excuse to ignore all mechanics. See: DPS.</Description>
</DescriptionList>

The Snippet component

<Snippet> allows authors to re-use sections of markdown in multiple areas, across multiple articles. A snippet can be made in the CMS by specifying a slug and a body. Then, display that body somewhere else by embedding the snippet.

This is an example snippet!

<_Snippet slug="example-1">

Snippets can include other markdown and components (but cannot include snippets).

<DiscordInviteLink>Join the <SiteTitle> Discord!</DiscordInviteLink>

<_Snippet slug="join-discord">

Note that the article preview page cannot unwrap snippets, so they will instead be replaced with placeholder text:

<_Snippet slug="join-discord">

The Tile component

You can use the <Tile> component to "frame" sections for emphasis or separation (all of the examples on this page use tiles).

<Tile>

Some content that needs to be framed.

</Tile>

The Collapse component

You can use the <Collapse> component to allow content to be shown and hidden by the user. The header property must be set.

<Collapse header="Some title">

Some content.

</Collapse>

If you format the header property like a markdown header, then you can create a more significant collapsible section.

<Collapse header="#### Some title">

Some content.

</Collapse>

Set the isCollapsed property to {false} if you want the section to be shown when the page initially loads.

<Collapse header="Some title" isCollapsed={false}>

Some content.

</Collapse>

<Collapse header="#### Some title" isCollapsed={false}>

Some content.

</Collapse>

One limitation of the header property is that it cannot accept < and > markdown tags. You can still write the characters, using < and &rt; respectively, but it won't render any additional markdown components.

The Arrow component

Very rarely, you might want to add an arrow to content. You can use the <Arrow> component directly with the direction property, or you can use the shorthands such as <Up>.

<Up> <Right> <Down> <Left>

The Center component

Some things, such as <Image>s, are centered automatically. If you ever need to force something to be centered, you can use the <Center> component.

<Center>

Something that makes sense to be centered for whatever reason.

</Center>

The Iframe component

Useful for when you want to embed one of our widgets in a help article. For example, this is Echo's Latest Progress embed.

<Iframe src="https://www.warcraftlogs.com/embed/guild-progress-tile/latest?guild=1546&difficulty=5" width="500" height="265" />

The src parameter is required. width defaults to 100%, height defaults to 400px, and scrolling defaults to no. If the defaults work for your use case, you do not need to include them.

The Divider component

Useful to divide content with a stylized horizontal line.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque sodales. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Dolor sed viverra ipsum nunc aliquet bibendum enim. Congue nisi vitae suscipit tellus mauris a. Urna cursus eget nunc scelerisque viverra. Id consectetur purus ut faucibus. Arcu bibendum at varius vel pharetra vel. Convallis convallis tellus id interdum velit laoreet. Dolor morbi non arcu risus quis varius quam quisque.

<Divider>

Egestas quis ipsum suspendisse ultrices gravida dictum. Feugiat vivamus at augue eget arcu. Duis tristique sollicitudin nibh sit amet. Proin nibh nisl condimentum id venenatis a condimentum vitae. Orci porta non pulvinar neque laoreet suspendisse. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Lectus magna fringilla urna porttitor. Turpis in eu mi bibendum. Eget sit amet tellus cras adipiscing enim eu turpis. Aliquet lectus proin nibh nisl condimentum id venenatis a condimentum. Vitae congue eu consequat ac felis donec. Bibendum est ultricies integer quis. Imperdiet dui accumsan sit amet nulla. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra.

The Bar component

You can add bars using the <Bar> component. It requires percent indicating its width relative to its container and optionally accepts a type for its color, defaulting to Physical.

Additionally, you may add context via a tooltip by passing a label.

Labels can also include other components. Take note of the different " and ' needed to properly escape content.