data, content, css: FlashAct.{shortName,title,titleColor}

7 files changed, 81 insertions, 62 deletions

diff --git a/src/content/dependencies/generateFlashActGalleryPage.js b/src/content/dependencies/generateFlashActGalleryPage.js
index 4097d765..681a61b8 100644
--- a/src/content/dependencies/generateFlashActGalleryPage.js
+++ b/src/content/dependencies/generateFlashActGalleryPage.js
@@ -7,7 +7,7 @@ export default {
       relation('linkFlashIndex'),
 
     flashActNavLink:
-      relation('linkFlashActInline', act),
+      relation('linkFlashActWithTitle', act),
 
     flashActNavAccent:
       relation('generateFlashActNavAccent', act),
@@ -29,7 +29,7 @@ export default {
 
   data: (act) => ({
     name: act.name,
-    nameHTML: act.nameHTML,
+    title: act.title,
     color: act.color,
 
     flashNames:
@@ -37,15 +37,20 @@ export default {
   }),
 
   generate: (data, relations, {html, language}) =>
-    language.encapsulate('flashPage', pageCapsule =>
+    language.encapsulate('flashActPage', pageCapsule =>
       relations.layout.slots({
         title:
-          language.$(pageCapsule, 'title', {
-            flash:
-              html.ifelse([
-                html.permit(data.nameHTML, {strip: true}),
-                language.sanitize(data.name),
-              ]),
+          language.encapsulate(pageCapsule, 'title', workingCapsule => {
+            const workingOptions = {act: data.name};
+
+            if (data.title) {
+              workingCapsule += '.withTitle'; // sigh
+              workingOptions.title =
+                html.tag('span', {class: 'flash-act-title'},
+                  data.title);
+            }
+
+            return language.$(workingCapsule, workingOptions);
           }),
 
         color: data.color,
diff --git a/src/content/dependencies/generateFlashActSidebarCurrentActBox.js b/src/content/dependencies/generateFlashActSidebarCurrentActBox.js
index e08582fe..c1c21b09 100644
--- a/src/content/dependencies/generateFlashActSidebarCurrentActBox.js
+++ b/src/content/dependencies/generateFlashActSidebarCurrentActBox.js
@@ -4,7 +4,7 @@ export default {
       relation('generatePageSidebarBox'),
 
     actLink:
-      relation('linkFlashAct', act),
+      relation('linkFlashActWithTitle', act),
 
     flashLinks:
       act.flashes
diff --git a/src/content/dependencies/generateFlashActSidebarSideMapBox.js b/src/content/dependencies/generateFlashActSidebarSideMapBox.js
index 7cae184f..b61f042f 100644
--- a/src/content/dependencies/generateFlashActSidebarSideMapBox.js
+++ b/src/content/dependencies/generateFlashActSidebarSideMapBox.js
@@ -17,7 +17,7 @@ export default {
     sideActLinks:
       sprawl.flashSideData
         .map(side => side.acts
-          .map(act => relation('linkFlashActInline', act))),
+          .map(act => relation('linkFlashActWithTitle', act))),
   }),
 
   data: (sprawl, act, flash) => ({
@@ -33,6 +33,11 @@ export default {
 
     currentActIndex:
       act.side.acts.indexOf(act),
+
+    sideActTitles:
+      sprawl.flashSideData
+        .map(side => side.acts
+          .map(act => act.title)),
   }),
 
   generate: (data, relations, {html}) =>
@@ -46,7 +51,8 @@ export default {
           sideName: data.sideNames,
           sideColorStyle: relations.sideColorStyles,
           actLinks: relations.sideActLinks,
-        }).map(({sideName, sideColorStyle, actLinks}, sideIndex) =>
+          actTitles: data.sideActTitles,
+        }).map(({sideName, sideColorStyle, actLinks, actTitles}, sideIndex) =>
             html.tag('details',
               sideIndex === data.currentSideIndex &&
                 {class: 'current'},
@@ -63,13 +69,19 @@ export default {
                     html.tag('b', sideName))),
 
                 html.tag('ul',
-                  actLinks.map((actLink, actIndex) =>
-                    html.tag('li',
-                      sideIndex === data.currentSideIndex &&
-                      actIndex === data.currentActIndex &&
-                        {class: 'current'},
-
-                      actLink))),
+                  stitchArrays({
+                    actLink: actLinks,
+                    actTitle: actTitles,
+                  }).map(({actLink, actTitle}, actIndex) =>
+                      html.tag('li',
+                        sideIndex === data.currentSideIndex &&
+                        actIndex === data.currentActIndex &&
+                          {class: 'current'},
+
+                        actTitle &&
+                          {class: 'structured'},
+
+                        actLink))),
               ])),
       ],
     }),
diff --git a/src/content/dependencies/generateFlashInfoPage.js b/src/content/dependencies/generateFlashInfoPage.js
index ac49dbf5..b4e8c757 100644
--- a/src/content/dependencies/generateFlashInfoPage.js
+++ b/src/content/dependencies/generateFlashInfoPage.js
@@ -56,6 +56,9 @@ export default {
     readCommentaryLine:
       relation('generateReadCommentaryLine', flash),
 
+    flashIndexLink:
+      relation('linkFlashIndex'),
+
     flashActLink:
       relation('linkFlashAct', flash.act),
 
@@ -87,6 +90,9 @@ export default {
 
     date:
       flash.date,
+
+    flashActShortName:
+      flash.act.shortName,
   }),
 
   generate: (data, relations, {html, language}) =>
@@ -180,7 +186,14 @@ export default {
         navLinkStyle: 'hierarchical',
         navLinks: [
           {auto: 'home'},
-          {html: relations.flashActLink.slot('color', false)},
+          {html: relations.flashIndexLink},
+
+          {
+            html:
+              relations.flashActLink.slot('content',
+                language.sanitize(data.flashActShortName)),
+          },
+
           {auto: 'current'},
         ],
 
diff --git a/src/content/dependencies/linkFlashAct.js b/src/content/dependencies/linkFlashAct.js
index dcad71e0..efa715e6 100644
--- a/src/content/dependencies/linkFlashAct.js
+++ b/src/content/dependencies/linkFlashAct.js
@@ -1,21 +1,6 @@
 export default {
-  relations: (relation, flashAct) => ({
-    link:
-      relation('linkThing', 'localized.flashActGallery', flashAct),
-  }),
+  relations: (relation, flashAct) =>
+    ({link: relation('linkThing', 'localized.flashActGallery', flashAct)}),
 
-  data: (flashAct) => ({
-    name:
-      flashAct.name,
-
-    nameHTML:
-      flashAct.nameHTML,
-  }),
-
-  generate: (data, relations, {html, language}) =>
-    relations.link.slot('content',
-      html.ifelse([
-        html.permit(data.nameHTML),
-        language.sanitize(data.name),
-      ])),
+  generate: (relations) => relations.link,
 };
diff --git a/src/content/dependencies/linkFlashActInline.js b/src/content/dependencies/linkFlashActInline.js
deleted file mode 100644
index ba2a4883..00000000
--- a/src/content/dependencies/linkFlashActInline.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// junk component which only exists because you can't
-// "extend" the slots of underlying linkThing.
-
-export default {
-  relations: (relation, flashAct) => ({
-    link:
-      relation('linkThing', 'localized.flashActGallery', flashAct),
-  }),
-
-  data: (flashAct) => ({
-    name:
-      flashAct.name,
-
-    nameHTML:
-      flashAct.nameHTML,
-  }),
-
-  generate: (data, relations, {html, language}) =>
-    relations.link.slot('content',
-      html.ifelse([
-        html.permit(data.nameHTML, {inline: true}),
-        language.sanitize(data.name),
-      ])),
-};
diff --git a/src/content/dependencies/linkFlashActWithTitle.js b/src/content/dependencies/linkFlashActWithTitle.js
new file mode 100644
index 00000000..87d1c2db
--- /dev/null
+++ b/src/content/dependencies/linkFlashActWithTitle.js
@@ -0,0 +1,28 @@
+export default {
+  relations: (relation, flashAct) => ({
+    link:
+      relation('linkThing', 'localized.flashActGallery', flashAct),
+
+    titleColorStyle:
+      (flashAct.titleColor && flashAct.titleColor !== flashAct.color
+        ? relation('generateColorStyleAttribute', flashAct.titleColor)
+        : null),
+  }),
+
+  data: (flashAct) => ({
+    name: flashAct.name,
+    title: flashAct.title,
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    (data.title
+      ? relations.link.slot('content',
+          language.$('misc.flashActWithTitle', {
+            act: data.name,
+            title:
+              html.tag('span', {class: 'flash-act-title'},
+                relations.titleColorStyle,
+                language.sanitize(data.title)),
+          }))
+      : relations.link),
+};