Display translators alongside authors

src/components/AuthorInfo.jsx

@@ -7,7 +7,7 @@ import style from './AuthorInfo.module.scss';
 
 const cx = classnames.bind(style);
 
-const AuthorInfo = ({author: {fullname, refs = []}}) => {
+const AuthorInfo = ({author: {fullname, refs = [], role}}) => {
   const [info, setInfo] = useState(null);
 
   const wikidataRef = refs.find((r) => r.type === 'wikidata');
@@ -64,8 +64,10 @@ const AuthorInfo = ({author: {fullname, refs = []}}) => {
 
   const {name, imageUrl, commonsPage, birth = [], death = []} = info || {};
 
+  const isTranslator = role === 'translator';
+
   return (
-    <div className={cx('main')}>
+    <div className={cx('main', {'is-translator': isTranslator})}>
       <div className={cx('image')}>
         {imageUrl && <img src={imageUrl} title={name} alt="" />}
         {commonsPage && (
@@ -77,6 +79,7 @@ const AuthorInfo = ({author: {fullname, refs = []}}) => {
             />
           </a>
         )}
+        {isTranslator && <span className={cx('role-badge')}>Translator</span>}
       </div>
       <span>
         <h4>{fullname}</h4>

src/components/AuthorInfo.module.scss

@@ -16,6 +16,32 @@
   }
 }
 
+.is-translator > span {
+  opacity: 0.8;
+}
+
+.role-badge {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 1.3em;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.65);
+  color: var(--background-light);
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-size: 0.63em;
+  font-weight: 500;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  opacity: 0.7;
+  padding: 1px;
+}
+
 .image {
   position: relative;
   height: 6em;

src/components/Corpus.jsx

@@ -32,6 +32,10 @@ const Corpus = () => {
             d.authors = [];
             d.authorNames = 'Anonymous';
           }
+          d.translators = (d.editors || []).filter(
+            (e) => e.role === 'translator'
+          );
+          d.translatorNames = d.translators.map((t) => t.name).join(' · ');
         });
         setCorpus(response.data);
         setLoading(false);

src/components/CorpusIndex.jsx

@@ -42,6 +42,12 @@ function formatAuthor(authorNames, d) {
           </span>
         ))}
       </small>
+      {d.translators && d.translators.length > 0 && (
+        <>
+          <br />
+          <small className="translators">transl. {d.translatorNames}</small>
+        </>
+      )}
     </span>
   );
 }
@@ -135,17 +141,23 @@ const CorpusIndex = ({data}) => {
       dataField: 'authorNames',
       text: 'Authors',
       sort: true,
-      filterValue: (cell, row) =>
-        `${cell} ${row.authors
-          .map((a) => {
-            const refs = a.refs ? a.refs.map((r) => r.ref).join(' ') : '';
-            let value = refs;
-            if (a.alsoKnownAs) {
-              value += a.alsoKnownAs.join(' ');
-            }
-            return value;
-          })
-          .join(' ')} `,
+      filterValue: (cell, row) => {
+        const buildTokens = (people) =>
+          people
+            .map((a) => {
+              const refs = a.refs ? a.refs.map((r) => r.ref).join(' ') : '';
+              let value = refs;
+              if (a.alsoKnownAs) {
+                value += a.alsoKnownAs.join(' ');
+              }
+              return value;
+            })
+            .join(' ');
+        return (
+          `${cell} ${buildTokens(row.authors)} ` +
+          `${row.translatorNames || ''} ${buildTokens(row.translators || [])} `
+        );
+      },
       formatter: formatAuthor,
     },
     {

src/components/CorpusIndex.scss

@@ -2,6 +2,11 @@ table.table.corpus {
   table-layout: auto;
 }
 
+.translators {
+  color: var(--gray, #6c757d);
+  font-style: italic;
+}
+
 .year-details {
   font-size: 60%;
   white-space: nowrap;

src/components/PlayDetailsHeader.jsx

@@ -16,6 +16,7 @@ const PlayDetailsHeader = ({play, children}) => {
   const {
     id,
     authors,
+    editors = [],
     corpus,
     title,
     subtitle,
@@ -25,6 +26,8 @@ const PlayDetailsHeader = ({play, children}) => {
     yearWritten,
   } = play;
 
+  const translators = editors.filter((e) => e.role === 'translator');
+
   const {corpora} = useContext(DracorContext);
   const {acronym} = corpora.find((c) => c.name === corpus) || {};
 
@@ -67,7 +70,10 @@ const PlayDetailsHeader = ({play, children}) => {
         </div>
         <div className={cx('authors')}>
           {authors.map((a) => (
-            <AuthorInfo key={a.fullname} author={a} />
+            <AuthorInfo key={`author-${a.fullname}`} author={a} />
+          ))}
+          {translators.map((t) => (
+            <AuthorInfo key={`translator-${t.fullname}`} author={t} />
           ))}
         </div>
       </div>
@@ -79,7 +85,15 @@ const PlayDetailsHeader = ({play, children}) => {
             <h1>{title}</h1>
             <span>
               {authors.map((a) => (
-                <h3 key={a.fullname}>{a.fullname}</h3>
+                <h3 key={`author-${a.fullname}`}>{a.fullname}</h3>
+              ))}
+              {translators.map((t) => (
+                <h3
+                  key={`translator-${t.fullname}`}
+                  className={cx('translator')}
+                >
+                  transl. {t.fullname}
+                </h3>
               ))}
             </span>
           </div>

src/components/PlayDetailsHeader.module.scss

@@ -170,6 +170,11 @@
       content: '';
       margin: 0;
     }
+
+    &.translator {
+      font-style: italic;
+      opacity: 0.85;
+    }
   }
 }
 

src/types.ts

@@ -21,6 +21,7 @@ export interface Author {
   fullname?: string;
   shortname?: string;
   refs?: Ref[];
+  role?: string;
   // DEPRECATED
   key?: string;
 }
@@ -54,6 +55,7 @@ export interface Play {
   title: string;
   subtitle?: string;
   authors: Author[];
+  editors?: Author[];
   genre: string;
   libretto: boolean;
   originalSource: string;