Added subtitle and pretitle to content

src/graphql/operation.graphql

@@ -252,6 +252,24 @@ query getLibraryItem($slug: String, $language_code: String) {
               }
             }
           }
+          ... on ComponentMetadataMerch {
+            merch_item {
+              data {
+                attributes {
+                  slug
+                }
+              }
+            }
+          }
+          ... on ComponentMetadataOther {
+            subtype {
+              data {
+                attributes {
+                  slug
+                }
+              }
+            }
+          }
         }
         subitem_of {
           data {
@@ -326,7 +344,9 @@ query getLibraryItem($slug: String, $language_code: String) {
                     titles(
                       filters: { language: { code: { eq: $language_code } } }
                     ) {
+                      pre_title
                       title
+                      subtitle
                     }
                     text_set {
                       id

src/graphql/operations-types.ts

@@ -50,10 +50,10 @@ export enum Enum_Componentmetadatavideo_Resolution {
 }
 
 export enum Enum_Componenttranslationschronologyitem_Status {
-  Incomplete = 'Incomplete',
+  Incomplete = "Incomplete",
-  Draft = 'Draft',
+  Draft = "Draft",
-  Review = 'Review',
+  Review = "Review",
-  Done = 'Done'
+  Done = "Done",
 }
 
 // __________________________________________________________________
@@ -397,6 +397,32 @@ export type GetLibraryItemQuery = {
                 }>;
               };
             }
+          | {
+              __typename: "ComponentMetadataMerch";
+              merch_item: {
+                __typename: "MerchItemEntityResponse";
+                data: {
+                  __typename: "MerchItemEntity";
+                  attributes: {
+                    __typename: "MerchItem";
+                    slug: string;
+                  };
+                };
+              };
+            }
+          | {
+              __typename: "ComponentMetadataOther";
+              subtype: {
+                __typename: "OtherSubtypeEntityResponse";
+                data: {
+                  __typename: "OtherSubtypeEntity";
+                  attributes: {
+                    __typename: "OtherSubtype";
+                    slug: string;
+                  };
+                };
+              };
+            }
           | { __typename: "Error" }
         >;
         subitem_of: {
@@ -496,7 +522,9 @@ export type GetLibraryItemQuery = {
                     };
                     titles: Array<{
                       __typename: "ComponentTranslationsTitle";
+                      pre_title: string;
                       title: string;
+                      subtitle: string;
                     }>;
                     text_set: Array<{
                       __typename: "ComponentSetsTextSet";

src/graphql/schema.graphql

@@ -482,6 +482,16 @@ type ComponentMetadataGame {
   ): LanguageRelationResponseCollection
 }
 
+type ComponentMetadataMerch {
+  id: ID!
+  merch_item: MerchItemEntityResponse
+}
+
+type ComponentMetadataOther {
+  id: ID!
+  subtype: OtherSubtypeEntityResponse
+}
+
 enum ENUM_COMPONENTMETADATAVIDEO_RESOLUTION {
   SD_480p
   HD_720p
@@ -1398,6 +1408,7 @@ input ContentInput {
   text_set: [ComponentSetsTextSetInput]
   video_set: [ComponentSetsVideoSetInput]
   audio_set: [ComponentSetsAudioSetInput]
+  thumbnail: ID
 }
 
 type Content {
@@ -1433,6 +1444,7 @@ type Content {
     pagination: PaginationArg = {}
     sort: [String] = []
   ): [ComponentSetsAudioSet]
+  thumbnail: UploadFileEntityResponse
   createdAt: DateTime
   updatedAt: DateTime
 }
@@ -1693,6 +1705,8 @@ union LibraryItemMetadataDynamicZone =
   | ComponentMetadataVideo
   | ComponentMetadataGame
   | ComponentMetadataAudio
+  | ComponentMetadataMerch
+  | ComponentMetadataOther
   | Error
 
 scalar LibraryItemMetadataDynamicZoneInput
@@ -1830,6 +1844,74 @@ type LibraryVariantEntityResponseCollection {
   meta: ResponseCollectionMeta!
 }
 
+input MerchItemFiltersInput {
+  id: IDFilterInput
+  slug: StringFilterInput
+  createdAt: DateTimeFilterInput
+  updatedAt: DateTimeFilterInput
+  and: [MerchItemFiltersInput]
+  or: [MerchItemFiltersInput]
+  not: MerchItemFiltersInput
+}
+
+input MerchItemInput {
+  slug: String
+}
+
+type MerchItem {
+  slug: String!
+  createdAt: DateTime
+  updatedAt: DateTime
+}
+
+type MerchItemEntity {
+  id: ID
+  attributes: MerchItem
+}
+
+type MerchItemEntityResponse {
+  data: MerchItemEntity
+}
+
+type MerchItemEntityResponseCollection {
+  data: [MerchItemEntity!]!
+  meta: ResponseCollectionMeta!
+}
+
+input OtherSubtypeFiltersInput {
+  id: IDFilterInput
+  slug: StringFilterInput
+  createdAt: DateTimeFilterInput
+  updatedAt: DateTimeFilterInput
+  and: [OtherSubtypeFiltersInput]
+  or: [OtherSubtypeFiltersInput]
+  not: OtherSubtypeFiltersInput
+}
+
+input OtherSubtypeInput {
+  slug: String
+}
+
+type OtherSubtype {
+  slug: String!
+  createdAt: DateTime
+  updatedAt: DateTime
+}
+
+type OtherSubtypeEntity {
+  id: ID
+  attributes: OtherSubtype
+}
+
+type OtherSubtypeEntityResponse {
+  data: OtherSubtypeEntity
+}
+
+type OtherSubtypeEntityResponseCollection {
+  data: [OtherSubtypeEntity!]!
+  meta: ResponseCollectionMeta!
+}
+
 input PostFiltersInput {
   id: IDFilterInput
   authors: RecorderFiltersInput
@@ -2225,6 +2307,8 @@ union GenericMorph =
   | ComponentMetadataAudio
   | ComponentMetadataBooks
   | ComponentMetadataGame
+  | ComponentMetadataMerch
+  | ComponentMetadataOther
   | ComponentMetadataVideo
   | ComponentPageBuilderComponentPane
   | ComponentPageBuilderComponentTab
@@ -2270,6 +2354,8 @@ union GenericMorph =
   | Language
   | LibraryItem
   | LibraryVariant
+  | MerchItem
+  | OtherSubtype
   | Post
   | RangedContent
   | Recorder
@@ -2377,6 +2463,18 @@ type Query {
     pagination: PaginationArg = {}
     sort: [String] = []
   ): LibraryVariantEntityResponseCollection
+  merchItem(id: ID): MerchItemEntityResponse
+  merchItems(
+    filters: MerchItemFiltersInput
+    pagination: PaginationArg = {}
+    sort: [String] = []
+  ): MerchItemEntityResponseCollection
+  otherSubtype(id: ID): OtherSubtypeEntityResponse
+  otherSubtypes(
+    filters: OtherSubtypeFiltersInput
+    pagination: PaginationArg = {}
+    sort: [String] = []
+  ): OtherSubtypeEntityResponseCollection
   post(id: ID): PostEntityResponse
   posts(
     filters: PostFiltersInput
@@ -2494,6 +2592,15 @@ type Mutation {
     data: LibraryVariantInput!
   ): LibraryVariantEntityResponse
   deleteLibraryVariant(id: ID!): LibraryVariantEntityResponse
+  createMerchItem(data: MerchItemInput!): MerchItemEntityResponse
+  updateMerchItem(id: ID!, data: MerchItemInput!): MerchItemEntityResponse
+  deleteMerchItem(id: ID!): MerchItemEntityResponse
+  createOtherSubtype(data: OtherSubtypeInput!): OtherSubtypeEntityResponse
+  updateOtherSubtype(
+    id: ID!
+    data: OtherSubtypeInput!
+  ): OtherSubtypeEntityResponse
+  deleteOtherSubtype(id: ID!): OtherSubtypeEntityResponse
   createPost(data: PostInput!): PostEntityResponse
   updatePost(id: ID!, data: PostInput!): PostEntityResponse
   deletePost(id: ID!): PostEntityResponse

src/pages/library/[slug].tsx

@@ -11,6 +11,7 @@ import {
   convertMmToInch,
   getAssetURL,
   prettyDate,
+  prettyinlineTitle,
   prettyPrice,
   prettySlug,
 } from "queries/helpers";
@@ -102,10 +103,11 @@ export default function Library(props: Props): JSX.Element {
                   <Button
                     href={`/library/${item.subitem_of.data[0].attributes.slug}`}
                   >
-                    {item.subitem_of.data[0].attributes.title}
+                    {prettyinlineTitle(
-                    {item.subitem_of.data[0].attributes.subtitle
+                      "",
-                      ? ` - ${item.subitem_of.data[0].attributes.subtitle}`
+                      item.subitem_of.data[0].attributes.title,
-                      : ""}
+                      item.subitem_of.data[0].attributes.subtitle
+                    )}
                   </Button>
                 </div>
               ) : (
@@ -237,7 +239,7 @@ export default function Library(props: Props): JSX.Element {
                         <div className="grid place-content-start grid-flow-col gap-4">
                           <p className="font-bold">Type:</p>
                           <Chip>
-                            {capitalizeString(
+                            {prettySlug(
                               item.metadata[0].subtype.data.attributes.slug
                             )}
                           </Chip>
@@ -255,7 +257,7 @@ export default function Library(props: Props): JSX.Element {
 
                         <div className="grid place-content-start grid-flow-col gap-4">
                           <p className="font-bold">Page order:</p>
-                          <p>{item.metadata[0].page_order}</p>
+                          <p>{prettySlug(item.metadata[0].page_order)}</p>
                         </div>
 
                         <div className="grid place-content-start grid-flow-col gap-4">
@@ -267,6 +269,30 @@ export default function Library(props: Props): JSX.Element {
                           ))}
                         </div>
                       </>
+                    ) : item.metadata[0].__typename ===
+                      "ComponentMetadataAudio" ? (
+                      <></>
+                    ) : item.metadata[0].__typename ===
+                      "ComponentMetadataVideo" ? (
+                      <></>
+                    ) : item.metadata[0].__typename ===
+                      "ComponentMetadataGame" ? (
+                      <></>
+                    ) : item.metadata[0].__typename ===
+                      "ComponentMetadataMerch" ? (
+                      <></>
+                    ) : item.metadata[0].__typename ===
+                      "ComponentMetadataOther" ? (
+                      <>
+                        <div className="grid place-content-start grid-flow-col gap-4">
+                          <p className="font-bold">Type:</p>
+                          <Chip>
+                            {prettySlug(
+                              item.metadata[0].subtype.data.attributes.slug
+                            )}
+                          </Chip>
+                        </div>
+                      </>
                     ) : (
                       ""
                     )}
@@ -279,9 +305,9 @@ export default function Library(props: Props): JSX.Element {
           </div>
 
           {item.subitems.data.length > 0 ? (
-            <div id="subitems" className="grid place-items-center gap-8">
+            <div id="subitems" className="grid place-items-center gap-8 w-full">
               <h2 className="text-2xl">Subitems</h2>
-              <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
+              <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
                 {item.subitems.data.map((subitem) => (
                   <LibraryItemComponent key={subitem.id} item={subitem} />
                 ))}
@@ -304,9 +330,17 @@ export default function Library(props: Props): JSX.Element {
                     <div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_9em] ">
                       <a href={`#${content.attributes.slug}`}>
                         <h3>
-                          {content.attributes.content.data
+                          {content.attributes.content.data &&
-                            ? content.attributes.content.data.attributes
+                          content.attributes.content.data.attributes.titles
-                                .titles[0].title
+                            .length > 0
+                            ? prettyinlineTitle(
+                                content.attributes.content.data.attributes
+                                  .titles[0].pre_title,
+                                content.attributes.content.data.attributes
+                                  .titles[0].title,
+                                content.attributes.content.data.attributes
+                                  .titles[0].subtitle
+                              )
                             : prettySlug(content.attributes.slug, item.slug)}
                         </h3>
                       </a>
@@ -328,10 +362,10 @@ export default function Library(props: Props): JSX.Element {
                       </p>
                       {content.attributes.content.data ? (
                         <Chip className="place-self-end">
-                          {
+                          {prettySlug(
                             content.attributes.content.data.attributes.type.data
                               .attributes.slug
-                          }
+                          )}
                         </Chip>
                       ) : (
                         ""

src/queries/helpers.ts

@@ -31,10 +31,20 @@ export function prettyPrice(
 export function prettySlug(slug: string, parentSlug?: string): string {
   if (parentSlug && slug.startsWith(parentSlug))
   slug = slug.substring(parentSlug.length + 1);
-  return capitalizeString(slug.replace(new RegExp("-", 'g'), " "))
+  slug = slug.replace(new RegExp("-", 'g'), " ");
-  return slug;
+  slug = slug.replace(new RegExp("_", 'g'), " ");
+  return capitalizeString(slug)
 }
 
+export function prettyinlineTitle(pretitle:string, title: string, subtitle:string): string {
+  let result = "";
+  if (pretitle) result += pretitle + ": "
+  result += title;
+  if (subtitle) result += " - " + subtitle;
+  return result;
+}
+
+
 export function capitalizeString(string:string):string {
   function capitalizeWord(word: string): string {
     return word.charAt(0).toUpperCase() + word.substring(1);