refactor(site): presentation content improvements & minification

exadel-inc · Jul 1, 2024 · fe05591 · fe05591
1 parent 32d0dca
commit fe05591
Show file tree

Hide file tree

Showing 19 changed files with 108 additions and 124 deletions.
diff --git a/site/src/collection-grid/collection-grid.less b/site/src/collection-grid/collection-grid.less
@@ -43,6 +43,9 @@
     padding: 5px 15px;
     transition: color 0.25s ease-in-out;
   }
+  &-compact &-title {
+    min-height: 50px;
+  }
 
   &-item.draft &-box {
     opacity: 0.3;
@@ -71,6 +74,12 @@
       max-height: 160px;
     }
   }
+  &-compact &-svg {
+    min-height: 180px;
+    svg {
+      max-height: 140px;
+    }
+  }
 
   &-alt {
     text-align: center;
@@ -92,7 +101,10 @@
   }
 
   &-column {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(2, 1fr);
+  }
+  &-column&-compact {
+    grid-template-columns: repeat(4, 1fr);
   }
 
   &-column &-item {

diff --git a/site/src/presentation/slide.less b/site/src/presentation/slide.less
@@ -11,6 +11,7 @@
 
   .presentation-content {
     padding-block: 2rem;
+    max-width: 1400px;
     max-height: 100%;
   }
 
@@ -28,5 +29,6 @@
 
   &.full-width .presentation-content {
     width: 100%;
+    max-width: 1600px;
   }
 }
diff --git a/site/views/overview/full/02-core/05-1-ESL Mega Query.njk b/site/views/overview/full/02-core/05-1-ESL Mega Query.njk
@@ -3,9 +3,35 @@ title: ESL Media Query
 tags: overview
 parent: 05-0-Utils
 ---
-<h4>{{ title }}</h4>
 
-<p>
-  <code>ESLMediaQuery</code> is an extended browser <code>MediaQueryList</code> object and related utils such as rule-value pairs
-  called <code>ESLMediaRuleList</code>.
+<h3 class="text-center">{{ title }}</h3>
+
+<p class="esl-animate-slide up" esl-animate="{repeat: true}">
+  <i>ESLMediaQuery</i> is an extended browser <i>MediaQueryList</i> object and related utils such as rule-value pairs
+  called <i>ESLMediaRuleList</i>.
+</p>
+
+<p class="esl-animate-slide up" esl-animate="{repeat: true}">
+  In addition to the standard <i>MediaQueryList</i> API, <i>ESLMediaQuery</i> provides support of Breakpoint and media condition aliases,
+  extended boolean logic.
 </p>
+
+<div class="esl-animate-slide up" esl-animate="{repeat: true}">
+  {% code 'typescript', 'code-block' %}
+    ESLMediaQuery.for('@XS').matches; // XS breakpoint declared globally
+  {% endcode %}
+</div>
+
+<div class="esl-animate-slide up" esl-animate="{repeat: true}">
+  {% code 'typescript', 'code-block' %}
+    @listen({event: 'change', target: ESLMediaQuery.for('@XS or @SM')})
+    onMediaQueryChange(event) {/* It is true event target */}
+  {% endcode %}
+</div>
+
+<div class="esl-animate-slide up" esl-animate="{repeat: true}">
+  {% code 'typescript', 'code-block' %}
+    ESLMediaRuleList.parse('@XS | @SM | @MD', '1 | 2 | 3').value // 1, 2 or 3 according to current breakpoint
+    ESLMediaRuleList.parse('@XS => 1 | @SM => 2 | @MD => 3').value // alternative way to define the same
+  {% endcode %}
+</div>
diff --git a/site/views/overview/full/02-core/05-2-ESL Traversing Query.njk b/site/views/overview/full/02-core/05-2-ESL Traversing Query.njk
@@ -3,6 +3,20 @@ title: ESL Traversing Query
 tags: overview
 parent: 05-0-Utils
 ---
-<h4>{{ title }}</h4>
+<h3 class="text-center">{{ title }}</h3>
 
-<p>TODO</p>
+<p class="esl-animate-slide up" esl-animate="{repeat: true}">
+  <i>ESLTraversingQuery</i> is a set of utilities to simplify DOM traversing, element selection and filtering.
+</p>
+
+<div class="esl-animate-slide up" esl-animate="{repeat: true}">
+  {% code 'typescript', 'code-block' %}
+    const $base = ...; // some base element (as context)
+
+    ESLTraversingQuery.first($base, '::next'); // get next sibling of the base element
+    ESLTraversingQuery.first($base, '::prev(a)'); // get previous sibling of the base element that is an anchor
+    ESLTraversingQuery.first($base, '::find(button)::nth(2)'); // find second button in the base element
+    ESLTraversingQuery.all($base, '::next'); // find all next siblings of the base element
+    ESLTraversingQuery.all($base, '::find(button)::visible'); // find all visible buttons in the base element
+  {% endcode %}
+</div>
diff --git a/...ws/overview/quick/00-intro/01-what-is.njk → ...overview/quick/01-overview/00-what-is.njk b/...ws/overview/quick/00-intro/01-what-is.njk → ...overview/quick/01-overview/00-what-is.njk
@@ -4,7 +4,7 @@ hash: intro
 tags: overview-quick
 ---
 
-<h2 class="text-center">What is ESL?</h2>
+<h2 class="text-center">{{ title }}</h2>
 
 <p class="text-italic esl-animate-slide up" esl-animate="{repeat: true}">
   ESL is an open-source UI component library that simplifies routine tasks, enabling efficient website creation with flexible components.

diff --git a/...iews/overview/quick/00-intro/02-goals.njk → ...s/overview/quick/01-overview/01-goals.njk b/...iews/overview/quick/00-intro/02-goals.njk → ...s/overview/quick/01-overview/01-goals.njk
@@ -2,9 +2,10 @@
 title: Goals and Anti-Goals of ESL
 hash: goals
 tags: overview-quick
+parent: 00-what-is
 ---
 
-<h3 class="text-center">Goals and Anti-Goals of ESL</h3>
+<h3 class="text-center">{{ title }}</h3>
 
 <div>
   <esl-animate repeat group target="::next::child(li)"></esl-animate>

diff --git a/site/views/overview/quick/01-overview/02-stack&compatibility.njk b/site/views/overview/quick/01-overview/02-stack&compatibility.njk
@@ -0,0 +1,19 @@
+---
+title: ESL is Tiny and Efficient
+hash: stack
+cls: text-center
+tags: overview-quick
+parent: 00-what-is
+---
+
+<h3 class="text-center mb-4">{{ title }}</h3>
+
+<div class="esl-animate-slide up text-note" esl-animate="{repeat: true}">
+  <p>ESL is designed to work quickly and efficiently in browsers, minimizing unnecessary code and ensuring optimal website performance.</p>
+
+  <p>The ESL package is independent of third-party libraries, relying on built-in browser functionality like Web API and ECMAScript 6.</p>
+
+  <p>Written in TypeScript and compiled to ES6 JavaScript, ESL is fully tree-shakable, so your bundle includes only the components you use.</p>
+
+  <p>Currently, ESL uses TS decorators for some syntax sugar, with plans to complement these with native ES decorators in the future.</p>
+</div>
diff --git a/...tack&compatibility/01-browser-support.njk → .../quick/01-overview/03-browser-support.njk b/...tack&compatibility/01-browser-support.njk → .../quick/01-overview/03-browser-support.njk
@@ -3,10 +3,10 @@ title: Cross-Browser Support
 hash: browser-support
 cls: text-center
 tags: overview-quick
-parent: 00-stack&compatibility
+parent: 00-what-is
 ---
 
-<h3>Cross-Browser Support</h3>
+<h3>{{ title }}</h3>
 
 <div class="esl-animate-slide up" esl-animate="{repeat: true}">
   <p>ESL uses built-in browser functionality like Web API and ECMAScript 6.</p>

diff --git a/...-stack&compatibility/03-compatibility.njk → ...ew/quick/01-overview/04-compatibility.njk b/...-stack&compatibility/03-compatibility.njk → ...ew/quick/01-overview/04-compatibility.njk
@@ -3,10 +3,10 @@ title: ESL Compatibility
 hash: compatibility
 cls: text-center
 tags: overview-quick
-parent: 00-stack&compatibility
+parent: 00-what-is
 ---
 
-<h3 class="text-center">ESL Compatibility</h3>
+<h3 class="text-center">{{ title }}</h3>
 
 <p class="esl-animate-slide up" esl-animate="{repeat: true}">
   ESL is framework-agnostic library, it can be used with any modern framework or vanilla JS.

diff --git a/site/views/overview/quick/01-stack&compatibility/00-stack&compatibility.njk b/site/views/overview/quick/01-stack&compatibility/00-stack&compatibility.njk
diff --git a/site/views/overview/quick/02-core/01-custom-tags.njk b/site/views/overview/quick/02-core/01-custom-tags.njk
@@ -5,8 +5,8 @@ tags: overview-quick
 parent: 00-core
 ---
 
-<h3 class="text-center">Custom tags</h3>
-<div class="esl-animate-slide up" esl-animate="{repeat: true}">
+<h3 class="text-center">{{ title }}</h3>
+<div class="esl-animate-slide up" esl-animate="{repeat: true}" style="max-width: 1100px">
   <p>The primary technology of ESL is web components. ESLBaseElement is a base class for custom tag based components.</p>
   <p>ESLBaseElement extends HTMLElement and provides a set of useful features:</p>
   <ul>

diff --git a/site/views/overview/quick/02-core/02-custom-attributes.njk b/site/views/overview/quick/02-core/02-custom-attributes.njk
@@ -5,9 +5,9 @@ tags: overview-quick
 parent: 00-core
 ---
 
-<h3 class="text-center">Custom attributes</h3>
+<h3 class="text-center">{{ title }}</h3>
 
-<div class="esl-animate-slide up" esl-animate="{repeat: true}">
+<div class="esl-animate-slide up" esl-animate="{repeat: true}" style="max-width: 1100px">
   <p>In addition to custom tags powered by web components standard, ESL UI library provides a way to create components based on custom attributes.</p>
   <p>ESLMixinElement is a base class for such components and it gives you this capability in almost the same way as ESLBaseElement does for custom tags.</p>
   <p>Same as ESLBaseElement, ESLMixinElement's instances are created automatically when the attribute is found in the DOM, and destroyed when the attribute is removed.</p>

diff --git a/site/views/overview/quick/02-core/04-event-listener.njk b/site/views/overview/quick/02-core/04-event-listener.njk
@@ -15,40 +15,36 @@ parent: 00-core
 <div class="row">
   <div class="col-6">
     <div class="text-gray tag-h5">Before</div>
-    <div style="overflow: auto; max-height: 350px">
+    <div style="overflow: auto; font-size: 1.2rem">
       {% code 'typescript', 'code-block' %}
         connectedCallback() {
           this.onBtnClick = this.onBtnClick.bind(this);
           this.addEventListener('click', this.onBtnClick);
-
           this.onResize = this.onResize.bind(this);
           this._resizeObserver = new ResizeObserver(this.onResize);
           this._resizeObserver.observe(this);
         }
-
         disconnectedCallback() {
           this.removeEventListener('click', this.onBtnClick);
           this._resizeObserver.disconnect();
         }
-
         onBtnClick(event) {
-          if (event.target.closest('button')) {
-            // Button click
-          }
+          if (event.target.closest('button')) {/* Btn click */}
         }
-
         onResize() {/* Resize subscription for component */}
       {% endcode %}
     </div>
   </div>
   <div class="col-6">
     <div class="text-gray tag-h5">With ESL</div>
-    {% code 'typescript', 'code-block' %}
-      @listen({event: 'click', selector: 'button'})
-      onBtnClick(event) {/* Click subscription with delegation */}
+    <div style="overflow: auto; font-size: 1.2rem">
+      {% code 'typescript', 'code-block' %}
+        @listen({event: 'click', selector: 'button'})
+        onBtnClick(event) {/* Click subscription with delegation */}
 
-      @listen({event: 'resize', target: ESLResizeObserverTarget.for})
-      onResize(event) {/* Resize subscription for component */}
-    {% endcode %}
+        @listen({event: 'resize', target: ESLResizeObserverTarget.for})
+        onResize(event) {/* Resize subscription for component */}
+      {% endcode %}
+    </div>
   </div>
 </div>
diff --git a/site/views/overview/quick/02-core/05-esl-utils.njk b/site/views/overview/quick/02-core/05-esl-utils.njk
@@ -32,7 +32,7 @@ parent: 00-core
     <h5>Extended Traversing Syntax</h5>
 
     <p>
-      Extended syntax for DOM traversing, very similar to JQuery, with support for relative selectors.
+      Extended syntax for DOM traversing, very similar to jQuery, with support for relative selectors.
     </p>
     <code class="language-html">::parent::next(esl-toggleable)</code>
   </li>

diff --git a/site/views/overview/quick/02-core/05-media-query.njk b/site/views/overview/quick/02-core/05-media-query.njk
diff --git a/site/views/overview/quick/02-core/06-traversing-query.njk b/site/views/overview/quick/02-core/06-traversing-query.njk
diff --git a/site/views/overview/quick/03-components/01-component-list.njk b/site/views/overview/quick/03-components/01-component-list.njk
@@ -6,8 +6,8 @@ cls: full-width
 parent: 00-components
 ---
 
-<p class="text-center"> Here is a list of all component modules available in ESL. </p>
+<p class="text-center"> Here is a list of all component modules available in ESL: </p>
 
 {% from 'navigation/collection-grid.njk' import grid with context %}
 
-{{ grid('components', {isList: true, noBadge: true}) }}
+{{ grid('components', {isList: true, noBadge: true, classes: 'collection-grid-compact'}) }}
diff --git a/site/views/overview/quick/03-components/03-ux-list.njk b/site/views/overview/quick/03-components/03-ux-list.njk
@@ -8,4 +8,4 @@ parent: 00-components
 
 {% from 'navigation/collection-grid.njk' import grid with context %}
 
-{{ grid('examples', {noBadge: true}) }}
+{{ grid('examples', {noBadge: true, classes: 'collection-grid-compact'}) }}
diff --git a/site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk b/site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk
@@ -44,9 +44,9 @@ parent: 00-components
         </esl-tabs>
 
         <esl-panel-group class="esl-d-tab-group"
-                         mode="accordion | @+MD => tabs"
-                         min-open-items="0 | @+MD => 1"
-                         max-open-items="all | @+MD => 1"
+                         mode="accordion | @+SM => tabs"
+                         min-open-items="0 | @+SM => 1"
+                         max-open-items="all | @+SM => 1"
                          mode-cls-target="::parent">
           <esl-trigger class="esl-d-accordion-header esl-d-accordion-header-arrow h5"
                        target="::next">Toggle Tab #1