Home

Welcome to the stormearthandlava.github.io wiki for guide writers!

Here you'll find information needed to give you a quick start. We'll use Markdown for most of our formatting. Please read this, if you want to know more about Markdown in general. Project specifics will be explained here further down below.

I want to write something!

What do you want to write? We have two categories. blog and guide

blog

blog-posts are shown on the front page, sorted by date, and therefore won't always be visible. Content like a log analysis guide, leveling guide, or a greetings post fit this category.

Location: blog/_posts/ Link

File name scheme: YYYY-MM-DD-your-custom-title-here.md

Minimal example:

---
layout: post
title: Your pretty title - will be shown on front page
date: YYYY-MM-DD hh:mm:ss
---
Content here. Use Markdown or html tags to make it pretty.

guide

guide-posts are previously discussed content, that are going to stay "active" for a long time, like talent overview, dungeon guide, or raid guide. There are three subcategories.

guide
- dungeons
- general
- raids
|- raid_name

Pages for guide-posts are usually prepared. But if you want or need to add a new page, make sure to add a link to the page to _data/site_structure.yml. This way your guide-post will appear in the top menu and appropriate side menu.

Location: guide/subcategory/ Link

File name scheme: descriptive_sane_short.md

Minimal example:

---
layout: page
title: Your pretty title
last_update: YYYY-MM-DD hh:mm:ss
game_version: X.Y.Z
---
Content here. Use Markdown or html tags to make it pretty.

Tooltips

To add a fancy tooltip to a spell or item we prepared some shortcuts. Shortcuts are organized in three categories.

• item
• spell
• talent

To create a "Lightning Bolt" text with tooltip and link to wowhead, you can write {{ site.data.spell.lightning_bolt }} into your Markdown text. You can always add the tooltip via its full name. Some abbreviations are pretty common and were added where appropriate. The Lightning Bolt example can be added as this too: {{ site.data.spell.lb }}. Either try out what works or read all already added shortcuts in _data/. All linked items are in item.yml, spells in spell.yml, and talents in talent.yml.

If a necessary shortcut is missing, please add it, or create an issue, so others can add it for you.

Images

Save location: assets/category/[subcategory/] Link

File name scheme: keep_it_sane.jpg (.jpg is just an example)

You can either include an image via Markdown or plain HTML. Markdown is easier but the image size can't be adjusted. If you need to change the size of an image, use the HTML verion.

![alternative name]({{ "/assets/img/category/[subcategory/]name_of_file.jpg" | absolute_url }})

Adjusting image size

![alternative name]({{ "/assets/img/category/[subcategory/]name_of_file.jpg" | absolute_url }}){:height="X" width="Y"}

Replace X and Y with numbers. You don't need to have both height= and width=. If only one is provided the proportions of the image are kept when resized.

Adding advanced information

If you want to add advanced information either do that at the end of your post or hide it in an extendable area. Please have a look at bootstrap collapse and use that. We adjusted the styling to match ours. Attention: If you want to keep including Markdown inside the html, you'll need to add markdown="1" to the innermost html tag.

Example

<div class="accordion" id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Advanced Information
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body" markdown="1">
        Your advanced information **with Markdown** should be here.
      </div>
    </div>
  </div>
</div>

Charts

If you want to add charts to a page or post, make sure to use the highcharts_page layout. Also you need to include a div with an id, which you'll then can use to add your chart into. Create the necessary javascript inside /assets/js/.

example_page.md:

---
layout: highcharts_page
title: Azerite Traits
last_update: 2018-06-22 09:00:00
game_version: 8.0.1
---
Hello World
<div id="example_chart"></div>
<script src="{{ "/assets/js/example_chart.js" | absolute_url }}"></script>

example_chart.js:

Highhcarts.chart(
  'example_chart', 
  {
    your highcharts data here
  }
);

Read up about charts and their options at highcharts.com.