redo main/register page

public/resources/animate.css-main/docsSource/compileAnimationList.js

@@ -0,0 +1,66 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Get and categorize all the animation names and compile
+ * to HTML lists
+ * @param {string} dir - directory containing the css file
+ * @param {string} file - css file name
+ */
+
+function compileAnimationlist(dir = '../source', file = 'animate.css') {
+  const filePath = path.join(__dirname, dir, file);
+  const content = fs.readFileSync(filePath, 'utf8');
+  const globalRegex = /\/(.*)\w/g;
+  const itemRegex = /(\/)(.*)(\.)/;
+
+  const rawList = content.match(globalRegex);
+  let currentGroup;
+  let list = {};
+
+  rawList.forEach((i) => {
+    const item = i.match(itemRegex);
+
+    if (item == null) {
+      const title = i.replace('/* ', '');
+      currentGroup = title;
+      list[title] = [];
+
+      return currentGroup;
+    }
+
+    return list[currentGroup].push(item[2]);
+  }, {});
+
+  const itemTemplate = (item) => `
+    <li class="animation-item" data-animation="${item}">
+      <span class="animation-item--title">${item}</span>
+      <button class="copy-icon" type="button">
+        <span class="tooltip">Copy class name to clipboard</span>
+      </button>
+    </li>`;
+
+  const listTemplate = (title, items) => {
+    const parsedTitle = title.toLowerCase().replace(' ', '_');
+
+    return `
+      <section class="${parsedTitle}" id="${parsedTitle}">
+        <h3 class="animation-title">${title}</h3>
+        <ul class="animation-group">${items.join('\n')}</ul>
+      </section>
+    `;
+  };
+
+  const compile = (list) => {
+    const titles = Object.keys(list);
+
+    return titles.map((title) => {
+      const items = list[title].map((item) => itemTemplate(item));
+      return listTemplate(title, items);
+    });
+  };
+
+  return compile(list).join('\n');
+}
+
+module.exports = compileAnimationlist;