From bef99a84e6d50f88b3fbec7bfff47090f96aefee Mon Sep 17 00:00:00 2001 From: Elijah Potter Date: Mon, 30 Dec 2024 12:12:21 -0700 Subject: [PATCH] feat(web): added documentation for using a CDN --- .../harper.js/examples/raw-web/index.html | 104 +++++++++--------- .../web/src/routes/docs/harperjs/CDN/+page.md | 9 ++ .../docs/harperjs/CDN/example/+server.ts | 9 ++ .../docs/harperjs/introduction/+page.md | 16 +++ .../integrations/language-server/+page.md | 2 +- packages/web/vite.config.ts | 13 +++ 6 files changed, 101 insertions(+), 52 deletions(-) create mode 100644 packages/web/src/routes/docs/harperjs/CDN/+page.md create mode 100644 packages/web/src/routes/docs/harperjs/CDN/example/+server.ts create mode 100644 packages/web/src/routes/docs/harperjs/introduction/+page.md diff --git a/packages/harper.js/examples/raw-web/index.html b/packages/harper.js/examples/raw-web/index.html index 6940b194..46b1ea22 100644 --- a/packages/harper.js/examples/raw-web/index.html +++ b/packages/harper.js/examples/raw-web/index.html @@ -1,53 +1,55 @@ - + - - - - - - - - -

Demo

- -

- This page is a simple example of using harper.js 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. -

- - - -

Errors

- - - - - + + + + + + + + + +

Demo

+ +

+ This page is a simple example of using harper.js 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. +

+ + + + +

Errors

+ + + diff --git a/packages/web/src/routes/docs/harperjs/CDN/+page.md b/packages/web/src/routes/docs/harperjs/CDN/+page.md new file mode 100644 index 00000000..76e604f2 --- /dev/null +++ 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 new file mode 100644 index 00000000..c336a5e9 --- /dev/null +++ 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 new file mode 100644 index 00000000..23685bf9 --- /dev/null +++ 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 index 9cec19d6..82e5d283 100644 --- 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 index 9ffcc0e6..e8bd5287 100644 --- 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: [