Shortcodes updated. WebP and responsive image support added.

[wiseweb-works]

Description
This pull request focused on converting images to WebP format at build-time using Hugo's image processing feature.

Changes

1. The usage of the centeredImgFromBaseUrl and imgFromBaseUrl shortcodes had to change:

[ ] {{< imgFromBaseUrl "images/aG9tZS01.png" >}}

[X] {{< imgFromBaseUrl src="images/aG9tZS01.png" >}} --NEW

2. Also, the code structure has changed. Now, the photo files are now in the /assets/images/ folder instead of the /static/images/ folder. Because of Global Resource:

Before, going further you must know that you can’t store your images under /static folder anymore. To be able to use image processing, an image must be a resource. What is a resource? Hugo has two types of resources. One is called Page Resource, page resources are stored within the page’s directory. So, you create a folder for each post and rename the post content as index.md and keep the images in the same folder. The second one is called Global Resource which is stored in /assets.

3. The AVIF image type is not yet supported by Hugo's image processing unit. I couldn't get a positive result, even though I forced it by making a code change. However, AVIF can still be used as a pre-converted format. Or as an alternative suggestion (although not very useful) a self-hosted project could be usable to convert images to AVIF format.

AVIF encoding support (&output=avif) added Changelog.md
Related issue: (weserv/images#238)

4. After this change, 240 px 300 px ... 1440 px 1920 px and for native width slices are automatically created for each new image. And then all of them converts to WebP.

....
{{- $ws := uniq (slice 240 300 360 420 480 600 768 800 960 1024 1080 1200 1366 1440 1920 $img.Width) -}}
....
{{ $w := printf "%dx webp q50" . }}
....

5. We don't actively use *.tr.md files on the homepage and other pages. Frankly, it's unlikely that anyone will see these translated pages easily. So I removed these files.

[X] archives.tr.md
[X] search.tr.md
[X] home.tr.md
[X] /posts/00001-monal-development.tr.md

[wiseweb-works]

Description 2
The second commit from this pull request focused on generating favicons (.png format with q50) at build-time using the same Hugo feature again.

Changes

1. We no longer need to separately declare favicons locations/size/format/type information in the config.yml file. Hugo now automatically generates the following sizes. It uses our 310×310 PX main logo file (assets/logo.png).

Rel: favicon type: png               [X] 16x16 [X] 32x32    [X] 96x96   [X] 128x128 [X] 196x196
Rel: apple-touch-icon (also android) [X] 57x57 [X] 60x60    [X] 72x72   [X] 76x76   [X] 114x114 [X] 120x120 [X] 144x144 [X] 152x152 [X] 180x180
Rel: msapplication                   [X] 70x70 [X] 144x144  [X] 150x150 [X] 310x310 [ ] wide/h (150x300 or 300x150)

2. We previously modified Papermod theme for publishing home.md on the homepage, using shortcodes for photos, and some CSS changes. I found a simple way for us to keep these changes and use the maintainer's theme again. Now, all files changes have been moved from submodule to main repo (to our local assets or layouts/partials folder).

3. Now that we can generate CSS and Image files via Hugo, we can now use the fingerprint function. With this function, the browser will only accept files with matching sha256 hashes. It will not be possible to inject CSS, JSS or IMG tags with MITM methods.

4. And finally, although the logo on the main page was displayed as 120×120 PX, but it was served as 310×310 PX. I changed the relevant entry from config.yml file with proper size.