Merge pull request #6 from meech-ward/dev

Dev

.gitignore

@@ -131,3 +131,5 @@ dist
 
 package-lock.json
 .idea/
+
+docs/push.sh

.prettierrc

@@ -2,5 +2,7 @@
   "tabWidth": 2,
   "useTabs": false,
   "semi": false,
-  "printWidth": 120
+  "printWidth": 120,
+  "endOfLine": "crlf",
+  "trailingComma": "none"
 }

README.md

@@ -6,33 +6,37 @@ This works for sync and async code, and you can choose the error handling style
 
 Scroll to the bottom for the motivation section (why `try,catch,finally` blocks are bad).
 
+## Docs
+
+[https://mightfail.dev](https://mightfail.dev)
+
 ## Install
 
 [![JSR](https://jsr.io/badges/@might/fail)](https://jsr.io/@might/fail)
 [![npm version](https://img.shields.io/npm/v/might-fail.svg)](https://www.npmjs.com/package/might-fail)
 
 
-
 ## Style 
 
 There's three different styles to choose from and they all work the same way, but you can choose your favorite API. 
 
 All examples are in the default style, but you **can** use any of the three styles.
 
-### Default 
+
+### Tuple Style
 
 ```ts
 import { mightFail } from "might-fail"; // from "@might/fail"
 
-const { error, result } = await mightFail(promise);
+const [error, result] = await mightFail(promise);
 ```
 
-### Tuple Style
+### Object Style
 
 ```ts
-import { mightFail } from "might-fail/tuple"; // from "@might/fail/tuple"
+import { mightFail } from "might-fail"; // from "@might/fail"
 
-const [error, result] = await mightFail(promise);
+const { error, result } = await mightFail(promise);
 ```
 
 ### Go Style
@@ -49,7 +53,7 @@ const [result, error] = await mightFail(promise);
 ### Wrap Promise in `mightFail`
 
 ```ts
-const { error, result } = await mightFail(axios.get("/posts"));
+const [ error, result ] = await mightFail(axios.get("/posts"));
 
 if (error) {
   // handle error
@@ -63,7 +67,7 @@ posts.map((post) => console.log(post.title));
 **or:**
 
 ```ts
-const { error: networkError, result } = await mightFail(fetch("/posts"));
+const [ networkError, result ] = await mightFail(fetch("/posts"));
 
 if (networkError) {
   // handle network error
@@ -75,7 +79,7 @@ if (!result.ok) {
   return;
 }
 
-const { error: convertToJSONError, result: posts } = await mightFail(
+const [ convertToJSONError, posts ] = await mightFail(
   result.json()
 );
 
@@ -91,7 +95,7 @@ posts.map((post) => console.log(post.title));
 
 ```ts
 const get = makeMightFail(axios.get);
-const { error, result } = await get("/posts");
+const [ error, result ] = await get("/posts");
 
 if (error) {
   // handle error
@@ -108,7 +112,7 @@ posts.map((post) => console.log(post.title));
 ### Wrap throwing functions in `mightFailSync`
 
 ```ts
-const {error, result} = mightFailSync(() => JSON.parse("")); // JSON.parse might throw
+const [ error, result ] = mightFailSync(() => JSON.parse("")); // JSON.parse might throw
 if (error) {
   console.error('Parsing failed:', error);
   return
@@ -124,7 +128,7 @@ function parseJSON(jsonString: string) {
 }
 const safeParseJSON = makeMightFailSync(parseJSON);
 
-const { error, result } = safeParseJSON("");
+const [ error, result ] = safeParseJSON("");
 
 if (error) {
   console.error("Parsing failed:", error);

docs/README.md

@@ -0,0 +1,221 @@
+## Might Fail Docs
+
+### Blocks
+
+#### YouTube
+
+```mdx
+<YouTube videoId="PbkwqVZsUgs" startTime={230} />
+```
+
+#### Example Block
+
+```mdx
+<SideBySide ratio="3:5">
+<ExampleCard>
+Return a single root element, div or empty tag `<>`
+</ExampleCard>
+  \`\`\`some-component.jsx
+    // focus(1:2) 
+  return (
+    <div>
+      <h1 className="header">Hello</h1>
+      <h2>World</h2>
+      <img className="image" src="https://picsum.photos/200" alt="random"></img>
+    </div>
+  )
+  \`\`\`
+</SideBySide>
+```
+
+#### Instruction Block 
+
+```mdx
+<Instruction>
+  <Instruction.Action step={1}>
+    Add this code to your thing:
+  </Instruction.Action>
+  <Instruction.Implementation>
+
+  ```App.js
+  return (
+      <div className="App">
+        <h1 className="heading">Hello</h1>
+        <h2>World</h2>
+        <h3>{new Date().toString()}</h3>
+      </div>
+  )
+  ```
+  </Instruction.Implementation>
+</Instruction>
+```
+
+```mdx
+<Instruction ratio="">
+type Ratio = "1" | "1:1" | "2:3" | "3:2" | "3:5" | "5:3" | "4:7" | "1:2" | "1:0" | "0:1"
+```
+
+#### Tabs 
+
+```
+<Tabs>
+  <Tab name="npx">
+    ```sh
+    npx create-next-app@latest
+    ```
+  </Tab>
+  <Tab name="yarn">
+    ```sh
+    yarn create next-app
+    ```
+  </Tab>
+  <Tab name="pnpm">
+    ```sh
+    pnpm create next-app
+    ```
+  </Tab>
+  <Tab name="bunx">
+    ```sh
+    bunx create-next-app
+    ```
+  </Tab>
+</Tabs>
+```
+
+## Card 
+
+```
+<Card>
+</Card>
+```
+
+## File Tree 
+
+```mdx
+<Card>
+<FileTree focus={[{depth: number, item: number}]}>
+  - src 
+   - app
+    - page.tsx
+</FileTree>
+</Card>
+```
+
+```mdx 
+<Instruction ratio="1:1">
+  <Instruction.Action  step={1}>
+    Create a new file inside of `create-post` called `page.tsx`.
+  </Instruction.Action>
+  <Instruction.Implementation>
+    <Card>
+      <FileTree focus={[{depth: 4, item: 1}]}>
+      - src
+        - app 
+          - page.tsx 
+          - create-post (`/create-post` route)
+            - page.tsx (UI)
+      </FileTree>
+    </Card>
+  </Instruction.Implementation>
+</Instruction>
+```
+
+## Code
+
+```mdx
+<CodeWithOutput>
+  ```users.ts
+  import { pgTable, text, varchar, timestamp } from "drizzle-orm/pg-core"
+
+  export const users = pgTable("users", {
+    id: text("id").primaryKey(),
+    username: varchar("username", { length: 30 }).notNull(),
+    firstName: varchar("first_name", { length: 50 }).notNull(),
+    lastName: varchar("last_name", { length: 50 }).notNull(),
+    avatar: text("avatar").notNull(),
+    createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
+  })
+  ```
+  ```sql
+  CREATE TABLE IF NOT EXISTS "users" (
+    "id" text PRIMARY KEY NOT NULL,
+    "username" varchar(30) NOT NULL,
+    "first_name" varchar(50) NOT NULL,
+    "last_name" varchar(50) NOT NULL,
+    "avatar" text NOT NULL,
+    "created_at" timestamp with time zone DEFAULT now() NOT NULL
+  );
+  ```
+</CodeWithOutput>
+```
+
+
+```mdx
+<CodeTabs>
+  ```/home/ubuntu/index.html
+  <!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Hello World</title>
+  </head>
+  <body>
+    <h1>Hello World</h1>
+    <p>🌎</p>
+  </body>
+  </html>
+  ```
+  ```/home/ubuntu/404.html
+  <!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>404 - Page Not Found</title>
+  </head>
+  <body>
+    <h1>404 - Page not found</h1>
+    <p>🤷‍♀️</p>
+  </body>
+  </html>
+  ```
+</CodeTabs>
+```
+
+**Not yet fully working:**
+```mdx
+<CodeSideBySide>
+  ```users.ts
+  // toolbar sql
+  import { text, varchar, pgTable, timestamp } from "drizzle-orm/pg-core"
+
+  export const users = pgTable("users", {
+    id: text("id").primaryKey(),
+    username: varchar("username", { length: 30 }).notNull(),
+    firstName: varchar("first_name", { length: 50 }).notNull(),
+    lastName: varchar("last_name", { length: 50 }).notNull(),
+    avatar: text("avatar").notNull(),
+    createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
+  })
+  ```
+  ```schema.sql
+  -- toolbar sql
+  CREATE TABLE IF NOT EXISTS "users" (
+    "id" text PRIMARY KEY NOT NULL,
+    "username" varchar(30) NOT NULL,
+    "first_name" varchar(50) NOT NULL,
+    "last_name" varchar(50) NOT NULL,
+    "avatar" text NOT NULL,
+    "created_at" timestamp with time zone DEFAULT now() NOT NULL
+  );
+  ```
+</CodeSideBySide>
+```
+
+## Image
+
+The image path needs to be aboslute to where it is in the markdown system.
+append dark or light to the end of the image path to switch between the two.
+
+```md
+![Create Project](/part-2/10-setup-neon-images/project-creation-dark.png) ![Create Project](/part-2/10-setup-neon-images/project-creation-light.png)
+```