This documentation contains internal website specifications, architecture diagrams, and administrative workflows. Please log in with a Discord account holding a Hawthorne Staff role to view this page.
For more information, please see the Discord Login Explanation.
Markdown Author’s Guide
Every document needs to start with “front matter” - a small block at the very top that tells the website about your page. Without this, the document won’t be added automatically into the site after uploading.
Copy this format:
Hawthorne Guild
---
layout: doc
title: "Your Page Title Here"
order: 10
background_image: /assets/images/fieldguide-back.png
---
What each part means:
| Front Matter Part | Optional / Mandatory | Description | Example | |||
|---|---|---|---|---|---|---|
layout: |
Mandatory | Always use this (tells the site to format it as a documentation page) | layout: doc |
|||
title: |
Mandatory | The title that appears at the top of the page and in the menu | title: Your Page Title Here |
|||
order: |
Mandatory | A number that determines where it appears in the menu (lower numbers = higher up) | order: 10 |
|||
background_image: |
Optional | adds a background image to the page | background_image: /assets/images/fieldguide-back.png |
|||
toc: |
Optional | if true, adds a table of contents on the right side | toc: true |
Tips:
---) at the start and end!Headings create section titles in your document. Use the # symbol:
Syntax:
# Heading 1 (Largest)
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6 (Smallest)
How it looks:
Note: Always add a break after each heading, e.g.
## Heading 2
start the paragraph after a linne break
A lot of this is exactly like discord syntax
Syntax:
**This text is bold**
How it looks: This text is bold (appears darker and thicker)
Syntax:
*This text is italic*
How it looks: This text is italic (appears slanted)
When to use: For emphasis, book titles, or to highlight something subtly.
Syntax:
***This text is bold and italic***
How it looks: This text is bold and italic
Syntax:
- First item
- Second item
- Third item
- Nested item (add 2 spaces before the dash)
- Another nested item
- Fourth item
How it looks:
Tips:
-), asterisk (*), or plus (+) - they all work!Syntax:
1. First step
2. Second step
3. Third step
1. Sub-step (add 3 spaces before the number)
2. Another sub-step
4. Fourth step
How it looks:
Tips:
1. 1. 1. 1. and it will display as 1. 2. 3. 4.Syntax:
[Text people click on](https://example.com)
Example:
Check out the [D&D Beyond website](https://www.dndbeyond.com) for more info.
How it looks: Check out the D&D Beyond website for more info.
For internal links (other pages on our site):
Easiest to just go to the page and copy the link. Note you can go to a header of a section of a page, hover over it and you’ll see an anchor icon. Click on it to link to
that specific heading on that specific page. It should look something like http://url_of_page/#section_name
Similarly, if you’re linking to a heading WITHIN THE SAME PAGE, just link to the #section_name
Tips:
[] is what people see() is where they go when they clickTables are great for organizing information like stats, schedules, or rules.
Syntax:
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
| Data 7 | Data 8 | Data 9 |
How it looks:
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
| Data 7 | Data 8 | Data 9 |
Tips:
|) separate columns---) in the second row separate the header from the contentAlignment in tables:
| Left-aligned | Center-aligned | Right-aligned |
|:-------------|:--------------:|--------------:|
| Text | Text | Text |
:--- = left-aligned:---: = center-aligned---: = right-alignedToo complicated? I made an Google Sheet tool that will spit out the right markdown for tables MARKDOWN TABLE MAKER
Blockquotes are perfect for highlighting important information, rules, or quotes.
Syntax:
> This is a blockquote.
> It can span multiple lines.
>
> It can even have multiple paragraphs!
How it looks:
This is a blockquote. It can span multiple lines.
It can even have multiple paragraphs!
Styling: Blockquotes appear with a burgundy left border, italic text, and are slightly indented.
When to use: DM notes, important warnings, actual quotes from NPCs or lore books.
For small snippets like commands or technical terms.
Syntax:
Use the `!quest` command to see your active quests.
How it looks: Use the !quest command to see your active quests.
Styling: Code appears in a monospace font with a light tan background.
For longer code or formatted text you want to preserve exactly as written.
Syntax:
```
This is a code block.
Everything here keeps its exact formatting.
Even weird spacing!
```
How it looks:
This is a code block.
Everything here keeps its exact formatting.
Even weird spacing!
Create a visual break between sections with a horizontal line.
Syntax:
---
or
***
How it looks: A tan/gray line that spans the width of the page (see the dividers throughout this document!)
When to use: To separate major sections or topics.
Syntax:
```
**Example:**
```markdown
Tips:
[] is the “alt text” - describes the image for screen readersYou can create colored alert boxes using HTML (don’t worry, it’s simple!):
Info Box (Blue):
<div class="alert-info">
📘 <strong>Note:</strong> This is helpful information for players.
</div>
Warning Box (Yellow):
<div class="alert-warning">
⚠️ <strong>Warning:</strong> This rule is strictly enforced!
</div>
Danger Box (Red):
<div class="alert-danger">
🚫 <strong>Important:</strong> Breaking this rule may result in a ban.
</div>
Success Box (Green):
<div class="alert-success">
✅ <strong>Tip:</strong> This is a great strategy for new players!
</div>
When mentioning Discord roles, you can use special CSS classes to color them correctly:
Syntax:
<span class="role-adventurer">Adventurer</span>
<span class="role-trial-dm">Trial DM</span>
<span class="role-full-dm">Full DM</span>
<span class="role-auditor">Auditor</span>
<span class="role-lore">Lore Team</span>
<span class="role-rules">Rules Team</span>
<span class="role-engineer">Engineer</span>
<span class="role-admins">Admins</span>
<span class="role-pr">Player Relations</span>
How it looks:
| What You Want | Syntax | Example |
|---|---|---|
| Heading | ## Heading Text |
## Heading Text |
| Bold | **bold** |
bold |
| Italic | *italic* |
italic |
| Link | [text](url) |
|
| Bullet List | - item |
• item |
| Numbered List | 1. item |
1. item |
| Code | `code` |
code |
| Quote | > quote |
Indented italic text |
| Horizontal Rule | --- |
─────────── |