From 51930dfcbb317e0fb82b765b443bde3ea7ad9ebd Mon Sep 17 00:00:00 2001 From: "ala'n (Alexey Stsefanovich)" Date: Fri, 28 Jun 2024 04:59:55 +0200 Subject: [PATCH] chore(site): rework 1/2 of slides content --- site/src/common/flex.less | 3 ++ site/src/common/helpers.less | 11 ++++++ site/src/common/typography.large.less | 6 +-- site/static/assets/common/open-source.svg | 3 ++ site/static/assets/common/puzzle-pieces.svg | 3 ++ site/static/assets/frameworks/angular.svg | 16 ++++++++ site/static/assets/frameworks/react.svg | 9 +++++ site/static/assets/frameworks/vue.svg | 2 + site/static/assets/logo-white.svg | 12 ++++++ .../overview/quick/00-intro/00-intro.njk | 2 +- .../overview/quick/00-intro/01-what-is.njk | 17 +++++--- .../overview/quick/00-intro/02-goals.njk | 4 +- .../00-stack&compatibility.njk | 17 ++++---- .../01-browser-support.njk | 3 +- .../03-compatibility.njk | 39 ++++++++++++++++++- site/views/overview/quick/02-core/00-core.njk | 1 + .../overview/quick/02-core/01-custom-tags.njk | 2 +- .../quick/02-core/02-custom-attributes.njk | 3 +- .../quick/02-core/04-event-listener.njk | 29 +++++++------- .../overview/quick/02-core/05-media-query.njk | 37 ++++++++++++++---- .../quick/02-core/06-traversing-query.njk | 23 +++++++---- .../quick/03-components/00-components.njk | 2 +- .../quick/03-components/01-component-list.njk | 2 +- .../quick/03-components/02-flexibility.njk | 5 +++ .../04-responsiveness-n-flexibility.njk | 9 +++-- 25 files changed, 201 insertions(+), 59 deletions(-) create mode 100644 site/static/assets/common/open-source.svg create mode 100644 site/static/assets/common/puzzle-pieces.svg create mode 100644 site/static/assets/frameworks/angular.svg create mode 100644 site/static/assets/frameworks/react.svg create mode 100644 site/static/assets/frameworks/vue.svg create mode 100644 site/static/assets/logo-white.svg diff --git a/site/src/common/flex.less b/site/src/common/flex.less index e8fa4ddbf..1fb52722e 100644 --- a/site/src/common/flex.less +++ b/site/src/common/flex.less @@ -34,6 +34,9 @@ &-around { justify-content: space-around !important; } + &-center { + justify-content: center !important; + } } .align-items { diff --git a/site/src/common/helpers.less b/site/src/common/helpers.less index 07792e139..57def6e51 100644 --- a/site/src/common/helpers.less +++ b/site/src/common/helpers.less @@ -179,9 +179,20 @@ border: 0; } +.list-spaced { + > li { + margin-block-end: 0.5rem; + } +} + .icon-inline { display: inline-flex; min-width: 1em; height: 1em; + + &.large { + min-width: 2em; + height: 2em; + } } diff --git a/site/src/common/typography.large.less b/site/src/common/typography.large.less index 7fe9ee8a8..b92dfeac2 100644 --- a/site/src/common/typography.large.less +++ b/site/src/common/typography.large.less @@ -3,7 +3,7 @@ .typo-large { // Base font size - font-size: 1.175rem; + font-size: 1.35rem; h1.large, .h1.large { @@ -41,12 +41,12 @@ h4, .h4 { - font-size: 1.5rem; + font-size: 1.75rem; margin-bottom: 0.75rem; } h5, .h5 { - font-size: 1.25rem; + font-size: 1.5rem; } } diff --git a/site/static/assets/common/open-source.svg b/site/static/assets/common/open-source.svg new file mode 100644 index 000000000..4007c578b --- /dev/null +++ b/site/static/assets/common/open-source.svg @@ -0,0 +1,3 @@ + + + diff --git a/site/static/assets/common/puzzle-pieces.svg b/site/static/assets/common/puzzle-pieces.svg new file mode 100644 index 000000000..8473d5635 --- /dev/null +++ b/site/static/assets/common/puzzle-pieces.svg @@ -0,0 +1,3 @@ + + + diff --git a/site/static/assets/frameworks/angular.svg b/site/static/assets/frameworks/angular.svg new file mode 100644 index 000000000..bf081acb1 --- /dev/null +++ b/site/static/assets/frameworks/angular.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/site/static/assets/frameworks/react.svg b/site/static/assets/frameworks/react.svg new file mode 100644 index 000000000..ea77a618d --- /dev/null +++ b/site/static/assets/frameworks/react.svg @@ -0,0 +1,9 @@ + + React Logo + + + + + + + diff --git a/site/static/assets/frameworks/vue.svg b/site/static/assets/frameworks/vue.svg new file mode 100644 index 000000000..a1d285eb2 --- /dev/null +++ b/site/static/assets/frameworks/vue.svg @@ -0,0 +1,2 @@ + + diff --git a/site/static/assets/logo-white.svg b/site/static/assets/logo-white.svg new file mode 100644 index 000000000..d677ddd6b --- /dev/null +++ b/site/static/assets/logo-white.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/site/views/overview/quick/00-intro/00-intro.njk b/site/views/overview/quick/00-intro/00-intro.njk index 98a6a9451..366fcd57c 100644 --- a/site/views/overview/quick/00-intro/00-intro.njk +++ b/site/views/overview/quick/00-intro/00-intro.njk @@ -6,4 +6,4 @@ tags: overview-quick

Exadel Smart Library

-

Presentation by @exadel/esl-team

+

Presentation by @exadel/esl-team

diff --git a/site/views/overview/quick/00-intro/01-what-is.njk b/site/views/overview/quick/00-intro/01-what-is.njk index 78bb7225e..b3467a725 100644 --- a/site/views/overview/quick/00-intro/01-what-is.njk +++ b/site/views/overview/quick/00-intro/01-what-is.njk @@ -1,17 +1,24 @@ --- -title: What the ESL is? +title: What is ESL? hash: intro tags: overview-quick --- -

What the ESL is?

+

What is ESL?

- ESL is an open-source UI components library that reduces routine tasks and lets you efficiently create websites with flexible components. + ESL is an open-source UI component library that simplifies routine tasks, enabling efficient website creation with flexible components.

- ESL is based on Web Components, providing a standard user experience for popups, tabs, embedded videos/audio, and more. + With ESL, you can easily implement popular UX patterns such as popups, tabs, embedded videos/audio, and more.

- You can utilize these web components to complement projects or build your infrastructure from the ground up using ESL alone. + Use these web components to enhance existing projects or build your infrastructure from scratch with ESL.

+ +
+ Open Source icon +
+ diff --git a/site/views/overview/quick/00-intro/02-goals.njk b/site/views/overview/quick/00-intro/02-goals.njk index 21b8df879..1fe4d6bc5 100644 --- a/site/views/overview/quick/00-intro/02-goals.njk +++ b/site/views/overview/quick/00-intro/02-goals.njk @@ -4,11 +4,11 @@ hash: goals tags: overview-quick --- -

Goals and Anti-Goals of ESL

+

Goals and Anti-Goals of ESL

-
diff --git a/site/views/overview/quick/01-stack&compatibility/03-compatibility.njk b/site/views/overview/quick/01-stack&compatibility/03-compatibility.njk index 28e085147..224e4da81 100644 --- a/site/views/overview/quick/01-stack&compatibility/03-compatibility.njk +++ b/site/views/overview/quick/01-stack&compatibility/03-compatibility.njk @@ -1,16 +1,51 @@ --- title: ESL Compatibility hash: compatibility +cls: text-center tags: overview-quick parent: 00-stack&compatibility --- -

ESL Compatibility

+

ESL Compatibility

ESL is framework-agnostic library, it can be used with any modern framework or vanilla JS.

- Built-in ESL components have proper type definitions for TSX (JSX) syntax and accepts arguments both as attributes and properties. + Built-in ESL components have proper type definitions for TSX (JSX) syntax and accepts arguments both as attributes and + properties.

+ +
+ ESL + + + + + + + React + Angular + Vue +
diff --git a/site/views/overview/quick/02-core/00-core.njk b/site/views/overview/quick/02-core/00-core.njk index b8d0ac29d..413bdfeb4 100644 --- a/site/views/overview/quick/02-core/00-core.njk +++ b/site/views/overview/quick/02-core/00-core.njk @@ -1,6 +1,7 @@ --- title: ESL Core hash: core +cls: text-center tags: overview-quick --- diff --git a/site/views/overview/quick/02-core/01-custom-tags.njk b/site/views/overview/quick/02-core/01-custom-tags.njk index 49d2a8a39..22c90e4c0 100644 --- a/site/views/overview/quick/02-core/01-custom-tags.njk +++ b/site/views/overview/quick/02-core/01-custom-tags.njk @@ -5,7 +5,7 @@ tags: overview-quick parent: 00-core --- -

ESLBaseElement - for custom tag based components

+

Custom tags

The primary technology of ESL is web components. ESLBaseElement is a base class for custom tag based components.

ESLBaseElement extends HTMLElement and provides a set of useful features:

diff --git a/site/views/overview/quick/02-core/02-custom-attributes.njk b/site/views/overview/quick/02-core/02-custom-attributes.njk index 9b26b0d16..d6f5c87c7 100644 --- a/site/views/overview/quick/02-core/02-custom-attributes.njk +++ b/site/views/overview/quick/02-core/02-custom-attributes.njk @@ -5,7 +5,8 @@ tags: overview-quick parent: 00-core --- -

Components based on custom attribute - ESLMixinElement

+

Custom attributes

+

In addition to custom tags powered by web components standard, ESL UI library provides a way to create components based on custom attributes.

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.

diff --git a/site/views/overview/quick/02-core/04-event-listener.njk b/site/views/overview/quick/02-core/04-event-listener.njk index 90209b82d..dc80707fb 100644 --- a/site/views/overview/quick/02-core/04-event-listener.njk +++ b/site/views/overview/quick/02-core/04-event-listener.njk @@ -5,23 +5,26 @@ tags: overview-quick parent: 00-core --- -

{{ title }}

+

{{ title }}

+

ESL Event Listener is an embedded ESL module that take care of the event listeners management and provide extended utilities to work with events. - ESL provides ability to register event listeners in declarative way using TS @listen decorator. + ESL provides ability to register event listeners in declarative way using TS @listen decorator. Module supports event delegation, custom event targets. Listeners registration works on the "host" concept that allows you to link the listener to the specific component instance (to manage subscriptions automatically.

-{% code 'typescript', 'code-block' %} - class MyComponent extends ESLBaseElement { - @listen({event: 'click', selector: 'button'}) - onBtnClick(event) { - console.log('Button click catched with delegation', event); - } +
+ {% code 'typescript', 'code-block' %} + class MyComponent extends ESLBaseElement { + @listen({event: 'click', selector: 'button'}) + onBtnClick(event) { + console.log('Button click catched with delegation', event); + } - @listen({event: 'resize', target: ESLResizeObserverTarget.for}) - onResize(event) { - console.log('Component resized', event); + @listen({event: 'resize', target: ESLResizeObserverTarget.for}) + onResize(event) { + console.log('Component resized', event); + } } - } -{% endcode %} + {% endcode %} +
diff --git a/site/views/overview/quick/02-core/05-media-query.njk b/site/views/overview/quick/02-core/05-media-query.njk index 6726d3067..229609f1e 100644 --- a/site/views/overview/quick/02-core/05-media-query.njk +++ b/site/views/overview/quick/02-core/05-media-query.njk @@ -5,13 +5,34 @@ tags: overview-quick parent: 00-core --- -

{{ title }}

+

{{ title }}

-{% code 'typescript', 'code-block' %} - ESLMediaQuery.for('@XS').matches; // true if XS -{% endcode %} +

+ ESLMediaQuery is an extended browser MediaQueryList object and related utils such as rule-value pairs + called ESLMediaRuleList. +

-{% code 'typescript', 'code-block' %} - @listen({event: 'change', target: ESLMediaQuery.for('@XS or @SM')}) - onMediaQueryChange(event) {/*...*/} -{% endcode %} +

+ In addition to the standard MediaQueryList API, ESLMediaQuery provides support of Breakpoint and media condition aliases, + extended boolean logic. +

+ +
+ {% code 'typescript', 'code-block' %} + ESLMediaQuery.for('@XS').matches; // XS breakpoint declared globally + {% endcode %} +
+ +
+ {% code 'typescript', 'code-block' %} + @listen({event: 'change', target: ESLMediaQuery.for('@XS or @SM')}) + onMediaQueryChange(event) {/* It is true event target */} + {% endcode %} +
+ +
+ {% 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 %} +
diff --git a/site/views/overview/quick/02-core/06-traversing-query.njk b/site/views/overview/quick/02-core/06-traversing-query.njk index e22e25e48..48c9b34e3 100644 --- a/site/views/overview/quick/02-core/06-traversing-query.njk +++ b/site/views/overview/quick/02-core/06-traversing-query.njk @@ -5,13 +5,20 @@ tags: overview-quick parent: 00-core --- -

{{ title }}

+

{{ title }}

-{% code 'typescript', 'code-block' %} - const $base = ...; // some base element (as context) +

+ ESLTraversingQuery is a set of utilities to simplify DOM traversing, element selection and filtering. +

- ESLTraversingQuery.find($base, '::find(button)::visible'); // find all visible buttons in the base element - ESLTraversingQuery.find($base, '::find(button)::nth(2)'); // find second button in the base element - ESLTraversingQuery.find($base, '::next'); // get next sibling of the base element - ESLTraversingQuery.find($base, '::prev(a)'); // get previous sibling of the base element that is an anchor -{% endcode %} +
+ {% 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 %} +
diff --git a/site/views/overview/quick/03-components/00-components.njk b/site/views/overview/quick/03-components/00-components.njk index 74fd04a94..732b93583 100644 --- a/site/views/overview/quick/03-components/00-components.njk +++ b/site/views/overview/quick/03-components/00-components.njk @@ -4,7 +4,7 @@ hash: components tags: overview-quick --- -

ESL Built-in Components

+

ESL Built-in Components

In addition to the core ESL library, ESL provides a set of built-in components. diff --git a/site/views/overview/quick/03-components/01-component-list.njk b/site/views/overview/quick/03-components/01-component-list.njk index ebeeb81ca..3a6daa4d7 100644 --- a/site/views/overview/quick/03-components/01-component-list.njk +++ b/site/views/overview/quick/03-components/01-component-list.njk @@ -6,7 +6,7 @@ cls: full-width parent: 00-components --- -

Here is a list of all component modules available in ESL.

+

Here is a list of all component modules available in ESL.

{% from 'navigation/collection-grid.njk' import grid with context %} diff --git a/site/views/overview/quick/03-components/02-flexibility.njk b/site/views/overview/quick/03-components/02-flexibility.njk index 1f440ac58..497c3ace8 100644 --- a/site/views/overview/quick/03-components/02-flexibility.njk +++ b/site/views/overview/quick/03-components/02-flexibility.njk @@ -1,10 +1,15 @@ --- title: Components Combination hash: flexibility +cls: text-center tags: overview-quick parent: 00-components --- +Puzzle pieces fits together

ESL components are designed to be flexible and can be combined in various ways to create complex interfaces.

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 index ec268cc35..cd2d379aa 100644 --- a/site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk +++ b/site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk @@ -5,17 +5,18 @@ tags: overview-quick parent: 00-components --- -

Built-In Responsiveness and Flexibility

+

Built-In Responsiveness and Flexibility

-

+

ESL components can adapt their behavior based on patterns or device sizes.

-

+ +

The same Tab component can be presented as an Accordion on smaller screens without needing separate markup—just change one parameter!

-

+

See Example