@iqual/nuxt-icms 1.0.2

package/pages/__tests__/index.ts

@@ -0,0 +1,77 @@
+import path from 'path'
+import { promises as fsp } from 'fs'
+import { describe, it, expect } from 'vitest'
+import { glob } from 'glob'
+import * as ts from 'typescript'
+import { parse as parseSfc } from '@vue/compiler-sfc'
+
+// Parse a Vue SFC and check if the component's script calls the given function at least once.
+function functionIsCalledAtLeastOnce(
+  vueFileContents: string,
+  functionName: string,
+): boolean {
+  const result = parseSfc(vueFileContents)
+  const script = result.descriptor.scriptSetup?.content
+  if (!script) {
+    return false
+  }
+  const sourceFile = ts.createSourceFile(
+    'temp.ts',
+    script,
+    ts.ScriptTarget.ES2015,
+    true,
+  )
+
+  let isCalled = false
+
+  function visit(node: ts.Node) {
+    if (
+      ts.isCallExpression(node) &&
+      node.expression.getText(sourceFile) === functionName
+    ) {
+      isCalled = true
+    }
+
+    if (!isCalled) {
+      ts.forEachChild(node, visit)
+    }
+  }
+
+  ts.forEachChild(sourceFile, visit)
+
+  return isCalled
+}
+
+describe('The Nuxt page component', async () => {
+  const pageComponentFiles = await glob(
+    path.resolve(__dirname, './../**/*.vue'),
+    {},
+  ).then((pageFilePaths) => {
+    console.log(pageFilePaths)
+    return Promise.all(
+      pageFilePaths.map((filePath) => {
+        return fsp.readFile(filePath, { encoding: 'utf8' }).then((content) => {
+          return {
+            filePath,
+            content,
+          }
+        })
+      }),
+    )
+  })
+
+  pageComponentFiles.forEach(({ filePath, content }) => {
+    it(`"${filePath}" should call useDrupalRouteQuery()`, () => {
+      expect(functionIsCalledAtLeastOnce(content, 'useDrupalRoute')).toEqual(
+        true,
+      )
+    })
+    it(`"${filePath}" should call setBreadcrumbLinksFromRoute()`, () => {
+      expect(
+        functionIsCalledAtLeastOnce(content, 'setBreadcrumbLinksFromRoute') ||
+          functionIsCalledAtLeastOnce(content, 'setBreadcrumbLinks') ||
+          functionIsCalledAtLeastOnce(content, 'useDrupalRoute'),
+      ).toEqual(true)
+    })
+  })
+})

package/pages/blokkli/library-item/[uuid].vue

@@ -0,0 +1,52 @@
+<template>
+  <BlokkliProvider
+    v-if="data?.blokkliProps"
+    v-slot="{ entity }"
+    v-bind="data.blokkliProps"
+    :entity="data"
+  >
+    <div class="container">
+      <p>Administrative title</p>
+      <h1 v-blokkli-editable:label>
+        {{ entity.libraryItemLabel || data.libraryItemLabel }}
+      </h1>
+    </div>
+    <BlokkliField name="paragraphs" :list="data.paragraphs" />
+  </BlokkliProvider>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'library',
+})
+
+const route = useRoute()
+
+const uuid = computed<string>(() => {
+  if (route.params.uuid && typeof route.params.uuid === 'string') {
+    return route.params.uuid
+  }
+
+  return ''
+})
+
+const { data } = await useAsyncGraphqlQuery(
+  'paragraphsLibraryItem',
+  {
+    id: uuid.value,
+    uuid: uuid.value,
+  },
+  {
+    transform: function (data) {
+      if (data.data.byUuid && 'blokkliProps' in data.data.byUuid) {
+        return data.data.byUuid
+      } else if (data.data.byId && 'blokkliProps' in data.data.byId) {
+        return data.data.byId
+      }
+
+      return null
+    },
+  },
+)
+await renderPageDependencies()
+</script>

package/pages/blokkli/library-item/query.library.graphql

@@ -0,0 +1,21 @@
+query paragraphsLibraryItem($uuid: String!, $id: ID!) {
+  byUuid: entityByUuid(uuid: $uuid, entityType: PARAGRAPHS_LIBRARY_ITEM) {
+    ...paragraphsLibraryItemCanonical
+  }
+  byId: entityById(id: $id, entityType: PARAGRAPHS_LIBRARY_ITEM) {
+    ...paragraphsLibraryItemCanonical
+  }
+}
+
+fragment paragraphsLibraryItemCanonical on ParagraphsLibraryItem {
+  libraryItemLabel: label
+  blokkliProps {
+    ...blokkliProps
+  }
+  paragraphs {
+    ...paragraphsFieldItem
+    props {
+      ...paragraph
+    }
+  }
+}

package/pages/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <component :is="pageComponent" v-bind="node"/>
+</template>
+
+<script lang="ts" setup>
+
+const { $resolveDynamicNodeComponent } = useNuxtApp()
+
+defineOptions({
+  name: 'Homepage',
+})
+
+definePageMeta({
+  name: 'home',
+  hideBreadcrumb: true,
+})
+
+const { entity: node } = await useDrupalRouteQuery('slug')
+
+const contentType = computed(() => node.value?.__typename)
+
+const pageComponent = computed(() => {
+  return $resolveDynamicNodeComponent(contentType.value)
+})
+
+await renderPageDependencies()
+</script>

package/pages/node/[nid]/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <component :is="pageComponent" v-bind="node"/>
+</template>
+
+<script lang="ts" setup>
+
+const { $resolveDynamicNodeComponent } = useNuxtApp()
+
+defineOptions({
+  name: 'PageNodeCanonical',
+})
+
+definePageMeta({
+  name: 'node-canonical',
+})
+
+const { entity: node } = await useDrupalRouteQuery('nodeCanonical')
+const contentType = computed(() => node.value?.__typename)
+
+const pageComponent = computed(() => {
+  return $resolveDynamicNodeComponent(contentType.value)
+})
+
+await renderPageDependencies()
+</script>

package/pages/search/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <main :class="{ 'cursor-wait': pending }">
+    <section class="flex">
+      <div class="container">
+        <h1 v-if="node" class="pb-3 text-4xl lg:pb-6 lg:text-7xl">
+          {{ node.title }}
+        </h1>
+        <form @submit.prevent>
+          <SearchInput v-model="searchTerm" />
+        </form>
+      </div>
+    </section>
+    <template v-if="data && searchTerm">
+      <Container>
+        <ol class="mt-10">
+          <SearchResult v-for="hit in data" v-bind="hit" :key="hit.id" />
+        </ol>
+      </Container>
+    </template>
+  </main>
+</template>
+
+<script lang="ts" setup>
+import type { NodeIcmsPageFragment } from '#graphql-operations'
+
+definePageMeta({
+  name: 'search',
+  drupalFrontendRoute: true,
+  path: '/suche',
+  languageMapping: {
+    fr: '/chercher',
+    en: '/search',
+  },
+})
+
+const nuxtRoute = useRoute()
+const searchTerm = useQueryString('text')
+const language = useCurrentLanguage()
+
+const searchQuery = computed(() => {
+  return {
+    langcode: language.value,
+    size: 16,
+    text: searchTerm.value || undefined,
+  }
+})
+
+const { data, pending } = await useFetch('/api/content-search', {
+  query: searchQuery,
+})
+
+// Get the data.
+const { data: query } = await useAsyncData(nuxtRoute.path, () => {
+  return useGraphqlQuery('route', {
+    path: nuxtRoute.path,
+  }).then((v) => v.data)
+})
+
+// Handles redirects and metatags.
+const { entity: node } = await useDrupalRoute<NodeIcmsPageFragment>(
+  query.value,
+  {
+    noError: true,
+  },
+)
+setBreadcrumbLinksFromRoute(query.value)
+setLanguageLinksFromRoute(query.value)
+await renderPageDependencies()
+</script>

package/pages/static-page/example.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container">
+    <h1 class="mb-10 text-4xl">Static Page example</h1>
+    <h2>{{ node.title }}</h2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { NodePageFragment } from '#graphql-operations'
+
+defineOptions({
+  name: 'StaticPageExample',
+})
+
+definePageMeta({
+  name: 'static-page-example',
+  drupalFrontendRoute: true,
+  path: '/statisch',
+  languageMapping: {
+    fr: '/statique',
+    en: '/static',
+  },
+})
+
+const nuxtRoute = useRoute()
+
+// Get the data.
+const { data: query } = await useAsyncData('staticPageExample', async () => {
+  return await useGraphqlQuery('route', {
+    path: nuxtRoute.path,
+  }).then((v) => v.data)
+})
+
+// Handles redirects and metatags.
+const { entity: node } = await useDrupalRoute<NodePageFragment>(query.value)
+
+setBreadcrumbLinks()
+setLanguageLinksFromRoute(query.value)
+await renderPageDependencies()
+</script>

package/plugins/clickaway.ts

@@ -0,0 +1,12 @@
+import { directive } from 'vue3-click-away'
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive('click-away', {
+    ...directive,
+    // Necessary for the directive to work at all.
+    getSSRProps() {
+      return {}
+    },
+  })
+})

package/plugins/drupalUser.ts

@@ -0,0 +1,33 @@
+import { defineNuxtPlugin } from '#app'
+import useDrupalUser from '~/composables/useDrupalUser'
+
+/**
+ * Loads data about the current session.
+ */
+export default defineNuxtPlugin({
+  name: 'drupal-user',
+  async setup() {
+    const drupalUser = useDrupalUser()
+
+    // If the config has already been fetched, return.
+    // This is the case when we're client-side, because the config is already
+    // shipped via payload from the server.
+    if (drupalUser?.value.fetched) {
+      return
+    }
+
+    const headers = useRequestHeaders()
+    const hasSessionCookie = (headers.cookie || '').includes('SSESS')
+
+    // Only query the backend for the user if we have a session cookie.
+    if (hasSessionCookie || import.meta.client) {
+      // Load the information about the Drupal user.
+      const { data } = await useGraphqlQuery('drupalUser')
+      if (data && data.currentDrupalUser) {
+        drupalUser.value.accessToolbar = data.currentDrupalUser.canAccessToolbar
+      }
+    }
+
+    drupalUser.value.fetched = true
+  },
+})

package/plugins/graphqlMiddleware.ts

@@ -0,0 +1,115 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+import type { DrupalMessage } from '~/composables/useDrupalMessages'
+import { useCDNHeaders } from '#nuxt-multi-cache/composables'
+import type { GraphqlResponseTyped } from '#graphql-middleware-server-options-build'
+
+type GraphqlMessengerMessage = {
+  type: string
+  message: string
+  escaped: string
+  safe: string
+}
+
+/**
+ * Try to extract the messages from a GraphQL query or mutation.
+ */
+function extractMessages(data: GraphqlResponseTyped): DrupalMessage[] {
+  if (data.data && 'messengerMessages' in data.data) {
+    return data.data.messengerMessages.map((v: GraphqlMessengerMessage) => {
+      return {
+        type: v.type,
+        message: v.safe,
+      }
+    })
+  }
+
+  return []
+}
+
+/**
+ * This is only called when performing a query or mutation from within the nuxt
+ * app (e.g. not via custom server routes).
+ */
+export default defineNuxtPlugin(() => {
+  const state = useGraphqlState()
+  const { messages } = useDrupalMessages()
+  const language = useCurrentLanguage()
+  const config = useRuntimeConfig()
+
+  if (!state) {
+    return
+  }
+
+  state.fetchOptions = {
+    /**
+     * Interceptor called whenever a GraphQL response arrives.
+     */
+    onResponse(result) {
+      const data = result.response?._data
+      if (!data) {
+        return
+      }
+
+      // Extract drupal messages from every GraphQL response.
+      extractMessages(data).forEach((v) => {
+        const exists = messages.value.find((m) => m.message === v.message)
+        if (!exists) {
+          messages.value.push(v)
+
+          // When there are messages, we have to make the whole request uncacheable.
+          useCDNHeaders((v) => v.private())
+        }
+      })
+
+      if (import.meta.server) {
+        const event = useRequestEvent()
+
+        useCDNHeaders((helper) => {
+          if (!data.__cacheability?.isCacheable) {
+            helper.private()
+            return
+          }
+
+          helper
+            .public()
+            .setNumeric('sharedMaxAge', data.__cacheability.sharedMaxAge)
+            .addTags(data.__cacheability.tagsCdn)
+        }, event)
+      }
+    },
+
+    onRequest({ options, request }) {
+      // if (import.meta.server && import.meta.dev) {
+      //   console.log('GraphQL Query: ' + request)
+      // }
+      try {
+        if (!options.params) {
+          options.params = {}
+        }
+
+        /*
+        // Add the build hash to every GraphQL request.
+        // We do this so that after a deployment, if the user is using the
+        // "new" version of the app, the request URL issued is now different
+        // than the previous one and thus will not be served from cache.
+        options.params.__h = config.public.buildHash
+
+        // Add the current language to the URL
+        options.params.__l = language.value
+
+        if (import.meta.server) {
+          options.params.__server = 'true'
+        }
+        */
+
+        const requestHeaders = useRequestHeaders()
+        Object.keys(requestHeaders).forEach((key) => {
+          options.headers?.append(key, requestHeaders[key])
+        })
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      } catch (e) {
+        // Do nothing.
+      }
+    },
+  }
+})

package/queries/blokkli.graphql

@@ -0,0 +1,5 @@
+fragment pbMutatedEntity on Entity {
+  ...nodeIcmsPage
+  # New field.
+  libraryItemLabel: label
+}

package/queries/fragment.blokkliProps.graphql

@@ -0,0 +1,8 @@
+fragment blokkliProps on ParagraphsBlokkliProps {
+  entityUuid
+  entityType
+  entityBundle
+  canEdit
+  editLabel
+  language
+}

package/queries/fragment.routeQuery.graphql

@@ -0,0 +1,51 @@
+fragment routeQuery on Query {
+  messengerMessages
+  # Data used for the useDrupalRoute composable.
+  ...useDrupalRoute
+
+  # Data used for rendering entities.
+  route(path: $path) {
+    __typename
+    ... on EntityUrl {
+      breadcrumb {
+        ...breadcrumb
+      }
+      ...entityUrl
+    }
+    ... on InternalUrl {
+      languageSwitchLinks {
+        ...languageSwitchLink
+      }
+    }
+  }
+}
+
+fragment entityUrl on EntityUrl {
+  languageSwitchLinks {
+    ...languageSwitchLink
+  }
+  entity {
+    uuid
+  }
+  entityGlobal: entity {
+    ...entityGlobal
+  }
+}
+
+fragment entityGlobal on Entity {
+  __typename
+  canEdit: accessCheck(operation: "edit-blokkli")
+  id
+  bundle: entityBundle
+}
+
+fragment languageSwitchLink on LanguageSwitchLink {
+  active
+  language {
+    id
+  }
+  title
+  url {
+    path
+  }
+}

package/queries/query.drupalUser.graphql

@@ -0,0 +1,10 @@
+query drupalUser {
+  messengerMessages
+  currentDrupalUser: currentUser {
+    ...currentDrupalUser
+  }
+}
+
+fragment currentDrupalUser on User {
+  canAccessToolbar: hasPermission(permission: "access toolbar")
+}