@iqual/nuxt-icms 1.0.2

package/server/api/content-search/index.ts

@@ -0,0 +1,160 @@
+/**
+ * Provides the endpoint for the content search.
+ *
+ */
+import type { QueryObject, QueryValue } from 'ufo'
+import { getQuery } from 'h3'
+import type { estypes } from '@elastic/elasticsearch'
+import { Client } from '@elastic/elasticsearch'
+import { nonNullable } from '#vuepal/helpers/type'
+
+const runtimeConfig = useRuntimeConfig()
+
+function getSingleQueryValue(
+  v: QueryValue | QueryValue[],
+  defaultValue: any = '',
+): string {
+  if (Array.isArray(v)) {
+    return getSingleQueryValue(v[0], defaultValue)
+  }
+  if (typeof v === 'string') {
+    return v
+  } else if (typeof v === 'number') {
+    return v.toString()
+  }
+  return defaultValue
+}
+
+const config = useRuntimeConfig()
+
+export const client = new Client({
+  node: config.elasticsearchUrl,
+})
+
+type ContentSearchItem = {
+  id: string
+  title: string
+  text: string
+  langcode: string
+  url: string
+}
+
+interface SearchDocument {
+  nid?: string[]
+  field_teaser?: string[]
+  title?: string[]
+  langcode?: string[]
+  entity_url?: string[]
+}
+
+function simpleHighlight(rgx: RegExp, text = ''): string {
+  return text.replace(rgx, (match) => `<em>${match}</em>`)
+}
+
+type Highlight = {
+  title?: string[]
+  text?: string[]
+}
+
+function mapSearchItem(
+  rgx: RegExp,
+  doc: SearchDocument,
+  highlight?: Highlight,
+): ContentSearchItem {
+  return {
+    id: doc.nid?.[0] || '',
+    title: doc.title?.[0] || '',
+    text:
+      highlight?.text?.[0] || simpleHighlight(rgx, doc.field_teaser?.[0]) || '',
+    langcode: doc.langcode?.[0] || '',
+    url: doc.entity_url?.[0] || '',
+  }
+}
+
+/**
+ * The fulltext Elasticsearch search.
+ */
+export default defineEventHandler<Promise<ContentSearchItem[]>>(
+  async (event) => {
+    try {
+      const query: QueryObject = getQuery(event)
+      const text = getSingleQueryValue(query.text)
+      const index = runtimeConfig.elasticsearchPrefix + 'content_search'
+
+      const filter: estypes.QueryDslQueryContainer[] = []
+
+      const response = await client.search<SearchDocument>({
+        index,
+        size: 30,
+        query: {
+          bool: {
+            filter,
+            must: [
+              {
+                bool: {
+                  should: [
+                    {
+                      multi_match: {
+                        query: text,
+                        fields: ['text', 'title'],
+                      },
+                    },
+                    {
+                      wildcard: {
+                        title: {
+                          value: `*${text}*`,
+                        },
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+        highlight: {
+          fields: {
+            title: {
+              force_source: true,
+              number_of_fragments: 0,
+              highlight_query: {
+                match_phrase: {
+                  title: text,
+                },
+              },
+            },
+            text: {
+              force_source: true,
+              number_of_fragments: 0,
+              highlight_query: {
+                match_phrase: {
+                  text,
+                },
+              },
+            },
+          },
+        },
+      })
+      const words = text
+        .split(' ')
+        .map((word) => word.trim())
+        .filter(Boolean)
+      const pattern = words
+        .map((word) => word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+        .join('|')
+
+      const rgx = new RegExp(pattern, 'gi')
+      return response.hits.hits
+        .map((v) =>
+          v._source ? mapSearchItem(rgx, v._source, v.highlight) : undefined,
+        )
+        .filter(nonNullable)
+    } catch (e) {
+      setResponseStatus(event, 400)
+      if (e && typeof e === 'object' && 'meta' in e) {
+        return (e as any).meta.body
+      }
+      console.log(e)
+    }
+  },
+)

package/server/api/icon/[...params].ts

@@ -0,0 +1,199 @@
+import { getRouterParams, defaultContentType, defineEventHandler } from 'h3'
+import type { H3Event } from 'h3'
+import { optimize } from 'svgo'
+import { useCDNHeaders, useDataCache } from '#nuxt-multi-cache/composables'
+import { MAX_AGE } from '@iqual/nuxt-icms/server/helpers'
+
+const config = useRuntimeConfig()
+
+export function replaceColors(markup = '') {
+  return markup
+    .replaceAll(
+      /(?<=<\b[^<>]*)\s*\bfill=(["'](?!none)).*?\1/g,
+      ` fill="currentColor"`,
+    )
+    .replaceAll(
+      /(?<=<\b[^<>]*)\s*\bstroke=(["'](?!none)).*?\1/g,
+      ` stroke="currentColor"`,
+    )
+}
+
+type ParsedSymbol = {
+  attributes: Record<string, string>
+  content: string
+}
+
+export function extractSymbol(source = ''): ParsedSymbol {
+  const [, parsedAttributes, content] =
+    source.match(/<svg(.*?)>(.*?)<\/svg>/is) || []
+  const matches = (parsedAttributes || '').match(
+    /([\w-:]+)(=)?("[^<>"]*"|'[^<>']*'|[\w-:]+)/g,
+  )
+
+  const attributes =
+    matches?.reduce<Record<string, string>>((acc, attribute) => {
+      const [name, unformattedValue] = attribute.split('=')
+      acc[name] = unformattedValue
+        ? unformattedValue.replace(/['"]/g, '')
+        : 'true'
+
+      return acc
+    }, {}) || {}
+
+  return {
+    attributes,
+    content,
+  }
+}
+
+/**
+ * Process the raw SVG markup to be a <symbol>.
+ *
+ * @TODO: Needs a more reliable solution.
+ */
+function processIcon(markup = '') {
+  const optimized = optimize(markup, {
+    plugins: [
+      {
+        name: 'inlineStyles',
+        params: {
+          onlyMatchedOnce: false,
+        },
+      },
+      'convertStyleToAttrs',
+      'cleanupIds',
+      'cleanupAttrs',
+      'removeComments',
+      'removeTitle',
+      'removeDesc',
+      'removeMetadata',
+      'removeComments',
+      'removeUselessDefs',
+      'removeUselessStrokeAndFill',
+      'mergePaths',
+      'removeDimensions',
+    ],
+  }).data
+  const { content, attributes } = extractSymbol(optimized)
+  const attributesString = Object.keys(attributes)
+    .filter((v) => v !== 'id' && v !== 'xmlns')
+    .map((v) => {
+      return `${v}="${attributes[v]}"`
+    })
+    .join(' ')
+  return replaceColors(
+    `<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon" ${attributesString}>` +
+      content +
+      '</symbol></svg>',
+  )
+}
+
+type BuiltIcon = {
+  markup: string
+  tagsCdn: string[]
+}
+
+/**
+ * Given the media entity ID, load the entity via GraphQL, fetch the file and
+ * return the SVG's markup.
+ *
+ * The result of this is cached in the data cache using the ID as the key.
+ */
+async function getIcon(
+  id: string | undefined,
+  event: H3Event,
+): Promise<BuiltIcon | undefined> {
+  if (!id || !config.backendUrl) {
+    return
+  }
+
+  const { value, addToCache } = await useDataCache<BuiltIcon>(
+    'api-icon-' + id,
+    event,
+  )
+
+  if (value) {
+    return value
+  }
+
+  const requestHeaders = getHeaders(event)
+  const host = requestHeaders.host || ''
+
+  // Fetch the SVG markup.
+  const url = `${config.backendUrl}/de/media/${id}/icon`
+  const response = await $fetch.raw<Blob>(url, {
+    headers: {
+      host,
+      cookie: requestHeaders.cookie || '',
+      referer: requestHeaders.referer || '',
+    },
+  })
+
+  const cacheability = extractCacheability(response, event)
+
+  const svgMarkup = await response._data?.text()
+
+  if (!svgMarkup) {
+    return
+  }
+
+  const markup = processIcon(svgMarkup)
+
+  const builtIcon: BuiltIcon = {
+    markup,
+    tagsCdn: cacheability.tagsCdn,
+  }
+
+  // Store it in the data cache.
+  await addToCache(builtIcon, cacheability.tagsNuxt)
+
+  return builtIcon
+}
+
+const EMPTY_RESPONSE = '<svg></svg>'
+
+/**
+ * Returns an icon media entity as a SVG sprite with the media's SVG as the
+ * single <symbol>.
+ */
+export default defineEventHandler(async (event) => {
+  try {
+    const params = getRouterParams(event)?.params
+
+    if (typeof params !== 'string') {
+      return EMPTY_RESPONSE
+    }
+
+    const id = params.split('--')[0]
+
+    defaultContentType(event, 'image/svg+xml')
+
+    const result = await getIcon(id, event)
+    if (!result) {
+      console.log('Failed to load icon from Drupal: ' + id)
+      return EMPTY_RESPONSE
+    }
+
+    useCDNHeaders((v) => {
+      v.public()
+        .setNumeric('sharedMaxAge', MAX_AGE.ONE_YEAR)
+        .addTags(result.tagsCdn)
+        .addTags(['nuxt:api:icon'])
+        .set('staleIfError', MAX_AGE.ONE_DAY)
+    }, event)
+
+    // Set content type.
+    defaultContentType(event, 'image/svg+xml')
+
+    // Requests from the frontend include the changed date of the media entity
+    // as a query param. This means we can set a very high max age for our
+    // response.
+    setHeader(event, 'cache-control', 'public, max-age=604800')
+    return result.markup
+  } catch (e) {
+    console.log(e)
+    console.log('Failed to load icon from Drupal.', e)
+    // We don't want to return a message here, only an empty response.
+    return EMPTY_RESPONSE
+  }
+})

package/server/graphqlMiddleware.serverOptions.ts

@@ -0,0 +1,87 @@
+import { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/server-options'
+import { extractCacheability } from '~/packages/nuxt-icms/server/utils/cacheability'
+import type { GraphqlCacheability } from '~/packages/nuxt-icms/server/helpers'
+import { defaultLangcode, langcodes } from '#nuxt-language-negotiation/config'
+import { buildProxyRequestHeaders } from '~/packages/nuxt-icms/server/helpers/request'
+
+export default defineGraphqlServerOptions<{
+  extensions: {
+    cacheability: GraphqlCacheability | null
+  }
+}>({
+  graphqlEndpoint(_event, _operation, _operationName, context) {
+    const config = useRuntimeConfig()
+    const clientContextLanguage = context?.client?.language
+    if (
+      clientContextLanguage &&
+      langcodes.includes(clientContextLanguage as any)
+    ) {
+      return `${config.backendUrl}/${clientContextLanguage}/graphql`
+    }
+
+    return `${config.backendUrl}/${defaultLangcode}/graphql`
+  },
+  serverFetchOptions(event) {
+    const config = useRuntimeConfig()
+
+    return {
+      headers: {
+        ...buildProxyRequestHeaders(event),
+        'x-drupal-graphql-token': config.drupalGraphqlToken,
+      },
+    }
+  },
+  onServerResponse(
+    event,
+    graphqlResponse,
+    _operation,
+    _operationName,
+    context,
+  ) {
+    // Pass the set-cookie header from the GraphQL response to the client.
+    const setCookie = graphqlResponse.headers.getSetCookie()
+
+    for (const cookie of setCookie) {
+      appendResponseHeader(event, 'set-cookie', cookie)
+    }
+
+    const cacheability = extractCacheability(graphqlResponse, event)
+
+    const hasMessages = !!(
+      graphqlResponse._data?.data &&
+      'messengerMessages' in graphqlResponse._data.data &&
+      graphqlResponse._data.data.messengerMessages?.length
+    )
+
+    // Mark as uncacheable if the response contains Drupal messages.
+    if (hasMessages) {
+      cacheability.isCacheable = false
+    }
+
+    const isServerRequest = context?.client?.env === 'server'
+
+    // This is only provided when the request originates from SSR.
+    // We pass information about the cacheability along the GraphQL response,
+    // so that the Nuxt app is able to use this to determine if the
+    // rendered page can be cached or not.
+    const addCacheability = isServerRequest || import.meta.dev
+
+    // Return the GraphQL response.
+    return {
+      data: graphqlResponse._data!.data,
+      errors: graphqlResponse._data!.errors,
+      extensions: {
+        cacheability: addCacheability ? cacheability : null,
+      },
+    }
+  },
+  onServerError(event, error) {
+    setResponseStatus(event, 500)
+    console.log('onServerError', error)
+    return {
+      data: null,
+      errors: [],
+    }
+  },
+})
+

package/server/helpers/index.ts

@@ -0,0 +1,32 @@
+export type GraphqlCacheability = {
+  isCacheable: boolean
+  tagsNuxt: string[]
+  tagsCdn: string[]
+  tagsDrupal: string[]
+  maxAge: number
+  sharedMaxAge: number
+}
+
+export const MAX_AGE = {
+  UNCACHEABLE: 0,
+  TWO_HOURS: 7200,
+  SIX_HOURS: 21_600,
+  FIVE_MINUTES: 5 * 60,
+  ONE_HOUR: 60 * 60,
+  ONE_DAY: 86_400,
+  ONE_WEEK: 86_400 * 7,
+  ONE_YEAR: 86_400 * 365,
+}
+
+export const INTERVALS = {
+  '5min': 5 * 60,
+  '10min': 10 * 60,
+  '15min': 15 * 60,
+  '30min': 30 * 60,
+  '1hour': 60 * 60,
+  '2hours': 60 * 60 * 2,
+  '6hours': 60 * 60 * 6,
+  '1week': 60 * 60 * 24 * 7,
+} as const
+
+export type ValidInterval = keyof typeof INTERVALS | 'midnight'

package/server/helpers/request.ts

@@ -0,0 +1,44 @@
+import { type H3Event, getRequestHeaders } from 'h3'
+
+const PROXY_HEADERS = new Set([
+  'x-forwarded-for',
+  'x-forwarded-host',
+  'x-forwarded-server',
+  'x-forwarded-proto',
+  'x-forwarded-port',
+  'x-client-ip',
+  'x-real-ip',
+  'x-client-ssl',
+  'referer',
+  'user-agent',
+  'user-agent-https',
+  'cookie',
+  'authorization',
+])
+
+/**
+ * Build headers that can be used for proxying requests in fetch requests
+ * to API server routes or backend requests.
+ *
+ * @param event - The request event
+ *
+ * @returns The request headers appropriate for proxying.
+ */
+export function buildProxyRequestHeaders(
+  event: H3Event,
+): Record<string, string> {
+  if (import.meta.client) {
+    return {}
+  }
+
+  const requestHeaders = getRequestHeaders(event)
+  const proxyHeaders: Record<string, string> = {}
+  for (const name in requestHeaders) {
+    if (PROXY_HEADERS.has(name) && requestHeaders[name]) {
+      proxyHeaders[name] = requestHeaders[name]
+    }
+  }
+
+  return proxyHeaders
+}
+

package/server/middleware/spa.ts

@@ -0,0 +1,45 @@
+/**
+ * Enable SPA mode for logged in users.
+ *
+ * In order to reduce load on the server we disable SSR for logged in users.
+ */
+export default defineEventHandler((event) => {
+  if (!event.path) {
+    return
+  }
+  // Skip API calls.
+  if (
+    !event.path ||
+    event.path.includes('/api') ||
+    event.path.includes('/__nuxt') ||
+    event.path.match(/\.(js|woff|woff2|ico|svg)$/gm)
+  ) {
+    return
+  }
+
+  // Check if we have a cookie.
+  const headers = event.node.req.headers
+  const cookie = headers.cookie
+  if (!cookie) {
+    return
+  }
+
+  // Check if a Drupal session cookie is present. If yes, set the magic header
+  // to enable SPA mode.
+  const hasSession = cookie.includes('SSESS')
+  if (
+    event.path.includes('blokkliEditing') ||
+    event.path.includes('blokkliPreview') ||
+    hasSession
+  ) {
+    if (!event.context.nuxt) {
+      event.context.nuxt = {}
+    }
+    event.context.nuxt.noSSR = true
+    event.context.hasSession = hasSession
+    return
+  }
+
+  // Remove the incoming header so that SPA mode can't be forced.
+  delete event.node.req.headers['x-nuxt-no-ssr']
+})

package/server/multiCache.serverOptions.ts

@@ -0,0 +1,32 @@
+// @ts-ignore
+import { defineMultiCacheOptions } from 'nuxt-multi-cache/dist/runtime/serverOptions'
+import { getHeaders, type H3Event } from 'h3'
+import lruCacheDriver from 'unstorage/drivers/lru-cache'
+
+const multiCacheServerOptions = defineMultiCacheOptions({
+  api: {},
+  data: {},
+  enabledForRequest: (event: H3Event) => {
+    const hasSession = (event.node.req.headers.cookie || '').includes('SSESS')
+    return Promise.resolve(!hasSession)
+  },
+  route: {
+    storage: {
+      driver: lruCacheDriver({
+        max: 10000,
+      }),
+    },
+    buildCacheKey: (event: H3Event) => {
+      const path = (event.path || '')
+        .replaceAll('/', '__')
+        .replaceAll('?', '__')
+        .replaceAll('&', '__')
+
+      const headers = getHeaders(event)
+      const cookie = headers.cookie || 'anonymous'
+      return path + cookie
+    },
+  },
+})
+
+export default multiCacheServerOptions

package/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}