Skip to content

Commit 2188947

Browse files
GugustinetteGugustinette
authored
Merge pull request #14 from Gugustinette/init-docs
Init and deploy documentation for Nuxt Leaflet
2 parents 1c6a107 + 194ba24 commit 2188947

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+11296
-8150
lines changed

‎.github/workflows/deploy-docs.yml‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# Sample workflow for building and deploying a VitePress site to GitHub Pages
2+
#
3+
name: Deploy VitePress site to Pages
4+
5+
on:
6+
# Runs on pushes targeting the `main` branch. Change this to `master` if you're
7+
# using the `master` branch as the default branch.
8+
push:
9+
branches: [main]
10+
11+
# Allows you to run this workflow manually from the Actions tab
12+
workflow_dispatch:
13+
14+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
15+
permissions:
16+
contents: read
17+
pages: write
18+
id-token: write
19+
20+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
21+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
22+
concurrency:
23+
group: pages
24+
cancel-in-progress: false
25+
26+
jobs:
27+
# Build job
28+
build:
29+
runs-on: ubuntu-latest
30+
steps:
31+
- name: Checkout
32+
uses: actions/checkout@v4
33+
with:
34+
fetch-depth: 0 # Not needed if lastUpdated is not enabled
35+
# - uses: pnpm/action-setup@v3 # Uncomment this if you're using pnpm
36+
# - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
37+
- name: Setup Node
38+
uses: actions/setup-node@v4
39+
with:
40+
node-version: 20
41+
cache: npm # or pnpm / yarn
42+
- name: Setup Pages
43+
uses: actions/configure-pages@v4
44+
- name: Install dependencies
45+
run: npm ci # or pnpm install / yarn install / bun install
46+
- name: Build with VitePress
47+
run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
48+
- name: Upload artifact
49+
uses: actions/upload-pages-artifact@v3
50+
with:
51+
path: docs/.vitepress/dist
52+
53+
# Deployment job
54+
deploy:
55+
environment:
56+
name: github-pages
57+
url: ${{ steps.deployment.outputs.page_url }}
58+
needs: build
59+
runs-on: ubuntu-latest
60+
name: Deploy
61+
steps:
62+
- name: Deploy to GitHub Pages
63+
id: deployment
64+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,7 @@ coverage
5454
Network Trash Folder
5555
Temporary Items
5656
.apdisk
57+
58+
# Vitepress Docs
59+
docs/.vitepress/dist
60+
docs/.vitepress/cache

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"editor.tabSize": 2,
3+
}

‎docs/.vitepress/config.ts‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { defineConfig } from 'vitepress'
2+
3+
// https://vitepress.dev/reference/site-config
4+
export default defineConfig({
5+
title: "Nuxt Leaflet",
6+
description: "Documentation for the Nuxt Leaflet module",
7+
head: [['link', { rel: 'icon', href: '/Nuxt-Leaflet/favicon.ico' }]],
8+
base: '/Nuxt-Leaflet/',
9+
themeConfig: {
10+
// https://vitepress.dev/reference/default-theme-config
11+
nav: [
12+
{ text: 'Home', link: '/' },
13+
{ text: 'Quick Start', link: '/getting-started/installation' },
14+
{ text: 'Components', link: '/components/index' }
15+
],
16+
17+
sidebar: [
18+
{
19+
text: 'Getting Started',
20+
items: [
21+
{ text: 'Installation', link: '/getting-started/installation' },
22+
{ text: 'Usage', link: '/getting-started/usage' }
23+
]
24+
},
25+
{
26+
text: 'Components',
27+
items: [
28+
{ text: 'Introduction', link: '/components/introduction' },
29+
{ text: 'LCircle', link: '/components/l-circle' },
30+
{ text: 'LCircleMarker', link: '/components/l-circle-marker' },
31+
{ text: 'LControlAttribution', link: '/components/l-control-attribution' },
32+
{ text: 'LControlLayers', link: '/components/l-control-layers' },
33+
{ text: 'LControlScale', link: '/components/l-control-scale' },
34+
{ text: 'LControlZoom', link: '/components/l-control-zoom' },
35+
{ text: 'LControl', link: '/components/l-control' },
36+
{ text: 'LFeatureGroup', link: '/components/l-feature-group' },
37+
{ text: 'LGeoJson', link: '/components/l-geo-json' },
38+
{ text: 'LGridLayer', link: '/components/l-grid-layer' },
39+
{ text: 'LIcon', link: '/components/l-icon' },
40+
{ text: 'LImageOverlay', link: '/components/l-image-overlay' },
41+
{ text: 'LLayerGroup', link: '/components/l-layer-group' },
42+
{ text: 'LMap', link: '/components/l-map' },
43+
{ text: 'LMarker', link: '/components/l-marker' },
44+
{ text: 'LPolygon', link: '/components/l-polygon' },
45+
{ text: 'LPolyline', link: '/components/l-polyline' },
46+
{ text: 'LPopup', link: '/components/l-popup' },
47+
{ text: 'LRectangle', link: '/components/l-rectangle' },
48+
{ text: 'LTileLayer', link: '/components/l-tile-layer' },
49+
{ text: 'LTooltip', link: '/components/l-tooltip' },
50+
{ text: 'LWmsTileLayer', link: '/components/l-wms-tile-layer' },
51+
]
52+
},
53+
{
54+
text: 'Guide',
55+
items: [
56+
{ text: 'Using L', link: '/guide/using-l' },
57+
{ text: 'Accessing Map Instance', link: '/guide/accessing-map-instance' },
58+
{ text: 'Leaflet Draw (Experimental)', link: '/guide/leaflet-draw' }
59+
]
60+
}
61+
],
62+
63+
socialLinks: [
64+
{ icon: 'github', link: 'https://github.com/Gugustinette/Nuxt-Leaflet' },
65+
{ icon: 'npm', link: 'https://www.npmjs.com/package/nuxt3-leaflet' }
66+
]
67+
}
68+
})

‎docs/.vitepress/theme/custom.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/* Note : colors were taken from Nuxt branding */
2+
:root {
3+
/* Brand Primary Color */
4+
--vp-c-brand-1: #03C169;
5+
--vp-c-brand-2: #03C169;
6+
7+
--vp-button-brand-bg: #03C169;
8+
9+
/* Backgrounds */
10+
--vp-c-bg-alt: #F8FAFC;
11+
--vp-c-bg-soft: #F8FAFC;
12+
13+
/* Sidebar */
14+
--vp-sidebar-bg-color: #F8FAFC;
15+
16+
/* Gray */
17+
--vp-c-gray-3: #F8FAFC;
18+
}
19+
20+
.dark {
21+
/* Brand Primary Color */
22+
--vp-c-brand-1: #00DC82;
23+
--vp-c-brand-2: #00DC82;
24+
25+
--vp-button-brand-bg: #00DC82;
26+
27+
/* Backgrounds */
28+
--vp-c-bg: #020420;
29+
--vp-c-bg-alt: #121A31;
30+
--vp-c-bg-elv: #020420;
31+
--vp-c-bg-soft: #121A31;
32+
33+
/* Sidebar */
34+
--vp-sidebar-bg-color: #020420;
35+
36+
/* Gray */
37+
--vp-c-gray-3: #121A31;
38+
39+
/* Primary Button */
40+
--vp-button-brand-text: #0F172A;
41+
--vp-button-brand-hover-text: #0F172A;
42+
--vp-button-brand-active-text: #0F172A;
43+
--vp-button-brand-hover-bg: #03C169;
44+
}
45+
46+
/* Leaflet specific style */
47+
.leaflet-container {
48+
z-index: 0 !important;
49+
}

‎docs/.vitepress/theme/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import DefaultTheme from 'vitepress/theme'
2+
import './custom.css'
3+
4+
export default DefaultTheme

‎docs/components/introduction.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
outline: deep
3+
---
4+
5+
::: info
6+
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/).
7+
8+
If you find any errors, please open an issue on the [GitHub repository](https://github.com/gugustinette/Nuxt-Leaflet).
9+
Props and events can be verified by looking at the [vue-leaflet components](https://github.com/vue-leaflet/vue-leaflet/tree/master/src/components).
10+
:::
11+
12+
# Components
13+
14+
The module automatically registers the following components from [Vue Leaflet](https://github.com/vue-leaflet/vue-leaflet) :
15+
16+
- `LCircle`
17+
- `LCircleMarker`
18+
- `LControl`
19+
- `LControlAttribution`
20+
- `LControlLayers`
21+
- `LControlScale`
22+
- `LControlZoom`
23+
- `LFeatureGroup`
24+
- `LGeoJson`
25+
- `LIcon`
26+
- `LImageOverlay`
27+
- `LLayerGroup`
28+
- `LMap`
29+
- `LMarker`
30+
- `LPolygon`
31+
- `LPolyline`
32+
- `LPopup`
33+
- `LRectangle`
34+
- `LTileLayer`
35+
- `LTooltip`
36+
- `LWmsTileLayer`

‎docs/components/l-circle-marker.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
outline: deep
3+
---
4+
5+
# LCircleMarker
6+
7+
> A circle of a fixed size with radius specified in pixels.
8+
9+
## Demo
10+
11+
<script setup>
12+
import L from "leaflet";
13+
import "leaflet/dist/leaflet.css";
14+
import { LMap, LTileLayer, LCircleMarker } from '@vue-leaflet/vue-leaflet';
15+
</script>
16+
17+
<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
18+
<LTileLayer
19+
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
20+
attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
21+
layer-type="base"
22+
name="OpenStreetMap"
23+
/>
24+
<LCircleMarker
25+
:lat-lng="[47.21322, -1.559482]"
26+
:radius="6"
27+
:color="'red'"
28+
/>
29+
</LMap>
30+
31+
```vue{8-12}
32+
<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
33+
<LTileLayer
34+
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
35+
attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
36+
layer-type="base"
37+
name="OpenStreetMap"
38+
/>
39+
<LCircleMarker
40+
:lat-lng="[47.21322, -1.559482]"
41+
:radius="6"
42+
:color="'red'"
43+
/>
44+
</LMap>
45+
```
46+
47+
## Props
48+
49+
| Prop name | Description | Type | Required | Default |
50+
| --------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
51+
| radius | Radius of the marker in pixels | Number | true | 10 |
52+
| 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] |
53+
54+
### Inherited props
55+
56+
<!--@include: ./props/path-props.md-->
57+
58+
## Events
59+
60+
| Event name | Type | Description |
61+
| -------------- | ------- | -------------------------------------------------- |
62+
| update:visible | boolean | Triggers when the visible prop needs to be updated |
63+
| ready | object | Triggers when the component is ready |
64+
65+
## Slots
66+
67+
| Name | Description | Bindings |
68+
| ------- | ----------- | -------- |
69+
| default | | |

‎docs/components/l-circle.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
outline: deep
3+
---
4+
5+
# LCircle
6+
7+
> Draw a path in the shape of a circle around a center positioned at `latLng` coordinates.
8+
9+
> It's an approximation and starts to diverge from a real circle closer to the poles (due to projection distortion).
10+
11+
## Demo
12+
13+
<script setup>
14+
import L from "leaflet";
15+
import "leaflet/dist/leaflet.css";
16+
import { LMap, LTileLayer, LCircle } from '@vue-leaflet/vue-leaflet';
17+
</script>
18+
19+
<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
20+
<LTileLayer
21+
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
22+
attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
23+
layer-type="base"
24+
name="OpenStreetMap"
25+
/>
26+
<LCircle
27+
:lat-lng="[47.21322, -1.559482]"
28+
:radius="4500"
29+
:color="'red'"
30+
/>
31+
</LMap>
32+
33+
```vue{8-12}
34+
<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
35+
<LTileLayer
36+
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
37+
attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
38+
layer-type="base"
39+
name="OpenStreetMap"
40+
/>
41+
<LCircle
42+
:lat-lng="[47.21322, -1.559482]"
43+
:radius="4500"
44+
:color="'red'"
45+
/>
46+
</LMap>
47+
```
48+
49+
## Props
50+
51+
| Prop name | Description | Type | Required | Default |
52+
| --------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
53+
| radius | Radius of the circle, in meters | Number | true | - |
54+
| 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] |
55+
56+
### Inherited props
57+
58+
<!--@include: ./props/path-props.md-->
59+
60+
## Events
61+
62+
| Event name | Type | Description |
63+
| -------------- | ------- | -------------------------------------------------- |
64+
| update:visible | boolean | Triggers when the visible prop needs to be updated |
65+
| ready | object | Triggers when the component is ready |
66+
67+
## Slots
68+
69+
| Name | Description | Bindings |
70+
| ------- | ----------- | -------- |
71+
| default | | |

0 commit comments

Comments
 (0)