diff --git a/.gitignore b/.gitignore index 41c105e..fa92a06 100644 --- a/.gitignore +++ b/.gitignore @@ -78,6 +78,13 @@ android/keystores/debug.keystore # generated by bob lib/ +# Docs site (Next.js / Fumadocs) +.next/ +.source/ +next-env.d.ts +*.tsbuildinfo +.vercel + # React Native Codegen ios/generated android/generated diff --git a/.prettierignore b/.prettierignore index 7042d2b..dcbc02f 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,4 @@ lib build +.next +.source diff --git a/AGENTS.md b/AGENTS.md index 6a54ac5..f6258fa 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -6,7 +6,7 @@ 2. YOU MUST NOT commit changes yourself until I explicitly tell you to. 3. YOU MUST NOT create summary documents unless you are told to. 4. YOU MUST NOT add code comments that are obvious. -5. Always update relevant docs in `docs/` when making changes to components or APIs. +5. Always update relevant docs in `docs/content/docs/` (MDX) when making changes to components or APIs. ## Project Overview @@ -24,6 +24,8 @@ ios/ # iOS native (Objective-C) android/ # Android native (Kotlin) plugin/ # Expo config plugin example/bare/ # Bare React Native example app +docs/ # Documentation site (Next.js + Fumadocs), deployed to maps.lodev09.com +docs/content/docs/ # MDX documentation pages ``` ### Creating a Pull Request diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6dfd86f..14883f1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -137,6 +137,11 @@ The `package.json` file contains various scripts for common tasks: - `yarn expo start`: start the Metro server for the Expo example app. - `yarn expo android`: run the Expo example app on Android. - `yarn expo ios`: run the Expo example app on iOS. +- `yarn docs dev`: start the documentation site locally. + +### Documentation + +The documentation site lives in `docs/` and is built with [Next.js](https://nextjs.org/) and [Fumadocs](https://fumadocs.dev/). Pages are MDX files in `docs/content/docs/`. When you change a component or API, update the matching page there. The site deploys to [maps.lodev09.com](https://maps.lodev09.com). ### Sending a pull request diff --git a/README.md b/README.md index 2ae58b9..a0b86c3 100644 --- a/README.md +++ b/README.md @@ -2,82 +2,31 @@ Universal maps for your React Native apps ๐Ÿ“ -@lugg/maps +@lugg/maps > [!IMPORTANT] > This library is currently under heavy development. APIs may change without notice. -## Installation +## Documentation -```sh -npm install @lugg/maps -``` - -### Expo - -Add the plugin to your `app.json`: - -```json -{ - "expo": { - "plugins": [ - [ - "@lugg/maps", - { - "iosGoogleMapsApiKey": "YOUR_IOS_API_KEY", - "androidGoogleMapsApiKey": "YOUR_ANDROID_API_KEY" - } - ] - ] - } -} -``` +Full documentation lives at **[maps.lodev09.com](https://maps.lodev09.com)**. -### Bare React Native +- [Installation](https://maps.lodev09.com/docs/installation) - Expo, bare React Native, and web setup +- [Usage](https://maps.lodev09.com/docs/usage) - Render your first map +- [MapView](https://maps.lodev09.com/docs/components/map-view) - Props, camera methods, events, static maps +- [Marker](https://maps.lodev09.com/docs/components/marker) - Custom views, callouts, dragging +- [Polyline](https://maps.lodev09.com/docs/components/polyline), [Polygon](https://maps.lodev09.com/docs/components/polygon), [Circle](https://maps.lodev09.com/docs/components/circle) - Shapes +- [GeoJson](https://maps.lodev09.com/docs/components/geojson), [GroundOverlay](https://maps.lodev09.com/docs/components/ground-overlay), [TileOverlay](https://maps.lodev09.com/docs/components/tile-overlay) - Data and overlays +- [Types](https://maps.lodev09.com/docs/types) - `Coordinate`, `Point`, `EdgeInsets` -#### iOS +## Quick start -Add your Google Maps API key to `AppDelegate.swift`: - -```swift -import GoogleMaps - -// In application(_:didFinishLaunchingWithOptions:) -GMSServices.provideAPIKey("YOUR_API_KEY") -``` - -#### Android - -Add your Google Maps API key to `AndroidManifest.xml`: - -```xml - - - -``` - -### Web - -Wrap your app with `MapProvider` and pass your Google Maps API key: - -```tsx -import { MapProvider } from '@lugg/maps'; - -function App() { - return ( - - {/* Your app */} - - ); -} +```sh +npm install @lugg/maps ``` -## Usage - ```tsx -import { MapView, Marker, Polyline, Polygon } from '@lugg/maps'; +import { MapView, Marker } from '@lugg/maps'; - - ``` -## Components - -- [MapView](docs/MAPVIEW.md) - Main map component -- [Marker](docs/MARKER.md) - Map markers with callout support -- [Polyline](docs/POLYLINE.md) - Draw lines on the map -- [Polygon](docs/POLYGON.md) - Draw filled shapes on the map -- [Circle](docs/CIRCLE.md) - Draw circular overlays on the map -- [GeoJson](docs/GEOJSON.md) - Render GeoJSON data on the map -- [GroundOverlay](docs/GROUND_OVERLAY.md) - Display images on the map -- [TileOverlay](docs/TILE_OVERLAY.md) - Display custom tile layers on the map - -## Types - -See [Types](docs/TYPES.md) for common type definitions (`Coordinate`, `Point`, `EdgeInsets`). +Google Maps needs an API key on every platform. See [Installation](https://maps.lodev09.com/docs/installation) for Expo, iOS, Android, and web setup. ## Contributing diff --git a/docs/AGENTS.md b/docs/AGENTS.md new file mode 100644 index 0000000..643577d --- /dev/null +++ b/docs/AGENTS.md @@ -0,0 +1,9 @@ + + +# This is NOT the Next.js you know + +This version has breaking changes โ€” APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices. + +This block is written and re-added by `next dev` โ€” verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean. + + diff --git a/docs/CLAUDE.md b/docs/CLAUDE.md new file mode 100644 index 0000000..43c994c --- /dev/null +++ b/docs/CLAUDE.md @@ -0,0 +1 @@ +@AGENTS.md diff --git a/docs/app/(home)/layout.tsx b/docs/app/(home)/layout.tsx new file mode 100644 index 0000000..77379fa --- /dev/null +++ b/docs/app/(home)/layout.tsx @@ -0,0 +1,6 @@ +import { HomeLayout } from 'fumadocs-ui/layouts/home'; +import { baseOptions } from '@/lib/layout.shared'; + +export default function Layout({ children }: LayoutProps<'/'>) { + return {children}; +} diff --git a/docs/app/(home)/page.tsx b/docs/app/(home)/page.tsx new file mode 100644 index 0000000..2f5550d --- /dev/null +++ b/docs/app/(home)/page.tsx @@ -0,0 +1,414 @@ +import Link from 'next/link'; +import { + ArrowRight, + Camera, + Globe, + Image as ImageIcon, + Layers, + LayoutGrid, + MapPin, + Rows3, + Route, + Zap, +} from 'lucide-react'; +import { CodeSample } from '@/components/code-sample'; +import { GithubIcon } from '@/components/github-icon'; +import { InstallCommand } from '@/components/install-command'; +import { Logo } from '@/components/logo'; +import { MapIllustration } from '@/components/map-illustration'; +import { GITHUB_URL } from '@/lib/layout.shared'; +import { + createMetadata, + SITE_DESCRIPTION, + SITE_NAME, + SITE_URL, +} from '@/lib/metadata'; +import pkg from '../../../package.json'; + +const HOME_TITLE = `${SITE_NAME} ยท Universal maps for React Native`; + +export const metadata = { + ...createMetadata({ + title: HOME_TITLE, + description: SITE_DESCRIPTION, + path: '/', + }), + title: { absolute: HOME_TITLE }, +}; + +const JSON_LD = [ + { + '@context': 'https://schema.org', + '@type': 'WebSite', + 'name': SITE_NAME, + 'url': SITE_URL, + 'description': SITE_DESCRIPTION, + }, + { + '@context': 'https://schema.org', + '@type': 'SoftwareSourceCode', + 'name': SITE_NAME, + 'description': SITE_DESCRIPTION, + 'url': SITE_URL, + 'codeRepository': GITHUB_URL, + 'programmingLanguage': ['TypeScript', 'Kotlin', 'Objective-C'], + 'runtimePlatform': 'React Native', + 'license': 'https://opensource.org/licenses/MIT', + 'version': pkg.version, + 'author': { '@type': 'Organization', 'name': 'Lugg', 'url': GITHUB_URL }, + }, +]; + +const USAGE = `import { MapView, Marker, Polyline } from '@lugg/maps'; + +export function Map() { + return ( + + + + + ); +}`; + +const FEATURES = [ + { + icon: Layers, + title: 'Two providers, one API', + description: + 'Apple Maps or Google Maps on iOS. Google Maps on Android and the web. Switch with a single prop.', + }, + { + icon: Zap, + title: 'Built for Fabric', + description: + 'New Architecture from day one. Codegen specs, direct C++ communication, no bridge.', + }, + { + icon: MapPin, + title: 'Markers, your way', + description: + 'Native pins or any React view. Callouts, drag gestures, rotation, scaling, and z-ordering.', + }, + { + icon: Route, + title: 'Lines and shapes', + description: + 'Polylines with gradient strokes and snake animation. Polygons with holes. Circles.', + }, + { + icon: Globe, + title: 'GeoJSON', + description: + 'Drop in a FeatureCollection. Styled with simplestyle-spec, customizable per feature.', + }, + { + icon: ImageIcon, + title: 'Overlays', + description: + 'Ground image overlays pinned to geographic bounds and custom tile layers from any server.', + }, + { + icon: Rows3, + title: 'Static maps for lists', + description: + 'Snapshot maps rendered off the main thread and cached, so long lists stay smooth.', + }, + { + icon: Camera, + title: 'Camera control', + description: + 'moveCamera, fitCoordinates, and setEdgeInsets with animation. Camera events as you pan.', + }, +]; + +const COMPONENTS = [ + { + name: 'MapView', + href: '/docs/components/map-view', + description: 'The map itself. Providers, camera, gestures, static mode.', + }, + { + name: 'Marker', + href: '/docs/components/marker', + description: 'Pins with custom views, callouts, and dragging.', + }, + { + name: 'Polyline', + href: '/docs/components/polyline', + description: 'Lines with gradient strokes and animation.', + }, + { + name: 'Polygon', + href: '/docs/components/polygon', + description: 'Filled shapes with optional holes.', + }, + { + name: 'Circle', + href: '/docs/components/circle', + description: 'Radius-based circular overlays.', + }, + { + name: 'GeoJson', + href: '/docs/components/geojson', + description: 'Render GeoJSON features directly.', + }, + { + name: 'GroundOverlay', + href: '/docs/components/ground-overlay', + description: 'Images stretched over geographic bounds.', + }, + { + name: 'TileOverlay', + href: '/docs/components/tile-overlay', + description: 'Custom raster tile layers.', + }, +]; + +const PLATFORMS = [ + { name: 'iOS', providers: 'Apple Maps ยท Google Maps' }, + { name: 'Android', providers: 'Google Maps' }, + { name: 'Web', providers: 'Google Maps' }, +]; + +export default function HomePage() { + return ( +
+