Update some typing and minor doc tweaks (#216)

README.md

@@ -1,4 +1,4 @@
-# archipelago.js
+# ![archipelago.js Icon](./assets/icon_small.png) archipelago.js
 
 ![GitHub License](https://img.shields.io/github/license/thephar/archipelago.js?style=flat-square)
 ![Types](https://img.shields.io/npm/types/archipelago.js?style=flat-square)

assets/api.css

@@ -0,0 +1,29 @@
+.tsd-page-toolbar .tsd-toolbar-contents {
+    padding: 0.5rem 1rem !important;
+}
+
+header.tsd-page-toolbar {
+    height: unset !important;
+}
+
+div.svelte-wmon9h {
+    padding: 0 !important;
+}
+
+#dmt-search-field.svelte-tuln0o, #tsd-search .field input {
+    top: -2px !important;
+}
+
+button.svelte-10arjs8 {
+    border-radius: 2px !important;
+    border: 1px solid #333;
+    margin: 0 0 0 4px !important;
+    height: 36px !important;
+    width: 36px !important;
+}
+
+#plugin-versions-select {
+    width: 100%;
+    height: 24px;
+    margin-top: 4px;
+}

build.mjs

@@ -10,5 +10,6 @@ await Bun.build({
 await Bun.build({
     entrypoints: ["./src/index.ts"],
     outdir: "./dist",
-    naming: "[dir]/archipelago.[hash].[ext]",
+    naming: "[dir]/archipelago.min.[ext]",
+    minify: true,
 });

guides/creating.md

@@ -0,0 +1,99 @@
+---
+title: Creating Your Client
+group: Documents
+category: Creating
+---
+# Creating Your Client
+
+Let's start off by creating a simple client that can connect to an Archipelago server, and listen for message events.
+
+If you haven't already, generate an Archipelago room you can connect to for testing purposes. For all examples therein,
+I'll be using "Phar" as the player and "Clique" as the game, but you can replace these values with what's appropriate
+for your situation.
+
+Create a new file in your project directory called `client.js` and add the following code:
+
+```js
+import { Client } from "archipelago.js";
+
+// Create a new instance of the Client class.
+const client = new Client();
+
+// Set up an event listener for whenever a message arrives and print the plain-text content to the console.
+client.messages.on("message", (content) => {
+    console.log(content);
+});
+
+// Login to the server. Replace `archipelago.gg:XXXXX` and `Phar` with the address/url and slot name for your room.
+// If no game is provided, client will connect in "TextOnly" mode, which is fine for this example.
+client.login("archipelago.gg:XXXXX", "Phar")
+    .then(() => console.log("Connected to the Archipelago server!"))
+    .catch(console.error);
+```
+
+Now run your code in your runtime of choice, and you should see the following output in your console:
+
+```
+Connected to the Archipelago server!
+Phar (Team #1) viewing Clique has joined. Client(0.5.1), ['TextOnly'].
+Now that you are connected, you can use !help to list commands to run via the server. If your client supports it, you may have additional local commands you can list with /help.
+```
+
+If you connect with another client (or via the server console) and send a message, you should see it come in as well:
+
+```
+[Server]: Hello, world!
+Phar: Hello, multi-world*! ftfy
+```
+
+## A more feature rich, text client...
+
+This is cool and all, but not very feature rich, since we can't interact back with the code we have, so let's utilize
+some more methods to communicate back.
+
+### Node-based Example
+
+```js
+import readline from "node:readline";
+
+import { Client } from "archipelago.js";
+
+// Using the node readline module, create an interface for intercepting any user input.
+const rl = readline.createInterface({ input: process.stdin, output: process.stdout, terminal: false });
+
+const client = new Client();
+
+client.messages.on("message", (content) => {
+    console.log(content);
+});
+
+// Add an event listener for when a "line" is entered into the standard input (e.g., the console/terminal window).
+rl.on("line", async (line) => {
+    // Send the input!
+    await client.messages.say(line)
+});
+
+client.login("archipelago.gg:XXXXX", "Phar")
+    .then(() => console.log("Connected to the Archipelago server!"))
+    .catch(console.error);
+```
+
+Then running our code we should get something like so:
+
+![Node-based Example GIF](./creating/example_1.gif)
+
+[//]: # (Page navigation footer; needs to be updated manually for now.)
+<footer style="display: flex; justify-content: space-between">
+  <div>
+    <b>Previous</b>
+    <div>
+      <a href="./installation.md">Installation</a>
+    </div>
+  </div>
+  <div style="text-align: right">
+    <b>Next</b>
+    <div>
+      <a href="./placeholder.md">More docs under development...</a>
+    </div>
+  </div>
+</footer>

guides/installation.md

@@ -0,0 +1,79 @@
+---
+title: Installation
+group: Documents
+category: Installation
+---
+# Installation
+
+## In a Node-based environment (to be run server-side or be bundled for running in a browser)...
+
+**archipelago.js** supports all currently supported versions of [Node](https://nodejs.org), [Bun](https://bun.sh), and 
+[Deno](https://deno.land). To install, follow the installation directions for your desired runtime and create a new
+project directory.
+
+Then, navigate to your new project directory and run `npm install archipelago.js` (or whatever your package
+manager's flavor of doing the same thing is).
+
+### Node.js
+
+```bash
+mkdir my-project
+cd my-project
+npm init
+npm install archipelago.js
+```
+
+### Bun
+```bash
+mkdir my-project
+cd my-project
+bun init
+bun add archipelago.js
+```
+
+### Deno (v2)
+```bash
+deno init my-project
+cd my-project
+deno add npm:archipelago.js
+```
+
+Then, in your JavaScript or TypeScript files, just import using ESM syntax.
+
+```js
+import { /* ... */ } from "archipelago.js";
+
+// Rest of your code here...
+```
+
+## In the browser without using a bundler... 
+
+If you are planning to run in the browser without bundling your code first, you can import **archipelago.js** using
+the ESM module syntax in your HTML files. See below for an example using the unpkg CDN as a source:
+
+```html
+<script type="module">
+    import { /* ... */ } from "https://unpkg.com/archipelago.js/dist/archipelago.min.js";
+    
+    // Rest of your code here...
+</script>
+```
+
+If you package the **archipelago.js** files with your code, you can change the CDN url with a relative path to your
+provided **archipelago.js** bundle.
+
+[//]: # (Page navigation footer; needs to be updated manually for now.)
+<footer style="display: flex; justify-content: space-between">
+  <div>
+    <b>Previous</b>
+    <div>
+      <a href="./introduction/doc_improvements.md">Report Errors or Improvements to these Guides</a>
+    </div>
+  </div>
+  <div style="text-align: right">
+    <b>Next</b>
+    <div>
+      <a href="./creating.md">Creating Your Client</a>
+    </div>
+  </div>
+</footer>