New website design

.unibeautifyrc.yml

@@ -17,6 +17,10 @@ TypeScript:
   quotes: "double"
   space_after_anon_function: false
   wrap_line_length: 80
+JavaScript:
+  beautifiers: ["ESLint"]
+  ESLint:
+    prefer_beautifier_config: true
 CSS:
   indent_char: " "
   indent_size: 2

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "prettier.trailingComma": "all"
+    "prettier.trailingComma": "all",
+    "prettier.eslintIntegration": true,
+    "prettier.stylelintIntegration": true
 }

docs/credits.md

@@ -0,0 +1,11 @@
+---
+id: credits
+title: Credits
+---
+
+**From the community for the community**
+
+* Logo by [Marvin Heilemann](https://github.com/muuvmuuv)
+* ["Planet"](https://thenounproject.com/search/?q=universe&i=823017) icon by Royyan Wijaya from [the Noun Project](https://thenounproject.com/)
+* Hero image by [Daniel Leone](https://unsplash.com/photos/g30P1zcOzXo)
+* Icons by [Kavoon](https://pixelbuddha.net/)

scripts/generate-docs/OptionsDoc.ts

@@ -77,7 +77,11 @@ export default class OptionsDoc extends Doc {
       url: "https://img.shields.io/npm/v/unibeautify.svg",
       href: "https://www.npmjs.com/package/unibeautify",
     });
-    builder.append(`**Available since version**: ${this.option.since} (**Current:** ${currentUnibeautifyVersionBadge})\n`);
+    builder.append(
+      `**Available since version**: ${
+        this.option.since
+      } (**Current:** ${currentUnibeautifyVersionBadge})\n`,
+    );
     builder.append(`**Type**: \`${this.type}\`\n`);
     builder.append(`**Default**: \`${JSON.stringify(this.option.default)}\`\n`);
     if (this.option.enum) {
@@ -102,9 +106,7 @@ export default class OptionsDoc extends Doc {
       builder.details("<strong>Comparison Table</strong>", builder => {
         this.appendTable(builder);
       });
-      return this.appendExamples(builder).then(() =>
-        builder.build()
-      );
+      return this.appendExamples(builder).then(() => builder.build());
     } else {
       builder.editButton("Add Beautifier", editBeautifiersUrl);
       builder.append("No language or beautifier support!");
@@ -189,8 +191,15 @@ export default class OptionsDoc extends Doc {
           ),
         ).then(beautified => {
           builder.header("Examples", 2);
-          builder.append("<label>Select Language: </label>");
-          builder.append(`<div class="select"><select id="languages-select">`);
+          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 => {
@@ -386,7 +395,9 @@ export default class OptionsDoc extends Doc {
   }
 
   private editExampleButtonUrl(language: Language): string {
-    return `${this.languageEditURL}/samples/${language.name}/${this.optionKey}.txt`;
+    return `${this.languageEditURL}/samples/${language.name}/${
+      this.optionKey
+    }.txt`;
   }
 
   private addExampleButtonUrl(language: Language): string {

website/.eslintrc

@@ -0,0 +1,33 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true,
+        "amd": true
+    },
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "globals": {
+        "$": true,
+        "jQuery": true
+    },
+    "extends": [
+        "eslint:recommended", "plugin:react/recommended"
+    ],
+    "rules": {
+        "indent": [
+            "error",
+            2, {
+                "SwitchCase": 1
+            }
+        ],
+
+        // React specific rules
+        "react/prop-types": [0]
+    }
+}

website/.stylelintrc.json

@@ -0,0 +1,270 @@
+{
+    "plugins": ["./node_modules/stylelint-order"],
+    "extends": "./node_modules/stylelint-config-standard",
+    "rules": {
+        "indentation": 2,
+
+        "order/order": [
+            "custom-properties",
+            "dollar-variables",
+            "declarations",
+            "at-rules", {
+                "type": "at-rule",
+                "name": "include",
+                "parameter": "center"
+            },
+            "less-mixins",
+            "rules"
+        ],
+        "order/properties-order": [
+            {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "content",
+                    "quotes",
+                    "display",
+                    "visibility",
+                    "position",
+                    "z-index",
+                    "top",
+                    "right",
+                    "bottom",
+                    "left"
+                ]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "grid",
+                    "grid-area",
+                    "grid-auto-columns",
+                    "grid-auto-flow",
+                    "grid-auto-rows",
+                    "grid-column",
+                    "grid-column-end",
+                    "grid-column-gap",
+                    "grid-column-start",
+                    "grid-gap",
+                    "grid-row",
+                    "grid-row-end",
+                    "grid-row-gap",
+                    "grid-row-start",
+                    "grid-template",
+                    "grid-template-areas",
+                    "grid-template-columns",
+                    "grid-template-rows",
+                    "flex",
+                    "flex-basis",
+                    "flex-direction",
+                    "flex-flow",
+                    "flex-grow",
+                    "flex-shrink",
+                    "flex-wrap",
+                    "align-content",
+                    "align-items",
+                    "align-self",
+                    "justify-content",
+                    "order"
+                ]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "width",
+                    "min-width",
+                    "max-width",
+                    "height",
+                    "min-height",
+                    "max-height"
+                ]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "margin",
+                    "margin-top",
+                    "margin-right",
+                    "margin-bottom",
+                    "margin-left",
+                    "padding",
+                    "padding-top",
+                    "padding-right",
+                    "padding-bottom",
+                    "padding-left"
+                ]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": ["float", "clear", "overflow", "overflow-x", "overflow-y"]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "columns",
+                    "column-gap",
+                    "column-fill",
+                    "column-rule",
+                    "column-span",
+                    "column-count",
+                    "column-width",
+                    "table-layout",
+                    "empty-cells",
+                    "caption-side",
+                    "border-spacing",
+                    "border-collapse",
+                    "list-style",
+                    "list-style-position",
+                    "list-style-type",
+                    "list-style-image"
+                ]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "transform",
+                    "transform-origin",
+                    "transform-style",
+                    "backface-visibility",
+                    "perspective",
+                    "perspective-origin"
+                ]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": ["transition", "transition-property", "transition-duration", "transition-timing-function", "transition-delay"]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "animation",
+                    "animation-name",
+                    "animation-duration",
+                    "animation-play-state",
+                    "animation-timing-function",
+                    "animation-delay",
+                    "animation-iteration-count",
+                    "animation-direction"
+                ]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "border",
+                    "border-top",
+                    "border-right",
+                    "border-bottom",
+                    "border-left",
+                    "border-width",
+                    "border-top-width",
+                    "border-right-width",
+                    "border-bottom-width",
+                    "border-left-width",
+                    "border-style",
+                    "border-top-style",
+                    "border-right-style",
+                    "border-bottom-style",
+                    "border-left-style",
+                    "border-radius",
+                    "border-top-left-radius",
+                    "border-top-right-radius",
+                    "border-bottom-left-radius",
+                    "border-bottom-right-radius",
+                    "border-color",
+                    "border-top-color",
+                    "border-right-color",
+                    "border-bottom-color",
+                    "border-left-color"
+                ]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "outline",
+                    "outline-color",
+                    "outline-offset",
+                    "outline-style",
+                    "outline-width",
+                    "stroke-width",
+                    "stroke-linecap",
+                    "stroke-dasharray",
+                    "stroke-dashoffset",
+                    "stroke"
+                ]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "opacity",
+                    "background",
+                    "background-color",
+                    "background-image",
+                    "background-repeat",
+                    "background-position",
+                    "background-size",
+                    "box-shadow",
+                    "fill"
+                ]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "color",
+                    "font",
+                    "font-family",
+                    "font-size",
+                    "font-size-adjust",
+                    "font-stretch",
+                    "font-effect",
+                    "font-style",
+                    "font-variant",
+                    "font-weight",
+                    "font-emphasize",
+                    "font-emphasize-position",
+                    "font-emphasize-style",
+                    "letter-spacing",
+                    "line-height",
+                    "list-style",
+                    "word-spacing"
+                ]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "text-align",
+                    "text-align-last",
+                    "text-decoration",
+                    "text-indent",
+                    "text-justify",
+                    "text-overflow",
+                    "text-overflow-ellipsis",
+                    "text-overflow-mode",
+                    "text-rendering",
+                    "text-outline",
+                    "text-shadow",
+                    "text-transform",
+                    "text-wrap",
+                    "word-wrap",
+                    "word-break",
+                    "text-emphasis",
+                    "text-emphasis-color",
+                    "text-emphasis-style",
+                    "text-emphasis-position",
+                    "vertical-align",
+                    "white-space",
+                    "word-spacing",
+                    "hyphens"
+                ]
+            }, {
+                "emptyLineBefore": "always",
+                "properties": [
+                    "src",
+                    "tab-size",
+                    "counter-reset",
+                    "counter-increment",
+                    "resize",
+                    "cursor",
+                    "pointer-events",
+                    "speak",
+                    "user-select",
+                    "nav-index",
+                    "nav-up",
+                    "nav-right",
+                    "nav-down",
+                    "nav-left",
+                    "filter",
+                    "backdrop-filter",
+                    "box-sizing",
+                    "clip",
+                    "zoom"
+                ]
+            }
+        ]
+    }
+}