global review

This commit is contained in:
Tim_J 2024-08-29 23:46:48 +02:00
parent 3544b327c8
commit cf2652ce8f
28 changed files with 351 additions and 819 deletions

View file

@ -1,7 +1,7 @@
--- ---
title: Implementations title: Implementations
description : Non-exaustiv list of implementation of SCIM protocol in server and client applications description : Non-exhaustive list of implementation of SCIM protocol in server and client applications
color : blue-2 color : blue-1
--- ---
{{< grid >}} {{< grid >}}
@ -16,4 +16,8 @@ color : blue-2
{{< implementation type="client" devs="IndieHosters" link="https://indiehosters.net/">}} {{< implementation type="client" devs="IndieHosters" link="https://indiehosters.net/">}}
#### Element #### Element
{{< /implementation >}} {{< /implementation >}}
{{< implementation type="client" devs="IndieHosters" link="https://indiehosters.net/">}}
#### Cli
{{< /implementation >}}
{{< /grid >}} {{< /grid >}}

View file

@ -1,5 +0,0 @@
---
title: test implementation
description : Non-exaustiv list of implementation of SCIM protocol in server and client applications
color : blue-dark
---

View file

@ -1,16 +1,16 @@
--- ---
title: Why SCIM is better ? title: Why is SCIM better ?
description : Differences between several centralized user management protocols in a world of web application hosting that show **SCIM is an upgrade.** description : Differences between several centralized user management protocols in a world of web application hosting that show **SCIM is an upgrade.**
color : green color : green
weight : 4 weight : 4
--- ---
### Others managmeent protocols ### Others management protocols
{{< switch-box title="Ldap" >}} {{< switch-box title="Ldap" >}}
With this LDAP approach **everything is centralized** (except authorization). With this LDAP approach **everything is centralized** (except authorization).
![LDAP diagram](media/ldap-diagram.svg) ![LDAP diagram](media/ldap-diagram.svg)
**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 users credentials and validates them against the directory via LDAP protocol. **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 users credentials and validates them against the directory via LDAP protocol.
{{< /switch-box >}} {{< /switch-box >}}
{{< switch-box title="Ldap+SSO" >}} {{< switch-box title="Ldap+SSO" >}}
@ -27,18 +27,17 @@ On modern web infrastructure, LDAP started to be abandoned because **loose provi
{{< /switch-box >}} {{< /switch-box >}}
{{< switch-box title="SSO+SCIM" >}} {{< switch-box title="SSO+SCIM" >}}
**SCIM to solve the remaining problems** via a simple standard web api. This infrastructure is **event driven, a provisioning action on the IdP is quickly pass on all applications.** **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.**
![SSO with SCIM diagram](media/sso-scim-diagram.svg) ![SSO with SCIM diagram](media/sso-scim-diagram.svg)
{{< /switch-box >}} {{< /switch-box >}}
| | LDAP | LDPA & SSO | SSO | SSO & SCIM | | | LDAP | LDAP & SSO | SSO | SSO & SCIM |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| Easy to implement | {{< svg-render cross >}} <br> *Mature but old and difficult* | {{< svg-render cross >}} <br> *Mature but old and difficult* | {{< svg-render cross >}} {{< svg-render check >}} <br> *Simple and web native, but non-standard IdP* | {{< svg-render check >}} <br> *Cli or ui could be used on IdP or on apps* | | Easy to implement | {{< svg-render cross >}} <br> *Mature but old and difficult* | {{< svg-render cross >}} <br> *Mature but old and difficult* | {{< svg-render cross >}} {{< svg-render check >}} <br> *Simple and web native, but non-standard IdP* | {{< svg-render check >}} <br> *Cli or UI could be used on IdP or on apps* |
| Many implementations | {{< svg-render check >}} | {{< svg-render check >}} | {{< svg-render check >}} | {{< svg-render cross >}} <br> *Not a lot of implementations yet* | | Many implementations | {{< svg-render check >}} | {{< svg-render check >}} | {{< svg-render check >}} | {{< svg-render cross >}} <br> *Not a lot of implementations yet* |
| Single sign-on | {{< svg-render cross >}} <br> *User must sign-on each application* | {{< svg-render check >}} | {{< svg-render check >}} | {{< svg-render check >}} | | Single sign-on | {{< svg-render cross >}} <br> *User must sign-on each application* | {{< svg-render check >}} | {{< svg-render check >}} | {{< svg-render check >}} |
| No trust issues | {{< svg-render cross >}} <br> *Expose users credentials to each application* | {{< svg-render cross >}} <br> ***???????*** | {{< svg-render check >}} <br> *Zero trust in applications* | {{< svg-render check >}} <br> *Zero trust in applications* | | No trust issues | {{< svg-render cross >}} <br> *Expose users credentials to each application* | {{< svg-render cross >}} <br> ***???????*** | {{< svg-render check >}} <br> *Zero trust in applications* | {{< svg-render check >}} <br> *Zero trust in applications* |
| Scalable provisioning | {{< svg-render cross >}} <br> *By diffing, each app reads all and compares it* | {{< svg-render cross >}} <br> *By diffing, each app reads all and compares it* | {{< svg-render check >}} <br> *No diffing, modern storage, SQL database can be used* | {{< svg-render check >}} <br> *Real time atomic provisioning* | | Scalable provisioning | {{< svg-render cross >}} <br> *By diffing, each app reads all and compares it* | {{< svg-render cross >}} <br> *By diffing, each app reads all and compares it* | {{< svg-render check >}} <br> *No diffing, modern storage, SQL database can be used* | {{< svg-render check >}} <br> *Real time atomic provisioning* |
| Scalable provisioning | {{< svg-render cross >}} <br> *Only when apps trigger it or when the user logs in* | {{< svg-render cross >}} <br> *Only when apps trigger it or when the user logs in* | {{< svg-render cross >}} <br> *No way to remove a user from the application* | {{< svg-render check >}} | | Scalable provisioning | {{< svg-render cross >}} <br> *Only when apps trigger it or when the user logs in* | {{< svg-render cross >}} <br> *Only when apps trigger it or when the user logs in* | {{< svg-render cross >}} <br> *No way to remove a user from the application* | {{< svg-render check >}} |
| GDPR Compliant | {{< svg-render cross >}} | {{< svg-render cross >}} | {{< svg-render cross >}} | {{< svg-render check >}} | | GDPR Compliant | {{< svg-render cross >}} | {{< svg-render cross >}} | {{< svg-render cross >}} | {{< svg-render check >}} |

View file

@ -1,32 +1,32 @@
--- ---
title: Identity Management title: Identity Management
description : "What we speak about and in **which environment**. We must agree on some **different problematics** that exist to better understand why we use SCIM." description : "What we speak about and in **which environment**. We must agree on some **different problematics** that exists to better understand why we use SCIM."
color : yellow color : yellow
weight : 1 weight : 1
--- ---
![basics of identity managment](media/illus-basics.svg) ![basics of identity management](media/illus-basics.svg)
{{< grid >}} {{< grid >}}
{{< card icone="user" >}} {{< card icon="user" >}}
#### Authentication #### Authentication
Who is this user ? Who is this user ?
{{< /card >}} {{< /card >}}
{{< card icone="lock" >}} {{< card icon="lock" >}}
#### Authorization #### Authorization
Is this user allowed to access this resource ? Is this user allowed to access this resource ?
{{< /card >}} {{< /card >}}
{{< card icone="cloud" >}} {{< card icon="cloud" >}}
#### Storage #### Storage
Where are users identity & credentials stored? Where are users identity & credentials stored?
{{< /card >}} {{< /card >}}
{{< card icone="prov" >}} {{< card icon="prov" >}}
#### Provisioning #### Provisioning
How to manage & transfer users identity ? How to manage & transfer users identity ?
{{< /card >}} {{< /card >}}
{{< /grid >}} {{< /grid >}}
<img alt="illustration of loosing datas" src="media/illus-loose-data.svg" class="float-right"> <img alt="illustration of losing data" src="media/illus-loose-data.svg" class="float-right">
### Our environment ### Our environment
Our digital work environment is composed of **many applications** and web services. We want a **seamless user experience** for our free software based collaboration platform. With a **Single Sign-on (SSO)** system users get a unified login and logout experience but there is a catch. Our digital work environment is composed of **many applications** and web services. We want a **seamless user experience** for our free software based collaboration platform. With a **Single Sign-on (SSO)** system users get a unified login and logout experience but there is a catch.
@ -38,4 +38,4 @@ Traditional SSO protocols like OpenID Connect do **not support syncing user prof
* So its **not GDPR compliant** (by default) * So its **not GDPR compliant** (by default)
#### In essence #### In essence
<mark>Current existing protocols are **difficult to implement or/and to use** or are **custom for specific usecase** then **non-standardized**.</mark> <mark>Current existing protocols are **difficult to implement or/and to use** or are **custom for specific use case** then **non-standardized**.</mark>

View file

@ -1,5 +1,5 @@
--- ---
title: How we use SCIM title: How do we use SCIM ?
description : Our focus is around **collaborative tooling**. Thus, information to provision are only email, first name, last name and display name for users and name and membership for group. description : Our focus is around **collaborative tooling**. Thus, information to provision are only email, first name, last name and display name for users and name and membership for group.
color : blue-2 color : blue-2
weight : 3 weight : 3
@ -28,4 +28,4 @@ And, when a resource is modified in the user database of the Identity Provider,
#### In essence #### In essence
<mark>SCIM compliant **open source Web SSO providers** and, **Applications with SCIM API** for user provisioning.</mark> <mark>SCIM compliant **open source Web SSO providers** and, **Applications with SCIM API** for user provisioning.</mark>

View file

@ -15,26 +15,26 @@ Its intent is to **reduce the cost and complexity** of user management operation
* **Applying existing models** (authentication, authorization, and privacy) * **Applying existing models** (authentication, authorization, and privacy)
* Binding documents to provide **patterns for exchanging this schema using standard protocols** * Binding documents to provide **patterns for exchanging this schema using standard protocols**
* Easily improve **GDPR compliance** * Easily improve **GDPR compliance**
* **Consolidate the user experience** across multiple FOSS applications as one platform * **Consolidate the user experience** across multiple FOSS applications as one platform
{{< grid >}} {{< grid >}}
{{< card >}} {{< card >}}
#### Model #### Resource based
SCIM 2.0 is built on an object model where **a Resource is the common denominator** and all SCIM objects are derived from it. In SCIM 2.0 **a Resource is the common denominator** and all SCIM objects are derived from it.
{{< /card >}} {{< /card >}}
{{< card >}} {{< card >}}
#### Rest API #### Rest API
For manipulation of resources, with a set of operations, which **support everything** from **patching a specific attribute on a specific user** to doing **massive bulk updates**. **An api to manipulate resources**, from patching a specific attribute to doing massive bulk updates.
{{< /card >}} {{< /card >}}
{{< card >}} {{< card >}}
#### Discover #### Ends points
To **simplify interoperability**, SCIM provides **three end points** to discover supported features and specific attribute details. SCIM provides **three end points** to **simplify interoperability** and discover features and details.
{{< /card >}} {{< /card >}}
{{< /grid >}} {{< /grid >}}
<a class="btn lv2" target="_blank" href="https://simplecloud.info">See the official spec ↗</a> <a class="btn lv2" target="_blank" href="https://simplecloud.info">See the official spec ↗</a>
#### In essence #### In essence
<mark>Make it **fast**, **cheap**, and **easy** to **move users in to**, **out of**, and **around the cloud**.</mark> <mark>Make it **fast**, **cheap**, and **easy** to **move users in to**, **out of**, and **around the cloud**.</mark>

View file

@ -1 +0,0 @@
Hello world, this is a default list

View file

@ -7,9 +7,9 @@
<article class="flex article"> <article class="flex article">
<section class="article-header flex"> <section class="article-header flex">
<h1>{{ .Params.title }}</h1> <h1>{{ .Params.title }}</h1>
<p class="sous-titre">{{ .Params.description }}</p> <!--<p class="">{{ .Params.description }}</p>-->
</section> </section>
<section class="article-text"> <section class="article-content">
{{ .Content }} {{ .Content }}
</section> </section>
</article> </article>

View file

@ -1,9 +1,8 @@
{{ define "main" }} {{ define "main" }}
<main class="home flex"> <main class="home flex">
<section class="main-first flex align-center"> <section class="main-first flex align-center">
<!--{{- partial (printf "svg/illus-main.svg") . -}}--> {{- partial (printf "svg/illus-home.svg") . -}}
{{- partial (printf "svg/illus-home2.svg") . -}} <h1>Make identity managing <span class="mark">fast</span>, <span class="mark">simple</span> and <span class="mark">interoperable</span></h1>
<h1>Make identities managing <span class="mark">fast</span>, <span class="mark">simple</span> and <span class="mark">interoperable</span></h1>
<a class="btn lv1" href="#content">Discover SCIM ↓</a> <a class="btn lv1" href="#content">Discover SCIM ↓</a>
<!--<img class="img-background" src="media/global.png"></img>--> <!--<img class="img-background" src="media/global.png"></img>-->
</section> </section>

View file

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.34 56.69">
<polygon class="fill-yellow-color" points="28.34 28.35 0 56.69 0 40.94 12.59 28.35 28.34 28.35"/>
<polygon class="fill-orange-color" points="28.34 28.35 12.59 28.35 0 15.75 0 0 28.34 28.35"/>
</svg>

Before

Width:  |  Height:  |  Size: 279 B

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 50 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 50 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 48 KiB

View file

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.51 43.48">
<path d="M39.06,0H6.44C2.89,0,0,2.89,0,6.44v30.59c0,3.55,2.89,6.44,6.44,6.44H39.06c3.55,0,6.44-2.89,6.44-6.44V6.44c0-3.55-2.89-6.44-6.44-6.44ZM17.34,28.89v-7.09h11.4v7.09h-11.4Zm11.4,3v8.59h-11.4v-8.59h11.4ZM3,21.8H14.34v7.09H3v-7.09ZM28.74,11.19v7.62h-11.4v-7.62h11.4Zm3,0h10.77v7.62h-10.77v-7.62Zm-17.4,0v7.62H3v-7.62H14.34Zm17.4,10.62h10.77v7.09h-10.77v-7.09ZM3,37.04v-5.15H14.34v8.59H6.44c-1.9,0-3.44-1.54-3.44-3.44Zm36.06,3.44h-7.32v-8.59h10.77v5.15c0,1.9-1.54,3.44-3.44,3.44Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 563 B

View file

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.25 43.47">
<path d="M2.83,43.47c-.38,0-.76-.08-1.12-.23-1.04-.45-1.71-1.47-1.71-2.6V7.5C0,3.37,3.37,0,7.5,0H39.75c4.14,0,7.5,3.37,7.5,7.5V26.44c0,4.14-3.37,7.5-7.5,7.5H14.06l-9.28,8.75c-.54,.51-1.23,.77-1.94,.77ZM7.5,3c-2.48,0-4.5,2.02-4.5,4.5V40.25l9.86-9.3h26.88c2.48,0,4.5-2.02,4.5-4.5V7.5c0-2.48-2.02-4.5-4.5-4.5H7.5Z"/>
<path d="M37.26,11.11H11.05c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5h26.21c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
<path d="M37.26,18.03H11.05c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5h26.21c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
<path d="M24.9,24.96H11.05c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5h13.86c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 750 B

View file

@ -1,14 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.81 43.48">
<path d="M29.56,43.48H6.44c-3.55,0-6.44-2.89-6.44-6.44V6.44C0,2.89,2.89,0,6.44,0H29.56c3.55,0,6.44,2.89,6.44,6.44v30.59c0,3.55-2.89,6.44-6.44,6.44ZM6.44,3c-1.9,0-3.44,1.55-3.44,3.44v30.59c0,1.9,1.54,3.44,3.44,3.44H29.56c1.9,0,3.44-1.54,3.44-3.44V6.44c0-1.9-1.54-3.44-3.44-3.44H6.44Z"/>
<rect x="25.49" y="12.07" width="21.73" height="8.71" transform="translate(-.97 30.52) rotate(-45)"/>
<polygon points="28.62 27.97 24.81 27.97 24.81 24.17 28.62 27.97"/>
<path d="M48.91,10.19l-6.16-6.16,2.1-2.1c.53-.53,1.21-.8,2.03-.8s1.5,.27,2.03,.8l2.1,2.1c.53,.53,.8,1.21,.8,2.03s-.27,1.5-.8,2.03l-2.1,2.1Z"/>
<path d="M14.82,26.97c-.13-.12-.25-.2-.36-.26-.12-.06-.25-.09-.4-.09-.17,0-.3,.03-.39,.1-.09,.07-.13,.18-.13,.34,0,.11,.05,.21,.14,.28,.09,.08,.21,.15,.34,.22,.14,.07,.29,.14,.44,.22,.16,.07,.31,.17,.45,.27s.25,.24,.34,.39c.09,.15,.14,.34,.14,.56,0,.34-.09,.62-.27,.86s-.46,.4-.82,.48v.73h-.68v-.7c-.21-.02-.42-.08-.65-.17s-.42-.21-.58-.36l.45-.69c.18,.14,.35,.24,.51,.3,.16,.07,.33,.1,.49,.1,.2,0,.34-.04,.43-.12,.09-.08,.14-.2,.14-.36,0-.12-.05-.22-.14-.31s-.21-.16-.34-.24c-.14-.08-.29-.15-.44-.23-.16-.08-.31-.17-.44-.28-.14-.11-.25-.23-.34-.38-.09-.14-.14-.32-.14-.53,0-.35,.09-.63,.28-.86,.19-.23,.45-.37,.78-.44v-.72h.68v.71c.22,.03,.42,.1,.59,.2,.17,.1,.32,.23,.45,.37l-.52,.59Z"/>
<path d="M18.52,26.97c-.13-.12-.25-.2-.36-.26-.12-.06-.25-.09-.4-.09-.17,0-.3,.03-.39,.1-.09,.07-.13,.18-.13,.34,0,.11,.05,.21,.14,.28,.09,.08,.21,.15,.34,.22,.14,.07,.29,.14,.44,.22,.16,.07,.31,.17,.45,.27s.25,.24,.34,.39c.09,.15,.14,.34,.14,.56,0,.34-.09,.62-.27,.86s-.46,.4-.82,.48v.73h-.68v-.7c-.21-.02-.42-.08-.65-.17s-.42-.21-.58-.36l.45-.69c.18,.14,.35,.24,.51,.3,.16,.07,.33,.1,.49,.1,.2,0,.34-.04,.43-.12,.09-.08,.14-.2,.14-.36,0-.12-.05-.22-.14-.31s-.21-.16-.34-.24c-.14-.08-.29-.15-.44-.23-.16-.08-.31-.17-.44-.28-.14-.11-.25-.23-.34-.38-.09-.14-.14-.32-.14-.53,0-.35,.09-.63,.28-.86,.19-.23,.45-.37,.78-.44v-.72h.68v.71c.22,.03,.42,.1,.59,.2,.17,.1,.32,.23,.45,.37l-.52,.59Z"/>
<path d="M22.22,26.97c-.13-.12-.25-.2-.36-.26-.12-.06-.25-.09-.4-.09-.17,0-.3,.03-.39,.1-.09,.07-.13,.18-.13,.34,0,.11,.05,.21,.14,.28,.09,.08,.21,.15,.34,.22,.14,.07,.29,.14,.44,.22,.16,.07,.31,.17,.45,.27s.25,.24,.34,.39c.09,.15,.14,.34,.14,.56,0,.34-.09,.62-.27,.86s-.46,.4-.82,.48v.73h-.68v-.7c-.21-.02-.42-.08-.65-.17s-.42-.21-.58-.36l.45-.69c.18,.14,.35,.24,.51,.3,.16,.07,.33,.1,.49,.1,.2,0,.34-.04,.43-.12,.09-.08,.14-.2,.14-.36,0-.12-.05-.22-.14-.31s-.21-.16-.34-.24c-.14-.08-.29-.15-.44-.23-.16-.08-.31-.17-.44-.28-.14-.11-.25-.23-.34-.38-.09-.14-.14-.32-.14-.53,0-.35,.09-.63,.28-.86,.19-.23,.45-.37,.78-.44v-.72h.68v.71c.22,.03,.42,.1,.59,.2,.17,.1,.32,.23,.45,.37l-.52,.59Z"/>
<path d="M10.75,34.86h-2.97c-.84,0-1.52-.68-1.52-1.52v-2.97c0-.55,.45-1,1-1s1,.45,1,1v2.49h2.49c.55,0,1,.45,1,1s-.45,1-1,1Z"/>
<path d="M28.21,34.86h-2.97c-.55,0-1-.45-1-1s.45-1,1-1h2.49v-2.49c0-.55,.45-1,1-1s1,.45,1,1v2.97c0,.84-.68,1.52-1.52,1.52Z"/>
<path d="M7.27,27.25c-.55,0-1-.45-1-1v-2.97c0-.84,.68-1.52,1.52-1.52h2.97c.55,0,1,.45,1,1s-.45,1-1,1h-2.49v2.49c0,.55-.45,1-1,1Z"/>
<path d="M27.76,11H8.72c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5H27.76c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
<path d="M25.08,17.93H8.72c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5H25.08c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 3.3 KiB

View file

@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.81 43.48">
<path d="M28.41,11.11H9.38c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5H28.41c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
<path d="M28.41,18.03H9.38c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5H28.41c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
<path d="M25.73,24.96H9.38c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5H25.73c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
<path d="M19.44,31.89H9.38c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5h10.06c.83,0,1.5,.67,1.5,1.5s-.67,1.5-1.5,1.5Z"/>
<path d="M29.56,43.48H6.44c-3.55,0-6.44-2.89-6.44-6.44V6.44C0,2.89,2.89,0,6.44,0H29.56c3.55,0,6.44,2.89,6.44,6.44v30.59c0,3.55-2.89,6.44-6.44,6.44ZM6.44,3c-1.9,0-3.44,1.55-3.44,3.44v30.59c0,1.9,1.54,3.44,3.44,3.44H29.56c1.9,0,3.44-1.54,3.44-3.44V6.44c0-1.9-1.54-3.44-3.44-3.44H6.44Z"/>
<rect x="23.49" y="21.37" width="21.73" height="8.71" transform="translate(-8.13 31.83) rotate(-45)"/>
<polygon points="26.61 37.27 22.81 37.27 22.81 33.47 26.61 37.27"/>
<path d="M46.91,19.49l-6.16-6.16,2.1-2.1c.53-.53,1.21-.8,2.03-.8s1.5,.27,2.03,.8l2.1,2.1c.53,.53,.8,1.21,.8,2.03s-.27,1.5-.8,2.03l-2.1,2.1Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.33 43.72">
<path d="M2.55,34.93c-.34,0-.68-.07-1.01-.21-.94-.4-1.54-1.32-1.54-2.34V6.24C0,2.8,2.8,0,6.24,0H31.68c3.44,0,6.24,2.8,6.24,6.24v14.94c0,3.44-2.8,6.24-6.24,6.24H11.53l-7.23,6.82c-.48,.46-1.11,.7-1.75,.7ZM6.24,3c-1.78,0-3.24,1.45-3.24,3.24V31.34l7.34-6.92H31.68c1.78,0,3.24-1.45,3.24-3.24V6.24c0-1.78-1.45-3.24-3.24-3.24H6.24Z"/>
<path d="M44.6,11.79h-3.7v13.97c0,1.99-1.86,4.88-3.93,4.88H14.42v.82c0,2.62,2.12,4.74,4.74,4.74h20.74l7.66,7.23c.67,.63,1.77,.16,1.77-.76V16.52c0-2.62-2.12-4.74-4.74-4.74Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 586 B

View file

@ -1,10 +0,0 @@
<svg width="43" height="43" viewBox="0 0 43 43" xmlns="http://www.w3.org/2000/svg">
<path d="M24.2958 13.6368L12.0859 25.8467L16.98 30.7407L29.1899 18.5309L24.2958 13.6368Z" />
<path d="M15 31H12V28L15 31Z" />
<path d="M30.7594 17L26 12.2406L27.6225 10.6181C28.032 10.2086 28.5574 10 29.1909 10C29.8245 10 30.3499 10.2086 30.7594 10.6181L32.3819 12.2406C32.7914 12.6501 33 13.1755 33 13.8091C33 14.4426 32.7914 14.968 32.3819 15.3775L30.7594 17Z" />
<circle cx="38.5" cy="4.5" r="4.5" />
<circle cx="4.5" cy="4.5" r="4.5" />
<circle cx="38.5" cy="38.5" r="4.5" />
<circle cx="4.5" cy="38.5" r="4.5" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M37 6H6V37H37V6ZM4 4V39H39V4H4Z" />
</svg>

Before

Width:  |  Height:  |  Size: 694 B

View file

@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.49 43.48">
<path d="M13.37,33.31c-3.63,0-6.78-1.12-9.37-3.34C1.35,27.69,0,24.85,0,21.53,0,18.71,.98,16.16,2.91,13.96c1.73-1.97,3.95-3.3,6.62-3.98,1.07-2.85,2.99-5.21,5.71-7.03,2.94-1.96,6.3-2.95,10.01-2.95,4.56,0,8.5,1.42,11.7,4.23,2.91,2.56,4.54,5.65,4.85,9.23,2.26,.45,4.21,1.48,5.79,3.05,1.92,1.91,2.9,4.19,2.9,6.77,0,2.81-1.12,5.22-3.34,7.17-2.16,1.9-4.81,2.86-7.86,2.86H13.37ZM25.25,3c-3.1,0-5.91,.82-8.34,2.45-2.42,1.62-3.99,3.66-4.8,6.25l-.26,.86-.88,.17c-2.42,.48-4.32,1.53-5.8,3.21-1.46,1.66-2.16,3.49-2.16,5.59,0,2.44,.97,4.45,2.96,6.15,2.06,1.76,4.49,2.62,7.42,2.62h25.91c2.34,0,4.26-.69,5.88-2.11,1.56-1.37,2.32-2.98,2.32-4.91,0-1.78-.66-3.3-2.01-4.64-1.4-1.39-3.12-2.17-5.28-2.39l-1.35-.14v-1.36c0-3.27-1.27-5.98-3.89-8.27-2.67-2.35-5.86-3.49-9.72-3.49Z"/>
<path d="M25.65,25.75l-6.13-6.13-6.13,6.13c-.59,.59-.59,1.54,0,2.12s1.54,.59,2.12,0l2.51-2.51v16.62c0,.83,.67,1.5,1.5,1.5s1.5-.67,1.5-1.5V25.36l2.51,2.51c.29,.29,.68,.44,1.06,.44s.77-.15,1.06-.44c.59-.59,.59-1.54,0-2.12Z"/>
<path d="M37.69,35.19c-.59-.59-1.54-.59-2.12,0l-2.51,2.51V21.08c0-.83-.67-1.5-1.5-1.5s-1.5,.67-1.5,1.5v16.62l-2.51-2.51c-.59-.59-1.54-.59-2.12,0-.59,.59-.59,1.54,0,2.12l6.13,6.13,6.13-6.13c.59-.59,.59-1.54,0-2.12Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46.26 43.77">
<path d="M20.33,28.48c-.66,0-1.3-.28-1.74-.78l-6.1-6.87c-1.34-1.51-1.67-3.61-.85-5.48,.79-1.8,2.48-2.94,4.42-2.98h.12c1.63,0,3.12,.69,4.16,1.82,1.04-1.13,2.54-1.82,4.16-1.82h.12c1.94,.04,3.63,1.18,4.42,2.98,.82,1.87,.49,3.97-.85,5.48l-6.1,6.87c-.44,.5-1.07,.78-1.74,.78Zm-4.16-13.11c-1.16,.02-1.63,.84-1.78,1.19-.27,.61-.32,1.54,.35,2.29l5.6,6.3,5.6-6.3c.67-.75,.62-1.67,.35-2.29-.15-.35-.63-1.16-1.73-1.19l.03-1.5-.08,1.5c-1.22,0-2.28,.83-2.58,2.01-.19,.73-.84,1.23-1.58,1.23s-1.39-.5-1.58-1.22c-.3-1.19-1.36-2.02-2.59-2.02Z"/>
<path d="M39.01,0c-2.29,0-4.33,1.07-5.66,2.73H3.86C1.73,2.73,0,4.46,0,6.59V31.99c0,2.13,1.73,3.86,3.86,3.86h4.58v6.11l.03,1.01,1.81,.8,9.09-7.91h17.43c2.13,0,3.86-1.73,3.86-3.86V14.31c3.21-.75,5.61-3.62,5.61-7.06,0-4.01-3.25-7.25-7.25-7.25Zm-1.35,31.99c0,.48-.39,.86-.86,.86H18.23s-6.79,5.92-6.79,5.92v-4.37l-.05-1.55H3.86c-.48,0-.86-.39-.86-.86V6.59c0-.48,.39-.86,.86-.86H31.91c-.11,.49-.16,1-.16,1.53,0,3.54,2.54,6.49,5.9,7.12V31.99Zm1.35-23.25c-.82,0-1.49-.67-1.49-1.49s.67-1.49,1.49-1.49,1.49,.67,1.49,1.49-.67,1.49-1.49,1.49Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.56 43.56">
<path d="M43.56,21.78C43.56,9.77,33.79,0,21.78,0S0,9.77,0,21.78s9.77,21.78,21.78,21.78h0c12.01,0,21.78-9.77,21.78-21.78Zm-3.08-1.5h-7.42c-.46-6.21-2.97-12.13-7.08-16.79,7.86,1.81,13.84,8.55,14.5,16.79Zm-20.2,0h-6.78c.47-5.7,2.88-11.12,6.78-15.31v15.31Zm0,3v15.6c-4.16-3.95-6.62-9.48-6.85-15.6h6.85Zm3,15.6v-15.6h6.85c-.23,6.12-2.69,11.65-6.85,15.6Zm0-18.6V4.97c3.9,4.18,6.31,9.61,6.78,15.31h-6.78ZM17.57,3.49c-4.1,4.65-6.62,10.58-7.08,16.79H3.08C3.73,12.04,9.71,5.3,17.57,3.49ZM3.08,23.28h7.36s0,.05,0,.08c.23,6.38,2.62,12.2,6.69,16.6-7.64-1.96-13.4-8.59-14.05-16.67Zm23.36,16.67c4.07-4.39,6.46-10.21,6.69-16.6,0-.03,0-.05,0-.08h7.36c-.64,8.08-6.41,14.71-14.05,16.67Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 749 B

View file

@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.24 43.48">
<path d="M27.66,25.22c-5.19,0-9.41-4.22-9.41-9.41s4.22-9.41,9.41-9.41,9.41,4.22,9.41,9.41-4.22,9.41-9.41,9.41Zm0-15.82c-3.53,0-6.41,2.88-6.41,6.41s2.88,6.41,6.41,6.41,6.41-2.88,6.41-6.41-2.88-6.41-6.41-6.41Z"/>
<circle cx="12.92" cy="10.45" r="2.42"/>
<path d="M53.24,15.81c0-8.72-7.09-15.81-15.81-15.81H15.81C7.09,0,0,7.09,0,15.81s7.09,15.81,15.81,15.81h4.64l-4.34,8.85h-4.75c-.83,0-1.5,.67-1.5,1.5s.67,1.5,1.5,1.5h5.68s0,0,0,0c0,0,0,0,0,0h21.45s0,0,0,0c0,0,0,0,0,0h5.45c.83,0,1.5-.67,1.5-1.5s-.67-1.5-1.5-1.5h-4.52l-4.34-8.85h2.33c8.72,0,15.81-7.09,15.81-15.81ZM3,15.81C3,8.75,8.75,3,15.81,3h21.61c7.07,0,12.81,5.75,12.81,12.81s-5.75,12.81-12.81,12.81h-4.47c-.19-.04-.38-.04-.57,0h-9.23c-.19-.04-.39-.04-.58,0h-6.77c-7.07,0-12.81-5.75-12.81-12.81Zm33.09,24.67H19.45l4.34-8.85h7.96l4.34,8.85Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 885 B

View file

@ -1,6 +1,6 @@
<div class="card flex"> <div class="card flex">
{{ if .Get "icone" }} {{ if .Get "icon" }}
{{ partial (printf "svg/%s.svg" (.Get "icone")) . }} {{ partial (printf "svg/%s.svg" (.Get "icon")) . }}
{{ end }} {{ end }}
{{ .Inner | markdownify }} {{ .Inner | markdownify }}
</div> </div>

View file

@ -1,4 +1,5 @@
<div class="card flex implementation" data-type="{{ .Get "type" }}"> <div class="space-between card flex implementation {{ if .Get "type"}}{{ .Get "type" }}{{ end }}" data-type="{{ if .Get "type"}}{{ .Get "type" }}{{ end }}">
<div class="flex">
{{ .Inner | markdownify }} {{ .Inner | markdownify }}
{{ if .Get "type" }} {{ if .Get "type" }}
@ -14,7 +15,10 @@
{{ if .Get "devs" }} {{ if .Get "devs" }}
<p class="devs">Devs: {{ .Get "devs" }}</p> <p class="devs">Devs: {{ .Get "devs" }}</p>
{{ end }} {{ end }}
</div>
<div class="flex">
{{ if .Get "link" }} {{ if .Get "link" }}
<a class="btn lv1" target="_blank" href="{{ .Get "link" }}">specs ↗</a> <a class="btn lv1" target="_blank" href="{{ .Get "link" }}">specs ↗</a>
{{ end }} {{ end }}
</div>
</div> </div>

View file

@ -2,7 +2,7 @@
/* GENERAL */ /* GENERAL */
/****************************/ /****************************/
/* Global */ /* GLOBAL */
:root { :root {
width: 100%; width: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
@ -10,7 +10,6 @@
--black:#102a2d; --black:#102a2d;
--black-dark:#102a2d; --black-dark:#102a2d;
--white:#FFFDEA; --white:#FFFDEA;
/* --yellow:#FFF78C; */
--yellow:#FFF468; --yellow:#FFF468;
--yellow-dark:#FCBC3F; --yellow-dark:#FCBC3F;
--green:#D5E052; --green:#D5E052;
@ -49,7 +48,6 @@ body{
} }
/* TYPO */ /* TYPO */
@font-face { @font-face {
font-family: 'Source Code Pro'; font-family: 'Source Code Pro';
src: url("../fonts/SourceCodePro-Light.ttf") format('truetype'); src: url("../fonts/SourceCodePro-Light.ttf") format('truetype');
@ -128,51 +126,7 @@ body{
font-style: italic; font-style: italic;
} }
/* block */ /* TEXT */
.flex{
display: flex;
flex-direction: column;
align-items: start;
}
.flex-row{
display: flex;
flex-direction: row;
align-items: start;
flex-wrap: wrap;
}
.align-center{
align-items: center;
}
.space-between{
justify-content: space-between;
}
img, .w-100{
width: 100%;
}
figcaption{
font-family: 'Courier New', Courier, monospace;
font-size: 1em;
line-height: 1.5em;
}
.float-right{
float: right;
margin-left: 2em;
width: 40%;
}
.float-left{
float: left;
margin-right: 2em;
width: 40%;
}
/* Texte */
h1{ h1{
font-size: 2.5em; font-size: 2.5em;
font-weight: 1000; font-weight: 1000;
@ -238,6 +192,7 @@ mark strong{
color: var(--marked-color); color: var(--marked-color);
text-shadow: none; text-shadow: none;
} }
span.mark{ span.mark{
font-weight: 300; font-weight: 300;
background-color: var(--marked-color); background-color: var(--marked-color);
@ -258,11 +213,14 @@ li{
max-width: 32em; max-width: 32em;
} }
.underline{ figcaption{
text-decoration: underline; font-family: 'Courier New', Courier, monospace;
font-size: 1em;
line-height: 1.5em;
} }
/* lien */
/* LINK */
a{color: inherit;cursor:default;} a{color: inherit;cursor:default;}
a:not(.btn):not(.active):hover{ a:not(.btn):not(.active):hover{
@ -271,7 +229,7 @@ a:not(.btn):not(.active):hover{
text-decoration: underline!important; text-decoration: underline!important;
} }
/* Svg */ /* SVG */
svg{ svg{
height: auto; height: auto;
} }
@ -283,61 +241,22 @@ svg{
.fill-marked-color{ .fill-marked-color{
fill: var(--marked-color); fill: var(--marked-color);
} }
/* Arrow */
.blue-1{
--marked-color:var(--blue-1);
--marked-color-dark:var(--blue-1-dark);
}
.blue-2{
--marked-color:var(--blue-2);
--marked-color-dark:var(--blue-2-dark);
}
.white{
--marked-color:var(--white);
--marked-color-dark:var(--blue-1);
}
.green{
--marked-color:var(--green);
--marked-color-dark:var(--green-dark);
}
.yellow{
--marked-color:var(--yellow);
--marked-color-dark:var(--yellow-dark);
}
/*[class*="bck-"]{
color: var(--black);
}*/
.bck-marked{
background-color: var(--marked-color);
color: var(--black);
}
.arrow svg{ .arrow svg{
width: 1.2em; width: 1.2em;
height: auto; height: auto;
} }
.arrow-left svg{
/* Arrow */
.arrow-left{
transform: rotate(180deg); transform: rotate(180deg);
} }
.arrow-up svg{ .arrow-up svg{
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.arrow-down{ .arrow-down svg{
transform: rotate(90deg); transform: rotate(90deg);
} }
/* Button */ /* BUTTON */
.btn, button{ .btn, button{
text-decoration: inherit; text-decoration: inherit;
font-weight: bolder; font-weight: bolder;
@ -348,7 +267,7 @@ svg{
} }
.btn:not(.active):hover{ .btn:not(.active):hover{
transform:translateY(-2px) scale(1.01); transform:translateY(-2px) scale(1.01);
transition: 0.5s; transition: 0.35s;
cursor: pointer; cursor: pointer;
} }
@ -380,11 +299,87 @@ svg{
border: 2px solid var(--marked-color); border: 2px solid var(--marked-color);
box-shadow: none; box-shadow: none;
} }
/****************************/
/* BODY */
/****************************/
/* HEADER */ /* TO USE CLASSES */
.flex{
display: flex;
flex-direction: column;
align-items: start;
}
.flex-row{
display: flex;
flex-direction: row;
align-items: start;
flex-wrap: wrap;
}
.align-center{
align-items: center;
}
.space-between{
justify-content: space-between;
}
.baseline{
align-items: baseline;
}
img, .w-100{
width: 100%;
}
.float-right{
float: right;
margin-left: 2em;
width: 40%;
}
.float-left{
float: left;
margin-right: 2em;
width: 40%;
}
.underline{
text-decoration: underline;
}
.blue-1{
--marked-color:var(--blue-1);
--marked-color-dark:var(--blue-1-dark);
}
.blue-2{
--marked-color:var(--blue-2);
--marked-color-dark:var(--blue-2-dark);
}
.white{
--marked-color:var(--white);
--marked-color-dark:var(--yellow-dark);
}
.green{
--marked-color:var(--green);
--marked-color-dark:var(--green-dark);
}
.yellow{
--marked-color:var(--yellow);
--marked-color-dark:var(--yellow-dark);
}
.bck-marked{
background-color: var(--marked-color);
color: var(--black);
}
/****************************/
/* HEADER */
/****************************/
header{ header{
width: 100%; width: 100%;
top: 0; top: 0;
@ -418,6 +413,8 @@ header>div{
width: auto; width: auto;
} }
/* MENU */
#menu ul { #menu ul {
width: 100%; width: 100%;
list-style-type: none; list-style-type: none;
@ -451,8 +448,48 @@ header .btn.lv2{
} }
/****************************/
/* FOOTER */
/****************************/
footer{
border-top: 0.2px dashed var(--text-color);
width: 80%;
margin-right:auto;
margin-left:auto;
padding-top: 2em;
font-size: 0.8em;
padding-bottom: 2em;
}
/* MAIN */ footer img{
height: 1.5rem;
width: auto;
margin-right: 1rem;
margin-bottom: .5rem;
}
footer ul{
margin: 0;
padding: 0;
}
footer h4{
margin-top: 0;
margin-bottom: 1rem;
}
.up-page{
position: fixed;
bottom: 2em;
right: 2em;
padding: 0.5em;
width: 2rem;
height: 2rem;
}
/****************************/
/* BODY */
/****************************/
main{ main{
margin: auto; margin: auto;
margin-top: 3.4em; margin-top: 3.4em;
@ -474,7 +511,6 @@ main{
margin-top: 2em; margin-top: 2em;
} }
/* SVG ANIM */ /* SVG ANIM */
g.app{ g.app{
transition: transform 0.3s ease, fill 0.3s ease, stroke 0.3s ease; transition: transform 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
@ -506,54 +542,12 @@ g.server.svg-active rect:first-of-type {
fill: var(--marked-color); fill: var(--marked-color);
} }
g.word{ g.word{
border: solid 1px var(--paper-color); border: solid 1px var(--paper-color);
} }
/* FOOTER */
footer{
border-top: 0.2px dashed var(--text-color);
width: 80%;
margin-right:auto;
margin-left:auto;
padding-top: 2em;
font-size: 0.8em;
padding-bottom: 2em;
}
footer img{ /* CONTENT */
height: 1.5rem;
width: auto;
margin-right: 1rem;
margin-bottom: .5rem;
}
footer ul{
margin: 0;
padding: 0;
}
footer h4{
margin-top: 0;
margin-bottom: 1rem;
}
.baseline{
align-items: baseline;
}
.up-page{
position: fixed;
bottom: 2em;
right: 2em;
padding: 0.5em;
width: 2rem;
height: 2rem;
}
/* Section */
.section-home { .section-home {
padding-bottom: 3rem; padding-bottom: 3rem;
} }
@ -590,6 +584,7 @@ footer h4{
margin-bottom: 4em; margin-bottom: 4em;
} }
/* cards default */
.card{ .card{
border: .1px var(--text-color) solid; border: .1px var(--text-color) solid;
border-radius: 2px; border-radius: 2px;
@ -602,6 +597,25 @@ footer h4{
.card h4{margin-top: 1.5em;} .card h4{margin-top: 1.5em;}
.card p{margin-bottom: .5em;} .card p{margin-bottom: .5em;}
/* cards implementation */
.implementation p{
margin-top: .3em;
margin-bottom: .3em;
}
.implementation h4{
margin-top: 1em;
}
.implementation .lv1{
padding: .1em .3em;
margin-top: .5em;
margin-bottom: 1em;
top: 1em;
}
/* ACTIVABLE TRIGGERS */
/* Switch-boxes */
#switch-box-trigger{ #switch-box-trigger{
margin-bottom: .5em; margin-bottom: .5em;
} }
@ -622,7 +636,30 @@ footer h4{
background-color: var(--paper-color); background-color: var(--paper-color);
} }
/* Implementation type */
.type{
font-weight: 1000;
font-size: .75em;
}
.server{
color: var(--blue-2);
--marked-color: var(--blue-2);
--marked-color-dark:var(--blue-2-dark);
}
.client{
color: var(--yellow);
--marked-color: var(--yellow);
--marked-color-dark:var(--yellow-dark);
}
.server.client{
color: var(--blue-1);
--marked-color: var(--blue-1);
--marked-color-dark:var(--blue-1-dark);
}
/* TABLE */
table{ table{
table-layout: auto; table-layout: auto;
width: 100%; width: 100%;
@ -671,37 +708,6 @@ table svg:nth-child(2){
} }
.implementation p{
margin-top: .3em;
margin-bottom: .3em;
}
.implementation h4{
margin-top: 1em;
}
.implementation .lv1{
padding: .1em .3em;
margin-top: .5em;
margin-bottom: 1em;
}
.type{
font-weight: 1000;
font-size: .75em;
}
.server{
color: var(--blue-2);
--marked-color: var(--blue-2)
}
.client{
color: var(--yellow);
--marked-color: var(--yellow)
}
/*********************/ /*********************/
/* MOBILE */ /* MOBILE */
/*********************/ /*********************/

View file

@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', function () {
} }
}); });
// Activate button // Select implementation type
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const triggerButtons = document.querySelectorAll('button.activable.implementationtype'); const triggerButtons = document.querySelectorAll('button.activable.implementationtype');
const implementationCards = document.querySelectorAll('.implementation'); const implementationCards = document.querySelectorAll('.implementation');
@ -152,7 +152,6 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
// Scroll menu // Scroll menu
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
let lastScrollTopForMenu = 0; let lastScrollTopForMenu = 0;

View file

@ -4,5 +4,4 @@ description = "Hugo theme"
tags = ["hugo", "hugo-theme", "markdown"] tags = ["hugo", "hugo-theme", "markdown"]
[author] [author]
Name = "Timothé Jeanne" Name = "Timothé Jeanne"
Website = "timothejeanne.net"