From 5659f1b52f6f39a6f9f5b648cc85397fb53f3d9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C5=91rik=20Levente?= <levminer@levminer.com>
Date: Sun, 29 Sep 2024 15:11:44 +0200
Subject: [PATCH] Website fixes

---
 website/src/components/header.svelte        | 39 +++++++++++----------
 website/src/routes/(app)/codes/+page.svelte |  7 ++--
 website/src/routes/(web)/+page.svelte       |  6 ++--
 website/src/routes/+layout.svelte           | 13 +++++++
 4 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/website/src/components/header.svelte b/website/src/components/header.svelte
index f77191e..5d0a858 100644
--- a/website/src/components/header.svelte
+++ b/website/src/components/header.svelte
@@ -1,8 +1,3 @@
-<svelte:head>
-	<title>Authme</title>
-	<meta name="description" content="Authme - Two-factor authenticator for desktop" />
-</svelte:head>
-
 <header class="sticky top-0 z-50 bg-gray-900 text-gray-50 small:static my-5 mx-10 rounded-xl">
 	<div class="container mx-auto flex flex-col flex-wrap items-center p-5 md:flex-row">
 		<a href="/" class="space-x-2 flex items-center hover:text-gray-300 duration-200">
@@ -13,30 +8,36 @@
 		<nav class="flex flex-wrap items-center justify-center text-base md:ml-auto md:mr-auto">
 			<a href="/" class="mr-5 text-2xl duration-200 ease-in hover:text-gray-300">Home</a>
 
-			<a href="/#features" class="mr-5 text-2xl duration-200 ease-in hover:text-gray-300">Features</a
+			<a href="/#features" class="mr-5 text-2xl duration-200 ease-in hover:text-gray-300"
+				>Features</a
 			>
 
 			<a href="/#downloads" class="mr-5 text-2xl duration-200 ease-in hover:text-gray-300">
 				Downloads
 			</a>
 		</nav>
-		<a
-			target="_blank"
-			rel="noopener noreferrer"
-			class="mx-3 mt-3 md:mt-0"
-			href="https://github.com/Levminer/authme"
-		>
+		<a class="mx-3 mt-3 md:mt-0" href="/codes">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				class="h-10 w-10"
-				fill="currentColor"
-				viewBox="0 0 512 512"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="4" /><line
+					x1="21.17"
+					x2="12"
+					y1="8"
+					y2="8"
+				/><line x1="3.95" x2="8.54" y1="6.06" y2="14" /><line
+					x1="10.88"
+					x2="15.46"
+					y1="21.94"
+					y2="14"
+				/></svg
 			>
-				<title>Github Logo</title>
-				<path
-					d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"
-				/>
-			</svg>
 		</a>
 	</div>
 </header>
diff --git a/website/src/routes/(app)/codes/+page.svelte b/website/src/routes/(app)/codes/+page.svelte
index 0976ae8..87770b9 100644
--- a/website/src/routes/(app)/codes/+page.svelte
+++ b/website/src/routes/(app)/codes/+page.svelte
@@ -94,10 +94,7 @@
 </script>
 
 <div class="flex justify-center items-start">
-	<div
-		id="con"
-		class="transparent-900 p-5 hidden rounded-xl main m-auto my-20 w-[95%] text-center lg:w-2/3"
-	>
+	<div id="con" class="transparent-900 p-5 hidden rounded-xl main m-auto my-20 w-[95%] lg:w-2/3">
 		<div class="content mx-auto flex flex-row flex-wrap items-center justify-center gap-5">
 			{#if codes !== undefined}
 				{#each codes.issuers as item, i}
@@ -154,7 +151,7 @@
 		{#if noCodes}
 			<div class="flex flex-col justify-start items-start">
 				<h1 class="text-2xl">Import your 2FA codes</h1>
-				<h2 class="text-xl text-gray-200">Import your existing 2FA codes on the Import page.</h2>
+				<h2 class="text-xl text-gray-200">Import your existing 2FA codes from Authme desktop.</h2>
 				<a href="/import" class="button mt-3">Import codes</a>
 			</div>
 		{/if}
diff --git a/website/src/routes/(web)/+page.svelte b/website/src/routes/(web)/+page.svelte
index d96a428..ae2dab1 100644
--- a/website/src/routes/(web)/+page.svelte
+++ b/website/src/routes/(web)/+page.svelte
@@ -471,7 +471,7 @@
 								/>
 							</svg>
 
-							<h1 class="text-2xl font-medium">Windows Installer x64 (.exe)</h1>
+							<h1 class="text-2xl font-medium">Windows (x64)</h1>
 						</div>
 
 						<div
@@ -536,7 +536,7 @@
 							</svg>
 
 							<span class="title-font font-medium text-white">
-								<h1 class="text-2xl">Linux Installer x64 (.appimage)</h1>
+								<h1 class="text-2xl">Linux (x64)</h1>
 							</span>
 						</div>
 
@@ -605,7 +605,7 @@
 							</svg>
 
 							<span class="title-font font-medium text-white">
-								<h1 class="text-2xl">macOS Installer Universal (.dmg)</h1>
+								<h1 class="text-2xl">macOS (Universal)</h1>
 							</span>
 						</div>
 
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
index 0ace866..c06c555 100644
--- a/website/src/routes/+layout.svelte
+++ b/website/src/routes/+layout.svelte
@@ -3,3 +3,16 @@
 </script>
 
 <slot />
+
+<svelte:head>
+	<title>Authme</title>
+	<meta name="description" content="Authme - Two-factor authenticator for desktop" />
+	<meta property="og:title" content="Authme - Two-factor authenticator for desktop" />
+	<meta property="og:image" content="https://www.levminer.com/og.png" />
+	<meta property="og:type" content="website" />
+	<meta
+		property="og:description"
+		content="Authme - Two-factor authenticator for desktop - See your 2FA codes on your desktop."
+	/>
+	<meta property="og:locale" content="en_US" />
+</svelte:head>