feat: Style guide (#439)

#### Description

Addition of a style guide page to the wiki, which outlines best
practices and style across the wiki to ensure consistent approaches
across resources, as well as explaining how and when to add and use
various features (Such as checklists, steps, etc)

src/content/docs/game-design/godot/dungeoncrawler/1-player/index.mdx

@@ -1,7 +1,7 @@
 ---
 type: tutorial
 unitTitle: Creating our player
-title: Setting up our player.
+title: Setting up our player
 description: Creating our player scene and scripts
 ---
 

src/content/docs/tuhura-tech/contribute.mdx

@@ -38,10 +38,13 @@ Static assets, like favicons, can be placed in the `public/` directory.
 
 Modifying existing content is straightforward as it can be done through the GitHub web UI once you click the `Edit page` button on the associated wiki page. It can also be done through a local copy of the wiki by modifying the md/mdx file.
 
+
 ### Adding new content
 
 Adding new content is a bit more involved then modifying new content as you have to create the required folder if needed and then add the new files into `astro.config.mjs`.
 
+Check out the [Style Guide](../style) for contribution style best practices 
+
 <details>
   <summary>Adding new <ins>tutorial</ins> content...</summary>
   File Structure:
@@ -62,6 +65,12 @@ At the start of the [number].mdx files
 type: tutorial
 title: 'My Page Title'
 ```
+To import necessary modules
+```md
+import Checklist from '/src/components/tutorial/Checklist.astro';
+import Box from '/src/components/tutorial/Box.astro';
+import { Steps } from '@astrojs/starlight/components';
+```
 
 At the end of **every** mdx file
 ```md

src/content/docs/tuhura-tech/style.mdx

@@ -0,0 +1,348 @@
+---
+title: Contribution Style Best Practices
+description: Details on how to best structure and layout your contributions
+---
+
+
+import Checklist from '/src/components/tutorial/Checklist.astro';
+import Box from '/src/components/tutorial/Box.astro';
+import { Steps } from '@astrojs/starlight/components';
+import { FileTree } from '@astrojs/starlight/components';
+
+:::note[Markdown]
+For more general info on Markdown syntax, take a look at the [Markdown Guide](https://www.markdownguide.org/basic-syntax/#overview)
+
+This wiki is built using the Starlight framework. Take a look at [Starlight](https://starlight.astro.build/) and the [Astro docs](https://docs.astro.build/en/getting-started/) for more information about how the wiki is built!
+:::
+
+This is a guide on how to structure your contributions to the wiki! Ensuring that the content you create is accessible and structered correctly. 
+Though please keep in mind that contributions are always wanted! There are no consequences for getting things wrong; at most, we might ask you to tweak a few things.
+
+With all that said, let's go over how to structure your pages!
+
+There are two main types of contributions you'd be wanting to make:
+
+1. Single-page short overviews and guides
+2. Multi-page projects and tutorials
+
+Depending on what you're adding, some things will change, but we'll cover everything!
+
+:::note[Getting set up]
+For more information on how to get set up to contribute, take a look at the [Contribute doc](../contribute)
+
+Also take a look at the [Contribution Manual](https://github.com/Tuhura-Tech/wiki/blob/main/CONTRIBUTING.md) on our Github.
+:::
+
+First, let's cover how to approach and think about what we're going to write
+
+## Writing the content
+
+We'll cover all the things you can add to your contribution, but what about writing the content itself? Unfortunately, this is a hard thing to define with strict rules and examples!
+But, our focus is to engage and teach those who come to the wiki looking to learn! 
+
+One of the best approaches to writing this kind of material is the [Diátaxis approach](https://diataxis.fr/) which we highly recommend you take the time to read! 
+
+In most of our resources, we're taking the **Tutorial approach** as outlined by Diátaxis. This means that the learner, the person engaging with your resource, should learn through **Doing.** They should come out the other end with something they've **Made** with your resource serving to guide them through the process of this creation. 
+However, we should never be withholding information under the guise of the reader "Figuring it out themselves." Our role as resource creators is to provide a structured and safe environment for the reader to learn and create. Often even identifying potential mistakes or pitfalls the reader could encounter, and addressing them in the tutorial.
+
+You'll also find **Reference** style pages on the wiki (Such as the page on [Classes and object oriented programming](../../python/classes)) Which contain direct, clear and referenceable information about a particular topic. 
+
+You may even find pages that fit best under the **How-To guide** category (This page for example) or the **Explanation** category! 
+
+What's most important, is knowing what type of page **you're** setting out to right, and how to approach writing it. 
+
+Take a look at the [Diátaxis approach](https://diataxis.fr/) figure out which category your contribution fits best under, take some time to understand what it should and shouldn't have, and then get stuck in! 
+
+We can't wait to see what you write! Let's move onto how to structure and style your contribution! Starting with adding a new page.
+
+## Adding a new page to the wiki
+
+Adding a page is simple! However it'll be different depending on if you just want a single page guide, or if you want to make a multi-step tutorial.
+Generally large projects should always be multi-page tutorials, whereas small guides about single topics should be single pages.
+
+### Adding one page
+
+To add a page, you'll want to open up the local copy of the Wiki you've cloned, and find the folder that matches the topic you want to add your page to!
+You'll add a new page, name it something about your topic, and end it with **.mdx**
+
+For example, if I wanted to make a page for Godot about setting up a third-person camera, i'd do something like:
+
+<FileTree>
+- src/
+    - content/
+      - godot/
+        - 3rdPersonCam.mdx
+
+</FileTree>
+
+In this page, you'll at the very top want to add something like this:
+
+```md
+---
+title: 3rd Person Camera Setup
+description: A guide on how to set up a third-person camera for Godot
+---
+```
+
+The **Title** will be what actually shows up in the navigation bar, so keep it short, but descriptive!
+
+
+### Making a multi-page tutorial
+
+Making a multi-page tutorial is a little more involved, and has a few more things you'll need to do to make it work! If you get confused, take a look at the Godot Dungeon Crawler, and see how that's set up.
+
+<Steps>
+
+1. First, you'll again want to navigate to the folder for the subject you want to cover, though this time you'll create a folder to hold your pages, named something relevant to your tutorial.
+
+2. Inside this, you'll want to create a folder for **each** page/step in your tutorial, with the names of the pages starting with the step number, starting from 0.
+
+3. Inside each of these folders, you'll want a page called **index.mdx** 
+
+4. That's a lot of steps! So here's an example of how that might look if you were making a tutorial on making a 3rd person game in Godot with health and enemies
+
+    <FileTree>
+    - src/
+        - content/
+        - godot/
+            - 3rdPersonGame/
+                - 0-setup/
+                    - index.mdx
+                - 1-3rdPersonCam/
+                    - index.mdx
+                - 2-health/
+                    - index.mdx
+                - 3-enemies/
+                    - index.mdx
+
+    </FileTree>
+
+5. Each of these pages should have headings that look like something like this:
+
+    ```md
+    ---
+    type: tutorial
+    unitTitle: Getting started
+    title: Setting up our scene
+    description: Creating our player scene and scripts
+    ---
+    ```
+    The **type** should always be tutorial
+
+    The **unitTitle** is what will show up on the right-side navigation for your tutorial.
+
+6. The final, and most complicated step, is to add a link to your **0** folder inside `astro.config.mjs`
+
+    If you take a look at the file, you'll get a pretty good idea of how it should look! Find the section that has the `label` for your topic, and add a link, which for our example would be under `label: "Game Design"` and would look something like this:
+
+    ```md
+        {
+            label: "3rd Person Game",
+            link: "game-design/godot/3rdPersonGame/0-setup/"
+        },
+    ```
+    Test your addition using `npm run dev` and see if it shows up!
+
+    Remember: There are no consequences to getting this wrong! Try and solve any errors you get, and if you get stuck, ask for help!
+
+</Steps>
+
+:::note[Checkboxes]
+Each page of a multi-step tutorial **Must** have a checkbox at the bottom, which we'll cover later in this guide!
+:::
+
+## Headings
+
+Headings denote new major sections of your contribution, and should be used only for distinct sections covering something new. They create new major sections on the right-side navigation bar, to allow for easy navigation between the important sections of your contribution.
+
+Headings can be added like this:
+
+```md
+## Your heading here
+```
+
+### Sub-Headings
+
+Sub-headings work similarly to Headings, and denote new sections <i>Within</i> the topic designated by the heading. These should be used to break down the major topic into sub-topics or sections. They also create sub-sections on the right-side navigation bar, allowing for navigation between the sub-headings.
+
+Sub-headings can be added like this:
+
+```md
+### Your sub-heading here
+```
+
+Note that a sub-heading will belong to the nearest Heading **Above** it
+
+Headings and sub-headings should be used to control the flow of your contribution, and prevent it from becoming one big wall of text. They can let the reader know when they're moving onto something new, and also allow them to quickly jump between sections!
+
+## Notes and Tips
+
+Notes and Tips can be used to add extra information or context in a way that stands out to the reader as being important! 
+
+Notes are great for Information like if the guide will only work with a particular version of software! 
+
+Tips on the other hand are great for providing some extra information to the reader, such as where to find a particularly hard-to-find feature, or a time-saving suggestion, or even just something you've learnt through trial and error. 
+
+Notes look like this:
+
+:::note[Note heading]
+Note text, here is where your information will be!
+:::
+
+and are added like this:
+
+```md
+:::note[Note heading]
+Note text, here is where your information will be!
+:::
+```
+
+and Tips look like this:
+
+:::tip 
+Here's a useful tip!
+:::
+
+
+and are added like this:
+
+```md
+:::tip 
+Here's a useful tip!
+:::
+```
+
+Think of notes and tips as a way to add extra context for the reader. Notes fit great below a heading or sub-heading to provide context for a situation. Tips work great after asking the reader to do something, or explaining how something works.
+
+## Inserting Code
+
+One of the most important things to make sure your contribution is useful and easy to follow is the way you integrate the code you want the reader to write!
+
+Adding code itself is easy, and can be done using Backticks like this:
+
+```
+​```
+print("hello")
+print("World!")
+​```
+```
+You can also optionally denote a language for syntax highlighting, for example
+
+```
+​```python
+print("hello")
+print("World!")
+​```
+```
+
+Would look like this:
+
+```python
+print("hello")
+print("World!")
+```
+### When to add code
+
+It's important when going over code that you show each new section on its own, as well as showing the script in its entirety at the end. This helps to give the reader context for what they've just added. For example:
+<Steps>
+1. Let's add the variables:
+
+    ```python
+    a = 1
+    b = 2
+    ```
+
+2. Then we'll create a function
+
+    ```python
+    def add():
+        print(a + b)
+    ```
+
+3. Giving us this so far:
+
+    ```python
+    a = 1
+    b = 2
+
+    def add():
+        print(a + b)
+    ```
+</Steps>
+## Steps
+
+Steps are another important way to ensure that your guide is clear and readable! Infact you've already seen them used in the step before! 
+Steps should always be used when covering a multi-step process, and are often a great fit under a sub-heading!
+
+First, to use steps, you'll need to import the required module. This can be done by adding 
+
+```md
+import { Steps } from '@astrojs/starlight/components';
+```
+
+To the top of each page using steps!
+
+Steps can be added like this:
+
+:::tip
+It's very important that the content of each step be indented correctly! Only the lines with the step numbers should not be indented!
+:::
+
+```md
+<Steps>
+1. First step title
+    Here's the content of the first step
+    steps can be as long as you want!
+2. Second step title
+    They can even contain other things covered in this guide, such as codeblocks
+    ​```python
+        print("hello world!")
+    ​```
+3. Third step title
+    Steps allow the reader to nicely follow along, and should be used where applicable
+</Steps>
+```
+## Multi-page tutorials
+
+The content in the next two sections is mostly applicable to multi-page tutorials, but can still be useful to understand even if you're only writing a single page guide!
+
+## Checklists
+
+The end of every page of multi-step tutorials **must** have a checklist. Which first need to be imported using:
+
+```md
+import Box from '/src/components/tutorial/Box.astro';
+import Checklist from '/src/components/tutorial/Checklist.astro';
+```
+
+Checklists will look like this: 
+
+<Box icon="check-list">
+
+### Checklist name
+<Checklist>
+- [ ] I've read this doc
+- [ ] I'm ready to add my awesome idea to the wiki
+</Checklist>
+</Box>
+
+and are added like this:
+
+```md
+
+<Box icon="check-list">
+
+### Checklist name
+<Checklist>
+- [ ] I've read this doc
+- [ ] I'm ready to add my awesome idea to the wiki
+</Checklist>
+</Box>
+```
+
+## Need help?
+Take a look at other pages on the wiki, and see how they work! Remember, changing things on your local copy **Only** changes them for you! So there's no risk to messing around and figuring out how things work! Just make sure you don't submit those changes when it's time to create a Pull Request!
+
+If you have any questions about contributing, or need help with anything, everyone in [our Discord](https://discord.com/invite/PNxh7cwKfQ) would be more than happy to give you some pointers!
+
+Also remember to read the documentation! The [Starlight](https://starlight.astro.build/) and [Astro docs](https://docs.astro.build/en/getting-started/) have a ton of information about how to build wiki pages.