Run Prettier on Markdown files

alphagov · Oct 3, 2023 · 5622eec · 5622eec
1 parent 5a66d21
commit 5622eec
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 145 deletions.
diff --git a/source/configure-components-with-javascript/index.html.md.erb b/source/configure-components-with-javascript/index.html.md.erb
@@ -35,11 +35,13 @@ This example shows the opening tag of a character count component with some conf
 - two plural forms for when users are under the specified limit of characters (namespaced configuration + object value)
 
 ```html
-<div data-module="govuk-character-count"
+<div
+  data-module="govuk-character-count"
   data-maxlength="500"
   data-i18n.characters-at-limit="No characters left"
   data-i18n.characters-under-limit.other="%{count} characters to go"
-  data-i18n.characters-under-limit.one="%{count} character to go">
+  data-i18n.characters-under-limit.one="%{count} character to go"
+>
 ```
 
 If your configuration contains [quotes or other reserved HTML characters](https://developer.mozilla.org/en-US/docs/Glossary/Entity#reserved_characters), you'll need to escape those characters.
@@ -65,12 +67,17 @@ Some configuration options might accept object values or be grouped under a name
 
 ```javascript
 new CharacterCount($element, {
-  maxlength: 500, // Non namespaced
-  i18n: { // i18n namespace
-    charactersAtLimit: "No characters left",
-    charactersUnderLimit: { // Object value
-      other: "%{count} characters to go",
-      one: "%{count} character to go"
+  // Non namespaced
+  maxlength: 500,
+
+  // i18n namespace
+  i18n: {
+    charactersAtLimit: 'No characters left',
+
+    // Object value
+    charactersUnderLimit: {
+      other: '%{count} characters to go',
+      one: '%{count} character to go'
     }
   }
 })
@@ -85,10 +92,13 @@ You can pass configuration for components when initialising GOV.UK Frontend usin
 ```javascript
 initAll({
   characterCount: {
-    maxlength: 500, // Non namespaced
-    i18n: { // i18n namespace
-      charactersAtLimit: "No characters left"
+    // Non namespaced
+    maxlength: 500,
+
+    // i18n namespace
+    i18n: {
+      charactersAtLimit: 'No characters left'
     }
-  },
+  }
 })
 ```
diff --git a/source/get-started/index.html.md.erb b/source/get-started/index.html.md.erb
@@ -31,18 +31,18 @@ Paste the HTML into a page or template in your application.
 
 1. Add the following to the main Sass file in your project, so your Sass compiler adds all of GOV.UK Frontend's styles to your CSS file.
 
-    ```scss
-    @import "node_modules/govuk-frontend/dist/govuk/all";
-    ```
+   ```scss
+   @import "node_modules/govuk-frontend/dist/govuk/all";
+   ```
 
 2. Add your CSS file to your page layout if you need to. For example:
 
-    ```html
-      <head>
-        ...
-        <link rel="stylesheet" href="<YOUR-STYLESHEETS-FOLDER>/<YOUR-CSS-FILE>.css">
-      </head>
-    ```
+   ```html
+   <head>
+     <!-- // ... -->
+     <link rel="stylesheet" href="<YOUR-STYLESHEETS-FOLDER>/<YOUR-CSS-FILE>.css">
+   </head>
+   ```
 
 3. Run your application and check that the accordion displays correctly.
 
@@ -55,8 +55,9 @@ There are also different ways you can [import GOV.UK Frontend's CSS](/importing-
 Your component will not use the right font or images until you've added GOV.UK Frontend's assets to your application.
 
 1. Copy the following 2 folders:
-  - `/node_modules/govuk-frontend/dist/govuk/assets/images` folder to `<YOUR-APP>/assets/images`
-  - `/node_modules/govuk-frontend/dist/govuk/assets/fonts` folder to `<YOUR-APP>/assets/fonts`
+
+   - `/node_modules/govuk-frontend/dist/govuk/assets/images` folder to `<YOUR-APP>/assets/images`
+   - `/node_modules/govuk-frontend/dist/govuk/assets/fonts` folder to `<YOUR-APP>/assets/fonts`
 
 2. Run your application, then use [the Fonts tab in Firefox Page Inspector](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts#The_Fonts_tab) to check the accordion is using the GDS Transport font.
 
@@ -66,24 +67,24 @@ In your live application, we recommend [using an automated task or your build pi
 
 1. Add the following to the top of the `<body class="govuk-template__body">` section of your page template:
 
-    ```html
-    <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
-    ```
+   ```html
+   <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
+   ```
 
 2. Copy the `/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js` file into your application.
 
 3. Import the file before the closing `</body>` tag of your page template, then run the `initAll` function to initialise all the components. For example:
 
-    ```html
-    <body class="govuk-template__body">
-      ...
-      <script type="module" src="<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js"></script>
-      <script type="module">
-        import { initAll } from '<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js'
-        initAll()
-      </script>
-    </body>
-    ```
+   ```html
+   <body class="govuk-template__body">
+     ...
+     <script type="module" src="<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js"></script>
+     <script type="module">
+       import { initAll } from '<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js'
+       initAll()
+     </script>
+   </body>
+   ```
 
 4. Run your application and check it works the same way as the Design System accordion example, by selecting the buttons and checking the accordion shows and hides sections.
 

diff --git a/source/importing-css-assets-and-javascript/index.html.md.erb b/source/importing-css-assets-and-javascript/index.html.md.erb
@@ -35,6 +35,7 @@ For example, add the following to your Sass file to import the CSS you need for
 @import "node_modules/govuk-frontend/dist/govuk/utilities/all";
 @import "node_modules/govuk-frontend/dist/govuk/overrides/all";
 ```
+
 You can remove lines that import parts of the CSS you do not need.
 
 [Read more about the different parts of GOV.UK Frontend’s CSS](https://github.com/alphagov/govuk-frontend/tree/main/packages/govuk-frontend/src).
@@ -214,13 +215,13 @@ If you update a page with new markup, for example a modal dialogue box, you can
 For example:
 
 ```html
-  <script type="module">
-    import { initAll } from '<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js'
-    const $modal = document.querySelector('.modal')
-    initAll({
-      scope: $modal
-    })
-  </script>
+<script type="module">
+  import { initAll } from '<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js'
+  const $modal = document.querySelector('.modal')
+  initAll({
+    scope: $modal
+  })
+</script>
 ```
 
 ### If your JavaScript is not working properly

diff --git a/source/install-using-precompiled-files/index.html.md.erb b/source/install-using-precompiled-files/index.html.md.erb
@@ -2,7 +2,7 @@
 title: Install using precompiled files
 weight: 11
 old_paths:
-- /installing-from-dist/index.html
+  - /installing-from-dist/index.html
 ---
 
 # Install using precompiled files
@@ -33,26 +33,25 @@ You’ll not be able to:
 
 1. Create a page in your project using the following HTML (in your live application, you should use the [Design System page template](https://design-system.service.gov.uk/styles/page-template/) instead):
 
-    ```html
-    <!DOCTYPE html>
-    <html lang="en" class="govuk-template">
-      <head>
-        <title>Example - GOV.UK</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-        <link rel="stylesheet" href="/stylesheets/govuk-frontend-<VERSION-NUMBER>.min.css">
-      </head>
-      <body class="govuk-template__body">
-        <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
-        <!-- component HTML -->
-        <script type="module" src="/javascripts/govuk-frontend-<VERSION-NUMBER>.min.js"></script>
-        <script type="module">
-          import { initAll } from '/javascripts/govuk-frontend-<VERSION-NUMBER>.min.js'
-          initAll()
-        </script>
-      </body>
-    </html>
-    ```
-
+   ```html
+   <!DOCTYPE html>
+   <html lang="en" class="govuk-template">
+     <head>
+       <title>Example - GOV.UK</title>
+       <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+       <link rel="stylesheet" href="/stylesheets/govuk-frontend-<VERSION-NUMBER>.min.css">
+     </head>
+     <body class="govuk-template__body">
+       <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
+       <!-- component HTML -->
+       <script type="module" src="/javascripts/govuk-frontend-<VERSION-NUMBER>.min.js"></script>
+       <script type="module">
+         import { initAll } from '/javascripts/govuk-frontend-<VERSION-NUMBER>.min.js'
+         initAll()
+       </script>
+     </body>
+   </html>
+   ```
 
 2. Replace `<VERSION-NUMBER>` so the 3 filenames match the files you [copied from GOV.UK Frontend's GitHub repo](#copy-the-files).
 

diff --git a/source/installing-with-npm/index.html.md.erb b/source/installing-with-npm/index.html.md.erb
@@ -9,21 +9,21 @@ weight: 10
 
 1. [Install Node.js](https://nodejs.org/en/).
 
-    GOV.UK Frontend requires Node.js version 12.17.0 or later to support ECMAScript modules. Where possible, we recommend you install the latest Long Term Support (LTS) version.
+   GOV.UK Frontend requires Node.js version 12.17.0 or later to support ECMAScript modules. Where possible, we recommend you install the latest Long Term Support (LTS) version.
 
 2. `cd` to the root of your project and check if you have a [`package.json` file](https://docs.npmjs.com/files/package.json). If you do not have the file, create it by running:
 
-    ```
-    npm init
-    ```
+   ```
+   npm init
+   ```
 
 3. Install [Dart Sass](https://www.npmjs.com/package/sass) - version 1.0.0 or higher.
 
-    If you're using Dart Sass 1.33.0 or greater, you may see deprecation warnings when compiling your Sass. You can [silence deprecation warnings caused by dependencies](/importing-css-assets-and-javascript/#silence-deprecation-warnings-from-dependencies-in-dart-sass) if required.
+   If you're using Dart Sass 1.33.0 or greater, you may see deprecation warnings when compiling your Sass. You can [silence deprecation warnings caused by dependencies](/importing-css-assets-and-javascript/#silence-deprecation-warnings-from-dependencies-in-dart-sass) if required.
 
-    Do not use either LibSass or Ruby Sass, which are deprecated, for new projects.
+   Do not use either LibSass or Ruby Sass, which are deprecated, for new projects.
 
-    Although GOV.UK Frontend currently supports LibSass (version 3.3.0 and above) and Ruby Sass (version 3.4.0 and above), we will remove support in future. If you're using either of these Sass compilers, you should [migrate to Dart Sass](https://sass-lang.com/blog/libsass-is-deprecated#how-do-i-migrate) as soon as you reasonably can.
+   Although GOV.UK Frontend currently supports LibSass (version 3.3.0 and above) and Ruby Sass (version 3.4.0 and above), we will remove support in future. If you're using either of these Sass compilers, you should [migrate to Dart Sass](https://sass-lang.com/blog/libsass-is-deprecated#how-do-i-migrate) as soon as you reasonably can.
 
 You can also [install Nunjucks v3.0.0 or later](https://www.npmjs.com/package/nunjucks) if you want to [use GOV.UK Frontend's Nunjucks macros](/use-nunjucks/).