mirror of
https://gitlab.waag.org/make/fablab/interns/2025/sam.git
synced 2025-08-03 11:54:58 +00:00
fix folder structure
This commit is contained in:
86
docs/Assignments/week_01_fabacademy/customising_mkdocs.md
Normal file
86
docs/Assignments/week_01_fabacademy/customising_mkdocs.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# Customizing Mkdocs
|
||||
|
||||
I wanna customize my mkdocs theme. So I can have a dark mode. Because it currently looks like this and having a nice looking documentation page is necessary too!
|
||||
|
||||

|
||||
|
||||
## Issues
|
||||
|
||||
### Attempt 1
|
||||
I tried changing it by referencing extra css but when it builded i looked through the job artifacts and I saw that it didn't pick up on the file
|
||||
|
||||
```yml
|
||||
site_name: Fab Academy docs page - Sam
|
||||
site_url: https://pages.gitlab.io/mkdocs
|
||||
site_dir: public
|
||||
theme:
|
||||
name: ivory
|
||||
extra_css: [extra.css]
|
||||
```
|
||||
```css
|
||||
.footer-note {
|
||||
color:rgb(47, 44, 44) !important
|
||||
}
|
||||
|
||||
.home .version {
|
||||
color:rgb(47, 44, 44) !important
|
||||
}
|
||||
```
|
||||
### Attempt 2
|
||||
After I read the documentation thoroughly i found out that the css file needs to be relative to the `docs` folder and not the `mkdocs.yml`. After that it showed the css and I could finally customize the theme.
|
||||
|
||||
## Customizing Material theme
|
||||
### Palette customization
|
||||
I decided to switch to material theme because its easier to configure. There are pre made color schemes and a lot of extensions that work out of the box.
|
||||
Example changing colors.
|
||||
```yaml
|
||||
theme:
|
||||
palette:
|
||||
primary: indigo
|
||||
accent: teal
|
||||
```
|
||||
Of course you could also use the extra.css to style the website even more.
|
||||
|
||||
|
||||
## Extensions
|
||||
You can add lot's of extensions. For example code highlighting or a table of contents on the right side of your website.
|
||||
This adds a table of contents. You can find all the extensions [here](https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#table-of-contents).
|
||||
```yaml
|
||||
markdown_extensions:
|
||||
- toc:
|
||||
permalink: true
|
||||
```
|
||||
|
||||
### Drop down menu's
|
||||
With this extension you can add drop down menu's to your page.
|
||||
|
||||
#### How do I install drop down menus?
|
||||
Drop down menu's are part of the `pymdownx.details` extension. You need to place that in your `mkdocs.yml` under `markdown_extensions:` like his:
|
||||
```yaml
|
||||
markdown_extensions:
|
||||
- pymdownx.details
|
||||
```
|
||||
|
||||
#### How do I use it
|
||||
You can use it like this. Don't forget that you need to use 2 tabs to get the text in the collapsible box.
|
||||
```
|
||||
??? Notes
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia rutrum nibh sit amet pharetra. Aenean in metus fringilla, varius nulla eu, malesuada nulla. Praesent placerat tortor lacus, nec sollicitudin felis elementum sit amet. Nam mollis tincidunt arcu ac gravida. Vivamus turpis nisi, lacinia in eleifend sed, interdum ultricies quam.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
??? Info
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia rutrum nibh sit amet pharetra. Aenean in metus fringilla, varius nulla eu, malesuada nulla. Praesent placerat tortor lacus, nec sollicitudin felis elementum sit amet. Nam mollis tincidunt arcu ac gravida. Vivamus turpis nisi, lacinia in eleifend sed, interdum ultricies quam.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Links
|
||||
* [markdown extensions](https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#table-of-contents)
|
||||
* https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#table-of-contents
|
||||
* [mkdocs extra css](https://www.mkdocs.org/user-guide/customizing-your-theme/)
|
||||
* [docs about drop down menu's](https://facelessuser.github.io/pymdown-extensions/extensions/details/)
|
17
docs/Assignments/week_01_fabacademy/fritzing.md
Normal file
17
docs/Assignments/week_01_fabacademy/fritzing.md
Normal file
@@ -0,0 +1,17 @@
|
||||
# Fritzing
|
||||
|
||||
## What is fritzing
|
||||
|
||||
Fritzing is a program to draw circuits on breadboards to visualize them. You will see them a lot when looking for references on how to connect stuff on breadboards. For the first weeks I will be using this to sketch breadboards for later testing.
|
||||
|
||||
|
||||
## My first design
|
||||
I have made this design early to get started on programming the microcontroller so I have enough time to program the stabilization algorithm
|
||||

|
||||
|
||||
|
||||
## Fritzing parts used
|
||||
|
||||
* [Xiao fritzing part](https://github.com/Seeed-Studio/fritzing_parts/tree/master/XIAO%20Accessories)
|
||||
* [Brushless motor fritzing part](https://forum.fritzing.org/uploads/short-url/yI6UtxbrrayJVaVYepkntRiD8MT.fzpz)
|
||||
* [ESC + DC motor part](https://johnny-five.readthedocs.io/en/latest/esc-PCA9685/)
|
24
docs/Assignments/week_01_fabacademy/lecture_notes.md
Normal file
24
docs/Assignments/week_01_fabacademy/lecture_notes.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# Lecture notes
|
||||
|
||||
## Introduction FabAcademy
|
||||
|
||||
### Lectures
|
||||
First half of the class discuss homework of the week and discuss final projects.
|
||||
|
||||
### Dont's
|
||||
* Loose cables. Use ribbon cables.
|
||||
* No stringing on 3d printers
|
||||
|
||||
### Rescuing filament
|
||||
* Drying it by warming it up slowly
|
||||
* No microwave
|
||||
|
||||
## Project management
|
||||
|
||||
* Document as you go.
|
||||
* Compress your images for lower storage costs and faster website load times
|
||||
|
||||
## Weekly assignment
|
||||
* "You don't have to document git if you're already familiar with it"
|
||||
* We wanna know who you are
|
||||
* What is your possible final project
|
35
docs/Assignments/week_01_fabacademy/markdown.md
Normal file
35
docs/Assignments/week_01_fabacademy/markdown.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# Markdown
|
||||
|
||||
## What is Markdown
|
||||
Markdown is a markup language. It's used a lot for documenting because its easy to style and you dont have to struggle with html css when used with Mkdocs or Hugo.
|
||||
|
||||
## How do I use markdown
|
||||
Markdown can be used anywhere. You just simple have to create a file that ends with `.md`. If you wanna view the markdown that you're writing in vistual studio code you can click the icon below in the top right of your screen.
|
||||
|
||||

|
||||
|
||||
### Styling in markdown
|
||||
You can syle text by placing different operators around text.
|
||||
|
||||
Basic markdown syntax
|
||||
|
||||
|
||||
| Text | How to create it |
|
||||
| --------------------------------------------------- | ----------------------------------------------------- |
|
||||
| *very italic* | ```*a*``` |
|
||||
| **bold** | ```**bold**``` |
|
||||
| # Head 1 | ```# Head1``` |
|
||||
| ## Head 2 | ```## Head 2 ``` |
|
||||
| ### Head 3 | ```### Head 3 ``` |
|
||||
| `code` | suround text with ` |
|
||||
| [Link](https://www.youtube.com/watch?v=dQw4w9WgXcQ) | `[link](https://www.youtube.com/watch?v=dQw4w9WgXcQ)` |
|
||||
|  | ` ` |
|
||||
| | |
|
||||
|
||||
|
||||
## Markdown conventions
|
||||
All markdown files must start with a `Head1` otherwise Mkdocs won't understand the file and the pipline will crash.
|
||||
|
||||
|
||||
## Sources
|
||||
* [markdown cheatsheet](https://www.markdownguide.org/cheat-sheet/)
|
Reference in New Issue
Block a user