Adopt Prettier (code formatting)

.prettierignore

@@ -1,7 +1,16 @@
-*.html
-venv
-.venv
+# Irrelevant files ignored for performance reasons.
+*.min.js
+**/lib/
+**/vendor/
+_build
 .git
+.mypy_cache
+.venv
+coverage/
 media
 node_modules
+public/
 static
+venv
+# Files which contain incompatible syntax.
+*.html

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "quoteProps": "consistent",
+  "singleQuote": true,
+  "trailingComma": "all"
+}

Makefile

@@ -10,11 +10,13 @@ test-coverage:
 format:
 	poetry run isort apps
 	poetry run black apps
+	yarn format
 
 lint:
 	poetry run flake8 apps
 	poetry run isort --check-only --diff apps
 	poetry run black --check --diff apps
+	yarn lint
 
 frontend:
 	yarn

README.md

@@ -3,31 +3,32 @@
 Guide is a website to help content editors, moderators, administrators, and other users learn how to user the Wagtail content management system (CMS).
 
 The Wagtail guide will ultimately include:
-- Tutorials
-- How-to articles
-- Reference materials
-- Walkthroughs and visual learning materials
+
+-   Tutorials
+-   How-to articles
+-   Reference materials
+-   Walkthroughs and visual learning materials
 
 You can learn more about the documentation system [here](https://documentation.divio.com/).
 
 # Table of Contents
 
-- [Installation](#installation)
-- [Gitpod](#gitpod)
-- [Contributing](#contributing)
-- [Other Notes](#other-notes)
+-   [Installation](#installation)
+-   [Gitpod](#gitpod)
+-   [Contributing](#contributing)
+-   [Other Notes](#other-notes)
 
 # Installation
 
 We assume that you have basic knowledge of Node/Yarn/Webpack and Python/Django/Wagtail in these instructions. We recommend you develop Wagtail Guide locally on your machine using venv.
 
 #### Dependencies
 
-- Python >= 3.9
-- Poetry
-- Git
-- Node 16.*
-- [Yarn](https://yarnpkg.com/)
+-   Python >= 3.9
+-   Poetry
+-   Git
+-   Node 16.\*
+-   [Yarn](https://yarnpkg.com/)
 
 ### Setting up Wagtail guide in a virtual environment
 
@@ -68,15 +69,20 @@ With Gitpod you can deploy a ready-to-code Wagtail Guide development environment
 
 Steps:
 
-1. Click the ``Open in Gitpod`` button.
+1. Click the `Open in Gitpod` button.
 2. Relax: a development environment with an active Wagtail Guide site will be created for you.
 3. Login at `/admin/` with username `admin` and password `changeme`
 
-
 # Contributing
 
 If you're a Python or Django developer, fork the repo and join us. You'll find answers to many common new contributor questions in our [contributing guidelines](https://docs.wagtail.org/en/stable/contributing/index.html).
 
+## Development
+
+-   Run formatting (Black Prettier) `make format`
+-   Run linting (Flake8, isort, Black, Prettier) `make lint`
+-   Run tests `make test`
+
 # Other Notes
 
 ## Google Summer of Code
@@ -85,13 +91,12 @@ This project is one of three [Wagtail](https://wagtail.org/) projects being spon
 
 ### Contributor
 
-- [Hitansh Shah](https://github.com/Hitansh-Shah)
+-   [Hitansh Shah](https://github.com/Hitansh-Shah)
 
 ### Mentors
 
-- [Thibaud Colas](https://github.com/thibaudcolas)
-- [Coen van der Kamp](https://github.com/allcaps)
-- [Meagen Voss](https://github.com/vossisboss)
-
+-   [Thibaud Colas](https://github.com/thibaudcolas)
+-   [Coen van der Kamp](https://github.com/allcaps)
+-   [Meagen Voss](https://github.com/vossisboss)
 
 You can learn more about our Google Summer of Code project in [Google Summer of Code: Wagtail Editor Guide](https://wagtail.org/blog/google-summer-of-code-wagtail-editor-guide/), [Wagtail CMS projects for Google Summer of Code 2022](https://wagtail.org/blog/wagtail-cms-projects-for-google-summer-of-code-2022/) or on our [wiki page](https://github.com/wagtail/wagtail/wiki/Google-Summer-of-Code-2022).

apps/frontend/static_src/js/feedback/index.js

@@ -1,68 +1,68 @@
-import { Tooltip } from "bootstrap";
+import { Tooltip } from 'bootstrap';
 // Function to fetch cookie according to django docs
 // https://docs.djangoproject.com/en/4.1/howto/csrf/#acquiring-the-token-if-csrf-use-sessions-and-csrf-cookie-httponly-are-false
 function getCookie(name) {
     let cookieValue = null;
-    if (document.cookie && document.cookie !== "") {
-        const cookies = document.cookie.split(";");
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
         for (let i = 0; i < cookies.length; i++) {
             const cookie = cookies[i].trim();
             // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === name + "=") {
+            if (cookie.substring(0, name.length + 1) === name + '=') {
                 cookieValue = decodeURIComponent(
-                    cookie.substring(name.length + 1)
+                    cookie.substring(name.length + 1),
                 );
                 break;
             }
         }
     }
     return cookieValue;
 }
-const csrftoken = getCookie("csrftoken");
+const csrftoken = getCookie('csrftoken');
 
 export const handleFeedback = () => {
     //  Code to enable tooltip according to
     //  https://getbootstrap.com/docs/5.2/components/tooltips/#enable-tooltips
     const tooltipTriggerList = document.querySelectorAll(
-        '[data-bs-toggle="tooltip"]'
+        '[data-bs-toggle="tooltip"]',
     );
     const tooltipList = [...tooltipTriggerList].map(
-        (tooltipTriggerEl) => new Tooltip(tooltipTriggerEl)
+        (tooltipTriggerEl) => new Tooltip(tooltipTriggerEl),
     );
 
-    const happyButton = document.querySelector("[data-happy-button]");
-    const unhappyButton = document.querySelector("[data-unhappy-button]");
+    const happyButton = document.querySelector('[data-happy-button]');
+    const unhappyButton = document.querySelector('[data-unhappy-button]');
     const feedbackContainer = document.querySelector(
-        "[data-feedback-container]"
+        '[data-feedback-container]',
     );
     const additionalFeedbackContainer = document.querySelector(
-        "[data-additional-feedback-container]"
+        '[data-additional-feedback-container]',
     );
-    const submitButton = document.querySelector("[data-submit-button]");
-    const feedbackText = document.querySelector("[data-feedback-text]");
+    const submitButton = document.querySelector('[data-submit-button]');
+    const feedbackText = document.querySelector('[data-feedback-text]');
 
     let feedbackPk = null;
 
     const post_feedback = async (feedback) => {
         try {
             const res = await fetch(window.location.pathname, {
-                method: "POST",
+                method: 'POST',
                 body: JSON.stringify({
                     feedback,
                 }),
                 headers: {
-                    "X-CSRFToken": csrftoken,
-                    "Content-type": "application/json; charset=UTF-8",
+                    'X-CSRFToken': csrftoken,
+                    'Content-type': 'application/json; charset=UTF-8',
                 },
             });
             const data = await res.json();
             tooltipList.forEach((tooltip) => {
                 tooltip.dispose();
             });
-            feedbackContainer.innerHTML = "Thanks for your feedback!";
-            if (feedback == "unhappy") {
-                feedbackPk = data["pk"];
-                additionalFeedbackContainer.classList.add("active");
+            feedbackContainer.innerHTML = 'Thanks for your feedback!';
+            if (feedback == 'unhappy') {
+                feedbackPk = data['pk'];
+                additionalFeedbackContainer.classList.add('active');
             }
         } catch (err) {
             console.log(err);
@@ -72,30 +72,30 @@ export const handleFeedback = () => {
     const update_feedback = async (pk) => {
         try {
             await fetch(window.location.pathname, {
-                method: "POST",
+                method: 'POST',
                 body: JSON.stringify({
                     pk,
                     feedback_text: feedbackText.value,
                 }),
                 headers: {
-                    "X-CSRFToken": csrftoken,
-                    "Content-type": "application/json; charset=UTF-8",
+                    'X-CSRFToken': csrftoken,
+                    'Content-type': 'application/json; charset=UTF-8',
                 },
             });
-            additionalFeedbackContainer.innerHTML = "";
+            additionalFeedbackContainer.innerHTML = '';
         } catch (err) {
             console.log(err);
         }
     };
     if (happyButton) {
-        happyButton.addEventListener("click", () => post_feedback("happy"));
+        happyButton.addEventListener('click', () => post_feedback('happy'));
     }
     if (unhappyButton) {
-        unhappyButton.addEventListener("click", () => post_feedback("unhappy"));
+        unhappyButton.addEventListener('click', () => post_feedback('unhappy'));
     }
     if (submitButton) {
-        submitButton.addEventListener("click", () =>
-            update_feedback(feedbackPk)
+        submitButton.addEventListener('click', () =>
+            update_feedback(feedbackPk),
         );
     }
 };

apps/frontend/static_src/js/main.js

@@ -1,22 +1,22 @@
-import { Dropdown, Tooltip } from "bootstrap";
-import { initSectionLink } from "./section-link";
-import { handleFeedback } from "./feedback";
-import debounce from "lodash.debounce";
-import MobileMenu from "./mobile-menu";
+import { Dropdown, Tooltip } from 'bootstrap';
+import { initSectionLink } from './section-link';
+import { handleFeedback } from './feedback';
+import debounce from 'lodash.debounce';
+import MobileMenu from './mobile-menu';
 
 initSectionLink();
 handleFeedback();
 
-const searchInput = document.querySelector("[data-search-input]");
-const searchIconButton = document.querySelector("[data-search-icon-button]");
+const searchInput = document.querySelector('[data-search-input]');
+const searchIconButton = document.querySelector('[data-search-icon-button]');
 
 const onSearchInputChange = async (event) => {
     const query = event.target.value;
     try {
         const res = await fetch(
             `${window.location.origin}/search_json/?${new URLSearchParams({
                 query,
-            }).toString()}`
+            }).toString()}`,
         );
         const data = await res.json();
         injectResultsInHTML(data);
@@ -25,58 +25,58 @@ const onSearchInputChange = async (event) => {
         window.alert(`Error: ${err}`);
     }
 };
-searchInput.addEventListener("keyup", debounce(onSearchInputChange, 350));
+searchInput.addEventListener('keyup', debounce(onSearchInputChange, 350));
 
 const removeExistingChildren = (parent) => {
-    parent.innerHTML = "";
+    parent.innerHTML = '';
 };
-searchIconButton.addEventListener("click", () => {
-    const resultsDiv = document.querySelector("[data-results]");
+searchIconButton.addEventListener('click', () => {
+    const resultsDiv = document.querySelector('[data-results]');
     const resultsCountContainer = document.querySelector(
-        "[data-results-count-container]"
+        '[data-results-count-container]',
     );
 
     removeExistingChildren(resultsDiv);
     removeExistingChildren(resultsCountContainer);
 });
 
 const injectResultsInHTML = (results) => {
-    const resultsDiv = document.querySelector("[data-results]");
+    const resultsDiv = document.querySelector('[data-results]');
     const resultsCountContainer = document.querySelector(
-        "[data-results-count-container]"
+        '[data-results-count-container]',
     );
 
     removeExistingChildren(resultsDiv);
     removeExistingChildren(resultsCountContainer);
 
-    const resultsCountDiv = document.createElement("div");
+    const resultsCountDiv = document.createElement('div');
     resultsCountDiv.innerText = `${results.length} ${
-        results.length == 1 ? "result" : "results"
+        results.length == 1 ? 'result' : 'results'
     } found`;
-    resultsCountDiv.classList.add("m-3", "mx-5");
+    resultsCountDiv.classList.add('m-3', 'mx-5');
     resultsCountContainer.appendChild(resultsCountDiv);
 
     for (const result of results) {
-        const resultDiv = document.createElement("div");
-        const resultLink = document.createElement("a");
-        const resultDescription = document.createElement("div");
-        const resultParentSection = document.createElement("div");
+        const resultDiv = document.createElement('div');
+        const resultLink = document.createElement('a');
+        const resultDescription = document.createElement('div');
+        const resultParentSection = document.createElement('div');
         resultLink.innerText = result.title;
         resultDescription.innerText = result.search_description;
         resultParentSection.innerText = result.parent_section;
         resultLink.href = result.full_url;
         resultDiv.appendChild(resultParentSection);
         resultDiv.appendChild(resultLink);
         resultDiv.appendChild(resultDescription);
-        resultParentSection.classList.add("py-2");
+        resultParentSection.classList.add('py-2');
         resultLink.classList.add(
-            "fw-bold",
-            "fs-5",
-            "text-decoration-none",
-            "text-dark"
+            'fw-bold',
+            'fs-5',
+            'text-decoration-none',
+            'text-dark',
         );
-        resultDescription.classList.add("text-muted", "py-2");
-        resultDiv.classList.add("mx-5", "py-4", "border-top", "border-bottom");
+        resultDescription.classList.add('text-muted', 'py-2');
+        resultDiv.classList.add('mx-5', 'py-4', 'border-top', 'border-bottom');
         resultsDiv.appendChild(resultDiv);
     }
 };
@@ -86,8 +86,8 @@ function initComponent(ComponentClass) {
     items.forEach((item) => new ComponentClass(item));
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener('DOMContentLoaded', () => {
     // Remove no-js class if JS is enabled
-    document.documentElement.classList.remove("no-js");
+    document.documentElement.classList.remove('no-js');
     initComponent(MobileMenu);
 });