site: add scheme and fix content (#221)

* Added scheme on main page and fix content * Fix mobile menu * Fix offset for last-child in nav * Fix stroke for svg in problems block
werf · Apr 29, 2022 · c8a5deb · c8a5deb
1 parent 443a9d8
commit c8a5deb
Show file tree

Hide file tree

Showing 13 changed files with 255 additions and 129 deletions.
diff --git a/docs/_includes/head.html b/docs/_includes/head.html
@@ -136,7 +136,6 @@
 
   });
 </script>
-<script src="{{ '/js/menu-burger.js' }}"></script>
 
 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

diff --git a/docs/_includes/index_en/architecture.html b/docs/_includes/index_en/architecture.html
@@ -1,51 +1,61 @@
 <section class="architecture__section">
   <div class="container container--wide">
     <div class="architecture__wrap">
-      <div class="architecture__title block__title block__title--invert">Architecture</div>
+      <div class="architecture__title block__title block__title--invert">Components and their functions</div>
       <div class="architecture__cols">
         <div class="architecture__cols--item col__server">
-          <div class="col__title block__subtitle block__subtitle--invert">trdl-<span>server</span></div>
+          <div class="col__title block__subtitle block__subtitle--invert">The trdl <span>server</span></div>
           <div class="col__text">implements the TUF repository and securely populates it.</div>
-          <!-- <div class="col__subtitle">Functions</div> -->
           <ul class="col__list">
             <li class="col__item">
               <svg class="server__icon checked">
-                <use xlink:href="images/icons/sprite.svg#checked"></use>
+                <use xlink:href="images/icons/sprite.svg#gears"></use>
               </svg>
-              <p>Builds and publishes software releases.</p>
+              <p>Releases new software versions.</p>
             </li>
             <li class="col__item">
               <svg class="server__icon gears">
                 <use xlink:href="images/icons/sprite.svg#gears"></use>
               </svg>
-              <p>Monitors for consistency between release channels and releases (<a href="https://github.com/werf/werf/blob/multiwerf/trdl_channels.yaml">example</a>).</p>
+              <p>Publishes the release channels.</p>
+            </li>
+            <li class="col__item">
+              <svg class="server__icon shield-2">
+                <use xlink:href="images/icons/sprite.svg#shield-2"></use>
+              </svg>
+              <p>Verifies all operations via a quorum of GPG signatures.</p>
             </li>
             <li class="col__item">
               <svg class="server__icon shield-2">
                 <use xlink:href="images/icons/sprite.svg#shield-2"></use>
               </svg>
-              <p>Ensures repo security.</p>
+              <p>Ensures a continuous rotation of TUF repository encryption keys and metadata.</p>
             </li>
           </ul>
         </div>
         <!-- col -->
 
         <div class="architecture__cols--item col__client">
-          <div class="col__title block__subtitle block__subtitle--invert">trdl-<span>client</span></div>
-          <div class="col__text">delivers updates in a trusted and continuous fashion via channels with different stability levels.</div>
-          <!-- <div class="col__subtitle">Functions</div> -->
+          <div class="col__title block__subtitle block__subtitle--invert">The trdl <span>client</span></div>
+          <div class="col__text">ensures reliable updates delivery and the use of software securely.</div>
           <ul class="col__list">
             <li class="col__item">
               <svg class="server__icon branching">
                 <use xlink:href="images/icons/sprite.svg#branching"></use>
               </svg>
-              <p>Processes application files within the release channels.</p>
+              <p>Updates software versions through selected channels.</p>
             </li>
             <li class="col__item">
               <svg class="server__icon parachute">
                 <use xlink:href="images/icons/sprite.svg#parachute"></use>
               </svg>
-              <p>Processes files in the TUF repository in a reliable fashion.</p>
+              <p>Verifies updates pulled from a trusted TUF repository.</p>
+            </li>
+            <li class="col__item">
+              <svg class="server__icon parachute">
+                <use xlink:href="images/icons/sprite.svg#gears"></use>
+              </svg>
+              <p>Provides various options for using and updating the software.</p>
             </li>
           </ul>
         </div>

diff --git a/docs/_includes/index_en/benefits.html b/docs/_includes/index_en/benefits.html
@@ -17,16 +17,16 @@
               <use xlink:href="images/icons/sprite.svg#gear"></use>
             </svg>
             <div class="card__title block__subtitle">Release channels instead of software versions</div>
-            <p>The user doesn’t have to download specific package versions. Instead, (s)he simply chooses a release channel with the desired compatibility and stability levels: alpha, beta, early access, stable, or rock solid. Via these channels, developers distribute the appropriate release versions. The update frequency is not limited in any way.</p>
+            <p>The user doesn’t have to download specific package versions. Instead, all (s)he has to do is choose a release channel with the desired compatibility (any SemVer combination) and stability levels (alpha, beta, early access, stable, or rock solid). Via these channels, developers distribute the appropriate release versions. There is no limit to the frequency of the updates.</p>
           </li>
           <!-- item -->
 
           <li class="benefits__grid--item card card--people">
             <svg class="card__pic">
               <use xlink:href="images/icons/sprite.svg#people"></use>
             </svg>
-            <div class="card__title block__subtitle">Publishing releases based in the GPG quorum</div>
-            <p>trdl implements the so-called “M of N” mechanism: each Git commit is signed by multiple developers. trdl supports regular Git signatures, or the <a href="https://github.com/hashbang/git-signatures">notes mechanism</a>, to attach any number of GPG signatures to a given commit. In addition, the quorum is used for both tagging (version distribution) and signing trdl.yaml (publishing versions to the release channel).</p>
+            <div class="card__title block__subtitle">All operations are confirmed by a GPG quorum</div>
+            <p>trdl implements the so-called "M of N" verification mechanism: every commit in Git related to releasing or publishing channels must be signed using a set minimum number of trusted GPG keys.</p>
           </li>
           <!-- item -->
 
@@ -35,12 +35,11 @@
               <use xlink:href="images/icons/sprite.svg#shield"></use>
             </svg>
             <div class="card__title block__subtitle">Truly secure delivery</div>
-            <p class="">The trdl security system is based on the TUF repository for storing releases and the Vault plugin (vault-plugin-secrets-trdl) which verifies their authenticity and integrity using a private key.</p>
+            <p>The trdl security system is based on three components: the TUF repository, the Vault plugin, and Git.</p>
             <ul class="card__list">
-              <li class="card__item">The Update Framework (TUF) has many advantages, such as calculating checksums on packages and signing them, rotating keys, and protecting against rollback/indefinite freeze attacks.</li>
-              <li class="card__item">Vault can be configured so that no one has access to the private key (even the administrator).</li>
-              <li class="card__item">Vault independently manages and configures the TUF repository: adds new packages, sets the update rate, and rotates keys.</li>
-              <!-- <li class="card__item card__item--no-bul"><a href="#" class="card__item--link">Learn more about the trdl security system here.</a></li> -->
+              <li class="card__item">The TUF repository protects against unauthorized software access, key compromise and loss. It is responsible for the relevance, consistency, and integrity of the data.</li>
+              <li class="card__item">Vault is a secure platform for running a trdl server that enables secure management of encryption keys.</li>
+              <li class="card__item">Git stores commit code, configurations, and GPG signatures to verify operations.</li>
             </ul>
           </li>
           <!-- item -->
@@ -52,8 +51,6 @@
             <div class="card__title block__subtitle">Support for various platforms</div>
             <ul class="card__list">
               <li class="card__item">MacOS, Windows, Ubuntu, Red Hat, and even Gentoo.</li>
-              <li class="card__item">x86, x86-84, and ARM.</li>
-              <li class="card__item">Delivery to the server or to the developer's laptop.</li>
               <li class="card__item">All popular command shells are supported.</li>
             </ul>
           </li>

diff --git a/docs/_includes/index_en/intro.html b/docs/_includes/index_en/intro.html
@@ -1,48 +1,28 @@
 <section class="intro__section">
   <div class="container">
     <div class="intro__wrap">
-      <div class="intro__title block__title">Secure package manager for continuous delivery of binary files and scripts to servers and workstations</div>
-      <div class="intro__subtitle block__subtitle">Simple, reliable, and fast</div>
-      <div class="intro__desc block__description">
-        <p>
-          <b>trdl</b> is an Open Source tool for implementing automatic updates. It is a universal package manager delivering new versions of
-          <span class="footnote footnote--dark" title='In this case, "application" refers to any form of programming code, e.g.,
-          a binary file, a shell script, and even an Ansible playbook.'>your application</span> from a trusted
-          <span class="footnote footnote--dark" title="TUF (The Update Framework) is a framework for securing software update systems.
-          TUF repository is any repository with your software (e.g., S3) that uses TUF security tools.
-          <a href='https://theupdateframework.io/'>Learn more about TUF</a>.">repository</span>.
-        </p>
+      <div class="intro__content">
+        <div class="intro__title block__title">Secure and continuous delivery</div>
+        <div class="intro__subtitle block__subtitle">Simple, reliable, and fast</div>
+        <div class="intro__desc block__description">
+          <p>
+            <b>trdl</b> is an Open Source solution providing a secure channel for delivering updates from the Git repository to the end user.
+          </p>
+          <p>
+            The project team releases new versions of the software and switches them in the release channels. Git acts as the single source of truth while <span class="footnote footnote--dark" title="HashiCorp's Vault is a secret management tool. In trdl, we use a custom Vault plugin tailored for secure package delivery. <a href='https://www.hashicorp.com/products/vault' target='_blank'>Learn more about Vault</a>.">Vault</span> is used as a tool to verify operations as well as populate and maintain the <span class="footnote footnote--dark" title='TUF (The Update Framework) is a framework for securing software update systems. A TUF repository is any repository containing your software (e.g., S3) that uses TUF security tools. <a href="https://theupdateframework.io/" target="_blank">Learn more about TUF</a>.'>TUF repository</span>.
+          </p>
+          <p>
+            The user selects a release channel, continuously receives the latest <span class="footnote footnote--dark" title='In this case, "software" refers to any form of programming code, e.g., a binary file, a shell script, or even an Ansible playbook.'>software</span> version from the TUF repository, and uses it.
+          </p>
+        </div>
+        <div class="intro__buttons">
+          <a href="https://github.com/werf/trdl" target="_blank" class="intro__link">
+            <button class="intro__button--gh button">GitHub</button>
+          </a>
+        </div>
       </div>
-      <div class="intro__buttons">
-        <a href="https://github.com/werf/trdl" target="_blank" class="intro__link">
-          <button class="intro__button--gh button">GitHub</button>
-        </a>
-        <!-- <a href="#" class="intro__link">
-          <button class="intro__button--doc button button--white">Документация</button>
-        </a> -->
-      </div>
-      <div class="intro__lines">
-        <svg width="594" height="742" viewBox="0 0 594 742" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M209.104 596.619L241.145 625.51" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M99.0938 497.378L157.988 550.531" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M198.891 503.809L420.798 703.85" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M85.8018 401.791L130.756 442.374" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M358.391 563.977L553.607 740" stroke="#A41FE2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M63.8115 298.36L271.941 486.075" stroke="#A41FE2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M226.987 361.938L571.601 672.621" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M84.5063 233.466L157.449 299.237" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M511.516 534.843L594.346 609.53" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M2 75.42L424.419 456.308" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M340.776 297.336L753.469 669.406" stroke="#A41FE2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M158.529 132.958L254.381 219.434" stroke="#A41FE2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M420.905 285.936L687.442 526.268" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M148.751 40.537L345.75 218.168" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M269.131 65.4813L539.613 309.37" stroke="#A41FE2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M505.897 195.318L693.981 364.959" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M291.446 2L432.144 128.816" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M403.993 19.88L589.483 187.085" stroke="#A41FE2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M556.093 73.4225L587.107 101.339" stroke="#333037" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
+      <div class="intro__scheme">
+        <img src="../../images/intro-scheme_en.svg" alt="">
       </div>
     </div>
   </div>

diff --git a/docs/_includes/index_en/slider-release.html b/docs/_includes/index_en/slider-release.html
@@ -4,7 +4,7 @@
     <div class="slider__nav"></div>
     <div class="slider__wrap">
       <div class="slider__item">
-        <p class="slide__text">The developer makes a commit and signs it with a GPG signature.</p>
+        <p class="slide__text">The developer creates a Git tag with the new software version (v1.0.1) and signs it with their GPG signature.</p>
         <img src="/images/slider/release/1.svg" alt="">
       </div>
       <div class="slider__item">
@@ -24,7 +24,7 @@
         <img src="/images/slider/release/5.svg" alt="">
       </div>
       <div class="slider__item">
-        <p class="slide__text">The resulting build (along with the metadata) gets pushed to the TUF repository.</p>
+        <p class="slide__text">The resulting build (along with the metadata) gets pushed to the TUF repository. However, the client continues to run the old software version (v1.0.0) until the new version is published in the selected release channel.</p>
         <img src="/images/slider/release/6.svg" alt="">
       </div>
     </div>

diff --git a/docs/_includes/index_en/slider.html b/docs/_includes/index_en/slider.html
@@ -16,7 +16,7 @@
         <img src="/images/slider/publish/3.svg" alt="">
       </div>
       <div class="slider__item">
-        <p class="slide__text">Vault checks to see if the commit contains the minimum set of allowed GPG signatures. If all the necessary signatures are there, Vault forwards the release channels to the TUF repository.</p>
+        <p class="slide__text">Vault checks to see if the commit contains the minimum set of allowed GPG signatures.</p>
         <img src="/images/slider/publish/4.svg" alt="">
       </div>
       <div class="slider__item">
@@ -28,7 +28,7 @@
         <img src="/images/slider/publish/6.svg" alt="">
       </div>
       <div class="slider__item">
-        <p class="slide__text">The trdl client pulls the update through the selected release channel. The previous artifact version becomes unavailable to the user.The trdl client pulls the update through the selected release channel. The previous artifact version becomes unavailable to the user.</p>
+        <p class="slide__text">The channel gets published. The new software version then becomes available to the client that is configured to use this release channel.</p>
         <img src="/images/slider/publish/7.svg" alt="">
       </div>
     </div>

diff --git a/docs/_includes/index_en/whats-problems.html b/docs/_includes/index_en/whats-problems.html
@@ -1,7 +1,7 @@
 <section class="whats-problems__section">
   <div class="container">
     <div class="whats-problems__wrap">
-      <div class="whats-problems__title block__title">What problems trdl fixes for you</div>
+      <div class="whats-problems__title block__title">Problems that trdl solves for you</div>
       <div class="whats-problems__grid benefits__grid">
         <ul class="whats-problems__grid--list benefits__grid--list">
           <li class="benefits__grid--item card card--delivery">
@@ -18,12 +18,11 @@
               <use xlink:href="images/icons/sprite.svg#warning"></use>
             </svg>
             <div class="card__title block__subtitle">Challenges related to implementing a secure delivery</div>
-            <p>You may encounter the following challenges in trying to deliver software securely:</p>
+            <p>What complicates things:</p>
             <ul class="card__list">
-              <li class="card__item">A single GPG signature is not enough. (What if the developer's laptop has been hacked?) You will need a quorum-based system for accepting the code and signing the built binary files.</li>
-              <li class="card__item">The acceptance system should not depend on human errors, such as the bus factor, regulation violations, misclicks, etc.</li>
-              <li class="card__item">At the same time, even the most complex system can fail.</li>
-              <p><span>Example</span>:  The release must be approved by three developers: a product owner, a security officer, and some other person. However, the acceptance system's administrator has privileges to sign the release for all of them.</p>
+              <li class="card__item">Software release and changes in release channels must only occur based on a collective decision of the team (quorum).</li>
+              <li class="card__item">The system must protect against unauthorized access and data compromise.</li>
+              <li class="card__item">The system must not be compromised by human mistakes, including regulation breaches.</li>
             </ul>
           </li>
           <!-- item -->