Mechanical Science & Engineering
MechSE Reference Pages

    Scroll back to top

    Mechref Component Docs

    The aim of using components is to maintain a consistant look and feel throughout the website, as well as being able to make changes without having to go through every page. When relevant, we've tried to maintain the LateX naming scheme for ease of use by those coming directly from it with little coding experience. For example:
    • \item => `Item`
    • \itemize => `Itemize`
    • \enumerate => `Enumerate`
    "Components" and "elements" will be used interchangeably throughout this document. I want to:

    How to import components

    Make sure to import the element at the top of the page before using it. If you get an error like `XXX is not defined`, this is typically what it's refering to. To import an element, use the following syntax:

    Text successfully copied to clipboard! 

        
        import Component from '../../components/Component.astro'
    , where `Component` refers to the name of the component you want to import.

    Inserting components into HTML page

    All HTML 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. Elements can be in two states: regular or self-closed. Regular means it follows the following convention:

    Text successfully copied to clipboard! 

        
        <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. Self-closing tags follow another convention:

    Text successfully copied to clipboard! 

        
        <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. For example, let's take the `<DisplayEquation>` component. When declared with self closing tags, it will simply be displaying an equation that take up the entire width of the screen (or whichever element it's inside of):

    Text successfully copied to clipboard! 

        
        <DisplayEquation title="Normalization to unit vector." id="rvv-eu1" background="True" equation="\\begin{aligned} \\hat{a} =\\frac{\\vec{a}}{a}\\end{aligned}"/>
    Normalization to unit vector. #rvv-eu1
    $$ \begin{aligned} \hat{a} =\frac{\vec{a}}{a}\end{aligned} $$
    But when in regular mode, whatever content we add inside of it will now be displayed inside the derivation menu:

    Text successfully copied to clipboard! 

        
        <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>
    Normalization to unit vector. #rvv-eu2
    $$ \begin{aligned} \hat{a} =\frac{\vec{a}}{a}\end{aligned} $$

    Content goes here:

    $$ \vec{v} = \vec{\omega} \times \vec{r} $$
    This concept is very important, and applies to almost every component. The different behaviors will be discussed when explaining the different uses of each component.

    Elements currently added

    Section:

    Type: Regular only

    Options:
    • 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.
    Example:

    Text successfully copied to clipboard! 

        
        <Section title="Example Page" id="example_page">
    <p>Lorem ipsum.</p>
</Section>

    Result:

    Example page

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla augue, interdum sed sapien non, dictum luctus risus. Maecenas pretium leo orci, condimentum vehicula libero scelerisque vel. Nulla hendrerit nunc a mauris elementum, id molestie augue dictum. Etiam convallis justo eu sem ultricies, sed ultricies tellus commodo. Nunc ac bibendum odio. Etiam non tincidunt mauris, vitae condimentum eros. Fusce id semper arcu, id dictum neque.

    SubSection:

    Same as Section, but with smaller title.

    Type: Regular only

    Options:
    • 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.
    Example:

    Text successfully copied to clipboard! 

        
        <SubSection title="Example Subsection" id="example_subsection">
    <p>Lorem ipsum.</p>
</SubSection>

    Result:

    Example Subsection

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla augue, interdum sed sapien non, dictum luctus risus. Maecenas pretium leo orci, condimentum vehicula libero scelerisque vel. Nulla hendrerit nunc a mauris elementum, id molestie augue dictum. Etiam convallis justo eu sem ultricies, sed ultricies tellus commodo. Nunc ac bibendum odio. Etiam non tincidunt mauris, vitae condimentum eros. Fusce id semper arcu, id dictum neque.

    SubSubSection:

    Same as SubSection, but with smaller title.

    Type: Regular only

    Options:
    • 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.
    Example:

    Text successfully copied to clipboard! 

        
        <SubSubSection title="Example SubSubsection" id="example_subsubsection">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla augue, interdum sed sapien non, dictum luctus risus. Maecenas pretium leo orci, condimentum vehicula libero scelerisque vel. Nulla hendrerit nunc a mauris elementum, id molestie augue dictum. Etiam convallis justo eu sem ultricies, sed ultricies tellus commodo. Nunc ac bibendum odio. Etiam non tincidunt mauris, vitae condimentum eros. Fusce id semper arcu, id dictum neque.</p>
</SubSubSection>

    Result:

    Example SubSubsection

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla augue, interdum sed sapien non, dictum luctus risus. Maecenas pretium leo orci, condimentum vehicula libero scelerisque vel. Nulla hendrerit nunc a mauris elementum, id molestie augue dictum. Etiam convallis justo eu sem ultricies, sed ultricies tellus commodo. Nunc ac bibendum odio. Etiam non tincidunt mauris, vitae condimentum eros. Fusce id semper arcu, id dictum neque.

    SubSubSubSection:

    Same as SubSection, but with smaller title.

    Type: Regular only

    Options:
    • 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.
    Example:

    Text successfully copied to clipboard! 

        
        <SubSubSubSection title="Example SubSubsection" id="example_subsubsubsection">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla augue, interdum sed sapien non, dictum luctus risus. Maecenas pretium leo orci, condimentum vehicula libero scelerisque vel. Nulla hendrerit nunc a mauris elementum, id molestie augue dictum. Etiam convallis justo eu sem ultricies, sed ultricies tellus commodo. Nunc ac bibendum odio. Etiam non tincidunt mauris, vitae condimentum eros. Fusce id semper arcu, id dictum neque.</p>
</SubSubSubSection>

    Result:

    Example SubSubsection

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla augue, interdum sed sapien non, dictum luctus risus. Maecenas pretium leo orci, condimentum vehicula libero scelerisque vel. Nulla hendrerit nunc a mauris elementum, id molestie augue dictum. Etiam convallis justo eu sem ultricies, sed ultricies tellus commodo. Nunc ac bibendum odio. Etiam non tincidunt mauris, vitae condimentum eros. Fusce id semper arcu, id dictum neque.

    Latex displaying elements

    These elements provide a wrapper for LateX equation, since we cannot use {} directly in the HTML, preventing us from writing complex equations. Make sure to double every backslash, e.g. \\vec => \\\\vec.

    DisplayEquation:

    This will create an element that takes the entire width of the element it's inside of, and is useful for important equations that deserve to be highlighted.

    Type: Self-closing & Regular

    Options:
    • 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".
    • derivation: Adds a "Derivation +" button to expand the derivation menu when set to "True".

    Self-closing:

    Will simply display equation. Example:

    Text successfully copied to clipboard! 

        
        <DisplayEquation title="Normalization to unit vector." id="rvv-eu" background="True" equation="Equation here"/>

    Result:

    Normalization to unit vector. #rvv-eu
    $$ \text{Equation here} $$

    Regular:

    But when in regular mode, whatever content we add inside of it will now be displayed inside the derivation menu:

    Text successfully copied to clipboard! 

        
        <DisplayEquation title="Normalization to unit vector." id="rvv-eu3" background="True" equation="Equation here" derivation="True">
    <p>Derivation goes here:</p>
</DisplayEquation>

    Result:

    Normalization to unit vector. #rvv-eu3
    $$ \text{Equation here} $$

    Derivation goes here:

    DisplayEquationCustom:

    Same as DisplayEquation, but provides a lot more freedom with how everything looks. Made for when equation boxes don't follow the format above.

    Type: Regular only

    Options:
    • 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".

    Text successfully copied to clipboard! 

        
        <DisplayEquationCustom title="Moment of inertia of prism." id="prism" 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="\\vec{r}_C = \\frac{\\ell_x}{2}\\hat{\\imath} + \\frac{\\ell_y}{2}\\hat{\\jmath}" />
        </div>
    </div>
    <div slot="derivation">
        <p>Derivation goes here:</p>
    </div>
</DisplayEquationCustom>
    Important: Note the use of the `<div slot="derivation"></div>`. This is required when adding a derivation inside a `DisplayEquationCustom` element.

    Result:

    Moment of inertia of prism. #prism
    $$ \vec{r}_C = \frac{\ell_x}{2}\hat{\imath} + \frac{\ell_y}{2}\hat{\jmath} $$

    Derivation goes here:

    InlineEquation:

    This will create an element that goes along with the text it's included with, and is useful for important equations that need to be part of a paragraph.

    Type: Self-closing only

    Options:
    • equation: Insert your LateX equation here.
    Example:

    Text successfully copied to clipboard! 

        
        <p>
    <InlineEquation equation="\\vec{F} = m\\vec{a}" /> is a very important equation you guys need to remember.
</p>

    Result:

    \( \\vec{F} = m\\vec{a} \) is a very important equation you guys need to remember.

    Callout card elements:

    CalloutContainer:

    To add callout cards, one first needs to add a `CalloutContainer` element within a section element (Section, SubSection, SubSubSection, etc.)

    Type: Regular only

    This element doesn't have options and follows the exact same naming convention everytime, don't forget to include `slot="cards"`:

    Text successfully copied to clipboard! 

        
        <SubSection title="Vectors">

<p>Vectors are really useful, they can be used in many ways and have fun properties.</p>

<CalloutContainer slot="cards">
    ... cards go here ...
</CalloutContainer>
</SubSection>

    CalloutCard:

    Must be within CalloutContainer.

    Type: Regular only

    Options:
    • title: If left blank, defaults to "Did you know?". Otherwise the title will be whatever you declare here.
    Example:

    Text successfully copied to clipboard! 

        
        <SubSection title="Vectors">

<p>Lorem ipsum.</p>

<CalloutContainer slot="cards">
    <CalloutCard title="Extras!">
        <p style="margin-bottom: 0px">Random image:</p>
        <img src="https://picsum.photos/200" />
    </CalloutCard>
    <CalloutCard>
        <p style="margin-bottom: 0px">Lorem ipsum.</p>
    </CalloutCard>
</CalloutContainer>
</SubSection>

    Result:

    Vectors

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla augue, interdum sed sapien non, dictum luctus risus. Maecenas pretium leo orci, condimentum vehicula libero scelerisque vel. Nulla hendrerit nunc a mauris elementum, id molestie augue dictum. Etiam convallis justo eu sem ultricies, sed ultricies tellus commodo. Nunc ac bibendum odio. Etiam non tincidunt mauris, vitae condimentum eros. Fusce id semper arcu, id dictum neque.

    Extras!

    Random image:

    Did you know?

    Lorem ipsum.

    Images:

    The `Image` component is used to display images with optional width and alt text (text displayed in case the image fails to load).

    Type: Self-closing & Regular

    Options:
    • 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.

    Self-closing:

    Will just display the image. Example:

    Text successfully copied to clipboard! 

        
        <Image src="/Solid_Mechanics/Bending-Figures/Geometry.png" width="5"/>

    Result:

    Regular:

    Anything contained within the `Image` tag will be treated as a caption. Example:

    Text successfully copied to clipboard! 

        
        <Image src="/Solid_Mechanics/Torsion-Figures/Equilibrium.png" width="3">
    <p>
        Wow that's a beautiful image
    </p>
</Image>

    Result:

    Wow that's a beautiful image

    Utility elements: