feat: macro SeeCompatTable

src/plugins/remark/macros/macros/SeeCompatTable.ts

@@ -0,0 +1,23 @@
+import type { Html } from 'mdast';
+import { SKIP } from 'unist-util-visit';
+
+import type { MacroFunction } from '../types.ts';
+
+const BODY =
+  '<strong>Це <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#experimental">експериментальна технологія</a></strong><br />Ретельно перевірте <a href="#sumisnist-iz-brauzeramy">таблицю сумісності з браузерами</a>, перш ніж використовувати її в роботі.';
+const TITLE = 'Експериментальне';
+
+function macro(): Html {
+  return {
+    type: 'html',
+    value: `<div class="notecard experimental"><h4>${TITLE}</h4><p>${BODY}</p></div>`,
+  };
+}
+
+const SeeCompatTable: MacroFunction = (_node, index, parent) => {
+  const replacement = macro();
+  parent.children[index] = replacement;
+  return [SKIP, index];
+};
+
+export default SeeCompatTable;

src/plugins/remark/macros/macros/index.ts

@@ -10,6 +10,7 @@ import HTTPMethod from './HTTPMethod.ts';
 import ListSubpages from './ListSubpages.ts';
 import ListSubpagesForSidebar from './ListSubpagesForSidebar.ts';
 import RFC from './RFC.ts';
+import SeeCompatTable from './SeeCompatTable.ts';
 import cssxref from './cssxref.ts';
 import deprecated_inline from './deprecated_inline.ts';
 import domxref from './domxref.ts';
@@ -34,6 +35,7 @@ const MACROS: Record<string, MacroFunction> = {
   listsubpages: ListSubpages,
   listsubpagesforsidebar: ListSubpagesForSidebar,
   rfc: RFC,
+  seecompattable: SeeCompatTable,
 };
 
 export default MACROS;

src/style.scss

@@ -224,3 +224,20 @@ blockquote {
     mask-image: url('../assets/deprecated.svg');
   }
 }
+
+.notecard {
+  --note-background: var(--background-information);
+  --note-theme: var(--icon-information);
+  background-color: var(--color-ui-note);
+  border: 1px solid var(--color-ui-note-border);
+  border-left: 4px solid var(--color-ui-note-border);
+  margin: 1rem 0;
+  padding: 1rem 1rem 1rem 3rem;
+  position: relative;
+}
+
+.notecard.notecard,
+.notecard.notecard li,
+.notecard.notecard p {
+  color: var(--color-ui-typo);
+}