Custom JS for displaying emoji before page names that have a given prefix

.js

// =============================================================================
// v0.0.1 2022_0220_0749 by Ben Jaffe
// The following custom JS allows you to put an emoji before any page with a given prefix
// You can define as many customizations as you want.
//   title (optional): makes the generated css prettier, but you won't see it anyway
//   prefix (required): the prefix it matches against
//   prefixChar (required): it must be a single character/emoji
//   color (optional): will change the color of the matched text
// =============================================================================
const customizations = [
  {
    title: 'Seedlings',
    prefix: 'S: ',
    prefixChar: '🌱',
    color: '#4f9d03',
  },
  {
    title: 'Projects',
    prefix: 'P: ',
    prefixChar: '📓',
    color: '#94c',
  },
  // ...add more here
];

// The code below applies the CSS above customizations //
const makePrefixCSS = (title, prefix, prefixEscaped, emoji, color) => `
/* ${title} */
.page-reference[data-ref^='${prefix}'] .page-ref,
.page-ref[data-ref^='${prefixEscaped}'],
.recent-item[data-ref^='${prefixEscaped}'] a,
.title[data-ref^='${prefixEscaped}'] {
  ${color ? `color: ${color} !important;` : ''}
  font-weight: 500;
}
.recent-item[data-ref^='${prefixEscaped}'] {
  position: relative;
}
.recent-item[data-ref^='${prefixEscaped}'] .page-icon {
  visibility: hidden;
}

.page-reference[data-ref^='${prefix}'] .page-ref:before,
.page-ref[data-ref^='${prefixEscaped}']:before,
.recent-item[data-ref^='${prefixEscaped}']:before,
.title[data-ref^='${prefixEscaped}']:before {
  content: '${emoji}';
  margin-right: 2px;
}
.recent-item[data-ref^='${prefixEscaped}']:before {
  position: absolute;
  left: 20px;
  top: 3px;
}
`;
const style = document.createElement('style');
style.innerHTML = customizations
  .map(({title, prefix, prefixChar, color}) => {
    const prefixEscaped = prefix
      .replace(/[\[\:\\\*\?\"\<\>\|\]\+\%\#]/g, '_') // imitating the `page-name-sanity` fn
      .toLowerCase();
    return makePrefixCSS(title, prefix, prefixEscaped, prefixChar, color);
  })
  .join('\n\n');
document.head.appendChild(style);
// End CSS customization code //