set titles for socials

src/app.html

@@ -48,8 +48,6 @@
     <script src="//code.tidio.co/9o9hpvuj5fqc7gu1vhialdrpp7buweu2.js" async></script>
     -->
 
-    <title>comma.ai — make driving chill</title>
-
     <!-- Google SEO -->
     <script type="application/ld+json">
     {
@@ -67,8 +65,6 @@
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://comma.ai/" />
-    <meta property="og:title" content="comma.ai — make driving chill" />
     <meta property="og:description" content="An AI upgrade for your car" />
     <meta property="og:image" content="https://comma.ai/og-comma-four.png" />
     <meta property="og:image:width" content="1200" />
@@ -77,7 +73,6 @@
     <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@comma_ai" />
-    <meta name="twitter:title" content="comma.ai — make driving chill" />
     <meta name="twitter:description" content="An AI upgrade for your car" />
     <meta name="twitter:image" content="https://comma.ai/og-comma-four.png" />
     <meta name="twitter:image:alt" content="comma four" />

src/lib/components/PageHead.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let title;
+  export let description = undefined;
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+  <meta property="og:title" content={title} />
+  <meta name="twitter:title" content={title} />
+  {#if description}
+    <meta name="description" content={description} />
+    <meta property="og:description" content={description} />
+    <meta name="twitter:description" content={description} />
+  {/if}
+</svelte:head>

src/routes/+layout.svelte

@@ -35,6 +35,11 @@
   import { onMount } from "svelte";
   import { page } from "$app/stores";
 
+  import PageHead from "$lib/components/PageHead.svelte";
+
+  const DEFAULT_TITLE = "comma.ai — make driving chill";
+  const SITE_ORIGIN = "https://comma.ai";
+
   let loading = false;
 
   async function openCart() {
@@ -83,7 +88,13 @@
   printConsoleBanner();
 </script>
 
+<PageHead
+  title={$page.data?.pageTitle ?? DEFAULT_TITLE}
+  description={$page.data?.pageDescription}
+/>
+
 <svelte:head>
+  <meta property="og:url" content="{SITE_ORIGIN}{$page.url.pathname}" />
   <link
     rel="preload"
     href={MonumentExtendedBlack}

src/routes/jobs/+page.js

@@ -0,0 +1,7 @@
+export function load() {
+  return {
+    pageTitle: "Jobs - comma",
+    pageDescription:
+      "At comma.ai, we are solving self-driving cars while delivering shippable intermediaries.",
+  };
+}

src/routes/jobs/+page.svelte

@@ -332,14 +332,6 @@
   }
 </script>
 
-<svelte:head>
-  <title>Jobs - comma</title>
-  <meta
-    name="description"
-    content="At comma.ai, we are solving self-driving cars while delivering shippable intermediaries."
-  />
-</svelte:head>
-
 <div class="jobs-page light">
   <section class="jobs-hero" aria-labelledby="jobs-title">
     <div class="container">

src/routes/shop/[product]/+page.js

@@ -50,7 +50,8 @@ export async function load({ url, params }) {
           ...productInfo,
           images: resolvedImages
         },
-        descriptionComponent
+        descriptionComponent,
+        pageTitle: `${product.title} — comma shop`,
       };
     }
     throw error(404, {

src/routes/shop/[product]/+page.svelte

@@ -6,10 +6,6 @@
   $: ({ product, descriptionComponent } = data);
 </script>
 
-<svelte:head>
-  <title>{product.title} — comma shop</title>
-</svelte:head>
-
 <section class="light" id="product-item">
   <div class="container">
     {#if descriptionComponent}

src/routes/shop/comma-four-trade-in/+page.js

@@ -0,0 +1,5 @@
+export function load() {
+  return {
+    pageTitle: "comma four trade-in — comma shop",
+  };
+}

src/routes/shop/comma-four-trade-in/+page.svelte

@@ -1,10 +1,6 @@
 <script>
 </script>
 
-<svelte:head>
-  <title>comma four trade-in — comma shop</title>
-</svelte:head>
-
 <section class="light" id="trade-in">
   <div class="container">
     <h1>comma four trade-in</h1>