adds ogp meta tags

web/src/routes/map/trail/[handle]/[id]/+page.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
     import { page } from "$app/state";
+    import MetaTags from "$lib/components/base/meta_tags.svelte";
     import MapWithElevationMaplibre from "$lib/components/trail/map_with_elevation_maplibre.svelte";
     import TrailInfoPanel from "$lib/components/trail/trail_info_panel.svelte";
+    import { getFileURL } from "$lib/util/file_util.js";
     import * as M from "maplibre-gl";
     import "photoswipe/style.css";
     import { _ } from "svelte-i18n";
@@ -13,9 +15,27 @@
     let markers: M.Marker[] = $state([]);
 </script>
 
-<svelte:head>
-    <title>{trail.name} | {$_("map")} | wanderer</title>
-</svelte:head>
+
+<MetaTags
+    title={`${data.trail.name} | ${$_("map")} | wanderer`}
+    openGraph={{
+        title: data.trail.name,
+        description: data.trail.description,
+        url: page.url.origin + page.url.pathname,
+        type: "article",
+        article: {
+            publishedTime: data.trail.created,
+            modifiedTime: data.trail.updated,
+            authors: [
+                `${page.url.origin}/profile/@${data.trail.expand?.author?.preferred_username ?? ""}`,
+            ],
+            tags: data.trail.expand?.tags?.map((t) => t.name),
+        },
+        images: data.trail.photos.map((p) => ({
+            url: page.url.origin + getFileURL(data.trail, p),
+        })),
+    }}
+></MetaTags>
 
 <main class="grid grid-cols-1 md:grid-cols-[458px_1fr] gap-x-1 gap-y-4">
     <div id="panel" class="hidden md:block">

web/src/routes/profile/[handle]/+layout.svelte

@@ -10,6 +10,7 @@
     import { _ } from "svelte-i18n";
     import errorDark from "$lib/assets/svgs/empty_states/error_dark.svg";
     import errorLight from "$lib/assets/svgs/empty_states/error_light.svg";
+    import MetaTags from "$lib/components/base/meta_tags.svelte";
 
     let { data, children } = $props();
 
@@ -55,6 +56,26 @@
     }
 </script>
 
+<MetaTags
+    title={`${$_("profile")} | wanderer`}
+    openGraph={{
+        title: data.profile.username,
+        description: data.profile.bio,
+        url: `${page.url.origin}/profile/@${data.profile.preferredUsername}`,
+        type: "profile",
+        profile: {
+            username: data.profile.preferredUsername,
+        },
+        images: [
+            {
+                url:
+                    data.profile.icon ||
+                    `https://api.dicebear.com/7.x/initials/svg?seed=${data.profile.preferredUsername}&backgroundType=gradientLinear`,
+            },
+        ],
+    }}
+/>
+
 <div
     class="grid grid-cols-1 md:grid-cols-[356px_minmax(0,_1fr)] gap-6 max-w-6xl mx-4 md:mx-auto items-start"
 >
@@ -69,8 +90,7 @@
                 />
                 <div>
                     <h4 class="text-2xl font-semibold col-start-2">
-                        {data.profile.username ??
-                            "?"}
+                        {data.profile.username ?? "?"}
                     </h4>
                     <p class="text-sm text-gray-500 mb-4 break-all">
                         {data.profile.acct}

web/src/routes/profile/[handle]/+page.svelte

@@ -9,9 +9,7 @@
     import { profile_timeline_index } from "$lib/stores/profile_store.js";
     import { theme } from "$lib/stores/theme_store.js";
     import { getFileURL } from "$lib/util/file_util.js";
-    import { HTML } from "@threlte/extras";
     import { _ } from "svelte-i18n";
-    import { temp } from "three/examples/jsm/nodes/Nodes.js";
 
     let { data } = $props();
 

web/src/routes/trail/view/[handle]/[id]/+page.svelte

@@ -1,13 +1,35 @@
 <script lang="ts">
     import { page } from "$app/state";
+    import MetaTags from "$lib/components/base/meta_tags.svelte";
     import TrailInfoPanel from "$lib/components/trail/trail_info_panel.svelte";
     import { trail } from "$lib/stores/trail_store";
+    import { getFileURL } from "$lib/util/file_util.js";
     import { _ } from "svelte-i18n";
 
     let { data } = $props();
 </script>
 
 {#if data.trail}
+    <MetaTags
+        title={`${data.trail.name} | ${$_("trail", { values: { n: 1 } })} | wanderer`}
+        openGraph={{
+            title: data.trail.name,
+            description: data.trail.description,
+            url: page.url.origin + page.url.pathname,
+            type: "article",
+            article: {
+                publishedTime: data.trail.created,
+                modifiedTime: data.trail.updated,
+                authors: [
+                    `${page.url.origin}/profile/@${data.trail.expand?.author?.preferred_username ?? ""}`,
+                ],
+                tags: data.trail.expand?.tags?.map((t) => t.name),
+            },
+            images: data.trail.photos.map((p) => ({
+                url: page.url.origin + getFileURL(data.trail, p),
+            })),
+        }}
+    ></MetaTags>
     <TrailInfoPanel
         activeTab={parseInt(page.url.searchParams.get("t") ?? "0")}
         initTrail={data.trail}
@@ -15,7 +37,3 @@
         handle={page.params.handle}
     ></TrailInfoPanel>
 {/if}
-<svelte:head>
-    <title>{$trail.name} | {$_("trail", { values: { n: 1 } })} | wanderer</title
-    >
-</svelte:head>