« get me outta code hell

content: generateWikiHomeAlbumsRow + homepage content - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2023-07-26 11:23:49 -0300
committer(quasar) nebula <qznebula@protonmail.com>2023-07-26 11:23:49 -0300
commit2d5e22df4b418d96a88afb4589ac326fb77b6e7a (patch)
tree5dcd9ded2e4be484e80e8fc01b9f9617947b5cad
parentbdb4276ffae1c978ec1d1a6e462faf8c117e20a9 (diff)
content: generateWikiHomeAlbumsRow + homepage content
-rw-r--r--src/content/dependencies/generateWikiHomeAlbumsRow.js140
-rw-r--r--src/content/dependencies/generateWikiHomeContentRow.js34
-rw-r--r--src/content/dependencies/generateWikiHomePage.js15
-rw-r--r--src/page/homepage.js135
-rw-r--r--src/util/wiki-data.js13
5 files changed, 194 insertions, 143 deletions
diff --git a/src/content/dependencies/generateWikiHomeAlbumsRow.js b/src/content/dependencies/generateWikiHomeAlbumsRow.js
new file mode 100644
index 00000000..1e438a12
--- /dev/null
+++ b/src/content/dependencies/generateWikiHomeAlbumsRow.js
@@ -0,0 +1,140 @@
+import {empty, stitchArrays} from '../../util/sugar.js';
+import {getNewAdditions, getNewReleases} from '../../util/wiki-data.js';
+
+export default {
+  contentDependencies: [
+    'generateWikiHomeContentRow',
+    'generateCoverCarousel',
+    'generateCoverGrid',
+    'image',
+    'linkAlbum',
+    'transformContent',
+  ],
+
+  extraDependencies: ['wikiData'],
+
+  sprawl({albumData}, row) {
+    const sprawl = {};
+
+    switch (row.sourceGroupByRef) {
+      case 'new-releases':
+        sprawl.albums = getNewReleases(row.countAlbumsFromGroup, {albumData});
+        break;
+
+      case 'new-additions':
+        sprawl.albums = getNewAdditions(row.countAlbumsFromGroup, {albumData});
+        break;
+
+      default:
+        sprawl.albums =
+          (row.sourceGroup
+            ? row.sourceGroup.albums
+                .slice()
+                .reverse()
+                .filter(album => album.isListedOnHomepage)
+                .slice(0, row.countAlbumsFromGroup)
+            : []);
+    }
+
+    if (!empty(row.sourceAlbums)) {
+      sprawl.albums.push(...row.sourceAlbums);
+    }
+
+    return sprawl;
+  },
+
+  relations(relation, sprawl, row) {
+    const relations = {};
+
+    relations.contentRow =
+      relation('generateWikiHomeContentRow', row);
+
+    if (row.displayStyle === 'grid') {
+      relations.coverGrid =
+        relation('generateCoverGrid');
+    }
+
+    if (row.displayStyle === 'carousel') {
+      relations.coverCarousel =
+        relation('generateCoverCarousel');
+    }
+
+    relations.links =
+      sprawl.albums
+        .map(album => relation('linkAlbum', album));
+
+    relations.images =
+      sprawl.albums
+        .map(album => relation('image', album.artTags));
+
+    if (row.actionLinks) {
+      relations.actionLinks =
+        row.actionLinks
+          .map(content => relation('transformContent', content));
+    }
+
+    return relations;
+  },
+
+  data(sprawl, row) {
+    const data = {};
+
+    data.displayStyle = row.displayStyle;
+
+    if (row.displayStyle === 'grid') {
+      data.names =
+        sprawl.albums
+          .map(album => album.name);
+    }
+
+    data.paths =
+      sprawl.albums
+        .map(album =>
+          ['media.albumCover', album.directory, album.coverArtFileExtension]);
+
+    return data;
+  },
+
+  generate(data, relations) {
+    // Grids and carousels share some slots! Very convenient.
+    const commonSlots = {};
+
+    commonSlots.links =
+      relations.links;
+
+    commonSlots.images =
+      stitchArrays({
+        image: relations.images,
+        path: data.paths,
+      }).map(({image, path}) =>
+          image.slot('path', path));
+
+    commonSlots.actionLinks =
+      (relations.actionLinks
+        ? relations.actionLinks
+            .map(contents =>
+              contents
+                .slot('mode', 'single-link')
+                .content)
+        : null);
+
+    let content;
+
+    switch (data.displayStyle) {
+      case 'grid':
+        content =
+          relations.coverGrid.slots({
+            ...commonSlots,
+            names: data.names,
+          });
+        break;
+
+      case 'carousel':
+        content =
+          relations.coverCarousel.slots(commonSlots);
+        break;
+    }
+
+    return relations.contentRow.slots({content});
+  },
+};
diff --git a/src/content/dependencies/generateWikiHomeContentRow.js b/src/content/dependencies/generateWikiHomeContentRow.js
new file mode 100644
index 00000000..90622801
--- /dev/null
+++ b/src/content/dependencies/generateWikiHomeContentRow.js
@@ -0,0 +1,34 @@
+export default {
+  contentDependencies: ['generateColorStyleVariables'],
+  extraDependencies: ['html'],
+
+  relations(relation, row) {
+    return {
+      colorVariables:
+        relation('generateColorStyleVariables', row.color),
+    };
+  },
+
+  data(row) {
+    return {
+      name: row.name,
+    };
+  },
+
+  slots: {
+    content: {type: 'html'},
+  },
+
+  generate(data, relations, slots, {html}) {
+    return (
+      html.tag('section',
+        {
+          class: 'row',
+          style: [relations.colorVariables],
+        },
+        [
+          html.tag('h2', data.name),
+          slots.content,
+        ]));
+  },
+};
diff --git a/src/content/dependencies/generateWikiHomePage.js b/src/content/dependencies/generateWikiHomePage.js
index d3d05c40..40a6b1c5 100644
--- a/src/content/dependencies/generateWikiHomePage.js
+++ b/src/content/dependencies/generateWikiHomePage.js
@@ -1,6 +1,7 @@
 export default {
   contentDependencies: [
     'generatePageLayout',
+    'generateWikiHomeAlbumsRow',
     'generateWikiHomeNewsBox',
     'transformContent',
   ],
@@ -37,6 +38,16 @@ export default {
           .map(content => relation('transformContent', content));
     }
 
+    relations.contentRows =
+      homepageLayout.rows.map(row => {
+        switch (row.type) {
+          case 'albums':
+            return relation('generateWikiHomeAlbumsRow', row);
+          default:
+            return null;
+        }
+      });
+
     return relations;
   },
 
@@ -54,7 +65,9 @@ export default {
       mainClasses: ['top-index'],
       headingMode: 'static',
 
-      mainContent: [],
+      mainContent: [
+        relations.contentRows,
+      ],
 
       leftSidebarCollapse: false,
       leftSidebarWide: true,
diff --git a/src/page/homepage.js b/src/page/homepage.js
index 8d06c0b6..15dcadd1 100644
--- a/src/page/homepage.js
+++ b/src/page/homepage.js
@@ -26,138 +26,3 @@ export function pathsTargetless({wikiData}) {
     },
   ];
 }
-
-/*
-export function writeTargetless({wikiData}) {
-  const {newsData, homepageLayout, wikiInfo} = wikiData;
-
-  const rowData = homepageLayout.rows?.map(row => {
-    const {color, name, type} = row;
-    const entry = {row, color, name, type};
-
-    switch (type) {
-      case 'albums': {
-        entry.displayStyle = row.displayStyle;
-
-        switch (row.sourceGroupByRef) {
-          case 'new-releases':
-            entry.entries = getNewReleases(row.countAlbumsFromGroup, {wikiData});
-            break;
-          case 'new-additions':
-            entry.entries = getNewAdditions(row.countAlbumsFromGroup, {wikiData});
-            break;
-          default:
-            entry.entries = row.sourceGroup
-              ? row.sourceGroup.albums
-                  .slice()
-                  .reverse()
-                  .filter(album => album.isListedOnHomepage)
-                  .slice(0, row.countAlbumsFromGroup)
-                  .map(album => ({item: album}))
-              : [];
-        }
-
-        if (!empty(row.sourceAlbums)) {
-          entry.entries.push(...row.sourceAlbums.map(album => ({item: album})));
-        }
-
-        entry.actionLinks = row.actionLinks ?? [];
-        break;
-      }
-    }
-
-    return entry;
-  });
-
-  const transformActionLinks = (actionLinks, {
-    transformInline,
-  }) =>
-    actionLinks?.map(transformInline)
-      .map(a => a.replace('<a', '<a class="box grid-item"'));
-
-  const page = {
-    type: 'page',
-    path: ['home'],
-    page: ({
-      getAlbumGridHTML,
-      getAlbumCover,
-      getCarouselHTML,
-      getLinkThemeString,
-      html,
-      language,
-      link,
-      to,
-      transformInline,
-      transformMultiline,
-    }) => ({
-      title: wikiInfo.name,
-      showWikiNameInTitle: false,
-
-      meta: {
-        description: wikiInfo.description,
-      },
-
-      main: {
-        classes: ['top-index'],
-        headingMode: 'none',
-
-        content: [
-          html.tag('h1',
-            wikiInfo.name),
-
-          ...html.fragment(
-            rowData.map((entry, i) =>
-              html.tag('section',
-                {
-                  class: 'row',
-                  style: getLinkThemeString(entry.color),
-                },
-                [
-                  html.tag('h2',
-                    entry.name),
-
-                  entry.type === 'albums' &&
-                  entry.displayStyle === 'grid' &&
-                    html.tag('div', {class: 'grid-listing'}, [
-                      ...html.fragment(
-                        getAlbumGridHTML({
-                          entries: entry.entries,
-                          lazy: i > 0,
-                        })),
-
-                      html.tag('div',
-                        {
-                          [html.onlyIfContent]: true,
-                          class: 'grid-actions',
-                        },
-                        transformActionLinks(entry.actionLinks, {
-                          transformInline,
-                        })),
-                    ]),
-
-                  ...html.fragment(
-                    entry.type === 'albums' &&
-                    entry.displayStyle === 'carousel' && [
-                      getCarouselHTML({
-                        items: entry.entries.map(e => e.item),
-                        // Lazy carousels are kinda glitchy, possibly browser-dependant
-                        // lazy: i > 0,
-                        srcFn: getAlbumCover,
-                        linkFn: link.album,
-                      }),
-
-                      entry.actionLinks.length &&
-                        html.tag('div', {class: 'grid-actions'},
-                          transformActionLinks(entry.actionLinks, {
-                            transformInline,
-                          })),
-                    ]),
-                ]))),
-        ],
-      },
-    }),
-  };
-
-  return [page];
-}
-*/
diff --git a/src/util/wiki-data.js b/src/util/wiki-data.js
index a3133748..97a3f3e5 100644
--- a/src/util/wiki-data.js
+++ b/src/util/wiki-data.js
@@ -728,8 +728,8 @@ export function getArtistAvatar(artist, {to}) {
 
 // Big-ass homepage row functions
 
-export function getNewAdditions(numAlbums, {wikiData}) {
-  const sortedAlbums = wikiData.albumData
+export function getNewAdditions(numAlbums, {albumData}) {
+  const sortedAlbums = albumData
     .filter((album) => album.isListedOnHomepage)
     .sort((a, b) => {
       if (a.dateAddedToWiki > b.dateAddedToWiki) return -1;
@@ -808,15 +808,14 @@ export function getNewAdditions(numAlbums, {wikiData}) {
     }
   }
 
-  return albums.map((album) => ({item: album}));
+  return albums;
 }
 
-export function getNewReleases(numReleases, {wikiData}) {
-  return wikiData.albumData
+export function getNewReleases(numReleases, {albumData}) {
+  return albumData
     .filter((album) => album.isListedOnHomepage)
     .reverse()
-    .slice(0, numReleases)
-    .map((album) => ({item: album}));
+    .slice(0, numReleases);
 }
 
 // Carousel layout and utilities