# How to make this website
## Documentation
### Website structure
You can see the typical structure for each week by looking at [the week-x template folder structure](week-x).
### Images
I compress images down using [ImageMagick](https://imagemagick.org/) software, which can be run from the command line.
Here's a script I asked AI Claude by Anthropic to write, that converts all images to 100 kb using the following command in terminal (Linux):
`mkdir -p converted && for img in *.{png,jpg,jpeg,PNG,JPG,JPEG}; do [ -f "$img" ] && convert "$img" -resize '1200x1200>' -quality 85 -define jpeg:extent=120kb "converted/${img%.*}.jpg"; done `
I could create an even better script that sizes images proportionally to their original size while still making sure that the largest image in a folder is less than 100 kb.
### Video
I use ffmpeg to compress the video down to a good quality, as explained in the [Barcelona Fab Accademy repository](http://fabacademy.org/2019/labs/barcelona/local/clubs/codeclub/ffmpeg/):
`ffmpeg -i input.mp4 -c:v libx264 -crf 24 -preset slow output.mp4`
I used to upload my videos to Youtube and then add them in with the markdown as an html element using the following:
``
### Markdown
At first, I just edited the source html of the website. However, I found html source code hard to read and edit. It is tedious to have to type in all the html elements.
I wish I could just write in markdown, which is closest to normal text.
[Markdown-Tag](https://github.com/MarketingPipeline/Markdown-Tag?tab=readme-ov-file) is by far the simplest way to add markdown to an html page.
You just need to include the `` element into your html, and add this simple script with the link to the bottom of the page.
I am using the [github flavor of markdown](https://gist.github.com/allysonsilva/85fff14a22bbdf55485be947566cc09e), because I liked its formatting for text. For a refresher on how to write markdown, [this markdown editor](https://markdown-it.github.io/) allows you to play with markdown and how it gets rendered as a webpage.
Some of the basics are:
`## Section Headers`
`[link title](https://myurl.com/mypage)`
``
`- list element`
I used so that I can easily edit my site in markdown and then publish as html.
I also looked at [markserv](https://github.com/markserv/markserv), the system linked at HTMAA, but that I don't understand
exactly how to integrate into my software stack.
### Style guide
Here is a quick style guide for my site:
> All assignments should be indented like so
### Errors:
- " < " character renders as `<` when in inline code.
- Code blocks are not formatted in colorful ways:
``` python
name = input("What is your name? ")
print("Hello, " + name + "!")
```
## Aesthetics
### Background grid lines
[This stack overflow post](https://stackoverflow.com/questions/3540194/how-to-make-a-grid-like-graph-paper-grid-with-just-css) shows how to create vertical lines in the background using css. I changed the grid spacing, line thickness and color from the example shown.
I also refered to [Mozilla's documentation on repeating linear gradients.](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient)
### Troubleshooting css
I ran into this issue where my online site was not updating even though I had pushed to github.
On closer inspection it looks like it was just the style updates that were not changing. Then I remembered to clear my cookies!
**Clear your browser's cookies** since it will remember the old .css styling