Jm/eslint formatting docs

.github/workflows/lint-and-format.yml

@@ -0,0 +1,23 @@
+name: Lint and Format Check
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+jobs:
+  check:
+    name: Check code quality
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Check code quality
+        run: bun run check

CONTRIBUTING.md

@@ -32,3 +32,21 @@ Export a static HTML version of the specification when your changes are done wit
 In general, Community Group Draft Reports do not follow the same strict conventions as more mature specifications. We only archive major versions of the specification. For example, a copy of the [2021-03-17 draft report](https://github.com/WICG/webmonetization/tree/main/src/pages/specification/versions/CG-DRAFT-web-monetization-20210317.html) currently lives in [src/pages/specification/versions/](https://github.com/WICG/webmonetization/tree/main/src/pages/specification/versions).
 
 Prettier is disabled on `src/pages/specification` as it conflicts with the code format style used by W3C specifications. There is [no way](https://github.com/prettier/prettier/issues/5246) to configure Prettier to follow the [W3C recommendation](https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements) of not using trailing slashes on void elements.
+
+## Code Quality
+
+We use ESLint to keep the codebase consistent. Before submitting a pull request, please make sure your changes pass linting:
+
+```sh
+bun run lint
+```
+
+If ESLint finds issues that can be automatically fixed, you can run:
+
+```sh
+bun run lint:fix
+```
+
+This will fix most formatting and style issues automatically. Any remaining issues will need to be fixed manually.
+
+Note that some files in `public/interactive-examples/` may have warnings for unused variables. These are intentional and can be ignored - they're example files that demonstrate different usage patterns.

README.md

@@ -41,11 +41,15 @@ All commands are run from the root of the project, from a terminal:
 | `bun run start`           | Starts local dev server at `localhost:1100`      |
 | `bun run build`           | Build your production site to `./dist/`          |
 | `bun run preview`         | Preview your build locally before deploying      |
+| `bun run lint`            | Check code for linting errors                    |
+| `bun run lint:fix`        | Automatically fix linting errors where possible  |
 | `bun run astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `bun run astro -- --help` | Get help using the Astro CLI                     |
 
 You can substitute the bun commands with your chosen package manager's commands.
 
+Before submitting a PR, make sure your code passes linting by running `bun run lint`. If there are any issues that can be automatically fixed, use `bun run lint:fix`.
+
 ## Specification Development
 
 Please refer to the [CONTRIBUTING.md](./CONTRIBUTING.md#specification-development).

astro.config.mjs

@@ -288,7 +288,7 @@ export default defineConfig({
     '/docs/resources/libraries': '/developers/libraries',
     '/docs/resources/op-wallets': '/wallets',
     '/docs/resources/get-involved': '/resources/get-involved',
-    '/install': '/supporters'
+    '/install': '/supporters',
   },
   server: {
     port: 1100,

eslint.config.mjs

@@ -0,0 +1,72 @@
+import eslintPluginAstro from 'eslint-plugin-astro'
+import tseslint from '@typescript-eslint/eslint-plugin'
+import tsparser from '@typescript-eslint/parser'
+import prettierConfig from 'eslint-config-prettier'
+
+export default [
+  {
+    ignores: ['**/*.mdx', '**/dist/**', '**/node_modules/**', '**/.astro/**'],
+  },
+  {
+    files: ['**/*.{js,mjs,ts}'],
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-expressions': [
+        'error',
+        {
+          allowShortCircuit: true,
+          allowTernary: true,
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.d.ts'],
+    rules: {
+      '@typescript-eslint/triple-slash-reference': 'off',
+    },
+  },
+  {
+    files: ['**/specification/**/*.js'],
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'warn',
+    },
+  },
+  {
+    files: ['**/*.cjs'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'script',
+    },
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+  {
+    files: ['**/public/**/*.js'],
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-unused-expressions': 'warn',
+    },
+  },
+  ...eslintPluginAstro.configs.recommended,
+  prettierConfig,
+]

package.json

@@ -5,7 +5,12 @@
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "check": "prettier --check . && eslint ."
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
@@ -19,5 +24,12 @@
     "starlight-fullview-mode": "^0.2.3",
     "starlight-links-validator": "^0.17.0",
     "typescript": "^5.8.3"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-astro": "^1.5.0"
   }
 }

public/interactive-examples/wm2-ad-free-experience/README.md

@@ -1,6 +1,6 @@
 # Remove content for web monetized visitors
 
-You can use Web Monetization to remove content, such as advertisements, only for web monetized visitors. 
+You can use Web Monetization to remove content, such as advertisements, only for web monetized visitors.
 
 In this example, non-web monetized visitors are shown a red advertisement box. The box is hidden for web monetized visitors.
 
@@ -26,7 +26,7 @@ The monetization `<link>` element contains a wallet address as the `href` value.
 
 ## ← ad-free.js
 
-Shows/removes the advertisement box based on whether the visitor is web monetized. 
+Shows/removes the advertisement box based on whether the visitor is web monetized.
 
 ## ← wm-previewer.js
 

public/interactive-examples/wm2-ad-free-experience/ad-free.js

@@ -1,31 +1,31 @@
 const adCode =
-  '<div style="border:1px solid #f00;color:red;margin:20px">This is an ad! Buy my product!</div>';
+  '<div style="border:1px solid #f00;color:red;margin:20px">This is an ad! Buy my product!</div>'
 
 function showAds() {
-  document.getElementById("ad").innerHTML = adCode;
+  document.getElementById('ad').innerHTML = adCode
 }
 
 function removeAds() {
-  document.getElementById("ad").remove();
+  document.getElementById('ad').remove()
 }
 
-let hasPaid = false;
+let hasPaid = false
 if (window.MonetizationEvent) {
-  const link = document.querySelector('link[rel="monetization"]');
-  link.addEventListener("monetization", () => {
-    hasPaid = true;
-    removeAds();
-  });
+  const link = document.querySelector('link[rel="monetization"]')
+  link.addEventListener('monetization', () => {
+    hasPaid = true
+    removeAds()
+  })
 }
 
-window.addEventListener("load", () => {
+window.addEventListener('load', () => {
   if (!window.MonetizationEvent) {
-    showAds();
+    showAds()
   } else {
     setTimeout(() => {
       if (!hasPaid) {
-        showAds();
+        showAds()
       }
-    }, 3000);
+    }, 3000)
   }
-});
+})

public/interactive-examples/wm2-ad-free-experience/index.html

@@ -9,6 +9,6 @@
 
 <body>
   <div id="ad"></div>
-  <hr/>
+  <hr />
   Your page's content goes here.
 </body>