Start Here

Start here to get a basic understanding of how this site works.

1. The Basics

1.1 Pages are text files

Every page on this site is a text file in a bigger folder. It looks a little like this:

• Directoryfrog-docs contains the entire site

  • Directorysrc

    • Directorycontent/docs contains the site's pages

      • Directoryclasses

        • hoppers.mdx
        • spotting.mdx
        • ...
      • Directoryentertainment

        • birthday-parties.mdx
        • camp.mdx
        • ...
      • Directoryoffice

        • aerial-silks.mdx
        • closures.mdx
        • ...
      • Directorymanual

        • start-here.mdx you are viewing this right now!

1.2 Text is written in "Markdown"

You can write normally in the files, but the website will look plain. There's no formatting tools like in Google Docs, so we write in a language called Markdown. Markdown is just normal text, but with extra symbols (like #, -, or *) added for style and formatting. For full examples of what Markdown can do, and how to use it, see this Markdown Guide ↗.

What is '.mdx'?

Did you notice that all the text files above end in .mdx, and not .txt? .mdx stands for 'markdown extended'.

Example

What you write

**This is bold.**  
*Italic.*  
***Bold and italic!***
- A bullet point.
  - A nested bullet point.

How it looks

This is bold.
Italic.
Bold and italic!

• A bullet point.
  • A nested bullet point.

1.3 Edit files with 'Visual Studio Code'

If you've never seen written code before, this might look intimidating on first glance. Don't panic!

When you think of editing text files, you might think to use Notepad, but we want something even better. We will use a program called Visual Studio Code ↗ (VSCode). It's like a fancy Notepad. It's both a browser AND editor for our files (plus some other stuff, too).

1.4 Saving changes with Github

Think of saving your text files like saving a game. Right now, you only have access to one save slot (we'll call it Save Slot 1). Every time you save, you overwrite Save Slot 1. If you mess up, there's no way to go back without completely restarting the game. So, what if there was a way we could create a new Save Slot every time we made changes?

That's what Github ↗ is for. It's an online place where we can store, see, and access all our saves.

2. Managing Pages

2.1 Editing pages

1. Navigate to the page's file using the File Explorer in VSCode (left side of the app).
2. Click the file's name to open it in the editor in VSCode (middle of app).
3. Edit the text and use CTRL+S to save!

CTRL+S

This saves the files on the computer you are using, but does not save it to Github. We'll cover how to do that part later.

2.2 Creating new pages

1. Navigate to frog-docs/src/content/docs/ using the File Explorer in VSCode (left side of the app).
2. Right click the folder you want the page to be under (ex. pages related to coaching should go in the 'Coaching' folder).
3. Select 'New File'
4. VSCode will automatically prompt you to enter a name for the file. Name it something obvious (stations.mdx) and hit 'Enter'.