Welcome to the Dreamgrove contributing guide! This document will help you get started with contributing to our NextJS / Tailwind website.

1. Fork the repository by clicking here

2. Clone the repository:

   git clone git@github.com:your-username/react-dreamgrove.git
   cd react-dreamgrove
   

3. Install dependencies:

   npm install
   

4. Run the development server:

   npm run dev
   

• Posts and Guides: These are stored in the data/ folder as .mdx files

All the following React components can be directly used in .mdx files

This component is used to display tooltips for World of Warcraft content.

Props:

• id: The Wowhead entity ID.
• name: Display name (optional, defaults to Wowhead name).
• type: Type of the Wowhead content (e.g., spell, item, npc). Used to build the wowhead.com/{type}={id} query
• disabled: Removes link and tooltip, displays text only (default: false).
• noIcon: Hides the icon (default: false).
• beta: Queries wowhead.com/beta (default: false).

Example Usage:

# Compendium

This is an NPC: <Wowhead type="npc" id="39625"/>. Kill him

Omitting the ID for Spells: The id field is optional if the type is a spell and the name is specified.

<Wowhead type="spell" name="Starsurge"/>

This will work for most Druid spells. Check spellData.json to confirm if the spell is present.

Spells Markdown Shortcode: There is a markdown shortocde for spells that can be used in .mdx files. Use ![id]|name! to easily insert them:

Use !Fury of Elune! if you are in !194223|CA!

!Fury of Elune! will look for the spell in spellData.json and find the correct id !194223|CA! will use the id for Celestial Alignment and show the correct tooltip, but will just display "CA" for the name

Both will be replaced with the correct component

Checkboxes are used to dynamically show/hide <li> tags. All checkboxes that use the radio function need to be wrapped within one .

It is good practice to logically group multiple checkboxes in such a component even if radio isn't used.

Props:

• id, spellId, name, type (default: spell), disabled: these are equivalent to the component props
• radio: Group ID for radio behavior.
• defaultCheck (default: false): Default Checkbox state on page load. (true = checked)
• isText (default: false): Renders the name prop as text instead of querying wowhead

Example Usage:

<CheckboxProvider>
  <Checkbox
    id="Adaptive Swarm"
    spellId={391889}
    name="Adaptive Swarm"
    defaultCheck
    radio="Adaptive Swarm"
  />
  <Checkbox id="Unbridled Swarm" spellId={391951} name="Unbridled Swarm" radio="Adaptive Swarm" />
</CheckboxProvider>

Controlled Elements:

The checkboxes control list items that must be defined in the following way: - [*id] text. A ~ can be used like this: - [*~id] text to invert the display behavior.

- [*one] this will be shown only if the checkbox with id "one" is checked
- this will be shown always
- [*~two] this will be shown only if the checkbox with id "two" is unchecked
- [*~three] this will be shown only if the checkbox with id "three" is unchecked
  - this will be shown only if the checkbox with id "three" is unchecked
  - [*two] this will be shown only if the checkbox with id "three" is unchecked AND the checkbox with id "two" is checked

Displays a dropdown with a talent build fetched from Raidbots.

Props:

• name: Display name in the collapsible.
• talents: Raidbots talent string to fetch.
• mimiron: Queries mimiron.raidbots instead of www.raidbots (default: false).

This file contains a database of spells which are used to avoid specifying spellIDs each time. It is generated by fetch_data.js.

Running the Script:

node fetch_data.js

Overriding Abilities: To override incorrect or conflicting spell IDs, add them to the localOverwrites variable in fetch_data.js:

const localOverwrites = {
  Cyclone: '33786',
  'Ability Name': 'abilityId',
}

Remember to run the script again after changes.

• NextJS Documentation
• Tailwind CSS Documentation
• MDX Documentation

# Checkout to a new branch
git checkout -b feature/your-feature

# Add your changes
git add -A

# Commit your changes
git commit -m "feat: description of changes"

# Verify that the website builds correctly
npm run build

# Push the changes
git push origin feature/your-feature

After doign this go to the repository on GitHub and open a PR.