Merge pull request #3098 from vuestorefront/v2

chore: automatic sync v2->v2-develop
vuestorefront · Apr 16, 2024 · 7331391 · 7331391
2 parents 51cf685 + 96b1d5d
commit 7331391
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 15 deletions.
diff --git 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>
 

diff --git 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
@@ -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
@@ -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
@@ -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);