SEO Optimization

src/routes/featured/+page.svelte

@@ -51,3 +51,11 @@
     />
   {/each}
 </div>
+
+<svelte:head>
+  <title>Featured Adventures | AdventureLog</title>
+  <meta
+    name="description"
+    content="Featured Adventure Locations from around the world. Add them to your visited list!"
+  />
+</svelte:head>

src/routes/log/+page.svelte

@@ -117,7 +117,7 @@
         console.log("Success:", data);
         // update local array with new data
         adventures = adventures.map((adventure) =>
-          adventure.id === event.detail.id ? event.detail : adventure,
+          adventure.id === event.detail.id ? event.detail : adventure
         );
         editId = NaN;
         editName = "";
@@ -132,7 +132,7 @@
 
   function editAdventure(event: { detail: number }) {
     const adventure = adventures.find(
-      (adventure) => adventure.id === event.detail,
+      (adventure) => adventure.id === event.detail
     );
     if (adventure) {
       editId = adventure.id;
@@ -206,7 +206,7 @@
         console.log("Success:", data);
         // remove adventure from array where id matches
         adventures = adventures.filter(
-          (adventure) => adventure.id !== event.detail,
+          (adventure) => adventure.id !== event.detail
         );
         showToast("Adventure removed successfully!");
         visitCount.update((n) => n - 1);
@@ -312,3 +312,11 @@
     </button>
   </div>
 {/if}
+
+<svelte:head>
+  <title>My Log | AdventureLog</title>
+  <meta
+    name="description"
+    content="Displays the user's visited adventure locations."
+  />
+</svelte:head>

src/routes/login/+page.svelte

@@ -68,3 +68,11 @@
     <!-- <footer class="text-sm">- Steve Jobs</footer> -->
   </blockquote>
 </div>
+
+<svelte:head>
+  <title>Login | AdventureLog</title>
+  <meta
+    name="description"
+    content="Login to your AdventureLog account to start logging your adventures!"
+  />
+</svelte:head>

src/routes/settings/+page.svelte

@@ -70,3 +70,11 @@
 <small class="text-center"
   ><b>For Debug Use:</b> UUID={user_id} Signup Date={signup_date} Role={role}</small
 >
+
+<svelte:head>
+  <title>User Settings | AdventureLog</title>
+  <meta
+    name="description"
+    content="Update your user account settings here. Change your username, first name, last name, and profile icon."
+  />
+</svelte:head>

src/routes/setup/+page.server.ts

@@ -84,17 +84,17 @@ export const actions: Actions = {
     }
 
     let adminUser = await db
-  .select()
-  .from(userTable)
-  .where(eq(userTable.role, 'admin'))
-  .execute();
+      .select()
+      .from(userTable)
+      .where(eq(userTable.role, "admin"))
+      .execute();
 
     if (adminUser != null && adminUser.length > 0) {
       return fail(400, {
         message: "Admin user already exists",
       });
     }
-    
+
     await db
       .insert(userTable)
       .values({

src/routes/setup/+page.svelte

@@ -1,44 +1,52 @@
 <script lang="ts">
-    import { enhance } from "$app/forms";
+  import { enhance } from "$app/forms";
 </script>
 
 <h1 class="text-center font-bold text-4xl">AdventureLog Setup</h1>
 
 <!-- centered text descripton welcomeing the user -->
 <p class="text-center mt-4">
-    Welcome to AdventureLog! Please follow the steps below to setup your server.
+  Welcome to AdventureLog! Please follow the steps below to setup your server.
 </p>
 
 <!-- step 1 create admin user -->
 <h2 class="text-center font-bold text-2xl mt-6">Create Admin User</h2>
 
 <div class="flex justify-center">
-    <form method="post" use:enhance class="w-full max-w-xs">
-        <label for="username">Username</label>
-        <input
-            name="username"
-            id="username"
-            class="block mb-2 input input-bordered w-full max-w-xs"
-        /><br />
-        <label for="first_name">First Name</label>
-        <input
-            name="first_name"
-            id="first_name"
-            class="block mb-2 input input-bordered w-full max-w-xs"
-        /><br />
-        <label for="last_name">Last Name</label>
-        <input
-            name="last_name"
-            id="last_name"
-            class="block mb-2 input input-bordered w-full max-w-xs"
-        /><br />
-        <label for="password">Password</label>
-        <input
-            type="password"
-            name="password"
-            id="password"
-            class="block mb-2 input input-bordered w-full max-w-xs"
-        /><br />
-        <button class="py-2 px-4 btn btn-primary">Signup</button>
-    </form>
+  <form method="post" use:enhance class="w-full max-w-xs">
+    <label for="username">Username</label>
+    <input
+      name="username"
+      id="username"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <label for="first_name">First Name</label>
+    <input
+      name="first_name"
+      id="first_name"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <label for="last_name">Last Name</label>
+    <input
+      name="last_name"
+      id="last_name"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <label for="password">Password</label>
+    <input
+      type="password"
+      name="password"
+      id="password"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <button class="py-2 px-4 btn btn-primary">Signup</button>
+  </form>
 </div>
+
+<svelte:head>
+  <title>Setup | AdventureLog</title>
+  <meta
+    name="description"
+    content="Setup AdventureLog with your admin account"
+  />
+</svelte:head>;

src/routes/shared/[key]/+page.svelte

@@ -29,3 +29,11 @@
     />
   {/each}
 </div>
+
+<svelte:head>
+  <title>Shared List by {data.name} | AdventureLog</title>
+  <meta
+    name="description"
+    content="Shared Adventure List from around the world. Add them to your visited list!"
+  />
+</svelte:head>

src/routes/signup/+page.svelte

@@ -54,3 +54,11 @@
 </div>
 
 <!-- username first last pass -->
+
+<svelte:head>
+  <title>Signup | AdventureLog</title>
+  <meta
+    name="description"
+    content="Signup for AdventureLog to start logging your adventures!"
+  />
+</svelte:head>;

src/routes/worldtravel/+page.svelte

@@ -1,27 +1,35 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import { getFlag } from "$lib";
-    import AdventureCard from "$lib/components/AdventureCard.svelte";
+  import { goto } from "$app/navigation";
+  import { getFlag } from "$lib";
+  import AdventureCard from "$lib/components/AdventureCard.svelte";
 
-    export let data: any;
+  export let data: any;
 
-    async function nav(loc: string) {
-        goto(`/worldtravel/${loc}`);
-    }
+  async function nav(loc: string) {
+    goto(`/worldtravel/${loc}`);
+  }
 </script>
 
 <h1 class="text-center font-bold text-4xl mb-4">Country List</h1>
 
 {#each data.response as item}
-    <button
-        class="btn btn-primary mr-4 mb-2"
-        on:click={() => nav(item.country_code)}
-        >{item.name}
-        <img
-            src={getFlag(24, item.country_code)}
-            class="inline-block -mt-1 mr-1"
-            alt="Flag"
-        /></button
-    >
-    <!-- <p>Name: {item.name}, Continent: {item.continent}</p> -->
+  <button
+    class="btn btn-primary mr-4 mb-2"
+    on:click={() => nav(item.country_code)}
+    >{item.name}
+    <img
+      src={getFlag(24, item.country_code)}
+      class="inline-block -mt-1 mr-1"
+      alt="Flag"
+    /></button
+  >
+  <!-- <p>Name: {item.name}, Continent: {item.continent}</p> -->
 {/each}
+
+<svelte:head>
+  <title>WorldTravel | AdventureLog</title>
+  <meta
+    name="description"
+    content="Explore the world and add countries to your visited list!"
+  />
+</svelte:head>;

src/routes/worldtravel/[countrycode]/+page.svelte

@@ -1,109 +1,119 @@
 <script lang="ts">
-    export let data;
-    import AdventureCard from "$lib/components/AdventureCard.svelte";
-    import { countryCodeToName } from "$lib";
-    import { getFlag } from "$lib";
-    import { goto } from "$app/navigation";
-    import { onMount } from "svelte";
-    import Us from "$lib/components/maps/US.svelte";
+  export let data;
+  import AdventureCard from "$lib/components/AdventureCard.svelte";
+  import { countryCodeToName } from "$lib";
+  import { getFlag } from "$lib";
+  import { goto } from "$app/navigation";
+  import { onMount } from "svelte";
+  import Us from "$lib/components/maps/US.svelte";
 
-    let viewType: String = "cards";
+  let viewType: String = "cards";
 
-    function markVisited(event: { detail: string }) {
-        console.log(`Marked ${event.detail} as visited`);
-        fetch("/api/regionvisit", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                region_id: event.detail,
-                country_code: data.countrycode,
-            }),
-        }).then((response) => {
-            if (response.status === 401) {
-                goto("/login");
-            }
-            return response.json();
-        });
-    }
-
-    function removeVisit(event: { detail: string }) {
-        console.log(`Removed visit to ${event.detail}`);
-        fetch("/api/regionvisit", {
-            method: "DELETE",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                region_id: event.detail,
-            }),
-        }).then((response) => {
-            if (response.status === 401) {
-                goto("/login");
-            }
-            return response.json();
-        });
-    }
-
-    function setViewType(type: String) {
-        viewType = type;
-    }
-
-    onMount(() => {
-        console.log(data.visitedRegions);
+  function markVisited(event: { detail: string }) {
+    console.log(`Marked ${event.detail} as visited`);
+    fetch("/api/regionvisit", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        region_id: event.detail,
+        country_code: data.countrycode,
+      }),
+    }).then((response) => {
+      if (response.status === 401) {
+        goto("/login");
+      }
+      return response.json();
     });
+  }
+
+  function removeVisit(event: { detail: string }) {
+    console.log(`Removed visit to ${event.detail}`);
+    fetch("/api/regionvisit", {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        region_id: event.detail,
+      }),
+    }).then((response) => {
+      if (response.status === 401) {
+        goto("/login");
+      }
+      return response.json();
+    });
+  }
+
+  function setViewType(type: String) {
+    viewType = type;
+  }
+
+  onMount(() => {
+    console.log(data.visitedRegions);
+  });
 </script>
 
 <h1 class="text-center text-4xl font-bold">
-    Regions in {countryCodeToName(data.countrycode)}
-    <img
-        src={getFlag(40, data.countrycode)}
-        class="inline-block -mt-1 mr-1"
-        alt="Flag"
-    />
+  Regions in {countryCodeToName(data.countrycode)}
+  <img
+    src={getFlag(40, data.countrycode)}
+    class="inline-block -mt-1 mr-1"
+    alt="Flag"
+  />
 </h1>
 
 <div class="join items-center justify-center flex">
-    <input
-        class="join-item btn btn-neutral"
-        type="radio"
-        name="viewtype"
-        checked
-        aria-label="Cards"
-        on:click={() => setViewType("cards")}
-    />
-    <input
-        class="join-item btn btn-neutral"
-        type="radio"
-        name="viewtype"
-        aria-label="Map"
-        on:click={() => setViewType("map")}
-    />
+  <input
+    class="join-item btn btn-neutral"
+    type="radio"
+    name="viewtype"
+    checked
+    aria-label="Cards"
+    on:click={() => setViewType("cards")}
+  />
+  <input
+    class="join-item btn btn-neutral"
+    type="radio"
+    name="viewtype"
+    aria-label="Map"
+    on:click={() => setViewType("map")}
+  />
 </div>
 
 {#if viewType == "cards"}
-    <div
-        class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
-    >
-        {#each data.regions as region (region.id)}
-            <AdventureCard
-                type="worldtravelregion"
-                countryCode={data.countrycode}
-                regionId={region.id}
-                name={region.name}
-                on:markVisited={markVisited}
-                visited={data.visitedRegions.some(
-                    (visitedRegion) => visitedRegion.region_id === region.id,
-                )}
-                on:removeVisit={removeVisit}
-            />
-        {/each}
-    </div>
+  <div
+    class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
+  >
+    {#each data.regions as region (region.id)}
+      <AdventureCard
+        type="worldtravelregion"
+        countryCode={data.countrycode}
+        regionId={region.id}
+        name={region.name}
+        on:markVisited={markVisited}
+        visited={data.visitedRegions.some(
+          (visitedRegion) => visitedRegion.region_id === region.id
+        )}
+        on:removeVisit={removeVisit}
+      />
+    {/each}
+  </div>
 {/if}
 
 {#if viewType == "map"}
-    {#if data.countrycode.toLowerCase() == "us"}
-        <Us on:marked={markVisited} />
-    {/if}
+  {#if data.countrycode.toLowerCase() == "us"}
+    <Us on:marked={markVisited} />
+  {/if}
 {/if}
+
+<svelte:head>
+  <title>{countryCodeToName(data.countrycode)} Regions | AdventureLog</title>
+  <meta
+    name="description"
+    content="Explore the regions in {countryCodeToName(
+      data.countrycode
+    )} and add them to your visited list!"
+  />
+</svelte:head>

static/robots.txt

@@ -0,0 +1,10 @@
+User-agent: *
+Allow: /
+
+# Google adsbot ignores robots.txt unless specifically named!
+User-agent: AdsBot-Google
+Allow: /
+
+
+User-agent: GPTBot
+Disallow: /