1. State of the art, project management and documentation¶
This week I worked on defining my final project idea and started to getting used to the documentation process.
At the beginning you should know Markdown and the structure of the website and how to edit it.
markdown¶
Writing in Markdown The website template provides examples for the most common content including bullet lists, images, videos, tables and so on. This way you can just start editing the page right away replacing the content.
For some basic Markdown examples, visit the Markdown cheatsheet for reference. Below you will find some useful specific examples.
mkdocc¶
The website template is built for MkDocs (https://MkDocs.org) a static site generator that allows to write documentation in Markdown (https://markdown.org) language and publish a beautifully looking website without any HTML, CSS or Javascript.
The static site generator is used to publish your website every time you edit a file of your website using GitLab,
You do not really need to know much about MkDocs if you don’t need to customize your website further than the default theme.
Customizing the mkdocs theme¶
Mkdocs configuration is done using the mkdocs.yml YAML file. Here you can modify the title and theme of your site.
Important to keep the indentation consistent in pairs of two's and only using spaces.
Setting your site title You can personalize the site by changing your name in the site_name, site_description, copyright lines. Also update your social network links in the extra section.
Replace the text below to customize your site¶
site_name: Your name site_description: Your name Fabricademy site site_author: Your name copyright: Copyright 2021 Your name - Creactive Commons Attribution Non-commercial
extra: social: - icon: fontawesome/brands/instagram link: https://instagram.com/fabricademy - icon: fontawesome/brands/facebook link: https://facebook.com/fabricademy - icon: fontawesome/brands/twitter link: https://twitter.com/fabricademy For other social icons on the Material Docs
How to change the theme colors The can change the primary and accent sections. Changing these will update the theme colors in your generated website. See the available colors here
theme: name: material palette: primary: deep purple accent: deep purple How to change the theme fonts You can change the font of your whole site using Google Fonts.
theme: name: material font: text: Roboto code: Roboto Mono Using CSS If you want to tweak some colors or change the spacing of certain elements, you can do this in a separate stylesheet. The easiest way is by creating a new stylesheet file in the docs directory:
. ├─ docs/ │ └─ stylesheets/ │ └─ extra.css └─ mkdocs.yml Then, add the following line to mkdocs.yml:
extra_css: - stylesheets/extra.css
./mkdocs.yml Mkdocs configuration file. You need to edit this file to personalize your website. ./docs This folder contains all the website content. Only files inside this folder are published to your website! ./docs/index.md This is the homepage. Edit this file with your profile and information ./docs/assignments This folder contains the documentation for weekly assignments ./docs/assignments/week01.md - week13.md Edit each of these files for the documentation of the week’s assignment. ./docs/projects This folder contains documentation for both final and other projects. Add a file to this folder to document your extra projects. Example my-project.md. Avoid spaces and uppercase names for clarity. ./docs/projects/final-project.md Edit this page for your final projects’ documentation ./docs/images This folder is meant to contain all images in your website. Make sure you check the file sizes for your images. 100 kb should be enough! ./docs/images/avatar-photo.jpg This is an example picture. You can replace it uploading a picture with the same filename. ./.gitlab-ci.yml The files below are for mkdocs. Don’t touch them unless you need to. See the advanced sections below for instructions. ./requirements.txt The tools to install for your website. By default MkDocs and the Material theme are installed for you. Only edit this file if you are confident in what you are doing.
"About me" page.¶
changing the font, removing the GitLab button on the top right corner playing around with the table of contents and tabs. My final mkdocs.yml looks as follows:
How to upload images, videos, references and how to use markdown and gitlab?¶
HOW to create, update and customize your documentation website on Gitlab?¶
How I Customize my website¶
Research¶
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Useful links¶
Code Example¶
Use the three backticks to separate code.
// the setup function runs once when you press reset or power the board
void setup() {
// initialize digital pin LED_BUILTIN as an output.
pinMode(LED_BUILTIN, OUTPUT);
}
// the loop function runs over and over again forever
void loop() {
digitalWrite(LED_BUILTIN, HIGH); // turn the LED on (HIGH is the voltage level)
delay(1000); // wait for a second
digitalWrite(LED_BUILTIN, LOW); // turn the LED off by making the voltage LOW
delay(1000); // wait for a second
}
Gallery¶
Video¶
From Vimeo¶
Sound Waves from George Gally (Radarboy) on Vimeo.