Convert images to webp and add scripts to keep doing so

.github/workflows/check_images.yaml

@@ -0,0 +1,53 @@
+name: Check Images in PR
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
+
+jobs:
+  check-images:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.x'
+
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install PyGithub
+
+      - name: Run Image Check Script
+        id: image_check
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
+          GITHUB_REF: ${{ github.ref }}
+        run: |
+          python scripts/webp_conversion/check_images_in_pr.py
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v3
+        id: fc
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: mage files/references
+
+      - name: Create or update comment
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: ${{ steps.image_check.outputs.comment }}
+          edit-mode: replace

content/OS-developing-world/OS-developing-world.md

@@ -30,7 +30,7 @@ subtitle = "A Collection of Practical Guides"
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "headers/bubbles-wide.jpg"  # Name of image in `static/img/`.
+  # image = "headers/bubbles-wide.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
   # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
   # image_position = "center"  # Options include `left`, `center` (default), or `right`.
@@ -91,7 +91,7 @@ This project will collect practical experiences and guidelines related to Open S
 
 <div style="width:600px">
 
-![Placeholder map](LMIC.jpg)
+![Placeholder map](LMIC.webp)
 
 ***[insert collaboration map here (in-progress)]***
 

content/about/about/about.md

@@ -30,7 +30,7 @@ classtitle = "text-center"
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "headers/bubbles-wide.jpg"  # Name of image in `static/img/`.
+  # image = "headers/bubbles-wide.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
   # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
   # image_position = "center"  # Options include `left`, `center` (default), or `right`.

content/about/about/history.md

@@ -65,7 +65,7 @@ date_format = "Jan 02, 2006"
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "headers/bubbles-wide.jpg"  # Name of image in `static/img/`.
+  # image = "headers/bubbles-wide.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
   # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
   # image_position = "center"  # Options include `left`, `center` (default), or `right`.

content/about/ambassadorship/about.md

@@ -30,7 +30,7 @@ classtitle = "text-center"
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "headers/bubbles-wide.jpg"  # Name of image in `static/img/`.
+  # image = "headers/bubbles-wide.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
   # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
   # image_position = "center"  # Options include `left`, `center` (default), or `right`.

content/about/ambassadorship/history.md

@@ -65,7 +65,7 @@ date_format = "Jan 02, 2006"
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "headers/bubbles-wide.jpg"  # Name of image in `static/img/`.
+  # image = "headers/bubbles-wide.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
   # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
   # image_position = "center"  # Options include `left`, `center` (default), or `right`.

content/about/community/about.md

@@ -30,7 +30,7 @@ classtitle = "text-center"
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "headers/bubbles-wide.jpg"  # Name of image in `static/img/`.
+  # image = "headers/bubbles-wide.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
   # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
   # image_position = "center"  # Options include `left`, `center` (default), or `right`.

content/about/community/people.md

@@ -42,7 +42,7 @@ subtitle = ""
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "background.jpg"  # Name of image in `static/img/`.
+  # image = "background.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
 
   # Text color (true=light or false=dark).

content/about/get-involved/about.md

@@ -30,7 +30,7 @@ classtitle = ""
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "headers/bubbles-wide.jpg"  # Name of image in `static/img/`.
+  # image = "headers/bubbles-wide.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
   # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
   # image_position = "center"  # Options include `left`, `center` (default), or `right`.

content/about/get-involved/calendar.md

@@ -30,7 +30,7 @@ classtitle = "text-center"
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "headers/bubbles-wide.jpg"  # Name of image in `static/img/`.
+  # image = "headers/bubbles-wide.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
   # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
   # image_position = "center"  # Options include `left`, `center` (default), or `right`.

content/about/get-involved/contact.md

@@ -11,21 +11,21 @@ subtitle = "Whether you have questions getting started or you want to know how t
 [[feature]]
   icon = "envelope"
   icon_pack = "fas"
-  #img = "megaphone.png"
+  #img = "megaphone.webp"
   name = "Email"
   description = " [[email protected]](mailto:[email protected])"
 
 [[feature]]
   icon = "slack"
   icon_pack = "fab"
-  # img = "teamwork.png"
+  # img = "teamwork.webp"
   name = "Slack"
   description = "[Join our open Slack channel](https://join.slack.com/t/forrt/shared_invite/enQtODMwODI0OTk4ODgzLTM0ZTQ3NDk5MzA1ZjBmNWJjYTVlN2Y2YTk0ZTJhYTY5NDliMDYzMjg2MWE0ZDRhOTY0ZDY3OTRlNDA4ODQ3NjQ)" 
 
 [[feature]]
   icon = "github"
   icon_pack = "fab"
-  # img = "partner.png"
+  # img = "partner.webp"
   name = "GitHub"
   description = "[Join our team on GitHub](https://github.com/forrtproject)"
 

content/about/get-involved/get-involved.md

@@ -14,21 +14,21 @@ subtitle = """*Join the movement for better education*
 # [[feature]]
 #   #icon = "slack"
 #   #icon_pack = "fab"
-#   img = "megaphone.png"
+#   img = "megaphone.webp"
 #   name = "Spread the Word"
 #   description = "Better Education is for everyone. Help us spread the word by joining our [open Slack channel](https://join.slack.com/t/forrt/# shared_invite/enQtODMwODI0OTk4ODgzLTM0ZTQ3NDk5MzA1ZjBmNWJjYTVlN2Y2YTk0ZTJhYTY5NDliMDYzMjg2MWE0ZDRhOTY0ZDY3OTRlNDA4ODQ3NjQ) and invite your friends # and colleagues to be part of our community."
 #   
 # [[feature]]
 # #  icon = "users"
 # #  icon_pack = "fas"
-#   img = "teamwork.png"
+#   img = "teamwork.webp"
 #   name = "Join Our Team"
 #   description = "Everything we develop and produce is in the open. You can join our team [on GitHub](https://github.com/flavioazevedo/FORRT). If you # want to become an active contributors [email us](mailto:[email protected])."  
 #   
 # [[feature]]
 #   # icon = "handshake"
 #   # icon_pack = "fas"
-#   img = "partner.png"
+#   img = "partner.webp"
 #   name = "Become a Partner"
 #   description = "We have three different partner levels (Core, Strategic and Institutional) that help us to develop the principles enshrined in # FORRT. If you want to become a partner [email us](mailto:[email protected])."
 

content/about/get-involved/intro.md

@@ -30,7 +30,7 @@ classtitle = ""
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "headers/bubbles-wide.jpg"  # Name of image in `static/img/`.
+  # image = "headers/bubbles-wide.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
   # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
   # image_position = "center"  # Options include `left`, `center` (default), or `right`.

content/about/get-involved/newsletter.md

@@ -29,7 +29,7 @@ subtitle = "Subscribe to our newsletter from FORRT to get the latest news about
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "headers/bubbles-wide.jpg"  # Name of image in `static/img/`.
+  # image = "headers/bubbles-wide.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
   # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
   # image_position = "center"  # Options include `left`, `center` (default), or `right`.

content/about/mission/about.md

@@ -30,7 +30,7 @@ classtitle = ""
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "headers/bubbles-wide.jpg"  # Name of image in `static/img/`.
+  # image = "headers/bubbles-wide.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
   # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
   # image_position = "center"  # Options include `left`, `center` (default), or `right`.

content/about/mission/advocacy.md

@@ -54,7 +54,7 @@ subtitle = ""
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "background.jpg"  # Name of image in `static/img/`.
+  # image = "background.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
 
   # Text color (true=light or false=dark).

content/about/mission/for-students.md

@@ -30,7 +30,7 @@ classtitle = ""
   # gradient_end = "SkyBlue"
 
   # Background image.
-  # image = "headers/bubbles-wide.jpg"  # Name of image in `static/img/`.
+  # image = "headers/bubbles-wide.webp"  # Name of image in `static/img/`.
   # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
   # image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
   # image_position = "center"  # Options include `left`, `center` (default), or `right`.