Code Cheat Sheet

Alert shortcode

Alert shortcode is used for essential information or tips. Essential information should be in the primary colour and tips short be in the secondary colour.

Parameters

• title - free text title
• color - stylesheet defined colour name. primary is #b10024 and secondary is #a48545.
• alert text - free text placed inside the alert tags

{{% alert title="title goes here" color="colour goes here" %}}

Insert your alert text here

{{% /alert %}}

Example Shortcode

{{% alert title="Example alert shortcode" color="primary" %}}

This is an example alert shortcode. Colours defined in the site are ```"primary"``` (brand red #b10024) and ```"secondary"``` (brand gold #a48545).

{{% /alert %}}

Example Output

Imgproc shortcode

See Docsy Doc: imgproc shortcode

Add screenshots and other images using the imgproc shortcode. The shortcode will resize the image for you and place it inside a figure tag with a border to display neatly on the page.

The imgproc shortcode takes an image in the page bundle (basically the folder in which the document is located - see Docsy docs: Page bundles) and resizes it on page build based on the specified processing parameters. The Fit process is the only process in common use.

To add a screenshot using the imgproc shortcode:

1. Take a screenshot and place it in the same folder as the markdown page. The folder structure followed on this site is to create a folder with the name of the document and a single page index.md (see Hugo docs: Single page templates). This structure is followed for ease of site maintenance.
2. Name the screenshot a unique name. A semantic naming convention followed on most docs is: staff/student-docs + application + document name + interface element + action. A unique name is necessary to ensure that the shortcode processes the correct image.
3. Insert the imgproc shortcode, placing the filename in the first position.
4. Set the dimensions inside the third position.
5. As appropriate, add a caption between the open and close tags of the shortcode.

Parameters

• filename - unambiguous name of the image in the same page bundle as the document
• process - usually Fit. Could be Resize, Fill or Crop
• processing options - for fit width in pixels and height in pixels separated by “x” (e.g. 250x250)
• Image Caption - note: if annotating (see Annotate images), make sure this doesn’t move your annotations on different viewports

{{% imgproc “filename” Fit “processing options” %}}

image caption

{{% /imgproc %}}

Debug tip

Incorrect or ambiguous image names are a frequent cause of Hugo server errors. Following the staff/student-docs + application + document name + interface element naming convention strictly will help avoid these errors.

Example Shortcode

{{% imgproc "docs-site-code-cheat-sheet-example-imgproc" Fit "450x450" %}}

This is a sample code for an imgproc shortcode with caption. (Note that the pictured example shows syntax markup in VSCode).

{{% /imgproc %}}

Example Output

Page info shortcode

{{% pageinfo %}}

**Insert info text here**

{{% /pageinfo %}}

Example shortcode

{{% pageinfo %}}

This is a page info box.

{{% /pageinfo %}}

Example output

Youtube shortcode

{{< card header="$1" >}}

{{< youtube id="$2" title="$1" >}}

{{< /card >}}

Mermaid

The Mermaid diagramming and charting tool is installed on this site. For a guide to using Mermaid see the Mermaid Doc: Getting Started.

Mermaid flowchart

    ```mermaid
    flowchart LR
        style id1 fill:#ffffff,stroke:#413e39,stroke-width:2px
        style id1b fill:#ffebec,stroke:#413e39,stroke-width:2px
        style id2 fill:#f7f3ec,stroke:#413e39,stroke-width:2px
        style id3 fill:#ece5d5,stroke:#413e39,stroke-width:2px
        style id3b fill:#b79754,stroke:#413e39,stroke-width:2px
        style id4 fill:#740005,stroke:#413e39,stroke-width:2px,color:#ffffff;
        style id5 fill:#a00021,stroke:#413e39,stroke-width:2px,color:#ffffff;

        id1>$1]
        id2>$2]
        id3>$3]
        id4>$4]
        id5>$5]

        id1 --- id2 --- id3 --- id4 --- id5
    ```

HTML elements

Icon tables

Create table in excel with Y, o N. Upload CSV to Markdown Tables Generator. Find and replace with HTML below:

Field required

<i aria-hidden="true"  class="fa-regular fa-circle-check" title="Required field" style="color: #009400;"></i>  

Optional field

<i aria-hidden="true" class="fa-regular fa-circle" style="color: #898379;" title="Optional field"></i>

Field does not exist

<i aria-hidden="true" class="fa-regular fa-circle-xmark" style="color: #d10000" title="Field Does Not Exist"></i> 

Annotate images

Outer HTML

<div class="position-relative" style="max-width:1000px;">

</div>
<p>

Tippys

Change the following as required:

• href
• bg-primary or bg-secondary
• style left and top position
• data tippy content

<!-- Marker 1a: Section Description -->
<a href="#presentation-resources" class="screenshot-marker lh-1 fw-medium text-white position-absolute transform-center px-2 py-1 bg-primary rounded-circle" style="left: 26%; top: 1.5%" data-tippy-content="Section Description" aria-expanded="false">1</a>