Improved character pages

jobs/sync-characters/sync-characters.go

@@ -21,6 +21,7 @@ func main() {
 			Name:        kitsuCharacter.Attributes.Name,
 			Image:       kitsu.FixImageURL(kitsuCharacter.Attributes.Image.Original),
 			Description: kitsuCharacter.Attributes.Description,
+			Attributes:  []*arn.CharacterAttribute{},
 		}
 
 		// We use markdown, so replace <br/> with two line breaks.
@@ -59,6 +60,11 @@ func main() {
 
 			value = strings.TrimSpace(value)
 
+			character.Attributes = append(character.Attributes, &arn.CharacterAttribute{
+				Name:  key,
+				Value: value,
+			})
+
 			fmt.Println(color.CyanString(key), color.YellowString(value))
 		}
 

pages/character/character.pixy

@@ -1,10 +1,20 @@
 component CharacterDetails(character *arn.Character)
-	.character-header
-		.character-image-container
-			img.character-image-fullsize(src=character.Image, alt=character.Name)
-		.character-description-container
-			h1.character-name= character.Name
-			.anime-alternative-title
-				Japanese("日本語の名前無し")
-			.character-description!= markdown.Render(character.Description)
+	.character-page
+		.character-header
+			.character-image-container
+				img.character-image-fullsize(src=character.Image, alt=character.Name)
+			.character-description-container
+				h1.character-name= character.Name
+				.anime-alternative-title
+					Japanese("日本語の名前無し")
+				.character-description!= markdown.Render(character.Description)
+
+		if len(character.Attributes) > 0
+			.character-sidebar
+				h3 Information
+				table.character-attributes
+					each attribute in character.Attributes
+						tr.mountable(data-mountable-type="info")
+							td.character-attributes-name= attribute.Name + ":"
+							td.character-attributes-value= attribute.Value
 

pages/character/character.scarlet

@@ -1,3 +1,6 @@
+.character-page
+	vertical
+
 .character-header
 	vertical
 
@@ -12,10 +15,26 @@
 	margin-bottom 1rem
 
 .character-description
-	max-width 700px
 	margin-top 1.6rem
 
+.character-sidebar
+	vertical
+	margin-left 0
+	margin-top 1rem
+
+.character-attributes
+	margin 0
+
+.character-attributes-name
+	opacity 0.8
+
+.character-attributes-value
+	text-align right
+
 > 1250px
+	.character-page
+		horizontal
+
 	.character-header
 		horizontal
 
@@ -26,4 +45,13 @@
 		padding 0 content-padding
 
 	.character-description
-		margin-top typography-margin
+		margin-top typography-margin
+
+	.character-sidebar
+		margin-left content-padding
+		margin-top 0
+		min-width 270px
+
+> 1400px
+	.character-sidebar
+		min-width 300px