style: 🌈 add home page for ci

src/ui/App.vue

@@ -4,6 +4,10 @@
 
 <script lang="ts" setup>
 import { useMainStore } from './store'
+import { useAppTheme } from '@/hooks'
+
+const { setTheme } = useAppTheme()
+setTheme()
 
 const mainStore = useMainStore()
 mainStore.mode === 'static' &&

src/ui/components/feature/TabDetails.vue

@@ -32,7 +32,7 @@ onMounted(async () => {
 .wrapper {
   flex: 1 1 auto;
   display: grid;
-  grid-template-columns: minmax(18rem, 2fr) minmax(0, 9fr);
+  grid-template-columns: minmax(20rem, 1fr) minmax(0, 4fr);
   column-gap: 2rem;
 }
 </style>

src/ui/components/feature/TabDetailsGeneral.vue

@@ -4,7 +4,7 @@
       v-loading="mainStore.isLoadingReport"
       class="general-wrapper"
     >
-      <template v-if="mainStore.mode === 'ci'">
+      <template v-if="mainStore.mode === 'ci' && !isEmpty($route.query)">
         <h4>Github Repository</h4>
         <div class="general-wrapper__cell">
           <img
@@ -202,6 +202,10 @@ const browser = computed(() => {
     mainStore.report?.browserName.toLowerCase().includes(key)
   )
 })
+
+function isEmpty(obj: Record<any, any>) {
+  return Object.keys(obj).length === 0
+}
 </script>
 
 <style scoped>
@@ -222,10 +226,6 @@ const browser = computed(() => {
   min-width: 30rem;
 }
 
-.general-wrapper a {
-  color: var(--color-primary);
-}
-
 .general-wrapper > h4:not(:first-child) {
   margin-top: 3rem;
 }

src/ui/pages/PageDetails.vue

@@ -147,17 +147,13 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 
 import { useMainStore } from '@/store'
 import { TabValue } from '@/types'
-import { useAppTheme } from '@/hooks'
 import { WorkflowInstance } from '@commonTypes'
 
 dayjs.extend(relativeTime)
 
 const mainStore = useMainStore()
-const { setTheme } = useAppTheme()
 const activeTab = ref<keyof typeof TabValue>('Details')
 
-setTheme()
-
 const route = useRoute()
 mainStore.fetchReport(route.query as unknown as WorkflowInstance)
 

src/ui/pages/PageHome.vue

@@ -0,0 +1,69 @@
+<template>
+  <main class="main-wrapper">
+    <img
+      style="height: 12rem"
+      src="@/assets/images/cypress-image-diff-logo.png"
+    />
+
+    <h1 style="font-weight: bold">Cypress Image Diff HTML Report</h1>
+
+    <p>
+      An intuitive HTML report that provides a comprehensive overview of visual
+      differences, empowering your team to quickly identify and resolve any UI
+      inconsistencies.
+    </p>
+
+    <p>
+      Take control of your web testing process and elevate your development
+      workflow with the
+      <a href="https://cypress.visual-image-diff.dev/getting-started">
+        cypress-image-diff</a
+      >.
+    </p>
+
+    <p>
+      If you encounter any problems, please report them
+      <a href="https://github.com/kien-ht/cypress-image-diff-html-report/issues"
+        >here</a
+      >.
+    </p>
+  </main>
+
+  <footer class="footer">
+    <a href="https://github.com/uktrade/cypress-image-diff">
+      <img src="@/assets/images/github.png" />
+      <span>Github</span>
+    </a>
+  </footer>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped>
+.main-wrapper {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  max-width: 60rem;
+  padding: 2rem;
+  text-align: center;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.footer > * {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+</style>

src/ui/router/index.ts

@@ -3,17 +3,25 @@ import {
   createWebHistory,
   createWebHashHistory
 } from 'vue-router'
-import { routes } from './routes'
+import { localRoutes, ciRoutes } from './routes'
 
-const router = createRouter({
-  history:
-    window.__injectedData__.mode === 'ci'
-      ? createWebHistory()
-      : createWebHashHistory(),
-  scrollBehavior() {
-    return { top: 0 }
-  },
-  routes
-})
+const routerOptions =
+  window.__injectedData__.mode === 'ci'
+    ? {
+        history: createWebHistory(),
+        routes: ciRoutes,
+        scrollBehavior() {
+          return { top: 0 }
+        }
+      }
+    : {
+        history: createWebHashHistory(),
+        routes: localRoutes,
+        scrollBehavior() {
+          return { top: 0 }
+        }
+      }
+
+const router = createRouter(routerOptions)
 
 export default router

src/ui/router/routes.ts

@@ -1,12 +1,27 @@
 import type { RouteRecordRaw } from 'vue-router'
 
-import PageDetails from '@/pages/PageDetails.vue'
+export const ciRoutes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'PageHome',
+    component: () => import('@/pages/PageHome.vue')
+  },
+  {
+    path: '/details',
+    name: 'PageDetails',
+    component: () => import('@/pages/PageDetails.vue')
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: { name: 'PageHome' }
+  }
+]
 
-export const routes: RouteRecordRaw[] = [
+export const localRoutes: RouteRecordRaw[] = [
   {
     path: '/details',
     name: 'PageDetails',
-    component: PageDetails
+    component: () => import('@/pages/PageDetails.vue')
   },
   {
     path: '/:pathMatch(.*)*',

src/ui/styles/global.css

@@ -81,3 +81,7 @@
   overflow: auto;
   margin: auto;
 }
+
+a {
+  color: var(--color-primary);
+}