minor changes to seo

website/app.vue

@@ -8,6 +8,7 @@ useCalcViewport()
 </script>
 
 <template>
+  <NuxtLoadingIndicator />
 	<NuxtLayout>
 		<NuxtPage />
 	</NuxtLayout>
@@ -17,4 +18,8 @@ useCalcViewport()
 body {
   @apply bg-base-900 text-base-50;
 }
+
+::selection {
+  @apply bg-pink-500;
+}
 </style>

website/components/Container.vue

@@ -7,25 +7,31 @@ const props = defineProps<{
 	description?: string
 }>()
 
+const __SITE_NAME = "MyFursona"
+
+const parseTitle =
+	route.fullPath !== "/"
+		? `${props.title} - ${__SITE_NAME}`
+		: `${__SITE_NAME} - the place where every fur belongs!`
+
 useHead({
-	title: props.title,
+	title: parseTitle,
 	meta: [
 		{ name: "description", content: props.description },
-		{ property: "og:title", content: props.title },
+		{ property: "og:title", content: parseTitle },
 		{ property: "og:description", content: props.description },
 		{ property: "og:type", content: "website" },
 		{ property: "og:url", content: urlPath },
-		{ name: "twitter:title", content: props.title },
+		{ name: "twitter:title", content: parseTitle },
 		{ name: "twitter:description", content: props.description },
 		{ name: "twitter:card", content: "summary_large_image" },
-		{ name: "twitter:url", content: urlPath },
 	],
 	link: [{ rel: "canonical", href: urlPath }],
 })
 </script>
 
 <template>
-	<main>
+	<main id="app-container">
 		<slot />
 	</main>
 </template>

website/components/Landing/LandingThird.vue

@@ -29,11 +29,11 @@ onMounted(() => {
 	const container = cardContainer.value!
 
 	container.onmouseenter = () => {
-		container.classList.add("active")
+		container.classList.add("hover")
 	}
 
 	container.onmouseleave = () => {
-		container.classList.remove("active")
+		container.classList.remove("hover")
 	}
 
 	container.onmousemove = ({ clientX, clientY }: MouseEvent) => {
@@ -80,7 +80,7 @@ onMounted(() => {
 	&-container {
 		@apply my-16 grid grid-cols-1 lg:grid-cols-2 gap-6 mx-auto max-w-[1440px];
 
-		&.active > .card-item::before {
+		&.hover > .card-item::before {
 			opacity: 1;
 		}
 

website/nuxt.config.ts

@@ -26,16 +26,20 @@ export default defineNuxtConfig({
 			link: [
 				{
 					rel: "shortcut icon",
-					href: "./favicon.ico",
+					type: "image/vnd.microsoft.icon",
+					href: "/favicon.ico",
 				},
 				{
 					rel: "manifest",
-					href: "./manifest.json",
+					href: "/manifest.json",
 				},
 			],
 			meta: [
 				{ "http-equiv": "X-UA-Compatible", content: "IE=edge" },
 				{ property: "og:site:name", content: "MyFursona" },
+				// !!! This is temporary, remove this when ready for production deployment
+				{ name: "robots", content: "noindex,nofollow" },
+				// !!! This is temporary, remove this when ready for production deployment
 			],
 		},
 	},

website/pages/index.vue

@@ -3,9 +3,9 @@ const d = "MyFursona is a platform where you create and manage characters"
 </script>
 
 <template>
-	<Container title="MyFursona | A place where every fur belongs!" :description="d">
+	<Container title="" :description="d">
 		<LandingHero />
-    <LandingSecond />
-    <LandingThird />
+		<LandingSecond />
+		<LandingThird />
 	</Container>
 </template>

website/pages/login.vue

@@ -1,5 +1,5 @@
 <template>
-  <Container title="MyFursona | Login" class="login-wrapper">
+  <Container title="Login" class="login-wrapper">
     <LoginForm />
   </Container>
 </template>