Merge pull request #3 from SlovakNationalGallery/feat/autoimports

feat: structure proposal

.gitignore

@@ -24,3 +24,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+auto-imports.d.ts
+components.d.ts
+/public/fonts/

manual.d.ts

@@ -0,0 +1,7 @@
+// TODO: move after refactoring
+
+declare module 'vue-router' {
+    interface RouteMeta {
+        title: string
+    }
+}

package.json

@@ -9,25 +9,28 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.4",
     "@sentry/vue": "^7.73.0",
     "@typeform/embed": "^4.0.0",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vueuse/core": "^10.5.0",
     "laravel-vue-i18n": "^2.7.1",
     "openseadragon": "^4.1.0",
     "pinia": "^2.1.6",
+    "vue": "^3.3.4",
     "vue-router": "^4.2.5",
     "vue3-carousel": "^0.3.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
-    "vite": "^4.4.5",
     "autoprefixer": "^10.4.16",
     "axios": "^1.5",
     "lodash": "^4.17.21",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.5",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.3.3",
+    "unplugin-auto-import": "^0.16.7",
+    "unplugin-vue-components": "^0.25.2",
+    "unplugin-vue-router": "^0.7.0",
+    "vite": "^4.4.5"
   }
 }

src/App.vue

@@ -4,8 +4,7 @@
 </template>
 
 <script setup>
-import Header from './components/Header.vue'
-import { onMounted } from 'vue'
+import Header from './components/layout/Header.vue'
 
 const setViewHeight = () => {
     let vh = window.innerHeight * 0.01

src/app.js

@@ -2,108 +2,22 @@ import './bootstrap'
 import './css/style.css'
 
 import { createApp } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router/auto'
 import { i18nVue } from 'laravel-vue-i18n'
 import { createPinia } from 'pinia'
 import * as Sentry from '@sentry/vue'
 
 import App from './App.vue'
-import Collection from './views/Collection.vue'
-import Interaction from './views/Interaction.vue'
-import ItemDetail from './views/ItemDetail.vue'
-import SectionDetail from './views/SectionDetail.vue'
-import PlaceDetail from './views/PlaceDetail.vue'
-import RewardDetail from './views/RewardDetail.vue'
-import LockedItemDetail from './views/LockedItemDetail.vue'
 import { useHistoryStore } from './stores/HistoryStore'
 import { useLocaleStore } from './stores/LocaleStore'
 
-const routes = [
-    {
-        name: 'home',
-        path: '/',
-        component: Interaction,
-        meta: {
-            title: 'Atlas SNG',
-        },
-    },
-    {
-        name: 'locked_item_detail',
-        path: '/locked_item_detail/:id',
-        component: LockedItemDetail,
-        meta: {
-            title: 'Locked artwork detail'
-        }
-    },
-    {
-        name: 'item_detail',
-        path: '/detail/:id',
-        component: ItemDetail,
-        meta: {
-            title: 'Artwork detail',
-        },
-    },
-    {
-        name: 'section_detail',
-        path: '/group/:id',
-        component: SectionDetail,
-        meta: {
-            title: 'Artwork group detail',
-        },
-    },
-    {
-        name: 'section_item_detail',
-        path: '/group/:section_id/:id',
-        component: ItemDetail,
-        meta: {
-            title: 'Group › Artwork detail',
-        },
-    },
-    {
-        name: 'story',
-        path: '/story/:id',
-        component: Interaction,
-        meta: {
-            title: 'Story',
-        },
-    },
-    {
-        name: 'my_collection',
-        path: '/collection',
-        component: Collection,
-        meta: {
-            title: 'My timeline',
-        },
-    },
-    {
-        name: 'collection_detail',
-        path: '/:id?',
-        component: Collection,
-        meta: {
-            title: 'My timeline',
-        },
-    },
-    {
-        name: 'place_detail',
-        path: '/place/:id',
-        component: PlaceDetail,
-        meta: {
-            title: 'Place detail',
-        },
-    },
-    {
-        name: 'reward_detail',
-        path: '/reward/:id',
-        component: RewardDetail,
-    },
-]
 
 const history = createWebHistory()
 const router = createRouter({
     history,
-    routes,
+
     scrollBehavior(to, from, savedPosition) {
-        if (to.name === 'home') {
+        if (to.path === '/') {
             return savedPosition
         }
         return { top: 0 }

src/components/About.vue → src/components/about/About.vue

@@ -12,7 +12,7 @@
                             </h1>
                         </div>
                         <div>
-                            <img src="../img/about-ester.png" />
+                            <img src="../../img/about-ester.png" />
                         </div>
                     </div>
 
@@ -87,7 +87,7 @@
 
                         <img
                             class="mt-8 max-w-[8rem]"
-                            src="../img/eea_grants.png"
+                            src="../../img/eea_grants.png"
                             alt="Iceland Lichtenstein Norway grants"
                         />
                     </template>
@@ -146,15 +146,9 @@
 </style>
 
 <script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import AboutCollapsible from './AboutCollapsible.vue'
-import CardModal from '../components/CardModal.vue'
-import ConfirmButton from '../components/ConfirmButton.vue'
-import SvgLogo from './svg/Logo.vue'
-import SvgInfo from './svg/Info.vue'
-import { useInteractionStore } from '../stores/InteractionStore'
-import { useSurvey } from '../composables/Survey'
+import CardModal from '../layout/CardModal.vue'
+import ConfirmButton from '../forms/ConfirmButton.vue'
 
 const props = defineProps(['opened'])
 const router = useRouter()

src/components/AboutCollapsible.vue → src/components/about/AboutCollapsible.vue

@@ -13,9 +13,6 @@
 </template>
 
 <script setup>
-import { nextTick, ref, watch } from 'vue'
-import SvgDownArrow from './svg/DownArrow.vue'
-
 const props = defineProps(['initialOpen'])
 const el = ref(null)
 const open = ref(props.initialOpen)

src/components/AuthorityDetails.vue → src/components/author/AuthorityDetails.vue

@@ -37,10 +37,9 @@
 </template>
 
 <script setup>
-import { defineProps, ref, onMounted } from 'vue'
 import { Carousel, Slide } from 'vue3-carousel'
-import ItemImage from './ItemImage.vue'
-import ItemPreview from './ItemPreview.vue'
+import ItemImage from '../general/ItemImage.vue'
+import ItemPreview from '../general/ItemPreview.vue'
 
 const props = defineProps(['authority'])
 const relatedItems = ref([])

src/components/Bucketlist.vue → src/components/bucketlist/Bucketlist.vue

@@ -24,7 +24,7 @@
             <p v-if="!unlocked" class="pt-1">{{ $t('The story unlocks when all artworks have been found') }}</p>
             <router-link
                 :class="[{ 'pointer-events-none': !unlocked }, 'block']"
-                :to="{ name: 'reward_detail', params: { id: bucketlist.id } }"
+                :to="`/reward/${bucketlist.id}`"
             >
                 <Thumbnail class="mt-4" :class="[unlocked ? 'bg-green' : 'bg-green/20']" :truncate-description="false">
                     <template #image>
@@ -51,7 +51,7 @@
             <h3 class="text-1.5xl font-medium leading-6">{{ $t('Found') }}</h3>
             <div class="mt-4 flex flex-col gap-y-4">
                 <router-link
-                    :to="{ name: 'item_detail', params: { id: item.id } }"
+                    :to="`/item/${item.id}`"
                     v-for="item in found"
                     :key="item.id"
                 >
@@ -65,7 +65,7 @@
                 <router-link
                     v-for="item in notFound"
                     :key="item.id"
-                    :to="{ name: 'locked_item_detail', params: { id: item.id } }"
+                    :to="`/locked/${item.id}`"
                 >
                     <LockedItemThumbnail :item="item" />
                 </router-link>
@@ -75,14 +75,10 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
-import { useBucketlistStore } from '../stores/BucketlistStore'
-import { useInteractionStore } from '../stores/InteractionStore'
 import LockedItemThumbnail from './LockedItemThumbnail.vue'
-import ItemThumbnail from './ItemThumbnail.vue'
-import Thumbnail from './Thumbnail.vue'
-import ResponsiveImageWithSizes from './ResponsiveImageWithSizes.vue'
-import SvgLock from './svg/Lock.vue'
+import ItemThumbnail from '../general/ItemThumbnail.vue'
+import Thumbnail from '../general/Thumbnail.vue'
+import ResponsiveImageWithSizes from '../general/ResponsiveImageWithSizes.vue'
 
 const bucketlistStore = useBucketlistStore()
 const interactionStore = useInteractionStore()

src/components/LockedItemThumbnail.vue → src/components/bucketlist/LockedItemThumbnail.vue

@@ -7,17 +7,16 @@
             />
         </template>
         <template #icon>
-            <CaretRight />
+            <SvgCaretRight />
         </template>
         <template #title>{{ item.title }}</template>
         <template #description>{{ item.exhibition.name }}<br />{{ item.location_formatted }}</template>
     </Thumbnail>
 </template>
 
 <script setup>
-import ResponsiveImageWithSizes from './ResponsiveImageWithSizes.vue'
-import Thumbnail from './Thumbnail.vue'
-import CaretRight from './svg/CaretRight.vue'
+import ResponsiveImageWithSizes from '../general/ResponsiveImageWithSizes.vue'
+import Thumbnail from '../general/Thumbnail.vue'
 
 const props = defineProps(['item'])
 </script>

src/components/StoryButton.vue → src/components/forms/StoryButton.vue

@@ -9,7 +9,7 @@
                     <div class="shrink-0">
                         <img
                             class="h-16 w-16 rounded-xl border-2"
-                            src="../img/avatar-ester.png"
+                            src="../../img/avatar-ester.png"
                             alt="Avatar"
                         />
                     </div>
@@ -25,7 +25,7 @@
                     </div>
                 </div>
             </div>
-            <ChatCircleSmall />
+            <SvgChatCircleSmall />
         </div>
     </div>
     <CardModal @close="toggleModal" :visible="modalActive">
@@ -47,11 +47,8 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import ChatCircleSmall from './svg/ChatCircleSmall.vue'
-import CardModal from '../components/CardModal.vue'
-import ConfirmButton from '../components/ConfirmButton.vue'
+import CardModal from '../layout/CardModal.vue'
+import ConfirmButton from './ConfirmButton.vue'
 
 const props = defineProps(['storyId'])
 const modalActive = ref(false)
@@ -62,9 +59,6 @@ const toggleModal = () => {
 }
 
 const openStory = () => {
-    router.push({
-        name: 'story',
-        params: { id: props.storyId },
-    })
+    router.push(`/story/${props.storyId}`)
 }
 </script>

src/components/WebumeniaButton.vue → src/components/forms/WebumeniaButton.vue

@@ -22,8 +22,6 @@
 </template>
 
 <script setup>
-import SvgArrowSquareOut from './svg/ArrowSquareOut.vue'
-import SvgSearch from './svg/Search.vue'
 
 const props = defineProps(['url'])
 </script>

src/components/Collapsible.vue → src/components/general/Collapsible.vue

@@ -15,7 +15,6 @@
 </template>
 
 <script setup>
-import SvgDownArrow from './svg/DownArrow.vue'
 
 const props = defineProps(['open'])
 </script>

src/components/ImageLightbox.vue → src/components/general/ImageLightbox.vue

@@ -27,11 +27,8 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
 import ItemImage from './ItemImage.vue'
-import SvgArrowsOut from './svg/ArrowsOut.vue'
-import SvgClose from './svg/Close.vue'
-import ZoomViewer from './ZoomViewer.vue'
+import ZoomViewer from '../misc/ZoomViewer.vue'
 
 const props = defineProps(['alt', 'offsetTop', 'src', 'srcset', 'images', 'imageAspectRatio', 'imgClass'])
 

src/components/ImageMovable.vue → src/components/general/ImageMovable.vue

@@ -11,14 +11,13 @@
     />
     <div
         class="absolute bottom-0 right-0 h-10 w-12 border-1 border-black bg-white px-2 py-1 text-right"
-        :class="{ 'bg-red': ratioImg <= 0.75 && offsetTop != 0 }"
+        :class="{ 'bg-red': ratioImg <= 0.75 && offsetTop !== 0 }"
     >
         {{ currentOffsetTop }}
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
 import ItemImage from './ItemImage.vue'
 
 const props = defineProps(['alt', 'offsetTop', 'src', 'srcset'])

src/components/ItemImage.vue → src/components/general/ItemImage.vue

@@ -15,7 +15,6 @@
 </template>
 
 <script setup>
-import { defineProps, ref } from 'vue'
 const props = defineProps(['alt', 'offsetTop', 'src', 'srcset'])
 const isLoading = ref(true)