@uxfront/layer-docs 0.4.1 → 0.6.0

package/app/app.vue

@@ -1,138 +0,0 @@
-<script setup lang="ts">
-import type { ContentNavigationItem, PageCollections } from "@nuxt/content";
-import * as nuxtUiLocales from "@nuxt/ui/locale";
-
-const appConfig = useAppConfig();
-const { seo } = appConfig;
-const site = useSiteConfig();
-const { locale, locales, isEnabled, switchLocalePath } = useDocusI18n();
-
-const lang = computed(
-  () => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.code || "en",
-);
-const dir = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.dir || "ltr");
-
-const getCollectionName = (key: string) =>
-  (isEnabled.value ? `docs_${key}_${locale.value}` : `docs_${key}`) as keyof PageCollections;
-
-useHead({
-  meta: [{ name: "viewport", content: "width=device-width, initial-scale=1" }],
-  link: [{ rel: "icon", href: "/favicon.ico" }],
-  htmlAttrs: {
-    lang,
-    dir,
-  },
-});
-
-useSeoMeta({
-  titleTemplate: seo?.titleTemplate,
-  title: seo?.title,
-  description: seo?.description,
-  ogSiteName: site.name,
-  twitterCard: "summary_large_image",
-});
-
-if (isEnabled.value) {
-  const route = useRoute();
-  const defaultLocale = (useRuntimeConfig().public.i18n as { defaultLocale: string }).defaultLocale;
-  onMounted(() => {
-    const currentLocale = route.path.split("/")[1];
-    if (!locales.some((locale) => locale.code === currentLocale)) {
-      return navigateTo(switchLocalePath(defaultLocale) as string);
-    }
-  });
-}
-
-const { data: navigation } = await useAsyncData(
-  () => `navigation_${locale.value}`,
-  async () => {
-    const results = await Promise.all(
-      DOCS_SECTIONS.map(async (section) => {
-        const collectionName = getCollectionName(section.key);
-        const data = await queryCollectionNavigation(collectionName);
-        const rootResult =
-          data.find((item) => item.path === `/docs/${section.slug}`)?.children ||
-          data.find((item) => item.path === "/docs")?.children ||
-          data ||
-          [];
-        const localeResult =
-          rootResult.find((item) => item.path === `/${locale.value}`)?.children || rootResult;
-        const sectionPath = `/docs/${section.slug}`;
-        let result: ContentNavigationItem[];
-        if (Array.isArray(section.folder)) {
-          const rootIdx = "rootFolder" in section ? (section.rootFolder as number) : -1;
-          const rootWrapper =
-            localeResult.length === 1 && localeResult[0]?.path === sectionPath
-              ? localeResult[0]
-              : null;
-          const allItems = rootWrapper ? (rootWrapper.children ?? []) : localeResult;
-
-          if (rootIdx >= 0) {
-            const nonRootPaths = new Set(
-              section.folder
-                .filter((_: string, i: number) => i !== rootIdx)
-                .map((f: string) => `${sectionPath}/${f.replace(/^\d+\./, "")}`),
-            );
-            const items: ContentNavigationItem[] = [];
-            for (let i = 0; i < section.folder.length; i++) {
-              if (i === rootIdx) {
-                items.push({
-                  ...rootWrapper,
-                  title: rootWrapper?.title ?? section.label,
-                  path: sectionPath,
-                  children: allItems.filter((item) => !nonRootPaths.has(item.path)),
-                } as ContentNavigationItem);
-              } else {
-                const found = allItems.find(
-                  (item) =>
-                    item.path === `${sectionPath}/${section.folder[i]?.replace(/^\d+\./, "")}`,
-                );
-                if (found) items.push(found);
-              }
-            }
-            result = items;
-          } else {
-            result = section.folder
-              .map((folder: string) =>
-                allItems.find(
-                  (item) => item.path === `${sectionPath}/${folder.replace(/^\d+\./, "")}`,
-                ),
-              )
-              .filter((item): item is ContentNavigationItem => item !== undefined);
-          }
-        } else {
-          result = localeResult;
-        }
-        return [
-          section.key,
-          foldNonRouteCategories(flattenNavigation(result), appConfig.nonRouteCategories ?? {}),
-        ] as const;
-      }),
-    );
-    return Object.fromEntries(results) as Record<string, ContentNavigationItem[]>;
-  },
-  {
-    watch: [locale],
-  },
-);
-
-const flatNavigation = computed(() =>
-  navigation.value ? Object.values(navigation.value).flat() : [],
-);
-
-provide("navigation", navigation);
-</script>
-
-<template>
-  <UApp :locale="nuxtUiLocales[locale as keyof typeof nuxtUiLocales]">
-    <NuxtLoadingIndicator color="var(--ui-primary)" />
-
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-
-    <ClientOnly>
-      <AppSearch :navigation="flatNavigation" />
-    </ClientOnly>
-  </UApp>
-</template>

package/app/assets/css/main.css

@@ -1,15 +0,0 @@
-@import "tailwindcss";
-@import "@nuxt/ui";
-
-@source "../../../content/**/*";
-@source "../../../layers/**/*";
-@source "../../app.config.ts";
-
-/*
- * Neutral shell styling only. The brand palette (the `--color-*` scale and the
- * `--ui-primary` mapping) is consumer-supplied — each consuming app defines its
- * own `@theme` in its CSS entrypoint, layered over this neutral base.
- */
-.prose-container {
-  --ui-container: 760px;
-}

package/app/components/IconMenuToggle.vue

@@ -1,92 +0,0 @@
-<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);
-} = {
-  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
-    :aria-label="open ? t('header.close') : t('header.open')"
-  >
-    <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"
-      aria-hidden="true"
-    >
-      <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

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-const { locale, locales, switchLocalePath } = useDocusI18n();
-
-function getEmojiFlag(locale: string): string {
-  const languageToCountry: Record<string, string> = {
-    ar: "sa", // Arabic -> Saudi Arabia
-    bn: "bd", // Bengali -> Bangladesh
-    ca: "es", // Catalan -> Spain
-    ckb: "iq", // Central Kurdish -> Iraq
-    cs: "cz", // Czech -> Czech Republic (note: modern country code is actually 'cz')
-    da: "dk", // Danish -> Denmark
-    el: "gr", // Greek -> Greece
-    en: "gb", // English -> Great Britain
-    et: "ee", // Estonian -> Estonia
-    he: "il", // Hebrew -> Israel
-    hi: "in", // Hindi -> India
-    hy: "am", // Armenian -> Armenia
-    ja: "jp", // Japanese -> Japan
-    kk: "kz", // Kazakh -> Kazakhstan
-    km: "kh", // Khmer -> Cambodia
-    ko: "kr", // Korean -> South Korea
-    ky: "kg", // Kyrgyz -> Kyrgyzstan
-    lb: "lu", // Luxembourgish -> Luxembourg
-    ms: "my", // Malay -> Malaysia
-    nb: "no", // Norwegian Bokmål -> Norway
-    sl: "si", // Slovenian -> Slovenia
-    sv: "se", // Swedish -> Sweden
-    uk: "ua", // Ukrainian -> Ukraine
-    ur: "pk", // Urdu -> Pakistan
-    vi: "vn", // Vietnamese -> Vietnam
-  };
-
-  const baseLanguage = locale.split("-")[0]?.toLowerCase() || locale;
-  const countryCode = languageToCountry[baseLanguage] || locale.replace(/^.*-/, "").slice(0, 2);
-
-  return countryCode
-    .toUpperCase()
-    .split("")
-    .map((char) => String.fromCodePoint(0x1f1a5 + char.charCodeAt(0)))
-    .join("");
-}
-</script>
-
-<template>
-  <UPopover mode="hover" :content="{ align: 'end' }">
-    <UButton color="neutral" variant="ghost" class="size-8">
-      <template #trailing>
-        <span class="text-lg">
-          {{ getEmojiFlag(locale) }}
-        </span>
-      </template>
-    </UButton>
-
-    <template #content>
-      <ul class="flex flex-col">
-        <li v-for="localeItem in locales" :key="localeItem.code">
-          <NuxtLink
-            class="flex justify-between py-1.5 px-2 gap-1 hover:bg-muted"
-            :to="switchLocalePath(localeItem.code) as string"
-            :aria-label="localeItem.name"
-          >
-            <span class="text-sm">
-              {{ localeItem.name }}
-            </span>
-            <span class="size-5 text-center">
-              {{ getEmojiFlag(localeItem.code) }}
-            </span>
-          </NuxtLink>
-        </li>
-      </ul>
-    </template>
-  </UPopover>
-</template>

package/app/components/MorphingGradientBackground.vue

@@ -1,261 +0,0 @@
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from "vue";
-
-const currentX = ref(0);
-const currentY = ref(0);
-const mouseX = ref(0);
-const mouseY = ref(0);
-
-let animationId: number | null = null;
-
-const interactiveBubbleStyle = computed(() => {
-  return {
-    transform: `translate(${Math.round(currentX.value)}px, ${Math.round(currentY.value)}px)`,
-  };
-});
-
-function move() {
-  currentX.value += (mouseX.value - currentX.value) / 20;
-  currentY.value += (mouseY.value - currentY.value) / 20;
-  animationId = requestAnimationFrame(move);
-}
-
-function handleMouseMove(event: MouseEvent) {
-  mouseX.value = event.clientX;
-  mouseY.value = event.clientY;
-}
-
-onMounted(() => {
-  move();
-});
-
-onBeforeUnmount(() => {
-  if (animationId) {
-    cancelAnimationFrame(animationId);
-  }
-});
-</script>
-
-<template>
-  <div class="morphing-gradient-background">
-    <svg xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <filter id="goo">
-          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
-          <feBlend in="SourceGraphic" in2="goo" />
-        </filter>
-      </defs>
-    </svg>
-    <div class="gradients-container">
-      <div class="g1"></div>
-      <div class="g2"></div>
-      <div class="g3"></div>
-      <div class="g4"></div>
-      <div class="g5"></div>
-      <div class="interactive" :style="interactiveBubbleStyle"></div>
-    </div>
-    <slot :onMousemove="handleMouseMove" />
-  </div>
-</template>
-
-<style scoped>
-@keyframes moveInCircle {
-  0% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes moveVertical {
-  0% {
-    transform: translateY(-50%);
-  }
-  50% {
-    transform: translateY(50%);
-  }
-  100% {
-    transform: translateY(-50%);
-  }
-}
-
-@keyframes moveHorizontal {
-  0% {
-    transform: translateX(-50%) translateY(-10%);
-  }
-  50% {
-    transform: translateX(50%) translateY(10%);
-  }
-  100% {
-    transform: translateX(-50%) translateY(-10%);
-  }
-}
-
-.morphing-gradient-background {
-  --color-bg1: var(--ui-bg);
-  --color-bg2: var(--ui-bg);
-  --color1: 18, 113, 255;
-  --color2: 221, 74, 255;
-  --color3: 100, 220, 255;
-  --color4: 200, 50, 50;
-  --color5: 180, 180, 50;
-  --color-interactive: 140, 100, 255;
-  --circle-size: 80%;
-  --blending: hard-light;
-  --intensity: 0.2;
-
-  position: relative;
-  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
-  overflow: hidden;
-  min-height: 100%;
-  width: 100%;
-
-  .gradients-container {
-    filter: url(#goo) blur(40px);
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  svg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .g1 {
-    position: absolute;
-    background: radial-gradient(
-        circle at center,
-        rgba(var(--color1), var(--intensity)) 0,
-        rgba(var(--color1), 0) 50%
-      )
-      no-repeat;
-    mix-blend-mode: var(--blending);
-
-    width: var(--circle-size);
-    height: var(--circle-size);
-    top: calc(50% - var(--circle-size) / 2);
-    left: calc(50% - var(--circle-size) / 2);
-
-    transform-origin: center center;
-    animation: moveVertical 30s ease infinite;
-
-    opacity: 1;
-  }
-
-  .g2 {
-    position: absolute;
-    background: radial-gradient(
-        circle at center,
-        rgba(var(--color2), var(--intensity)) 0,
-        rgba(var(--color2), 0) 50%
-      )
-      no-repeat;
-    mix-blend-mode: var(--blending);
-
-    width: var(--circle-size);
-    height: var(--circle-size);
-    top: calc(50% - var(--circle-size) / 2);
-    left: calc(50% - var(--circle-size) / 2);
-
-    transform-origin: calc(50% - 400px);
-    animation: moveInCircle 20s reverse infinite;
-
-    opacity: 1;
-  }
-
-  .g3 {
-    position: absolute;
-    background: radial-gradient(
-        circle at center,
-        rgba(var(--color3), var(--intensity)) 0,
-        rgba(var(--color3), 0) 50%
-      )
-      no-repeat;
-    mix-blend-mode: var(--blending);
-
-    width: var(--circle-size);
-    height: var(--circle-size);
-    top: calc(50% - var(--circle-size) / 2 + 200px);
-    left: calc(50% - var(--circle-size) / 2 - 500px);
-
-    transform-origin: calc(50% + 400px);
-    animation: moveInCircle 40s linear infinite;
-
-    opacity: 1;
-  }
-
-  .g4 {
-    position: absolute;
-    background: radial-gradient(
-        circle at center,
-        rgba(var(--color4), var(--intensity)) 0,
-        rgba(var(--color4), 0) 50%
-      )
-      no-repeat;
-    mix-blend-mode: var(--blending);
-
-    width: var(--circle-size);
-    height: var(--circle-size);
-    top: calc(50% - var(--circle-size) / 2);
-    left: calc(50% - var(--circle-size) / 2);
-
-    transform-origin: calc(50% - 200px);
-    animation: moveHorizontal 40s ease infinite;
-
-    opacity: 0.7;
-  }
-
-  .g5 {
-    position: absolute;
-    background: radial-gradient(
-        circle at center,
-        rgba(var(--color5), var(--intensity)) 0,
-        rgba(var(--color5), 0) 50%
-      )
-      no-repeat;
-    mix-blend-mode: var(--blending);
-
-    width: calc(var(--circle-size) * 2);
-    height: calc(var(--circle-size) * 2);
-    top: calc(50% - var(--circle-size));
-    left: calc(50% - var(--circle-size));
-
-    transform-origin: calc(50% - 800px) calc(50% + 200px);
-    animation: moveInCircle 20s ease infinite;
-
-    opacity: 1;
-  }
-
-  .interactive {
-    position: absolute;
-    background: radial-gradient(
-        circle at center,
-        rgba(var(--color-interactive), var(--intensity)) 0,
-        rgba(var(--color-interactive), 0) 50%
-      )
-      no-repeat;
-    mix-blend-mode: var(--blending);
-
-    width: 100%;
-    height: 100%;
-    top: -50%;
-    left: -50%;
-
-    opacity: 0.7;
-  }
-}
-</style>

package/app/components/OgImage/OgImageDocs.satori.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-/**
- * Default OG card for docs, changelog and landing pages — `defineOgImage("DocsSatori", ...)`.
- *
- * Brandable without touching this package: the accent comes from the consumer's
- * own `--ui-primary` token (resolved in `modules/config.ts`), and both the
- * decoration and the wordmark are components a consumer can shadow. See
- * README § OG images.
- */
-withDefaults(defineProps<{ title?: string; description?: string; headline?: string }>(), {
-  title: "",
-  description: "",
-  headline: "",
-});
-
-const appConfig = useAppConfig();
-const accent = computed(() => appConfig.ogImage?.accent);
-</script>
-
-<template>
-  <div class="w-full h-full flex flex-col justify-center bg-neutral-900">
-    <AppOgDecoration />
-
-    <div class="pl-[100px]">
-      <p
-        v-if="headline"
-        class="uppercase text-[24px] mb-4 font-semibold"
-        :style="{ color: accent }"
-      >
-        {{ headline }}
-      </p>
-      <h1 v-if="title" class="m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
-        <span>{{ title.slice(0, 60) }}</span>
-      </h1>
-      <p v-if="description" class="text-[32px] text-neutral-300 leading-tight w-[700px]">
-        {{ description.slice(0, 200) }}
-      </p>
-    </div>
-  </div>
-</template>

package/app/components/OgImage/OgImageLanding.satori.vue

@@ -1,41 +0,0 @@
-<script lang="ts" setup>
-/**
- * Centred OG card variant for landing pages — `defineOgImage("LandingSatori", ...)`.
- *
- * Same brand contract as {@link OgImageDocs}: accent from the consumer's token,
- * decoration and wordmark as overridable components.
- */
-withDefaults(defineProps<{ title?: string; description?: string; headline?: string }>(), {
-  title: "",
-  description: "",
-  headline: "",
-});
-
-const appConfig = useAppConfig();
-const accent = computed(() => appConfig.ogImage?.accent);
-</script>
-
-<template>
-  <div class="w-full h-full flex items-center justify-center bg-neutral-900">
-    <AppOgDecoration />
-
-    <div class="flex flex-col justify-center p-8">
-      <div class="flex justify-center mb-8">
-        <AppOgLogo />
-      </div>
-      <p
-        v-if="headline"
-        class="flex justify-center uppercase text-[24px] mb-4 font-semibold"
-        :style="{ color: accent }"
-      >
-        {{ headline }}
-      </p>
-      <h1 v-if="title" class="flex justify-center m-0 text-5xl font-semibold mb-4 text-white">
-        <span>{{ title.slice(0, 60) }}</span>
-      </h1>
-      <p v-if="description" class="text-center text-2xl text-neutral-300 leading-tight">
-        {{ description.slice(0, 200) }}
-      </p>
-    </div>
-  </div>
-</template>

package/app/components/app/AppFooter.vue

@@ -1,13 +0,0 @@
-<template>
-  <UFooter>
-    <template #left>
-      <AppFooterLeft />
-    </template>
-
-    <AppFooterCenter />
-
-    <template #right>
-      <AppFooterRight />
-    </template>
-  </UFooter>
-</template>

package/app/components/app/AppFooterCenter.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import type { NavigationMenuItem } from "@nuxt/ui";
-
-/**
- * Footer link row. Brand/legal links (Privacy, Terms, ...) are consumer data,
- * read from `footer.links` in `app.config.ts`. This layer ships none.
- */
-const appConfig = useAppConfig();
-
-const links = computed<NavigationMenuItem[]>(
-  () => (appConfig.footer?.links as NavigationMenuItem[] | undefined) ?? [],
-);
-</script>
-
-<template>
-  <UNavigationMenu v-if="links.length" orientation="horizontal" :items="links" />
-</template>