voidcannon: support right immersive sprite in article previews, fix image tag problems

commons: fix image tag problems

src/content/articles/playground-full/playground-full.pagex.js

@@ -18,42 +18,45 @@ export default {
         _transform: PagexResourceTransformer.MARKDOWN,
         path: "../playground/content.md"
     },
-    id: "playground-partial",
-    title: "Playground Test Article (partial)",
+    id: "playground-full",
+    title: "Playground Test Article (full theme)",
     created_at: 0,
     theme: {
         emoji_style: VoidcannonEmojiStyle.FLUENT_FLAT,
-        partial: true,
+        partial: false,
         colors: {
-            light: "#c7f718",
+            light: "#D02843",
             dark: "#c7f718",
         }
     },
     header: {
         type: VoidcannonHeaderType.IMMERSIVE,
-        layout: VoidcannonHeaderLayoutType.TEXT,
-        label: "Article Title :catsmile:",
+        layout: VoidcannonHeaderLayoutType.LOGO_LEFT,
         base: {
             _transform: PagexResourceTransformer.MEDIA,
             path: "../playground/assets/header/background.png"
         },
+        logo: {
+            _transform: PagexResourceTransformer.MEDIA,
+            path: "../playground/assets/header/logo.png"
+        },
         immersive_content: {
-            left: {
+            right: {
                 base: {
                     _transform: PagexResourceTransformer.MEDIA,
-                    path: "../playground/assets/header/immersive_left/full.png"
+                    path: "../playground/assets/header/immersive_right/full.png"
                 },
                 outer: {
                     _transform: PagexResourceTransformer.MEDIA,
-                    path: "../playground/assets/header/immersive_left/outer_v2.png"
+                    path: "../playground/assets/header/immersive_right/outer.png"
                 },
                 inner: {
                     _transform: PagexResourceTransformer.MEDIA,
-                    path: "../playground/assets/header/immersive_left/base_v2.png"
+                    path: "../playground/assets/header/immersive_right/inner.png"
                 }
             }
         },
-        color: "#c7f718"
+        color: "#D02843"
     },
     authors: [bignutty],
     collections: [

src/content/articles/playground-p3/content.md

@@ -4,7 +4,7 @@ this is sample text (p3)
 
 ## Test Articles
 - [playground](./[playground])
-- - [playground (partially themed)](./[playground-partial])
+- - [playground (full theme)](./[playground-full])
 - - [playground (no theme)](./[playground-gm3])
 - [p3](./[playground-p3])
 - [totk](./[playground-totk])

src/content/articles/playground-totk/content.md

@@ -4,7 +4,7 @@ this is sample text (totk)
 
 ## Test Articles
 - [playground](./[playground])
-- - [playground (partially themed)](./[playground-partial])
+- - [playground (full theme)](./[playground-full])
 - - [playground (no theme)](./[playground-gm3])
 - [p3](./[playground-p3])
 - [totk](./[playground-totk])

src/content/articles/playground/content.md

@@ -4,7 +4,7 @@ this is sample text (playground)
 
 ## Test Articles
 - [playground](./[playground])
-- - [playground (partially themed)](./[playground-partial])
+- - [playground (full theme)](./[playground-full])
 - - [playground (no theme)](./[playground-gm3])
 - [p3](./[playground-p3])
 - [totk](./[playground-totk])
@@ -454,8 +454,6 @@ syntax = "proto3";
 
 package bignutty.pagex;
 
-    🍋‍🟩
-
 // Represents preprocessed metadata for pagex media items.
 message PagexProcessedMedia {
   // The version of this metadata payload.
@@ -475,6 +473,116 @@ message PagexMediaAttribution {
 }
 ```
 
+```protobuf
+syntax = 'proto3';
+
+package fm.last.api;
+
+import "bignutty/api/JsField.proto";
+
+import "fm/last/api/common.proto";
+
+// Last.fm `track` service.
+service TrackService {
+  // track.getInfo
+  // Returns information about a track.
+  rpc getInfo(TrackInfoRequest) returns (TrackInfoResponse);
+}
+
+// Query parameters for a track.getInfo request.
+message TrackInfoRequest {
+  // Track name (required, unless mbid is provided).
+  optional string track = 1;
+  // Artist name (required, unless mbid is provided).
+  optional string artist = 2;
+  // MusicBrainz Recording ID.
+  optional string mbid = 3;
+
+  // User to retrieve stats for
+  optional string username = 4;
+
+  // Autocorrect tracks via corrections.
+  optional bool autocorrect = 5;
+}
+
+// A track as returned by the track.getInfo method.
+message TrackInfoResponse {
+  // An artist fragment in track.getInfo responses.
+  message PartialArtist {
+    // Canonical name of the artist.
+    string name = 1;
+    // Last.fm URL for the artist.
+    string url = 2;
+    // MusicBrainz ID for the artist.
+    optional string mbid = 3;
+  }
+
+  // An album fragment in track.getInfo responses.
+  message PartialAlbum {
+    // Canonical title of the album.
+    string title = 1;
+    // Canonical name of the album artist.
+    string artist = 2;
+    // Last.fm URL for the album.
+    string url = 3;
+    // Cover artwork for the album.
+    repeated fm.last.api.Image image = 4;
+  }
+
+  // Metadata about Last.fm site streaming.
+  message StreamingMetadata {
+    // Whether the track can be streamed.
+    bool streamable = 1 [(bignutty.api.js_field) = "#text"];
+    // Whether the full track is available for streaming.
+    bool fulltrack = 2;
+  }
+
+  // Top Tags fragment in track.getInfo responses.
+  message TopTags {
+    // Tag fragment.
+    message PartialTag {
+      // Tag Name
+      string name = 1;
+      // Last.fm URL for the tag.
+      string url = 2;
+    }
+
+    // List of top tags. (max. 5)
+    repeated PartialTag tag = 1;
+  }
+
+  // Canonical name of the track.
+  string name = 1;
+  // Last.fm URL.
+  string url = 2;
+  // Duration of the track.
+  // Will be "0" when the duration is unknown.
+  int32 duration = 3;
+
+  // Global listener count.
+  int32 listeners = 4;
+  // Global scrobble count.
+  int32 playcount = 5;
+
+  // Amount of scrobbles the user has for this track.
+  optional int32 userplaycount = 6 [(fm.last.api.requires_user)=true];
+  // Whether the user has loved the track.
+  optional bool userloved = 7 [(fm.last.api.requires_user)=true];
+
+  // Artist associated with the track.
+  PartialArtist artist = 10;
+  // Canonical album this track is featured on.
+  optional PartialAlbum album = 11;
+
+  // If the track can be streamed on last.fm.
+  StreamingMetadata streamable = 20 [deprecated=true];
+  // Top tags added by users.
+  TopTags toptags = 21;
+  // Wiki entry written by users.
+  optional fm.last.api.Wiki wiki = 22;
+}
+```
+
 ## Horizontal Rule
 
 ---

src/content/articles/playground/playground.pagex.js

@@ -25,36 +25,40 @@ export default {
     cta: "View Test Article!",
     theme: {
         emoji_style: VoidcannonEmojiStyle.FLUENT_FLAT,
+        partial: true,
         colors: {
             light: "#D02843",
-            dark: "#c7f718",
+            dark: "#D02843",
         }
     },
     header: {
         type: VoidcannonHeaderType.IMMERSIVE,
-        layout: VoidcannonHeaderLayoutType.TEXT,
-        label: "Article Title :catsmile:",
+        layout: VoidcannonHeaderLayoutType.LOGO_LEFT,
         base: {
             _transform: PagexResourceTransformer.MEDIA,
             path: "./assets/header/background.png"
         },
+        logo: {
+            _transform: PagexResourceTransformer.MEDIA,
+            path: "./assets/header/logo.png"
+        },
         immersive_content: {
-            left: {
+            right: {
                 base: {
                     _transform: PagexResourceTransformer.MEDIA,
-                    path: "./assets/header/immersive_left/full.png"
+                    path: "./assets/header/immersive_right/full.png"
                 },
                 outer: {
                     _transform: PagexResourceTransformer.MEDIA,
-                    path: "./assets/header/immersive_left/outer_v2.png"
+                    path: "./assets/header/immersive_right/outer.png"
                 },
                 inner: {
                     _transform: PagexResourceTransformer.MEDIA,
-                    path: "./assets/header/immersive_left/base_v2.png"
+                    path: "./assets/header/immersive_right/inner.png"
                 }
             }
         },
-        color: "#c7f718"
+        color: "#D02843"
     },
     authors: [bignutty],
     collections: [