@stackonward/cli 1.5.2 → 1.6.0

package/dist/resources/components/nuxt/site-source/app/components/youtube/Embed.vue

@@ -7,83 +7,170 @@ const props = withDefaults(
     privacyEnhanced?: boolean;
     controls?: boolean;
     autoplay?: boolean;
+    mute?: boolean;
+    loop?: boolean;
     start?: number;
     playlist?: string;
+    lazy?: boolean;
+    thumbnailQuality?: string;
+    thumbnailSrc?: string;
+    ccLangPref?: string;
+    language?: string;
+    rel?: boolean;
   }>(),
   {
     title: "Embedded video",
-    aspectRatio: "16 / 9",
+    aspectRatio: "16:9",
     privacyEnhanced: undefined,
     controls: true,
-    autoplay: false,
-    start: undefined,
-    playlist: "",
+    autoplay: true,
+    mute: true,
+    loop: false,
+    start: 0,
+    lazy: true,
+    thumbnailQuality: "hqdefault",
+    thumbnailSrc: "",
+    ccLangPref: "",
+    rel: false,
   },
 );
-
 const config = useRuntimeConfig();
-
+const { locale, locales } = useI18n();
 function extractYoutubeId(source: string): string {
-  if (/^[a-zA-Z0-9_-]{11}$/.test(source)) {
-    return source;
-  }
-
+  if (/^[a-zA-Z0-9_-]{11}$/.test(source)) return source;
   try {
-    const url = new URL(source, "https://www.youtube.com");
-    if (url.hostname === "youtu.be") {
-      return url.pathname.replace("/", "").slice(0, 11);
-    }
-    if (url.pathname.startsWith("/embed/") || url.pathname.startsWith("/shorts/")) {
-      return url.pathname.split("/")[2]?.slice(0, 11) || "";
+    const url = new URL(source);
+    let id = "";
+    if (url.hostname === "youtu.be") id = url.pathname.slice(1);
+    else if (
+      ["youtube.com", "www.youtube.com", "m.youtube.com", "www.youtube-nocookie.com"].includes(
+        url.hostname,
+      )
+    ) {
+      id =
+        url.pathname.startsWith("/embed/") || url.pathname.startsWith("/shorts/")
+          ? (url.pathname.split("/")[2] ?? "")
+          : (url.searchParams.get("v") ?? "");
     }
-    return url.searchParams.get("v")?.slice(0, 11) || "";
+    return /^[a-zA-Z0-9_-]{11}$/.test(id) ? id : "";
   } catch {
     return "";
   }
 }
-
 const videoId = computed(() => extractYoutubeId(props.source));
-const usePrivacyHost = computed(() => {
-  if (typeof props.privacyEnhanced === "boolean") {
-    return props.privacyEnhanced;
-  }
-  return config.public.media?.youtube?.privacyEnhanced !== false;
+const isActivated = ref(!props.lazy);
+const isIframeLoaded = ref(false);
+const hasPreconnected = ref(false);
+const fallbackTitle = computed(() => props.title || "YouTube video player");
+const ariaLabel = computed(() => "Play " + fallbackTitle.value);
+const thumbnailUrl = computed(() => {
+  if (props.thumbnailSrc) return props.thumbnailSrc;
+  const webp = props.thumbnailQuality.includes("webp");
+  return (
+    "https://i.ytimg.com/" +
+    (webp ? "vi_webp/" : "vi/") +
+    videoId.value +
+    "/" +
+    props.thumbnailQuality.replace("_webp", "") +
+    (webp ? ".webp" : ".jpg")
+  );
 });
-
-const embedSrc = computed(() => {
-  if (!videoId.value) {
-    return "";
-  }
-
-  const host = usePrivacyHost.value ? "www.youtube-nocookie.com" : "www.youtube.com";
-  const url = new URL(`https://${host}/embed/${videoId.value}`);
-  url.searchParams.set("playsinline", "1");
-  url.searchParams.set("rel", "0");
-  url.searchParams.set("controls", props.controls ? "1" : "0");
-
-  if (props.autoplay) {
-    url.searchParams.set("autoplay", "1");
-    url.searchParams.set("mute", "1");
-  }
-  if (Number.isInteger(props.start) && Number(props.start) > 0) {
-    url.searchParams.set("start", String(props.start));
-  }
-  if (props.playlist) {
-    url.searchParams.set("playlist", props.playlist);
-  }
-
+const calculateAspectRatio = computed(() => {
+  const [width, height] = props.aspectRatio.split(/[:/]/).map(Number);
+  return width && height ? (height / width) * 100 : 56.25;
+});
+const youtubeLocale = computed(
+  () =>
+    props.language ??
+    locales.value.find((item) => item.code === locale.value)?.language ??
+    locale.value,
+);
+const youtubeEmbedUrl = computed(() => {
+  const host =
+    (props.privacyEnhanced ?? config.public.media?.youtube?.privacyEnhanced !== false)
+      ? "www.youtube-nocookie.com"
+      : "www.youtube.com";
+  const url = new URL("https://" + host + "/embed/" + videoId.value);
+  const params = {
+    playsinline: "1",
+    autoplay: props.autoplay ? "1" : "0",
+    controls: props.controls ? "1" : "0",
+    mute: props.mute ? "1" : "0",
+    loop: props.loop ? "1" : "0",
+    rel: props.rel ? "1" : "0",
+    hl: youtubeLocale.value,
+    cc_lang_pref: props.ccLangPref || youtubeLocale.value,
+  };
+  for (const [key, value] of Object.entries(params)) url.searchParams.set(key, value);
+  if (props.start > 0) url.searchParams.set("start", String(props.start));
+  if (props.playlist || props.loop)
+    url.searchParams.set("playlist", props.playlist || videoId.value);
   return url.toString();
 });
+useHead(() => ({
+  link: hasPreconnected.value
+    ? [
+        "https://www.youtube-nocookie.com",
+        "https://www.youtube.com",
+        "https://www.gstatic.com",
+      ].map((href) => ({ rel: "preconnect", href }))
+    : [],
+}));
+function warmConnections() {
+  hasPreconnected.value = true;
+}
+const { start: startLoadTimer, stop: stopLoadTimer } = useTimeoutFn(
+  () => {
+    if (!isIframeLoaded.value) isActivated.value = false;
+  },
+  8000,
+  { immediate: false },
+);
+function activatePlayer() {
+  if (isActivated.value || !videoId.value) return;
+  warmConnections();
+  isActivated.value = true;
+  isIframeLoaded.value = false;
+  startLoadTimer();
+}
+function handleIframeLoad() {
+  stopLoadTimer();
+  isIframeLoaded.value = true;
+}
+watch([() => props.source, () => props.lazy], () => {
+  stopLoadTimer();
+  isActivated.value = false;
+  isIframeLoaded.value = false;
+  if (!props.lazy) activatePlayer();
+});
+onMounted(() => {
+  if (!props.lazy) startLoadTimer();
+});
 </script>
 
 <template>
-  <figure class="youtube-embed" :style="{ '--youtube-embed-ratio': aspectRatio }">
+  <div
+    class="youtube-video-container"
+    :class="{
+      'fixed-aspect-ratio': aspectRatio !== 'auto',
+      'is-activated': isActivated,
+    }"
+    :style="aspectRatio !== 'auto' ? { paddingBottom: `${calculateAspectRatio}%` } : {}"
+  >
+    <div
+      v-if="!videoId"
+      class="absolute inset-0 grid place-items-center bg-surface-muted p-4"
+      role="alert"
+    >
+      <UiText tone="danger" size="sm">Invalid YouTube source.</UiText>
+    </div>
     <iframe
-      v-if="embedSrc"
-      class="youtube-embed__frame"
-      :src="embedSrc"
-      :title="title"
-      loading="lazy"
+      v-if="isActivated && videoId"
+      key="youtube-iframe"
+      class="youtube-iframe"
+      :src="youtubeEmbedUrl"
+      :title="title || fallbackTitle"
+      :loading="lazy ? 'lazy' : 'eager'"
       allow="
         accelerometer;
         autoplay;
@@ -95,40 +182,166 @@ const embedSrc = computed(() => {
       "
       referrerpolicy="strict-origin-when-cross-origin"
       allowfullscreen
-    />
-    <div v-else class="youtube-embed__fallback">
-      <UiText tone="danger" size="sm">Invalid YouTube source.</UiText>
-    </div>
-  </figure>
+      @load="handleIframeLoad"
+    ></iframe>
+
+    <button
+      v-if="!isIframeLoaded && videoId"
+      key="youtube-facade"
+      role="button"
+      class="youtube-facade"
+      :class="{ 'youtube-facade--loading': isActivated }"
+      :aria-label="ariaLabel"
+      :disabled="isActivated"
+      @click="activatePlayer"
+      @pointerover="warmConnections"
+      @focus="warmConnections"
+    >
+      <UiImage
+        provider="none"
+        :viewport-load="false"
+        class="youtube-thumbnail"
+        :src="thumbnailUrl"
+        :alt="title || fallbackTitle"
+        width="1280"
+        height="720"
+        loading="lazy"
+        draggable="false"
+      />
+      <span class="youtube-facade-overlay" aria-hidden="true"></span>
+      <span v-if="!isActivated" class="youtube-facade-play" aria-hidden="true">
+        <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
+          <path
+            class="ytp-large-play-button-bg"
+            d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
+            fill="#f03"
+          ></path>
+          <path d="M 45,24 27,14 27,34" fill="#fff"></path>
+        </svg>
+      </span>
+      <span v-else class="youtube-loading-spinner" aria-hidden="true"></span>
+      <span class="sr-only">{{ ariaLabel }}</span>
+    </button>
+  </div>
 </template>
 
 <style scoped>
-.youtube-embed {
+.youtube-video-container {
+  position: relative;
   width: 100%;
-  min-width: 200px;
-  margin: 0;
   overflow: hidden;
-  border: 1px solid var(--site-color-border);
-  border-radius: 12px;
-  background: var(--site-color-surface-muted);
-  aspect-ratio: var(--youtube-embed-ratio);
 }
 
-.youtube-embed__frame,
-.youtube-embed__fallback {
+.fixed-aspect-ratio {
+  height: 0;
+}
+
+.youtube-video-container:not(.fixed-aspect-ratio) {
+  height: 400px;
+}
+
+.youtube-iframe {
+  position: absolute;
+  inset: 0;
   width: 100%;
   height: 100%;
+  border: 0;
 }
 
-.youtube-embed__frame {
-  display: block;
+.youtube-facade {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+}
+
+.youtube-facade:focus-visible {
+  outline: 2px solid rgb(255 255 255 / 80%);
+  outline-offset: -2px;
+}
+
+.youtube-facade--loading {
+  cursor: default;
+  pointer-events: none;
+}
+
+.youtube-thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.youtube-facade:hover .youtube-thumbnail {
+  transform: scale(1.03);
+}
+
+.youtube-facade-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgb(0 0 0 / 25%) 0%, rgb(0 0 0 / 55%) 100%);
+  transition: background 0.3s ease;
+  display: none;
+}
+
+.youtube-facade--loading .youtube-facade-overlay,
+.youtube-facade:hover .youtube-facade-overlay {
+  display: block;
+  background: linear-gradient(180deg, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 45%) 100%);
 }
 
-.youtube-embed__fallback {
-  display: grid;
-  min-height: 200px;
-  place-items: center;
-  padding: 16px;
+.youtube-facade-play {
+  position: absolute;
+  width: 68px;
+  height: 48px;
+  background: transparent;
+}
+
+.youtube-facade--loading .youtube-facade-play {
+  display: none;
+}
+
+.youtube-loading-spinner {
+  position: absolute;
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  border: 8px solid rgb(255 255 255 / 30%);
+  border-top-color: #fff;
+  animation: youtube-spinner 0.9s linear infinite;
+}
+
+@media (width <= 768px) {
+  .youtube-video-container:not(.fixed-aspect-ratio) {
+    height: 240px;
+  }
+}
+
+@media (width <= 540px) {
+  .youtube-facade-play {
+    width: 50px;
+    height: 30px;
+  }
+
+  .youtube-loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgb(255 255 255 / 30%);
+    border-top-color: #fff;
+  }
+}
+
+@keyframes youtube-spinner {
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>

package/dist/resources/components/nuxt/site-source/app/composables/useFloatingBottomStack.ts

@@ -0,0 +1,44 @@
+interface FloatingLayer {
+  height: number;
+  visible: boolean;
+  order: number;
+}
+
+export function useFloatingBottomStack() {
+  const layers = useState<Record<string, FloatingLayer>>("site-floating-layers", () => ({}));
+  const ordered = computed(() =>
+    Object.entries(layers.value).sort(
+      ([a, first], [b, second]) => first.order - second.order || a.localeCompare(b),
+    ),
+  );
+  function setLayer(key: string, layer: FloatingLayer) {
+    const current = layers.value[key];
+    const height = Math.max(0, Math.ceil(layer.height));
+    if (
+      current?.height === height &&
+      current.visible === layer.visible &&
+      current.order === layer.order
+    )
+      return;
+    layers.value[key] = { ...layer, height };
+  }
+  function clearLayer(key: string) {
+    layers.value = Object.fromEntries(
+      Object.entries(layers.value).filter(([name]) => name !== key),
+    );
+  }
+  function getLayerBottom(key: string) {
+    return computed(() => {
+      let offset = 0;
+      for (const [name, layer] of ordered.value) {
+        if (name === key) break;
+        if (layer.visible) offset += layer.height;
+      }
+      return offset;
+    });
+  }
+  const dockedHeight = computed(() =>
+    ordered.value.reduce((sum, [, layer]) => sum + (layer.visible ? layer.height : 0), 0),
+  );
+  return { layers: readonly(layers), setLayer, clearLayer, getLayerBottom, dockedHeight };
+}

package/dist/resources/components/nuxt/site-source/app/composables/useNavigation.ts

@@ -20,14 +20,12 @@ export function useNavigation(): Navigation {
     appGroups: computed(() =>
       site.value.navigation.app.map((group) => ({
         ...(group.labelKey === undefined ? {} : { label: t(group.labelKey) }),
-        items: group.items.map(
-          (item): AppNavItem => ({
-            label: t(item.labelKey),
-            to: item.to,
-            ...(item.icon === undefined ? {} : { icon: item.icon }),
-            ...(item.badge === undefined ? {} : { badge: item.badge }),
-          }),
-        ),
+        items: group.items.map((item): AppNavItem => ({
+          label: t(item.labelKey),
+          to: item.to,
+          ...(item.icon === undefined ? {} : { icon: item.icon }),
+          ...(item.badge === undefined ? {} : { badge: item.badge }),
+        })),
       })),
     ),
     footerGroups: computed(() =>

package/dist/resources/components/nuxt/site-source/app/consent/types.ts

@@ -19,10 +19,7 @@ export interface ConsentConfig {
 export type ConsentValue = "accepted" | "rejected";
 
 export type ConsentPersistenceError =
-  | "read-failed"
-  | "write-failed"
-  | "clear-failed"
-  | "write-and-clear-failed";
+  "read-failed" | "write-failed" | "clear-failed" | "write-and-clear-failed";
 
 export interface ConsentState {
   decision: ConsentValue | null;

package/dist/resources/components/nuxt/site-source/app/content/types.ts

@@ -5,6 +5,9 @@ export interface ListItem {
   readonly category?: string;
   readonly date?: string;
   readonly author?: string;
+  readonly image?: { readonly src: string; readonly alt: string };
+  readonly categoryTo?: string;
+  readonly dateTime?: string;
 }
 
 export interface Article {

package/dist/resources/components/nuxt/site-source/app/theme/accordion.ts

@@ -1,9 +1,10 @@
 export default {
   slots: {
-    root: "divide-y divide-border",
-    item: "py-1",
+    root: "space-y-7.5 cursor-pointer max-xl:space-y-4.5 max-md:!space-y-2.5",
+    item: "w-full py-7 pl-6 pr-9 max-md:py-4 max-md:pl-4 max-md:pr-9 bg-surface rounded-xl shadow-accordion overflow-hidden transition-all duration-300 border-none",
     trigger:
-      "rounded-md px-2 py-3 text-left text-sm font-semibold text-text hover:bg-surface-muted",
-    content: "px-2 pb-3 text-sm leading-6 text-muted",
+      "p-0 flex items-center justify-between gap-2.5 min-h-12 transition-all duration-300 cursor-pointer",
+    content: "transition-all duration-300 overflow-hidden",
+    body: "p-0 mt-4 text-muted max-md:mt-2.5",
   },
 };

package/dist/resources/components/nuxt/site-source/app/theme/breadcrumb.ts

@@ -1,8 +1,18 @@
 export default {
   slots: {
-    root: "text-sm",
-    list: "gap-1.5",
-    link: "text-muted hover:text-text",
-    separator: "text-dimmed",
+    root: "relative min-w-0",
+    list: "flex items-center gap-1.5 max-md:flex-wrap",
+    linkLabel: "text-lg",
+    separator: "flex text-lg",
+  },
+  variants: {
+    active: {
+      true: {
+        link: "text-text font-normal",
+      },
+      false: {
+        link: "text-dimmed font-normal",
+      },
+    },
   },
 };