@frigear-nu/base 0.0.0-stage → 0.0.2

package/README.md

@@ -1,3 +1,90 @@
-# Temporary Holding Version
+# @frigear-nu/base
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Shared Nuxt layer for the frigear.nu websites.
+
+This package is the common foundation used by the Nuxt apps in this monorepo. It centralizes shared configuration, Nuxt modules, app defaults, and styling primitives so the websites stay consistent without duplicating setup in each app.
+
+## What it provides
+
+- Shared Nuxt config and module wiring
+- Tailwind and UI defaults
+- Common app-level conventions and aliases
+- Reusable runtime setup for Frigear.nu sites
+
+## Consumers
+
+- [apps/website](../../apps/website)
+
+## Usage
+
+```bash
+pnpm add @frigear-nu/base nuxt
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  extends: ['@frigear-nu/base'],
+})
+```
+
+`nuxt` is a peer dependency. The layer ships as source (`app`, `modules`, `shared`, `utils`, `content.config.ts`,
+`nuxt.config.ts`) with no build step. Its `@frigear-nu/menu` dependency is installed with it.
+
+## Setup
+
+From the repository root:
+
+```bash
+corepack enable
+pnpm install
+```
+
+## Local development
+
+This package is usually consumed through the app workspaces rather than run directly. If you need to validate the layer in isolation:
+
+```bash
+pnpm --filter '@frigear-nu/base' typecheck
+pnpm --filter '@frigear-nu/base' lint
+```
+
+## Common workspace commands
+
+```bash
+# Validate the shared layer
+pnpm --filter '@frigear-nu/base' typecheck
+pnpm --filter '@frigear-nu/base' lint
+
+# Run an app that consumes the layer
+pnpm --filter '@frigear-nu/website' dev
+```
+
+## Optional i18n for content
+
+Content collections (`config`, `pages`) support opt-in localization, fully driven by the consuming app:
+
+- By default (no i18n configured), content stays flat: `content/config.yaml`, `content/pages/**`.
+- To localize, register `@nuxtjs/i18n` in the consuming app and configure its `locales` (e.g. `['en', 'no']`), then nest content under a locale folder: `content/en/config.yaml`, `content/en/pages/**`, `content/no/config.yaml`, `content/no/pages/**`.
+- When locales are configured, `content.config.ts` defines locale-suffixed collections (`config_en`, `pages_en`, ...) instead of the flat ones. `useConfig`/`useCurrentPage` pick the right collection automatically based on the current `$i18n` locale.
+- No locale folder/config means no behavior change — this feature is entirely opt-in.
+
+The `config` and `pages` collections are validated against `WebsiteConfigSchema` and `WebsitePageSchema` (see
+`shared/schema/config.ts` and `shared/schema/page.ts`). For the full schema reference and more detail on the
+localized/non-localized setup, see the [Base Layer docs](../../apps/docs/content/3.layers/1.base.md).
+
+Page front matter also accepts `container: true`, which wraps the rendered body in a `UContainer` (use it for plain prose pages such as legal; pages built from `u-page-*` sections manage their own containers). It also accepts `seo: { title, description, image, noindex }`, and `config.yaml` accepts `seo: { titleTemplate, description, image }`; the layer ships no SEO defaults, see the docs.
+
+## Notes
+
+- This package is a shared workspace dependency and is linked via `workspace:*` from apps.
+- Keep changes here compatible with both consuming apps.
+- If you change module config or public runtime behavior, validate both app consumers in the same change.
+
+## Publishing
+
+Released like the other packages (see the [publishing guide](../../apps/docs/content/1.getting-started/4.publishing.md)):
+the **Release** workflow with `base-layer`, or `pnpm exec release-it` from this folder. Check what ships with
+`pnpm pack --dry-run`. Only the paths in `files` are published; add new top-level folders there. Dependencies the layer
+needs at runtime belong in `dependencies`, not `devDependencies`. There is deliberately no `postinstall` script: it would
+run in every consumer's install.

package/app/app.config.ts

@@ -0,0 +1,14 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'green',
+      neutral: 'slate',
+    },
+  },
+  header: {
+    icon: {
+      desktop: false,
+      mobile: true,
+    },
+  },
+})

package/app/app.d.ts

@@ -0,0 +1,27 @@
+declare module 'nuxt/schema' {
+  interface AppConfigInput {
+    header?: {
+      icon?: {
+        desktop?: boolean
+        mobile?: boolean
+      }
+    }
+    socials?: Record<string, string>
+    github?: {
+      url?: string
+    }
+  }
+
+  interface AppConfig {
+    header?: {
+      icon?: {
+        desktop?: boolean
+        mobile?: boolean
+      }
+    }
+    socials?: Record<string, string>
+    github?: {
+      url?: string
+    }
+  }
+}

package/app/app.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico' },
+  ],
+})
+
+usePageSeo()
+</script>
+
+<template>
+  <UApp>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+    <CookieConsentBanner />
+  </UApp>
+</template>

package/app/assets/css/main.css

@@ -0,0 +1,29 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme static {
+  --font-sans: 'Public Sans', sans-serif;
+
+  --color-green-50: #EFFDF5;
+  --color-green-100: #D9FBE8;
+  --color-green-200: #B3F5D1;
+  --color-green-300: #75EDAE;
+  --color-green-400: #00DC82;
+  --color-green-500: #00C16A;
+  --color-green-600: #00A155;
+  --color-green-700: #007F45;
+  --color-green-800: #016538;
+  --color-green-900: #0A5331;
+  --color-green-950: #052E16;
+  --color-brand-50: #e6f1fb;
+  --color-brand-100: #c3ddf1;
+  --color-brand-200: #96c4e6;
+  --color-brand-300: #a5c7e8;
+  --color-brand-400: #87b3d8;
+  --color-brand-500: #4299e1;
+  --color-brand-600: #3188ca;
+  --color-brand-700: #2b78b5;
+  --color-brand-800: #25689f;
+  --color-brand-900: #1e527d;
+  --color-brand-950: #123354;
+}

package/app/components/App/AppFooter.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const { data: config } = await useConfig()
+</script>
+
+<template>
+  <UFooter>
+    <template
+      v-if="config?.footer && config?.footer?.copyright"
+      #left
+    >
+      <AppFooterLeft
+        :parts="Array.isArray(config?.footer?.copyright) ? config?.footer?.copyright : [config?.footer?.copyright]"
+      />
+    </template>
+    <template
+      v-if="config?.footer && config?.footer.sections && config?.footer.sections.length"
+      #top
+    >
+      <UContainer>
+        <UFooterColumns
+          :columns="config?.footer.sections"
+        />
+      </UContainer>
+    </template>
+    <template
+      v-if="config?.footer && config?.footer.right"
+      #right
+    >
+      <AppFooterRight :links="config?.footer.right" />
+    </template>
+  </UFooter>
+</template>

package/app/components/App/AppFooterLeft.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+type ReplaceKey = string | number | symbol | RegExp
+type ReplaceFn = (matches: string[]) => string
+type ReplaceValue = string | number | ReplaceFn
+type ReplaceItem = { match: ReplaceKey, replace: ReplaceValue }
+
+const props = withDefaults(defineProps<{
+  parts?: string[]
+  replacements?: ReplaceItem[]
+}>(), {
+  parts: () => ['Copyright ©', '{fullYear}'],
+})
+
+const currentUrl = useRequestURL()
+
+// todo: move this logic to a shared space
+const allReplacements = computed<ReplaceItem[]>(() => [
+  {
+    match: '{fullYear}',
+    replace: () => String(new Date().getFullYear()),
+  },
+  {
+    match: '{url}',
+    replace: () => currentUrl.toString(),
+  },
+  ...(props.replacements ?? []),
+])
+
+const rawItems = computed(() => {
+  if (!props.parts || props.parts.length === 0) return ['']
+  return props.parts
+})
+
+const normalizeMatch = (match: ReplaceKey): RegExp => {
+  if (match instanceof RegExp) return match
+  return new RegExp(String(match), 'g')
+}
+
+const applyReplace = (
+  text: string,
+  matcher: RegExp,
+  replacer: ReplaceValue,
+) => {
+  if (typeof replacer === 'function') {
+    return text.replace(matcher, (...args) => {
+      const matches = args.slice(0, -2)
+      return replacer(matches)
+    })
+  }
+
+  return text.replace(matcher, String(replacer))
+}
+
+const replaceParts = (text: string) => {
+  return allReplacements.value.reduce((acc, item) => {
+    const matcher = normalizeMatch(item.match)
+    return applyReplace(acc, matcher, item.replace)
+  }, text)
+}
+
+const text = computed(() => {
+  const joined = [...toValue(rawItems)].join(' ')
+  return replaceParts(joined)
+})
+</script>
+
+<template>
+  <div class="text-sm text-muted">
+    <LazyMDC :value="text" />
+  </div>
+</template>

package/app/components/App/AppFooterRight.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { ButtonProps } from '@nuxt/ui'
+
+type FooterLink = {
+  'label'?: string
+  'to'?: string
+  'icon'?: string
+  'variant'?: ButtonProps['variant']
+  'size'?: ButtonProps['size']
+  'target'?: string
+  'aria-label'?: string
+}
+
+const props = defineProps<{
+  links?: FooterLink[]
+}>()
+
+const appConfig = useAppConfig()
+const defaultLinks = computed<FooterLink[]>(() => {
+  const links = Object.entries(appConfig.socials || {}).map(([key, url]) => ({
+    'icon': `i-simple-icons-${key}`,
+    'to': url,
+    'target': '_blank',
+    'aria-label': `${key} social link`,
+  }))
+
+  if (appConfig.github?.url) {
+    links.push({
+      'icon': 'i-simple-icons-github',
+      'to': appConfig.github.url,
+      'target': '_blank',
+      'aria-label': 'GitHub repository',
+    })
+  }
+
+  return links
+})
+const footerLinks = computed<FooterLink[]>(() => props.links !== undefined ? props.links : defaultLinks.value)
+</script>
+
+<template>
+  <template v-if="footerLinks.length">
+    <UButton
+      v-for="(link, index) of footerLinks"
+      :key="index"
+      size="sm"
+      v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
+    />
+  </template>
+  <CookieConsentManage
+    class="inline-flex size-8 items-center justify-center rounded-md text-muted hover:bg-elevated"
+    aria-label="Manage cookies"
+  >
+    <UIcon
+      name="i-lucide-cookie"
+      class="size-5"
+    />
+  </CookieConsentManage>
+  <UColorModeButton />
+</template>

package/app/components/App/AppHeader.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const { data: config } = await useConfig()
+const { data: navigation } = useMenu('main')
+</script>
+
+<template>
+  <UHeader
+    :ui="{ center: navigation && navigation.length > 0 ? '' : 'flex-1' }"
+    to="/"
+    :title="stringOrPropValue(config?.name, 'long') || stringOrPropValue(config?.name, 'short')"
+  >
+    <template #title>
+      <AppHeaderLogo class="shrink-0" />
+    </template>
+
+    <AppHeaderCenter />
+    <template #right>
+      <AppHeaderCTA />
+      <LanguageSelect v-if="typeof $i18n !== 'undefined' && $i18n.locales && $i18n.locales.value && $i18n.locales.value.length > 1" />
+      <UColorModeButton />
+      <AppHeaderRight />
+    </template>
+
+    <template #toggle="{ open, toggle }">
+      <IconMenuToggle
+        :open="open"
+        class="lg:hidden"
+        @click="toggle"
+      />
+    </template>
+
+    <template #body>
+      <LazyAppHeaderBody />
+    </template>
+  </UHeader>
+</template>

package/app/components/App/AppHeaderBody.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const { data: config } = await useConfig()
+
+const items = computed(() => {
+  const iconOnMobile = useAppConfig().header?.icon?.mobile
+
+  if (typeof iconOnMobile === 'boolean' && !iconOnMobile) {
+    return config.value?.navigation?.map(item => ({
+      ...item,
+      icon: undefined,
+    }))
+  } else {
+    return config.value?.navigation
+  }
+})
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+</script>
+
+<template>
+  <div class="mt-4">
+    <UPageGrid v-if="config?.navigation">
+      <UPageCard
+        v-for="item in items "
+        :key="item.label"
+        :title="item.label"
+        :icon="item.icon"
+        :description="item.description"
+        :to="item.to"
+        class="hober:shadow-lg"
+        variant="subtle"
+        :ui="{ title: 'text-xl font-semibold' }"
+      />
+    </UPageGrid>
+    <UContentNavigation
+      v-else
+      highlight
+      variant="link"
+      :navigation="navigation"
+    />
+  </div>
+</template>

package/app/components/App/AppHeaderCTA.vue

@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>

package/app/components/App/AppHeaderCenter.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const { data: navigation } = useMenu('main')
+const items = computed(() => {
+  const iconOnDesktop = useAppConfig().header?.icon?.desktop
+
+  if (typeof iconOnDesktop === 'boolean' && !iconOnDesktop) {
+    return navigation?.value?.map(item => ({
+      ...item,
+      icon: undefined,
+    }))
+  } else {
+    return navigation?.value
+  }
+})
+</script>
+
+<template>
+  <UNavigationMenu
+    v-if="navigation"
+    :items="items"
+    variant="link"
+  />
+  <UContentSearchButton
+    v-else
+    :collapsed="false"
+    class="w-full"
+    variant="soft"
+    :ui="{
+      leadingIcon: 'size-4 mr-1',
+    }"
+  />
+</template>

package/app/components/App/AppHeaderLogo.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <AppLogo />
+</template>

package/app/components/App/AppHeaderRight.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+// This file can be overridden by creating a file in the same path in the consuming application.
+</script>
+
+<template>
+  <span />
+</template>

package/app/components/App/AppLogo.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { name } from '~~/package.json'
+
+const { data: config } = await useConfig()
+const logoLight = computed(() => stringOrPropValue(config.value?.logo, 'light') || stringOrPropValue(config.value?.logo, 'dark') || '')
+const logoDark = computed(() => stringOrPropValue(config.value?.logo, 'dark') || stringOrPropValue(config.value?.logo, 'light') || '')
+const logoAlt = computed(() => stringOrPropValue(config.value?.logo, 'alt') || stringOrPropValue(config.value?.name, 'long') || name)
+</script>
+
+<template>
+  <UColorModeImage
+    v-if="config?.logo"
+    :light="logoLight"
+    :dark="logoDark"
+    :alt="logoAlt"
+    :class="stringOrPropValue(config?.logo, 'class') || []"
+    fetchpriority="high"
+    rel="preload"
+  />
+  <span v-else>
+    {{ stringOrPropValue(config?.name, 'long') || stringOrPropValue(config?.name, 'short') || name }}
+  </span>
+</template>

package/app/components/IconMenuToggle.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { motion } from 'motion-v'
+import type { VariantType } from 'motion-v'
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const variants: { [k: string]: VariantType | ((custom: unknown) => VariantType) } = {
+  normal: {
+    rotate: 0,
+    y: 0,
+    opacity: 1,
+  },
+  close: (custom: unknown) => {
+    const c = custom as number
+    return {
+      rotate: c === 1 ? 45 : c === 3 ? -45 : 0,
+      y: c === 1 ? 6 : c === 3 ? -6 : 0,
+      opacity: c === 2 ? 0 : 1,
+      transition: {
+        type: 'spring',
+        stiffness: 260,
+        damping: 20,
+      },
+    }
+  },
+}
+
+const state = computed(() => props.open ? 'close' : 'normal')
+</script>
+
+<template>
+  <UButton
+    size="sm"
+    variant="ghost"
+    color="neutral"
+    class="-me-1.5"
+    square
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="size-5"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <motion.line
+        x1="4"
+        y1="6"
+        x2="20"
+        y2="6"
+        :variants="variants"
+        :animate="state"
+        :custom="1"
+        class="outline-none"
+      />
+      <motion.line
+        x1="4"
+        y1="12"
+        x2="20"
+        y2="12"
+        :variants="variants"
+        :animate="state"
+        :custom="2"
+        class="outline-none"
+      />
+      <motion.line
+        x1="4"
+        y1="18"
+        x2="20"
+        y2="18"
+        :variants="variants"
+        :animate="state"
+        :custom="3"
+        class="outline-none"
+      />
+    </svg>
+  </UButton>
+</template>

package/app/components/LanguageSelect.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+const { locale, locales } = useI18n()
+const route = useRoute()
+const { localizePath } = useContentLocale()
+
+const languageToCountry: Record<string, string> = {
+  ar: 'sa', bn: 'bd', ca: 'es', ckb: 'iq', cs: 'cz', da: 'dk',
+  el: 'gr', en: 'gb', et: 'ee', he: 'il', hi: 'in', hy: 'am',
+  ja: 'jp', kk: 'kz', km: 'kh', ko: 'kr', ky: 'kg', lb: 'lu',
+  ms: 'my', nb: 'no', sl: 'si', sv: 'se', uk: 'ua', ur: 'pk', vi: 'vn',
+}
+
+function getEmojiFlag(loc: string): string {
+  const baseLanguage = loc.split('-')[0]?.toLowerCase() || loc
+  const countryCode = languageToCountry[baseLanguage] || loc.replace(/^.*-/, '').slice(0, 2)
+
+  return countryCode.toUpperCase()
+    .split('')
+    .map(char => String.fromCodePoint(0x1F1A5 + char.charCodeAt(0)))
+    .join('')
+}
+
+const items = computed<DropdownMenuItem[]>(() =>
+  (locales.value || []).map(l => ({
+    label: l.name,
+    onClick: () => {
+      return navigateTo(localizePath(route.path, l.code))
+    },
+    active: l.code === locale.value,
+    // stash the code so the trailing slot can look up the flag
+    value: l.code,
+  })),
+)
+
+const currentLabel = computed(() =>
+  (locales.value || []).find(l => l.code === locale.value)?.name ?? locale.value,
+)
+</script>
+
+<template>
+  <UDropdownMenu
+    :items="items"
+    :content="{ align: 'end' }"
+    :ui="{ content: 'w-44' }"
+  >
+    <UButton
+      color="neutral"
+      variant="ghost"
+      class="size-8"
+      :aria-label="`Change language, current: ${currentLabel}`"
+    >
+      <template #trailing>
+        <span class="text-lg">{{ getEmojiFlag(locale) }}</span>
+      </template>
+    </UButton>
+
+    <template #item-trailing="{ item }">
+      <span class="size-5 text-center text-base">
+        {{ getEmojiFlag((item as any).value) }}
+      </span>
+    </template>
+  </UDropdownMenu>
+</template>