Setup your page on MechRef

GitHub access

Mechref uses GitHub as a version-control and collaboration platform. While the project's files are public, only those with access can edit them. To gain access, email Professor Matt West (mwest@illinois.edu) to be added as a collaborator. Once granted, use this guide to set up a local version of the website, allowing you to quickly make and visualize your changes before they are published online.

Setup your course

Before adding your page, decide on a name and abbreviation for your course. This abbreviation will be used in all links referring to your course's pages, e.g., the abbreviation for Solid Mechanics is "sol", therefore the link to the "Bending" page will be "/sol/bending". Ideally, the abbreviation should be short but distinct, and cannot contain any spaces or special characters. Here is a table with all existing courses and their abbreviated names: Once an abbreviation has been chosen, add it to this table above, then copy the file at "src/pages/about/example/home_page.astro", rename it with your abbreviated name, and move it to "src/pages/<course_abbreviation>.astro". Also create a folder with your course abbreviation. Your file structure should look like this:

    
        public
    src
    |--> components
    |--> layouts
    |--> pages
         |--> <course_abbreviation>
         |--> <course_abbreviation>.astro
    

Once your folder and home page have been created, decide on how many pages you will have, as well as all their names. Once that is done, to get started, copy the example page which is located at "src/pages/about/examples/example.astro" into your folder, and rename it. Once again, no spaces or special characters, so for example, "Stress Transformation" becomes "stress_transformation". Repeat until you reach your desired amount of pages. You should now have the following structure:

    
        public
    src
    |--> components
    |--> layouts
    |--> pages
         |--> <course_abbreviation>
              |--> <page_1>.astro
              |--> <page_2>.astro
              |--> <page_3>.astro
         |--> <course_abbreviation>.astro
    

Now, if you have the pages locally running on your computer, they should be accessible at http://localhost:4321/<course_abbreviation>/<page_1> (replace <course_abbreviation> and <page_1> with your respective course abbreviation and page names). Note that while the pages have ".astro" as their file extension, the links to those pages do not include it.

If you plan on adding images or animations to your course, make sure to create a new folder in `public` as well, with your course abbreviation. You should now have the following structure:

    
        public
        |--> <course_abbreviation>
             |--> <course_page>_Figs
                  |--> <image>.png
        src
        |--> components
        |--> layouts
        |--> pages
             |--> <course_abbreviation>
                  |--> <page_1>.astro
                  |--> <page_2>.astro
                  |--> <page_3>.astro
             |--> <course_abbreviation>.astro
    

Make your pages discoverable

Course menu

Once you have decided on how many pages your course will contain and what their names will be, you need to update your home page with the links to all these pages. From the template that you previously copied, add edit all the necessary items (course names, page links, page names, etc.).

Navigation bar

Next step is to add your course to the navigation bar at the top of the page. Open the file "src/components/Navbar.astro". Scroll down until the part that says

    
        <!-- ADD YOUR COURSE HERE -->
    

Include the piece of code in the box below at that location. Edit everything to fit your course name, course abbreviation, etc., and add the same links as on your home page, make sure however that the links contain "?origin=sidebar" and not "?origin=coursemenu", as the distinction is essential for analytics purposes.

    
        <li class="dropdown mega nav-item ">
                <a class="nav-link dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-label="About" onclick="window.location.href='/<course_abbreviation>'">
                    <span><course_name></span>
                </a>
                <div class="dropdown-menu tile-list px-2" id="mainnav-<course_abbreviation>"> 
                    <div class="d-flex">
                        <section class="tile menu white-box col">
                            <h2><a href="/<course_abbreviation>"><course_name></a></h2>
                                <ol style="column-fill: balance; columns: x <= how many columns do you want your menu to have?;" class="course-menu">
                                    <li><a href="/<course_abbreviation>/page1?origin=sidebar">Page 1</a></li>
                                    <li><a href="/<course_abbreviation>/page2?origin=sidebar">Page 2</a></li>
                                    etc...
                                </ol>
                        </section>
                    </div>
                </div>
            </li>
    

Add content to your pages

Now that all the files are properly set-up and accessible, refer to the Style Guide & Documentation to discover all the elements at your disposal to add content to your pages (equations, images, etc.).