enhanced CSP and released article "not in my picture"

config/development/server.yaml

@@ -1,7 +1,7 @@
 headers:
   - for: /**
     values:
-      Content-Security-Policy: default-src 'self'; script-src 'self' https://gist.github.com 'unsafe-inline'; style-src 'self' https://github.githubassets.com 'unsafe-inline'; base-uri 'none'; object-src 'none'; require-trusted-types-for 'script';
+      Content-Security-Policy: default-src 'self'; script-src 'self' https://gist.github.com 'unsafe-inline'; style-src 'self' https://github.githubassets.com 'unsafe-inline'; base-uri 'none'; object-src 'none'; require-trusted-types-for 'script'; img-src 'self' https://onedrive.live.com https://api.onedrive.com https://*.storage.live.com;
       X-Frame-Options: DENY
       Feature-Policy: none
       Permissions-Policy: interest-cohort=()

content/architecture.md

@@ -53,7 +53,7 @@ I have defined a [custom configuration](https://learn.microsoft.com/en-us/azure/
 
 Some will laugh, others will think it's overkill.. but the main reason I added all these security headers is for learning purposes. The site is now rated **A** on [securityheaders.com](https://securityheaders.com/?q=https%3A%2F%2Fwww.schwitzd.me%2F)
 
-Why not **A+**? Because at the time of writing PaperMod uses inline Javascript and styles. I have reported an issue [CSP Enhancement #1517](https://github.com/adityatelange/hugo-PaperMod/issues/1517).
+Why not **A+**? Because at the time of writing PaperMod uses inline Javascript and styles. I have reported an issue [CSP Enhancement by removing unsafe-inline #1517](https://github.com/adityatelange/hugo-PaperMod/issues/1517), but it does not seem to be a priority and my impression is that it will take a lot of time.
 
 ## Development
 

content/changelog.md

@@ -6,6 +6,12 @@ hidemeta = true
 showtoc = false
 +++
 
+#### 20.05.2024
+
+* Enhanced CSP to allow images to be loaded from OneDrive
+* Release article 'Not in my Picture'
+* Small changes on architecture page
+
 #### 18.05.2024
 
 * Added [ai.txt](/ai.txt)

content/posts/how-i-set-up-this-site.md

@@ -85,6 +85,18 @@ markup:
 
 My favourite style theme is **Monokay** but [here](https://xyproto.github.io/splash/docs/all.html) you can see the full list of available themes.
 
+## Shortcodes
+
+Hugo's [shortcodes](https://gohugo.io/content-management/shortcodes/) offer a powerful feature for enhancing content. These snippets, embedded within content files, are processed by Hugo using predefined templates. They are particularly useful for scenarios where plain Markdown falls short.
+
+An example shortcode is [image](https://gohugo.io/content-management/shortcodes/#figure), which I use to embed images in my posts.
+
+```
+{{</* figure src="https://onedrive.live.com/embed?resid=DC941554AACD227C%2112277&authkey=%21AACf8t5beAj9jCU&width=1024" align="center" caption="Original picture" */>}}
+```
+
+As you can see, I decided to upload all my pictures to my personal OneDrive subscription.
+
 ## Pages structure
 
 I have decided to put my **posts** in the *./content/posts* folder and my **pages** in the *./content* folder, so I need to run the following commands depending on what I want to create:

content/posts/not-in-my-picture.md

@@ -1,7 +1,7 @@
 +++
 title = 'Not in My Picture'
 date = 2024-05-10T11:39:18Z
-draft = true
+draft = false
 +++
 
 Surely you have been in a situation where you wanted to wait before taking a photo because there were other people in the lens. Or think about how beautiful the photo of that square would have been without the people.
@@ -43,3 +43,19 @@ While searching the internet I came across [IOPaint](https://github.com/Sanster/
     ```
 
 4. Once the container is up and running, you can access IOPaint at `http://localhost:8080` in your web browser.
+
+### How to use
+
+I will not make a tutorial on how to use IOPaint, you can find the [official documentation](https://www.iopaint.com/), and on Youtube you can find lots of videos.
+
+## Result
+
+This was my original picture I shooted, the square was full of people goin back and forth and was impossible to take a picture of the abandoned hotel alone.
+
+{{< figure src="https://onedrive.live.com/embed?resid=DC941554AACD227C%2112277&authkey=%21AACf8t5beAj9jCU&width=1024" align="center" caption="Original picture">}}
+
+Taaac... the result after I removed the three people, as you can see, starting behind the shadow, the image is blurred and instead of creating the pillar behind the man's head, a mess happened.
+
+{{< figure src="https://onedrive.live.com/embed?resid=DC941554AACD227C%2112276&authkey=%21AIkigMEf39hbLgg&width=1024" align="center" caption="AI processed picture">}}
+
+This is just an example, I tried to process several images but the end result was always similar.

static/staticwebapp.config.json

@@ -1,6 +1,6 @@
 {
     "globalHeaders": {
-      "Content-Security-Policy": "default-src 'self'; script-src 'self' https://gist.github.com 'unsafe-inline'; style-src 'self' https://github.githubassets.com 'unsafe-inline'; base-uri 'none'; object-src 'none'; require-trusted-types-for 'script';",
+      "Content-Security-Policy": "default-src 'self'; script-src 'self' https://gist.github.com 'unsafe-inline'; style-src 'self' https://github.githubassets.com 'unsafe-inline'; base-uri 'none'; object-src 'none'; require-trusted-types-for 'script';  style-src 'self' https://github.githubassets.com 'unsafe-inline'; base-uri 'none'; object-src 'none'; require-trusted-types-for 'script'; img-src 'self' https://onedrive.live.com https://api.onedrive.com https://*.storage.live.com;",
       "X-Frame-Options": "DENY",
       "Permissions-Policy": "interest-cohort=()",
       "Referrer-Policy": "no-referrer-when-downgrade",