@iqual/nuxt-icms 1.4.9 → 1.5.0

package/pages/index.vue

@@ -1,10 +1,15 @@
 <template>
-  <component :is="pageComponent" v-bind="node"/>
+  <div>
+    <component :is="entityComponent" v-bind="entity" />
+  </div>
+  
 </template>
 
 <script lang="ts" setup>
 
-const { $resolveDynamicEntityComponent } = useNuxtApp()
+const { get } = useEntityRegistry()
+
+const entityComponent = computed(() => get(entity.value?.__typename))
 
 defineOptions({
   name: 'Homepage',
@@ -15,13 +20,7 @@ definePageMeta({
   hideBreadcrumb: true,
 })
 
-const { entity: node } = await useDrupalRouteQuery('slug')
-
-const contentType = computed(() => node.value?.__typename)
-
-const pageComponent = computed(() => {
-  return $resolveDynamicEntityComponent(contentType.value)
-})
+const { entity } = await useDrupalRouteQuery('slug')
 
 await renderPageDependencies()
-</script>
+</script>

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

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

package/plugins/drupalUser.ts

@@ -1,5 +1,5 @@
 import { defineNuxtPlugin } from '#app'
-import useDrupalUser from '~/composables/useDrupalUser'
+import useDrupalUser from '../composables/useDrupalUser'
 
 /**
  * Loads data about the current session.

package/plugins/graphqlMiddleware.ts

@@ -1,7 +1,7 @@
 import { defineNuxtPlugin } from 'nuxt/app'
 import type { DrupalMessage } from '../composables/useDrupalMessages'
 import type { GraphqlResponseTyped } from '#nuxt-graphql-middleware/response'
-import { buildProxyRequestHeaders } from '~/shared/request'
+import { buildProxyRequestHeaders } from '#shared/request'
 
 type GraphqlMessengerMessage = {
   type: string
@@ -71,4 +71,4 @@ export default defineNuxtPlugin({
       }
     }
   },
-})
+})

package/plugins/registerNodeIcmsPageComponents.ts

@@ -0,0 +1,9 @@
+import { NodeIcmsPage, NodeIcmsPageTeaser, NodeIcmsPageSearchResult } from '#components'
+
+export default defineNuxtPlugin(() => {
+  const { register } = useEntityRegistry()
+
+  register('NodeIcmsPage', NodeIcmsPage)
+  register('NodeIcmsPageTeaser', NodeIcmsPageTeaser)
+  register('NodeIcmsPageSearchResult', NodeIcmsPageSearchResult)
+})

package/queries/blokkli.graphql

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

package/queries/facetTermLabels.graphql

@@ -0,0 +1,17 @@
+query facetTermLabels($ids: [String!]!) {
+  terms: entityQuery(
+    entityType: TAXONOMY_TERM
+    filter: {
+      conditions: [
+        { field: "tid", value: $ids, operator: IN }
+      ]
+    }
+  ) {
+    items {
+      ... on TaxonomyTerm {
+        id
+        label
+      }
+    }
+  }
+}

package/queries/query.drupalUser.graphql

@@ -6,5 +6,7 @@ query drupalUser {
 }
 
 fragment currentDrupalUser on User {
+  id
+  mail
   canAccessToolbar: hasPermission(permission: "access toolbar")
 }

package/scripts/create-shade.ts

@@ -0,0 +1,168 @@
+import { existsSync } from 'node:fs'
+import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { join } from 'node:path'
+
+import { converter, formatHex, parse } from 'culori'
+
+const toOklch = converter('oklch')
+const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
+const SHADE_LIGHTNESS: Record<number, number> = {
+  50: 0.97,
+  100: 0.92,
+  200: 0.88,
+  300: 0.82,
+  400: 0.75,
+  500: 0.62,
+  600: 0.5,
+  700: 0.38,
+  800: 0.25,
+  900: 0.15,
+  950: 0.12,
+}
+
+function fail(message: string): never {
+  console.error(message)
+  process.exit(1)
+}
+
+function normalizeName(input: string) {
+  return input
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+function formatNumber(value: number, digits = 4) {
+  return Number(value.toFixed(digits)).toString()
+}
+
+function titleCase(value: string) {
+  return value
+    .split('-')
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+function pickAnchorShade(lightness: number) {
+  return SHADES.reduce((closestShade, shade) => {
+    const closestDelta = Math.abs(SHADE_LIGHTNESS[closestShade] - lightness)
+    const shadeDelta = Math.abs(SHADE_LIGHTNESS[shade] - lightness)
+
+    return shadeDelta < closestDelta ? shade : closestShade
+  }, SHADES[0])
+}
+
+async function ensureThemeImport(themePath: string) {
+  const themeContent = await readFile(themePath, 'utf8')
+  const importLine = "@import './colors.css';"
+
+  if (themeContent.includes(importLine)) {
+    return
+  }
+
+  await writeFile(themePath, `${importLine}\n\n${themeContent}`)
+}
+
+async function ensureColorsImport(colorsPath: string, fileName: string) {
+  const importLine = `@import './${fileName}';`
+  const colorsContent = existsSync(colorsPath)
+    ? await readFile(colorsPath, 'utf8')
+    : '/* Generated app color palettes live here. */\n\n'
+
+  if (colorsContent.includes(importLine)) {
+    return
+  }
+
+  const trimmed = colorsContent.trimEnd()
+  const nextContent = `${trimmed}\n${trimmed ? '\n' : ''}${importLine}\n`
+  await writeFile(colorsPath, nextContent)
+}
+
+async function main() {
+  const [, , rawName, rawColor] = process.argv
+
+  if (!rawName || !rawColor) {
+    fail('Usage: bun run create-shade <name> <color>')
+  }
+
+  const name = normalizeName(rawName)
+  if (!name) {
+    fail('Color name must contain letters or numbers.')
+  }
+
+  const parsed = parse(rawColor)
+  if (!parsed) {
+    fail(`Could not parse color: ${rawColor}`)
+  }
+
+  const oklch = toOklch(parsed)
+  if (!oklch || oklch.l === undefined || oklch.c === undefined || oklch.h === undefined) {
+    fail(`Could not convert color to OKLCH: ${rawColor}`)
+  }
+
+  const themeDir = join(process.cwd(), 'app/assets/css/theme')
+  const themePath = join(themeDir, 'theme.css')
+  const colorsPath = join(themeDir, 'colors.css')
+  const fileName = `color-${name}.css`
+  const filePath = join(themeDir, fileName)
+
+  if (!existsSync(themePath)) {
+    fail(`Could not find theme file at ${themePath}`)
+  }
+  if (existsSync(filePath)) {
+    fail(`Color file already exists: ${filePath}`)
+  }
+
+  await mkdir(themeDir, { recursive: true })
+  await ensureThemeImport(themePath)
+
+  const displayName = titleCase(name)
+  const hex = formatHex(parsed) ?? rawColor
+  const lightness = formatNumber(oklch.l)
+  const chroma = formatNumber(oklch.c)
+  const hue = formatNumber(oklch.h, 2)
+  const anchorShade = pickAnchorShade(oklch.l)
+
+  const rawShadeLines = SHADES.map((shade) => {
+    if (shade === anchorShade) {
+      return [
+        `  /* Uses the input color as the anchor shade (${anchorShade}). */`,
+        `  --${name}-${shade}: oklch(`,
+        `    var(--${name}-lightness) var(--${name}-chroma) var(--${name}-hue)`,
+        '  );',
+      ].join('\n')
+    }
+
+    return [
+      `  --${name}-${shade}: oklch(`,
+      `    var(--lightness-${shade}) var(--${name}-chroma) var(--${name}-hue)`,
+      '  );',
+    ].join('\n')
+  }).join('\n')
+
+  const themeShadeLines = SHADES.map((shade) => `  --color-${name}-${shade}: var(--${name}-${shade});`).join('\n')
+
+  const fileContent = `:root {
+  /* ${displayName}: ${hex} */
+  --${name}-lightness: ${lightness};
+  --${name}-chroma: ${chroma};
+  --${name}-hue: ${hue};
+
+${rawShadeLines}
+}
+
+@theme {
+${themeShadeLines}
+  --color-${name}: var(--color-${name}-${anchorShade});
+}
+`
+
+  await writeFile(filePath, fileContent)
+  await ensureColorsImport(colorsPath, fileName)
+
+  console.log(`Created ${fileName} from ${hex} with anchor shade ${anchorShade}`)
+}
+
+await main()

package/server/__tests__/graphqlMiddleware.ts

@@ -0,0 +1,41 @@
+import { describe, expect, test, vi } from 'vitest'
+import graphqlMiddlewareConfig from './../graphqlMiddleware.serverOptions'
+import type { H3Event } from 'h3'
+
+vi.mock('#graphql-server-options', () => {
+  return {
+    defineGraphqlServerOptions(v: unknown) {
+      return v
+    },
+  }
+})
+
+const metaMock = vi.hoisted(() => ({
+  importMetaClient: false,
+}))
+
+vi.mock('~~/shared/importMeta', () => metaMock)
+
+describe('The nuxt-graphql-middleware config', () => {
+  test('Passes appropriate incoming headers', async () => {
+    metaMock.importMetaClient = false
+    expect(graphqlMiddlewareConfig.serverFetchOptions).toBeDefined()
+
+    const event = {
+      node: {
+        req: {
+          headers: {
+            foobar: 'test',
+            cookie: 'my_cookie',
+          },
+        },
+      },
+    } as unknown as H3Event
+
+    const result = await graphqlMiddlewareConfig!.serverFetchOptions!(event)
+    // @ts-ignore
+    expect(result.headers?.foobar).toBeUndefined()
+    // @ts-ignore
+    expect(result.headers?.cookie).toEqual('my_cookie')
+  })
+})

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

@@ -1,8 +1,7 @@
 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'
+import { MAX_AGE } from '../../helpers'
 
 const config = useRuntimeConfig()
 
@@ -33,16 +32,18 @@ export function extractSymbol(source = ''): ParsedSymbol {
   const attributes =
     matches?.reduce<Record<string, string>>((acc, attribute) => {
       const [name, unformattedValue] = attribute.split('=')
-      acc[name] = unformattedValue
-        ? unformattedValue.replace(/['"]/g, '')
-        : 'true'
+      if (name) {
+        acc[name] = unformattedValue
+          ? unformattedValue.replace(/['"]/g, '')
+          : 'true'
+      }
 
       return acc
     }, {}) || {}
 
   return {
     attributes,
-    content,
+    content: content || '',
   }
 }
 
@@ -196,4 +197,4 @@ export default defineEventHandler(async (event) => {
     // We don't want to return a message here, only an empty response.
     return EMPTY_RESPONSE
   }
-})
+})

package/server/graphqlMiddleware.serverOptions.ts

@@ -1,8 +1,8 @@
 import { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/server-options'
-import { extractCacheability } from '@iqual/nuxt-icms/server/utils/cacheability'
-import type { GraphqlCacheability } from '@iqual/nuxt-icms/server/helpers'
+import { extractCacheability } from '../server/utils/cacheability'
 import { defaultLangcode, langcodes } from '#nuxt-language-negotiation/config'
-import { buildProxyRequestHeaders } from '@iqual/nuxt-icms/server/helpers/request'
+import type { GraphqlCacheability } from '../server/helpers'
+import { buildProxyRequestHeaders } from '#shared/request'
 
 export default defineGraphqlServerOptions<{
   extensions: {
@@ -83,5 +83,4 @@ export default defineGraphqlServerOptions<{
       errors: [],
     }
   },
-})
-
+})

package/server/multiCache.serverOptions.ts

@@ -1,32 +1,32 @@
-// @ts-ignore
-import { defineMultiCacheOptions } from 'nuxt-multi-cache/dist/runtime/serverOptions'
-import { getHeaders, type H3Event } from 'h3'
+import { defineMultiCacheOptions } from 'nuxt-multi-cache/server-options'
+import { getHeaders } from 'h3'
+import 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,
-      }),
+export default defineMultiCacheOptions(() => {
+  return {
+    api: {},
+    data: {},
+    enabledForRequest: (event: H3Event) => {
+      const hasSession = (event.node.req.headers.cookie || '').includes('SSESS')
+      return Promise.resolve(!hasSession)
     },
-    buildCacheKey: (event: H3Event) => {
-      const path = (event.path || '')
-        .replaceAll('/', '__')
-        .replaceAll('?', '__')
-        .replaceAll('&', '__')
+    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
+        const headers = getHeaders(event)
+        const cookie = headers.cookie || 'anonymous'
+        return path + cookie
+      },
     },
-  },
-})
-
-export default multiCacheServerOptions
+  }
+})

package/server/utils/cacheability.ts

@@ -1,7 +1,8 @@
 import type { FetchResponse } from 'ofetch'
 import type { H3Event } from 'h3'
 import crypto from 'crypto'
-import { INTERVALS, MAX_AGE, type ValidInterval } from '../helpers'
+import { INTERVALS, MAX_AGE } from '../helpers'
+import type { ValidInterval } from '../helpers'
 
 function extractCacheTags(
   response: FetchResponse<unknown>,
@@ -135,4 +136,4 @@ export function buildFastlyCacheTags(input: string | string[]): string[] {
       .digest('base64')
       .substring(0, 6)
   })
-}
+}