other seo improvement and analytics: images

AngeloChecked · Oct 5, 2024 · 5370d58 · 5370d58
1 parent 371efa4
commit 5370d58
Show file tree

Hide file tree

Showing 155 changed files with 185 additions and 68 deletions.
diff --git a/blog/components/Base.ts b/blog/components/Base.ts
@@ -21,6 +21,7 @@ export const Base = (props: BaseProps) =>
   <!doctype html>
   <html lang="en">
     <head>
+     <meta charset="UTF-8" />
      <meta property="og:type" content="website">
      ${
     !props.page?.relativeWebsitePath ? "" : `
@@ -41,7 +42,6 @@ export const Base = (props: BaseProps) =>
       `
   }
   
-      <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <meta http-equiv="X-UA-Compatible" content="ie=edge" />
       <link rel="icon" type="image/x-icon" href="favicon.ico">
@@ -80,9 +80,8 @@ function googleTagManagerScript() {
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-LE27PDG685"></script>
 <script>
   window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-LE27PDG685');
+  dataLayer.push(['js', new Date()]);
+  dataLayer.push(['config', 'G-LE27PDG685']);
 </script>
 `;
 }
diff --git a/blog/createPageHtml.ts b/blog/createPageHtml.ts
@@ -4,7 +4,8 @@ import { Menu } from "./components/Menu.ts";
 import { RoutedPage } from "./routes.ts";
 import { styleCssFile } from "./style/mainCss.ts";
 import { websocketScript } from "./server.ts";
-import { allMenus } from "./main.ts";
+import { allMenus, domain } from "./main.ts";
+import { fromStringToDomToString } from "./utils/utils.ts";
 
 export function createPageHtml(
   page?: RoutedPage,
@@ -28,6 +29,6 @@ export function createPageHtml(
     page: page!,
     site: { domain: domain },
   });
-  const html = fromStringToDomToString(body);
+  const html = fromStringToDomToString(page!, body);
   return html;
 }
diff --git a/...post/philosophical_ramblings_about_ecology_programming_languages_and_OOP_not_java.data.ts b/...post/philosophical_ramblings_about_ecology_programming_languages_and_OOP_not_java.data.ts
@@ -39,7 +39,7 @@ export const philosophicalRamblingsAboutEcologyProgrammingLanguagesAndOOPNotJava
       ],
       date: "2024-04-13T13:00:00.000Z",
       thumbnail: {
-        src: "/img/philosophical_ramblings_about_ecology_programming_languages_and_OOP_not_java/toomanyspiderman.small.webp",
+        src: "/img/philosophical_ramblings_about_ecology_programming_languages_and_OOP_not_java/toomanyspiderman.480x240.small.webp",
       },
     },
   };
diff --git a/blog/preprocess/apply_picture_resolutions.ts b/blog/preprocess/apply_picture_resolutions.ts
@@ -0,0 +1,125 @@
+import { HTMLDocument } from "../deps/dom.ts";
+import { RoutedPage } from "../routes.ts";
+
+type Options = {
+  mediaConfig: {
+    tiny?: string;
+    small?: string;
+    medium?: string;
+    large?: string;
+  };
+};
+
+const defaults: Options = {
+  mediaConfig: {
+    tiny: undefined,
+    small: "(min-width: 300px)",
+    medium: "(min-width: 480px)",
+    large: "(min-width: 600px)",
+  },
+};
+
+export default function pictureRelosution(
+  page: RoutedPage,
+  document: HTMLDocument,
+  imageInFolders: string[],
+  maxWidth: number
+) {
+  const options = defaults;
+
+  if (!page?.data) return;
+
+  if (!page?.data?.thumbnail) {
+    page.data.thumbnail = { src: "" };
+  }
+
+  const images = document?.querySelectorAll("img");
+  if (!images) return;
+
+  for (const img of images) {
+    const src = img.getAttribute("src");
+    const alt = img.getAttribute("alt");
+
+    src && img.setAttribute("src", src);
+    alt && img.setAttribute("alt", alt);
+
+    if (!src) return;
+    const sizes = ["large", "medium", "small", "tiny"];
+    const imagesFound: [string, string][] = [];
+    const pathFileNameWithoutExtension = src.replace(/(\..*)$/, ``);
+
+    for (const size of sizes) {
+      const regex = new RegExp(
+        `${
+          pathFileNameWithoutExtension.split("/").slice(-1)
+        }\.[0-9]{1,4}x[0-9]{1,4}\.${size}.webp`,
+      );
+      const sizeImageFound = imageInFolders.find((img) => regex.test(img));
+      sizeImageFound && imagesFound.push([size, "/img" + sizeImageFound]);
+    }
+
+    const mediaConfig: Record<string, string | undefined> = options.mediaConfig;
+
+    if (imagesFound.length > 0 && document) {
+      const picture = document.createElement("picture");
+      alt && picture.setAttribute("alt", alt);
+
+      for (const [size, path] of imagesFound) {
+        const source = document.createElement("source");
+        source.setAttribute("srcset", path);
+
+        const regex = new RegExp("\.([0-9]{1,4}x[0-9]{1,4})\.");
+        const resolutionFromName = regex.exec(path)?.[1];
+        const [w, h] = resolutionFromName?.split("x") ?? [];
+        if (w && h && !img.getAttribute("width")) {
+          let ww = parseInt(w) 
+          let hh = parseInt(h)
+          if (ww >= maxWidth){
+            hh = Math.trunc((hh*maxWidth) / ww)
+            ww = maxWidth
+          }
+          source.setAttribute("width", `${ww}px`);
+          source.setAttribute("height", `${hh}px`);
+          source.setAttribute(
+            "style",
+            `width:100%; height: auto; max-width:${ww}px; max-height: ${hh}px;`,
+          );
+        }
+
+        const media = mediaConfig[size];
+        media && source.setAttribute("media", media);
+
+        picture.appendChild(source);
+      }
+      img.replaceWith(picture);
+      const regex = new RegExp(
+        `${
+          pathFileNameWithoutExtension.split("/").slice(-1)
+        }\.[0-9]{1,4}x[0-9]{1,4}\.webp$`,
+      );
+      const sizeImageFound = imageInFolders.find((img) => regex.test(img));
+      if (sizeImageFound) {
+        const regex = new RegExp("\.([0-9]{1,4}x[0-9]{1,4})\.");
+        const resolutionFromName = regex.exec(sizeImageFound)?.[1];
+        const [w, h] = resolutionFromName?.split("x") ?? [];
+        if (w && h && !img.getAttribute("width")) {
+          let ww = parseInt(w) 
+          let hh = parseInt(h)
+          if (ww >= maxWidth){
+            hh = Math.trunc((hh*maxWidth) / ww)
+            ww = maxWidth
+          }
+          img.setAttribute("width", `${ww}px`);
+          img.setAttribute("height", `${hh}px`);
+          img.setAttribute(
+            "style",
+            `width:100%; height: auto; max-width:${ww}px; max-height: ${hh}px;`,
+          );
+        }
+        img.setAttribute("src", "/img" + sizeImageFound);
+      }
+      picture.appendChild(img);
+    }
+  }
+  return document;
+}
diff --git a/blog/preprocess/md_picture_resolution_plugin.ts b/blog/preprocess/md_picture_resolution_plugin.ts
@@ -52,34 +52,7 @@ export default function pictureRelosution(
       imageInFolders.some((img) => sizedFilePath.endsWith(img)) &&
         imagesFound.push([size, sizedFilePath]);
     }
-
-    const mediaConfig: Record<string, string | undefined> = options.mediaConfig;
-
-    if (imagesFound.length > 0 && document) {
-      const picture = document.createElement("picture");
-      alt && picture.setAttribute("alt", alt);
-
-      for (const [size, path] of imagesFound) {
-        const source = document.createElement("source");
-        source.setAttribute("data-srcset", path);
-
-        const media = mediaConfig[size];
-        media && source.setAttribute("media", media);
-
-        picture.appendChild(source);
-      }
-      img.replaceWith(picture);
-      imageInFolders.some((img) => src.endsWith(img)) &&
-        picture.appendChild(img);
-    }
   }
-  const script = document.createElement("script");
-  script.innerText = `
-window.onload = () => {
-  document.querySelectorAll('source').forEach(el => el.setAttribute('srcset', el.getAttribute('data-srcset')));
-  document.querySelectorAll('img').forEach(el => el.setAttribute('src', el.getAttribute('data-src')));
-}`;
-  const body = document.querySelector("body");
-  body && body.appendChild(script);
+
   return document;
 }
diff --git a/blog/resize-img/.gitignore b/blog/resize-img/.gitignore
@@ -1,3 +1,4 @@
 target
 cargo.lock
-.webp
+*.(large|medium|small|tiny).webp
+
diff --git a/blog/resize-img/delete-tests.sh b/blog/resize-img/delete-tests.sh
@@ -0,0 +1,3 @@
+rm -f test2.webp
+ls | grep -E "(large|medium|small|tiny)" | xargs rm
+ls | grep -E "[0-9]{1,4}x[0-9]{1,4}.webp" | xargs rm
diff --git a/blog/resize-img/src/img_to_webp.rs b/blog/resize-img/src/img_to_webp.rs
@@ -1,4 +1,4 @@
-use image::{DynamicImage, EncodableLayout, ImageReader};
+use image::{DynamicImage, EncodableLayout, GenericImageView, ImageReader};
 use std::fs::File;
 use std::io::Write;
 use std::path::Path;
@@ -7,6 +7,8 @@ use webp::{Encoder, WebPMemory};
 pub fn image_to_webp(file_path_png: &Path, file_path_webp: &Path) -> Option<()> {
     let image = ImageReader::open(file_path_png).unwrap();
     let image: DynamicImage = image.with_guessed_format().unwrap().decode().unwrap();
+    let (w, h) = image.dimensions();
+    dbg!(w, h);
     let encoder: Encoder = Encoder::from_image(&image).unwrap();
     let encoded_webp: WebPMemory = encoder.encode(65f32);
     let mut webp_image = File::create(&file_path_webp).unwrap();

diff --git a/blog/resize-img/src/main.rs b/blog/resize-img/src/main.rs
@@ -19,7 +19,10 @@ fn main() {
                 .unwrap()
                 .map(|res| res.unwrap().path())
                 .filter(|path| {
-                    let re = Regex::new(r"\.(tiny|small|medium|large)\.[^.]{0,4}$").unwrap();
+                    let re = Regex::new(
+                        r"\.[0-9]{1,4}x[0-9]{1,4}\.(tiny|small|medium|large)\.[^.]{0,4}$",
+                    )
+                    .unwrap();
                     !re.is_match(path.to_str().unwrap())
                 })
                 .collect()
@@ -47,18 +50,18 @@ fn main() {
             let (width, height) = img.dimensions();
             println!("image size: {width}, {height}");
 
-            resize_to_each_size(&img, file.to_str().unwrap());
+            resize_to_each_size(&img, &file);
         }
     }
 }
 
-fn resize_to_each_size(img: &image::DynamicImage, path: &str) {
-    let (width, _) = img.dimensions();
+fn resize_to_each_size(img: &image::DynamicImage, path: &Path) {
+    let (width, height) = img.dimensions();
 
     let tiny_width = 300u32;
     let postfix = "tiny";
     if width > tiny_width {
-        resize_image_if_not_exists(path, postfix, tiny_width, img);
+        resize_image_if_not_exists(&path, postfix, tiny_width, img);
     }
 
     let small_width = 480u32;
@@ -69,42 +72,50 @@ fn resize_to_each_size(img: &image::DynamicImage, path: &str) {
 
     let medium_width = 600u32;
     let postfix = "medium";
-    if width > medium_width {
+    if width >= medium_width {
         resize_image_if_not_exists(path, postfix, medium_width, img);
 
-        let large_path = path_with_size_postfix(path, "large");
-        if !Path::new(large_path.as_str()).exists() {
+        let large_path = path_with_size_postfix(path, format!("{width}x{height}.large").as_str());
+        if !large_path.exists() {
             img.save(large_path).unwrap();
         }
     }
+
+    let as_is_with_sizes = path_with_size_postfix(path, format!("{width}x{height}").as_str());
+    if !as_is_with_sizes.exists() {
+        img.save(as_is_with_sizes).unwrap();
+    }
 }
 
 fn resize_image_if_not_exists(
-    path: &str,
+    path: &Path,
     postfix: &str,
-    small_width: u32,
+    new_width: u32,
     img: &image::DynamicImage,
 ) {
-    let small_path = path_with_size_postfix(path, postfix);
-    if !Path::new(small_path.as_str()).exists() {
-        resize_image(small_width, img, path, postfix);
-    }
-}
-
-fn resize_image(small: u32, img: &image::DynamicImage, path: &str, postfix: &str) {
     let (width, height) = img.dimensions();
-    let (new_w, new_h) = calculate_resize_dimension_by_width(width, height, small);
-    println!("{postfix} size: {new_w}, {new_h}");
+    let (new_w, new_h) = calculate_resize_dimension_by_width(width, height, new_width);
+    let into_path = path_with_size_postfix(&path, format!("{new_w}x{new_h}.{postfix}").as_str());
+    if into_path.exists() {
+        return;
+    }
+    let into_path_dbg = into_path.to_str().unwrap();
+    println!("{into_path_dbg} size: {new_w}, {new_h}");
     let resized_img = img.resize(new_w, new_h, image::imageops::FilterType::Lanczos3);
-    let new_path = path_with_size_postfix(path, postfix);
-    println!("{new_path}");
-    resized_img.save(new_path).unwrap();
+    println!("{}", into_path_dbg);
+    resized_img.save(into_path).unwrap();
 }
 
-fn path_with_size_postfix(path: &str, postfix: &str) -> String {
-    let re = Regex::new(r"\.([^.]*)$").unwrap();
-    let new_path = re.replace(path, format!(".{}.$1", postfix));
-    new_path.to_string()
+fn path_with_size_postfix(path: &Path, postfix: &str) -> PathBuf {
+    let file_name = path.file_stem().unwrap().to_str().unwrap();
+    let file_extension = path.extension().unwrap().to_str().unwrap();
+    let new_path = path.with_file_name(format!(
+        "{file_name}.{postfix}.{file_extension}",
+        file_name = file_name,
+        postfix = postfix,
+        file_extension = file_extension
+    ));
+    new_path
 }
 
 fn calculate_resize_dimension_by_width(width: u32, height: u32, new_width: u32) -> (u32, u32) {

diff --git a/blog/resize-img/test.large.webp b/blog/resize-img/test.large.webp
diff --git a/blog/resize-img/test.medium.webp b/blog/resize-img/test.medium.webp
diff --git a/blog/resize-img/test.small.webp b/blog/resize-img/test.small.webp
diff --git a/blog/resize-img/test.tiny.webp b/blog/resize-img/test.tiny.webp
diff --git a/blog/resize-img/test2.webp b/blog/resize-img/test2.webp
diff --git a/...OOP_not_java/bands_family_tree.large.webp → ...va/bands_family_tree.1515x1114.large.webp b/...OOP_not_java/bands_family_tree.large.webp → ...va/bands_family_tree.1515x1114.large.webp
diff --git a/...ngs_about_ecology_programming_languages_and_OOP_not_java/bands_family_tree.1515x1114.webp b/...ngs_about_ecology_programming_languages_and_OOP_not_java/bands_family_tree.1515x1114.webp
diff --git a/..._OOP_not_java/bands_family_tree.tiny.webp → ..._java/bands_family_tree.300x221.tiny.webp b/..._OOP_not_java/bands_family_tree.tiny.webp → ..._java/bands_family_tree.300x221.tiny.webp
diff --git a/...OOP_not_java/bands_family_tree.small.webp → ...java/bands_family_tree.480x353.small.webp b/...OOP_not_java/bands_family_tree.small.webp → ...java/bands_family_tree.480x353.small.webp
diff --git a/...OP_not_java/bands_family_tree.medium.webp → ...ava/bands_family_tree.600x442.medium.webp b/...OP_not_java/bands_family_tree.medium.webp → ...ava/bands_family_tree.600x442.medium.webp
diff --git a/...about_ecology_programming_languages_and_OOP_not_java/chamber.1600x693.large.png b/...about_ecology_programming_languages_and_OOP_not_java/chamber.1600x693.large.png
diff --git a/...uages_and_OOP_not_java/chamber.large.webp → ..._OOP_not_java/chamber.1600x693.large.webp b/...uages_and_OOP_not_java/chamber.large.webp → ..._OOP_not_java/chamber.1600x693.large.webp
diff --git a/...lings_about_ecology_programming_languages_and_OOP_not_java/chamber.1600x693.png b/...lings_about_ecology_programming_languages_and_OOP_not_java/chamber.1600x693.png
diff --git a/...ical_ramblings_about_ecology_programming_languages_and_OOP_not_java/chamber.1600x693.webp b/...ical_ramblings_about_ecology_programming_languages_and_OOP_not_java/chamber.1600x693.webp
diff --git a/...s_about_ecology_programming_languages_and_OOP_not_java/chamber.300x130.tiny.png b/...s_about_ecology_programming_languages_and_OOP_not_java/chamber.300x130.tiny.png
diff --git a/...guages_and_OOP_not_java/chamber.tiny.webp → ...nd_OOP_not_java/chamber.300x130.tiny.webp b/...guages_and_OOP_not_java/chamber.tiny.webp → ...nd_OOP_not_java/chamber.300x130.tiny.webp
diff --git a/..._about_ecology_programming_languages_and_OOP_not_java/chamber.480x208.small.png b/..._about_ecology_programming_languages_and_OOP_not_java/chamber.480x208.small.png
diff --git a/...uages_and_OOP_not_java/chamber.small.webp → ...d_OOP_not_java/chamber.480x208.small.webp b/...uages_and_OOP_not_java/chamber.small.webp → ...d_OOP_not_java/chamber.480x208.small.webp
diff --git a/...about_ecology_programming_languages_and_OOP_not_java/chamber.600x260.medium.png b/...about_ecology_programming_languages_and_OOP_not_java/chamber.600x260.medium.png
diff --git a/...ages_and_OOP_not_java/chamber.medium.webp → ..._OOP_not_java/chamber.600x260.medium.webp b/...ages_and_OOP_not_java/chamber.medium.webp → ..._OOP_not_java/chamber.600x260.medium.webp
diff --git a/..._languages_and_OOP_not_java/compexity_and_years_of_programming.300x117.tiny.png b/..._languages_and_OOP_not_java/compexity_and_years_of_programming.300x117.tiny.png
diff --git a/...pexity_and_years_of_programming.tiny.webp → ...nd_years_of_programming.300x117.tiny.webp b/...pexity_and_years_of_programming.tiny.webp → ...nd_years_of_programming.300x117.tiny.webp
diff --git a/...nguages_and_OOP_not_java/compexity_and_years_of_programming.3262x1272.large.png b/...nguages_and_OOP_not_java/compexity_and_years_of_programming.3262x1272.large.png
diff --git a/...exity_and_years_of_programming.large.webp → ...years_of_programming.3262x1272.large.webp b/...exity_and_years_of_programming.large.webp → ...years_of_programming.3262x1272.large.webp
diff --git a/...ing_languages_and_OOP_not_java/compexity_and_years_of_programming.3262x1272.png b/...ing_languages_and_OOP_not_java/compexity_and_years_of_programming.3262x1272.png
diff --git a/..._programming_languages_and_OOP_not_java/compexity_and_years_of_programming.3262x1272.webp b/..._programming_languages_and_OOP_not_java/compexity_and_years_of_programming.3262x1272.webp
diff --git a/...languages_and_OOP_not_java/compexity_and_years_of_programming.480x188.small.png b/...languages_and_OOP_not_java/compexity_and_years_of_programming.480x188.small.png
diff --git a/...exity_and_years_of_programming.small.webp → ...d_years_of_programming.480x188.small.webp b/...exity_and_years_of_programming.small.webp → ...d_years_of_programming.480x188.small.webp
diff --git a/...anguages_and_OOP_not_java/compexity_and_years_of_programming.600x234.medium.png b/...anguages_and_OOP_not_java/compexity_and_years_of_programming.600x234.medium.png
diff --git a/...xity_and_years_of_programming.medium.webp → ..._years_of_programming.600x234.medium.webp b/...xity_and_years_of_programming.medium.webp → ..._years_of_programming.600x234.medium.webp
diff --git a/...ecology_programming_languages_and_OOP_not_java/couplingcohesion.300x75.tiny.png b/...ecology_programming_languages_and_OOP_not_java/couplingcohesion.300x75.tiny.png
diff --git a/...d_OOP_not_java/couplingcohesion.tiny.webp → ...ot_java/couplingcohesion.300x75.tiny.webp b/...d_OOP_not_java/couplingcohesion.tiny.webp → ...ot_java/couplingcohesion.300x75.tiny.webp
diff --git a/...ology_programming_languages_and_OOP_not_java/couplingcohesion.480x120.small.png b/...ology_programming_languages_and_OOP_not_java/couplingcohesion.480x120.small.png
diff --git a/..._OOP_not_java/couplingcohesion.small.webp → ..._java/couplingcohesion.480x120.small.webp b/..._OOP_not_java/couplingcohesion.small.webp → ..._java/couplingcohesion.480x120.small.webp
diff --git a/...logy_programming_languages_and_OOP_not_java/couplingcohesion.600x150.medium.png b/...logy_programming_languages_and_OOP_not_java/couplingcohesion.600x150.medium.png
diff --git a/...OOP_not_java/couplingcohesion.medium.webp → ...java/couplingcohesion.600x150.medium.webp b/...OOP_not_java/couplingcohesion.medium.webp → ...java/couplingcohesion.600x150.medium.webp
diff --git a/...ology_programming_languages_and_OOP_not_java/couplingcohesion.893x222.large.png b/...ology_programming_languages_and_OOP_not_java/couplingcohesion.893x222.large.png
diff --git a/..._OOP_not_java/couplingcohesion.large.webp → ..._java/couplingcohesion.893x222.large.webp b/..._OOP_not_java/couplingcohesion.large.webp → ..._java/couplingcohesion.893x222.large.webp
diff --git a/...out_ecology_programming_languages_and_OOP_not_java/couplingcohesion.893x222.png b/...out_ecology_programming_languages_and_OOP_not_java/couplingcohesion.893x222.png
diff --git a/...blings_about_ecology_programming_languages_and_OOP_not_java/couplingcohesion.893x222.webp b/...blings_about_ecology_programming_languages_and_OOP_not_java/couplingcohesion.893x222.webp
diff --git a/...t_ecology_programming_languages_and_OOP_not_java/ecosystem_levels.1600x1128.jpg b/...t_ecology_programming_languages_and_OOP_not_java/ecosystem_levels.1600x1128.jpg
diff --git a/...ogy_programming_languages_and_OOP_not_java/ecosystem_levels.1600x1128.large.jpg b/...ogy_programming_languages_and_OOP_not_java/ecosystem_levels.1600x1128.large.jpg
diff --git a/..._OOP_not_java/ecosystem_levels.large.webp → ...ava/ecosystem_levels.1600x1128.large.webp b/..._OOP_not_java/ecosystem_levels.large.webp → ...ava/ecosystem_levels.1600x1128.large.webp
diff --git a/...ings_about_ecology_programming_languages_and_OOP_not_java/ecosystem_levels.1600x1128.webp b/...ings_about_ecology_programming_languages_and_OOP_not_java/ecosystem_levels.1600x1128.webp
diff --git a/...cology_programming_languages_and_OOP_not_java/ecosystem_levels.300x212.tiny.jpg b/...cology_programming_languages_and_OOP_not_java/ecosystem_levels.300x212.tiny.jpg
diff --git a/...d_OOP_not_java/ecosystem_levels.tiny.webp → ...t_java/ecosystem_levels.300x212.tiny.webp b/...d_OOP_not_java/ecosystem_levels.tiny.webp → ...t_java/ecosystem_levels.300x212.tiny.webp
diff --git a/...ology_programming_languages_and_OOP_not_java/ecosystem_levels.480x339.small.jpg b/...ology_programming_languages_and_OOP_not_java/ecosystem_levels.480x339.small.jpg
diff --git a/..._OOP_not_java/ecosystem_levels.small.webp → ..._java/ecosystem_levels.480x339.small.webp b/..._OOP_not_java/ecosystem_levels.small.webp → ..._java/ecosystem_levels.480x339.small.webp
diff --git a/...logy_programming_languages_and_OOP_not_java/ecosystem_levels.600x423.medium.jpg b/...logy_programming_languages_and_OOP_not_java/ecosystem_levels.600x423.medium.jpg
diff --git a/...OOP_not_java/ecosystem_levels.medium.webp → ...java/ecosystem_levels.600x423.medium.webp b/...OOP_not_java/ecosystem_levels.medium.webp → ...java/ecosystem_levels.600x423.medium.webp
diff --git a/...es_and_OOP_not_java/functional_design_patterns_scott_wlashchin.300x213.tiny.png b/...es_and_OOP_not_java/functional_design_patterns_scott_wlashchin.300x213.tiny.png
diff --git a/...design_patterns_scott_wlashchin.tiny.webp → ...atterns_scott_wlashchin.300x213.tiny.webp b/...design_patterns_scott_wlashchin.tiny.webp → ...atterns_scott_wlashchin.300x213.tiny.webp
diff --git a/...s_and_OOP_not_java/functional_design_patterns_scott_wlashchin.480x340.small.png b/...s_and_OOP_not_java/functional_design_patterns_scott_wlashchin.480x340.small.png
diff --git a/...esign_patterns_scott_wlashchin.small.webp → ...tterns_scott_wlashchin.480x340.small.webp b/...esign_patterns_scott_wlashchin.small.webp → ...tterns_scott_wlashchin.480x340.small.webp
diff --git a/..._and_OOP_not_java/functional_design_patterns_scott_wlashchin.600x425.medium.png b/..._and_OOP_not_java/functional_design_patterns_scott_wlashchin.600x425.medium.png
diff --git a/...sign_patterns_scott_wlashchin.medium.webp → ...terns_scott_wlashchin.600x425.medium.webp b/...sign_patterns_scott_wlashchin.medium.webp → ...terns_scott_wlashchin.600x425.medium.webp
diff --git a/...s_and_OOP_not_java/functional_design_patterns_scott_wlashchin.736x521.large.png b/...s_and_OOP_not_java/functional_design_patterns_scott_wlashchin.736x521.large.png
diff --git a/...esign_patterns_scott_wlashchin.large.webp → ...tterns_scott_wlashchin.736x521.large.webp b/...esign_patterns_scott_wlashchin.large.webp → ...tterns_scott_wlashchin.736x521.large.webp
diff --git a/...nguages_and_OOP_not_java/functional_design_patterns_scott_wlashchin.736x521.png b/...nguages_and_OOP_not_java/functional_design_patterns_scott_wlashchin.736x521.png
diff --git a/...amming_languages_and_OOP_not_java/functional_design_patterns_scott_wlashchin.736x521.webp b/...amming_languages_and_OOP_not_java/functional_design_patterns_scott_wlashchin.736x521.webp
diff --git a/...gramming_languages_and_OOP_not_java/johon_carmack_about_tooling.300x68.tiny.png b/...gramming_languages_and_OOP_not_java/johon_carmack_about_tooling.300x68.tiny.png
diff --git a/...ava/johon_carmack_about_tooling.tiny.webp → ...on_carmack_about_tooling.300x68.tiny.webp b/...ava/johon_carmack_about_tooling.tiny.webp → ...on_carmack_about_tooling.300x68.tiny.webp
diff --git a/...amming_languages_and_OOP_not_java/johon_carmack_about_tooling.480x108.small.png b/...amming_languages_and_OOP_not_java/johon_carmack_about_tooling.480x108.small.png
diff --git a/...va/johon_carmack_about_tooling.small.webp → ..._carmack_about_tooling.480x108.small.webp b/...va/johon_carmack_about_tooling.small.webp → ..._carmack_about_tooling.480x108.small.webp
diff --git a/...mming_languages_and_OOP_not_java/johon_carmack_about_tooling.600x135.medium.png b/...mming_languages_and_OOP_not_java/johon_carmack_about_tooling.600x135.medium.png
diff --git a/...a/johon_carmack_about_tooling.medium.webp → ...carmack_about_tooling.600x135.medium.webp b/...a/johon_carmack_about_tooling.medium.webp → ...carmack_about_tooling.600x135.medium.webp
diff --git a/...amming_languages_and_OOP_not_java/johon_carmack_about_tooling.712x160.large.png b/...amming_languages_and_OOP_not_java/johon_carmack_about_tooling.712x160.large.png
diff --git a/...va/johon_carmack_about_tooling.large.webp → ..._carmack_about_tooling.712x160.large.webp b/...va/johon_carmack_about_tooling.large.webp → ..._carmack_about_tooling.712x160.large.webp
diff --git a/..._programming_languages_and_OOP_not_java/johon_carmack_about_tooling.712x160.png b/..._programming_languages_and_OOP_not_java/johon_carmack_about_tooling.712x160.png
diff --git a/...t_ecology_programming_languages_and_OOP_not_java/johon_carmack_about_tooling.712x160.webp b/...t_ecology_programming_languages_and_OOP_not_java/johon_carmack_about_tooling.712x160.webp
diff --git a/...amming_languages_and_OOP_not_java/josevalim_about_polymorphism.300x125.tiny.png b/...amming_languages_and_OOP_not_java/josevalim_about_polymorphism.300x125.tiny.png
diff --git a/...va/josevalim_about_polymorphism.tiny.webp → ...alim_about_polymorphism.300x125.tiny.webp b/...va/josevalim_about_polymorphism.tiny.webp → ...alim_about_polymorphism.300x125.tiny.webp
diff --git a/...mming_languages_and_OOP_not_java/josevalim_about_polymorphism.480x200.small.png b/...mming_languages_and_OOP_not_java/josevalim_about_polymorphism.480x200.small.png
diff --git a/...a/josevalim_about_polymorphism.small.webp → ...lim_about_polymorphism.480x200.small.webp b/...a/josevalim_about_polymorphism.small.webp → ...lim_about_polymorphism.480x200.small.webp
diff --git a/...ming_languages_and_OOP_not_java/josevalim_about_polymorphism.600x250.medium.png b/...ming_languages_and_OOP_not_java/josevalim_about_polymorphism.600x250.medium.png
diff --git a/.../josevalim_about_polymorphism.medium.webp → ...im_about_polymorphism.600x250.medium.webp b/.../josevalim_about_polymorphism.medium.webp → ...im_about_polymorphism.600x250.medium.webp
diff --git a/...mming_languages_and_OOP_not_java/josevalim_about_polymorphism.686x285.large.png b/...mming_languages_and_OOP_not_java/josevalim_about_polymorphism.686x285.large.png
diff --git a/...a/josevalim_about_polymorphism.large.webp → ...lim_about_polymorphism.686x285.large.webp b/...a/josevalim_about_polymorphism.large.webp → ...lim_about_polymorphism.686x285.large.webp
diff --git a/...programming_languages_and_OOP_not_java/josevalim_about_polymorphism.686x285.png b/...programming_languages_and_OOP_not_java/josevalim_about_polymorphism.686x285.png
diff --git a/..._ecology_programming_languages_and_OOP_not_java/josevalim_about_polymorphism.686x285.webp b/..._ecology_programming_languages_and_OOP_not_java/josevalim_about_polymorphism.686x285.webp
diff --git a/...ecology_programming_languages_and_OOP_not_java/langfamilyFP.1500x1865.large.png b/...ecology_programming_languages_and_OOP_not_java/langfamilyFP.1500x1865.large.png
diff --git a/..._and_OOP_not_java/langfamilyFP.large.webp → ...ot_java/langfamilyFP.1500x1865.large.webp b/..._and_OOP_not_java/langfamilyFP.large.webp → ...ot_java/langfamilyFP.1500x1865.large.webp
diff --git a/...about_ecology_programming_languages_and_OOP_not_java/langfamilyFP.1500x1865.png b/...about_ecology_programming_languages_and_OOP_not_java/langfamilyFP.1500x1865.png
diff --git a/...amblings_about_ecology_programming_languages_and_OOP_not_java/langfamilyFP.1500x1865.webp b/...amblings_about_ecology_programming_languages_and_OOP_not_java/langfamilyFP.1500x1865.webp
diff --git a/...ut_ecology_programming_languages_and_OOP_not_java/langfamilyFP.300x373.tiny.png b/...ut_ecology_programming_languages_and_OOP_not_java/langfamilyFP.300x373.tiny.png
diff --git a/...s_and_OOP_not_java/langfamilyFP.tiny.webp → ...P_not_java/langfamilyFP.300x373.tiny.webp b/...s_and_OOP_not_java/langfamilyFP.tiny.webp → ...P_not_java/langfamilyFP.300x373.tiny.webp
diff --git a/...t_ecology_programming_languages_and_OOP_not_java/langfamilyFP.480x597.small.png b/...t_ecology_programming_languages_and_OOP_not_java/langfamilyFP.480x597.small.png
diff --git a/..._and_OOP_not_java/langfamilyFP.small.webp → ..._not_java/langfamilyFP.480x597.small.webp b/..._and_OOP_not_java/langfamilyFP.small.webp → ..._not_java/langfamilyFP.480x597.small.webp
diff --git a/..._ecology_programming_languages_and_OOP_not_java/langfamilyFP.600x746.medium.png b/..._ecology_programming_languages_and_OOP_not_java/langfamilyFP.600x746.medium.png
diff --git a/...and_OOP_not_java/langfamilyFP.medium.webp → ...not_java/langfamilyFP.600x746.medium.webp b/...and_OOP_not_java/langfamilyFP.medium.webp → ...not_java/langfamilyFP.600x746.medium.webp
diff --git a/...t_ecology_programming_languages_and_OOP_not_java/langfamilyOOP.300x291.tiny.png b/...t_ecology_programming_languages_and_OOP_not_java/langfamilyOOP.300x291.tiny.png
diff --git a/..._and_OOP_not_java/langfamilyOOP.tiny.webp → ..._not_java/langfamilyOOP.300x291.tiny.webp b/..._and_OOP_not_java/langfamilyOOP.tiny.webp → ..._not_java/langfamilyOOP.300x291.tiny.webp
diff --git a/..._ecology_programming_languages_and_OOP_not_java/langfamilyOOP.480x465.small.png b/..._ecology_programming_languages_and_OOP_not_java/langfamilyOOP.480x465.small.png
diff --git a/...and_OOP_not_java/langfamilyOOP.small.webp → ...not_java/langfamilyOOP.480x465.small.webp b/...and_OOP_not_java/langfamilyOOP.small.webp → ...not_java/langfamilyOOP.480x465.small.webp
diff --git a/...ecology_programming_languages_and_OOP_not_java/langfamilyOOP.600x582.medium.png b/...ecology_programming_languages_and_OOP_not_java/langfamilyOOP.600x582.medium.png
diff --git a/...nd_OOP_not_java/langfamilyOOP.medium.webp → ...ot_java/langfamilyOOP.600x582.medium.webp b/...nd_OOP_not_java/langfamilyOOP.medium.webp → ...ot_java/langfamilyOOP.600x582.medium.webp
diff --git a/..._ecology_programming_languages_and_OOP_not_java/langfamilyOOP.858x831.large.png b/..._ecology_programming_languages_and_OOP_not_java/langfamilyOOP.858x831.large.png
diff --git a/...and_OOP_not_java/langfamilyOOP.large.webp → ...not_java/langfamilyOOP.858x831.large.webp b/...and_OOP_not_java/langfamilyOOP.large.webp → ...not_java/langfamilyOOP.858x831.large.webp
diff --git a/..._about_ecology_programming_languages_and_OOP_not_java/langfamilyOOP.858x831.png b/..._about_ecology_programming_languages_and_OOP_not_java/langfamilyOOP.858x831.png
diff --git a/..._and_OOP_not_java/oopinfluence.large.webp → ...d_OOP_not_java/langfamilyOOP.858x831.webp b/..._and_OOP_not_java/oopinfluence.large.webp → ...d_OOP_not_java/langfamilyOOP.858x831.webp
diff --git a/...cology_programming_languages_and_OOP_not_java/languages_logo.1028x100.large.png b/...cology_programming_languages_and_OOP_not_java/languages_logo.1028x100.large.png
diff --git a/...nd_OOP_not_java/languages_logo.large.webp → ...t_java/languages_logo.1028x100.large.webp b/...nd_OOP_not_java/languages_logo.large.webp → ...t_java/languages_logo.1028x100.large.webp
diff --git a/...bout_ecology_programming_languages_and_OOP_not_java/languages_logo.1028x100.png b/...bout_ecology_programming_languages_and_OOP_not_java/languages_logo.1028x100.png
diff --git a/...mblings_about_ecology_programming_languages_and_OOP_not_java/languages_logo.1028x100.webp b/...mblings_about_ecology_programming_languages_and_OOP_not_java/languages_logo.1028x100.webp
diff --git a/...t_ecology_programming_languages_and_OOP_not_java/languages_logo.300x30.tiny.png b/...t_ecology_programming_languages_and_OOP_not_java/languages_logo.300x30.tiny.png
diff --git a/...and_OOP_not_java/languages_logo.tiny.webp → ..._not_java/languages_logo.300x30.tiny.webp b/...and_OOP_not_java/languages_logo.tiny.webp → ..._not_java/languages_logo.300x30.tiny.webp
diff --git a/..._ecology_programming_languages_and_OOP_not_java/languages_logo.480x47.small.png b/..._ecology_programming_languages_and_OOP_not_java/languages_logo.480x47.small.png
diff --git a/...nd_OOP_not_java/languages_logo.small.webp → ...not_java/languages_logo.480x47.small.webp b/...nd_OOP_not_java/languages_logo.small.webp → ...not_java/languages_logo.480x47.small.webp
diff --git a/...ecology_programming_languages_and_OOP_not_java/languages_logo.600x59.medium.png b/...ecology_programming_languages_and_OOP_not_java/languages_logo.600x59.medium.png
diff --git a/...d_OOP_not_java/languages_logo.medium.webp → ...ot_java/languages_logo.600x59.medium.webp b/...d_OOP_not_java/languages_logo.medium.webp → ...ot_java/languages_logo.600x59.medium.webp
diff --git a/...OP_not_java/natural_lang_family.tiny.webp → ...ava/natural_lang_family.300x169.tiny.webp b/...OP_not_java/natural_lang_family.tiny.webp → ...ava/natural_lang_family.300x169.tiny.webp
diff --git a/...P_not_java/natural_lang_family.small.webp → ...va/natural_lang_family.480x270.small.webp b/...P_not_java/natural_lang_family.small.webp → ...va/natural_lang_family.480x270.small.webp
diff --git a/..._not_java/natural_lang_family.medium.webp → ...a/natural_lang_family.600x338.medium.webp b/..._not_java/natural_lang_family.medium.webp → ...a/natural_lang_family.600x338.medium.webp
diff --git a/...P_not_java/natural_lang_family.large.webp → ...va/natural_lang_family.960x540.large.webp b/...P_not_java/natural_lang_family.large.webp → ...va/natural_lang_family.960x540.large.webp
diff --git a/...ngs_about_ecology_programming_languages_and_OOP_not_java/natural_lang_family.960x540.webp b/...ngs_about_ecology_programming_languages_and_OOP_not_java/natural_lang_family.960x540.webp
diff --git a/...ology_programming_languages_and_OOP_not_java/objects_good_part.300x180.tiny.png b/...ology_programming_languages_and_OOP_not_java/objects_good_part.300x180.tiny.png
diff --git a/..._OOP_not_java/objects_good_part.tiny.webp → ..._java/objects_good_part.300x180.tiny.webp b/..._OOP_not_java/objects_good_part.tiny.webp → ..._java/objects_good_part.300x180.tiny.webp
diff --git a/...logy_programming_languages_and_OOP_not_java/objects_good_part.480x288.small.png b/...logy_programming_languages_and_OOP_not_java/objects_good_part.480x288.small.png
diff --git a/...OOP_not_java/objects_good_part.small.webp → ...java/objects_good_part.480x288.small.webp b/...OOP_not_java/objects_good_part.small.webp → ...java/objects_good_part.480x288.small.webp
diff --git a/...ut_ecology_programming_languages_and_OOP_not_java/objects_good_part.500x299.png b/...ut_ecology_programming_languages_and_OOP_not_java/objects_good_part.500x299.png
diff --git a/...lings_about_ecology_programming_languages_and_OOP_not_java/objects_good_part.500x299.webp b/...lings_about_ecology_programming_languages_and_OOP_not_java/objects_good_part.500x299.webp
diff --git a/...ut_ecology_programming_languages_and_OOP_not_java/oopinfluence.300x291.tiny.png b/...ut_ecology_programming_languages_and_OOP_not_java/oopinfluence.300x291.tiny.png
diff --git a/...s_and_OOP_not_java/oopinfluence.tiny.webp → ...P_not_java/oopinfluence.300x291.tiny.webp b/...s_and_OOP_not_java/oopinfluence.tiny.webp → ...P_not_java/oopinfluence.300x291.tiny.webp
diff --git a/...t_ecology_programming_languages_and_OOP_not_java/oopinfluence.480x465.small.png b/...t_ecology_programming_languages_and_OOP_not_java/oopinfluence.480x465.small.png
diff --git a/..._and_OOP_not_java/oopinfluence.small.webp → ..._not_java/oopinfluence.480x465.small.webp b/..._and_OOP_not_java/oopinfluence.small.webp → ..._not_java/oopinfluence.480x465.small.webp
diff --git a/..._ecology_programming_languages_and_OOP_not_java/oopinfluence.600x582.medium.png b/..._ecology_programming_languages_and_OOP_not_java/oopinfluence.600x582.medium.png
diff --git a/...and_OOP_not_java/oopinfluence.medium.webp → ...not_java/oopinfluence.600x582.medium.webp b/...and_OOP_not_java/oopinfluence.medium.webp → ...not_java/oopinfluence.600x582.medium.webp
diff --git a/...t_ecology_programming_languages_and_OOP_not_java/oopinfluence.858x831.large.png b/...t_ecology_programming_languages_and_OOP_not_java/oopinfluence.858x831.large.png
diff --git a/...ings_about_ecology_programming_languages_and_OOP_not_java/oopinfluence.858x831.large.webp b/...ings_about_ecology_programming_languages_and_OOP_not_java/oopinfluence.858x831.large.webp
diff --git a/...s_about_ecology_programming_languages_and_OOP_not_java/oopinfluence.858x831.png b/...s_about_ecology_programming_languages_and_OOP_not_java/oopinfluence.858x831.png
diff --git a/..._ramblings_about_ecology_programming_languages_and_OOP_not_java/oopinfluence.858x831.webp b/..._ramblings_about_ecology_programming_languages_and_OOP_not_java/oopinfluence.858x831.webp
diff --git a/...logy_programming_languages_and_OOP_not_java/toomanyspiderman.1140x570.large.png b/...logy_programming_languages_and_OOP_not_java/toomanyspiderman.1140x570.large.png
diff --git a/blog/resize-img/test2.large.webp → ...java/toomanyspiderman.1140x570.large.webp b/blog/resize-img/test2.large.webp → ...java/toomanyspiderman.1140x570.large.webp
diff --git a/...ut_ecology_programming_languages_and_OOP_not_java/toomanyspiderman.1140x570.png b/...ut_ecology_programming_languages_and_OOP_not_java/toomanyspiderman.1140x570.png
diff --git a/..._OOP_not_java/toomanyspiderman.large.webp → ...P_not_java/toomanyspiderman.1140x570.webp b/..._OOP_not_java/toomanyspiderman.large.webp → ...P_not_java/toomanyspiderman.1140x570.webp
diff --git a/...cology_programming_languages_and_OOP_not_java/toomanyspiderman.300x150.tiny.png b/...cology_programming_languages_and_OOP_not_java/toomanyspiderman.300x150.tiny.png
diff --git a/blog/resize-img/test2.tiny.webp → ...t_java/toomanyspiderman.300x150.tiny.webp b/blog/resize-img/test2.tiny.webp → ...t_java/toomanyspiderman.300x150.tiny.webp
diff --git a/...ology_programming_languages_and_OOP_not_java/toomanyspiderman.480x240.small.png b/...ology_programming_languages_and_OOP_not_java/toomanyspiderman.480x240.small.png
diff --git a/blog/resize-img/test2.small.webp → ..._java/toomanyspiderman.480x240.small.webp b/blog/resize-img/test2.small.webp → ..._java/toomanyspiderman.480x240.small.webp
diff --git a/...logy_programming_languages_and_OOP_not_java/toomanyspiderman.600x300.medium.png b/...logy_programming_languages_and_OOP_not_java/toomanyspiderman.600x300.medium.png
diff --git a/blog/resize-img/test2.medium.webp → ...java/toomanyspiderman.600x300.medium.webp b/blog/resize-img/test2.medium.webp → ...java/toomanyspiderman.600x300.medium.webp
diff --git a/...mblings_about_ecology_programming_languages_and_OOP_not_java/toomanyspiderman.medium.webp b/...mblings_about_ecology_programming_languages_and_OOP_not_java/toomanyspiderman.medium.webp
diff --git a/...amblings_about_ecology_programming_languages_and_OOP_not_java/toomanyspiderman.small.webp b/...amblings_about_ecology_programming_languages_and_OOP_not_java/toomanyspiderman.small.webp
diff --git a/...ramblings_about_ecology_programming_languages_and_OOP_not_java/toomanyspiderman.tiny.webp b/...ramblings_about_ecology_programming_languages_and_OOP_not_java/toomanyspiderman.tiny.webp
diff --git a/blog/style/mainCss.ts b/blog/style/mainCss.ts
@@ -1,5 +1,7 @@
 import { cssClass, cssElement, cssFile } from "./css.ts";
 
+export const mainWidth = 800;
+
 const htmlStyle = cssElement({
   elementName: "body, html",
   properties: {
@@ -51,7 +53,7 @@ export const mainClass = cssClass({
   className: "main",
   properties: {
     margin: "auto auto auto auto",
-    maxWidth: "800px",
+    maxWidth: `${mainWidth}px`,
     fontSize: "18px",
     width: "90%",
     fontFamily: `"Open Sans","Helvetica Neue",sans-serif`,

diff --git a/blog/utils/utils.ts b/blog/utils/utils.ts
@@ -1,7 +1,8 @@
 import { DOMParser } from "../deps/dom.ts";
 import { jsBeautify } from "../deps/js-beautify.ts";
-import pictureRelosution from "../preprocess/md_picture_resolution_plugin.ts";
+import pictureRelosution from "../preprocess/apply_picture_resolutions.ts";
 import { RoutedPage } from "../routes.ts";
+import { mainWidth } from "../style/mainCss.ts";
 
 export type FileOrDir = [string, FileOrDir[]] | string;
 
@@ -52,9 +53,8 @@ export function fromStringToDomToString(page: RoutedPage, body: string) {
   const parser = new DOMParser();
   const document = parser.parseFromString(body, "text/html");
 
-  //const documentUpdated = pictureRelosution(page, document!, imagesInFolder) ?? document
-
-  const html = `<!DOCTYPE html>\n${document.documentElement?.outerHTML || ""}`;
+  const documentUpdated = pictureRelosution(page, document!, imagesInFolder, mainWidth) ?? document
+  const html = `<!DOCTYPE html>\n${documentUpdated.documentElement?.outerHTML || ""}`;
   return jsBeautify.html(html);
 }