@uxfront/layer-docs 0.1.0 → 0.1.1

package/README.md

@@ -42,6 +42,24 @@ export default defineAppConfig({
 });
 ```
 
+### Brand attribution
+
+`header.attribution` renders an optional credit beside the wordmark, where only
+the `label` is a link:
+
+```ts
+export default defineAppConfig({
+  header: {
+    title: "uxd",
+    attribution: { prefix: "by", label: "UXFront", to: "https://uxfront.com" },
+  },
+});
+```
+
+That renders `uxd by UXFront` — the wordmark still links home, `by` is plain
+text, and `UXFront` links out. Omit `attribution` (or leave `label` empty) to
+render the wordmark alone.
+
 ## Compatibility
 
 Pinned to the Nuxt 4 documentation stack (Nuxt 4.4, Nuxt UI 4.8, Content 3.14,

package/app/app.config.ts

@@ -13,6 +13,20 @@ export default defineAppConfig({
     title: "On this page",
   },
 
+  header: {
+    /**
+     * Optional brand attribution rendered beside the header wordmark.
+     * `title: "uxd"` plus `{ prefix: "by", label: "UXFront", to: "https://uxfront.com" }`
+     * renders "uxd by UXFront" with only "UXFront" linked. An empty `label`
+     * renders nothing, which is the neutral default.
+     */
+    attribution: {
+      prefix: "",
+      label: "",
+      to: "",
+    },
+  },
+
   /**
    * Opt-out flags for the layer's client plugins. Defaults keep them on so an
    * existing consumer is unchanged; a consumer opts out by setting `false`.

package/app/components/IconMenuToggle.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import { motion } from "motion-v";
 import type { VariantType } from "motion-v";
+import { useLocale } from "@nuxt/ui/composables/useLocale";
 
 const props = defineProps<{
   open: boolean;
 }>();
 
+// Same strings Nuxt UI's default `UHeader` toggle uses, so the accessible name
+// stays in sync with the app's locale instead of being hardcoded here.
+const { t } = useLocale();
+
 const variants: {
   [k: string]: VariantType | ((custom: unknown) => VariantType);
 } = {
@@ -33,7 +38,14 @@ const state = computed(() => (props.open ? "close" : "normal"));
 </script>
 
 <template>
-  <UButton size="sm" variant="ghost" color="neutral" class="-me-1.5" square>
+  <UButton
+    size="sm"
+    variant="ghost"
+    color="neutral"
+    class="-me-1.5"
+    square
+    :aria-label="open ? t('header.close') : t('header.open')"
+  >
     <svg
       xmlns="http://www.w3.org/2000/svg"
       class="size-5"
@@ -43,6 +55,7 @@ const state = computed(() => (props.open ? "close" : "normal"));
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
+      aria-hidden="true"
     >
       <motion.line
         x1="4"

package/app/components/app/AppHeader.vue

@@ -52,8 +52,26 @@ const links = computed(() =>
   >
     <AppHeaderCenter />
 
-    <template #title>
-      <AppHeaderLogo class="h-6 w-auto shrink-0" />
+    <!--
+      `#left` rather than `#title`: UHeader wraps the `#title` slot in its own
+      `<ULink :to>` home link, so an attribution link rendered there would be an
+      anchor nested in an anchor — invalid HTML that browsers unnest at parse
+      time. Owning `#left` lets the wordmark and the attribution sit as
+      siblings. The link classes restate UHeader's `title` slot theme, which the
+      slot itself does not expose.
+    -->
+    <template #left>
+      <div class="flex shrink-0 items-baseline gap-1.5">
+        <ULink
+          :to="localePath('/')"
+          :aria-label="appConfig.header?.title || site.name"
+          class="flex shrink-0 items-end gap-1.5 rounded-xs text-xl font-bold text-highlighted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+        >
+          <AppHeaderLogo class="h-6 w-auto shrink-0" />
+        </ULink>
+
+        <AppHeaderAttribution />
+      </div>
     </template>
 
     <template #right>

package/app/components/app/AppHeaderAttribution.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * Optional brand attribution rendered next to the header wordmark, e.g.
+ * "uxd by UXFront" where only "UXFront" is a link.
+ *
+ * Declared by the consuming app as:
+ *
+ * ```ts
+ * header: {
+ *   title: "uxd",
+ *   attribution: { prefix: "by", label: "UXFront", to: "https://uxfront.com" },
+ * }
+ * ```
+ *
+ * `prefix` stays plain text so the link's accessible name is exactly the brand
+ * it points at — "by UXFront" would read as the link text otherwise.
+ */
+const appConfig = useAppConfig();
+
+const attribution = computed(() => appConfig.header?.attribution);
+</script>
+
+<template>
+  <p v-if="attribution?.label" class="shrink-0 text-sm text-muted">
+    <!-- Non-breaking space: Vue's `condense` whitespace handling drops a plain
+         trailing space before a newline, and the credit should not wrap. -->
+    <template v-if="attribution.prefix">{{ attribution.prefix }}&nbsp;</template>
+    <ULink
+      v-if="attribution.to"
+      :to="attribution.to"
+      class="rounded-xs font-medium text-toned underline underline-offset-2 hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+      >{{ attribution.label }}</ULink
+    >
+    <template v-else>{{ attribution.label }}</template>
+  </p>
+</template>

package/app/components/app/AppSubHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from "@nuxt/ui";
 
-const { sections } = useDocsSections();
+const { sections, hasSectionSwitcher } = useDocsSections();
 
 const items = computed<NavigationMenuItem[]>(() =>
   sections.value.map((section) => ({
@@ -13,7 +13,7 @@ const items = computed<NavigationMenuItem[]>(() =>
 </script>
 
 <template>
-  <div class="border-t border-default max-lg:hidden">
+  <div v-if="hasSectionSwitcher" class="border-t border-default max-lg:hidden">
     <UContainer class="py-1">
       <UNavigationMenu :items="items" :ui="{ root: 'overflow-x-auto no-scrollbar' }" />
     </UContainer>

package/app/components/docs/DocsPageHeaderLinks.vue

@@ -68,6 +68,7 @@ async function copyPage() {
         color="neutral"
         variant="soft"
         class="border-l border-muted"
+        :aria-label="t('docs.copy.options')"
       />
     </UDropdownMenu>
   </UFieldGroup>

package/app/composables/useDocsSections.ts

@@ -46,5 +46,12 @@ export function useDocsSections() {
 
   const activeSection = computed(() => sections.value.find((section) => section.active));
 
-  return { sections, activeSection };
+  /**
+   * Whether the section switcher is worth rendering. A single section (or none)
+   * gives the reader nothing to switch between, so the sub-header is suppressed
+   * entirely rather than rendering an empty bar.
+   */
+  const hasSectionSwitcher = computed(() => sections.value.length > 1);
+
+  return { sections, activeSection, hasSectionSwitcher };
 }

package/app/pages/[[lang]]/docs/[section]/[...slug].vue

@@ -128,7 +128,10 @@ const editLink = computed(() => {
     <UPageBody>
       <ContentRenderer v-if="page" :value="page" />
 
-      <USeparator>
+      <!-- `decorative` drops the `separator` role: the rule is decoration around
+           the edit/report actions, and a separator with focusable descendants is
+           a `nested-interactive` violation. -->
+      <USeparator decorative>
         <div v-if="github" class="flex items-center gap-2 text-sm text-muted">
           <UButton
             variant="link"

package/app/plugins/posthog.client.ts

@@ -14,6 +14,12 @@ export default defineNuxtPlugin(() => {
 
   const runtimeConfig = useRuntimeConfig();
 
+  // No key provisioned (`NUXT_PUBLIC_POSTHOG_KEY` unset) — no-op instead of
+  // initialising a client that would fire requests at nothing.
+  if (!runtimeConfig.public.posthog.key) {
+    return;
+  }
+
   const posthogClient = posthog.init(runtimeConfig.public.posthog.key, {
     api_host: runtimeConfig.public.posthog.host,
     defaults: runtimeConfig.public.posthog.defaults as ConfigDefaults,

package/i18n/locales/en.json

@@ -9,6 +9,7 @@
   "docs": {
     "copy": {
       "page": "Copy page",
+      "options": "More copy options",
       "link": "Copy Markdown page",
       "view": "View as Markdown",
       "gpt": "Open in ChatGPT",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxfront/layer-docs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Neutral, brandable Nuxt-layer documentation theme. Consumers extend it and supply their own branding, content and section topology.",
   "keywords": [
     "docs",