Profile head elements will require a refactor

Ignoring for now as Astro is likely the better fit

apps/web/src/lib/components/shared/SEO.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  /**
+   * TODO This will be moved to SvelteKit layout
+   * See notes in [ein]/+page.svelte
+   */
+  import type { GrantmakersExtractedDataObj } from '@shared/typings/grantmakers/grants';
+
+  type Title = GrantmakersExtractedDataObj['organization_name'];
+  type Description = Pick<GrantmakersExtractedDataObj, 'organization_name' | 'city' | 'state' | 'ein' | 'filings'>;
+
+  export let profile: GrantmakersExtractedDataObj;
+
+  const { organization_name, city, state, ein, filings } = profile;
+  const title = createTitle(organization_name);
+  const description = createDescription({ organization_name, city, state, ein, filings });
+
+  function createTitle(organization_name: Title): string {
+    return `Grantmakers.io Profile - ${organization_name}`;
+  }
+
+  function createDescription({ organization_name, city, state, ein, filings }: Description): string {
+    const firstTaxYear = filings[0].tax_year;
+    const stringifiedTaxYr = firstTaxYear.toString();
+    const description = `Profile for ${organization_name} (${city}, ${state} - EIN ${ein}) including grantees and board members as of ${stringifiedTaxYr} tax year.`;
+    return description;
+  }
+
+  // console.log('Post-Hydration Page Title:', title);
+  // console.log('Post-Hydration Page Description:', description);
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+  <meta name="description" content={description} />
+</svelte:head>

apps/web/src/routes/profiles/v1/[ein]/+layout.svelte

@@ -1,20 +1,12 @@
 <script lang="ts">
+  /**
+   * Layouts in SvelteKit inherit parent layouts
+   * See notes in [ein]/+page.svelte re: moving to SvelteKit Advance Routing groups
+   */
   import '@fontsource/open-sans';
   import '../../../../app.pcss';
-
-  export let title: string = 'Default Title';
-  export let description: string = 'Default Description';
-  console.log('Layout title:', title);
-  console.log('Layout description', description);
 </script>
 
-<svelte:head>
-  <title>{title}</title>
-  {#if description}
-    <meta name="description" content={description} />
-  {/if}
-</svelte:head>
-
 <slot />
 
 <style>

apps/web/src/routes/profiles/v1/[ein]/+page.server.ts

@@ -1,18 +1,12 @@
 import type { PageServerLoad } from './$types';
 import type { GrantmakersExtractedDataObj } from '@shared/typings/grantmakers/grants';
 import { WORKER_URL, PROFILES_API_ENDPOINT, AUTH_PRIVATE_KEY, WAF_AUTH_VERIFY_KEY } from '$env/static/private';
-import { meta } from '@utils/trustedConstants';
-
-const {
-  defaults: { title, description },
-} = meta;
 
 export const load: PageServerLoad = async ({ params, fetch }) => {
   const ein = params.ein;
   const fetchProfile = async (ein: string): Promise<GrantmakersExtractedDataObj> => {
     const url = WORKER_URL + PROFILES_API_ENDPOINT + '/';
-    console.log('Constructed R2 fetch URL:', url + ein);
-    console.log('Fetching Profile for EIN:', ein);
+    console.log(`Fetching profile for ${ein} ata ${url + ein}`);
 
     try {
       const workerResponse = await fetch(url + ein, {
@@ -37,24 +31,8 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
   };
 
   const profile = fetchProfile(ein);
-  console.log('EIN:', params.ein);
-  // console.log('Profile data:', data); // This works
-
-  // const images = import.meta.glob('../../../../lib/assets/images/icons-letters/svg/**/*.svg');
-  // console.log(images);
-  // const fetchImage = images[`../../../../lib/assets/images/icons-letters/svg/${firstLetter}.svg`];
-  // const image = await fetchImage();
-  // if (!image) throw error(404, 'Not found');
-  // console.log('Target image:', image);
-
-  // Prefetch the image on the server
-  // await fetch(`../../../../lib/assets/images/icons-letters/svg/${firstLetter}.svg`);
 
-  console.log('Server title:', title);
-  console.log('Server Description:', description);
   return {
     foundationData: { profile },
-    title,
-    description,
   };
 };

apps/web/src/routes/profiles/v1/[ein]/+page.svelte

@@ -2,27 +2,30 @@
   /**
    * For future portability, limit imports to a single Svelte component and a SvelteKit Layout
    * Svelte components can easily be moved (e.g. to Astro), but not SvelteKit-specific page and layouts
+   *
+   * TODO This needs to be refactored
+   * 1) #await-ing the profile data is an anti-pattern in SvelteKit
+   * 2) Layouts in SvelteKit inherit parent layouts - this causes SEO issues with title and description
+   *    - The result is a duplicate meta description and an unknown version of the title available for crawlers
+   *    - Consider using SvelteKit Advanced Routing group, e.g. (profiles) and (landing)
    */
   import Layout from './+layout.svelte';
   import type { PageData } from './$types.js';
+  import SEO from '$lib/components/shared/SEO.svelte';
   import Profile from '$lib/components/profiles/Profile.svelte';
 
   export let data: PageData;
   let {
     foundationData: { profile },
-    title,
-    description,
   } = data;
-  console.log('Page Title:', title);
-  console.log('Page Description:', description);
 </script>
 
-<!-- TODO: The description error likely occurs here -->
-<Layout {title} {description}>
-  <!-- TODO Improve or remove awaiting state -->
+<Layout>
+  <!-- TODO The #await will be refactored: see note above -->
   {#await profile}
     <p class="bg-white text-white">Loading...</p>
   {:then profile}
+    <SEO {profile} />
     <Profile {profile} />
   {:catch error}
     <p>Error loading profile data: {error.message}</p>