« get me outta code hell

hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/page/group.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/page/group.js')
-rw-r--r--src/page/group.js488
1 files changed, 273 insertions, 215 deletions
diff --git a/src/page/group.js b/src/page/group.js
index b83244a3..bea9ecc7 100644
--- a/src/page/group.js
+++ b/src/page/group.js
@@ -2,268 +2,326 @@
 
 // Imports
 
-import fixWS from 'fix-whitespace';
+import fixWS from "fix-whitespace";
 
-import * as html from '../util/html.js';
+import * as html from "../util/html.js";
 
-import {
-    getTotalDuration,
-    sortChronologically,
-} from '../util/wiki-data.js';
+import { getTotalDuration, sortChronologically } from "../util/wiki-data.js";
 
 // Page exports
 
-export function targets({wikiData}) {
-    return wikiData.groupData;
+export function targets({ wikiData }) {
+  return wikiData.groupData;
 }
 
-export function write(group, {wikiData}) {
-    const { listingSpec, wikiInfo } = wikiData;
+export function write(group, { wikiData }) {
+  const { listingSpec, wikiInfo } = wikiData;
 
-    const { albums } = group;
-    const tracks = albums.flatMap(album => album.tracks);
-    const totalDuration = getTotalDuration(tracks);
+  const { albums } = group;
+  const tracks = albums.flatMap((album) => album.tracks);
+  const totalDuration = getTotalDuration(tracks);
 
-    const albumLines = group.albums.map(album => ({
-        album,
-        otherGroup: album.groups.find(g => g !== group)
-    }));
+  const albumLines = group.albums.map((album) => ({
+    album,
+    otherGroup: album.groups.find((g) => g !== group),
+  }));
 
-    const infoPage = {
-        type: 'page',
-        path: ['groupInfo', group.directory],
-        page: ({
-            generateInfoGalleryLinks,
-            generatePreviousNextLinks,
-            getLinkThemeString,
-            getThemeString,
-            fancifyURL,
-            link,
-            language,
-            transformMultiline
-        }) => ({
-            title: language.$('groupInfoPage.title', {group: group.name}),
-            theme: getThemeString(group.color),
+  const infoPage = {
+    type: "page",
+    path: ["groupInfo", group.directory],
+    page: ({
+      generateInfoGalleryLinks,
+      generatePreviousNextLinks,
+      getLinkThemeString,
+      getThemeString,
+      fancifyURL,
+      link,
+      language,
+      transformMultiline,
+    }) => ({
+      title: language.$("groupInfoPage.title", { group: group.name }),
+      theme: getThemeString(group.color),
 
-            main: {
-                content: fixWS`
-                    <h1>${language.$('groupInfoPage.title', {group: group.name})}</h1>
-                    ${group.urls?.length && `<p>${
-                        language.$('releaseInfo.visitOn', {
-                            links: language.formatDisjunctionList(group.urls.map(url => fancifyURL(url, {language})))
-                        })
-                    }</p>`}
+      main: {
+        content: fixWS`
+                    <h1>${language.$("groupInfoPage.title", {
+                      group: group.name,
+                    })}</h1>
+                    ${
+                      group.urls?.length &&
+                      `<p>${language.$("releaseInfo.visitOn", {
+                        links: language.formatDisjunctionList(
+                          group.urls.map((url) => fancifyURL(url, { language }))
+                        ),
+                      })}</p>`
+                    }
                     <blockquote>
                         ${transformMultiline(group.description)}
                     </blockquote>
-                    <h2>${language.$('groupInfoPage.albumList.title')}</h2>
-                    <p>${
-                        language.$('groupInfoPage.viewAlbumGallery', {
-                            link: link.groupGallery(group, {
-                                text: language.$('groupInfoPage.viewAlbumGallery.link')
-                            })
-                        })
-                    }</p>
+                    <h2>${language.$("groupInfoPage.albumList.title")}</h2>
+                    <p>${language.$("groupInfoPage.viewAlbumGallery", {
+                      link: link.groupGallery(group, {
+                        text: language.$("groupInfoPage.viewAlbumGallery.link"),
+                      }),
+                    })}</p>
                     <ul>
-                        ${albumLines.map(({ album, otherGroup }) => {
-                            const item = (album.date
-                                ? language.$('groupInfoPage.albumList.item', {
-                                    year: album.date.getFullYear(),
-                                    album: link.album(album)
+                        ${albumLines
+                          .map(({ album, otherGroup }) => {
+                            const item = album.date
+                              ? language.$("groupInfoPage.albumList.item", {
+                                  year: album.date.getFullYear(),
+                                  album: link.album(album),
                                 })
-                                : language.$('groupInfoPage.albumList.item.withoutYear', {
-                                    album: link.album(album)
-                                }));
-                            return html.tag('li', (otherGroup
-                                ? language.$('groupInfoPage.albumList.item.withAccent', {
-                                    item,
-                                    accent: html.tag('span',
-                                        {class: 'other-group-accent'},
-                                        language.$('groupInfoPage.albumList.item.otherGroupAccent', {
-                                            group: link.groupInfo(otherGroup, {color: false})
-                                        }))
-                                })
-                                : item));
-                        }).join('\n')}
+                              : language.$(
+                                  "groupInfoPage.albumList.item.withoutYear",
+                                  {
+                                    album: link.album(album),
+                                  }
+                                );
+                            return html.tag(
+                              "li",
+                              otherGroup
+                                ? language.$(
+                                    "groupInfoPage.albumList.item.withAccent",
+                                    {
+                                      item,
+                                      accent: html.tag(
+                                        "span",
+                                        { class: "other-group-accent" },
+                                        language.$(
+                                          "groupInfoPage.albumList.item.otherGroupAccent",
+                                          {
+                                            group: link.groupInfo(otherGroup, {
+                                              color: false,
+                                            }),
+                                          }
+                                        )
+                                      ),
+                                    }
+                                  )
+                                : item
+                            );
+                          })
+                          .join("\n")}
                     </ul>
-                `
-            },
+                `,
+      },
 
-            sidebarLeft: generateGroupSidebar(group, false, {
-                getLinkThemeString,
-                link,
-                language,
-                wikiData
-            }),
+      sidebarLeft: generateGroupSidebar(group, false, {
+        getLinkThemeString,
+        link,
+        language,
+        wikiData,
+      }),
 
-            nav: generateGroupNav(group, false, {
-                generateInfoGalleryLinks,
-                generatePreviousNextLinks,
-                link,
-                language,
-                wikiData
-            })
-        })
-    };
+      nav: generateGroupNav(group, false, {
+        generateInfoGalleryLinks,
+        generatePreviousNextLinks,
+        link,
+        language,
+        wikiData,
+      }),
+    }),
+  };
 
-    const galleryPage = {
-        type: 'page',
-        path: ['groupGallery', group.directory],
-        page: ({
-            generateInfoGalleryLinks,
-            generatePreviousNextLinks,
-            getAlbumGridHTML,
-            getLinkThemeString,
-            getThemeString,
-            link,
-            language
-        }) => ({
-            title: language.$('groupGalleryPage.title', {group: group.name}),
-            theme: getThemeString(group.color),
+  const galleryPage = {
+    type: "page",
+    path: ["groupGallery", group.directory],
+    page: ({
+      generateInfoGalleryLinks,
+      generatePreviousNextLinks,
+      getAlbumGridHTML,
+      getLinkThemeString,
+      getThemeString,
+      link,
+      language,
+    }) => ({
+      title: language.$("groupGalleryPage.title", { group: group.name }),
+      theme: getThemeString(group.color),
 
-            main: {
-                classes: ['top-index'],
-                content: fixWS`
-                    <h1>${language.$('groupGalleryPage.title', {group: group.name})}</h1>
-                    <p class="quick-info">${
-                        language.$('groupGalleryPage.infoLine', {
-                            tracks: `<b>${language.countTracks(tracks.length, {unit: true})}</b>`,
-                            albums: `<b>${language.countAlbums(albums.length, {unit: true})}</b>`,
-                            time: `<b>${language.formatDuration(totalDuration, {unit: true})}</b>`
-                        })
-                    }</p>
-                    ${wikiInfo.enableGroupUI && wikiInfo.enableListings && html.tag('p',
-                        {class: 'quick-info'},
-                        language.$('groupGalleryPage.anotherGroupLine', {
-                            link: link.listing(listingSpec.find(l => l.directory === 'groups/by-category'), {
-                                text: language.$('groupGalleryPage.anotherGroupLine.link')
-                            })
+      main: {
+        classes: ["top-index"],
+        content: fixWS`
+                    <h1>${language.$("groupGalleryPage.title", {
+                      group: group.name,
+                    })}</h1>
+                    <p class="quick-info">${language.$(
+                      "groupGalleryPage.infoLine",
+                      {
+                        tracks: `<b>${language.countTracks(tracks.length, {
+                          unit: true,
+                        })}</b>`,
+                        albums: `<b>${language.countAlbums(albums.length, {
+                          unit: true,
+                        })}</b>`,
+                        time: `<b>${language.formatDuration(totalDuration, {
+                          unit: true,
+                        })}</b>`,
+                      }
+                    )}</p>
+                    ${
+                      wikiInfo.enableGroupUI &&
+                      wikiInfo.enableListings &&
+                      html.tag(
+                        "p",
+                        { class: "quick-info" },
+                        language.$("groupGalleryPage.anotherGroupLine", {
+                          link: link.listing(
+                            listingSpec.find(
+                              (l) => l.directory === "groups/by-category"
+                            ),
+                            {
+                              text: language.$(
+                                "groupGalleryPage.anotherGroupLine.link"
+                              ),
+                            }
+                          ),
                         })
-                    )}
+                      )
+                    }
                     <div class="grid-listing">
                         ${getAlbumGridHTML({
-                            entries: sortChronologically(group.albums.map(album => ({
-                                item: album,
-                                directory: album.directory,
-                                name: album.name,
-                                date: album.date,
-                            }))).reverse(),
-                            details: true
+                          entries: sortChronologically(
+                            group.albums.map((album) => ({
+                              item: album,
+                              directory: album.directory,
+                              name: album.name,
+                              date: album.date,
+                            }))
+                          ).reverse(),
+                          details: true,
                         })}
                     </div>
-                `
-            },
+                `,
+      },
 
-            sidebarLeft: generateGroupSidebar(group, true, {
-                getLinkThemeString,
-                link,
-                language,
-                wikiData
-            }),
+      sidebarLeft: generateGroupSidebar(group, true, {
+        getLinkThemeString,
+        link,
+        language,
+        wikiData,
+      }),
 
-            nav: generateGroupNav(group, true, {
-                generateInfoGalleryLinks,
-                generatePreviousNextLinks,
-                link,
-                language,
-                wikiData
-            })
-        })
-    };
+      nav: generateGroupNav(group, true, {
+        generateInfoGalleryLinks,
+        generatePreviousNextLinks,
+        link,
+        language,
+        wikiData,
+      }),
+    }),
+  };
 
-    return [infoPage, galleryPage];
+  return [infoPage, galleryPage];
 }
 
 // Utility functions
 
-function generateGroupSidebar(currentGroup, isGallery, {
-    getLinkThemeString,
-    link,
-    language,
-    wikiData
-}) {
-    const { groupCategoryData, wikiInfo } = wikiData;
+function generateGroupSidebar(
+  currentGroup,
+  isGallery,
+  { getLinkThemeString, link, language, wikiData }
+) {
+  const { groupCategoryData, wikiInfo } = wikiData;
 
-    if (!wikiInfo.enableGroupUI) {
-        return null;
-    }
+  if (!wikiInfo.enableGroupUI) {
+    return null;
+  }
 
-    const linkKey = isGallery ? 'groupGallery' : 'groupInfo';
+  const linkKey = isGallery ? "groupGallery" : "groupInfo";
 
-    return {
-        content: fixWS`
-            <h1>${language.$('groupSidebar.title')}</h1>
-            ${groupCategoryData.map(category =>
-                html.tag('details', {
+  return {
+    content: fixWS`
+            <h1>${language.$("groupSidebar.title")}</h1>
+            ${groupCategoryData
+              .map((category) =>
+                html.tag(
+                  "details",
+                  {
                     open: category === currentGroup.category,
-                    class: category === currentGroup.category && 'current'
-                }, [
-                    html.tag('summary',
-                        {style: getLinkThemeString(category.color)},
-                        language.$('groupSidebar.groupList.category', {
-                            category: `<span class="group-name">${category.name}</span>`
-                        })),
-                    html.tag('ul',
-                        category.groups.map(group => html.tag('li',
-                            {
-                                class: group === currentGroup && 'current',
-                                style: getLinkThemeString(group.color)
-                            },
-                            language.$('groupSidebar.groupList.item', {
-                                group: link[linkKey](group)
-                            }))))
-                ])).join('\n')}
+                    class: category === currentGroup.category && "current",
+                  },
+                  [
+                    html.tag(
+                      "summary",
+                      { style: getLinkThemeString(category.color) },
+                      language.$("groupSidebar.groupList.category", {
+                        category: `<span class="group-name">${category.name}</span>`,
+                      })
+                    ),
+                    html.tag(
+                      "ul",
+                      category.groups.map((group) =>
+                        html.tag(
+                          "li",
+                          {
+                            class: group === currentGroup && "current",
+                            style: getLinkThemeString(group.color),
+                          },
+                          language.$("groupSidebar.groupList.item", {
+                            group: link[linkKey](group),
+                          })
+                        )
+                      )
+                    ),
+                  ]
+                )
+              )
+              .join("\n")}
             </dl>
-        `
-    };
+        `,
+  };
 }
 
-function generateGroupNav(currentGroup, isGallery, {
+function generateGroupNav(
+  currentGroup,
+  isGallery,
+  {
     generateInfoGalleryLinks,
     generatePreviousNextLinks,
     link,
     language,
-    wikiData
-}) {
-    const { groupData, wikiInfo } = wikiData;
+    wikiData,
+  }
+) {
+  const { groupData, wikiInfo } = wikiData;
 
-    if (!wikiInfo.enableGroupUI) {
-        return {simple: true};
-    }
+  if (!wikiInfo.enableGroupUI) {
+    return { simple: true };
+  }
 
-    const urlKey = isGallery ? 'localized.groupGallery' : 'localized.groupInfo';
-    const linkKey = isGallery ? 'groupGallery' : 'groupInfo';
+  const urlKey = isGallery ? "localized.groupGallery" : "localized.groupInfo";
+  const linkKey = isGallery ? "groupGallery" : "groupInfo";
 
-    const infoGalleryLinks = generateInfoGalleryLinks(currentGroup, isGallery, {
-        linkKeyGallery: 'groupGallery',
-        linkKeyInfo: 'groupInfo'
-    });
+  const infoGalleryLinks = generateInfoGalleryLinks(currentGroup, isGallery, {
+    linkKeyGallery: "groupGallery",
+    linkKeyInfo: "groupInfo",
+  });
 
-    const previousNextLinks = generatePreviousNextLinks(currentGroup, {
-        data: groupData,
-        linkKey
-    });
+  const previousNextLinks = generatePreviousNextLinks(currentGroup, {
+    data: groupData,
+    linkKey,
+  });
 
-    return {
-        linkContainerClasses: ['nav-links-hierarchy'],
-        links: [
-            {toHome: true},
-            wikiInfo.enableListings &&
-            {
-                path: ['localized.listingIndex'],
-                title: language.$('listingIndex.title')
-            },
-            {
-                html: language.$('groupPage.nav.group', {
-                    group: link[linkKey](currentGroup, {class: 'current'})
-                })
-            },
-            {
-                divider: false,
-                html: (previousNextLinks
-                    ? `(${infoGalleryLinks}; ${previousNextLinks})`
-                    : `(${previousNextLinks})`)
-            }
-        ]
-    };
+  return {
+    linkContainerClasses: ["nav-links-hierarchy"],
+    links: [
+      { toHome: true },
+      wikiInfo.enableListings && {
+        path: ["localized.listingIndex"],
+        title: language.$("listingIndex.title"),
+      },
+      {
+        html: language.$("groupPage.nav.group", {
+          group: link[linkKey](currentGroup, { class: "current" }),
+        }),
+      },
+      {
+        divider: false,
+        html: previousNextLinks
+          ? `(${infoGalleryLinks}; ${previousNextLinks})`
+          : `(${previousNextLinks})`,
+      },
+    ],
+  };
 }