7 files changed, 83 insertions, 3 deletions
diff --git a/content/2023/this-site-no-longer-spies-for-youtube/diagnostics.png b/content/2023/this-site-no-longer-spies-for-youtube/diagnostics.png
new file mode 100644
index 0000000..d72b1ae
--- /dev/null
+++ b/content/2023/this-site-no-longer-spies-for-youtube/diagnostics.png
diff --git a/content/2023/this-site-no-longer-spies-for-youtube/index.md b/content/2023/this-site-no-longer-spies-for-youtube/index.md
new file mode 100644
index 0000000..0d52aa2
--- /dev/null
+++ b/content/2023/this-site-no-longer-spies-for-youtube/index.md
@@ -0,0 +1,67 @@
+---
+title: "This Site No Longer Spies for Youtube"
+category: "blog"
+abstract: 
+date: 2023-02-02T14:58:42+01:00
+year: 
+draft: false
+tags: []
+---
+This site no longer spies for google
+
+Say what you will about Youtube; it is the de facto webpage for video content. Unfortunately, there is much to say, primarily negative, but more on this later. Today I want to make this blog a bit better.
+
+Let's use [Google](https://pagespeed.web.dev/report?url=https%3A%2F%2Fmichal.sapka.me%2F2023%2Fcradle-of-filth-her-ghost-in-the-fog%2F) to analyze the performance of [one of my recent posts](http://localhost:1313/2023/cradle-of-filth-her-ghost-in-the-fog/). It's terrible. Not as awful as it would have been if I used a lot of JS, but it is terrible, nevertheless.
+
+Here are the findings. Notice a pattern?
+
+{{< imgproc "opportunities.png" Resize "500x" "Opportunities">}}
+
+{{< imgproc "diagnostics.png"  Resize "500x" "Diagnostics">}}
+
+Yeah. I embed YouTube videos, and even Google says it's a bad idea. What adds insult to injury is [Privacy Badger](https://privacybadger.org) screaming at me on my own page. So yup, I have joined the botnet and spied for Google.
+
+There are two solutions: pretend that YouTube doesn't exist or fix it. Let's fix it. The idea: use hyperlinks with self-hosted thumbnails. Sounds simple. And it is simple. 
+
+Step 1 - get all Youtube embeds. This site is powered by [Hugo](https://gohugo.io/), and all three embeds are done via a `youtube` shortcode. So, on posts, I add a
+
+```
+<youtube "video_id" >
+```
+
+Let's use GNU to get all video ids!
+
+```
+grep -r "<youtube" content/. | grep -o "\".*\"" | tr -d '"' | cut -d " " -f1
+```
+
+Easy. Just a few steps:
+
+1. Find all files with youtube shortcodes in the content directory
+2. Extract all ids by getting the first quoted text 
+3. grep for all quotations
+4. remove quotes
+5. get first words
+
+Now, how do we get the thumbnail? Stack Overflow to [the rescue](https://stackoverflow.com/a/2068371). We can fetch different sizes of thumbs directly from youtube. Let's use wget
+
+```
+wget --output-document "assets/ytcovers/$id.jpg" "https://img.youtube.com/vi/$id/hqdefault.jpg"
+```
+
+And voila, we can use thumbs to create proper links. One thing that needs to be added is a play button. Internet and [ImageMagick](https://imagemagick.org) to the rescue! I found some random PNG overlay with a play button on the web, but I can't find the URL. It was free for personal use, so yeah. W can easily compose the button over the thumb:
+
+```
+ magick convert "assets/ytcovers/$id.jpg" "assets/partials/play-button.png"  -gravity center -geometry 150x150+5+5 -composite "assets/ytcovers/$id.jpg"
+```
+
+So, we:
+
+1. convert the previously fetched cover,
+2. by adding a play button,
+3. the button is placed in the center of the  cover,
+4. the button is to be resized to 150x150 and moved by 5px to the right and bottom.
+5. Lastly, we tell ImageMagick to compose those two and overwrite the cover
+
+And with this simple trick, this site is no longer a part of the botnet, and as an added bonus, it is faster.
+
diff --git a/content/2023/this-site-no-longer-spies-for-youtube/index.md~ b/content/2023/this-site-no-longer-spies-for-youtube/index.md~
new file mode 100644
index 0000000..4b57166
--- /dev/null
+++ b/content/2023/this-site-no-longer-spies-for-youtube/index.md~
@@ -0,0 +1,10 @@
+---
+title: "This Site No Longer Spies for Youtube"
+category: "blog"
+abstract: 
+date: 2023-02-02T14:58:42+01:00
+year: 
+draft: false
+tags: []
+---
+
diff --git a/content/2023/this-site-no-longer-spies-for-youtube/opportunities.png b/content/2023/this-site-no-longer-spies-for-youtube/opportunities.png
new file mode 100644
index 0000000..b49797e
--- /dev/null
+++ b/content/2023/this-site-no-longer-spies-for-youtube/opportunities.png
diff --git a/resources/_gen/images/2023/this-site-no-longer-spies-for-youtube/diagnostics_hu4d9b77dcae978e1d89981d79912f85ce_579103_500x0_resize_box_3.png b/resources/_gen/images/2023/this-site-no-longer-spies-for-youtube/diagnostics_hu4d9b77dcae978e1d89981d79912f85ce_579103_500x0_resize_box_3.png
new file mode 100644
index 0000000..350500a
--- /dev/null
+++ b/resources/_gen/images/2023/this-site-no-longer-spies-for-youtube/diagnostics_hu4d9b77dcae978e1d89981d79912f85ce_579103_500x0_resize_box_3.png
diff --git a/resources/_gen/images/2023/this-site-no-longer-spies-for-youtube/opportunities_hu2fadf167c4865276bbbd709edb05ae94_195309_500x0_resize_box_3.png b/resources/_gen/images/2023/this-site-no-longer-spies-for-youtube/opportunities_hu2fadf167c4865276bbbd709edb05ae94_195309_500x0_resize_box_3.png
new file mode 100644
index 0000000..61aa122
--- /dev/null
+++ b/resources/_gen/images/2023/this-site-no-longer-spies-for-youtube/opportunities_hu2fadf167c4865276bbbd709edb05ae94_195309_500x0_resize_box_3.png
diff --git a/static/style.css b/static/style.css
index 0dc310c..3e29509 100644
--- a/static/style.css
+++ b/static/style.css
@@ -5,6 +5,12 @@
     font-size: 1.1em;
     background-color: #fff;
   }
+  pre code {
+    width: 95%;
+    overflow-x: scroll;
+    display: inline-block;
+    padding-bottom: 5px;
+  }
   img {
     max-width: 99%;
     width: auto;
@@ -126,9 +132,6 @@
   .next-link {
     float: right;
   }
-  code {
-    overflow-x: scroll;
-  }
   .pagination {
     text-align: center
   }