Stop trying to accomodate one usage of un-prefixed assets and fix ord…

…ering

.eslintrc.js

@@ -107,16 +107,15 @@ module.exports = {
           },
           {
             // Move assets to the very end of the imports list
-            pattern: 'assets/**',
-            patternOptions: { partial: true },
+            pattern: '~/assets/**',
             group: 'type',
             position: 'after',
           },
           {
             // Treat components as their own group and move to the end of the internal imports list
             pattern: '~/components/**',
-            group: 'parent',
-            position: 'before',
+            group: 'internal',
+            position: 'after',
           },
           /**
            * These next two must come after any more specific matchers
@@ -150,8 +149,13 @@ module.exports = {
         alias: {
           '~': './src',
           '~~': '.',
-          assets: './src/assets',
         },
+        /**
+         * SVG imports are excluded for the import/no-unresolved
+         * rule above due to due to lack of support for `?inline` suffix
+         *
+         * Therefore, there's no need to configure them here
+         */
         extensions: ['.js', '.ts', '.vue', '.png'],
       },
     },

src/components/License/VLicense.vue

@@ -33,6 +33,8 @@ import {
   LICENSE_ICON_MAPPING,
 } from '~/constants/license.js'
 
+import VIcon from '~/components/VIcon/VIcon.vue'
+
 import by from '~/assets/licenses/by.svg'
 import cc0 from '~/assets/licenses/cc0.svg'
 import ccLogo from '~/assets/licenses/cc-logo.svg'
@@ -41,8 +43,6 @@ import nd from '~/assets/licenses/nd.svg'
 import pdm from '~/assets/licenses/pdm.svg'
 import sa from '~/assets/licenses/sa.svg'
 
-import VIcon from '~/components/VIcon/VIcon.vue'
-
 /**
  * Displays the icons for the license along with a readable display name for the
  * license.

src/components/VAudioTrack/VPlayPause.vue

@@ -12,12 +12,12 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 
+import VIconButton from '~/components/VIconButton/VIconButton.vue'
+
 import playIcon from '~/assets/icons/play.svg'
 import pauseIcon from '~/assets/icons/pause.svg'
 import replayIcon from '~/assets/icons/replay.svg'
 
-import VIconButton from '~/components/VIconButton/VIconButton.vue'
-
 /**
  * Displays the control for switching between the playing and paused states of
  * a media file.

src/components/VContentLink/VContentLink.vue

@@ -22,11 +22,11 @@ import { computed, defineComponent } from '@nuxtjs/composition-api'
 import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
 import { AUDIO, IMAGE, supportedMediaTypes } from '~/constants/media'
 
+import VIcon from '~/components/VIcon/VIcon.vue'
+
 import audioIcon from '~/assets/icons/audio-wave.svg'
 import imageIcon from '~/assets/icons/image.svg'
 
-import VIcon from '~/components/VIcon/VIcon.vue'
-
 const iconMapping = {
   [AUDIO]: audioIcon,
   [IMAGE]: imageIcon,

src/components/VContentReport/VContentReportButton.vue

@@ -16,10 +16,10 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 
-import flagIcon from '~/assets/icons/flag.svg'
-
 import VIcon from '~/components/VIcon/VIcon.vue'
 
+import flagIcon from '~/assets/icons/flag.svg'
+
 export default defineComponent({
   name: 'VContentReportButton',
   components: { VIcon },

src/components/VContentReport/VContentReportForm.vue

@@ -113,15 +113,15 @@ import ReportService from '~/data/report-service'
 
 import { reasons, statuses, DMCA_FORM_URL } from '~/constants/content-report'
 
-import externalLinkIcon from '~/assets/icons/external-link.svg'
-
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VRadio from '~/components/VRadio/VRadio.vue'
 import VDmcaNotice from '~/components/VContentReport/VDmcaNotice.vue'
 import VReportDescForm from '~/components/VContentReport/VReportDescForm.vue'
 import VLink from '~/components/VLink.vue'
 
+import externalLinkIcon from '~/assets/icons/external-link.svg'
+
 export default defineComponent({
   name: 'VContentReportForm',
   components: {

src/components/VContentReport/VContentReportPopover.vue

@@ -28,13 +28,14 @@
 <script>
 import { computed, useStore, defineComponent } from '@nuxtjs/composition-api'
 
+import VPopover from '~/components/VPopover/VPopover.vue'
+
+import VContentReportButton from '~/components/VContentReport/VContentReportButton.vue'
+
 import flagIcon from '~/assets/icons/flag.svg'
 
 import closeSmallIcon from '~/assets/icons/close-small.svg'
 
-import VPopover from '~/components/VPopover/VPopover.vue'
-import VContentReportButton from '~/components/VContentReport/VContentReportButton.vue'
-
 export default defineComponent({
   name: 'VContentReportPopover',
   components: { VPopover, VContentReportButton },

src/components/VContentSwitcher/VSearchTypeButton.vue

@@ -33,12 +33,12 @@ import { ALL_MEDIA, supportedSearchTypes } from '~/constants/media'
 import useSearchType from '~/composables/use-search-type'
 import { isMinScreen } from '~/composables/use-media-query'
 
-import caretDownIcon from '~/assets/icons/caret-down.svg'
-
 import VIcon from '~/components/VIcon/VIcon.vue'
 
 import VButton from '~/components/VButton.vue'
 
+import caretDownIcon from '~/assets/icons/caret-down.svg'
+
 export default defineComponent({
   name: 'VSearchTypeButton',
   components: { VButton, VIcon },

src/components/VContentSwitcher/VSearchTypePopover.vue

@@ -32,12 +32,12 @@ import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
 
 import useSearchType from '~/composables/use-search-type'
 
-import checkIcon from '~/assets/icons/checkmark.svg'
-
 import VPopover from '~/components/VPopover/VPopover.vue'
 import VSearchTypeButton from '~/components/VContentSwitcher/VSearchTypeButton.vue'
 import VSearchTypes from '~/components/VContentSwitcher/VSearchTypes.vue'
 
+import checkIcon from '~/assets/icons/checkmark.svg'
+
 export default defineComponent({
   name: 'VSearchTypePopover',
   components: {

src/components/VContentSwitcher/VSearchTypeRadio.vue

@@ -23,9 +23,9 @@ import {
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 
-import audioIcon from 'assets/icons/audio-wave.svg'
-import imageIcon from 'assets/icons/image.svg'
-import allIcon from 'assets/icons/all-content.svg'
+import audioIcon from '~/assets/icons/audio-wave.svg'
+import imageIcon from '~/assets/icons/image.svg'
+import allIcon from '~/assets/icons/all-content.svg'
 
 const iconMapping = {
   [AUDIO]: audioIcon,

src/components/VFilters/VFilterChecklist.vue

@@ -53,16 +53,16 @@
 </template>
 
 <script>
-import helpIcon from '~/assets/icons/help.svg'
-
-import closeSmallIcon from '~/assets/icons/close-small.svg'
-
 import VLicenseExplanation from '~/components/VFilters/VLicenseExplanation.vue'
 import VCheckbox from '~/components/VCheckbox/VCheckbox.vue'
 import VLicense from '~/components/License/VLicense.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VPopover from '~/components/VPopover/VPopover.vue'
 
+import closeSmallIcon from '~/assets/icons/close-small.svg'
+
+import helpIcon from '~/assets/icons/help.svg'
+
 export default {
   name: 'FilterCheckList',
   components: {

src/components/VFourOhFour.vue

@@ -58,12 +58,12 @@ import {
 import { MEDIA, SEARCH } from '~/constants/store-modules'
 import { FETCH_MEDIA, UPDATE_QUERY } from '~/constants/action-types'
 
+import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar'
+
 import Oops from '~/assets/oops.svg?inline'
 import OpenverseLogo from '~/assets/logo.svg?inline'
 import OpenverseBrand from '~/assets/brand.svg?inline'
 
-import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar'
-
 const VFourOhFour = defineComponent({
   name: 'VFourOhFour',
   components: {

src/components/VHeader/VFilterButton.vue

@@ -26,11 +26,11 @@ import {
   useContext,
 } from '@nuxtjs/composition-api'
 
-import filterIcon from '~/assets/icons/filter.svg'
-
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 
+import filterIcon from '~/assets/icons/filter.svg'
+
 const VFilterButton = defineComponent({
   name: 'VFilterButton',
   components: {

src/components/VHeader/VHeader.vue

@@ -73,14 +73,14 @@ import { useMatchSearchRoutes } from '~/composables/use-match-routes'
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
 
-import closeIcon from '~/assets/icons/close.svg'
-
 import VLogoButton from '~/components/VHeader/VLogoButton.vue'
 
 import VHeaderFilter from '~/components/VHeader/VHeaderFilter.vue'
 import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
 import VHeaderMenu from '~/components/VHeader/VHeaderMenu.vue'
 
+import closeIcon from '~/assets/icons/close.svg'
+
 const menus = {
   FILTERS: 'filters',
   CONTENT_SWITCHER: 'content-switcher',

src/components/VHeader/VLogoButton.vue

@@ -22,11 +22,11 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 
-import OpenverseLogoText from '~/assets/icons/openverse-logo-text.svg?inline'
-
 import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
 import VButton from '~/components/VButton.vue'
 
+import OpenverseLogoText from '~/assets/icons/openverse-logo-text.svg?inline'
+
 const VLogoButton = defineComponent({
   name: 'VLogoButton',
   components: { OpenverseLogoText, VLogoLoader, VButton },

src/components/VHeader/VPageMenu/VPageList.vue

@@ -28,12 +28,12 @@
 <script>
 import usePages from '~/composables/use-pages'
 
-import externalLinkIcon from '~/assets/icons/external-link.svg'
-
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VItem from '~/components/VItemGroup/VItem.vue'
 import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
 
+import externalLinkIcon from '~/assets/icons/external-link.svg'
+
 export default {
   name: 'VPageMenuPopover',
   components: { VIcon, VItem, VItemGroup },

src/components/VHeader/VPageMenu/VPageMenuButton.vue

@@ -13,11 +13,11 @@
 <script>
 import { computed, useContext } from '@nuxtjs/composition-api'
 
-import ellipsisIcon from '~/assets/icons/ellipsis.svg'
-
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VButton from '~/components/VButton.vue'
 
+import ellipsisIcon from '~/assets/icons/ellipsis.svg'
+
 export default {
   name: 'VPageMenuButton',
   components: { VButton, VIcon },

src/components/VHeader/VSearchBar/VSearchButton.vue

@@ -31,12 +31,12 @@ import { defineComponent, computed } from '@nuxtjs/composition-api'
 import { isMinScreen } from '~/composables/use-media-query'
 import { useBrowserIsMobile } from '~/composables/use-browser-detection'
 
-import searchIcon from '~/assets/icons/search.svg'
-
 import VIcon from '~/components/VIcon/VIcon.vue'
 
 import VButton from '~/components/VButton.vue'
 
+import searchIcon from '~/assets/icons/search.svg'
+
 /**
  * @typedef Props
  * @property {'small' | 'medium' | 'large' | 'standalone'} size

src/components/VItemGroup/VItem.vue

@@ -69,8 +69,6 @@ import {
 
 import { warn } from '~/utils/warn'
 
-import checkmark from '~/assets/icons/checkmark.svg'
-
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import { VPopoverContentContextKey } from '~/components/VPopover/VPopoverContent.vue'
@@ -80,6 +78,8 @@ import {
   VItemGroupFocusContextKey,
 } from './VItemGroup.vue'
 
+import checkmark from '~/assets/icons/checkmark.svg'
+
 export default defineComponent({
   name: 'VItem',
   components: { VButton, VIcon },

src/components/VItemGroup/meta/VItemGroup.stories.js

@@ -1,19 +1,17 @@
 import { ref } from '@nuxtjs/composition-api'
 
-import close from '~/assets/icons/close.svg'
-
-import pause from '~/assets/icons/pause.svg'
-
-import play from '~/assets/icons/play.svg'
-
-import replay from '~/assets/icons/replay.svg'
-
 import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
 import VItem from '~/components/VItemGroup/VItem.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VPopover from '~/components/VPopover/VPopover.vue'
 import VButton from '~/components/VButton.vue'
 
+import replay from '~/assets/icons/replay.svg'
+
+import pause from '~/assets/icons/pause.svg'
+import play from '~/assets/icons/play.svg'
+import close from '~/assets/icons/close.svg'
+
 const icons = [close, pause, play, replay]
 
 export default {

src/components/VModal/VMobileModalContent.vue

@@ -49,13 +49,13 @@ import { warn } from '~/utils/warn'
 
 import { useDialogContent } from '~/composables/use-dialog-content'
 
-import closeIcon from '~/assets/icons/close.svg'
-
 import VTeleport from '~/components/VTeleport/VTeleport.vue'
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VLogoButton from '~/components/VHeader/VLogoButton.vue'
 
+import closeIcon from '~/assets/icons/close.svg'
+
 /**
  * Renders the inner content of a modal and manages focus.
  */

src/components/VModal/VModalContent.vue

@@ -45,14 +45,14 @@ import { useDialogContent } from '~/composables/use-dialog-content'
 
 import { warn } from '~/utils/warn'
 
-import closeIcon from '~/assets/icons/close.svg'
-
 import VTeleport from '~/components/VTeleport/VTeleport'
 
 import VButton from '~/components/VButton.vue'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 
+import closeIcon from '~/assets/icons/close.svg'
+
 /**
  * Renders the inner content of a modal and manages focus.
  */

src/components/VNotificationBanner.vue

@@ -24,10 +24,10 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 
-import closeIcon from '~/assets/icons/close.svg'
-
 import VIcon from '~/components/VIcon/VIcon.vue'
 
+import closeIcon from '~/assets/icons/close.svg'
+
 const VNotificationBanner = defineComponent({
   name: 'VNotificationBanner',
   components: {