@uxfront/layer-docs 0.4.0 → 0.5.0

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>

package/app/components/app/AppFooterLeft.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-/**
- * Footer credit line. The consumer supplies the full string via
- * `footer.credits` in `app.config.ts` (rendered verbatim). When absent, a
- * sensible default is built from the header title so a minimally-configured app
- * still shows a credit.
- */
-const appConfig = useAppConfig();
-
-const credit = computed(() => {
-  if (appConfig.footer?.credits) return appConfig.footer.credits;
-  const name = appConfig.header?.title;
-  return name ? `© ${new Date().getFullYear()} ${name}. All rights reserved.` : "";
-});
-</script>
-
-<template>
-  <div v-if="credit" class="text-sm text-muted">
-    {{ credit }}
-  </div>
-</template>

package/app/components/app/AppFooterRight.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-const appConfig = useAppConfig();
-
-const links = computed(() =>
-  [
-    ...Object.entries(appConfig.socials || {}).map(([key, url]) => ({
-      icon: `i-simple-icons-${key}`,
-      to: url,
-      target: "_blank",
-      "aria-label": `${key} social link`,
-    })),
-    appConfig.github &&
-      appConfig.github.url && {
-        icon: "i-simple-icons-github",
-        to: appConfig.github.url,
-        target: "_blank",
-        "aria-label": "GitHub repository",
-      },
-  ].filter(Boolean),
-);
-</script>
-
-<template>
-  <template v-if="links.length">
-    <UButton
-      v-for="(link, index) of links"
-      :key="index"
-      size="sm"
-      v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
-    />
-  </template>
-  <UColorModeButton />
-</template>