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,10 +1,10 @@
--- ---
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).
@ -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

View file

@ -19,18 +19,18 @@ Its intent is to **reduce the cost and complexity** of user management operation
{{< 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 >}}

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"