Merge pull request #17 from camptocamp/add-webcomponent

Add @geospatial-sdk/elements package with map webcomponent

.eslintrc.json

@@ -28,5 +28,5 @@
   "rules": {
     "@typescript-eslint/no-explicit-any": 1
   },
-  "ignorePatterns": ["**/*.test.ts", "apps", "**/mocks"]
+  "ignorePatterns": ["**/*.test.ts", "apps", "**/mocks", "**/dist/**"]
 }

.github/workflows/gh-pages.yml

@@ -43,13 +43,19 @@ jobs:
       - name: Build
         run: npm run build -- --base=/geospatial-sdk
         working-directory: apps/examples
+      - name: Build docs
+        run: npm run docs:build -- --base=/geospatial-sdk/docs
+        working-directory: docs
       - name: Setup Pages
         uses: actions/configure-pages@v4
-      - name: Upload artifact
+      - name: Upload artifact (examples)
         uses: actions/upload-pages-artifact@v3
         with:
-          # Upload dist folder
           path: apps/examples/dist
+      - name: Upload artifact (docs)
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

apps/examples/package.json

@@ -17,7 +17,6 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@geospatial-sdk/openlayers": "file:../../packages/openlayers",
     "highlight.js": "^11.9.0",
     "lodash.debounce": "^4.0.8",
     "vue": "^3.3.11"

apps/examples/src/App.vue

@@ -10,6 +10,8 @@ import ExampleZoomToLayer from '@/examples/Example-ZoomToLayer.vue'
 import ExampleZoomToLayerRaw from '@/examples/Example-ZoomToLayer.vue?raw'
 import ExampleMapEvents from '@/examples/Example-MapEvents.vue'
 import ExampleMapEventsRaw from '@/examples/Example-MapEvents.vue?raw'
+import ExampleCustomElements from '@/examples/Example-CustomElements.vue'
+import ExampleCustomElementsRaw from '@/examples/Example-CustomElements.vue?raw'
 import { onMounted } from 'vue'
 import hljs from 'highlight.js'
 
@@ -22,6 +24,7 @@ onMounted(() => {
   <div class="flex flex-col items-center p-4 overflow-x-hidden">
     <h1 class="text-5xl font-bold m-6">Geospatial SDK</h1>
     <p class="mb-6">An incredible SDK with many examples.</p>
+    <p class="mb-6"><a href="/docs/">Go to the documentation website</a></p>
     <ExampleContainer
       example-name="Example 1: simple map"
       example-id="example01"
@@ -57,6 +60,13 @@ onMounted(() => {
     >
       <ExampleGeocoding></ExampleGeocoding>
     </ExampleContainer>
+    <ExampleContainer
+      example-name="Example 6: show a map using a custom element"
+      example-id="example06"
+      :source-code="ExampleCustomElementsRaw"
+    >
+      <ExampleCustomElements></ExampleCustomElements>
+    </ExampleContainer>
   </div>
 </template>
 

apps/examples/src/examples/Example-CustomElements.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { SdkMapElement } from '@geospatial-sdk/elements'
+import '@geospatial-sdk/elements' // this includes the web component
+
+const mapElement = ref<SdkMapElement>()
+onMounted(() => {
+  if (!mapElement.value) return
+  mapElement.value.context = {
+    layers: [
+      {
+        type: 'maplibre-style',
+        styleUrl:
+          'https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json'
+      }
+    ],
+    view: {
+      zoom: 12,
+      center: [2.33, 48.86]
+    }
+  }
+})
+</script>
+
+<template>
+  <geosdk-map ref="mapElement"></geosdk-map>
+</template>

apps/examples/src/main.ts

@@ -1,6 +1,5 @@
 import './style.css'
 import 'highlight.js/styles/base16/railscasts.min.css'
-
 import { createApp } from 'vue'
 import App from './App.vue'
 

apps/examples/src/style.css

@@ -1,5 +1,3 @@
-@import 'ol/ol.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

apps/examples/vite.config.ts

@@ -4,7 +4,16 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          // See https://vuejs.org/guide/extras/web-components
+          isCustomElement: (tag) => tag.includes('-')
+        }
+      }
+    })
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))

docs/.gitignore

@@ -0,0 +1 @@
+api

docs/.vitepress/config.mts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vitepress'
-import typedocSidebar from '../api/typedoc-sidebar.json';
+import {defineConfig} from 'vitepress'
+import typedocSidebar from '../api/typedoc-sidebar.json'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -9,7 +9,8 @@ export default defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
-      { text: 'API Reference', link: '/api/' }
+      { text: 'API Reference', link: '/api/' },
+      { text: 'Examples', link: 'https://camptocamp.github.io/geospatial-sdk/',  }
     ],
 
     sidebar: [