Init and deploy documentation for Nuxt Leaflet

.github/workflows/deploy-docs.yml

@@ -0,0 +1,64 @@
+# Sample workflow for building and deploying a VitePress site to GitHub Pages
+#
+name: Deploy VitePress site to Pages
+
+on:
+  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
+  # using the `master` branch as the default branch.
+  push:
+    branches: [main]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      # - uses: pnpm/action-setup@v3 # Uncomment this if you're using pnpm
+      # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm # or pnpm / yarn
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: npm ci # or pnpm install / yarn install / bun install
+      - name: Build with VitePress
+        run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -54,3 +54,7 @@ coverage
 Network Trash Folder
 Temporary Items
 .apdisk
+
+# Vitepress Docs
+docs/.vitepress/dist
+docs/.vitepress/cache

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.tabSize": 2,
+}

docs/.vitepress/config.ts

@@ -0,0 +1,68 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "Nuxt Leaflet",
+  description: "Documentation for the Nuxt Leaflet module",
+  head: [['link', { rel: 'icon', href: '/Nuxt-Leaflet/favicon.ico' }]],
+  base: '/Nuxt-Leaflet/',
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Quick Start', link: '/getting-started/installation' },
+      { text: 'Components', link: '/components/index' }
+    ],
+
+    sidebar: [
+      {
+        text: 'Getting Started',
+        items: [
+          { text: 'Installation', link: '/getting-started/installation' },
+          { text: 'Usage', link: '/getting-started/usage' }
+        ]
+      },
+      {
+        text: 'Components',
+        items: [
+          { text: 'Introduction', link: '/components/introduction' },
+          { text: 'LCircle', link: '/components/l-circle' },
+          { text: 'LCircleMarker', link: '/components/l-circle-marker' },
+          { text: 'LControlAttribution', link: '/components/l-control-attribution' },
+          { text: 'LControlLayers', link: '/components/l-control-layers' },
+          { text: 'LControlScale', link: '/components/l-control-scale' },
+          { text: 'LControlZoom', link: '/components/l-control-zoom' },
+          { text: 'LControl', link: '/components/l-control' },
+          { text: 'LFeatureGroup', link: '/components/l-feature-group' },
+          { text: 'LGeoJson', link: '/components/l-geo-json' },
+          { text: 'LGridLayer', link: '/components/l-grid-layer' },
+          { text: 'LIcon', link: '/components/l-icon' },
+          { text: 'LImageOverlay', link: '/components/l-image-overlay' },
+          { text: 'LLayerGroup', link: '/components/l-layer-group' },
+          { text: 'LMap', link: '/components/l-map' },
+          { text: 'LMarker', link: '/components/l-marker' },
+          { text: 'LPolygon', link: '/components/l-polygon' },
+          { text: 'LPolyline', link: '/components/l-polyline' },
+          { text: 'LPopup', link: '/components/l-popup' },
+          { text: 'LRectangle', link: '/components/l-rectangle' },
+          { text: 'LTileLayer', link: '/components/l-tile-layer' },
+          { text: 'LTooltip', link: '/components/l-tooltip' },
+          { text: 'LWmsTileLayer', link: '/components/l-wms-tile-layer' },
+        ]
+      },
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Using L', link: '/guide/using-l' },
+          { text: 'Accessing Map Instance', link: '/guide/accessing-map-instance' },
+          { text: 'Leaflet Draw (Experimental)', link: '/guide/leaflet-draw' }
+        ]
+      }
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/Gugustinette/Nuxt-Leaflet' },
+      { icon: 'npm', link: 'https://www.npmjs.com/package/nuxt3-leaflet' }
+    ]
+  }
+})

docs/.vitepress/theme/custom.css

@@ -0,0 +1,49 @@
+/* Note : colors were taken from Nuxt branding */
+:root {
+  /* Brand Primary Color */
+  --vp-c-brand-1: #03C169;
+  --vp-c-brand-2: #03C169;
+
+  --vp-button-brand-bg: #03C169;
+
+  /* Backgrounds */
+  --vp-c-bg-alt: #F8FAFC;
+  --vp-c-bg-soft: #F8FAFC;
+
+  /* Sidebar */
+  --vp-sidebar-bg-color: #F8FAFC;
+
+  /* Gray */
+  --vp-c-gray-3: #F8FAFC;
+}
+
+.dark {
+  /* Brand Primary Color */
+  --vp-c-brand-1: #00DC82;
+  --vp-c-brand-2: #00DC82;
+
+  --vp-button-brand-bg: #00DC82;
+
+  /* Backgrounds */
+  --vp-c-bg: #020420;
+  --vp-c-bg-alt: #121A31;
+  --vp-c-bg-elv: #020420;
+  --vp-c-bg-soft: #121A31;
+
+  /* Sidebar */
+  --vp-sidebar-bg-color: #020420;
+
+  /* Gray */
+  --vp-c-gray-3: #121A31;
+
+  /* Primary Button */
+  --vp-button-brand-text: #0F172A;
+  --vp-button-brand-hover-text: #0F172A;
+  --vp-button-brand-active-text: #0F172A;
+  --vp-button-brand-hover-bg: #03C169;
+}
+
+/* Leaflet specific style */
+.leaflet-container {
+  z-index: 0 !important;
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme

docs/components/introduction.md

@@ -0,0 +1,36 @@
+---
+outline: deep
+---
+
+::: info
+Further documentation for these components was highly inspired from [Vue2 Leaflet Documentation](https://vue2-leaflet.netlify.app/components/), [Vue Leaflet Demo](https://github.com/vue-leaflet/vue-leaflet/tree/master/src/playground/views) and the original [Leaflet Documentation](https://leafletjs.com/).
+
+If you find any errors, please open an issue on the [GitHub repository](https://github.com/gugustinette/Nuxt-Leaflet).
+Props and events can be verified by looking at the [vue-leaflet components](https://github.com/vue-leaflet/vue-leaflet/tree/master/src/components).
+:::
+
+# Components
+
+The module automatically registers the following components from [Vue Leaflet](https://github.com/vue-leaflet/vue-leaflet) :
+
+- `LCircle`
+- `LCircleMarker`
+- `LControl`
+- `LControlAttribution`
+- `LControlLayers`
+- `LControlScale`
+- `LControlZoom`
+- `LFeatureGroup`
+- `LGeoJson`
+- `LIcon`
+- `LImageOverlay`
+- `LLayerGroup`
+- `LMap`
+- `LMarker`
+- `LPolygon`
+- `LPolyline`
+- `LPopup`
+- `LRectangle`
+- `LTileLayer`
+- `LTooltip`
+- `LWmsTileLayer`

docs/components/l-circle-marker.md

@@ -0,0 +1,69 @@
+---
+outline: deep
+---
+
+# LCircleMarker
+
+> A circle of a fixed size with radius specified in pixels.
+
+## Demo
+
+<script setup>
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import { LMap, LTileLayer, LCircleMarker } from '@vue-leaflet/vue-leaflet';
+</script>
+
+<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
+  <LTileLayer
+    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
+    layer-type="base"
+    name="OpenStreetMap"
+  />
+  <LCircleMarker
+    :lat-lng="[47.21322, -1.559482]"
+    :radius="6"
+    :color="'red'"
+  />
+</LMap>
+
+```vue{8-12}
+<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
+  <LTileLayer
+    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
+    layer-type="base"
+    name="OpenStreetMap"
+  />
+  <LCircleMarker
+    :lat-lng="[47.21322, -1.559482]"
+    :radius="6"
+    :color="'red'"
+  />
+</LMap>
+```
+
+## Props
+
+| Prop name | Description                          | Type                                                                                                                                                                   | Required | Default |
+| --------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
+| radius    | Radius of the marker in pixels       | Number                                                                                                                                                                 | true     | 10      |
+| latLng    | Latitude and longitude of the marker | object\|array as [L.LatLngExpression](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/45d34da16d9556b29be0469dbb66337735690feb/types/leaflet/v0/index.d.ts#L4) | true     | [0, 0]  |
+
+### Inherited props
+
+<!--@include: ./props/path-props.md-->
+
+## Events
+
+| Event name     | Type    | Description                                        |
+| -------------- | ------- | -------------------------------------------------- |
+| update:visible | boolean | Triggers when the visible prop needs to be updated |
+| ready          | object  | Triggers when the component is ready               |
+
+## Slots
+
+| Name    | Description | Bindings |
+| ------- | ----------- | -------- |
+| default |             |          |

docs/components/l-circle.md

@@ -0,0 +1,71 @@
+---
+outline: deep
+---
+
+# LCircle
+
+> Draw a path in the shape of a circle around a center positioned at `latLng` coordinates.
+
+> It's an approximation and starts to diverge from a real circle closer to the poles (due to projection distortion).
+
+## Demo
+
+<script setup>
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import { LMap, LTileLayer, LCircle } from '@vue-leaflet/vue-leaflet';
+</script>
+
+<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
+  <LTileLayer
+    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
+    layer-type="base"
+    name="OpenStreetMap"
+  />
+  <LCircle
+    :lat-lng="[47.21322, -1.559482]"
+    :radius="4500"
+    :color="'red'"
+  />
+</LMap>
+
+```vue{8-12}
+<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
+  <LTileLayer
+    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
+    layer-type="base"
+    name="OpenStreetMap"
+  />
+  <LCircle
+    :lat-lng="[47.21322, -1.559482]"
+    :radius="4500"
+    :color="'red'"
+  />
+</LMap>
+```
+
+## Props
+
+| Prop name | Description                          | Type                                                                                                                                                                   | Required | Default |
+| --------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
+| radius    | Radius of the circle, in meters      | Number                                                                                                                                                                 | true     | -       |
+| latLng    | Latitude and longitude of the marker | object\|array as [L.LatLngExpression](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/45d34da16d9556b29be0469dbb66337735690feb/types/leaflet/v0/index.d.ts#L4) | true     | [0, 0]  |
+
+### Inherited props
+
+<!--@include: ./props/path-props.md-->
+
+## Events
+
+| Event name     | Type    | Description                                        |
+| -------------- | ------- | -------------------------------------------------- |
+| update:visible | boolean | Triggers when the visible prop needs to be updated |
+| ready          | object  | Triggers when the component is ready               |
+
+## Slots
+
+| Name    | Description | Bindings |
+| ------- | ----------- | -------- |
+| default |             |          |