From ef13982eda5c9a75e4936cc2aab5fa286542e96f Mon Sep 17 00:00:00 2001
From: Matt Maribojoc <mmaribojoc@vuestorefront.io>
Date: Thu, 11 Apr 2024 08:51:09 -0400
Subject: [PATCH 1/2] fix(preview): avoid glob import for nuxt-preview (#3096)

* fix(preview): avoid glob import for nuxt-preview

* lint fix
---
 apps/docs/components/nuxt.config.ts    |  6 +++++-
 apps/preview/next/layouts/Examples.tsx |  2 +-
 apps/preview/nuxt/pages/examples.vue   | 12 ++++++------
 apps/preview/nuxt/pages/showcases.vue  | 14 ++++++++------
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/apps/docs/components/nuxt.config.ts b/apps/docs/components/nuxt.config.ts
index e5aa36bd52..d055e54429 100644
--- a/apps/docs/components/nuxt.config.ts
+++ b/apps/docs/components/nuxt.config.ts
@@ -31,7 +31,11 @@ export default defineNuxtConfig({
   nitro: {
     routeRules: {
       '/figma': { redirect: 'https://www.figma.com/file/Q7Nr1NvjPdcGVhykkfDg2k/Storefront-UI-%7C-Design-Kit-v2.5-(public)?type=design&node-id=22913-91045&mode=design'}
-    }
+    },
+    prerender: {
+      crawlLinks: true,
+      failOnError: false,
+    },
   },
   vite: {
     server: {
diff --git a/apps/preview/next/layouts/Examples.tsx b/apps/preview/next/layouts/Examples.tsx
index 573fd30dcf..924975a887 100644
--- a/apps/preview/next/layouts/Examples.tsx
+++ b/apps/preview/next/layouts/Examples.tsx
@@ -46,7 +46,7 @@ export default function ExampleLayout({ children }: { children: ReactElement })
           <ul className="sidebar-list">
             {components?.map((component) => (
               <li key={component} data-sidebar-component={component}>
-                <Link href={`/examples/${component}`} legacyBehavior>
+                <Link href={`/examples/${component}`} legacyBehavior prefetch={false}>
                   <SfListItem
                     className={classNames({ 'font-medium': router.pathname === `/examples/${component}` })}
                     selected={router.pathname === `/examples/${component}`}
diff --git a/apps/preview/nuxt/pages/examples.vue b/apps/preview/nuxt/pages/examples.vue
index 961e992262..41eafae9d7 100644
--- a/apps/preview/nuxt/pages/examples.vue
+++ b/apps/preview/nuxt/pages/examples.vue
@@ -19,7 +19,7 @@
       </SfButton>
       <ul class="sidebar-list flex flex-col">
         <li v-for="component in components" :key="component">
-          <NuxtLink v-slot="{ navigate }" :to="`/examples/${component}`" custom>
+          <NuxtLink v-slot="{ navigate }" :to="`/examples/${component}`" custom no-prefetch>
             <SfListItem
               tag="span"
               :selected="currentRoute.path === `/examples/${component}`"
@@ -47,12 +47,12 @@ import {
 } from '@storefront-ui/vue';
 import { onBeforeMount } from 'vue';
 
-const { currentRoute } = useRouter();
+const { currentRoute, ...router } = useRouter();
 
-const files = import.meta.glob('./examples/*.vue');
-const components = Object.keys(files)
-  .map((file) => file.match(/([\w\d_-]*)\.?[^\\\/]*$/i)[1])
-  .sort();
+const components = router
+  .getRoutes()
+  .filter((route) => route.path.includes('examples/'))
+  .map((route) => route.path.replace('/examples/', ''));
 
 const isOpen = ref(true);
 const isNotIframe = ref(false);
diff --git a/apps/preview/nuxt/pages/showcases.vue b/apps/preview/nuxt/pages/showcases.vue
index a124ce30e7..4bbe74fae8 100644
--- a/apps/preview/nuxt/pages/showcases.vue
+++ b/apps/preview/nuxt/pages/showcases.vue
@@ -42,6 +42,7 @@
                     v-slot="{ navigate }"
                     :to="groupItemHref(groupKey, showcaseName)"
                     custom
+                    no-prefetch
                   >
                     <SfListItem
                       tag="span"
@@ -88,19 +89,20 @@ import {
 import { ref, watch, reactive, onBeforeMount } from 'vue';
 import { useControlsSearchParams } from '~/composables/utils/useControlsSearchParams';
 
-const { currentRoute } = useRouter();
+const { currentRoute, ...router } = useRouter();
 
 const REST_GROUP_NAME = 'Rest';
-const files = import.meta.glob('./showcases/**');
-const paths = Object.keys(files);
+const paths = router
+  .getRoutes()
+  .filter((route) => route.path.includes('showcases/'))
+  .map((route) => route.path);
 const groupItemHref = (groupName, showcaseName) => {
   return `/showcases/${groupName !== REST_GROUP_NAME ? `${groupName}/` : ''}${showcaseName}`;
 };
 const groups = reactive(
   paths.reduce((prev, curr) => {
-    if (!curr.includes('.vue')) return prev;
-    const showcasePathArray = curr.replace('./showcases/', '').split('/');
-    const showcaseName = showcasePathArray[showcasePathArray.length - 1].replace('.vue', '');
+    const showcasePathArray = curr.replace('/showcases/', '').split('/');
+    const showcaseName = showcasePathArray[showcasePathArray.length - 1];
     const groupName = showcasePathArray.length === 2 ? showcasePathArray[0] : REST_GROUP_NAME;
 
     const isInUrl = currentRoute.value.href === groupItemHref(groupName, showcaseName);

From 96b1d5d377952bec5b10b83dea5cb083ff1f8a01 Mon Sep 17 00:00:00 2001
From: Matt Maribojoc <mmaribojoc@vuestorefront.io>
Date: Thu, 11 Apr 2024 14:04:54 -0400
Subject: [PATCH 2/2] docs: add loading="lazy" to iframes (#3099)

* docs: loading=lazy on iframe

* Update apps/docs/components/components/content/Generate.vue

Co-authored-by: Jakub Freisler <jakub@frsource.org>

---------

Co-authored-by: Jakub Freisler <jakub@frsource.org>
---
 apps/docs/components/components/content/Generate.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/components/components/content/Generate.vue b/apps/docs/components/components/content/Generate.vue
index e99cf2d627..b5e3223571 100644
--- a/apps/docs/components/components/content/Generate.vue
+++ b/apps/docs/components/components/content/Generate.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="custom-block">
-    <iframe ref="iframeRef" :src="exampleUrl" class="generate w-full h-full border"></iframe>
+    <iframe ref="iframeRef" :src="exampleUrl" class="generate w-full h-full border" loading="lazy" />
   </div>
 </template>