Skip to content

Development Notes

When starting up how do I resestablish the connection between my local repo and GitLab

In finder locate the local repo (for me this is Documents/IACC/IACC_Repo) Right click: Services –> Open terminal at window In terminal paste:

* uv run mkdocs serve --livereload

How can I view my changes before commiting them

You can view local edits at : “http://localhost:8000”

How do I resize images and videos

Ideally for our personal sites both images and videos should be small

Image size < 50kB

Video size < 1MB

General Info

Photo resizing 1. The easiest way is to open the image in preview, file –> export, save the image as .jpg with lower quality

../images/portrait_small

  1. If the image is very large or a strange file type the resizing can be done in photoshop, image –> resize image, specify the size and pixel count

../images/portrait_small

Video resizing

  1. Similar to photos the easiest way is to open the vidoe in quicktime player, file –> export, same the video as another file format with the lowest possible quality.

Important Note

when calling a photo or video using relative paths MKdocs may mis-translate the path. To check this, go to the localhost:8000 browser window and inspect to check that the url generated matches the real path. It may appear broken in Visual Studios but work on the web.

Local Media

Link to other pages

[description](../../folder/name.md)

Use “..” to navigate up one file level Example: ../.. is the parent folder of the parent folder

Adding photos

![](../../folder/name.jpg)

or

Adding photos using HTML * This allows you to size the photo as well * scale by percent - see below * scale by pixels - examplte: width=”640”

<img src="../images/portrait_small.jpg" alt="../images/portrait_small" width="50%"/>

Adding Videos

<video width="640" height="480" controls>
    <source src="../../images/auxetic_small.mp4" type="video/mp4">
</video>

Media from external sources

Web Pages

[Description](url)

Videos - Example code

From Vimeo

<iframe src="https://player.vimeo.com/video/10048961" width="640" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/10048961">Sound Waves</a> from <a href="https://vimeo.com/radarboy">George Gally (Radarboy)</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

From Youtube

<iframe width="560" height="315" src="https://www.youtube.com/embed/jjNgJFemlC4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Can you embed HTML in your markdown files?

Answer - Yes, see examples below

Organization and Asthetics

Adding a colapsable section

<details markdown="1">
  <summary markdown="span">Your Headings</summary>
  ### Heading
 1. numbered lines show up as numbered lines
 2. sgsefgserg

    - dashes show up as bullets
    - sdrgsehserg

</details>

Creating a table

  • code for table structure
    <table border="1">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Website</th >
        </tr>
  • code for external links with html
<td><a href="https://fabacademy.org/2026/labs/barcelona/students/yara-thomas">Fab Academy Site</a></td>

Example Table

First Name Last Name Website
Yara Thomas Fab Academy Site

Astheic features with HTML

Create a seperator line

<hr />