feat: art page adjustments

Author: KodingDev

src/components/interactive/CallToAction.svelte

@@ -12,7 +12,7 @@
   <div class="absolute inset-0">
     <!-- Picture -->
     {#if picture}
-      <Image {picture} class="h-full w-full object-cover" alt="Cover" />
+      <Image {picture} class="h-full w-full object-cover object-top" alt="Cover" />
       <div class="absolute top-0 left-0 z-[1] h-full w-full bg-gradient-to-b from-transparent to-black/60" />
     {:else}
       <!-- Cool ass gradient instead -->

src/components/interactive/Link.svelte

@@ -7,6 +7,9 @@
   export let picture: Picture | undefined = undefined;
   export let style: 'default' | 'back' = 'default';
 
+  export let picAlt = 'Logo';
+  export let picClass = 'h-11 w-11 rounded-xl';
+
   let className = '';
   // noinspection ReservedWordAsName
   export { className as class };
@@ -18,7 +21,7 @@
   {/if}
 
   {#if picture}
-    <Image width="30px" height="30px" class="h-11 w-11 rounded-xl" {picture} alt="Company Logo" />
+    <Image width="30px" height="30px" class={picClass} {picture} alt={picAlt} />
   {/if}
 
   <h1 class:group-hover:animate-pulse={style === 'back'}><slot /></h1>

src/components/layout/Header.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  export let emoji: string;
+  export let title: string;
+
+  let className = '';
+  export { className as class };
+</script>
+
+<div class="flex flex-col gap-3 {className}">
+  <p class="text-2xl font-medium"><span class="pr-4">{emoji}</span> {title}</p>
+  <h1 class="text-5xl font-bold leading-[1.8] sm:text-5xl sm:leading-[1.8]">
+    <slot />
+  </h1>
+</div>

src/components/layout/NavBar.svelte

@@ -55,7 +55,11 @@
   {#each links as link, index}
     <a class="group relative text-lg font-medium text-white opacity-75" href={link.href} bind:this={indicators[index]}>
       {link.name}
-      <div class="absolute -bottom-1 left-0 h-1 w-full rounded-full bg-transparent transition-all {isCurrent(link) ? 'group-hover:bg-primary-200/50' : ''}" />
+      <div
+        class="absolute -bottom-1 left-0 h-1 w-full rounded-full bg-transparent transition-all {!link.match.test($page.url.pathname)
+          ? 'group-hover:bg-primary-200/50'
+          : ''}"
+      />
     </a>
   {/each}
 

src/components/seo/Seo.svelte

@@ -11,6 +11,7 @@
   https://github.com/rodneylab/sveltekit-seo/blob/main/LICENSE
 -->
 <script lang="ts">
+  import { page } from '$app/stores';
   import OpenGraph from './OpenGraph.svelte';
   import Twitter from './Twitter.svelte';
 
@@ -19,7 +20,7 @@
   import website from '$lib/config/website';
 
   export let title: string;
-  export let slug: string;
+  export let slug: string = $page.url.pathname;
   export let description = '';
 
   export let ogImage: { url: string; alt: string } | undefined = undefined;
@@ -29,7 +30,7 @@
     alt: 'Compact Banner Purple',
   };
 
-  const url = `${website.siteUrl}/${slug || ''}`;
+  const url = `${website.siteUrl}${slug || ''}`;
   const pageTitle = `${title || 'Commission'} | ${website.siteTitle}`;
 
   const openGraphProps = {

src/lib/data/commissions.ts

@@ -3,17 +3,33 @@ import _ from 'lodash';
  * The featured artist data & commission.
  */
 import FeaturedArtist from '$lib/data/commissions/siomi/artist';
+import RefSheet from '$lib/data/commissions/amber/artist';
 import { importData } from '$lib/util/data';
+import type { Picture } from 'imagetools-core';
 
 /**
  * Designed to have a single file per artist, which is significantly easier to
  * organize imports for.
  */
 export interface ArtistData {
+  /**
+   * The artist's name.
+   */
   name: string;
-  avatar: string;
+
+  /**
+   * The artist's avatar.
+   */
+  avatar?: Picture;
+
+  /**
+   * A link to their website, Twitter, etc.
+   */
   link?: string;
 
+  /**
+   * The artist's commissions.
+   */
   commissions: CommissionData[];
 }
 
@@ -29,7 +45,7 @@ export interface CommissionData {
    * The images for the commission. The first image is the main image, and
    * the rest are additional images.
    */
-  images: string[];
+  images: Picture[];
 
   /**
    * Optional links to other places, such as the artist's progress Tweets
@@ -67,3 +83,4 @@ export const getArtists = async (): Promise<Record<string, ArtistData>> => {
 };
 
 export const FEATURED_ARTIST = { artist: FeaturedArtist, commission: FeaturedArtist.commissions[0] };
+export const REF_SHEET = { artist: RefSheet, commission: RefSheet.commissions[1] };

src/lib/data/commissions/ally/artist.ts

@@ -1,5 +1,5 @@
 import type { ArtistData } from '$lib/data/commissions';
-import commission2 from './images/2.png';
+import Commission2 from './images/2.png?w=256;512;1280;1920&picture';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -10,7 +10,7 @@ export default {
       slug: 'commission-2',
       title: 'Commission 2',
       description: 'A small little goober.',
-      images: [commission2],
+      images: [Commission2],
     },
   ],
-} as ArtistData;
+} satisfies ArtistData;

src/lib/data/commissions/alpha/artist.ts

@@ -1,7 +1,7 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpg';
-import commission1 from './images/1.png';
-import commission1bg from './images/1-bg.png';
+import avatar from './avatar.jpeg?w=50;100;200;300&picture';
+import Commission1 from './images/1.png?w=256;512;1280;1920&picture';
+import Commission1BG from './images/1-bg.png?w=256;512;1280;1920&picture';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -14,7 +14,7 @@ export default {
       slug: 'commission-1',
       title: 'Commission 1',
       description: 'The first commission that Alpha has made for me! Look how cute she is,,,',
-      images: [commission1, commission1bg],
+      images: [Commission1, Commission1BG],
       links: [
         {
           text: 'Finished Tweet',
@@ -23,4 +23,4 @@ export default {
       ],
     },
   ],
-} as ArtistData;
+} satisfies ArtistData;