Добавляет новый 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

@@ -9,4 +9,4 @@ src/recipes
 src/a11y
 src/pages
 src/people
-src/specials
+src/specials

.eslintrc.json

@@ -4,11 +4,12 @@
   "env": {
     "browser": true,
     "node": true,
-    "es2020": true
+    "es2021": true
   },
 
   "parserOptions": {
-    "sourceType": "module"
+    "sourceType": "module",
+    "ecmaVersion": 2022
   },
 
   "rules": {

package.json

@@ -83,14 +83,15 @@
     "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",
     "@babel/core": "^7.23.6",
+    "@lit/task": "^1.0.3",
     "babel-jest": "^29.7.0",
     "eslint-plugin-jest": "^27.6.0",
-    "html-escaper": "^3.0.3"
+    "html-escaper": "^3.0.3",
+    "lit": "^3.3.1"
   }
 }

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 }}" showName="{{ baseline.groupIds.length > 1 }}"></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)