cdata/app.vue at main · datagouv/cdata · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<template>
  <NuxtLoadingIndicator color="var(--blue-cumulus-main-526)" />
  <NuxtRouteAnnouncer />
  <Toaster
    position="bottom-right"
    :duration="4000"
    close-button
  />
  <div class="datagouv-components">
    <div
      id="tooltips"
      class="h-0"
    />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
import 'vue-sonner/style.css'
import { Toaster, datagouv } from '@datagouv/components-next'
import type { UseFetchFunction } from '@datagouv/components-next'
import CdataLink from './components/CdataLink.vue'
import { ClientOnly, TextClamp } from '#components'

const app = useNuxtApp()

const { locale } = useTranslation()
const runtimeConfig = useRuntimeConfig()
const route = useRoute()
const siteConfig = useSiteConfig()

app.vueApp.use(datagouv, {
  name: runtimeConfig.public.title,
  baseUrl: siteConfig.url,
  trustedDomains: runtimeConfig.public.trustedDomains,
  apiBase: runtimeConfig.public.apiBase,
  devApiKey: runtimeConfig.public.devApiKey,
  datasetQualityGuideUrl: runtimeConfig.public.datasetQualityGuideUrl,
  maxJsonPreviewCharSize: runtimeConfig.public.maxJsonPreviewCharSize,
  maxPdfPreviewByteSize: runtimeConfig.public.maxPdfPreviewByteSize,
  maxXmlPreviewCharSize: runtimeConfig.public.maxXmlPreviewCharSize,
  metricsApiUrl: runtimeConfig.public.metricsApi,
  pmtilesViewerBaseUrl: null,
  schemaValidataUrl: runtimeConfig.public.schemaValidataUrl,
  schemaDocumentationUrl: runtimeConfig.public.schemasSite.url,
  schemasSiteUrl: runtimeConfig.public.schemasSite.url,
  schemasSiteName: runtimeConfig.public.schemasSite.name,
  tabularApiUrl: runtimeConfig.public.tabularApiUrl,
  tabularApiDataserviceId: runtimeConfig.public.tabularApiDataserviceId,
  tabularAllowRemote: true,
  customUseFetch: useAPI as UseFetchFunction, // Why this `as` is required?
  textClamp: TextClamp,
  appLink: CdataLink,
  clientOnly: ClientOnly,
  forumUrl: runtimeConfig.public.forumUrl,
  searchDebounce: runtimeConfig.public.searchDebounce,
})

useHeadSafe({
  htmlAttrs: {
    lang: locale,
  },
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - data.gouv.fr` : 'data.gouv.fr'
  },
})

useSeoMeta({
  description: runtimeConfig.public.description,
  ogTitle: runtimeConfig.public.title,
  ogDescription: runtimeConfig.public.description,
  ogType: 'website',
  ogUrl: () => `${siteConfig.url}${route.path}`,
  ogSiteName: runtimeConfig.public.title,
  ogLocale: 'fr_FR',
  twitterCard: 'summary_large_image',
  twitterSite: '@datagouvfr',
})
</script>