fix: Use Sanity for pfp, update schema

elixir-api/lib/routes/cdn.ex

@@ -47,11 +47,20 @@ defmodule Router.Cdn do
 
     with true <- is_binary(url_parts.filetype),
          {:ok, url} <- Hexerei.SanityClient.urlFor(url_parts.asset, conn.query_string) do
-      with {:ok, %HTTPoison.Response{status_code: 200, body: body}} <-
+      with {:ok, %HTTPoison.Response{status_code: 200, body: body, headers: headers}} <-
              Hexerei.Env.get(:http_client, Hexerei.HTTP.DefaultClient).get(url) do
+        content_type =
+          headers
+          |> Enum.find(fn {k, _} -> String.downcase(k) == "content-type" end)
+          |> case do
+            {k, v} -> String.downcase(v)
+            # fall back to filetype from ext, if present
+            _ -> "image/#{url_parts.filetype}"
+          end
+
         conn
         |> put_resp_header("Access-Control-Allow-Origin", "*")
-        |> put_resp_content_type("image/#{url_parts.filetype}")
+        |> put_resp_content_type(content_type)
         |> send_resp(200, body)
       else
         {:ok, %HTTPoison.Response{status_code: 404}} ->

sanity-cms/schemas/settings.ts

@@ -43,6 +43,27 @@ export default {
       validation: (Rule: Rule) => Rule.required(),
       group: 'sidebar'
     },
+    {
+      name: 'image',
+      type: 'object',
+      title: 'Profile Picture',
+      validation: (Rule: Rule) => Rule.required(),
+      fields: [
+        {
+          name: 'dark',
+          type: 'image',
+          title: 'Dark Mode',
+          validation: (Rule: Rule) => Rule.required()
+        },
+        {
+          name: 'light',
+          type: 'image',
+          title: 'Light Mode',
+          validation: (Rule: Rule) => Rule.required()
+        }
+      ],
+      group: 'sidebar'
+    },
     {
       name: 'handle',
       type: 'string',

svelte-app/src/components/sidebar.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { APP_THEMES, BASE_GIT_URL, BASE_PAGE_TITLE, NAV_LINKS } from '$lib/consts';
+  import { BASE_GIT_URL, BASE_PAGE_TITLE, NAV_LINKS } from '$lib/consts';
   import { APP_VERSION } from '$lib/env';
   import { t } from '$lib/i18n';
-  import Settings from '$lib/settings';
 
   import LangToggle from '$components/controls/lang-toggle.svelte';
   import ThemeToggle from '$components/controls/theme-toggle.svelte';
@@ -12,6 +11,7 @@
   import GlobeAsiaAustraliaSmall from '$components/icons/globe-asia-australia-small.svelte';
   import BaseContainer from '$components/layouts/base-container.svelte';
   import Link from '$components/link.svelte';
+  import ProfileImage from '$components/sidebar/profile-image.svelte';
   import SidebarBlock from '$components/sidebar/sidebar-block.svelte';
   import SidebarLink from '$components/sidebar/sidebar-link.svelte';
   import ToruWidget from '$components/sidebar/toru.svelte';
@@ -31,13 +31,6 @@
   }));
 
   const name = config instanceof Error ? BASE_PAGE_TITLE : config.name;
-
-  const { theme } = Settings;
-
-  $: pfp =
-    $theme === APP_THEMES.DARK
-      ? '/assets/avi/standard_transparent.png'
-      : '/assets/avi/line_sunglasses_transparent.png';
 </script>
 
 <div
@@ -47,11 +40,7 @@
     class="order-2 flex flex-col items-start justify-start gap-y-4 p-4 lg:order-1"
   >
     <div class="flex w-full flex-shrink-0 flex-row items-center justify-start gap-x-4">
-      <img
-        class="aspect-square h-14 w-14 flex-shrink-0 select-none rounded-lg bg-neutral-300/50 p-0 dark:bg-neutral-100/50"
-        src={pfp}
-        alt="kio.dev"
-      />
+      <ProfileImage images={config.image} />
       <div class="flex select-none flex-col items-start justify-center gap-y-0.5">
         <h1
           class="text-lg font-bold text-neutral-900 transition-colors dark:text-neutral-100"

svelte-app/src/components/sidebar/profile-image.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { buildImageUrl, getCrop } from '$lib/sanity';
+  import settings from '$lib/settings';
+
+  import type { SiteConfig } from '$types';
+
+  const { theme } = settings;
+
+  export let images: SiteConfig['image'];
+
+  $: imageToUse = images[$theme] || images.dark;
+  $: crop = getCrop(imageToUse);
+  $: imageUrl = buildImageUrl({
+    ref: imageToUse.asset._ref,
+    crop,
+    width: 100,
+    format: 'webp'
+  });
+</script>
+
+<img
+  class="aspect-square h-14 w-14 flex-shrink-0 select-none rounded-lg bg-neutral-300/50 p-0 dark:bg-neutral-100/50"
+  src={imageUrl}
+  alt="kio.dev"
+/>

svelte-app/src/lib/sanity.ts

@@ -5,6 +5,7 @@ import imageUrlBuilder from '@sanity/image-url';
 import type { ImageUrlBuilder } from '@sanity/image-url/lib/types/builder';
 import type {
   FitMode,
+  ImageFormat,
   SanityClientLike,
   SanityImageObject,
   SanityImageSource
@@ -63,6 +64,7 @@ type baseBuildImageUrlOptions = {
   height?: number;
   blur?: number;
   fit?: FitMode;
+  format?: ImageFormat;
 };
 
 type buildImageUrlOptions = baseBuildImageUrlOptions &
@@ -78,7 +80,7 @@ type buildImageUrlOptions = baseBuildImageUrlOptions &
   );
 
 export const buildImageUrl = (
-  { baseUrl, ref, crop, width, height, blur, fit }: buildImageUrlOptions = {
+  { baseUrl, ref, crop, width, height, blur, fit, format }: buildImageUrlOptions = {
     baseUrl: undefined
   } as buildImageUrlOptions
 ) => {
@@ -102,5 +104,10 @@ export const buildImageUrl = (
   } else if (crop) {
     baseUrl = baseUrl.fit('crop');
   }
-  return baseUrl.auto('format').url();
+  if (format) {
+    baseUrl = baseUrl.format(format);
+  } else {
+    baseUrl = baseUrl.auto('format');
+  }
+  return baseUrl.url();
 };

svelte-app/types/app/config/index.ts

@@ -1,4 +1,9 @@
-import type { ArbitraryTypedObject, PortableTextBlock, SanityAsset } from '$types/sanity';
+import type {
+  ArbitraryTypedObject,
+  PortableTextBlock,
+  SanityAsset,
+  SanityImageObject
+} from '$types/sanity';
 
 interface ContentSection extends SanityAsset {
   title: string;
@@ -21,6 +26,10 @@ export type WorkTimelineItem = SanityAsset & {
 
 export interface SiteConfig extends SanityAsset {
   name: string;
+  image: SanityAsset & {
+    dark: SanityImageObject;
+    light: SanityImageObject;
+  };
   handle?: string;
   bio?: string;
   enableToru?: boolean;