Components

Importing

    
        import Component from '../../components/Component.astro'
    

Inserting

All tags must be closed, which means when you add an element to the page, you must close it to indicate the beginning and the end of that element.

    
        <Component> Content goes here... </Component>
    

Notice how the component has two tags, one start tag and one end tag with a forward-slash. This allows us to insert content inside the element when supported.

    
        <Component />
    

Now, the component only has one tag, essentially combining both the start and end tag. The component will still load, but we cannot insert any content inside it.

Depending on that state, the behavior of the component might be different.

    
        <DisplayEquation title="Normalization to unit vector." id="rvv-eu1" background="True" equation="\\begin{aligned} \\hat{a} =\\frac{\\vec{a}}{a}\\end{aligned}"/>
    

    
        <DisplayEquation title="Normalization to unit vector." id="rvv-eu2" background="True" equation="\begin{aligned} \\hat{a} =\\frac{\\vec{a}}{a}\\end{aligned}" derivation="True">
    <p>Content goes here:</p>
    <DisplayEquation equation="\\vec{v} = \\vec{\\omega} \\times \\vec{r}"/>
</DisplayEquation>
    

Branding

For U of I affiliated pages, use the university specified branding. To change the color to text, you can either enter a hex code, or type in common color names.

    
        <span style="color: #000000">Text</span>
    

For handdrawn figures, use whatever color scheme you prefer, but make it consistent throughout the course.

• Background: white or transparent
• Objects: orange
• Loadings: red
• Reactions (ie; stress, strain, displacements, etc.): blue
• Axes and dimensions: black
• Fixed wall or ground: gray
• Other: green

General Page Format

The general format for a page is as follows. Parts can be removed as needed, but try not to rearrange them.

1. Section - Pagle title.
2. Page intro/description.
3. SubSection - Units.
4. SubSection -Notation and sign convention.
5. SubSection(s) - Page content.
6. SubSection -Applications.

1. Code for callout card (This will display at the top on mobile and on the right-hand side on desktops).
2. Figure.
3. Equation(s).
4. Text.
5. Repeat 2-4 as needed.

Section Types

Page Title

    
        import Section from "../../components/Section.astro"
    

Tag type: Regular

• title: Displays title of the page.
• id: Gives an id to the top of the page so it can be linked to in the navigation tree or other pages.

    
        <Section title="Title" id="example-page">
        <p>TEXT</p>
    </Section>
    

Page Sections

    
        import SubSection from "../../components/SubSection.astro"
    

Tag type: Regular

• title: Displays title of the section.
• id: Gives an id to the section so it can be linked to in the navigation tree or other pages.

    
        <SubSection title="Section" id="example-section">
        <p>TEXT</p>
    </SubSection>
    

Section

TEXT

Page Sub Sections

    
        import SubSection from "../../components/SubSubSection.astro"
    

Tag type: Regular

• title: Displays title of the sub section.
• id: Gives an id to the sub section so it can be linked to in the navigation tree or other pages.

    
        <SubSubSection title="SubSection" id="example-sub-section">
        <p>TEXT</p>
    </SubSubSection>
    

SubSection

TEXT

Page Sub Sub Sections

    
        import SubSection from "../../components/SubSubSubSection.astro"
    

Tag type: Regular

• title: Displays title of the sub sub section.
• id: Gives an id to the sub sub section so it can be linked to in the navigation tree or other pages.

    
        <SubSubSubSection title="SubSubSection" id="example-sub-sub-section">
        <p>TEXT</p>
    </SubSubSubSection>
    

SubSubSection

TEXT

Paragraph and Font Options

TEXT

New Paragraph

Tag type: Regular

• na

    
        <p> TEXT </p>
    

TEXT

Lists

Use when 2 or more things need to be listed.

    
        import Itemize from "../../components/Itemize.astro"
    import Item from "../../components/Item.astro"
    

Tag type: Regular

• na

    
        <Itemize>
        <Item>TEXT</Item>
        <Item>TEXT</Item>
    </Itemize>
    

• TEXT
• TEXT

Numbered Lists

Use when 2 or more things are in a process or order.

    
        import Enumerate from "../../components/Enumerate.astro"
    import Item from "../../components/Item.astro"
    

Tag type: Regular

• na

    
        <Enumerate>
        <Item>TEXT</Item>
        <Item>TEXT</Item>
    </Enumerate>
    

1. TEXT
2. TEXT

Multicolumn

    
        import Row from "../../components/Row.astro"
    import Col from "../../components/Col.astro"
    

Tag type: Regular

• values: list of breakpoints

A really powerful tool to create a responsive grid. These elements follow the same naming convention as the `Bootstrap` package. More details HERE. These elements treat the full width of the page as 12 units wide, and each `Col` can be defined to take however many units are necessary. Different values can be set for depending on the size of the screen. For example:

    
        <Row>
      <Col values="12 lg-6">
        <p>
            Row1Col1
        </p>
      </Col>
      <Col values="12 lg-6">
        <p>
          Row1Col2
        </p>
      </Col>
    </Row>
    

This means that by default, each column will be 12 units wide (full-screen), and if the screen is bigger than the `lg` value (in this case >992px), then it will only be 6 units wide (half-screen). Try reducing the size of your browser window, and notice how past a certain point, both elements below stack on top of each other.

This can be extended to many more `Col` elements. For example,

    
        <Row>
      <Col values="12 sm-6 md-4 lg-3">
        <p>
            Row1Col1
        </p>
      </Col>
      <Col values="12 sm-6 md-4 lg-3">
        <p>
          Row1Col2
        </p>
      </Col>
      <Col values="12 sm-6 md-4 lg-3">
        <p>
            Row1Col3
        </p>
      </Col>
      <Col values="12 sm-6 md-4 lg-3">
        <p>
            Row1Col4
        </p>
      </Col>
    </Row>
    

The above code means that when the screen is bigger than `lg` each element will occupy 1/4th of the screen. When between `lg` and `md`, it will occupy 1/3rd. When between `md` and `sm`, it will occupy 1/2, and below that will take up the entire screen. Resize your browser to see this behavior.

Italics

Tag type: Regular

• na

    
        <em>TEXT</em>
    

Bold

Tag type: Regular

• na

    
        <strong>TEXT</strong>
    

Underline

Tag type: Regular

• na

    
        <u>TEXT</u>
    

Other

Tag type: Regular

• style: many things can be added here such as color (shown below) and centering text ("text-align: center"). To include multiple style changes, separate them by a semicolon (;).

    
        <span style="color: green;">TEXT</span>
    

Mechref has three U of I specific colors defined as variables:

• --illini-blue: Illinois blue
• --illini-orange: Illinois orange
• --altgeld-orange: A darker version of orange, having more contrast than Illinois orange, meant to be more accessible.

    
        <span style="color: var(--illini-blue);">Text, </span><span style="color: var(--altgeld-orange);">and more text</span>
    

Make sure to wrap the variable with `var()`, and to not forget the `--`.

Navigation Tree

Tag type: Regular

1. Insert template code at the top of the page after the 'Layout' component and before the 'Section' component.
2. Edit the template code to match the structure of the page.
• If a section has a subsection (or subsection has a subsubsection), add the subsection lines before closing the section line (after closing the 'a' component and before closing the 'li' component).
• Closing the 'ul' component signifies that group of section type.
3. Change the id in the 'href=#' to match the 'id=' of the (sub)section.
4. Change the (sub)secton title in the 'a' component to match the 'title=' of the (sub)section.
5. Check all links work.

    
        <div slot="navtree">
    <ul class='list-group list-group-flush py-0'> 
        <li class='list-group-item py-0'><a class='text-decoration-none subsection' href='#id'>PgSectionTitle</a></li>
        <li class='list-group-item py-0'><a class='text-decoration-none subsection' href='#id'> PgSectionTitle </a>
            <ul class='list-group list-group-flush py-0'> 
                <li class='list-group-item py-0'><a class='text-decoration-none subsubsection' href='#id'> PgSubSectionTitle </a></li> 
                <li class='list-group-item py-0'><a class='text-decoration-none subsubsection' href='#id'> PgSubSectionTitle </a>
  	<ul class='list-group list-group-flush py-0'> 
               	 <li class='list-group-item py-0'><a class='text-decoration-none subsubsubsection' href='#id'> PgSubSubSectionTitle </a></li> 
                <li class='list-group-item py-0'><a class='text-decoration-none subsubsubsection' href='#id'> PgSubSubSectionTitle </a></li>  
    </ul>
    </li>  
                </ul>
            </li>  
        </ul>
    </div>
    

Inserting Links

Within Page

Tag type: Regular

• href: insert the id of the section you want to link to after the '#'.

    
        <a href="#id ">TEXT</a>
    

*For demonstration purposes, this links to the navigation bar section.

Internal Page

Tag type: Regular

• href: Change to the course code and page (.astro name) you want to link to. If you want to link to a specific section of the page, add '#id' with the corresponding id after the page name.

    
        <a href="/xxx/CoursePage">TEXT</a>
    

*For demonstration purposes, this links to vectors page in dynamics.

External Page

Tag type: Regular

• href: Change to the full link starting with the http:// of the page you wish to direct to.

    
        <a target="_blank" rel="noopener noreferrer" href="LINK">TEXT</a>
    

*For demonstration purposes, this links to a wikipedia page.

External Video

Tag type: Regular

• src: Change to the full link starting with the http:// of the page you wish to direct to and change the 'watch?v=' section of the link to 'embed/'.
• class: the number here is the % width of the page that the video takes up.

    
        <p class="m-0"><u>TEXT</u></p>
        <iframe src="LINK" class="w-100" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    

TEXT

*For demonstration purposes, this links to a YouTube video.

Callout Cards

There are 3 main callout card templates which are all shown here.

    
        import CalloutCard from "../../components/CalloutCard.astro"
    import CalloutContainer from "../../components/CalloutContainer.astro"
    

Tag type: Regular

• slot: should not change.
• title: title of the card when displayed. f left blank, defaults to "Did you know?".

Review

This card is used to connect back to material prior in the course or potential courses they may have already taken.

    
        <CalloutContainer slot="cards">
            <CalloutCard title="Review?">
                <p>
                   Need a review of <strong> SubSectionTitle </strong>?
                </p>
                <p>
                    This content has also been in <a href="/XXX/CoursePage">CourseName</a> 
                </p>
                <p>
                    CONTENT
                </p>
            </CalloutCard>
        </CalloutContainer>
    

Supplemental Material

This card is used to include supplemental material (ie; videos, webpages, open-source textbooks, etc.).

    
        <CalloutContainer slot="cards">
            <CalloutCard title="Extra!">
                <p class="m-0"><u>Supplemental video:</u></p>
                    CONTENT
            </CalloutCard>
        </CalloutContainer>
    

Extra Info

This card is used to connect to future content in the course or other courses students may take in the future.

    
        <CalloutContainer slot="cards">
        <CalloutCard title="Heads  up!">
            <p>
               <strong> SubSectionTitle </strong> builds on this content in COURSE.
              </p>
              <p>
                 CONTENT
              </p>
        </CalloutCard>
    </CalloutContainer>
    

Images

    
        import Image from "../../components/Image.astro"
    

Tag type: Self-closing (no caption) or regular (caption)

• src: URL to the image.
• width: A value between 1 and 7. A value of 7 means it will take up the full available width, and otherwise it will take up \( n/7\cdot100\% \).
• id: Gives an id to the image so it can be linked to in within the current page or from other pages. Optional.
• alt: The text to display in place of the image if it fails to load. Optional but recommended for accessibility reasons.
• class_: Give the image extra classes for styling. Optional.

Example:

    
        <Image src="/COURSE/FigFolder/FIGURE.png" width="7"> CAPTION</Image>
    

    
        <Image src="/COURSE/FigFolder/FIGURE.png" width="7"/>
    

CAPTION

Graphs

    
        import Plotly from "../../components/Plotly.astro"
    

• file_path: Links to the file containing the graph data. Required.
• id: Gives an id to the graph to ensure responsiveness, and proper loading of the graph. Required.

Mechref has support for integrating Plotly graphs. This very powerful library allows you to create interactive graphs in Python, and export them to a `.json` file, which can be loaded by Mechref. Plotly can be used to generate many types of graphs: line-charts, scatter plots, bar charts, histograms, etc. If you have never used this library before, we recommend starting with this page, which will show you how to make a basic line-chart. ChatGPT has also been a surprisingly reliable source of information on the many options one can add to a graph to make it look and feel exactly as desired.

    
        fig.update_layout(
        # Options ...
        height=500, 
        width=1200,
        # ... more options ...
    )
    

Once you have exported your graph data, place it in the same folder that you would an image. For example, if you wanted to add your graph to your first page, you would get:

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

And in this case, you would load your graph using in the following way:

    
        <Plotly id="graph" file_path="<course_abbreviation>/<page_1>/<graph_name>.json"/>
    

Result:

Equations

\( \LaTeX \) can be used inside your pages. Just like in Latex, we differentiate between inline-math and display-math. One difference betweem \( \LaTeX \) and these pages is when writing math in \( \LaTeX \), you use one backslash \( (\backslash) \), but in the reference pages you need to use two \( (\backslash \backslash) \).

Inline

    
        import InlineEquation from "../../components/InlineEquation.astro"
    

Type: Self-closing

• equation: Insert your LateX equation here.

    
        TEXT <InlineEquation equation="eq" /> TEXT.
    

Display

    
        import DisplayEquation from "../../components/DisplayEquation.astro"
    

Type: Self-closing (no derivation) or regular (derivation)

• equation: Insert your LateX equation here.
• title: Displays a title above the equation.
• id: Gives an id to the equation so it can be linked to in within the current page or from other pages. Required when derivation is set to "True". Also allows the proper function of the derivation menu.
• background: Adds the characteristic yellow background and black border around the equation when set to "True". This should always be set to True.
• derivation: Adds a "Derivation +" button to expand the derivation menu when set to "True".

Single

    
        <DisplayEquation equation="eq" title="TITLE" background="True" />
    

Multiple

    
        <DisplayEquation equation="\begin{align} eq1 \\ eq2 \\ eq3 \end{align}" title="TITLE" background="True" />
    

Derived

    
        <DisplayEquation equation="eq" title="TITLE" background="True" derivation="True" id="ID">
            <DisplayEquation equation="eq" />
            <DisplayEquation equation="eq" />
        </DisplayEquation>
    

Custom

    
        import DisplayEquationCustom from "../../components/DisplayEquationCustom.astro"
    

Type: Regular only

• title: Displays a title above the equation.
• id: Gives an id to the equation so it can be linked to in within the current page or from other pages. Required. Also allows the proper function of the derivation menu.
• background: Adds the characteristic yellow background and black border around the equation when set to "True". This should always be set to True.
• derivation: Adds a "Derivation +" button to expand the derivation menu when set to "True". Note: the use of the `<div slot="derivation"></div>` in the code.

    
        <DisplayEquationCustom title="TITLE" id="id" background="True" derivation="True">
            <div class="w-100 d-flex flex-row">
                <div class="w-50">
                    <InlineCanvas id="rcm-er-c" width="300" height="300" show_border="False" />
                </div>
                <div class="w-50">
                    <DisplayEquation equation="eq" />
                </div>
            </div>
            <div slot="derivation">
                <DisplayEquation equation="eq" />
                <DisplayEquation equation="eq" />
            </div>
        </DisplayEquationCustom>
    

Tables

    
        import DisplayTable from "../../components/DisplayTable.astro"
    

Type: Regular only

• id: Gives an id to the table to ensure proper responsiveness. Required.
• class_: Give the table extra classes for styling. Optional.
• class (in 'th', 'tr', or 'td'): customizations for the formatting. Optional.
• style (in 'th', 'tr', or 'td'): customizations for the formatting. Optional.

Note: The header content should be wrapped within the `thead` element, and the body content should be wrapped within a `tbody` element. There should only be one of each in your table. This allows for proper styling on our end, and is the HTML standard browsers expect, therefore deviating from this might break the look of your tables.

    
        <DisplayTable id="id" class_="mb-3">
        <thead>
        <tr>
            <th class="table-shaded" noborder>Title1</th>
            <th class="table-shaded">Title2</th>
            <th class="table-shaded">Title3</th>
            <th class="table-shaded">Title4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>row1col1</td>
            <td>row1col2</td>
            <td>row1col3</td>
            <td>row1col4</td>
        </tr>
        <tr>
            <td>row2col1</td>
            <td>row2col2</td>
            <td>row2col3</td>
            <td>row2col4</td>
        </tr>
        </tbody>
    </DisplayTable>
    

Customizations

The default settings will auto-adjust the column widths to fit the content placed in the cell. To specify a width for a given column, use 'style="width:##%" ' in appropriate the header component.

    
        <DisplayTable id="id" class_="mb-3">
            <thead>
            <tr>
                <th class="table-shaded" noborder>Title1</th>
                <th class="table-shaded" style="width:50%">Title2</th>
                <th class="table-shaded">Title3</th>
                <th class="table-shaded">Title4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>row1col1</td>
                <td>row1col2</td>
                <td>row1col3</td>
                <td>row1col4</td>
            </tr>
            <tr>
                <td>row2col1</td>
                <td>row2col2</td>
                <td>row2col3</td>
                <td>row2col4</td>
            </tr>
            </tbody>
        </DisplayTable>
    

Example:

    
        <DisplayTable id="id" class_="mb-3">
            <thead>
            <tr>
            <th noborder>Title1</th>
            <thclass="table-shaded">Title2</th>
            <th>Title3</th>
            <th>Title4</th>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td>row1col1</td>
            <td class="table-shaded">row1col2</td>
            <td>row1col3</td>
            <td>row1col4</td>
            </tr>
            <tr>
            <td>row2col1</td>
            <td class="table-shaded">row2col2</td>
            <td>row2col3</td>
            <td>row2col4</td>
            </tr>
            </tbody>
        </DisplayTable>
    

Examples

    
        import Example from "../../components/Example.astro"
    

Tag type: Regular

• title: Displays a title before the example is expanded.
• id: Gives an id to the equation so it can be linked to in within the current page or from other pages. Required when solution is set to "True". Also allows the proper function of the derivation menu.
• solution: Adds a "Solution +" button to expand the solution menu when set to "True".

    
        <Example id="ID" title="TITLE" solution="True">
        <div class="d-flex flex-row">
            <Row>
            <Col values="12 md-4">
                <p>
                QUESTION
                </p>
            </Col>
            <Col values="12 md-8">
                <Image src="IMAGE " width="7"></Image>
            </Col>
            </Row>
        </div>
        <div slot="solution">
            <p>
                CONTENT
            </p>
        </div>
    </Example>
    

+

Example Problem: TITLE #ID

QUESTION

Solution +

Solution

Notes

Tag type: none

• na

    
        <em>Note: </em> TEXT.
    

Warnings

    
        import Warning from "../../components/Warning.astro"
    

Tag type: Self-closing (does not expand) or regular (expands)

• title: Displays a title before the warning is expanded.
• id: Gives an id to the equation so it can be linked to in within the current page or from other pages. Required when rem,ove_button is not present or set to "False". Also allows the proper function of the derivation menu.
• remove_button: Removes the + button if the warning does not require more details

Expands.

    
        <Warning title="TITLE" id="id">
        CONTENT
    </Warning>
    

Does not expand.

    
        <Warning title="TITLE" id="ID_2" remove_button="True"/>
    

Code box

    
        import CodeBox from "../../components/CodeBox.astro"
    

Tag type: Self closing

• language: The language of the code used in the box.
• code: Insert the code here.
• closed_by_default: Will close the box whenset to "True". Optional.
• id: Gives an id to the equation so it can be linked to in within the current page or from other pages. Required when closed_by_default is set to "True". Also allows the proper function of the expanded menu.
• closed_height: Sets the height of the box when closed.

Open

    
        <CodeBox language="html" code=`
CODE
` id="test1" />
    

    
        CODE
    

Closed

    
        <CodeBox language="javascript" code=`
function lorem(ipsum, dolor = 1) {
const sit = ipsum == null ? 0 : ipsum.sit;
dolor = sit - amet(dolor);
return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
}
` closed_by_default="True" id="test2" closed_height="30" />
    

    
        function lorem(ipsum, dolor = 1) {
const sit = ipsum == null ? 0 : ipsum.sit;
dolor = sit - amet(dolor);
return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
}