Feature/macro api list alpha

lib/kuma/index.js

@@ -33,6 +33,7 @@ import noTagOmission from './macros/no_tag_omission.js';
 import svgelement from './macros/svgelement.js';
 import jsPropertyAttributes from './macros/js_property_attributes.js';
 import EmbedGhLiveSample from './macros/embed-gh-live-sample.js';
+import DeprecatedBadge from './macros/deprecated-badge.js';
 
 export { parseMacroArgs, extractMacros } from './match.js';
 
@@ -91,6 +92,7 @@ export function macros(context) {
     svgelement,
     js_property_attributes: jsPropertyAttributes,
     embedghlivesample: EmbedGhLiveSample,
+    deprecatedbadge: DeprecatedBadge,
   };
 
   // Attach outside context, like page registry or locale info to all macro functions

lib/kuma/macros/api-list-alpha.js

@@ -0,0 +1,119 @@
+import DeprecatedBadge from './deprecated-badge.js';
+import ExperimentalBadge from './experimental-badge.js';
+import NonStandardBadge from './non-standard-badge.js';
+import ObsoleteBadge from './obsolete-badge.js';
+
+const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZАБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯ';
+
+/**
+ * Prepares the title of the link. This includes wrapping the appropriate
+ * portion of the title with <code>. Returns null if the page should not
+ * be included in the index.
+ *
+ * @param {string} base
+ * @returns {null | string}
+ */
+function buildTitle(base) {
+  const spaceIndex = base.indexOf(' ');
+  // If there are no spaces in the page's title, the entire base
+  // string is the title, so we just wrap the whole thing in <code> and
+  // return it.
+  if (spaceIndex === -1 && base !== 'Reference') {
+    return '<code>' + base + '</code>';
+  }
+  // If the character after the space is '(', then this is assumed to be an
+  // interface with a qualifier after its name (such as "(Firefox OS)").
+  // These are allowed to appear in the index, but we end the <code> block
+  // before the first space
+  if (spaceIndex < base.length - 1 && base[spaceIndex + 1] === '(') {
+    return (
+      '<code>' +
+      base.substring(0, spaceIndex) +
+      '</code>' +
+      base.substring(spaceIndex)
+    );
+  }
+  // It's not an interface, so return null.
+  return null;
+}
+
+/**
+ *
+ * @param {string[]=} tagList
+ * @param {string} tag
+ * @returns {boolean}
+ */
+function containsTag(tagList, tag) {
+  if (!tagList) return false;
+  const normalizedTag = tag.toLowerCase();
+  return tagList.some((tagItem) => tagItem.toLowerCase() === normalizedTag);
+}
+export default function ApiListAlpha(apiHref = '/uk/docs/Web/API') {
+  const locale = this.env.targetLocale;
+  const pages = this.registry.getChildren(apiHref); // get subpages, including tags
+  // The result of `getChildren()` does not guarantee the order to be
+  // alphabetical. Most of the time it is because of how the OS is iterating over
+  // files on disk. So sort it first, because the rendering loop (see far below)
+  // depends on it.
+  pages.sort((a, b) =>
+    a.title.toLowerCase().localeCompare(b.title.toLowerCase(), locale)
+  );
+  const numPages = pages.length;
+  let html = '';
+  const p = 0;
+  for (const letter of letters) {
+    const insertedHeading = false; // Haven't done this letter's heading yet
+    if (p < numPages) {
+      do {
+        const tags = pages[p].tags;
+        const url = pages[p].path;
+        const title = pages[p].title;
+        // Build the formatted title string; skip this page if it's not
+        // an interface.
+        const builtTitle = buildTitle(title);
+        if (builtTitle === null) {
+          p++;
+          continue;
+        }
+        let badge = '';
+        // add badges if needed
+        if (
+          containsTag(tags, 'Non-standard') ||
+          containsTag(tags, 'Non standard')
+        ) {
+          badge += ` ${NonStandardBadge('1')}`;
+        }
+        if (containsTag(tags, 'Obsolete')) {
+          badge += ` ${ObsoleteBadge(1)}`;
+        } else if (containsTag(tags, 'Deprecated')) {
+          badge += ` ${DeprecatedBadge(1)}`;
+        }
+        if (containsTag(tags, 'Experimental')) {
+          badge += ` ${ExperimentalBadge('1')}`;
+        }
+        // Wrap the badges in another span
+        if (badge.length > 0)
+          badge = `<span class="indexListBadges">${badge}</span>`;
+        if (title[0].toUpperCase() === letter) {
+          if (!containsTag(tags, 'junk')) {
+            if (!insertedHeading) {
+              html += `<h3>${letter}</h3><ul>`;
+              insertedHeading = true;
+            }
+            html += `\n<li><span class="indexListRow"><span class="indexListTerm"><a href="${url.replace(
+              'en-US',
+              locale
+            )}">${builtTitle}</a></span>${badge}</span></li>`;
+          }
+          p++;
+        } else {
+          break;
+        }
+      } while (p < numPages);
+    }
+    html += '\n</ul>\n';
+  }
+  return `<div class="index">
+    ${html}
+  </div>`;
+}

lib/kuma/macros/deprecated-badge.js

@@ -0,0 +1,5 @@
+export default function DeprecatedBadge() {
+  return `<abbr class="icon icon-deprecated" title="Нерекомендовано. Не для використання на нових вебсайтах.">
+        <span class="visually-hidden">Нерекомендовано</span>
+    </abbr>`;
+}

lib/kuma/macros/experimental-badge.js

@@ -0,0 +1,5 @@
+export default function ExperimentalBadge() {
+  return `<abbr class="icon icon-experimental" title="Експериментальне. Слід очікувати змін логіки в майбутньому.">
+    <span class="visually-hidden">Експериментальне</span>
+  </abbr>`;
+}

lib/kuma/macros/non-standard-badge.js

@@ -0,0 +1,8 @@
+/**
+ *  Inserts a badge indicating a term or API is non-standard.
+ */
+export default function NonStandardBadge() {
+  return `<abbr class="icon icon-nonstandard" title="Нестандартне. Перевірте сумісність із браузерами перед використанням.">
+        <span class="visually-hidden">Нестандартне</span>
+    </abbr>`;
+}

lib/kuma/macros/obsolete-badge.js

@@ -0,0 +1,11 @@
+/**
+ *  Inserts a badge marking an API or term as being obsolete.
+ */
+export default function ObsoleteBadge() {
+  return `<svg class="icon obsolete" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
+    role="img">
+    <title>Це застарілий API – немає гарантій, що він працюватиме.</title>
+    <path
+        d="M38.75 78.13V36.88A1.85 1.85 0 0036.88 35h-3.75a1.85 1.85 0 00-1.88 1.88v41.25A1.85 1.85 0 0033.13 80h3.75a1.85 1.85 0 001.87-1.87zm15 0V36.88A1.85 1.85 0 0051.88 35h-3.75a1.85 1.85 0 00-1.88 1.88v41.25A1.85 1.85 0 0048.13 80h3.75a1.85 1.85 0 001.87-1.87zm15 0V36.88A1.85 1.85 0 0066.88 35h-3.75a1.85 1.85 0 00-1.88 1.88v41.25A1.85 1.85 0 0063.13 80h3.75a1.85 1.85 0 001.87-1.87zM36.88 20h26.25l-2.82-6.85a2.35 2.35 0 00-1-.65H40.74a2 2 0 00-1 .65zm54.37 1.88v3.75a1.85 1.85 0 01-1.87 1.87h-5.63v55.55c0 6.44-4.22 12-9.37 12H25.63c-5.16 0-9.38-5.27-9.38-11.72V27.5h-5.62a1.85 1.85 0 01-1.88-1.83v-3.8A1.85 1.85 0 0110.63 20h18.1l4.1-9.78A9.12 9.12 0 0140.63 5h18.75a9.1 9.1 0 017.79 5.22l4.1 9.78h18.11a1.85 1.85 0 011.87 1.87z" />
+  </svg>`;
+}

lib/kuma/utils/get-local-string.js

@@ -18,7 +18,7 @@ function getLocalString(strings, key) {
     return key;
   }
 
-  let lang = this.env.locale;
+  let lang = this.env.targetLocale;
   if (!(lang in strings[key])) {
     lang = 'en-US';
   }

lib/kuma/utils/local-string.js

@@ -6,8 +6,8 @@
  * Return the one which matches the current locale.
  */
 function localString(strings) {
-  let lang = this.env.locale; // TODO: this clearly shouldn't work, needs replacement
-  if (!(lang in strings)) lang = 'en-US';
+  let lang = this.env.targetLocale;
+  if (!strings[lang]) lang = 'en-US';
   return strings[lang];
 }