feat: add scaffold of help dialog

this will also help me create an error dialog later but uhhhhh how tf do
i hook up open/close functionality to it

src/components/InfoModal.astro

@@ -0,0 +1,13 @@
+---
+export interface InfoModalProps {
+  id: string;
+}
+const { id } = Astro.props as InfoModalProps;
+---
+
+<dialog
+  id={id}
+  style="position: absolute; top:50%; bottom:50%; max-width: 65%;"
+>
+  <slot />
+</dialog>

src/components/search/Help.mdx

@@ -0,0 +1,17 @@
+---
+---
+
+- Search words or phrases up to **6 words long**: `musi mute a`
+- Search **multiple phrases at once** with commas `,`: `toki, pona`
+- Use **wildcard** `*` in place of a word to get top phrases: `ona li *`
+- **Add** phrases with `+`: `ale + ali`
+- **Subtract** with `-`: `toki - toki pona`
+- Set a **minimum sentence length** by adding `_1-6` to a phrase:
+  `toki_2, toki_3`
+- The sentences menu sets the **minimum sentence length** for **all searches**
+- The **Relative scale** shows the percentage of times a word appeared
+- The **Absolute scale** shows the number of times a word appeared
+- **Smoothing** averages out noisy graphs, but too much can be misleading
+- The rest is weird or complicated- use the defaults or
+  [check the help page](/ilo-muni/help)
+- **o musi pona, o alasa pona! Have fun, search responsibly!**

src/pages/index.astro

@@ -5,6 +5,8 @@ import Loader from "@components/Loader.astro";
 import IntDropdown from "@components/IntDropdown.astro";
 import CategorizedDropdown from "@components/CategorizedDropdown.astro";
 import IconButton from "@components/IconButton.astro";
+import InfoModal from "@components/InfoModal.astro";
+import Help from "@components/search/Help.mdx";
 
 import {
   EARLIEST_YEAR,
@@ -300,10 +302,10 @@ const frontmatter = { title: "ilo Muni" };
     </form>
     <span style="padding: 0.1em"></span>
     <IconButton id="copyUrlButton" icon="mingcute:copy-line" />
-    <span style="padding: 1.8em"></span>
+    <!-- <IconButton id="helpButton" icon="mingcute:question-line" /> -->
+    <span style="padding: 1.4em"></span>
     <IconButton id="sampleQueryButton" icon="mingcute:refresh-3-line" />
 
-    <!-- <IconButton id="helpButton" icon="mingcute:question-line" /> -->
     <!-- <IconButton id="copyImageButton" icon="mingcute:pic-line" /> -->
   </div>
 
@@ -313,6 +315,10 @@ const frontmatter = { title: "ilo Muni" };
   </div>
 
   <div id="errorBin"></div>
+
+  <InfoModal>
+    <Help />
+  </InfoModal>
 </Layout>
 
 <style>