feat(web): added documentation for using a CDN

Automattic · Dec 30, 2024 · bef99a8 · bef99a8
1 parent 09d1466
commit bef99a8
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 52 deletions.
diff --git a/packages/harper.js/examples/raw-web/index.html b/packages/harper.js/examples/raw-web/index.html
@@ -1,53 +1,55 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <script type="module">
-    import {WorkerLinter} from "https://unpkg.com/[email protected]/dist/harper.js"
-
-    let linter = new WorkerLinter();
-
-    async function onInput(e) {
-      let lints = await linter.lint(e.target.value);
-
-      let list = document.getElementById("errorlist");
-      // Clear previous results
-      list.innerHTML = '';
-
-
-      for (let lint of lints) {
-        let item = document.createElement("LI");
-        var text = document.createTextNode(lint.message());
-        item.appendChild(text);
-        list.appendChild(item);
-      }
-    }
-
-    let inputField = document.getElementById("maininput");
-    inputField.addEventListener("input", onInput);
-    onInput({target: inputField})
-  </script>
-  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
-</head>
-
-<body>
-  <h1>Demo</h1>
-
-  <p>
-    This page is a simple example of using <code>harper.js</code> on a plain HTML page with a CDN.
-    It isn't pretty, but it demonstrates the fundamentals of using Harper.
-    Start typing in the text box below to start getting suggestions right in your browser.
-  </p>
-
-  <textarea id="maininput">This is an test</textarea>
-
-  <h2>Errors</h2>
-
-  <ul id="errorlist">
-    Loading
-  </ul>
-
-</body>
-
+	<head>
+		<meta charset="utf-8" />
+		<script type="module">
+			// We can import `harper.js` using native ECMAScript syntax.
+			import { WorkerLinter } from 'https://unpkg.com/[email protected]/dist/harper.js';
+
+			// Since we are working the browser, we can use either `WorkerLinter`, which doesn't block the event loop, or `LocalLinter`, which does.
+			let linter = new WorkerLinter();
+
+			// Every time the `<textarea/>` received an input, we process it and update our list.
+			async function onInput(e) {
+				let lints = await linter.lint(e.target.value);
+
+				let list = document.getElementById('errorlist');
+				// Clear previous results
+				list.innerHTML = '';
+
+				for (let lint of lints) {
+					let item = document.createElement('LI');
+					var text = document.createTextNode(lint.message());
+					item.appendChild(text);
+					list.appendChild(item);
+				}
+			}
+
+			let inputField = document.getElementById('maininput');
+			inputField.addEventListener('input', onInput);
+			onInput({ target: inputField });
+		</script>
+
+		<!--Make the page look good using SimpleCSS-->
+		<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />
+	</head>
+
+	<body>
+		<h1>Demo</h1>
+
+		<p>
+			This page is a simple example of using <code>harper.js</code> on a plain HTML page with a CDN.
+			It isn't pretty, but it demonstrates the fundamentals of using Harper. Start typing in the
+			text box below to start getting suggestions right in your browser.
+		</p>
+
+		<!--This is an intentional mistake to highlight the technology.-->
+		<textarea id="maininput">This is an test</textarea>
+
+		<h2>Errors</h2>
+
+		<ul id="errorlist">
+			Loading...
+		</ul>
+	</body>
 </html>
diff --git a/packages/web/src/routes/docs/harperjs/CDN/+page.md b/packages/web/src/routes/docs/harperjs/CDN/+page.md
@@ -0,0 +1,9 @@
+---
+title: Using a CDN
+---
+
+You can consume Harper from the [unpkg](https://unpkg.com/) CDN using native ECMAScript module syntax which is supported by all modern browsers.
+
+[A simple example is provided below.](./CDN/example)
+
+@code(../../../../../../harper.js/examples/raw-web/index.html)
diff --git a/packages/web/src/routes/docs/harperjs/CDN/example/+server.ts b/packages/web/src/routes/docs/harperjs/CDN/example/+server.ts
@@ -0,0 +1,9 @@
+import pageHtml from '../../../../../../../harper.js/examples/raw-web/index.html?raw';
+
+export async function GET() {
+	return new Response(pageHtml, {
+		headers: {
+			['Content-Type']: 'text/html'
+		}
+	});
+}
diff --git a/packages/web/src/routes/docs/harperjs/introduction/+page.md b/packages/web/src/routes/docs/harperjs/introduction/+page.md
@@ -0,0 +1,16 @@
+---
+title: Introduction to harper.js
+---
+
+## The Mission
+
+If you're a developer, odds are that you are using JavaScript or TypeScript on a daily basis.
+Your project probably has a least a little bit of either.
+
+Furthermore, a plurality of focused authorship happens inside a web browser or [Electron-based app](https://www.electronjs.org/).
+Given this, we want to create an environment where it is as easy as possible to integrate fantastic grammar checking into web applications.
+
+## What is `harper.js`?
+
+`harper.js` is an ECMAScript module designed to easy to import into any project.
+On the inside, it uses a copy of Harper compiled to [WebAssembly](https://webassembly.org/).
diff --git a/packages/web/src/routes/docs/integrations/language-server/+page.md b/packages/web/src/routes/docs/integrations/language-server/+page.md
@@ -3,7 +3,7 @@ title: Language Server
 ---
 
 `harper-ls` is the [Language Server Protocol](https://microsoft.github.io/language-server-protocol/) frontend for Harper.
-Out of the box, it has built-in support for parsing the comments of most programming languages, as well as any and all markdown files.
+Out of the box, it has built-in support for parsing the comments of most programming languages, as well as any and all Markdown files.
 
 ### Cargo
 

diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
@@ -69,6 +69,19 @@ export default defineConfig({
 								}
 							]
 						},
+						{
+							title: 'harper.js',
+							items: [
+								{
+									title: 'Introduction',
+									to: '/docs/harperjs/introduction'
+								},
+								{
+									title: 'CDN',
+									to: '/docs/harperjs/CDN'
+								}
+							]
+						},
 						{
 							title: 'Contributors',
 							items: [