Document specifying beautifier config file, use Docusaurus tabs for code

docs/options-for-beautifiers.md

@@ -36,3 +36,17 @@ If the beautifier's configuration file is found then Unibeautify's own configura
 This is useful when Unibeautify does not support an option and you want more control over a specific beautifier.
 
 > Only certain beautifiers support the `prefer_beautifier_config` option. See the `Advanced` section on a beautifier's page to see what beautifier options are supported. For example, see the [PHP-CS-Fixer beautifier](/docs/beautifier-php-cs-fixer.html#advanced).
+
+### Config File Path
+You can also specify the absolute path to the beautifier's config file by putting a string in the `prefer_beautifier_config` option. It will otherwise look in the directory of the file being beautified, and if it doesn't find it there, will go to the parent directory.
+
+```yaml
+---
+PHP: # Language
+  beautifiers: # Enable beautifiers
+  - PHP-CS-Fixer
+  PHP-CS-Fixer: # <------------------------ Beautifier options start here
+    prefer_beautifier_config: "path/to/beautifier/config/file"
+    PHP-CS-Fixer: # Executable options
+      path: "/absolute/path/to/php-cs-fixer"
+```

scripts/generate-docs/OptionsDoc.ts

@@ -195,49 +195,15 @@ export default class OptionsDoc extends Doc {
           ),
         ).then(beautified => {
           builder.header("Examples", 2);
-          builder.append(
-            '<div class="input-group languages-select"><div class="input-group-prepend">',
-          );
-          builder.append(
-            '<label class="input-group-text" for="languages-select">Select Language:</label>',
-          );
-          builder.append(
-            '</div><select class="custom-select" id="languages-select">',
-          );
-          let defaultDisplay: string;
-          let isDefault: boolean = true;
-          this.languages.forEach(language => {
-            const example = examplesForLanguages[language.name];
-            builder.append(
-              `<option ${
-                example && isDefault ? 'selected="selected"' : ""
-              } data-text="${
-                language.name
-              }" value="${language.name
-                .toLowerCase()
-                .replace(/ /g, "")}">${language.name +
-                (example ? " *" : "")}</option>`,
-            );
-            if (example && isDefault) {
-              defaultDisplay = language.name;
-              isDefault = false;
-            }
-          });
-          builder.append(`</select><div class="select__arrow"></div></div>`);
           builder.append("Invisible characters are shown with the following symbols:\n");
           builder.append(Object.keys(invisiblesMap).map(invisibleName => {
             const visibleChar = invisiblesMap[invisibleName];
             return (`<kbd>${optionKeyToTitle(invisibleName)}</kbd> = <kbd>${visibleChar}</kbd>`);
           }).join('; ') + '.');
+          builder.append('<!--DOCUSAURUS_CODE_TABS-->',);
           this.languages.forEach((language, languageIndex) => {
             const example = examplesForLanguages[language.name];
-            builder.append(
-              `<div class="exampleCode${
-                language.name === defaultDisplay ? "" : " hidden"
-              }" id="example-${language.name
-                .toLowerCase()
-                .replace(/ /g, "")}">\n`,
-            );
+            builder.append(`<!--${language.name}-->`);
             if (example) {
               builder.editButton(
                 `Edit ${language.name} Example`,
@@ -292,7 +258,6 @@ export default class OptionsDoc extends Doc {
                   builder.append("");
                 }
               });
-
               if (
                 this.exampleValues.length > 1 &&
                 !beautifiedExamplesAreDifferent
@@ -308,8 +273,8 @@ export default class OptionsDoc extends Doc {
               );
               builder.append("No example found. Please submit a Pull Request!");
             }
-            builder.append(`</div>`);
           });
+          builder.append('<!--END_DOCUSAURUS_CODE_TABS-->');
         });
       })
       .then(() => builder);

website/static/js/selectList.js

@@ -1,17 +1,18 @@
 let previousSelectedLanguage;
 
 window.onload = function() {
-  const langSelectedElement = document.getElementById("languages-select");
+  const langSelectedElement = document.querySelectorAll('.nav-link');
 
   if (langSelectedElement.length == 0) return;
 
   loadSelected();
-
-  langSelectedElement.onchange = function onSelectionChange() {
-    const languageName = getSelectedLanguage();
-    history.pushState({ language: languageName }, null, `?language=${languageName}`);
-    updateCodeExample(languageName);
-  };
+
+  langSelectedElement.forEach(function(tab) {
+    tab.addEventListener('click', function(e) {
+      const languageName = e.target.innerHTML;
+      history.pushState({ language: languageName }, null, `?language=${languageName}`);
+    })
+  });
 };
 
 function loadSelected() {
@@ -34,6 +35,7 @@ window.onpopstate = function onPageChange(event) {
 
 function updateCodeExample(languageName) {
   languageName = fixLanguage(languageName);
+  element = [...document.querySelectorAll(".nav-tabs .nav-link")].filter(text => text.textContent === languageName);
   if (!languageName) {
     return;
   }