Merge pull request #77 from GeotrekCE/vitepress

Add documentation

.github/workflows/ci.yml

@@ -20,3 +20,7 @@ jobs:
           echo "Tag name from github.ref_name: ${{  github.ref_name }}"
       - name: Build
         run : npm run build
+
+      - name: Test doc build
+        run: npm run docs:build
+

.gitignore

@@ -24,3 +24,6 @@ $RECYCLE.BIN/
 Thumbs.db
 UserInterfaceState.xcuserstate
 .env
+
+docs/.vitepress/cache
+docs/.vitepress/dist

.nvmrc

@@ -1 +1 @@
-16
+20.9.0

compression.js

@@ -1,6 +1,6 @@
-const fs = require('fs');
-const zlib = require('zlib');
-const glob = require('glob');
+import fs from 'fs';
+import zlib from 'zlib';
+import glob from 'glob';
 
 const precompress = async () => {
   const files = await glob('dist/**/*.{js,css,svg}');

docs/.readthedocs.yaml

@@ -0,0 +1,13 @@
+# See https://docs.readthedocs.io/en/stable/config-file/v2.html for details
+
+version: 2
+
+build:
+  os: ubuntu-22.04
+  tools:
+    nodejs: "20"
+  commands:
+    - mkdir --parents $READTHEDOCS_OUTPUT/html/
+    - npm ci
+    - npm run docs:build -- --base "/$READTHEDOCS_VERSION/"
+    - cp --recursive docs/.vitepress/dist/* $READTHEDOCS_OUTPUT/html/

docs/.vitepress/config/en.ts

@@ -0,0 +1,105 @@
+import { defineConfig, type DefaultTheme } from 'vitepress'
+
+export const en = defineConfig({
+  lang: 'en',
+  themeConfig: {
+    nav: nav(),
+    sidebar: sidebar(),
+  }
+})
+
+function nav(): DefaultTheme.NavItem[] {
+  return [
+    { text: 'Home', link: '/en/' },
+    { text: 'Documentation', link: '/en/documentation/introduction/overview', activeMatch: '/en/documentation/' },
+  ]
+}
+
+function sidebar(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+        text: 'Introduction',
+        collapsed: true,
+        items: [
+          { text: 'Presentation', link: '/en/documentation/introduction/overview' },
+          { text: 'Get started', link: '/en/documentation/introduction/get-started' },
+        ],
+      },
+      {
+        text: 'Theme',
+        collapsed: true,
+        items: [
+          { text: 'Colors', link: '/en/documentation/theme/colors' },
+          { text: 'Responsive design', link: '/en/documentation/theme/responsive-design' },
+          { text: 'Advanced customization', link: '/en/documentation/theme/advanced-customization' },
+          { text: 'Additional settings', link: '/en/documentation/theme/additional-settings' },
+        ],
+      },
+      {
+        text: 'Components',
+        collapsed: true,
+        items: [
+          { text: 'How it works', link: '/en/documentation/components/how-it-works' },
+          { text: 'Application', link: '/en/documentation/components/grw-app' },
+          { text: 'Treks list', link: '/en/documentation/components/grw-treks-list' },
+          { text: "Trek card", link: '/en/documentation/components/grw-trek-card' },
+          { text: "Trek detail", link: '/en/documentation/components/grw-trek-detail' },
+          { text: 'Touristic contents list', link: '/en/documentation/components/grw-touristic-contents-list' },
+          { text: "Touristic content card", link: '/en/documentation/components/grw-touristic-content-card' },
+          { text: "Touristic content detail", link: '/en/documentation/components/grw-touristic-content-detail' },
+          { text: 'Touristic events list', link: '/en/documentation/components/grw-touristic-events-list' },
+          { text: "Touristic event card", link: '/en/documentation/components/grw-touristic-event-card' },
+          { text: "Touristic event detail", link: '/en/documentation/components/grw-touristic-event-detail' },
+          { text: 'Map', link: '/en/documentation/components/grw-map' },
+        ],
+      },
+      {
+        text: 'Data provider',
+        collapsed: true,
+        items: [
+          { text: 'How it works', link: '/en/documentation/data-provider/how-it-works' },
+          { text: 'Treks', link: '/en/documentation/data-provider/grw-treks-provider' },
+          { text: 'Trek', link: '/en/documentation/data-provider/grw-trek-provider' },
+          { text: 'Touristic contents', link: '/en/documentation/data-provider/grw-touristic-contents-provider' },
+          { text: 'Touristic content', link: '/en/documentation/data-provider/grw-touristic-content-provider' },
+          { text: 'Touristic events', link: '/en/documentation/data-provider/grw-touristic-events-provider' },
+          { text: 'Touristic event', link: '/en/documentation/data-provider/grw-touristic-event-provider' },
+        ],
+      },
+      {
+        text: 'Examples',
+        collapsed: true,
+        items: [
+          { text: 'Application', link: '/en/documentation/examples/application' },
+          { text: 'Treks app', link: '/en/documentation/examples/app-treks' },
+          { text: 'Touristic contents app', link: '/en/documentation/examples/app-touristic-contents' },
+          { text: 'Touristic events app', link: '/en/documentation/examples/app-touristic-events' },
+          { text: 'Treks list', link: '/en/documentation/examples/treks-list' },
+          { text: "Trek detail", link: '/en/documentation/examples/trek-detail-and-map' },
+        ],
+      },
+      {
+        text: 'Contribution',
+        collapsed: true,
+        items: [
+          { text: 'Development', link: '/en/documentation/contribution/development' },
+          { text: 'Documentation', link: '/en/documentation/contribution/documentation' },
+          { text: 'Translation', link: '/en/documentation/contribution/translation' },
+        ],
+      },
+      {
+        text: 'About',
+        collapsed: true,
+        items: [
+          {
+            text: 'Geotrek',
+            link: '/en/documentation/about/geotrek/what-is-geotrek',
+            items: [
+              { text: "What is Geotrek ?", link: '/en/documentation/about/geotrek/what-is-geotrek', items: [] },
+              { text: 'Projects', link: '/en/documentation/about/geotrek/projects', items: [] },
+            ],
+          },
+        ],
+      },
+  ]
+}

docs/.vitepress/config/fr.ts

@@ -0,0 +1,133 @@
+import { defineConfig, type DefaultTheme } from 'vitepress'
+
+export const fr = defineConfig({
+  lang: 'fr',
+  themeConfig: {
+    search: {
+      provider: 'local',
+      options: {
+        locales: {
+          root: {
+            translations: {
+              button: {
+                buttonText: 'Rechercher',
+              },
+              modal: {
+                noResultsText: 'Aucun résultat pour',
+                displayDetails: 'Afficher la liste détaillée',
+                resetButtonTitle: 'Réinitialiser la recherche',
+                footer: {
+                  selectText: 'pour sélectionner',
+                  navigateText: 'pour naviguer',
+                  closeText: 'pour fermer',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+    nav: nav(),
+    sidebar: sidebar(),
+    docFooter: { prev: 'Page précédente', next: 'Page suivante' },
+    darkModeSwitchLabel: 'Apparence',
+    lightModeSwitchTitle: "Passer au thème clair",
+    darkModeSwitchTitle: "Passer au thème sombre",
+  }
+})
+
+function nav(): DefaultTheme.NavItem[] {
+  return [
+    { text: 'Accueil', link: '/' },
+      { text: 'Documentation', link: '/documentation/introduction/overview', activeMatch: '/documentation/' },
+  ]
+}
+
+function sidebar(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+        text: 'Introduction',
+        collapsed: true,
+        items: [
+          { text: 'Présentation', link: '/documentation/introduction/overview' },
+          { text: 'Installation', link: '/documentation/introduction/get-started' },
+        ],
+      },
+      {
+        text: 'Thème',
+        collapsed: true,
+        items: [
+          { text: 'Les couleurs', link: '/documentation/theme/colors' },
+          { text: 'Responsive design', link: '/documentation/theme/responsive-design' },
+          { text: 'Personnalisation avancées', link: '/documentation/theme/advanced-customization' },
+          { text: 'Paramètres supplémentaires', link: '/documentation/theme/additional-settings' },
+        ],
+      },
+      {
+        text: 'Composants',
+        collapsed: true,
+        items: [
+          { text: 'Fonctionnement', link: '/documentation/components/how-it-works' },
+          { text: 'Application', link: '/documentation/components/grw-app' },
+          { text: 'Liste de randonnées', link: '/documentation/components/grw-treks-list' },
+          { text: "Vue simplifiée d'une randonnée", link: '/documentation/components/grw-trek-card' },
+          { text: "Détail d'une randonnée", link: '/documentation/components/grw-trek-detail' },
+          { text: 'Liste des contenus touristiques', link: '/documentation/components/grw-touristic-contents-list' },
+          { text: "Vue simplifiée d'un contenu touristique", link: '/documentation/components/grw-touristic-content-card' },
+          { text: "Détail d'un contenu touristique", link: '/documentation/components/grw-touristic-content-detail' },
+          { text: 'Liste des évènements touristiques', link: '/documentation/components/grw-touristic-events-list' },
+          { text: "Vue simplifiée d'un évènement touristique", link: '/documentation/components/grw-touristic-event-card' },
+          { text: "Détail d'un évènement touristique", link: '/documentation/components/grw-touristic-event-detail' },
+          { text: 'Carte', link: '/documentation/components/grw-map' },
+        ],
+      },
+      {
+        text: 'Fournisseurs de données',
+        collapsed: true,
+        items: [
+          { text: 'Fonctionnement', link: '/documentation/data-provider/how-it-works' },
+          { text: 'Randonnées', link: '/documentation/data-provider/grw-treks-provider' },
+          { text: 'Randonnée', link: '/documentation/data-provider/grw-trek-provider' },
+          { text: 'Contenus touristiques', link: '/documentation/data-provider/grw-touristic-contents-provider' },
+          { text: 'Contenu touristique', link: '/documentation/data-provider/grw-touristic-content-provider' },
+          { text: 'Évènements touristiques', link: '/documentation/data-provider/grw-touristic-events-provider' },
+          { text: 'Évènement touristique', link: '/documentation/data-provider/grw-touristic-event-provider' },
+        ],
+      },
+      {
+        text: 'Exemples',
+        collapsed: true,
+        items: [
+          { text: 'Application', link: '/documentation/examples/application' },
+          { text: 'Application itinéraires', link: '/documentation/examples/app-treks' },
+          { text: 'Application contenus touristiques', link: '/documentation/examples/app-touristic-contents' },
+          { text: 'Application événements touristiques', link: '/documentation/examples/app-touristic-events' },
+          { text: 'Liste de randonnées', link: '/documentation/examples/treks-list' },
+          { text: "Détail d'une randonnée et carte", link: '/documentation/examples/trek-detail-and-map' },
+        ],
+      },
+      {
+        text: 'Contribution',
+        collapsed: true,
+        items: [
+          { text: 'Développement', link: '/documentation/contribution/development' },
+          { text: 'Documentation', link: '/documentation/contribution/documentation' },
+          { text: 'Traduction', link: '/documentation/contribution/translation' },
+        ],
+      },
+      {
+        text: 'À propos',
+        collapsed: true,
+        items: [
+          {
+            text: 'Geotrek',
+            link: '/documentation/about/geotrek/what-is-geotrek',
+            items: [
+              { text: "Qu'est-ce que Geotrek ?", link: '/documentation/about/geotrek/what-is-geotrek', items: [] },
+              { text: 'Les projets', link: '/documentation/about/geotrek/projects', items: [] },
+            ],
+          },
+        ],
+      },
+  ]
+}

docs/.vitepress/config/index.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vitepress';
+import { shared } from '../config/shared';
+import { fr } from '../config/fr';
+import { en } from '../config/en';
+
+export default defineConfig({
+  ...shared,
+  locales: {
+    root: {
+      label: 'Français',
+      ...fr,
+    },
+    en: {
+      label: 'English',
+      ...en,
+    },
+  },
+});

docs/.vitepress/config/shared.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vitepress';
+
+export const shared = defineConfig({
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: tag => tag.includes('grw-'),
+      },
+    },
+  },
+  title: 'Geotrek rando widget',
+  description: 'Geotrek web components',
+  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
+  themeConfig: {
+    i18nRouting: true,
+    logo: '/assets/logo.svg',
+    search: {
+      provider: 'local',
+    },
+    socialLinks: [{ icon: 'github', link: 'https://github.com/GeotrekCE/Geotrek-rando-widget' }],
+  },
+});

docs/.vitepress/theme/custom.css

@@ -0,0 +1,11 @@
+:root {
+  --vp-c-brand-1: #b9cb46;
+  --vp-c-brand-2: #b2c24f;
+  --vp-button-brand-bg: #b9cb46;
+}
+
+.dark {
+  --vp-c-brand-1: #b9cb46;
+  --vp-c-brand-2: #b2c24f;
+  --vp-button-brand-bg: #b9cb46;
+}

docs/.vitepress/theme/index.ts

@@ -0,0 +1,6 @@
+import DefaultTheme from 'vitepress/theme';
+import './custom.css';
+
+export default {
+  ...DefaultTheme,
+};

docs/en/index.md

@@ -0,0 +1,38 @@
+---
+layout: home
+
+hero:
+  image:
+    light: /assets/concept.svg
+    dark: /assets/concept.svg
+    alt: Concept
+  name: Geotrek rando widget
+  tagline: Integrate Geotrek-related components into any website
+  actions:
+    - theme: brand
+      text: Documentation
+      link: /en/documentation/introduction/overview
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/GeotrekCE/Geotrek-rando-widget
+
+features:
+  - title: Routes
+    details: suggest routes
+    icon:
+      light: /assets/walk-outline.svg
+      dark: /assets/walk-outline.svg
+    link: /en/documentation/examples/app-treks
+  - title: Touristic contents
+    details: Promote tourism
+    icon:
+      light: /assets/storefront-outline.svg
+      dark: /assets/storefront-outline.svg
+    link: /en/documentation/examples/app-touristic-contents
+  - title: Touristic events
+    details: Communicate about tourist events
+    icon:
+      light: /assets/calendar-outline.svg
+      dark: /assets/calendar-outline.svg
+    link: /en/documentation/examples/app-touristic-events
+---