set up webhint

jsebrech · Oct 20, 2024 · 56e3a53 · 56e3a53
1 parent 5b03779
commit 56e3a53
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 9 deletions.
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "compat-api/html": [
+      "default",
+      {
+        "ignore": [
+          "iframe[loading]"
+        ]
+      }
+    ],
+    "no-inline-styles": "off"
+  }
+}
diff --git a/eslint.config.cjs b/eslint.config.cjs
@@ -8,7 +8,7 @@ module.exports = [
         languageOptions: {
             globals: {
                 ...globals.browser,
-                ...globals.jest
+                ...globals.mocha
             },
             ecmaVersion: 2022,
             sourceType: "module",

diff --git a/public/pages/applications.html b/public/pages/applications.html
@@ -2,7 +2,8 @@
 <html lang="en">
 <head>
     <title>Plain Vanilla - Applications</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
     <meta name="description" content="An explainer for developing single-page applications using only vanilla techniques.">
     <link rel="icon" href="../favicon.ico">
     <link rel="apple-touch-icon" href="../apple-touch-icon.png">

diff --git a/public/pages/components.html b/public/pages/components.html
@@ -2,7 +2,8 @@
 <html lang="en">
 <head>
     <title>Plain Vanilla - Components</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width" />
     <meta name="description" content="An explainer for doing web development with vanilla web components.">
     <link rel="icon" href="../favicon.ico">
     <link rel="apple-touch-icon" href="../apple-touch-icon.png">

diff --git a/public/pages/examples/sites/page/example.html b/public/pages/examples/sites/page/example.html
@@ -2,7 +2,8 @@
 <html lang="en">
     <head>
         <title>Example</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width" />
         <link rel="stylesheet" href="index.css">
     </head>
     <body>

diff --git a/public/pages/examples/sites/page/example2.html b/public/pages/examples/sites/page/example2.html
@@ -2,7 +2,8 @@
 <html lang="en">
     <head>
         <title>Example</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width" />
         <link rel="stylesheet" href="index.css">
     </head>
     <body>

diff --git a/public/pages/sites.html b/public/pages/sites.html
@@ -2,7 +2,8 @@
 <html lang="en">
 <head>
     <title>Plain Vanilla - Sites</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width" />
     <meta name="description" content="An explainer for making web sites using only vanilla techniques.">
     <link rel="icon" href="../favicon.ico">
     <link rel="apple-touch-icon" href="../apple-touch-icon.png">
@@ -39,6 +40,11 @@ <h2>Pages</h2>
                 <dd>The lang attribute is recommended to make sure browsers don't misdetect the language used in the page.</dd>
                 <dt><code>&lt;head&gt;&lt;title&gt;</code></dt>
                 <dd>The title will be used for the browser tab and when bookmarking, making it effectively non-optional.</dd>
+                <dt><code>&lt;head&gt;&lt;meta charset="utf-8"&gt;</code></dt>
+                <dd>
+                    This is borderline unnecessary, but just to make sure a page is properly interpreted as UTF-8 this line should be included.
+                    Obviously the editor used to make the page should equally be set to UTF-8.
+                </dd>
                 <dt><code>&lt;head&gt;&lt;meta name="viewport"&gt;</code></dt>
                 <dd>The viewport meta is necessary to have mobile-friendly layout.</dd>
                 <dt><code>&lt;head&gt;&lt;link rel="stylesheet" href="index.css"&gt;</code></dt>
@@ -161,7 +167,7 @@ <h3>Unpkg</h3>
                 These libraries can be obtained from unpkg.com:
             </p>
             <ol>
-                <li>Browse to <code>unpkg.com/[library]/</code> (trailing slash matters), for example <a href="https://unpkg.com/microlight/" target="_blank">unpkg.com/microlight/</a></li>
+                <li>Browse to <code>unpkg.com/[library]/</code> (trailing slash matters), for example <a href="https://unpkg.com/microlight/" target="_blank" rel="noopener">unpkg.com/microlight/</a></li>
                 <li>Look for and download the library js file, which may be in a subfolder, like <code>dist</code>, <code>esm</code> or <code>umd</code></li>
                 <li>Place the library file in the <code>lib/</code> folder</li>
             </ol>

diff --git a/public/pages/styling.html b/public/pages/styling.html
@@ -2,7 +2,8 @@
 <html lang="en">
 <head>
     <title>Plain Vanilla - Styling</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width" />
     <meta name="description" content="An explainer for styling web sites using only vanilla techniques.">
     <link rel="icon" href="../favicon.ico">
     <link rel="apple-touch-icon" href="../apple-touch-icon.png">

diff --git a/public/tests/index.js b/public/tests/index.js
@@ -2,7 +2,6 @@ import { registerTabPanelComponent } from "../components/tab-panel/tab-panel.js"
 
 const app = () => {
     registerTabPanelComponent();
-    // eslint-disable-next-line no-undef
     mocha.run();
 }