feat(*): update docs

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@atmx-org/registry", "www"]
+  "ignore": ["www"]
 }

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "release": "turbo run build && changesets publish",
+    "release": "turbo run build && changeset publish",
     "build": "turbo run build",
     "dev": "turbo run dev",
     "clean": "rimraf -g packages/**/dist www/**/.vercel packages/**/.turbo www/**/.turbo www/**/.astro",

www/astro.config.ts

@@ -28,9 +28,8 @@ export default defineConfig({
     starlight({
       title: "ATMX",
       customCss: [
-        "@fontsource/geist-sans",
+        "@fontsource-variable/inter",
         "@fontsource/geist-mono",
-        "@fontsource-variable/space-grotesk",
         "./src/styles/global.postcss",
       ],
       social: {
@@ -48,7 +47,7 @@ export default defineConfig({
       plugins: [snippetMDX],
       expressiveCode: {
         // themes: ["starlight-dark"],
-        themes: [theme],
+        themes: [theme, "starlight-light"],
         styleOverrides: {
           borderRadius: "calc(var(--radius) - 2px)",
           borderWidth: "1px",

www/package.json

@@ -23,9 +23,7 @@
     "@babel/preset-typescript": "^7.24.7",
     "@babel/traverse": "^7.25.4",
     "@fontsource-variable/inter": "^5.0.20",
-    "@fontsource-variable/space-grotesk": "^5.0.19",
     "@fontsource/geist-mono": "^5.0.3",
-    "@fontsource/geist-sans": "^5.0.3",
     "@gcornut/valibot-json-schema": "^0.41.1",
     "@iconify-json/mdi": "^1.1.68",
     "@microsoft/tsdoc": "^0.15.0",

www/src/components/Favicon.astro

@@ -0,0 +1,13 @@
+<svg
+  {...Astro.props}
+  xmlns="http://www.w3.org/2000/svg"
+  width="100"
+  height="100"
+  fill="currentColor"
+  viewBox="0 0 100 100"
+>
+  <path
+    fill-rule="evenodd"
+    d="M20.596 68.123h-6.571L14 68.1l34.163-38.17L50 27.878l1.837 2.052L86 68.1l-.025.023h-6.571L50 35.269 20.596 68.123Zm32.211-10.177a2.807 2.807 0 1 1-5.614 0 2.807 2.807 0 0 1 5.614 0Z"
+    clip-rule="evenodd"></path>
+</svg>

www/src/components/Header.astro

@@ -15,7 +15,7 @@ import SiteTitle from "./SiteTitle.astro";
   <div class="overflow-hidden flex flex-row items-center flex-1">
     <SiteTitle {...Astro.props} />
 
-    <ul class="nav">
+    <ul class="nav pl-8">
       <a
         data-current={Astro.url.pathname !== "/"}
         href="/getting-started/welcome"

www/src/components/Hero.astro

@@ -15,7 +15,7 @@ import Link from "./Link.astro";
   class="container pb-16 absolute inset-0 max-w-2xl mx-auto flex flex-col justify-center items-center gap-8"
 >
   <div class="blur-in w-full w-max-[700px]">
-    <Logo class="text-foreground glowing" />
+    <Logo class="text-foreground logo" />
   </div>
 
   <p
@@ -40,16 +40,6 @@ import Link from "./Link.astro";
 </div>
 
 <style>
-  @keyframes glowing {
-    from {
-      filter: drop-shadow(0 0 12px theme("textColor.foreground"));
-    }
-
-    to {
-      filter: drop-shadow(0 0 8px theme("textColor.foreground/0.5"));
-    }
-  }
-
   @keyframes fadeIn {
     from {
       opacity: 0;
@@ -67,10 +57,6 @@ import Link from "./Link.astro";
   .blur-in {
     animation: fadeIn 2s ease-out;
   }
-
-  .glowing {
-    animation: glowing 2.5s infinite alternate ease-in-out;
-  }
 </style>
 
 <script>
@@ -104,8 +90,10 @@ import Link from "./Link.astro";
       const w = (this.#canvas.width = this.#canvas.clientWidth) / 2;
       const h = (this.#canvas.height = this.#canvas.clientHeight) / 2;
 
-      // ctx.fillRect(0, 0, w * 2, h * 2);
-      this.#ctx.fillStyle = "#fff";
+      const isDark =
+        document.querySelector(":root")?.getAttribute("data-theme") === "dark";
+
+      this.#ctx.fillStyle = isDark ? "#fff" : "#000";
 
       for (let i = 30; i--; ) {
         for (let j = 80; j--; ) {
@@ -122,7 +110,7 @@ import Link from "./Link.astro";
             h / 8 + (y / z) * 180,
             16 / z / z,
             0,
-            7,
+            7
           );
           this.#ctx.fill();
         }

www/src/components/SiteTitle.astro

@@ -1,7 +1,5 @@
 ---
-import Logo from "./Logo.astro";
+import Favicon from "./Favicon.astro";
 ---
 
-<a href="/" class="pt-1 drop-shadow-[0_0_2px_white]">
-  <Logo width={125} class="text-foreground" />
-</a>
+<a href="/" class="pt-1"><Favicon class="text-foreground" width={40} /> </a>

www/src/components/ui/command.tsx

@@ -41,7 +41,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div
-    className="border-border flex items-center border-b px-3"
+    className="border-border-foreground flex items-center border-b px-3"
     cmdk-input-wrapper=""
   >
     <Search className="mr-2 !h-6 !w-6 shrink-0 opacity-50" />
@@ -119,7 +119,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "data-[selected=true]:text-accent-foreground relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-white/10 data-[disabled=true]:opacity-50",
+      "data-[selected=true]:text-accent-foreground data-[selected='true']:bg-accent/10 relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       className,
     )}
     {...props}

www/src/components/ui/dialog.tsx

@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "border-border from-background/90 to-background/75 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-4xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-gradient-to-b p-6 shadow-lg backdrop-blur-lg duration-200 data-[state=closed]:duration-300 data-[state=open]:duration-300 sm:rounded-lg",
+        "border-border from-background/90 to-background/75 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-4xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-gradient-to-b p-6 shadow-lg backdrop-blur-md duration-200 data-[state=closed]:duration-300 data-[state=open]:duration-300 sm:rounded-lg",
         className,
       )}
       {...props}

www/src/content/docs/getting-started/CLI.md

@@ -2,20 +2,18 @@
 title: CLI
 description: Use the CLI to add new functions to your project.
 sidebar:
-  order: 1
+  order: 2
 ---
 
 Instead of constantly coming back to this site to copy code, you can easily use the atmx CLI to install functions directly in your project.
 
-There are a few different ways you can leverage the CLI:
+You can either install the CLI as a dev dependency, or invoke it directly using your favorite package manager:
 
 ```bash
-# Invoke directly via npx
 npx atmx
+yarn dlx atmx
+pnpm dlx atmx
+bunx atmx
+```
 
-# Install globally
-npm -g atmx
-
-# Install in your project
-npm i -D atmx # Then npm run atmx
-```
+Running any of these commands will display the help menu for the CLI.

www/src/content/docs/getting-started/config.md

@@ -0,0 +1,38 @@
+---
+title: Configuration
+description: Simple config options to manage atmx
+sidebar:
+  order: 3
+---
+
+atmx uses a simple JSON configuration file called `utils.json` to manage its files. This file is generated during `atmx init` and shouldn't be removed, otherwise atmx may not work properly.
+
+## `ts`
+
+Denotes whether the project should use [TypeScript](https://typescript.org). This value is set automatically if atmx detects a `tsconfig.json` file in your repository. 
+
+## `aliases`
+
+Maps aliases for all installed code. A key is required for each atmx code type (hooks, helpers, etc.). These aliases will be used in all code atmx generates. In TypeScript aliases are typically defined using the [`paths` option](https://www.typescriptlang.org/tsconfig/#paths) in `tsconfig.json`. 
+
+If you aren't using TypeScript, you'll need to configure aliases specific to your bundler. For example, Vite features a [resolve.alias](https://vitejs.dev/config/shared-options.html#resolve-alias) configuration option. 
+
+## `index` (experimental)
+
+Controls whether to generate an `index.(ts|js)` file in the root each directory. For example, instead of importing a method via:
+
+```ts
+import { group } from '@/helpers/group';
+```
+
+You could import via
+
+```ts
+import * as _ from '@/helpers';
+
+// Later...
+
+_.group(/* ... */)
+```
+
+Defaults to `false`.

www/src/content/docs/getting-started/contributing.md

@@ -0,0 +1,10 @@
+---
+title: Contributing
+description: We'd love your help!
+sidebar:
+  order: 5
+---
+
+If you'd like to contribute to atmx by submitting helpful code snippets, simply add a TSDoc-annotated function to the appropriate category in `packages/registry/src`. Documentation will automatically be generated and your function will be immediately available once you [merge your PR](https://github.com/Nickersoft/atmx/pulls).
+
+What we currently need help with the most is merging in more React hooks from [react-use](https://github.com/streamich/react-use) and [usehooks](https://github.com/uidotdev/usehooks).

www/src/content/docs/getting-started/credits.md

@@ -2,7 +2,7 @@
 title: Credits
 description: atmx is built atop the open-source community
 sidebar:
-  order: 2
+  order: 4
 ---
 
 While we'd love to take credit for all of the code on the website, much of it is lifted from MIT-licensed code repositories. 

www/src/content/docs/getting-started/installation.md

@@ -0,0 +1,43 @@
+---
+title: Installation
+description: Setup your project in one command
+sidebar:
+  order: 1
+---
+
+Similar to how shadcn generates a `components.json` file, atmx relies on a `utils.json` file to manage its code snippets and requires this file to run.
+
+To start, run the following from the root of your repo:
+
+```bash
+npx atmx init
+```
+
+*For alternatives to using npx, see the [CLI docs](/cli).*
+
+During initialization, you'll be asked a series of questions regarding where you wish to store different categories of code (helpers, hooks, etc.). For now, all of these fields are required, even if you aren't using React or Svelte.
+
+If your project is using TypeScript and contains a `tsconfig.json`, atmx's `ts` setting will automatically be set to `true`. Otherwise, you'll be asked if you wish to use TypeScript. **Note that selecting yes will _not_ set up TypeScript for you in your repo if it is not already.**
+
+## Configuring aliases
+
+Once you have set aliases in your `utils.json`, you'll need to update your project aliases to point to the correct paths. If you are using [NextJS](https://nextjs.org), aliases should work out-of-the-box, as Next automatically aliases `@/` to `src/*`. 
+
+If not, be sure to add the following to your `tsconfig.json` (if using TypeScript):
+
+```json {4-9}
+{
+  "compilerOptions": {
+    // ...
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+    // ...
+  }
+}
+```
+
+Otherwise, add a similar alias to your bundler. For example, [here](https://vitejs.dev/config/shared-options.html#resolve-alias) is how you would configure aliases in Vite.