diff --git a/apps/www/components/ui/badge.tsx b/apps/www/components/ui/badge.tsx new file mode 100644 index 000000000..58481a75d --- /dev/null +++ b/apps/www/components/ui/badge.tsx @@ -0,0 +1,31 @@ +import { cva, type VariantProps } from "class-variance-authority"; +import type * as React from "react"; +import { cn } from "~/lib/utils"; + +export const badgeVariants = cva( + "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +export const Badge = ({ className, variant, ...props }: BadgeProps) => ( +
+); diff --git a/apps/www/content/docs/guides/import-options.mdx b/apps/www/content/docs/guides/import-options.mdx deleted file mode 100644 index 3ae345e49..000000000 --- a/apps/www/content/docs/guides/import-options.mdx +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Integrating with VS Code -icon: New -description: Get syntax highlighting and enhanced developer experience with the ArkType VS Code extension ---- - -## ArkType VS Code Extension - -The [ArkType VS Code extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides syntax highlighting and inline error summaries for ArkType definitions, making your development experience with ArkEnv much more pleasant. - - - -### Installation - -1. Open VS Code -2. Go to Extensions (Ctrl+Shift+X) -3. Search for "ArkType" -4. Install the extension by arktypeio - -## Getting Syntax Highlighting - -To get syntax highlighting for your ArkEnv schemas, use the **default import** and name it `arkenv`: - -```typescript -import arkenv from 'arkenv'; - -const env = arkenv({ - PORT: "number.port", - NODE_ENV: "'development' | 'production' | 'test'", -}); -``` - -### Example with Syntax Highlighting - -![ArkType syntax highlighting in VS Code](/dx.png) - -### Benefits - -When you use the default import (`import arkenv from 'arkenv'`) and have the ArkType extension installed, you get: - -- **Syntax highlighting** for ArkType definitions in your schema -- **Inline error summaries** via ErrorLens integration -- **Better developer experience** with visual feedback - -## Alternative Import Styles - -You can also use named imports, though you won't get syntax highlighting: - -```typescript -import { createEnv } from 'arkenv'; - -const env = createEnv({ - PORT: "number.port", - NODE_ENV: "'development' | 'production' | 'test'", -}); -``` - -## Migration Guide - -If you're currently using named imports and want to switch to default imports for better VS Code support: - -### Before -```typescript -import { createEnv } from 'arkenv'; - -const env = createEnv({ - PORT: "number.port", -}); -``` - -### After -```typescript -import arkenv from 'arkenv'; - -const env = arkenv({ - PORT: "number.port", -}); -``` - -The functionality is identical - only the import style changes! - -## Best Practices - -- **Use default import** if you're using VS Code and want enhanced syntax highlighting -- **Use named import** if you prefer explicit imports or are using other editors -- **Be consistent** within your project - choose one style and stick with it -- **Install the ArkType extension** for the best development experience diff --git a/apps/www/content/docs/guides/type-function.mdx b/apps/www/content/docs/guides/type-function.mdx index b1141b932..b90ff2e1f 100644 --- a/apps/www/content/docs/guides/type-function.mdx +++ b/apps/www/content/docs/guides/type-function.mdx @@ -1,5 +1,5 @@ --- -title: "Type Function" +title: "type function" description: "Learn about ArkEnv's advanced type function for runtime validation with built-in environment-specific types." --- diff --git a/apps/www/content/docs/integrations/jetbrains.mdx b/apps/www/content/docs/integrations/jetbrains.mdx new file mode 100644 index 000000000..c24e4e84e --- /dev/null +++ b/apps/www/content/docs/integrations/jetbrains.mdx @@ -0,0 +1,25 @@ +--- +title: Integrating with JetBrains IDEs +description: Syntax highlighting and improved developer experience with JetBrains IDEs +--- + +## ArkType JetBrains Extension: Syntax Highlighting + +The [ArkType extension](https://plugins.jetbrains.com/plugin/27099-arktype) provides syntax highlighting for ArkEnv. + + + +To integrate ArkEnv, use the **default import** and name it `arkenv`: + +```typescript +import arkenv from 'arkenv'; + +const env = arkenv({ + PORT: "number.port", + NODE_ENV: "'development' | 'production' | 'test'", +}); +``` diff --git a/apps/www/content/docs/integrations/vscode.mdx b/apps/www/content/docs/integrations/vscode.mdx new file mode 100644 index 000000000..a440a4905 --- /dev/null +++ b/apps/www/content/docs/integrations/vscode.mdx @@ -0,0 +1,31 @@ +--- +title: Integrating with VS Code & Cursor +description: Syntax highlighting and improved developer experience with VS Code extensions +--- + +## ArkType VS Code Extension: Syntax Highlighting and ErrorLens + +The [ArkType extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides syntax highlighting and inline error summaries for ArkEnv. + + + +To integrate ArkEnv, use the **default import** and name it `arkenv`: + +```typescript +import arkenv from 'arkenv'; + +const env = arkenv({ + PORT: "number.port", + NODE_ENV: "'development' | 'production' | 'test'", +}); +``` + +## ArkThemes: Special Highlighting + +For an even better DX, [ArkThemes](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkthemes) provides special highlighting for TypeScript generics in ArkType definitions. + +![ArkType syntax highlighting in VS Code](/dx.png) \ No newline at end of file diff --git a/apps/www/content/docs/meta.json b/apps/www/content/docs/meta.json index 8f8edd785..d873707d3 100644 --- a/apps/www/content/docs/meta.json +++ b/apps/www/content/docs/meta.json @@ -4,9 +4,10 @@ "index", "quickstart", "examples", + "---[New]Integrations---", + "[Blocks][VS Code & Cursor](/docs/integrations/vscode)", + "[Blocks][JetBrains IDEs](/docs/integrations/jetbrains)", "---Guides---", - "guides/import-options", - "guides/type-function", "guides/environment-configuration" ] } diff --git a/apps/www/lib/source.ts b/apps/www/lib/source.ts deleted file mode 100644 index 8ae88bf0d..000000000 --- a/apps/www/lib/source.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { loader } from "fumadocs-core/source"; -import { icons } from "lucide-react"; -import { createElement } from "react"; -import { docs } from "~/.source"; - -function createNewElement() { - return createElement( - "span", - { - className: - "bg-gradient-to-r from-yellow-400 to-yellow-100 text-amber-800 px-1.5 py-0.5 rounded text-xs font-medium", - "data-new": "true", - }, - "New", - ); -} - -export const source = loader({ - baseUrl: "/docs", - source: docs.toFumadocsSource(), - icon(icon) { - if (!icon) { - // You may set a default icon - return; - } - - if (icon === "New") return createNewElement(); - - if (icon in icons) return createElement(icons[icon as keyof typeof icons]); - }, -}); diff --git a/apps/www/lib/source.tsx b/apps/www/lib/source.tsx new file mode 100644 index 000000000..a09f9293d --- /dev/null +++ b/apps/www/lib/source.tsx @@ -0,0 +1,33 @@ +import type { autocomplete } from "@ark/util"; +import { loader } from "fumadocs-core/source"; +import { icons } from "lucide-react"; +import { createElement } from "react"; +import { docs } from "~/.source"; +import { Badge } from "~/components/ui/badge"; + +// function createNewElement() { +// return createElement( +// "span", +// { +// className: +// "bg-gradient-to-r from-yellow-400 to-yellow-100 text-amber-800 px-1.5 py-0.5 rounded text-xs font-medium", +// "data-new": "true", +// }, +// "New", +// ); +// } +export type IconName = keyof typeof icons | "New"; + +export const source = loader({ + baseUrl: "/docs", + source: docs.toFumadocsSource(), + icon(icon?: autocomplete) { + if (!icon) return; + + if (icon in icons) return createElement(icons[icon as never]); + if (icon === "New") + return new; + + throw new Error(`${icon} is not a valid icon`); + }, +}); diff --git a/apps/www/package.json b/apps/www/package.json index 347795ad2..c7067f8ed 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -7,7 +7,8 @@ "dev": "next dev", "start": "next start", "postinstall": "fumadocs-mdx", - "clean": "rimraf node_modules .next .source" + "clean": "rimraf node_modules .next .source", + "fix": "pnpm -w run fix" }, "dependencies": { "@icons-pack/react-simple-icons": "^13.7.0", @@ -31,13 +32,14 @@ "tailwindcss-animate": "^1.0.7" }, "devDependencies": { + "@ark/util": "^0.49.0", + "@tailwindcss/postcss": "^4.1.13", + "@types/mdx": "^2.0.13", "@types/node": "24.3.1", "@types/react": "^19.1.12", "@types/react-dom": "^19.1.9", - "typescript": "^5.9.2", - "@types/mdx": "^2.0.13", - "@tailwindcss/postcss": "^4.1.13", + "postcss": "^8.5.6", "tailwindcss": "^4.1.13", - "postcss": "^8.5.6" + "typescript": "^5.9.2" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f93bb432..e4d1b4bf6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -152,6 +152,9 @@ importers: specifier: ^1.0.7 version: 1.0.7(tailwindcss@4.1.13) devDependencies: + '@ark/util': + specifier: ^0.49.0 + version: 0.49.0 '@tailwindcss/postcss': specifier: ^4.1.13 version: 4.1.13