optimize image render

config.yaml

@@ -3,8 +3,7 @@ languageName: English
 defaultContentLanguage: en
 title: 'Scim - Libre.sh'
 theme: Indiiie
-author:
-  name: 'Indie Hosters'
+author: 'Indie Hosters'
 markup:
   goldmark:
     extensions:

content/overview/comparison.md

@@ -6,42 +6,33 @@ weight : 4
 ---
 ### Others management protocols
 {{< switch-box title="Ldap" >}}
-With this LDAP approach **everything is centralized** (except authorization).
+With this LDAP approach <strong>everything is centralized</strong> (except authorization).
 
-<picture>
-    <source srcset="media/small/ldap-diagram.svg" media="(max-width: 768px)">
-    <img src="media/ldap-diagram.svg" alt="LDAP diagram">
-</picture>
+{{< imgproc "ldap-diagram.png" "LDAP diagram" "mr-t-1-5 mr-b-1-5">}}
 
-**Everything speaks the LDAP protocol langage.** Identities are stored in an LDAP directory, which is provisioned via LDAP protocol. Authentication is done by the  application that asks the user’s credentials and validates them against the directory via LDAP protocol.
+<strong>Everything speaks the LDAP protocol langage.</strong> Identities are stored in an LDAP directory, which is provisioned via LDAP protocol. Authentication is done by the  application that asks the user’s credentials and validates them against the directory via LDAP protocol.
 {{< /switch-box >}}
 
 {{< switch-box title="Ldap+SSO" >}}
-This architecture **tackles the two main drawbacks of the only LDAP approach** : the missing single sign-on and the security vulnerability. **Authentication is delegated to other web protocols** (like OAuth, OIDC or SAML). This way, the user logs in only once to the identity provider.
+This architecture <strong>tackles the two main drawbacks of the only LDAP approach</strong> : the missing single sign-on and the security vulnerability. <strong>Authentication is delegated to other web protocols</strong> (like OAuth, OIDC or SAML). This way, the user logs in only once to the identity provider.
+
+{{< imgproc "ldap-sso-diagram.png" "LDAP with SSO diagram" "mr-t-1-5 mr-b-1-5" >}}
 
-<picture>
-    <source srcset="media/small/ldap-sso-diagram.svg" media="(max-width: 768px)">
-    <img src="media/ldap-sso-diagram.svg" alt="LDAP with SSO diagram">
-</picture>
 {{< /switch-box >}}
 
 
 {{< switch-box title="SSO" >}}
-On modern web infrastructure, LDAP started to be abandoned because **loose provisioning can also be done via SSO protocols.**
+On modern web infrastructure, LDAP started to be abandoned because <strong>loose provisioning can also be done via SSO protocols.</strong>
+
+{{< imgproc "sso-diagram.png" "SSO only diagram" "mr-t-1-5 mr-b-1-5" >}}
 
-<picture>
-    <source srcset="media/small/sso-diagram.svg" media="(max-width: 768px)">
-    <img src="media/sso-diagram.svg" alt="SSO only diagram">
-</picture>
 {{< /switch-box >}}
 
 {{< switch-box title="SSO+SCIM" >}}
-**SCIM solve the remaining problems** via a simple standard web api. This infrastructure is **event driven, a provisioning action on the IdP is quickly passed on all applications.**
+<strong>SCIM solve the remaining problems</strong> via a simple standard web api. This infrastructure is <strong>event driven, a provisioning action on the IdP is quickly passed on all applications.</strong>
+
+{{< imgproc "sso-scim-diagram.png" "SSO with SCIM diagram" "mr-t-1-5 mr-b-1-5" >}}
 
-<picture>
-    <source srcset="media/small/sso-scim-diagram.svg" media="(max-width: 768px)">
-    <img src="media/sso-scim-diagram.svg" alt="SSO with SCIM diagram">
-</picture>
 {{< /switch-box >}}
 
 | | LDAP | LDAP & SSO | SSO | SSO & SCIM |

content/overview/identity-management.md

@@ -4,12 +4,7 @@ description : A **quick overview** of some different issues that exist when **di
 color : yellow
 weight : 1
 ---
-
-<picture>
-    <source srcset="media/small/illus-basics.svg" media="(max-width: 768px)">
-    <img src="media/illus-basics.svg" alt="Illustation of the basics of identity magagment">
-</picture>
-
+{{< imgproc "illus-basics.png" "Illustation of the basics of identity magagment" >}}
 
 {{< grid >}}
 {{< card icon="user" >}}
@@ -35,7 +30,7 @@ How to manage & transfer user’s identity ?
 
 Among all these identity management concepts, SCIM is a matter of provisioning ; it concerns how information linked to an identity is transferred between different apps.
 
-<img alt="illustration of losing data" src="media/illus-loose-data.svg" class="float-right w-60">
+{{< imgproc "illus-loose-data.png" "illustration of losing data" "float-right w-60">}}
 
 ### SCIM environement 
 Because SCIM tackle the question of provisioning, one of best the identity management environments where SCIM is relevant is an environment composed of many apps or services that are **not well integrated natively** and are used by many users.

content/overview/scenario.md

@@ -5,7 +5,7 @@ color : blue-2
 weight : 3
 ---
  
-<img alt="Scim diagram" src="media/scim-diagram-1.svg" class="float-right">
+{{< imgproc "scim-diagram.png" "Scim diagram" "float-right">}}
 
 ### SCIM Client and Server
 While SCIM is a protocol for provisioning and managing identity, there **isn’t really a concept of Identity Provider (IdP)** within its architecture. Instead, SCIM architecture consists (only) of **a Client which makes HTTP calls, and a Server, which receives them**.

content/overview/scim.md

@@ -4,7 +4,8 @@ description : SCIM, for System for Cross-domain Identity Management are specific
 color : blue-1
 weight : 2
 ---
-<img alt="Scim diagram" src="media/scim-diagram-ressource.svg" class="float-right">
+
+{{< imgproc "scim-diagram-ressource.png" "Scim diagram" "float-right">}}
 
 ### Quick overview
 The **SCIM protocol** is an application-level protocol for **provisioning** and **managing identity** data specified through SCIM schemas.

themes/Indiiie/layouts/shortcodes/imgproc.html

@@ -0,0 +1,23 @@
+{{ $alt := .Get 1 | default "" }}
+{{ $class := .Get 2 | default "" }}
+{{ $imgpath := "images/" }}
+
+{{- with $mainPath := .Get 0 }}
+
+    {{- with $i := resources.Get (printf "%s%s" $imgpath $mainPath) }}
+        {{ $resizedImage := $i.Process "resize 720x" }}
+        <picture class="{{ $class}}">
+            {{ $smallpath := "images/small/" }}
+
+            {{- with $smallImage := resources.Get (printf "%s%s" $smallpath $mainPath ) }}
+                {{ $smallResized := $smallImage.Process "resize 720x" }}
+                <source srcset="{{ $smallResized.RelPermalink }}" media="(max-width: 768px)">
+            {{- end}}
+            <img src="{{ $resizedImage.RelPermalink }}" alt="{{ $alt }}">
+        </picture>
+    {{- else }}
+        {{- errorf "The %q shortcode was unable to find %q. See %s" $.Name . $.Position }}
+    {{- end }}
+{{- else }}
+  {{- errorf "The %q shortcode requires a positional parameter (0) indicating the image path, relative to the current page. See %s" $.Name $.Position }}
+{{- end }}

themes/Indiiie/layouts/shortcodes/switch-box.html

@@ -1,3 +1,3 @@
 <div id="{{ .Get "title" | safeHTMLAttr }}" class="switch-box">
-    {{ .Inner | markdownify }}
+    {{ .Inner | safeHTML }}
 </div>

themes/Indiiie/static/css/style.css

@@ -287,6 +287,14 @@ svg{
     width: 83%;
 }
 
+.mr-t-1-5{
+    margin-top: 2em;
+}
+.mr-b-1-5{
+    margin-bottom: 2em;
+}
+
+
 img{
     width: 100%;
     max-width: 720px;
@@ -606,11 +614,15 @@ g.word{
     position: relative;
     z-index: 0;
     border: 2px solid var(--marked-color);
-    padding: .5em 4%;
+    padding: 2em 4%;
     border-radius: 2px;
     background-color: var(--paper-color);
 }
 
+.switch-box img{
+    max-width:none;
+}
+
 /* Implementation type */
 .type{
     font-weight: 1000;