@frigear-nu/base 0.0.0-stage → 0.0.2

package/app/components/content/ContactForm.vue

@@ -0,0 +1,161 @@
+<script lang="ts" setup>
+import type { FormSubmitEvent } from '@nuxt/ui'
+import {
+  contactFormSchema, contactFormSubjectOptions,
+  contactFormSubjectSelectItems,
+  type ContactSchema,
+} from '../../../shared/schema/forms'
+
+const DEFAULT_STATE: Partial<ContactSchema> = {
+  name: undefined,
+  email: undefined,
+  phone: undefined,
+  subject: undefined,
+  subjectOther: undefined,
+  message: undefined,
+}
+
+const form = useTemplateRef('form')
+const isSubmitting = ref(false)
+const state = reactive({ ...DEFAULT_STATE })
+
+const toast = useToast()
+
+async function onSubmit(event: FormSubmitEvent<ContactSchema>) {
+  isSubmitting.value = true
+  try {
+    await $fetch(['', 'api', '_submit'].join('/'), {
+      method: 'POST',
+      body: event.data,
+    })
+
+    toast.add({
+      icon: 'lucide-check-circle',
+      title: 'Beskjed sendt!',
+      description: 'Vi tar kontak med deg så snart som mulig.',
+      color: 'success',
+    })
+
+    Object.assign(state, DEFAULT_STATE)
+  } catch (err: unknown) {
+    toast.add({
+      icon: 'lucide-alert-circle',
+      title: 'Noe gikk galt',
+      description: (err as Error)?.message || 'Ukjent feil.',
+      color: 'error',
+    })
+
+    // Since we might encounter unknown things we want to know about...
+    throw err
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// we want to pre-fill the form for the subject if it matches an available one
+const route = useRoute()
+const router = useRouter()
+if (import.meta.client) {
+  watch(() => route.query, (nextParams) => {
+    if (!nextParams || !nextParams.subject) return
+    if (!contactFormSubjectOptions[nextParams.subject as keyof typeof contactFormSubjectOptions]) return
+
+    nextTick(() => {
+      state.subject = nextParams.subject as keyof typeof contactFormSubjectOptions
+      router.replace({ query: {} })
+    })
+  }, { immediate: true })
+}
+</script>
+
+<template>
+  <div class="flex flex-row mt-8 items-center justify-center">
+    <UPageCard
+      title="Send oss en beskjed"
+      class="space-y-4 min-w-sm"
+    >
+      <UForm
+        ref="form"
+        :schema="contactFormSchema"
+        :state="state"
+        class="space-y-4 min-w-fit"
+        :loading-auto="true"
+        @submit="onSubmit"
+      >
+        <UFormField
+          label="Navn"
+          name="name"
+          required
+        >
+          <UInput
+            v-model="state.name"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField
+          label="E-post"
+          name="email"
+          required
+        >
+          <UInput
+            v-model="state.email"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField
+          label="Telefon"
+          name="phone"
+        >
+          <UInput
+            v-model="state.phone"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField
+          label="Tjeneste/Emne"
+          name="subject"
+          required
+        >
+          <USelect
+            v-model="state.subject"
+            placeholder="Velg tjeneste/emne"
+            class="w-full"
+            :items="contactFormSubjectSelectItems"
+          />
+        </UFormField>
+
+        <UFormField
+          v-if="state.subject === 'other'"
+          label="Annet"
+          name="subjectOther"
+        >
+          <UInput
+            v-model="state.subjectOther"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField
+          label="Beskjed"
+          name="message"
+          required
+        >
+          <UTextarea
+            v-model="state.message"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UButton
+          type="submit"
+          loading-auto
+        >
+          Send beskjed
+        </UButton>
+      </UForm>
+    </UPageCard>
+  </div>
+</template>

package/app/components/content/HeroBackground.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+const { isLoading } = useLoadingIndicator()
+
+// Animation phases:
+// 1. Mount -> wait a tick -> fade in (slow, 1s)
+// 2. Once fully appeared -> switch to fast transitions (400ms) for loading pulses
+const hasAppeared = ref(false)
+const isSettled = ref(false)
+
+const SETTLE_DELAY = 1000
+
+let settleTimeout: ReturnType<typeof setTimeout> | undefined
+
+onMounted(async () => {
+  await nextTick()
+  hasAppeared.value = true
+
+  settleTimeout = setTimeout(() => {
+    isSettled.value = true
+  }, SETTLE_DELAY)
+})
+
+onUnmounted(() => {
+  clearTimeout(settleTimeout)
+})
+
+const wrapperClasses = computed(() => [
+  isLoading.value ? 'animate-pulse' : hasAppeared.value ? '' : 'opacity-0',
+  isSettled.value ? 'duration-[400ms]' : 'duration-1000',
+])
+</script>
+
+<template>
+  <ClientOnly>
+    <div
+      class="absolute w-full -top-px transition-all text-primary shrink-0"
+      :class="wrapperClasses"
+    >
+      <svg
+        viewBox="0 0 1440 181"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        class="pointer-events-none"
+      >
+        <mask
+          id="path-1-inside-1_414_5526"
+          fill="white"
+        >
+          <path d="M0 0H1440V181H0V0Z" />
+        </mask>
+        <path
+          d="M0 0H1440V181H0V0Z"
+          fill="url(#paint0_linear_414_5526)"
+          fill-opacity="0.22"
+        />
+        <path
+          d="M0 2H1440V-2H0V2Z"
+          fill="url(#paint1_linear_414_5526)"
+          mask="url(#path-1-inside-1_414_5526)"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_414_5526"
+            x1="720"
+            y1="0"
+            x2="720"
+            y2="181"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="currentColor" />
+            <stop
+              offset="1"
+              stop-color="currentColor"
+              stop-opacity="0"
+            />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_414_5526"
+            x1="0"
+            y1="90.5"
+            x2="1440"
+            y2="90.5"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop
+              stop-color="currentColor"
+              stop-opacity="0"
+            />
+            <stop
+              offset="0.395"
+              stop-color="currentColor"
+            />
+            <stop
+              offset="1"
+              stop-color="currentColor"
+              stop-opacity="0"
+            />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  </ClientOnly>
+</template>

package/app/composables/useConfig.ts

@@ -0,0 +1,12 @@
+export const useConfig = () => {
+  const { locale } = useContentLocale()
+  const collection = computed(() => localizedCollectionName('config', locale.value))
+
+  return useAsyncData(
+    () => `config:${collection.value}`,
+    // Locale-suffixed collections (e.g. `config_no`) share the same schema as
+    // `config`, so the cast keeps the return type stable across locales.
+    () => queryCollection(collection.value as 'config').first(),
+    { watch: [locale] },
+  )
+}

package/app/composables/useContentLocale.ts

@@ -0,0 +1,70 @@
+// `@nuxtjs/i18n` is optional, so we avoid a hard dependency on its types and
+// composables and instead duck-type the `$i18n` plugin it injects when the
+// consuming app installs and configures it.
+type LocaleAwareNuxtApp = ReturnType<typeof useNuxtApp> & {
+  $i18n?: { locale: Ref<string>, defaultLocale: string, localeCodes?: Ref<string[]> | string[] }
+}
+
+export const useContentLocale = () => {
+  const nuxtApp = useNuxtApp() as LocaleAwareNuxtApp
+  const defaultLocale = computed(() => nuxtApp.$i18n?.defaultLocale)
+
+  // `@nuxtjs/i18n` is installed unconditionally by the base layer, but apps
+  // that don't configure any `locales` (see `content.config.ts` /
+  // `modules/routing.ts`) still get a resolved `$i18n.locale` (e.g. from the
+  // `Accept-Language` header or the system locale) even though no such
+  // locale was ever configured. Treating that value as significant would
+  // point content queries at a locale-suffixed collection (e.g. `pages_en_US`)
+  // that doesn't exist, breaking `useCurrentPage`/`useConfig` entirely.
+  // Only trust the detected locale when it's one of the app's configured
+  // locale codes.
+  const availableLocaleCodes = computed(() => {
+    const codes = nuxtApp.$i18n?.localeCodes
+    return unref(codes) ?? []
+  })
+  const locale = computed(() => {
+    const code = nuxtApp.$i18n?.locale.value
+    return code && availableLocaleCodes.value.includes(code) ? code : undefined
+  })
+
+  // `@nuxtjs/i18n` prefixes routes with the active locale (e.g. `/en/services`)
+  // depending on the configured strategy, but localized content collections
+  // are keyed per locale (`pages` -> `content/**`, `pages_no` -> `content/no/**`),
+  // and paths within each collection are unprefixed (`/services`). Strip the
+  // route's locale prefix so path-based content queries keep matching
+  // regardless of the routing strategy (`prefix`, `prefix_except_default`, ...).
+  const stripLocalePrefix = (path: string) => {
+    const code = locale.value
+    if (!code) {
+      return path
+    }
+    const prefix = `/${code}`
+    if (path === prefix) {
+      return '/'
+    }
+    if (path.startsWith(`${prefix}/`)) {
+      return path.slice(prefix.length)
+    }
+    return path
+  }
+
+  // The landing and catch-all pages opt out of `@nuxtjs/i18n`'s automatic
+  // route localization (see `modules/routing.ts`) to avoid conflicting,
+  // duplicate routes per locale. That means `@nuxtjs/i18n` composables like
+  // `switchLocalePath` can't resolve them either, so build the localized
+  // path for an arbitrary route ourselves instead.
+  const localizePath = (path: string, targetLocale: string) => {
+    const unprefixed = stripLocalePrefix(path)
+    if (targetLocale === defaultLocale.value) {
+      return unprefixed
+    }
+    return unprefixed === '/' ? `/${targetLocale}` : `/${targetLocale}${unprefixed}`
+  }
+
+  return {
+    locale,
+    defaultLocale,
+    stripLocalePrefix,
+    localizePath,
+  }
+}

package/app/composables/useCurrentPage.ts

@@ -0,0 +1,17 @@
+export const useCurrentPage = () => {
+  const route = useRoute()
+  const { locale, stripLocalePrefix } = useContentLocale()
+  const collection = computed(() => localizedCollectionName('pages', locale.value))
+  const path = computed(() => stripLocalePrefix(route.path))
+
+  return useAsyncData(
+    () => `current-page:${collection.value}:${path.value}`,
+    // Locale-suffixed collections (e.g. `pages_no`) share the same schema as
+    // `pages`, so the cast keeps the return type stable across locales.
+    () => queryCollection(collection.value as 'pages').path(path.value).first(),
+    {
+      watch: [path, locale, collection],
+      dedupe: 'cancel',
+    },
+  )
+}

package/app/composables/useNavigation.ts

@@ -0,0 +1,13 @@
+export const useNavigation = (tags?: string[]) => {
+  return useAsyncData(
+    () => `navigation:${tags?.join(',') || 'all'}`,
+    async () => {
+      const { data: config } = await useConfig() // or however you access the pending promise
+      if (!tags) {
+        return config.value?.navigation || []
+      }
+      return (config.value?.navigation || [])
+        .filter(item => !tags || tags.some(tag => item?.tags?.includes(tag)))
+    },
+  )
+}

package/app/composables/usePageSeo.ts

@@ -0,0 +1,52 @@
+import type { z } from 'zod/v4'
+import type { WebsiteConfigSchema } from '../../shared/schema/config'
+import type { WebsitePageSchema } from '../../shared/schema/page'
+
+/**
+ * Applies title, description and social meta for the current content page.
+ *
+ * Precedence: page `seo.*` > page `title`/`description` > `config.yaml` `seo.*`
+ * > site config. The layer hardcodes no values: with nothing configured the
+ * title is the page's own title, without any suffix.
+ */
+export const usePageSeo = () => {
+  // Locale-suffixed collections share these schemas, but their generated item
+  // types form a union, so narrow to the schema types here.
+  const config = useConfig().data as Ref<z.infer<typeof WebsiteConfigSchema> | null | undefined>
+  const page = useCurrentPage().data as Ref<z.infer<typeof WebsitePageSchema> | null | undefined>
+  const site = useSiteConfig()
+
+  const title = computed(() =>
+    page.value?.seo?.title
+    || page.value?.title
+    || stringOrPropValue(config.value?.name, 'long')
+    || stringOrPropValue(config.value?.name, 'short'),
+  )
+  const description = computed(() =>
+    page.value?.seo?.description || page.value?.description || config.value?.seo?.description,
+  )
+  const image = computed(() => page.value?.seo?.image || config.value?.seo?.image)
+
+  const template = computed(() => config.value?.seo?.titleTemplate)
+
+  useHead({
+    titleTemplate: (value) => {
+      if (!value) return site.name || null
+      if (!template.value || !site.name || value === site.name) return value
+      return template.value
+        .replace('%s', value)
+        .replace('%siteName', site.name)
+    },
+  })
+
+  useSeoMeta({
+    title,
+    description,
+    ogTitle: title,
+    ogDescription: description,
+    ogImage: image,
+    twitterImage: image,
+    twitterCard: computed(() => (image.value ? 'summary_large_image' : undefined)),
+    robots: computed(() => (page.value?.seo?.noindex ? 'noindex, nofollow' : undefined)),
+  })
+}

package/app/layouts/default.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    <AppHeader v-if="$route.meta.header !== false" />
+    <UMain>
+      <slot />
+    </UMain>
+    <AppFooter v-if="$route.meta.footer !== false" />
+  </div>
+</template>

package/app/layouts/page.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    <AppHeader v-if="$route.meta.header !== false" />
+    <UMain>
+      <UContainer>
+        <slot />
+      </UContainer>
+    </UMain>
+    <AppFooter v-if="$route.meta.footer !== false" />
+  </div>
+</template>

package/app/pages/[[lang]]/[...path].vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { UContainer } from '#components'
+
+const { data } = await useCurrentPage()
+
+if (!data.value) {
+  throw createError({ status: 404, message: 'Page not found' })
+}
+</script>
+
+<template>
+  <UPage>
+    <UContainer v-if="data && data.pageHeader">
+      <LazyUPageHeader
+        v-bind="data.pageHeader"
+        :ui="{ root: 'text-center', wrapper: 'lg:flex-col lg:items-center lg:justify-center' }"
+      />
+    </UContainer>
+    <LazyUPageBody>
+      <component
+        :is="data?.container ? UContainer : 'div'"
+        v-if="data"
+      >
+        <LazyContentRenderer :value="data" />
+      </component>
+    </LazyUPageBody>
+  </UPage>
+</template>

package/app/templates/LandingPage.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { data } = await useCurrentPage()
+if (!data.value) {
+  throw createError({ status: 404, message: 'Page not found' })
+}
+</script>
+
+<template>
+  <LazyContentRenderer
+    v-if="data"
+    :value="data"
+  />
+</template>

package/app/utils.ts

@@ -0,0 +1 @@
+export * from '../shared/utils/content.ts'

package/content.config.ts

@@ -0,0 +1,58 @@
+import type {
+  DefinedCollection } from '@nuxt/content'
+import {
+  defineCollection,
+  defineContentConfig,
+} from '@nuxt/content'
+import { useNuxt } from '@nuxt/kit'
+import { joinURL } from 'ufo'
+import { WebsiteConfigSchema } from './shared/schema/config'
+import { WebsitePageSchema } from './shared/schema/page'
+
+const { options } = useNuxt()
+const cwd = joinURL(options.rootDir, 'content')
+
+// `@nuxtjs/i18n` is an optional dependency of the consuming app. When it is
+// installed and configured with locales, content can be localized by nesting
+// it under `content/<locale>/**`. Apps that don't opt into i18n keep using
+// the flat `content/**` structure, so this stays fully opt-in.
+const i18nOptions = (options as { i18n?: { locales?: (string | { code: string })[], defaultLocale?: string } }).i18n
+const localeCodes = (i18nOptions?.locales || [])
+  .map(locale => (typeof locale === 'string' ? locale : locale.code))
+
+const collections: Record<string, DefinedCollection> = {}
+
+const defineLocalizedCollections = (locale?: string) => {
+  const suffix = locale ? `_${locale.replace(/-/g, '_')}` : ''
+  const prefix = locale ? `${locale}/` : ''
+
+  collections[`config${suffix}`] = defineCollection({
+    type: 'data',
+    source: {
+      cwd,
+      include: `${prefix}config.yaml`,
+      prefix: '/',
+    },
+    schema: WebsiteConfigSchema,
+  })
+
+  collections[`pages${suffix}`] = defineCollection({
+    type: 'page',
+    source: {
+      cwd,
+      include: `${prefix}pages/**/**.md`,
+      prefix: '/',
+    },
+    schema: WebsitePageSchema,
+  })
+}
+
+if (localeCodes.length > 0) {
+  localeCodes.forEach(defineLocalizedCollections)
+} else {
+  defineLocalizedCollections()
+}
+
+export default defineContentConfig({
+  collections,
+})

package/modules/config.ts

@@ -0,0 +1,10 @@
+import {
+  defineNuxtModule,
+} from '@nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'config',
+  },
+  setup() {},
+})