Добавляет новый 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) => {
@@ -508,6 +503,7 @@ module.exports = function (config) {
   config.addPassthroughCopy('src/robots.txt')
   config.addPassthroughCopy('src/fonts')
   config.addPassthroughCopy('src/images')
+  config.addPassthroughCopy('src/libs/doka-baseline')
   config.addPassthroughCopy('src/(css|html|js|a11y|tools|recipes|people|interviews)/**/!(*11tydata*)*.!(md)')
 
   return {

.eslintignore

@@ -10,3 +10,4 @@ src/a11y
 src/pages
 src/people
 src/specials
+src/libs/doka-baseline

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/includes/meta.njk

@@ -21,6 +21,8 @@
 <!-- 3. Async inline script -->
 <!-- 3.1 GitHub Stars Button script -->
 <script async defer src="https://buttons.github.io/buttons.js"></script>
+<!-- 3.2 Baseline status script -->
+<script type="module" src="/libs/doka-baseline/doka-baseline.js"></script>
 <!-- 4. CSS with @import -->
 <!-- 5. Synchronous JS -->
 <!-- 6. CSS without @import -->

src/libs/doka-baseline/doka-baseline.js

@@ -0,0 +1,3 @@
+import { DokaBaseline } from './doka-baseline.min.js';
+
+window.customElements.define('doka-baseline', DokaBaseline);

src/styles/blocks/baseline.css

@@ -1,5 +1,4 @@
 .wdi-browser-compat {
-  max-width: 87.5%;
   margin-block-start: 40px;
   align-items: center;
   color: var(--color-light);
@@ -8,111 +7,36 @@
 }
 
 .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");
-}
-
-.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>