HDDS-9570. [Website v2] Integrate eslint and run it in github actions

.github/pull_request_template.md

@@ -4,6 +4,7 @@ Provide a one line summary of the changes in the PR **Title** field above.
 It should be in the form of `HDDS-1234. Short summary of the change`.
 
 Please describe your PR in detail:
+
 - What changes are proposed in the PR and why? It would be better if it is written from third person's perspective not just for the reviewer.
 - Provide as much context and rationale for the pull request as possible. It could be copy-pasted from the Jira's description if the Jira is well defined.
 
@@ -17,4 +18,3 @@ Please describe your PR in detail:
 ## How was this patch tested?
 
 Please explain how this patch was tested. In most cases this will just be checking the local preview of the website, but existing CI checks should also pass.
-

.github/resource/sidebar_tips.md

@@ -2,7 +2,7 @@
 
 Every docs directory must have a `README.mdx` file to configure how it is displayed in the documentation sidebar. This file must contain a generated index of pages in the section by adding the following lines:
 
-1. Add `import DocCardList from '@theme/DocCardList';` anywhere in the *README.mdx* file.
+1. Add `import DocCardList from '@theme/DocCardList';` anywhere in the _README.mdx_ file.
 2. Add the `<DocCardList/>` tag at the end of the file.
 
 For more information on documentation sidebar configuration, see the [contributing guide](https://github.com/apache/ozone-site/blob/HDDS-9225-website-v2/CONTRIBUTING.md#documentation-sidebar).

.github/resource/spelling_tips.md

@@ -1,8 +1,8 @@
 # Spelling Check Failed
 
-Spelling can be checked locally by running the script *.github/scripts/spelling.sh*. This requires you to have pnpm's dev dependencies installed on your machine for cspell to work (run `pnpm install --dev`).
+Spelling can be checked locally by running the script _.github/scripts/spelling.sh_. This requires you to have pnpm's dev dependencies installed on your machine for cspell to work (run `pnpm install --dev`).
 
 **If spell check fails for words that are correct but not recognized:**
 
-- Option 1: If the word is relevant for the whole Ozone project, add it to the `words` list in *cspell.yaml* so that it is considered valid.
+- Option 1: If the word is relevant for the whole Ozone project, add it to the `words` list in _cspell.yaml_ so that it is considered valid.
 - Option 2: If the word is only relevant for one specific page, add an [inline directive](https://cspell.org/configuration/document-settings/) as a comment in the markdown front matter of that page only.

.github/workflows/static.yml

@@ -73,7 +73,7 @@ jobs:
       if: ${{ failure() }}
       run: |
         cat ${{ env.resource_dir }}/spelling_tips.md >> $GITHUB_STEP_SUMMARY
-  lint-markdown:
+  lint:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout project
@@ -89,10 +89,8 @@ jobs:
         cache: pnpm
     - name: Install pnpm dependencies
       run: pnpm install --dev
-    - name: Run markdownlint
-      working-directory: ${{ env.script_dir }}
-      run: |
-        ./markdownlint.sh
+    - name: Run lint
+      run: pnpm run lint
   check-sidebar:
     runs-on: ubuntu-latest
     steps:

CONTRIBUTING.md

@@ -7,19 +7,19 @@ This document summarizes the contribution process.
 ## Quick Start
 
 1. Review the main [Ozone contributing guide](https://github.com/apache/ozone/blob/master/CONTRIBUTING.md#contribute-your-modifications). Contributing to the new website follows a similar process with a few differences:
-    - You should fork the [apache/ozone-site](https://github.com/apache/ozone-site) repo instead of the main [apache/ozone](https://github.com/apache/ozone) repo.
-    - You should enable the `ci` workflow on your fork, which will run tests on your changes before submitting a pull request.
-    - Your local branch containing changes for the new website should be based off of the [HDDS-9225-website-v2](https://github.com/apache/ozone-site/tree/HDDS-9225-website-v2) branch.
+   - You should fork the [apache/ozone-site](https://github.com/apache/ozone-site) repo instead of the main [apache/ozone](https://github.com/apache/ozone) repo.
+   - You should enable the `ci` workflow on your fork, which will run tests on your changes before submitting a pull request.
+   - Your local branch containing changes for the new website should be based off of the [HDDS-9225-website-v2](https://github.com/apache/ozone-site/tree/HDDS-9225-website-v2) branch.
 
 2. Use your favorite editor to write markdown content under the [docs/](docs/) and [src/pages/](src/pages/) directories.
-    - A good option is [Visual Studio Code](https://code.visualstudio.com/) with [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) and [cspell](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) plugins, which will automatically detect the website's configuration files and give feedback as you type.
+   - A good option is [Visual Studio Code](https://code.visualstudio.com/) with [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) and [cspell](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) plugins, which will automatically detect the website's configuration files and give feedback as you type.
 
 3. Preview your changes locally by running `docker compose up` and opening `localhost:3001` in your browser.
-    - Make sure [Docker](https://docs.docker.com/engine/install/) and [Docker Compose](https://docs.docker.com/compose/install/) are installed on your system.
-    - If you need to update the dependencies in your Docker image at any time, run `docker compose up --build` to create an updated image.
+   - Make sure [Docker](https://docs.docker.com/engine/install/) and [Docker Compose](https://docs.docker.com/compose/install/) are installed on your system.
+   - If you need to update the dependencies in your Docker image at any time, run `docker compose up --build` to create an updated image.
 
 4. Follow the same steps as the main [Ozone contributing guide](https://github.com/apache/ozone/blob/master/CONTRIBUTING.md#contribute-your-modifications) to create a pull request against the [apache/ozone-site](https://github.com/apache/ozone-site) repository.
-    - The target branch for the PR should be [HDDS-9225-website-v2](https://github.com/apache/ozone-site/tree/HDDS-9225-website-v2) for changes targeting this new unreleased version of the website.
+   - The target branch for the PR should be [HDDS-9225-website-v2](https://github.com/apache/ozone-site/tree/HDDS-9225-website-v2) for changes targeting this new unreleased version of the website.
 
 ⬇️ Continue reading for more details, helpful tips, and advanced usage. ⬇️
 
@@ -46,12 +46,26 @@ If you are migrating a page from the old website to the new website, please foll
 1. Verify that the content of the original page is clear and accurate.
 2. If there are issues with the original page, raise a PR with your fixes to the [current Ozone website](https://github.com/apache/ozone/tree/master/hadoop-hdds/docs) to fix the page first.
 3. Once the page is merged into the current website, migrate it to the new website and raise a PR.
-    - Pages being brought in from the current website may be enhanced with [additional markdown functionality](#page-format) supported by the new website.
+   - Pages being brought in from the current website may be enhanced with [additional markdown functionality](#page-format) supported by the new website.
 
 ## Modifying the Website
 
 The Apache Ozone Website uses [Docusaurus](https://docusaurus.io/) as a static site generator. Most simple updates to the website can be done with little knowledge of Docusaurus, but for more complex modifications to the website or a better understanding of how it is built, see the Docusaurus [documentation](https://docusaurus.io/docs) and [API](https://docusaurus.io/docs/cli).
 
+### Linting and Formatting
+
+The website uses ESLint and Prettier for JavaScript/CSS linting and formatting, and markdownlint for Markdown/MDX linting. There is one intentional style conflict: Prettier uses `_underscores_` for emphasis, while markdownlint is configured to require `*asterisks*`. To keep markdownlint as the source of truth for Markdown emphasis, run markdownlint *after* Prettier.
+
+Use these commands when working on the site:
+
+```bash
+pnpm run lint
+pnpm run lint:fix
+```
+
+- `pnpm run lint` runs checks only (no files are modified).
+- `pnpm run lint:fix` applies auto-fixes from ESLint, markdownlint, and Prettier.
+
 ### Directory Layout
 
 - [docusaurus.config.js](https://docusaurus.io/docs/configuration)
@@ -206,13 +220,13 @@ When creating a new *docs* subdirectory (which will be rendered as a sidebar sec
 
 1. Use the `sidebar_label` front matter key to give the section a brief title that will be shown in the sidebar.
 2. Add a descriptive title on the markdown page itself.
-    - This should be more verbose than the sidebar label as described in [Best Practices](#best-practices) for documentation pages.
+   - This should be more verbose than the sidebar label as described in [Best Practices](#best-practices) for documentation pages.
 3. Write a brief summary (usually just one sentence) about the content in that section.
-    - Avoid placing actual documentation on these pages, since it may be missed by readers clicking through the sidebar.
-    - If an overview of content in a section is required, add a dedicated "Overview" page to the section.
+   - Avoid placing actual documentation on these pages, since it may be missed by readers clicking through the sidebar.
+   - If an overview of content in a section is required, add a dedicated "Overview" page to the section.
 4. Add an automatically generated index of the content in this section as the last line in the markdown file. Adding this index is described in the [Docusaurus docs](https://docusaurus.io/docs/sidebar/items#embedding-generated-index-in-doc-page), but in summary it only requires two lines:
-    1. Add `import DocCardList from '@theme/DocCardList';` anywhere in the *README.mdx* file.
-    2. Add the `<DocCardList/>` tag at the end of the file.
+   1. Add `import DocCardList from '@theme/DocCardList';` anywhere in the *README.mdx* file.
+   2. Add the `<DocCardList/>` tag at the end of the file.
 
 ### Updating Graphics
 
@@ -267,29 +281,24 @@ Currently all `@docusaurus/*` packages are pinned to an exact version for websit
 #### `pnpm` Command Cheat-Sheet
 
 - **To install all packages after cloning the repo**: `pnpm install`
-
   - This will read the metadata for the packages and their transitive dependencies from *pnpm-lock.yaml*, which is generated from *package.json* - and install the required dependencies for the project in the *node_modules* folder.
 
   - This should make no modifications to *package.json* or *pnpm-lock.yaml* if all explicit versions in *pnpm-lock.yaml* comply with the version specifiers in *package.json*.
-
     - This should always be true for committed code, because the CI build of the website uses `pnpm install --frozen-lockfile` to fail the build if the two files do not match.
 
 - **To update all packages to their latest versions allowed by package.json**: `pnpm update`
-
   - This will update *package.json* to match the exact versions that were installed, but this is for reference only. Exact version information still comes from *pnpm-lock.yaml*
     - Version specifiers like `^` and `~` will not be modified, and the new version will be the latest that still complies with the existing version specifiers.
 
   - This will update *pnpm-lock.yaml* to reflect the exact versions of all top level and transitive dependencies installed.
 
 - **To update docusaurus to a specific version**:
-
   1. Update the version of all `@docusaurus/*` packages in *package.json* to the desired docusaurus version.
 
   2. Run `pnpm update '@docusaurus/*'` to update to the new version.
+     - This should modify *pnpm-lock.yaml* with the exact versions of docusaurus and its transitive dependencies that were installed.
 
-      - This should modify *pnpm-lock.yaml* with the exact versions of docusaurus and its transitive dependencies that were installed.
-
-      - If pnpm needed to update other top level dependencies when updating docusaurus, this command may modify *package.json* as well.
+     - If pnpm needed to update other top level dependencies when updating docusaurus, this command may modify *package.json* as well.
 
   3. Commit *package.json* and *pnpm-lock.yaml* to git.
 
@@ -308,13 +317,11 @@ The project includes a `Dockerfile` and a `compose.yml` file to build and run th
 2. Install [Docker Compose](https://docs.docker.com/compose/install/).
 
 3. Run `docker compose up` from the repository root.
-
-    - **Note**: This will continue to use the last locally built version of the `ozone-site-dev` image, which saves time on future runs.
-      - Run `docker compose up --build` to rebuild the image and incorporate any package dependency updates that may have been committed since the last build.
+   - **Note**: This will continue to use the last locally built version of the `ozone-site-dev` image, which saves time on future runs.
+     - Run `docker compose up --build` to rebuild the image and incorporate any package dependency updates that may have been committed since the last build.
 
 4. Preview the website at `localhost:3001` in your browser.
-
-    - Any changes made in the repository will be reflected in the preview.
+   - Any changes made in the repository will be reflected in the preview.
 
 5. Press `Ctrl+C` or run `docker compose down` to stop the preview.
 
@@ -327,15 +334,13 @@ Build and run the website locally with the `pnpm` package manager.
 2. Install dependencies required to build the website by running `pnpm install` at the website root.
 
 - [**Development Server**](https://docusaurus.io/docs/installation#running-the-development-server): This option will start the Docusaurus development server, which allows updates to website files to be displayed in the browser in real time. It will not produce a `build` directory with build artifacts.
-
   1. Run `pnpm start` from the repository root to start the development server.
 
   2. Preview the website at `localhost:3001` in your browser.
 
   3. Press `Ctrl+C` to stop the preview.
 
 - [**Local Build**](https://docusaurus.io/docs/installation#build): This option will do a production build, putting artifacts in the `build` directory. This can still be previewed locally, but will not automatically reflect changes to website files.
-
   1. Run `pnpm build` from the repository root to build the content.
 
   2. Run `pnpm serve` to preview the built website locally.

docs/02-quick-start/01-installation/01-docker.md

@@ -42,29 +42,29 @@ This command will:
 
 1. Check the status of your Ozone cluster components:
 
-    ```bash
-    docker compose ps
-    ```
-
-    You should see output similar to this:
-
-    ```bash
-    NAME                IMAGE                      COMMAND                  SERVICE    CREATED          STATUS          PORTS
-    docker-datanode-1   apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   datanode   14 seconds ago   Up 13 seconds   0.0.0.0:32958->9864/tcp, :::32958->9864/tcp
-    docker-datanode-2   apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   datanode   14 seconds ago   Up 13 seconds   0.0.0.0:32957->9864/tcp, :::32957->9864/tcp
-    docker-datanode-3   apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   datanode   14 seconds ago   Up 12 seconds   0.0.0.0:32959->9864/tcp, :::32959->9864/tcp
-    docker-om-1         apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   om         14 seconds ago   Up 13 seconds   0.0.0.0:9874->9874/tcp, :::9874->9874/tcp
-    docker-recon-1      apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   recon      14 seconds ago   Up 13 seconds   0.0.0.0:9888->9888/tcp, :::9888->9888/tcp
-    docker-s3g-1        apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   s3g        14 seconds ago   Up 13 seconds   0.0.0.0:9878->9878/tcp, :::9878->9878/tcp
-    docker-scm-1        apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   scm        14 seconds ago   Up 13 seconds   0.0.0.0:9876->9876/tcp, :::9876->9876/tcp
-    ```
+   ```bash
+   docker compose ps
+   ```
+
+   You should see output similar to this:
+
+   ```bash
+   NAME                IMAGE                      COMMAND                  SERVICE    CREATED          STATUS          PORTS
+   docker-datanode-1   apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   datanode   14 seconds ago   Up 13 seconds   0.0.0.0:32958->9864/tcp, :::32958->9864/tcp
+   docker-datanode-2   apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   datanode   14 seconds ago   Up 13 seconds   0.0.0.0:32957->9864/tcp, :::32957->9864/tcp
+   docker-datanode-3   apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   datanode   14 seconds ago   Up 12 seconds   0.0.0.0:32959->9864/tcp, :::32959->9864/tcp
+   docker-om-1         apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   om         14 seconds ago   Up 13 seconds   0.0.0.0:9874->9874/tcp, :::9874->9874/tcp
+   docker-recon-1      apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   recon      14 seconds ago   Up 13 seconds   0.0.0.0:9888->9888/tcp, :::9888->9888/tcp
+   docker-s3g-1        apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   s3g        14 seconds ago   Up 13 seconds   0.0.0.0:9878->9878/tcp, :::9878->9878/tcp
+   docker-scm-1        apache/ozone:1.4.1-rocky   "/usr/local/bin/dumb…"   scm        14 seconds ago   Up 13 seconds   0.0.0.0:9876->9876/tcp, :::9876->9876/tcp
+   ```
 
 2. Check the Ozone version
 
-    ```bash
-    docker compose exec om bash
-    ozone version
-    ```
+   ```bash
+   docker compose exec om bash
+   ozone version
+   ```
 
 3. Access the Ozone Recon server, which provides monitoring and management capabilities by navigating to the [Recon server home page](http://localhost:9888).