Migrate to Frontmatter (#101)

* Migrate metadata to frontmatter

* Change abstract property to description

* Adjust validation for frontmatter

Author: sebromero

content/tutorials/portenta-h7/por-ard-ap/content.md

@@ -1,3 +1,10 @@
+---
+title: Portenta H7 as a Wi-Fi Access Point
+coverImage: assets/por_ard_ap_cover.svg
+tags: [WiFi, Access Point, HTTP, Web Server]
+description: In this tutorial you will configure the Portenta H7 as an access point and build a simple web server that will allow you to control the built-in RGB LEDs from your mobile device.
+---
+
 # Portenta H7 as a Wi-Fi Access Point
 
 ## Overview
@@ -21,14 +28,14 @@ When the  board is configured to operate as an access point, it can create its o
 
 With the access point set up you create a client server architecture where the board provides a web server communicating with the client devices over HTTP. The connected devices can then make HTTP GET requests to the server to retrieve web pages served by the web server on the board. This makes the Portenta H7 an ideal board for developing IoT solutions where external client devices can send and receive information while more complex processing tasks take place on the server.
 
-![A client device communicating with the Portenta H7 through HTTP ](assets/por_ard_ap_tutorial_core_topic.svg?sanitize=true)
+![A client device communicating with the Portenta H7 through HTTP ](assets/por_ard_ap_tutorial_core_topic.svg)
 
 ## Instructions
 
 ### Setting Up the Web Server
 In this tutorial you are going to convert the board into an access point and use it to set up a web server which provides a HTML webpage. This page contains buttons to toggle the red, green and blue colour of the built-in LED.  You will then connect your mobile device to this access point and access this web page through the browser on your mobile phone. Once retrieved, you will be able to control the state of the red, green and blue LED on the built-in RGB LED from your mobile device. 
 
-![A mobile device controlling the different LEDs on the board ](assets/por_ard_ap_tutorial_overview.svg?sanitize=true)
+![A mobile device controlling the different LEDs on the board ](assets/por_ard_ap_tutorial_overview.svg)
 
 ### 1. The Basic Setup
 Begin by plugging in your Portenta board to your computer using a USB-C cable and open the  Arduino IDE or the Arduino Pro IDE. If this is your first time running Arduino sketch files on the board, we suggest you check out how to [set up the Portenta H7 for Arduino](https://www.arduino.cc/pro/tutorials/portenta-h7/por-ard-gs) before you proceed. 
@@ -214,19 +221,19 @@ This sketch describes how the server will handle an incoming HTTP GET request fr
 
 Here the web page is just a simple HTML page with buttons to toggle the LED states.  The way in which the web page works is: Whenever a button on the web page is pressed, the client device (in this case your phone) sends a HTTP GET request to a URL denoted by a letter, in this case H or L (H stands for HIGH, L stands for LOW) followed by the LED color that should be turned on or off r, g or b. For example to turn on the red LED the URL is /Hr . Once the server receives this request it changes the corresponding LED state, closes the connection and continues to listen to next requests. 
 
-![The sequence of actions in the tutorial’s client-server model](assets/por_ard_ap_sketch_explanation.svg?sanitize=true)
+![The sequence of actions in the tutorial’s client-server model](assets/por_ard_ap_sketch_explanation.svg)
 
 ***Remember that the built-in RGB LEDs  on the Portenta H7 need to be pulled to ground to make them light up. This means that a voltage level of __LOW__ on each of their pins will turn the specific color of the LED on, a voltage level of __HIGH__ will turn them off.***
 
 ### 3. Create the arduino_secrets.h Tab
 
 A good practice is to have sensitive data like the SSID and the password required to identify and connect to a certain network within a separate file. Click on the arrow icon below the Serial Monitor button and open a new tab in the Arduino IDE. This will create a new file.
 
-![Open a new tab in the IDE](assets/por_ard_ap_new_tab.png?sanitize=true)
+![Open a new tab in the IDE](assets/por_ard_ap_new_tab.png)
 
 Name the file **arduino_secrets.h** and click OK.
 
-![Naming the new tab arduino_secrets.h in the IDE](assets/por_ard_ap_new_tab_name.png?sanitize=true)
+![Naming the new tab arduino_secrets.h in the IDE](assets/por_ard_ap_new_tab_name.png)
 
 Once you’ve created the new tab, you will see an empty page in the IDE. Define two constants `SECRET_SSID`  and `SECRET_PASS` that will hold the name of the Wi-Fi network and the corresponding password. Add the following lines to your **arduino_secrets.h** file:
 
@@ -243,31 +250,31 @@ In order to access the `SECRET_SSID` and `SECRET_PASS` constants in the **simple
 # include “arduino_secrets.h”
 ```
 
-![Including the header file arduino_secrets.h in the sketch file](assets/por_ard_ap_add_headerfile.png?sanitize=true)
+![Including the header file arduino_secrets.h in the sketch file](assets/por_ard_ap_add_headerfile.png)
 
 ### 4. Upload the Code
 
 Select the **Arduino Portenta H7 (M7 core)** from the **Board** menu and the port the Portenta is connected to. Upload the **simpleWebServer.ino** sketch. Doing so will automatically compile the sketch beforehand.
 
-![Uploading the SimpleWebServer.ino to the Portenta](assets/por_ard_ap_upload_code_m7.png?sanitize=true)
+![Uploading the SimpleWebServer.ino to the Portenta](assets/por_ard_ap_upload_code_m7.png)
 
 Once you've uploaded the code, open the serial monitor. You will be able to see the IP address of the access point. You will also see the message, `Device disconnected from AP` which means there are no devices connected to the Access point yet.  
 
-![Serial monitor displaying the details of the Access point](assets/por_ard_ap_open_serial_monitor.png?sanitize=true)
+![Serial monitor displaying the details of the Access point](assets/por_ard_ap_open_serial_monitor.png)
 
 ### 5. Connecting to the Portenta Access Point
 
 Once the access point is active and ready to be connected with external devices, you will be able to find the **PortentaAccessPoint** on the list of networks on your mobile device. Once you have entered the password you have defined earlier, your smart phone will connect to access point. 
 
-![PortentaAccessPoint shown on the list of available network devices](assets/por_ard_ap_find_ap.png?sanitize=true)
+![PortentaAccessPoint shown on the list of available network devices](assets/por_ard_ap_find_ap.png)
 
 Now open a browser window on your mobile device and copy & paste the URL containing Portenta’s IP address that is displayed on the serial monitor. 
 
-![The URL containing the IP address of the access point displayed in the serial monitor](assets/por_ard_ap_copy_ip_address.png?sanitize=true)
+![The URL containing the IP address of the access point displayed in the serial monitor](assets/por_ard_ap_copy_ip_address.png)
 
 Once you’ve entered the URL, the client sends a GET request to the web server to fetch the HTML web page specified in the code. Once loaded you will see the web page in your mobile browser. 
 
-![The HTML web page accessed on your mobile browser](assets/por_ard_ap_access_webpage.png?sanitize=true)
+![The HTML web page accessed on your mobile browser](assets/por_ard_ap_access_webpage.png)
 
 ### 6. Access the Board From Your Mobile Device
 
@@ -285,11 +292,11 @@ HTTP/1.1 200 OK
 
 Once the server has responded to this request, it closes the connection and continues listening to next GET requests. 
 
-![The client details displayed on the serial monitor](assets/por_ard_ap_client_details.png?sanitize=true)
+![The client details displayed on the serial monitor](assets/por_ard_ap_client_details.png)
 
 You’re now be able to toggle the states of the red, green and blue LED through the buttons displayed on your mobile browser. Everytime you press a button, the client sends a GET request to a URL in the format /Hx or /Lx ,where x can be ‘r’, ‘g’ or ‘b’, depending on the button pressed on the HTML page. The web server then reads the URL requested by the client, changes the state of the LED corresponding to the URL and closes the connection. 
 
-![The GET request details displayed in the serial monitor](assets/por_ard_ap_toggle_LEDS.png?sanitize=true)
+![The GET request details displayed in the serial monitor](assets/por_ard_ap_toggle_LEDS.png)
 
 ## Conclusion
 

content/tutorials/portenta-h7/por-ard-ap/metadata.json

@@ -1,3 +1,10 @@
+---
+title: Updating the Portenta Bootloader
+coverImage: assets/por_ard_bl_cover.svg
+tags: [Bootloader, Firmware, Core]
+description: This tutorial will explain what a bootloader is, why you should consider keeping it updated and how you can update it.
+---
+
 # Updating the Portenta Bootloader
 
 ## Overview

content/tutorials/portenta-h7/por-ard-bl/content.md

@@ -1,3 +1,10 @@
+---
+title: BLE Connectivity on Portenta H7
+coverImage: assets/por_ard_ble_cover.svg
+tags: [BLE, LED, Connectivity, Bluetooth]
+description: This tutorial explains how to use BLE connectivity on the Portenta H7 to control the built-in LED using an external Bluetooth application.
+---
+
 # BLE Connectivity on Portenta H7
 
 ## Overview
@@ -24,19 +31,19 @@ The onboard WiFi/Bluetooth® module of the H7 offers low energy Bluetooth® func
 ### Configuring the Development Environment
 To communicate with the Portenta H7 via Bluetooth®, we are going to start by uploading a pre-built sketch that starts a Bluetooth® network and allows your mobile device, which will be used to control the LEDs, to connect to it. The sketch uses the [ArduinoBLE](https://www.arduino.cc/en/Reference/ArduinoBLE) Library that enables the BLE module and handles important functions such as scanning, connecting and interacting with services provided by other devices. You will also be using a third party application (e.g. [nRF Connect](https://www.nordicsemi.com/Software-and-tools/Development-Tools/nRF-Connect-for-mobile)), running on your mobile device that will connect your device to the board and help you control the built-in LED.
 
-![BLE Configuration Scheme](assets/por_ard_ble_configuration.svg?sanitize=true) 
+![BLE Configuration Scheme](assets/por_ard_ble_configuration.svg) 
 
 ### 1. The Basic Setup
 
 Begin by plugging in your Portenta board to the computer using a USB-C cable and open the Arduino IDE or the Arduino Pro IDE. If this is your first time running Arduino sketch files on the board, we suggest you check out how to [set up the Portenta H7 for Arduino](https://www.arduino.cc/pro/tutorials/portenta-h7/por-ard-gs) before you proceed.
 
-![The Portenta H7 can be connected to the computer using an appropriate USB-C cable](assets/por_ard_ble_basic_setup.svg?sanitize=true)
+![The Portenta H7 can be connected to the computer using an appropriate USB-C cable](assets/por_ard_ble_basic_setup.svg)
 
 ### 2. Install the ArduinoBLE Library 
 
 You will need to install the ArduinoBLE library in the Arduino IDE you are using. For this example we will use the classic Arduino IDE. To install the library go to : **Tools -> Manage Libararies...** type **ArduinoBLE** and click **Install**. Make sure you install ArduinoBLE version 1.1.3 or higher.
 
-![Download the BLE library in the Library Manager.](assets/por_ard_ble_arduino_library.png?sanitize=true)
+![Download the BLE library in the Library Manager.](assets/por_ard_ble_arduino_library.png)
 
 
 

content/tutorials/portenta-h7/por-ard-bl/metadata.json

@@ -1,3 +1,10 @@
+---
+title: Dual Core Processing
+coverImage: assets/por_ard_dcp_cover.svg
+tags: [Multitasking, RGB, LED]
+description: In this tutorial you will run two classic Arduino blink programs simultaneously on different cores of the Portenta board that blinks the RGB LED in two different colours.
+---
+
 # Dual Core Processing
 
 ## Overview
@@ -17,19 +24,19 @@ The Portenta H7 is equipped with a processor that has two processing units calle
 ## Cortex® M7 & M4 
 Processor cores are individual processing units within the board's main processing unit (don't confuse a processor core with an [Arduino core](https://www.arduino.cc/en/guide/cores)). These cores are responsible for the executing instructions at a particular clock speed.  The on-board  Arm Cortex processor comes with two cores (Cortex® M7 and M4), with slightly different architectures and clock speeds. The M7  runs at 480 MHz and the architecture is designed  to separate Instruction and Data buses to optimize CPU latency. The M4 runs at 240 MHz and the architecture supports the ART™ accelerator (a block that speeds up instruction fetching accesses of the Cortex-M4 core to the D1-domain internal memories). The higher clock rate of the M7 makes it suitable to handle complex processing tasks such as data storage, debugging or handling input/output peripherals at a higher efficiency compared to the M4. The dual core processor of the Portenta H7 sets it apart from other single core Arduino boards by allowing true multitasking, faster data processing capabilities, enhanced processing power and application partitioning.  
 
-![The Architectures of Cortex® M7 and M4 cores.](assets/por_ard_dcp_m4_m7_architectures.svg?sanitize=true)
+![The Architectures of Cortex® M7 and M4 cores.](assets/por_ard_dcp_m4_m7_architectures.svg)
 
 ## Instructions
 
 ### Accessing the M7 and M4 Core
 To best illustrate the idea of dual core processing, you will be running two separate sketch files. One on each of the cores which blinks the RGB LED in a different colour. The **BlinkRedLed_M7.ino** sketch will set the built-in RGB LED on the board to red and blink it with a delay of 500 ms. The **BlinkGreenLed_M4.ino** sketch will access the green LED in the RGB led and blink it with a delay of 200 ms.  Both the cores will be executing the corresponding sketch file simultaneously and as a result both the green and red LED blink, however, at different intervals.
 
-![Running two different sketch files on the different cores.](assets/por_ard_dcp_tutorial_overview.svg?sanitize=true)
+![Running two different sketch files on the different cores.](assets/por_ard_dcp_tutorial_overview.svg)
 
 ### 1. The Basic Setup
 Begin by plugging-in your Portenta board to your computer using an appropriate USB-C cable and have the  Arduino IDE or the Arduino Pro IDE  open. If this is your first time running Arduino sketch files on the board, we suggest you check out how to [Setting Up Portenta H7 For Arduino](https://www.arduino.cc/pro/tutorials/portenta-h7/por-ard-gs) before you proceed.
 
-![A Basic setup of the board attached to your computer](../por-ard-gs/assets/por_ard_gs_basic_setup.svg?sanitize=true)
+![A Basic setup of the board attached to your computer](../por-ard-gs/assets/por_ard_gs_basic_setup.svg)
 
 **Note:** You can access the examples from the tutorials library once it's installed: **Examples -> Arduino_Pro_Tutorials -> Dual Core Processing**
 
@@ -85,7 +92,7 @@ If you would upload the sketch to the M4 at this point nothing would change. The
 ### 5. Force Booting the M4 Core
 The bootloader of the H7 boards is configured in such a way that only M7 gets booted automatically. The reason is that for simple use cases the M4 may not be needed and hence be unprogrammed and doesn't need to get powered. One such instance is when the M7 doesn't have the appropriate firmware that automatically handles the initialization of the M4. As a result you need to force boot the M4 so that it can run a sketch. You can do so through the M7 using a special command, `bootM4()`  that boots the M4 when the board is powered.
 
-![The M7 and the M4 cores share the flash memory where the sketches are stored.](assets/por_ard_dcp_m4_m7_flash_memory.svg?sanitize=true)
+![The M7 and the M4 cores share the flash memory where the sketches are stored.](assets/por_ard_dcp_m4_m7_flash_memory.svg)
 
 Before you can upload the code for the M4 core to the flash memory you need to add the `bootM4()` command in the **BlinkRedLed_M7.ino** sketch file that is uploaded and run by the M7 core. Copy and paste the following command `bootM4()` inside the `setup()` function of the **BlinkRedLed_M7.ino**  sketch and upload the sketch to M7 once again.
 

content/tutorials/portenta-h7/por-ard-ble/content.md

@@ -1,3 +1,10 @@
+---
+title: Reading and Writing Flash Memory
+coverImage: assets/por_ard_block_device_cover.svg
+tags: [Storage, Flash, Block Device]
+description: This tutorial demonstrates how to use the on-board flash memory of the Portenta H7 to read and write data using the BlockDevice API provided by Mbed OS.
+---
+
 # Using the Flash Storage To Read and Write Data
 ## Overview 
 This tutorial demonstrates how to use the on-board flash memory of the Portenta H7 to read and write data using the BlockDevice API provided by Mbed OS. As the internal memory is limited in size we will also take a look at saving data to the QSPI flash memory.