Components

Importing Components

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

Inserting Components

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 format of a page

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

Multi Column

Generally used in examples to put figures next to the question and tables. Can be used in other situations as needed.

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

Tag type: Regular

• values: value after 'md-' is the midpoint of the column.

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

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 Font Customizations

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>
    

Navigation Bar

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 a 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.

Different 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 Card

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 Card

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 Card

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.

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

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

CAPTION

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 Equations

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

Type: Self-closing

• equation: Insert your LateX equation here.

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

Display Equations

    
        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".

Simple equations

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

Multiple equations

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

Derived equations

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

Custom Equations

    
        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>
    

Table 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"
        import Row from "../../components/Row.astro"
        import Col from "../../components/Col.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" 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="html" 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) : [];
}