Move setup template sections (#4679)

* Move script to top of the file and add component name Signed-off-by: Olga Bulat <[email protected]> * Move script to top of the file Also add the eslint rule to enforce the order and padding line Signed-off-by: Olga Bulat <[email protected]> --------- Signed-off-by: Olga Bulat <[email protected]>
WordPress · Jul 31, 2024 · ca36bd1 · ca36bd1
1 parent 8caa0e2
commit ca36bd1
Show file tree

Hide file tree

Showing 62 changed files with 1,107 additions and 1,079 deletions.
diff --git a/frontend/src/app.vue b/frontend/src/app.vue
@@ -1,36 +1,3 @@
-<template>
-  <div>
-    <Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir">
-      <Head>
-        <template v-for="link in head.link" :key="link.id">
-          <Link
-            :id="link.id"
-            :rel="link.rel"
-            :href="link.href"
-            :hreflang="link.hreflang"
-          />
-        </template>
-        <template v-for="meta in head.meta" :key="meta.id">
-          <Meta
-            :id="meta.id"
-            :property="meta.property"
-            :content="meta.content"
-          />
-        </template>
-      </Head>
-      <Body>
-        <div :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]">
-          <VSkipToContentButton />
-          <NuxtLayout>
-            <NuxtPage />
-          </NuxtLayout>
-          <VGlobalAudioSection />
-        </div>
-      </Body>
-    </Html>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, onMounted, useLocaleHead } from "#imports"
 
@@ -66,3 +33,36 @@ onMounted(() => {
   featureFlagStore.syncAnalyticsWithLocalStorage()
 })
 </script>
+
+<template>
+  <div>
+    <Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir">
+      <Head>
+        <template v-for="link in head.link" :key="link.id">
+          <Link
+            :id="link.id"
+            :rel="link.rel"
+            :href="link.href"
+            :hreflang="link.hreflang"
+          />
+        </template>
+        <template v-for="meta in head.meta" :key="meta.id">
+          <Meta
+            :id="meta.id"
+            :property="meta.property"
+            :content="meta.content"
+          />
+        </template>
+      </Head>
+      <Body>
+        <div :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]">
+          <VSkipToContentButton />
+          <NuxtLayout>
+            <NuxtPage />
+          </NuxtLayout>
+          <VGlobalAudioSection />
+        </div>
+      </Body>
+    </Html>
+  </div>
+</template>
diff --git a/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue b/frontend/src/components/VContentSwitcher/VSearchTypeButton.vue
@@ -19,6 +19,7 @@
     </template>
   </VButton>
 </template>
+
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 

diff --git a/frontend/src/components/VContentSwitcher/VSearchTypes.vue b/frontend/src/components/VContentSwitcher/VSearchTypes.vue
@@ -35,6 +35,7 @@
     </div>
   </VItemGroup>
 </template>
+
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue"
 

diff --git a/frontend/src/components/VErrorSection/VErrorImage.vue b/frontend/src/components/VErrorSection/VErrorImage.vue
@@ -1,12 +1,3 @@
-<template>
-  <figure class="error-image">
-    <img :src="image.src" :alt="$t(image.alt)" :title="$t(image.alt)" />
-    <!-- Disable reason: We control the attribution HTML generation so this is safe and will not lead to XSS attacks -->
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <figcaption class="attribution" v-html="image.attribution" />
-  </figure>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from "#imports"
 
@@ -54,6 +45,15 @@ const images = Object.fromEntries(
 const image = computed(() => images[props.errorCode])
 </script>
 
+<template>
+  <figure class="error-image">
+    <img :src="image.src" :alt="$t(image.alt)" :title="$t(image.alt)" />
+    <!-- Disable reason: We control the attribution HTML generation so this is safe and will not lead to XSS attacks -->
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <figcaption class="attribution" v-html="image.attribution" />
+  </figure>
+</template>
+
 <style scoped>
 ::v-deep(.attribution) {
   @apply mt-4 text-sr text-dark-charcoal-70;

diff --git a/frontend/src/components/VErrorSection/VErrorSection.vue b/frontend/src/components/VErrorSection/VErrorSection.vue
@@ -1,20 +1,3 @@
-<template>
-  <div class="error-section mx-auto flex max-w-screen-xl flex-row items-center">
-    <div class="image-pane hidden max-w-[432px] flex-grow md:block">
-      <VErrorImage class="hidden md:block" :error-code="errorCode" />
-    </div>
-    <div class="flex-grow p-4 md:p-20">
-      <VNoResults v-if="errorCode === NO_RESULT" :search-term="searchTerm" />
-      <div v-else>
-        <h1 class="heading-4 md:heading-2 text-center !font-semibold">
-          {{
-            isTimeout ? $t("serverTimeout.heading") : $t("unknownError.heading")
-          }}
-        </h1>
-      </div>
-    </div>
-  </div>
-</template>
 <script setup lang="ts">
 import { defineAsyncComponent } from "#imports"
 
@@ -49,3 +32,21 @@ const isTimeout = computed(() =>
   [SERVER_TIMEOUT, ECONNABORTED].includes(props.fetchingError.code)
 )
 </script>
+
+<template>
+  <div class="error-section mx-auto flex max-w-screen-xl flex-row items-center">
+    <div class="image-pane hidden max-w-[432px] flex-grow md:block">
+      <VErrorImage class="hidden md:block" :error-code="errorCode" />
+    </div>
+    <div class="flex-grow p-4 md:p-20">
+      <VNoResults v-if="errorCode === NO_RESULT" :search-term="searchTerm" />
+      <div v-else>
+        <h1 class="heading-4 md:heading-2 text-center !font-semibold">
+          {{
+            isTimeout ? $t("serverTimeout.heading") : $t("unknownError.heading")
+          }}
+        </h1>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/VErrorSection/VNoResults.vue b/frontend/src/components/VErrorSection/VNoResults.vue
@@ -1,32 +1,3 @@
-<template>
-  <div class="no-results text-center md:text-left">
-    <h1 class="heading-4 md:heading-2 break-words">
-      {{ $t("noResults.heading", { query: searchTerm }) }}
-    </h1>
-    <h2 class="description-regular md:heading-5 mt-4">
-      {{ $t("noResults.alternatives") }}
-    </h2>
-
-    <div class="mt-10 flex flex-col flex-wrap gap-4 sm:flex-row">
-      <VButton
-        v-for="source in externalSources"
-        :key="source.name"
-        as="VLink"
-        :href="source.url"
-        variant="bordered-gray"
-        size="medium"
-        class="label-bold !w-full text-dark-charcoal sm:!w-auto"
-        show-external-icon
-        has-icon-end
-        :external-icon-size="6"
-        @mousedown="handleClick(source.name)"
-      >
-        {{ source.name }}
-      </VButton>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { onMounted } from "vue"
 
@@ -59,3 +30,32 @@ onMounted(() => {
   uiStore.setFiltersState(false)
 })
 </script>
+
+<template>
+  <div class="no-results text-center md:text-left">
+    <h1 class="heading-4 md:heading-2 break-words">
+      {{ $t("noResults.heading", { query: searchTerm }) }}
+    </h1>
+    <h2 class="description-regular md:heading-5 mt-4">
+      {{ $t("noResults.alternatives") }}
+    </h2>
+
+    <div class="mt-10 flex flex-col flex-wrap gap-4 sm:flex-row">
+      <VButton
+        v-for="source in externalSources"
+        :key="source.name"
+        as="VLink"
+        :href="source.url"
+        variant="bordered-gray"
+        size="medium"
+        class="label-bold !w-full text-dark-charcoal sm:!w-auto"
+        show-external-icon
+        has-icon-end
+        :external-icon-size="6"
+        @mousedown="handleClick(source.name)"
+      >
+        {{ source.name }}
+      </VButton>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/VExternalSearch/VExternalSearchForm.vue b/frontend/src/components/VExternalSearch/VExternalSearchForm.vue
@@ -1,3 +1,55 @@
+<script setup lang="ts">
+import { computed, ref } from "vue"
+
+import { storeToRefs } from "pinia"
+
+import { useUiStore } from "~/stores/ui"
+import { useSearchStore } from "~/stores/search"
+import { useMediaStore } from "~/stores/media"
+
+import { useAnalytics } from "~/composables/use-analytics"
+import { useExternalSources } from "~/composables/use-external-sources"
+
+import VExternalSourceList from "~/components/VExternalSearch/VExternalSourceList.vue"
+import VButton from "~/components/VButton.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
+import VModal from "~/components/VModal/VModal.vue"
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
+
+withDefaults(
+  defineProps<{
+    searchTerm: string
+    isSupported?: boolean
+    hasNoResults?: boolean
+  }>(),
+  {
+    isSupported: false,
+    hasNoResults: true,
+  }
+)
+
+const sectionRef = ref<HTMLElement | null>(null)
+const searchStore = useSearchStore()
+const uiStore = useUiStore()
+
+const { sendCustomEvent } = useAnalytics()
+
+const mediaStore = useMediaStore()
+const { currentPage } = storeToRefs(mediaStore)
+
+const handleModalOpen = () => {
+  sendCustomEvent("VIEW_EXTERNAL_SOURCES", {
+    searchType: searchStore.searchType,
+    query: searchStore.searchTerm,
+    resultPage: currentPage.value || 1,
+  })
+}
+
+const { externalSourcesType } = useExternalSources()
+
+const isMd = computed(() => uiStore.isBreakpoint("md"))
+</script>
+
 <template>
   <section
     :key="externalSourcesType"
@@ -61,55 +113,3 @@
     </VModal>
   </section>
 </template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue"
-
-import { storeToRefs } from "pinia"
-
-import { useUiStore } from "~/stores/ui"
-import { useSearchStore } from "~/stores/search"
-import { useMediaStore } from "~/stores/media"
-
-import { useAnalytics } from "~/composables/use-analytics"
-import { useExternalSources } from "~/composables/use-external-sources"
-
-import VExternalSourceList from "~/components/VExternalSearch/VExternalSourceList.vue"
-import VButton from "~/components/VButton.vue"
-import VIcon from "~/components/VIcon/VIcon.vue"
-import VModal from "~/components/VModal/VModal.vue"
-import VIconButton from "~/components/VIconButton/VIconButton.vue"
-
-withDefaults(
-  defineProps<{
-    searchTerm: string
-    isSupported?: boolean
-    hasNoResults?: boolean
-  }>(),
-  {
-    isSupported: false,
-    hasNoResults: true,
-  }
-)
-
-const sectionRef = ref<HTMLElement | null>(null)
-const searchStore = useSearchStore()
-const uiStore = useUiStore()
-
-const { sendCustomEvent } = useAnalytics()
-
-const mediaStore = useMediaStore()
-const { currentPage } = storeToRefs(mediaStore)
-
-const handleModalOpen = () => {
-  sendCustomEvent("VIEW_EXTERNAL_SOURCES", {
-    searchType: searchStore.searchType,
-    query: searchStore.searchTerm,
-    resultPage: currentPage.value || 1,
-  })
-}
-
-const { externalSourcesType } = useExternalSources()
-
-const isMd = computed(() => uiStore.isBreakpoint("md"))
-</script>