Добавляет новый baseline

.eleventy.js

@@ -269,11 +269,6 @@ module.exports = function (config) {
     return orderedArticleIndexes
   })
 
-  config.addCollection('webFeatures', async () => {
-    const { features } = await import('web-features')
-    return features
-  })
-
   config.setLibrary('md', initMarkdownLibrary())
 
   config.addNunjucksShortcode('readingTime', (text) => {

.eslintignore

@@ -10,3 +10,4 @@ src/a11y
 src/pages
 src/people
 src/specials
+src/scripts/web-components/*.build.js

package.json

@@ -83,8 +83,7 @@
     "stylelint": "^16.1.0",
     "stylelint-config-standard": "^36.0.0",
     "terser": "^5.26.0",
-    "transliteration": "^2.3.5",
-    "web-features": "^2.40.2"
+    "transliteration": "^2.3.5"
   },
   "dependencies": {
     "@11ty/eleventy-plugin-vite": "^4.0.0",

src/includes/blocks/baseline.njk

@@ -1,27 +1,9 @@
-<div class="wdi-browser-compat">
-  <span class="wdi-browser-compat__label">Поддержка в браузерах:</span>
-  <ul class="wdi-browser-compat__items">
-    {% for browser in baseline.keys %}
-      <li class="wdi-browser-compat__item">
-        <span class="wdi-browser-compat__icon" data-browser="{{ browser }}">
-          {% if baseline.supported[browser] %}
-              <span class="visually-hidden">{{ baseline.names[browser] }} {{ baseline.versions[browser] }}, поддерживается</span>
-            </span>
-            <span class="wdi-browser-compat__version" aria-hidden="true" data-compat="yes">{{ baseline.versions[browser] }}</span>
-          {% elif baseline.flagged[browser] %}
-            <span class="visually-hidden">{{ baseline.names[browser] }} {{ baseline.versions[browser] }}, за флагом</span>
-            <span class="wdi-browser-compat__version" aria-hidden="true" data-compat="flag">
-            </span>
-          {% elif baseline.preview[browser] %}
-            <span class="visually-hidden">{{ baseline.names[browser] }}, превью</span>
-            <span class="wdi-browser-compat__version" aria-hidden="true" data-compat="preview"></span>
-          {% else %}
-            <span class="visually-hidden">{{ baseline.names[browser] }}, не поддерживается</span>
-            </span>
-            <span class="wdi-browser-compat__version" aria-hidden="true" data-compat="no"></span>
-          {% endif %}
-      </li>
-    {% endfor %}
-  </ul>
-  <a class="wdi-browser-compat__link" href="https://web.dev/baseline/" target="_blank">О Baseline</a>
-</div>
+{% if baseline.groupIds %}
+  <div class="wdi-browser-compat">
+    <div class="wdi-browser-compat__items">
+      {% for groupId in baseline.groupIds %}
+        <doka-baseline groupId="{{ groupId }}"></doka-baseline>
+      {% endfor %}
+    </div>
+  </div>
+{% endif %}

src/scripts/index.js

@@ -26,3 +26,6 @@ import './modules/person-badges-tooltip.js'
 import './modules/answer.js'
 import './modules/pwa.js'
 import './modules/triggers.js'
+import { DokaBaseline } from './web-components/doka-baseline.build.js'
+
+window.customElements.define('doka-baseline', DokaBaseline)

src/styles/blocks/baseline.css

@@ -1,118 +1,46 @@
 .wdi-browser-compat {
-  max-width: 87.5%;
-  margin-block-start: 40px;
+  margin-block-end: 20px;
   align-items: center;
   color: var(--color-light);
   display: flex;
   flex-wrap: wrap;
 }
 
 .wdi-browser-compat__items {
+  flex: 1 1 100%;
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
   margin: 1rem 0;
   padding: 0;
   gap: 24px;
   list-style: none;
 }
 
-.wdi-browser-compat__item {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-
-.wdi-browser-compat__icon {
-  display: inline-block;
-  height: 24px;
-  margin-right: 6px;
-  width: 24px;
-  background-repeat: no-repeat no-repeat;
-  background-position: center center;
-  background-size: cover;
-}
-
-.wdi-browser-compat__icon[data-browser="chrome"] {
-  background-image: url("/images/baseline/chrome.svg");
-}
-
-.wdi-browser-compat__icon[data-browser="firefox"] {
-  background-image: url("/images/baseline/firefox.svg");
+doka-baseline {
+  min-height: 64px;
 }
 
-.wdi-browser-compat__icon[data-browser="edge"] {
-  background-image: url("/images/baseline/edge.svg");
-}
-
-.wdi-browser-compat__icon[data-browser="safari"] {
-  background-image: url("/images/baseline/safari.svg");
-}
-
-.wdi-browser-compat__version {
-  box-sizing: border-box;
-  --size-2: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
-  background-repeat: no-repeat no-repeat;
-  background-position: center center;
-  background-origin: content-box;
-  border-radius: 10000px;
-  display: inline-block;
-  font-size: var(--size-2);
-  height: 24px;
-  line-height: 24px;
-  min-width: 24px;
-  text-align: center;
-  padding-inline: 0.5ch;
-}
-
-.wdi-browser-compat__version[data-compat="yes"] {
-  background: var(--wdi-success-bg-color, #e9f6ed);
-  color: var(--wdi-success-color, #0d652d);
-}
-
-.wdi-browser-compat__version[data-compat="flag"] {
-  background-color: var(--wdi-warn-bg-color, #fff5e3);
-  background-image: url("/images/baseline/flag.svg");
-  color: var(--wdi-warn-color, #c34900);
-}
-
-.wdi-browser-compat__version[data-compat="no"] {
-  background-color: var(--wdi-error-bg-color, #fce8e8);
-  background-image: url("/images/baseline/no.svg");
-  color: var(--wdi-error-color, #a50e0e);
-}
-
-.wdi-browser-compat__version[data-compat="preview"] {
-  padding: 2px;
-  background-color: var(--wdi-warn-bg-color, #fff5e3);
-  background-image: url("/images/baseline/preview.svg");
-  color: var(--wdi-warn-color, #c34900);
-}
-
-.wdi-browser-compat__link {
-  flex: 0 0 100%;
-  margin-left: 0;
-  color: currentColor;
-}
-
-@media (width >= 50em) {
+@media (width >= 768px) {
   .wdi-browser-compat {
-    flex-wrap: nowrap;
+    max-width: 81%;
   }
+}
 
-  .wdi-browser-compat__label {
-    flex: none;
-    margin-bottom: 0;
-    width: auto;
+@media (width >= 1024px) {
+  .wdi-browser-compat {
+    max-width: 87.5%;
   }
+}
 
-  .wdi-browser-compat__link {
-    flex: none;
-    margin-left: auto;
+@media not all and (width >= 1024px) {
+  .wdi-browser-compat {
+    padding: inherit;
   }
 }
 
-@media (width >= 600px) {
-  .wdi-browser-compat__label {
-    margin-right: 24px;
+@media (width >= 1680px) {
+  .wdi-browser-compat {
+    max-width: 100%;
   }
 }

src/views/doc.11tydata.js

@@ -34,13 +34,6 @@ function hasTag(tags, tag) {
   return (tags || []).includes(tag)
 }
 
-function assignGreaterValue(map, item, key) {
-  if (!Number.isNaN(item[key]) && Number(item[key]) > map[key]) {
-    map[key] = Number(item[key])
-  }
-  return map
-}
-
 const asyncFilter = async (arr, predicate) => {
   const results = await Promise.all(arr.map(predicate))
   return arr.filter((_v, index) => results[index])
@@ -257,43 +250,11 @@ module.exports = {
     },
 
     baseline: function (data) {
-      const { doc, collections, hasBaseline } = data
-      const { webFeatures } = collections
+      const { doc, hasBaseline } = data
       if (hasBaseline) {
-        const keys = ['chrome', 'edge', 'firefox', 'safari']
-        const names = { chrome: 'Chrome', edge: 'Edge', firefox: 'Firefox', safari: 'Safari' }
-        const versions = doc.data.baseline
-          .filter((g) => Object.keys(webFeatures[g.group]).includes('status'))
-          .map((g) => {
-            return webFeatures[g.group].status.support
-          })
-          .reduce(
-            (map, item) => {
-              for (const key of keys) {
-                assignGreaterValue(map, item, key)
-              }
-              return map
-            },
-            { chrome: 0, edge: 0, firefox: 0, safari: 0 },
-          )
-        const supported = Object.keys(versions).reduce(
-          (map, item) => {
-            if (versions[item] === 0) {
-              map[item] = false
-            }
-            return map
-          },
-          { chrome: true, edge: true, firefox: true, safari: true },
-        )
-        const flagged = { chrome: false, edge: false, firefox: false, safari: false }
-        const preview = { chrome: false, edge: false, firefox: false, safari: false }
+        const groupIds = doc.data.baseline.filter((g) => g.group).map((g) => g.group)
         return {
-          keys,
-          names,
-          versions,
-          flagged,
-          supported,
-          preview,
+          groupIds,
         }
       }
       return {}

src/views/doc.njk

@@ -108,11 +108,14 @@
         </div>
 
         <div class="article__content doc__wrapper">
+
+          {% if hasBaseline %}
+            {% include "blocks/baseline.njk" %}
+          {% endif %}
+
           <div class="article__content-inner content">
             {{ doc.templateContent | safe }}
-            {% if hasBaseline %}
-              {% include "blocks/baseline.njk" %}
-            {% endif %}
+
             {% include "practices.njk" %}
             {% include "questions.njk" %}
           </div>