Skip to content

Template - How to Build a Page

This page has just about all of the examples we should be using to build the site. Mkdocs material has a lot of features that are already built-in and able to be incorporated using markdown. We can also customize/add our own (may require a bit of javascript/css formatting) - for example the modal button is custom, and uses in-line html. For any other ideas feel free to add others or create your own!

Text Block

example text here
example text here

Numbered Lists

  1. Use Markdown
    1. With These Indents
      • Another sub-list
    2. Item 2

Modals

  • Modals make is easy to store code snippets in a clickable button
  • Includes a pop up window, a copy button, close button
  • Notice the format is "inline html" this can be used instead of markdown syntax, but must be understood

The close button is inside of a span, and these icons can also be used to apply to your pages, see below for the example, as well as how its defined in the modal

<span class="material-icons btn-cyber btn-close" onclick="toggleModal('modal-docker-example', null)" style="cursor: pointer;">cancel</span>
- close - Similar to "cancel" but with a different design, often used for cancel operations.
- clear - Another clear or delete icon, straightforward and effective.
- remove - Often used for deletion but less aggressive than a trash icon.
- exit_to_app - Indicates an exit or leave action, which could metaphorically represent closing.
- highlight_off - A more emphasized version of a delete or close icon.
- backspace - Represents removal or going back, which could be conceptually similar to closing.
- keyboard_arrow_down - If you want to imply minimization rather than closing, this could be a creative choice.
View logs, add -f to follow the logs: 
docker logs -f <container_id>
View logs for a specific number of lines: 
docker logs --tail 100 <container_id>
View logs with timestamps, the --details flag shows extra details: 
docker logs --details --timestamps <container_id>
Add --since and --until to view logs within a specific time range: 
docker logs --since 2021-01-01T12:00:00 --until 2021-01-02T12:00:00 <container_id>
Add -E to search for multiple patterns, -i to ignore case: 
docker logs --details --timestamps <container_id> 2>&1 | grep -Ei "error|exception"

Tables

  • Tables are slick
Method Description Command Example
SCP Secure file transfer using SSH. scp file.txt user@remote:/path
SMB Access Windows shares from Linux. smbclient //SERVER/share -U user
Zip/Tar Compress and decompress files. zip -r archive.zip folder/
tar -xvf archive.tar
Mount Attach storage to the filesystem. mount /dev/sda1 /mnt

Code Snippets

  • Includes a copy button
  • Can be put into collapsable notes/examples/tips
Bash
scp "file.txt" user@remote:/path
scp file.txt user@remote:/path
PowerShell
Get-FileHash <FilePath&Name> | Format-Table -Wrap | Out-File <FileName>.txt
Collapsable
Copyable SCP Command

Copy and paste the following command to securely transfer files between hosts over SSH:

scp file.txt user@remote:/path
Another Style

Copy and paste the following command to securely transfer files between hosts over SSH:

scp file.txt user@remote:/path
Yet Another Style

Copy and paste the following command to securely transfer files between hosts over SSH:

scp file.txt user@remote:/path
Start with an Open Note

Notice how this note is open when the page is refreshed and the other 3 are not?

 The "+" after ??? defines this

Embedded YAML

Full Embedded Document 
AWSTemplateFormatVersion: '2010-09-09'
Resources:
  MySNSTopic:
    Type: 'AWS::SNS::Topic'
    Properties:
      DisplayName: 'MySNSTopic'
      TopicName: 'MySNSTopic'

Embedded PDF

  • To embed a pdf, or create a link, follow below
    • Notice how the link responds based on formatting
NOTE - Python Cheat Sheets Hyperlink

Refer to the Python Cheat Sheet for specific setup instructions.

Full Embedded Document

  • Embed the PDF inside a modal:
This browser does not support PDFs. Please download the PDF to view it: Download PDF.

Download A File

  • Clicking the hyperlink will download the file
Download Sample YAML Template

Template to deploy a sample cloudformation template - Download Template as an example.

Icons

  1. File Transfer cloud Link with Icon at the End: Standard link to another page with the icon after the text.
  2. folder_open Open Directory
  3. Security Settings security
  4. Tools build Bold Text with Icon: Strong emphasis on a section title with an inline icon.

  5. Restore restore Blockquote with Icon: Uses a blockquote for emphasis with an icon.

  6. Sync Files sync Inline Code with Icon: Demonstrates a command or keyword inline with an icon.
  7. About Us face
  8. Settings Button with Icon: An HTML button element with an onclick JavaScript function, showing dynamic interaction.
  9. Help help_outline Admonition-like Tip with Link and Icon: Uses the question format to indicate a helpful tip or link.