@iqual/nuxt-icms 1.6.1 → 1.6.2-rc.2

package/README.md

@@ -0,0 +1,86 @@
+# @iqual/nuxt-icms
+
+The Nuxt layer of ICMS: design system, blökkli components and the GraphQL
+integration with the Drupal backend. Client projects get it through
+`@iqual/create-nuxt-icms`.
+
+## Page cache
+
+Anonymous HTML is cached in the memory of the Nuxt process (nuxt-multi-cache's
+route cache) and purged by Drupal cache tags through the `nuxt_multi_cache`
+purger, with a 5 s batching delay. Code: `cache/`, `utils/pageCache.ts`,
+`modules/pageCache.ts`, `server/plugins/pageCache.ts`.
+
+- **Stored:** pages that opt in with `usePageCache()` (the catch-all page and
+  the homepage do), rendered with status 200, from cacheable GraphQL responses
+  only, without setting a cookie. Requests with a Drupal session
+  (`SSESS*`/`SESS*`) and blökkli editor/preview requests bypass it.
+- **Never stored:** redirects, 4xx and 5xx. There is no grace: a purged page is
+  re-rendered on the next request, or fails if Drupal is down.
+- **Key:** scheme, host, path and the sorted query, without cookies and
+  analytics/click IDs (`utm_*`, `gclid`, `fbclid`, …).
+- **Budget:** LRU by bytes, pages stored gzipped. `routeMaxSize: 'auto'` uses 3%
+  of the container memory (8–64 MiB; 24 MiB if unknown; off in `nuxi dev`,
+  `NUXT_PAGE_CACHE_ROUTE_MAX_SIZE=auto` turns it on). The data cache has 8 MiB.
+  Under heavy churn the process grows by several times the budget (8 MiB: +40–50
+  MB, 24 MiB: +60–90 MB RSS).
+- **Headers:** cacheable anonymous responses get
+  `Cache-Control: public, max-age=300` without `s-maxage`/`Cache-Tag`; sessions
+  and 5xx get `private, no-store`. `X-Icms-Page-Cache: HIT|MISS` shows the
+  outcome.
+- **`varnish` mode:** behind Varnish (`routing.cache: varnish`) the responses
+  keep `s-maxage` and `Cache-Tag` and the route cache is off.
+  `NUXT_PAGE_CACHE_MODE=varnish` is set by `frontend/.environment`; an
+  explicitly set variable wins.
+
+Configure it in `frontend/nuxt.config.ts` or with the environment variables:
+
+```ts
+runtimeConfig: {
+  pageCache: {
+    mode: 'varnish', // NUXT_PAGE_CACHE_MODE
+    browserMaxAge: 300, // NUXT_PAGE_CACHE_BROWSER_MAX_AGE
+    routeMaxSize: 32 * 1024 * 1024, // NUXT_PAGE_CACHE_ROUTE_MAX_SIZE, 'auto', 0 = off
+    routeCompression: true, // NUXT_PAGE_CACHE_ROUTE_COMPRESSION
+    routeMaxAge: 604_800, // NUXT_PAGE_CACHE_ROUTE_MAX_AGE (7 days)
+    dataMaxSize: 8 * 1024 * 1024, // NUXT_PAGE_CACHE_DATA_MAX_SIZE
+  },
+},
+```
+
+Projects need no `server/multiCache.serverOptions.ts`. One that has its own file
+must extend the ICMS options, or the page cache stays off (the server logs
+`[icms] Page cache disabled`):
+
+```ts
+// frontend/server/multiCache.serverOptions.ts
+import defineIcmsOptions from '@iqual/nuxt-icms/cache/multiCache.serverOptions'
+import { defineMultiCacheOptions } from 'nuxt-multi-cache/server-options'
+
+export default defineMultiCacheOptions(() => {
+  const options = defineIcmsOptions()
+  return { ...options /* , project overrides */ }
+})
+```
+
+## Webform spam protection (Turnstile)
+
+Webforms are submitted through GraphQL, which bypasses Drupal's Form API, so
+Drupal spam modules (`honeypot`, `captcha`, `antibot`, Webform's honeypot) never
+run on them. Use Cloudflare Turnstile instead: the widget renders above the
+submit button, and a Nitro middleware verifies its token before the
+`submitWebform` mutation reaches Drupal.
+
+It is off until both keys are set on the **frontend** application (Drupal needs
+neither):
+
+```
+NUXT_PUBLIC_TURNSTILE_SITE_KEY=0x4AAAAAAA…   # public
+NUXT_TURNSTILE_SECRET_KEY=0x4AAAAAAA…        # sensitive
+```
+
+Cloudflare's test keys for staging: `1x00000000000000000000AA` /
+`1x0000000000000000000000000000000AA` always pass, `2x00000000000000000000AB` /
+`2x0000000000000000000000000000000AA` always fail. The rejection message is the
+text `webform.spam_protection_error`; the widget is themed via `turnstileClass`
+of `DrupalWebform`.

package/__tests__/anchors.spec.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest'
+import { anchorId, resolveAnchorId } from '../composables/useAnchors'
+
+/**
+ * The anchor block and the anchor navigation derive the same id from the same
+ * fields — one on the block that carries the id, one on the links pointing at
+ * it. A drift between the two leaves links pointing nowhere, so the
+ * derivation is pinned here.
+ */
+describe('anchorId', () => {
+  it('lowercases, strips accents and special characters, dashes the spaces', () => {
+    expect(anchorId('Öffnungszeiten & Kontakt')).toBe('offnungszeiten-kontakt')
+    expect(anchorId('  Über uns  ')).toBe('uber-uns')
+    expect(anchorId('FAQ (2026)')).toBe('faq-2026')
+  })
+
+  it('is empty when nothing usable is left', () => {
+    expect(anchorId('')).toBe('')
+    expect(anchorId('***')).toBe('')
+  })
+})
+
+describe('resolveAnchorId', () => {
+  it('generates the id from the label when the anchor is empty', () => {
+    expect(resolveAnchorId('Unsere Standorte', null)).toBe('unsere-standorte')
+    expect(resolveAnchorId('Unsere Standorte', '   ')).toBe('unsere-standorte')
+  })
+
+  it('prefers the anchor field and keeps its casing', () => {
+    expect(resolveAnchorId('Unsere Standorte', 'standorte')).toBe('standorte')
+    expect(resolveAnchorId('Unsere Standorte', 'Standorte')).toBe('Standorte')
+  })
+
+  it('still strips what is not valid in a fragment from the anchor field', () => {
+    expect(resolveAnchorId('Unsere Standorte', '#Standorte')).toBe('Standorte')
+    expect(resolveAnchorId('Kontakt', 'Büro Zürich')).toBe('Buro-Zurich')
+  })
+
+  it('handles missing values', () => {
+    expect(resolveAnchorId(undefined, undefined)).toBe('')
+    expect(resolveAnchorId(null, 'kontakt')).toBe('kontakt')
+  })
+})

package/__tests__/contract/blokkliComponents.spec.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest'
+import {
+  blokkliBundles,
+  hasSchema,
+  pascalCase,
+  readSchema,
+  resolveProject,
+  schemaTypeNames,
+} from './project'
+
+/**
+ * Guards the contract between the blökkli components and the Drupal schema.
+ *
+ * Every `defineBlokkli({ bundle })` component — in the base layer, the
+ * installed bundle layers and the project's own layers — renders a paragraph
+ * type; the editor lists it and the frontend resolves it through the
+ * `Paragraph<Bundle>` GraphQL type. A component whose paragraph type no longer
+ * exists in the schema is a dead block (editor error, unresolvable fragment);
+ * a layout paragraph type without a component renders nothing. Both sides are
+ * discovered, so project blocks and bundles are covered wherever they are
+ * installed.
+ */
+describe.skipIf(!hasSchema())(
+  'blökkli components and the GraphQL schema',
+  () => {
+    it('every blökkli component maps to a paragraph type in the schema', async () => {
+      const { layerDirs } = await resolveProject()
+      const types = schemaTypeNames(readSchema())
+      const bundles = blokkliBundles(layerDirs)
+      expect(bundles.size).toBeGreaterThan(0)
+
+      const missing = [...bundles]
+        .filter(([bundle]) => !types.has(`Paragraph${pascalCase(bundle)}`))
+        .map(([bundle, file]) => `${bundle} (${file})`)
+      expect(
+        missing,
+        'components without a paragraph type in schema.graphql',
+      ).toEqual([])
+    })
+
+    it('every ICMS layout paragraph type in the schema has a blökkli component', async () => {
+      const { layerDirs } = await resolveProject()
+      const bundles = blokkliBundles(layerDirs)
+      const componentTypes = new Set(
+        [...bundles.keys()].map((bundle) => `Paragraph${pascalCase(bundle)}`),
+      )
+      // Layout paragraphs are always top-level blocks; element paragraphs may
+      // be nested-only or data-only (e.g. event occurrences), so only layouts
+      // are required to have a component.
+      const layoutTypes = [...schemaTypeNames(readSchema())].filter((type) =>
+        /^ParagraphIcmsLayout[A-Z0-9]/.test(type),
+      )
+      expect(layoutTypes.length).toBeGreaterThan(0)
+
+      const missing = layoutTypes.filter((type) => !componentTypes.has(type))
+      expect(missing, 'layout paragraph types without a component').toEqual([])
+    })
+  },
+)

package/__tests__/contract/componentFragments.spec.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest'
+import { definedFragments, resolveProject } from './project'
+
+/**
+ * Guards the fragment composition the dynamic paragraph resolver relies on.
+ *
+ * Every layer registers the fragments of its blökkli components in
+ * `icms.components.fragments` (and `wrapperFragments` for paragraphs that
+ * embed another one); `dynamicParagraphResolver` spreads them into the
+ * generated `paragraph` fragment. A registered name without a definition
+ * — a renamed fragment file, a bundle layer installed without its documents,
+ * a project layer that forgot the file — only fails at `nuxt prepare`, with a
+ * generic GraphQL error far from its cause.
+ */
+describe('icms.components.fragments', () => {
+  it('every registered fragment name is defined in a GraphQL document', async () => {
+    const { layerDirs, componentFragments } = await resolveProject()
+    expect(componentFragments.length).toBeGreaterThan(0)
+
+    const defined = definedFragments(layerDirs)
+    const missing = componentFragments.filter((name) => !defined.has(name))
+    expect(missing, 'registered fragments without a definition').toEqual([])
+  })
+})

package/__tests__/contract/languages.spec.ts

@@ -0,0 +1,63 @@
+import { existsSync, readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, it, expect } from 'vitest'
+import {
+  hasSchema,
+  projectRoot,
+  readSchema,
+  resolveProject,
+  schemaEnumValues,
+} from './project'
+
+/**
+ * Guards the language contract between the frontend, Drupal and the routing.
+ *
+ * The frontend serves exactly `languageNegotiation.languages`, asking Drupal
+ * for each via `/{lang}/graphql`; Drupal exposes its languages as the
+ * `Langcode` enum; the nginx/VCL split (scaffolded from `routing.languages`
+ * in drupal/composer.json) decides which prefixes reach the frontend at all.
+ * A frontend language Drupal doesn't know renders empty; one the routing
+ * doesn't know is unreachable. Both regress silently on config changes.
+ */
+describe.skipIf(!hasSchema())('site languages', () => {
+  it('every frontend language exists in Drupal (Langcode enum)', async () => {
+    const { languages } = await resolveProject()
+    expect(languages.length).toBeGreaterThan(0)
+
+    const drupal = schemaEnumValues(readSchema(), 'Langcode')
+    expect(drupal.length).toBeGreaterThan(0)
+
+    const unknown = languages.filter(
+      (lang) => !drupal.includes(lang.toUpperCase()),
+    )
+    expect(unknown, 'frontend languages missing in the Drupal schema').toEqual(
+      [],
+    )
+  })
+
+  it('every frontend language is routed', async () => {
+    const composerPath = resolve(projectRoot, '../drupal/composer.json')
+    const routing = existsSync(composerPath)
+      ? (
+          JSON.parse(readFileSync(composerPath, 'utf8')) as {
+            extra?: {
+              'project-scaffold'?: { routing?: { languages?: string[] } }
+            }
+          }
+        ).extra?.['project-scaffold']?.routing?.languages
+      : undefined
+    if (!routing?.length) {
+      // Not scaffolded (yet): the routing falls back to the platform default.
+      return
+    }
+
+    const { languages } = await resolveProject()
+    // The first routing entry is the fallback target of the root redirect,
+    // not necessarily the frontend's default language — only membership is
+    // the contract.
+    const unrouted = languages.filter((lang) => !routing.includes(lang))
+    expect(unrouted, 'frontend languages missing in routing.languages').toEqual(
+      [],
+    )
+  })
+})

package/__tests__/contract/project.ts

@@ -0,0 +1,144 @@
+import { existsSync, readdirSync, readFileSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import { loadNuxtConfig } from '@nuxt/kit'
+
+/**
+ * Reads the project the specs run in — the monorepo's frontend or a client's
+ * — from the working directory: its committed schema.graphql, the resolved
+ * Nuxt config with every layer (base, bundles, project layers) and the files
+ * of all of them. Nothing here assumes the starterkit's set of languages,
+ * bundles or components; the specs compare what the project declares with
+ * what its Drupal schema exposes.
+ */
+
+export const projectRoot = process.cwd()
+export const schemaPath = resolve(projectRoot, 'schema.graphql')
+
+/** Skip guard: the committed schema is the contract these specs read. */
+export const hasSchema = () => existsSync(schemaPath)
+
+export function readSchema(): string {
+  return readFileSync(schemaPath, 'utf8')
+}
+
+/** All object type names of the schema (`type Foo ...`). */
+export function schemaTypeNames(schema: string): Set<string> {
+  return new Set(
+    [...schema.matchAll(/^type\s+([A-Za-z0-9_]+)/gm)].map((m) => m[1]!),
+  )
+}
+
+/** The values of a schema enum, e.g. `Langcode` → `['DE', 'EN']`. */
+export function schemaEnumValues(schema: string, name: string): string[] {
+  const match = schema.match(
+    new RegExp(`^enum\\s+${name}\\s*\\{([^}]*)\\}`, 'm'),
+  )
+  if (!match) return []
+  return match[1]!
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => /^[A-Z][A-Z0-9_]*$/.test(line))
+}
+
+/**
+ * `icms_layout_text` → `IcmsLayoutText`, the way graphql_core_schema names
+ * the GraphQL type of a bundle (`ParagraphIcmsLayoutText`).
+ */
+export function pascalCase(machineName: string): string {
+  return machineName
+    .split('_')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('')
+}
+
+export interface ResolvedProject {
+  /** Layer directories, base layer first, the project's own last. */
+  layerDirs: string[]
+  languages: string[]
+  componentFragments: string[]
+}
+
+let resolved: Promise<ResolvedProject> | undefined
+
+/** Resolves the Nuxt config (all layers merged) once per run. */
+export function resolveProject(): Promise<ResolvedProject> {
+  resolved ??= loadNuxtConfig({ cwd: projectRoot }).then((config) => {
+    const layerDirs = [...(config._layers ?? [])]
+      .map((layer) => layer.cwd)
+      .filter((dir): dir is string => typeof dir === 'string')
+      .reverse()
+    const icms = (
+      config as {
+        icms?: {
+          components?: { fragments?: string[]; wrapperFragments?: string[] }
+        }
+      }
+    ).icms
+    return {
+      layerDirs,
+      languages: [
+        ...((config.languageNegotiation as { languages?: string[] })
+          ?.languages ?? []),
+      ],
+      componentFragments: [
+        ...new Set([
+          ...(icms?.components?.fragments ?? []),
+          ...(icms?.components?.wrapperFragments ?? []),
+        ]),
+      ],
+    }
+  })
+  return resolved
+}
+
+/** Recursively lists files under a directory (skipping node_modules). */
+export function listFiles(dir: string, extension: string): string[] {
+  if (!existsSync(dir)) return []
+  const files: string[] = []
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    if (entry.name === 'node_modules' || entry.name.startsWith('.')) continue
+    const path = join(dir, entry.name)
+    if (entry.isDirectory()) files.push(...listFiles(path, extension))
+    else if (entry.name.endsWith(extension)) files.push(path)
+  }
+  return files
+}
+
+/**
+ * Directories a layer keeps its source in: the layer root and, for the Nuxt 4
+ * app structure, its `app/` directory.
+ */
+export function layerSourceDirs(layerDir: string): string[] {
+  return [layerDir, join(layerDir, 'app')].filter((dir) => existsSync(dir))
+}
+
+/** The paragraph bundles of all `defineBlokkli({ bundle })` components. */
+export function blokkliBundles(layerDirs: string[]): Map<string, string> {
+  const bundles = new Map<string, string>()
+  for (const layerDir of layerDirs) {
+    for (const sourceDir of layerSourceDirs(layerDir)) {
+      for (const file of listFiles(join(sourceDir, 'components'), '.vue')) {
+        const match = readFileSync(file, 'utf8').match(
+          /defineBlokkli\(\s*\{[\s\S]*?\bbundle:\s*['"]([a-z0-9_]+)['"]/,
+        )
+        if (match) bundles.set(match[1]!, file)
+      }
+    }
+  }
+  return bundles
+}
+
+/** Names of all fragments defined in the project's and layers' documents. */
+export function definedFragments(layerDirs: string[]): Set<string> {
+  const names = new Set<string>()
+  for (const dir of new Set([projectRoot, ...layerDirs])) {
+    for (const file of listFiles(dir, '.graphql')) {
+      for (const match of readFileSync(file, 'utf8').matchAll(
+        /^\s*fragment\s+([A-Za-z0-9_]+)\s+on\b/gm,
+      )) {
+        names.add(match[1]!)
+      }
+    }
+  }
+  return names
+}

package/__tests__/hreflang.spec.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { buildHreflangLinks } from '../composables/useHreflangLinks'
+
+const ORIGIN = 'https://www.example.com'
+
+describe('buildHreflangLinks', () => {
+  it('lists every translation, including the current one', () => {
+    expect(
+      buildHreflangLinks(
+        [
+          { code: 'de', path: '/de/ueber-uns' },
+          { code: 'fr', path: '/fr/a-propos' },
+        ],
+        ORIGIN,
+      ),
+    ).toEqual([
+      { rel: 'alternate', hreflang: 'de', href: `${ORIGIN}/de/ueber-uns` },
+      { rel: 'alternate', hreflang: 'fr', href: `${ORIGIN}/fr/a-propos` },
+    ])
+  })
+
+  it('emits nothing for a page that exists in one language only', () => {
+    expect(
+      buildHreflangLinks([{ code: 'de', path: '/de/ueber-uns' }], ORIGIN),
+    ).toEqual([])
+  })
+
+  it('emits nothing without a known origin, rather than relative hrefs', () => {
+    expect(
+      buildHreflangLinks(
+        [
+          { code: 'de', path: '/de/ueber-uns' },
+          { code: 'fr', path: '/fr/a-propos' },
+        ],
+        '',
+      ),
+    ).toEqual([])
+  })
+})

package/{tests → __tests__}/pages.spec.ts

@@ -8,6 +8,7 @@ import { parse as parseSfc } from '@vue/compiler-sfc'
 async function findVueFiles(
   dir: string,
   ignorePatterns: string[] = [],
+  rootDir: string = dir,
 ): Promise<string[]> {
   const entries = await fsp.readdir(dir, { withFileTypes: true })
   const files: string[] = []
@@ -15,13 +16,16 @@ async function findVueFiles(
   for (const entry of entries) {
     const fullPath = path.join(dir, entry.name)
 
-    // Skip if path matches any ignore pattern
-    if (ignorePatterns.some((pattern) => fullPath.includes(pattern))) {
+    // Skip if the path below the root matches any ignore pattern. Matching the
+    // absolute path would also match the checkout directory, which on CI is
+    // named after the repository — and that name contains "blokkli".
+    const relativePath = path.relative(rootDir, fullPath)
+    if (ignorePatterns.some((pattern) => relativePath.includes(pattern))) {
       continue
     }
 
     if (entry.isDirectory()) {
-      const subFiles = await findVueFiles(fullPath, ignorePatterns)
+      const subFiles = await findVueFiles(fullPath, ignorePatterns, rootDir)
       files.push(...subFiles)
     } else if (entry.name.endsWith('.vue')) {
       files.push(fullPath)
@@ -69,11 +73,10 @@ function functionIsCalledAtLeastOnce(
 }
 
 describe('The Nuxt page component', async () => {
-  const rootDir = path.resolve(__dirname, './../app/pages')
+  const rootDir = path.resolve(__dirname, './../pages')
   const ignorePatterns = ['blokkli']
 
   const pageFilePaths = await findVueFiles(rootDir, ignorePatterns)
-  console.log(pageFilePaths)
 
   const pageComponentFiles = await Promise.all(
     pageFilePaths.map((filePath) => {
@@ -86,6 +89,12 @@ describe('The Nuxt page component', async () => {
     }),
   )
 
+  // Without this the suite would silently pass as empty if the discovery ever
+  // stops finding the page components.
+  it('is discovered by the test suite', () => {
+    expect(pageComponentFiles.length).toBeGreaterThan(0)
+  })
+
   pageComponentFiles.forEach(({ filePath, content }) => {
     it(`"${filePath}" should call useDrupalRouteQuery()`, () => {
       expect(

package/app.config.ts

@@ -1,2 +1,17 @@
 export default defineAppConfig({
+  ui: {
+    button: {
+      // The design system styles buttons entirely through the `ui.base` slot,
+      // so it opts out of @nuxt/ui's own colour and variant classes by
+      // selecting these empty ones.
+      variants: {
+        color: {
+          none: '',
+        },
+        variant: {
+          none: '',
+        },
+      },
+    },
+  },
 })

package/app.vue

@@ -1,19 +1,7 @@
 <template>
   <UApp>
+    <NuxtLoadingIndicator color="var(--primary-500)" :height="3" />
     <div class="bk-main-canvas relative">
-      <ClientOnly>
-        <div
-          v-if="drupalUser.accessToolbar && !isEditing"
-          class="hidden border-b border-b-gray-100 bg-white 2xl:block"
-        >
-          <VuepalAdminToolbar :key="language" />
-          <div class="flex">
-            <div class="mx-auto w-auto bg-white py-8 xl:min-w-[1174px]">
-              <VuepalLocalTasks />
-            </div>
-          </div>
-        </div>
-      </ClientOnly>
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>
@@ -22,16 +10,10 @@
 </template>
 
 <script setup lang="ts">
-const route = useRoute()
-const drupalUser = useDrupalUser()
+// The admin UI (toolbar, local tasks) is Drupal's: editors browse the
+// frontend inside the backend's site shell (see docs/routing.md).
 const language = useCurrentLanguage()
 
-const isEditing = computed(
-  () =>
-    !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
-    drupalUser.value.accessToolbar,
-)
-
 useHead({
   htmlAttrs: {
     lang: language.value,

package/assets/css/backend.css

@@ -9,6 +9,7 @@
     text-transform: uppercase;
     list-style-type: none !important;
     margin: 0 !important;
+
     a,
     div {
       display: block;
@@ -26,10 +27,12 @@
         color: #aaa;
         font-weight: 500;
       }
+
       &.is-source {
         border-color: #a7b3ce;
       }
     }
+
     a {
       &:hover {
         background: #dbe1ea;
@@ -46,9 +49,14 @@
   position: relative;
   display: inline-block;
   margin-right: 0.25em;
+
   &.is-published {
     background: var(--gin-color-green);
   }
+
+  &.is-draft {
+    background: var(--gin-color-warning);
+  }
 }
 
 table.permissions thead tr {
@@ -80,3 +88,51 @@ table.permissions thead tr {
   bottom: 0;
   z-index: 20000;
 }
+
+.meta-sidebar__trigger {
+  &.trigger {
+    cursor: pointer;
+    background: transparent;
+    display: block;
+    height: 32px;
+    width: 32px;
+    margin-inline: calc(var(--gin-spacing-xxs) * -1);
+    border-radius: var(--gin-border-m);
+
+    &:hover {
+      background-color: var(--gin-color-primary-light);
+
+      &::before {
+        background-color: var(--gin-color-primary);
+      }
+    }
+
+    &::before {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      content: '';
+      -webkit-mask-repeat: no-repeat;
+      mask-repeat: no-repeat;
+      -webkit-mask-position: center center;
+      mask-position: center center;
+      background-color: var(--gin-icon-color);
+      -webkit-mask-image: url('/themes/contrib/gin/dist/media/sprite.svg#sidebar-view');
+      mask-image: url('/themes/contrib/gin/dist/media/sprite.svg#sidebar-view');
+      -webkit-mask-size: var(--gin-icon-size-toolbar-secondary)
+        var(--gin-icon-size-toolbar-secondary);
+      mask-size: var(--gin-icon-size-toolbar-secondary)
+        var(--gin-icon-size-toolbar-secondary);
+      border-radius: 50%;
+    }
+
+    &.is-active,
+    &.is-active:hover {
+      background-color: var(--gin-bg-item-hover);
+
+      &::before {
+        background-color: var(--gin-color-primary);
+      }
+    }
+  }
+}

package/assets/css/base/base.css

@@ -1,3 +1,3 @@
 html {
-  @apply scroll-smooth hyphens-auto bg-white font-sans text-black;
-}
+  @apply scroll-smooth bg-white font-sans hyphens-auto text-black;
+}

package/assets/css/base/typography.css

@@ -10,7 +10,7 @@ h5,
 .h5,
 h6,
 .h6 {
-  @apply hyphens-auto font-bold;
+  @apply font-bold hyphens-auto;
 }
 
 h1,
@@ -41,4 +41,4 @@ h5,
 h6,
 .h6 {
   @apply mb-2 text-base lg:text-lg;
-}
+}