« get me outta code hell

hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
diff options
context:
space:
mode:
-rw-r--r--src/content/dependencies/generateArtistInfoPageFirstReleaseTooltip.js4
-rw-r--r--src/content/dependencies/generateArtistInfoPageRereleaseTooltip.js4
-rw-r--r--src/content/dependencies/generateArtistInfoPageTracksChunkItem.js4
-rw-r--r--src/content/dependencies/generateArtistNavLinks.js13
-rw-r--r--src/content/dependencies/generateArtistRollingWindowPage.js428
-rw-r--r--src/content/dependencies/generateContributionTooltip.js153
-rw-r--r--src/content/dependencies/generateContributionTooltipChronologySection.js30
-rw-r--r--src/content/dependencies/generateCoverGrid.js5
-rw-r--r--src/content/dependencies/generateTrackList.js8
-rw-r--r--src/content/dependencies/linkArtistRollingWindow.js8
-rw-r--r--src/data/things/artist.js105
-rw-r--r--src/data/things/language.js14
-rw-r--r--src/page/artist.js10
-rw-r--r--src/static/css/site.css60
-rw-r--r--src/static/js/client-util.js7
-rw-r--r--src/static/js/client/artist-rolling-window.js573
-rw-r--r--src/static/js/client/index.js2
-rw-r--r--src/strings-default.yaml42
-rw-r--r--src/urls-default.yaml1
19 files changed, 1413 insertions, 58 deletions
diff --git a/src/content/dependencies/generateArtistInfoPageFirstReleaseTooltip.js b/src/content/dependencies/generateArtistInfoPageFirstReleaseTooltip.js
index f86dead7..31a223f5 100644
--- a/src/content/dependencies/generateArtistInfoPageFirstReleaseTooltip.js
+++ b/src/content/dependencies/generateArtistInfoPageFirstReleaseTooltip.js
@@ -1,4 +1,4 @@
-import {sortChronologically} from '#sort';
+import {sortAlbumsTracksChronologically} from '#sort';
 import {stitchArrays} from '#sugar';
 
 export default {
@@ -12,7 +12,7 @@ export default {
 
   query: (track) => ({
     rereleases:
-      sortChronologically(track.allReleases).slice(1),
+      sortAlbumsTracksChronologically(track.allReleases).slice(1),
   }),
 
   relations: (relation, query, track, artist) => ({
diff --git a/src/content/dependencies/generateArtistInfoPageRereleaseTooltip.js b/src/content/dependencies/generateArtistInfoPageRereleaseTooltip.js
index 1d849919..853edcb7 100644
--- a/src/content/dependencies/generateArtistInfoPageRereleaseTooltip.js
+++ b/src/content/dependencies/generateArtistInfoPageRereleaseTooltip.js
@@ -1,4 +1,4 @@
-import {sortChronologically} from '#sort';
+import {sortAlbumsTracksChronologically} from '#sort';
 
 export default {
   contentDependencies: [
@@ -11,7 +11,7 @@ export default {
 
   query: (track) => ({
     firstRelease:
-      sortChronologically(track.allReleases)[0],
+      sortAlbumsTracksChronologically(track.allReleases)[0],
   }),
 
   relations: (relation, query, track, artist) => ({
diff --git a/src/content/dependencies/generateArtistInfoPageTracksChunkItem.js b/src/content/dependencies/generateArtistInfoPageTracksChunkItem.js
index 927d892c..877b2fe9 100644
--- a/src/content/dependencies/generateArtistInfoPageTracksChunkItem.js
+++ b/src/content/dependencies/generateArtistInfoPageTracksChunkItem.js
@@ -1,4 +1,4 @@
-import {sortChronologically} from '#sort';
+import {sortAlbumsTracksChronologically} from '#sort';
 import {empty} from '#sugar';
 
 export default {
@@ -73,7 +73,7 @@ export default {
     // different - and it's the latter that determines whether the
     // track is a rerelease!
     const allReleasesChronologically =
-      sortChronologically(query.track.allReleases);
+      sortAlbumsTracksChronologically(query.track.allReleases);
 
     query.isFirstRelease =
       allReleasesChronologically[0] === query.track;
diff --git a/src/content/dependencies/generateArtistNavLinks.js b/src/content/dependencies/generateArtistNavLinks.js
index 1b4b6eca..1a520e84 100644
--- a/src/content/dependencies/generateArtistNavLinks.js
+++ b/src/content/dependencies/generateArtistNavLinks.js
@@ -5,6 +5,7 @@ export default {
     'generateInterpageDotSwitcher',
     'linkArtist',
     'linkArtistGallery',
+    'linkArtistRollingWindow',
   ],
 
   extraDependencies: ['html', 'language', 'wikiData'],
@@ -34,6 +35,9 @@ export default {
       (query.hasGallery
         ? relation('linkArtistGallery', artist)
         : null),
+
+    artistRollingWindowLink:
+      relation('linkArtistRollingWindow', artist),
   }),
 
   data: (_query, sprawl) => ({
@@ -45,7 +49,7 @@ export default {
     showExtraLinks: {type: 'boolean', default: false},
 
     currentExtra: {
-      validate: v => v.is('gallery'),
+      validate: v => v.is('gallery', 'rolling-window'),
     },
   },
 
@@ -79,6 +83,7 @@ export default {
             }),
 
             slots.showExtraLinks &&
+            slots.currentExtra !== 'rolling-window' &&
               relations.artistGalleryLink?.slots({
                 attributes: [
                   slots.currentExtra === 'gallery' &&
@@ -87,6 +92,12 @@ export default {
 
                 content: language.$('misc.nav.gallery'),
               }),
+
+            slots.currentExtra === 'rolling-window' &&
+              relations.artistRollingWindowLink.slots({
+                attributes: {class: 'current'},
+                content: language.$('misc.nav.rollingWindow'),
+              }),
           ],
         }),
     },
diff --git a/src/content/dependencies/generateArtistRollingWindowPage.js b/src/content/dependencies/generateArtistRollingWindowPage.js
new file mode 100644
index 00000000..33b1501e
--- /dev/null
+++ b/src/content/dependencies/generateArtistRollingWindowPage.js
@@ -0,0 +1,428 @@
+import {sortAlbumsTracksChronologically} from '#sort';
+import Thing from '#thing';
+
+import {
+  chunkByConditions,
+  filterMultipleArrays,
+  empty,
+  sortMultipleArrays,
+  stitchArrays,
+  unique,
+} from '#sugar';
+
+export default {
+  contentDependencies: [
+    'image',
+    'generateArtistNavLinks',
+    'generateCoverGrid',
+    'generatePageLayout',
+    'linkAnythingMan',
+  ],
+
+  extraDependencies: ['html', 'language', 'wikiData'],
+
+  sprawl: ({groupCategoryData}) => ({
+    groupCategoryData,
+  }),
+
+  query(sprawl, artist) {
+    const query = {};
+
+    const musicContributions =
+      artist.musicContributions
+        .filter(contrib => contrib.date);
+
+    const artworkContributions =
+      artist.artworkContributions
+        .filter(contrib =>
+          contrib.date &&
+          contrib.thingProperty !== 'wallpaperArtistContribs' &&
+          contrib.thingProperty !== 'bannerArtistContribs');
+
+    const musicThings =
+      musicContributions
+        .map(contrib => contrib.thing);
+
+    const artworkThings =
+      artworkContributions
+        .map(contrib => contrib.thing.thing);
+
+    const musicContributionDates =
+      musicContributions
+        .map(contrib => contrib.date);
+
+    const artworkContributionDates =
+      artworkContributions
+        .map(contrib => contrib.date);
+
+    const musicContributionKinds =
+      musicContributions
+        .map(() => 'music');
+
+    const artworkContributionKinds =
+      artworkContributions
+        .map(() => 'artwork');
+
+    const allThings = [
+      ...artworkThings,
+      ...musicThings,
+    ];
+
+    const allContributionDates = [
+      ...artworkContributionDates,
+      ...musicContributionDates,
+    ];
+
+    const allContributionKinds = [
+      ...artworkContributionKinds,
+      ...musicContributionKinds,
+    ];
+
+    const sortedThings =
+      sortAlbumsTracksChronologically(allThings.slice(), {latestFirst: true});
+
+    sortMultipleArrays(
+      allThings,
+      allContributionDates,
+      allContributionKinds,
+      (thing1, thing2) =>
+        sortedThings.indexOf(thing1) -
+        sortedThings.indexOf(thing2));
+
+    const sourceIndices =
+      Array.from({length: allThings.length}, (_, i) => i);
+
+    const sourceChunks =
+      chunkByConditions(sourceIndices, [
+        (index1, index2) =>
+          allThings[index1] !==
+          allThings[index2],
+      ]);
+
+    const indicesTo = array => index => array[index];
+
+    query.things =
+      sourceChunks
+        .map(chunks => allThings[chunks[0]]);
+
+    query.thingGroups =
+      query.things.map(thing =>
+        (thing.constructor[Thing.referenceType] === 'album'
+          ? thing.groups
+       : thing.constructor[Thing.referenceType] === 'track'
+          ? thing.album.groups
+          : null));
+
+    query.thingContributionDates =
+      sourceChunks
+        .map(indices => indices
+          .map(indicesTo(allContributionDates)));
+
+    query.thingContributionKinds =
+      sourceChunks
+        .map(indices => indices
+          .map(indicesTo(allContributionKinds)));
+
+    // Matches the "kind" dropdown.
+    const kinds = ['artwork', 'music', 'flash'];
+
+    const allKinds =
+      unique(query.thingContributionKinds.flat(2));
+
+    query.kinds =
+      kinds
+        .filter(kind => allKinds.includes(kind));
+
+    query.firstKind =
+      query.kinds.at(0);
+
+    query.thingArtworks =
+      stitchArrays({
+        thing: query.things,
+        kinds: query.thingContributionKinds,
+      }).map(({thing, kinds}) =>
+          (kinds.includes('artwork')
+            ? (thing.coverArtworks ?? thing.trackArtworks ?? [])
+                .find(artwork => artwork.artistContribs
+                  .some(contrib => contrib.artist === artist))
+            : (thing.coverArtworks ?? thing.trackArtworks)?.[0] ??
+              thing.album?.coverArtworks[0] ??
+              null));
+
+    const allGroups =
+      unique(query.thingGroups.flat());
+
+    query.groupCategories =
+      sprawl.groupCategoryData.slice();
+
+    query.groupCategoryGroups =
+      sprawl.groupCategoryData
+        .map(category => category.groups
+          .filter(group => allGroups.includes(group)));
+
+    filterMultipleArrays(
+      query.groupCategories,
+      query.groupCategoryGroups,
+      (_category, groups) => !empty(groups));
+
+    const groupsMatchingFirstKind =
+      unique(
+        stitchArrays({
+          thing: query.things,
+          groups: query.thingGroups,
+          kinds: query.thingContributionKinds,
+        }).filter(({kinds}) => kinds.includes(query.firstKind))
+          .flatMap(({groups}) => groups));
+
+    query.firstGroup =
+      sprawl.groupCategoryData
+        .flatMap(category => category.groups)
+        .find(group => groupsMatchingFirstKind.includes(group));
+
+    query.firstGroupCategory =
+      query.firstGroup.category;
+
+    return query;
+  },
+
+  relations: (relation, query, sprawl, artist) => ({
+    layout:
+      relation('generatePageLayout'),
+
+    artistNavLinks:
+      relation('generateArtistNavLinks', artist),
+
+    sourceGrid:
+      relation('generateCoverGrid'),
+
+    sourceGridImages:
+      query.thingArtworks
+        .map(artwork => relation('image', artwork)),
+
+    sourceGridLinks:
+      query.things
+        .map(thing => relation('linkAnythingMan', thing)),
+  }),
+
+  data: (query, sprawl, artist) => ({
+    name:
+      artist.name,
+
+    categoryGroupDirectories:
+      query.groupCategoryGroups
+        .map(groups => groups
+          .map(group => group.directory)),
+
+    categoryGroupNames:
+      query.groupCategoryGroups
+        .map(groups => groups
+          .map(group => group.name)),
+
+    firstGroupCategoryIndex:
+      query.groupCategories
+        .indexOf(query.firstGroupCategory),
+
+    firstGroupIndex:
+      stitchArrays({
+        category: query.groupCategories,
+        groups: query.groupCategoryGroups,
+      }).find(({category}) => category === query.firstGroupCategory)
+        .groups
+          .indexOf(query.firstGroup),
+
+    kinds:
+      query.kinds,
+
+    sourceGridNames:
+      query.things
+        .map(thing => thing.name),
+
+    sourceGridGroupDirectories:
+      query.thingGroups
+        .map(groups => groups
+          .map(group => group.directory)),
+
+    sourceGridGroupNames:
+      query.thingGroups
+        .map(groups => groups
+          .map(group => group.name)),
+
+    sourceGridContributionKinds:
+      query.thingContributionKinds,
+
+    sourceGridContributionDates:
+      query.thingContributionDates,
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    relations.layout.slots({
+      title:
+        language.$('artistRollingWindowPage.title', {
+          artist: data.name,
+        }),
+
+      mainClasses: ['top-index'],
+      mainContent: [
+        html.tag('p', {id: 'timeframe-configuration'},
+          language.$('artistRollingWindowPage.windowConfigurationLine', {
+            timeBefore:
+              language.$('artistRollingWindowPage.timeframe.months', {
+                input:
+                  html.tag('input', {id: 'timeframe-months-before'},
+                    {type: 'number'},
+                    {value: 3, min: 0}),
+              }),
+
+            timeAfter:
+              language.$('artistRollingWindowPage.timeframe.months', {
+                input:
+                  html.tag('input', {id: 'timeframe-months-after'},
+                    {type: 'number'},
+                    {value: 3, min: 1}),
+              }),
+
+            peek:
+              language.$('artistRollingWindowPage.timeframe.months', {
+                input:
+                  html.tag('input', {id: 'timeframe-months-peek'},
+                    {type: 'number'},
+                    {value: 1, min: 0}),
+              }),
+          })),
+
+        html.tag('p', {id: 'contribution-configuration'},
+          language.$('artistRollingWindowPage.contributionConfigurationLine', {
+            kind:
+              html.tag('select', {id: 'contribution-kind'},
+                data.kinds.map(kind =>
+                  html.tag('option', {value: kind},
+                    language.$('artistRollingWindowPage.contributionKind', kind)))),
+
+            group:
+              html.tag('select', {id: 'contribution-group'}, [
+                html.tag('option', {value: '-'},
+                  language.$('artistRollingWindowPage.contributionGroup.all')),
+
+                stitchArrays({
+                  names: data.categoryGroupNames,
+                  directories: data.categoryGroupDirectories,
+                }).map(({names, directories}, categoryIndex) => [
+                    html.tag('hr'),
+
+                    stitchArrays({name: names, directory: directories})
+                      .map(({name, directory}, groupIndex) =>
+                        html.tag('option', {value: directory},
+                          categoryIndex === data.firstGroupCategoryIndex &&
+                          groupIndex === data.firstGroupIndex &&
+                            {selected: true},
+
+                          language.$('artistRollingWindowPage.contributionGroup.group', {
+                            group: name,
+                          }))),
+                  ]),
+              ]),
+          })),
+
+        html.tag('p', {id: 'timeframe-selection-info'}, [
+          html.tag('span', {id: 'timeframe-selection-some'},
+            {style: 'display: none'},
+
+            language.$('artistRollingWindowPage.timeframeSelectionLine', {
+              contributions:
+                html.tag('b', {id: 'timeframe-selection-contribution-count'}),
+
+              timeframes:
+                html.tag('b', {id: 'timeframe-selection-timeframe-count'}),
+
+              firstDate:
+                html.tag('b', {id: 'timeframe-selection-first-date'}),
+
+              lastDate:
+                html.tag('b', {id: 'timeframe-selection-last-date'}),
+            })),
+
+          html.tag('span', {id: 'timeframe-selection-none'},
+            {style: 'display: none'},
+            language.$('artistRollingWindowPage.timeframeSelectionLine.none')),
+        ]),
+
+        html.tag('p', {id: 'timeframe-selection-control'},
+          {style: 'display: none'},
+
+          language.$('artistRollingWindowPage.timeframeSelectionControl', {
+            timeframes:
+              html.tag('select', {id: 'timeframe-selection-menu'}),
+
+            previous:
+              html.tag('a', {id: 'timeframe-selection-previous'},
+                {href: '#'},
+                language.$('artistRollingWindowPage.timeframeSelectionControl.previous')),
+
+            next:
+              html.tag('a', {id: 'timeframe-selection-next'},
+                {href: '#'},
+                language.$('artistRollingWindowPage.timeframeSelectionControl.next')),
+          })),
+
+        html.tag('div', {id: 'timeframe-source-area'}, [
+          html.tag('p', {id: 'timeframe-empty'},
+            {style: 'display: none'},
+            language.$('artistRollingWindowPage.emptyTimeframeLine')),
+
+          relations.sourceGrid.slots({
+            attributes: {style: 'display: none'},
+
+            lazy: true,
+
+            links:
+              relations.sourceGridLinks.map(link =>
+                link.slot('attributes', {target: '_blank'})),
+
+            names:
+              data.sourceGridNames,
+
+            images:
+              relations.sourceGridImages,
+
+            info:
+              stitchArrays({
+                contributionKinds: data.sourceGridContributionKinds,
+                contributionDates: data.sourceGridContributionDates,
+                groupDirectories: data.sourceGridGroupDirectories,
+                groupNames: data.sourceGridGroupNames,
+              }).map(({
+                  contributionKinds,
+                  contributionDates,
+                  groupDirectories,
+                  groupNames,
+                }) => [
+                  stitchArrays({
+                    directory: groupDirectories,
+                    name: groupNames,
+                  }).map(({directory, name}) =>
+                    html.tag('data', {class: 'contribution-group'},
+                      {value: directory},
+                      name)),
+
+                  stitchArrays({
+                    kind: contributionKinds,
+                    date: contributionDates,
+                  }).map(({kind, date}) =>
+                      html.tag('time', {class: `${kind}-contribution-date`},
+                        {datetime: date.toUTCString()},
+                        language.formatDate(date))),
+                ]),
+          }),
+        ]),
+      ],
+
+      navLinkStyle: 'hierarchical',
+      navLinks:
+        relations.artistNavLinks
+          .slots({
+            showExtraLinks: true,
+            currentExtra: 'rolling-window',
+          })
+          .content,
+    }),
+}
diff --git a/src/content/dependencies/generateContributionTooltip.js b/src/content/dependencies/generateContributionTooltip.js
index 3a31014d..70641ddb 100644
--- a/src/content/dependencies/generateContributionTooltip.js
+++ b/src/content/dependencies/generateContributionTooltip.js
@@ -1,3 +1,36 @@
+function compareReleaseContributions(a, b) {
+  if (a === b) {
+    return true;
+  }
+
+  const {previous: aPrev, next: aNext} = getSiblings(a);
+  const {previous: bPrev, next: bNext} = getSiblings(b);
+
+  const effective = contrib =>
+    (contrib?.thing.isAlbum && contrib.thing.style === 'single'
+      ? contrib.thing.tracks[0]
+      : contrib?.thing);
+
+  return (
+    effective(aPrev) === effective(bPrev) &&
+    effective(aNext) === effective(bNext)
+  );
+}
+
+function getSiblings(contribution) {
+  let previous = contribution;
+  while (previous && previous.thing === contribution.thing) {
+    previous = previous.previousBySameArtist;
+  }
+
+  let next = contribution;
+  while (next && next.thing === contribution.thing) {
+    next = next.nextBySameArtist;
+  }
+
+  return {previous, next};
+}
+
 export default {
   contentDependencies: [
     'generateContributionTooltipChronologySection',
@@ -5,17 +38,51 @@ export default {
     'generateTooltip',
   ],
 
-  extraDependencies: ['html'],
+  extraDependencies: ['html', 'language'],
 
-  relations: (relation, contribution) => ({
+  query: (contribution) => ({
+    albumArtistContribution:
+      (contribution.thing.isTrack
+        ? contribution.thing.album.artistContribs
+            .find(artistContrib => artistContrib.artist === contribution.artist)
+        : null),
+  }),
+
+  relations: (relation, query, contribution) => ({
     tooltip:
       relation('generateTooltip'),
 
     externalLinkSection:
       relation('generateContributionTooltipExternalLinkSection', contribution),
 
-    chronologySection:
+    ownChronologySection:
       relation('generateContributionTooltipChronologySection', contribution),
+
+    artistReleaseChronologySection:
+      (query.albumArtistContribution
+        ? relation('generateContributionTooltipChronologySection',
+            query.albumArtistContribution)
+        : null),
+  }),
+
+  data: (query, contribution) => ({
+    artistName:
+      contribution.artist.name,
+
+    isAlbumArtistContribution:
+      contribution.thing.isAlbum &&
+      contribution.thingProperty === 'artistContribs',
+
+    isSingleFirstTrackArtistContribution:
+      contribution.thing.isTrack &&
+      contribution.thingProperty === 'artistContribs' &&
+      contribution.thing.album.style === 'single' &&
+      contribution.thing.album.tracks[0] === contribution.thing,
+
+    artistReleaseChronologySectionDiffers:
+      (query.albumArtistContribution
+        ? !compareReleaseContributions(contribution, query.albumArtistContribution)
+        : null),
   }),
 
   slots: {
@@ -25,24 +92,64 @@ export default {
     chronologyKind: {type: 'string'},
   },
 
-  generate: (relations, slots, {html}) =>
-    relations.tooltip.slots({
-      attributes:
-        {class: 'contribution-tooltip'},
-
-      contentAttributes: {
-        [html.joinChildren]:
-          html.tag('span', {class: 'tooltip-divider'}),
-      },
-
-      content: [
-        slots.showExternalLinks &&
-          relations.externalLinkSection,
-
-        slots.showChronology &&
-          relations.chronologySection.slots({
-            kind: slots.chronologyKind,
-          }),
-      ],
-    }),
+  generate: (data, relations, slots, {html, language}) =>
+    language.encapsulate('misc.artistLink', capsule =>
+      relations.tooltip.slots({
+        attributes:
+          {class: 'contribution-tooltip'},
+
+        contentAttributes: {
+          [html.joinChildren]:
+            html.tag('span', {class: 'tooltip-divider'}),
+        },
+
+        content: [
+          slots.showExternalLinks &&
+            relations.externalLinkSection,
+
+          slots.showChronology &&
+            language.encapsulate(capsule, 'chronology', capsule => {
+              const chronologySections = [];
+
+              if (data.isAlbumArtistContribution) {
+                relations.ownChronologySection.setSlots({
+                  kind: 'release',
+                  heading:
+                    language.$(capsule, 'heading.artistReleases', {
+                      artist: data.artistName,
+                    }),
+                });
+              } else {
+                relations.ownChronologySection.setSlot('kind', slots.chronologyKind);
+              }
+
+              if (
+                data.isSingleFirstTrackArtistContribution &&
+                !html.isBlank(relations.artistReleaseChronologySection)
+              ) {
+                relations.artistReleaseChronologySection.setSlot('kind', 'release');
+
+                relations.artistReleaseChronologySection.setSlot('heading',
+                  language.$(capsule, 'heading.artistReleases', {
+                    artist: data.artistName,
+                  }));
+
+                chronologySections.push(relations.artistReleaseChronologySection);
+
+                if (data.artistReleaseChronologySectionDiffers) {
+                  relations.ownChronologySection.setSlot('heading',
+                    language.$(capsule, 'heading.artistTracks', {
+                      artist: data.artistName,
+                    }));
+
+                  chronologySections.push(relations.ownChronologySection);
+                }
+              } else {
+                chronologySections.push(relations.ownChronologySection);
+              }
+
+              return chronologySections;
+            }),
+        ],
+      })),
 };
diff --git a/src/content/dependencies/generateContributionTooltipChronologySection.js b/src/content/dependencies/generateContributionTooltipChronologySection.js
index fb668844..4ee9bb35 100644
--- a/src/content/dependencies/generateContributionTooltipChronologySection.js
+++ b/src/content/dependencies/generateContributionTooltipChronologySection.js
@@ -10,23 +10,27 @@ function getName(thing) {
   return thing.name;
 }
 
+function getSiblings(contribution) {
+  let previous = contribution;
+  while (previous && previous.thing === contribution.thing) {
+    previous = previous.previousBySameArtist;
+  }
+
+  let next = contribution;
+  while (next && next.thing === contribution.thing) {
+    next = next.nextBySameArtist;
+  }
+
+  return {previous, next};
+}
+
 export default {
   contentDependencies: ['linkAnythingMan'],
   extraDependencies: ['html', 'language'],
 
-  query(contribution) {
-    let previous = contribution;
-    while (previous && previous.thing === contribution.thing) {
-      previous = previous.previousBySameArtist;
-    }
-
-    let next = contribution;
-    while (next && next.thing === contribution.thing) {
-      next = next.nextBySameArtist;
-    }
-
-    return {previous, next};
-  },
+  query: (contribution) => ({
+    ...getSiblings(contribution),
+  }),
 
   relations: (relation, query, _contribution) => ({
     previousLink:
diff --git a/src/content/dependencies/generateCoverGrid.js b/src/content/dependencies/generateCoverGrid.js
index e4dfd905..e1f13af3 100644
--- a/src/content/dependencies/generateCoverGrid.js
+++ b/src/content/dependencies/generateCoverGrid.js
@@ -11,6 +11,8 @@ export default {
   },
 
   slots: {
+    attributes: {type: 'attributes', mutable: false},
+
     images: {validate: v => v.strictArrayOf(v.isHTML)},
     links: {validate: v => v.strictArrayOf(v.isHTML)},
     names: {validate: v => v.strictArrayOf(v.isHTML)},
@@ -36,6 +38,7 @@ export default {
 
   generate: (relations, slots, {html, language}) =>
     html.tag('div', {class: 'grid-listing'},
+      slots.attributes,
       {[html.onlyIfContent]: true},
 
       [
@@ -59,6 +62,8 @@ export default {
           }, index) =>
             link.slots({
               attributes: [
+                link.getSlotValue('attributes'),
+
                 {class: ['grid-item', 'box']},
 
                 (classes
diff --git a/src/content/dependencies/generateTrackList.js b/src/content/dependencies/generateTrackList.js
index f3ada092..ff7659b5 100644
--- a/src/content/dependencies/generateTrackList.js
+++ b/src/content/dependencies/generateTrackList.js
@@ -4,9 +4,11 @@ export default {
 
   query: (tracks, contextTrack) => ({
     presentedTracks:
-      tracks.map(track =>
-        track.otherReleases.find(({album}) => album === contextTrack.album) ??
-        track),
+      (contextTrack
+        ? tracks.map(track =>
+            track.otherReleases.find(({album}) => album === contextTrack.album) ??
+            track)
+        : tracks),
   }),
 
   relations: (relation, query, _tracks, _contextTrack) => ({
diff --git a/src/content/dependencies/linkArtistRollingWindow.js b/src/content/dependencies/linkArtistRollingWindow.js
new file mode 100644
index 00000000..e94b8ec5
--- /dev/null
+++ b/src/content/dependencies/linkArtistRollingWindow.js
@@ -0,0 +1,8 @@
+export default {
+  contentDependencies: ['linkThing'],
+
+  relations: (relation, artist) =>
+    ({link: relation('linkThing', 'localized.artistRollingWindow', artist)}),
+
+  generate: (relations) => relations.link,
+};
diff --git a/src/data/things/artist.js b/src/data/things/artist.js
index 12abc4c3..accebf20 100644
--- a/src/data/things/artist.js
+++ b/src/data/things/artist.js
@@ -5,14 +5,21 @@ import {inspect} from 'node:util';
 import CacheableObject from '#cacheable-object';
 import {colors} from '#cli';
 import {input} from '#composite';
-import {sortAlphabetically} from '#sort';
 import {stitchArrays} from '#sugar';
 import Thing from '#thing';
 import {isName, validateArrayItems} from '#validators';
 import {getKebabCase} from '#wiki-data';
 import {parseArtwork} from '#yaml';
 
+import {
+  sortAlbumsTracksChronologically,
+  sortArtworksChronologically,
+  sortAlphabetically,
+  sortContributionsChronologically,
+} from '#sort';
+
 import {exitWithoutDependency, exposeConstant} from '#composite/control-flow';
+import {withReverseReferenceList} from '#composite/wiki-data';
 
 import {
   constitutibleArtwork,
@@ -130,6 +137,102 @@ export class Artist extends Thing {
       reverse: soupyReverse.input('groupsCloselyLinkedTo'),
     }),
 
+    musicContributions: [
+      withReverseReferenceList({
+        reverse: soupyReverse.input('trackArtistContributionsBy'),
+      }).outputs({
+        '#reverseReferenceList': '#trackArtistContribs',
+      }),
+
+      withReverseReferenceList({
+        reverse: soupyReverse.input('trackContributorContributionsBy'),
+      }).outputs({
+        '#reverseReferenceList': '#trackContributorContribs',
+      }),
+
+      {
+        dependencies: [
+          '#trackArtistContribs',
+          '#trackContributorContribs',
+        ],
+
+        compute: (continuation, {
+          ['#trackArtistContribs']: trackArtistContribs,
+          ['#trackContributorContribs']: trackContributorContribs,
+        }) => continuation({
+          ['#contributions']: [
+            ...trackArtistContribs,
+            ...trackContributorContribs,
+          ],
+        }),
+      },
+
+      {
+        dependencies: ['#contributions'],
+        compute: ({'#contributions': contributions}) =>
+          sortContributionsChronologically(
+            contributions,
+            sortAlbumsTracksChronologically),
+      },
+    ],
+
+    artworkContributions: [
+      withReverseReferenceList({
+        reverse: soupyReverse.input('trackCoverArtistContributionsBy'),
+      }).outputs({
+        '#reverseReferenceList': '#trackCoverArtistContribs',
+      }),
+
+      withReverseReferenceList({
+        reverse: soupyReverse.input('albumCoverArtistContributionsBy'),
+      }).outputs({
+        '#reverseReferenceList': '#albumCoverArtistContribs',
+      }),
+
+      withReverseReferenceList({
+        reverse: soupyReverse.input('albumWallpaperArtistContributionsBy'),
+      }).outputs({
+        '#reverseReferenceList': '#albumWallpaperArtistContribs',
+      }),
+
+      withReverseReferenceList({
+        reverse: soupyReverse.input('albumBannerArtistContributionsBy'),
+      }).outputs({
+        '#reverseReferenceList': '#albumBannerArtistContribs',
+      }),
+
+      {
+        dependencies: [
+          '#trackCoverArtistContribs',
+          '#albumCoverArtistContribs',
+          '#albumWallpaperArtistContribs',
+          '#albumBannerArtistContribs',
+        ],
+
+        compute: (continuation, {
+          ['#trackCoverArtistContribs']: trackCoverArtistContribs,
+          ['#albumCoverArtistContribs']: albumCoverArtistContribs,
+          ['#albumWallpaperArtistContribs']: albumWallpaperArtistContribs,
+          ['#albumBannerArtistContribs']: albumBannerArtistContribs,
+        }) => continuation({
+          ['#contributions']: [
+            ...trackCoverArtistContribs,
+            ...albumCoverArtistContribs,
+            ...albumWallpaperArtistContribs,
+            ...albumBannerArtistContribs,
+          ],
+        }),
+      },
+
+      {
+        dependencies: ['#contributions'],
+        compute: ({'#contributions': contributions}) =>
+          sortContributionsChronologically(
+            contributions,
+            sortArtworksChronologically),
+      },
+    ],
+
     totalDuration: artistTotalDuration(),
   });
 
diff --git a/src/data/things/language.js b/src/data/things/language.js
index 84e7a946..8d102a67 100644
--- a/src/data/things/language.js
+++ b/src/data/things/language.js
@@ -388,21 +388,13 @@ export class Language extends Thing {
       partInProgress += template.slice(lastIndex, match.index);
 
       for (const insertionItem of html.smush(insertion).content) {
-        // Sanitize string arguments in particular. These are taken to come from
-        // (raw) data and may include special characters that aren't meant to be
-        // rendered as HTML markup.
-        // (XXX: This actually sanitizes every value, stringifying numbers
-        //  and booleans also. We haven't checked what impact that has.)
-        const sanitizedInsertionItem =
-          this.#sanitizeValueForInsertion(insertionItem);
-
-        if (typeof sanitizedInsertionItem === 'string') {
+        if (typeof insertionItem === 'string') {
           // Join consecutive strings together.
-          partInProgress += sanitizedInsertionItem;
+          partInProgress += insertionItem;
         } else {
           // Push the string part in progress, then the insertion as-is.
           outputParts.push(partInProgress);
-          outputParts.push(sanitizedInsertionItem);
+          outputParts.push(insertionItem);
           partInProgress = '';
         }
       }
diff --git a/src/page/artist.js b/src/page/artist.js
index 257e060d..bd8b8988 100644
--- a/src/page/artist.js
+++ b/src/page/artist.js
@@ -32,6 +32,16 @@ export function pathsForTarget(artist) {
         args: [artist],
       },
     },
+
+    {
+      type: 'page',
+      path: ['artistRollingWindow', artist.directory],
+
+      contentFunction: {
+        name: 'generateArtistRollingWindowPage',
+        args: [artist],
+      },
+    },
   ];
 }
 
diff --git a/src/static/css/site.css b/src/static/css/site.css
index bfbe1e56..6faf9c05 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -2416,6 +2416,65 @@ html[data-url-key="localized.albumCommentary"] p.track-info {
   margin-left: 20px;
 }
 
+html[data-url-key="localized.artistRollingWindow"] #content p {
+  text-align: center;
+}
+
+html[data-url-key="localized.artistRollingWindow"] #content input[type=number] {
+  width: 3em;
+  margin: 0 0.25em;
+  background: black;
+  color: white;
+  border: 1px dotted var(--primary-color);
+  padding: 4px;
+  border-radius: 3px;
+}
+
+html[data-url-key="localized.artistRollingWindow"] #timeframe-selection-control a {
+  display: inline-block;
+  padding: 5px;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
+html[data-url-key="localized.artistRollingWindow"] #timeframe-selection-control a:not([href]) {
+  text-decoration: none;
+  opacity: 0.7;
+}
+
+html[data-url-key="localized.artistRollingWindow"] #timeframe-source-area {
+  border: 1px dashed #ffffff42;
+  border-top-style: solid;
+  border-bottom-style: solid;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: calc(100vh - 260px);
+}
+
+html[data-url-key="localized.artistRollingWindow"] #timeframe-source-area .grid-listing {
+  width: 100%;
+}
+
+html[data-url-key="localized.artistRollingWindow"] .grid-item.peeking {
+  opacity: 0.8;
+  background: #ffffff24;
+}
+
+html[data-url-key="localized.artistRollingWindow"] .grid-item > span:not(:first-of-type) {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+html[data-url-key="localized.artistRollingWindow"] .grid-item > span:not(:first-of-type) > *:not([style*="display: none"]) ~ *::before {
+  content: '\00b7';
+  margin-left: 0.5ch;
+  margin-right: 0.5ch;
+}
+
 html[data-url-key="localized.groupInfo"] .by a {
   color: var(--page-primary-color);
 }
@@ -2963,6 +3022,7 @@ video.pixelate, .pixelate video {
   justify-content: center;
   align-items: flex-start;
   padding: 5px 15px;
+  box-sizing: border-box;
 }
 
 .grid-item {
diff --git a/src/static/js/client-util.js b/src/static/js/client-util.js
index 71112313..5a35bcf2 100644
--- a/src/static/js/client-util.js
+++ b/src/static/js/client-util.js
@@ -127,3 +127,10 @@ export function dispatchInternalEvent(event, eventName, ...args) {
 
   return results;
 }
+
+const languageCode = document.documentElement.getAttribute('lang');
+
+export function formatDate(inputDate) {
+  const date = new Date(inputDate);
+  return date.toLocaleDateString(languageCode);
+}
diff --git a/src/static/js/client/artist-rolling-window.js b/src/static/js/client/artist-rolling-window.js
new file mode 100644
index 00000000..b201e7df
--- /dev/null
+++ b/src/static/js/client/artist-rolling-window.js
@@ -0,0 +1,573 @@
+/* eslint-env browser */
+
+import {cssProp, formatDate} from '../client-util.js';
+
+import {sortByDate} from '../../shared-util/sort.js';
+import {chunkByConditions, chunkByProperties, empty, stitchArrays}
+  from '../../shared-util/sugar.js';
+
+export const info = {
+  id: 'artistRollingWindowInfo',
+
+  timeframeMonthsBefore: null,
+  timeframeMonthsAfter: null,
+  timeframeMonthsPeek: null,
+
+  contributionKind: null,
+  contributionGroup: null,
+
+  timeframeSelectionSomeLine: null,
+  timeframeSelectionNoneLine: null,
+
+  timeframeSelectionContributionCount: null,
+  timeframeSelectionTimeframeCount: null,
+  timeframeSelectionFirstDate: null,
+  timeframeSelectionLastDate: null,
+
+  timeframeSelectionControl: null,
+  timeframeSelectionMenu: null,
+  timeframeSelectionPrevious: null,
+  timeframeSelectionNext: null,
+
+  timeframeEmptyLine: null,
+
+  sourceArea: null,
+  sourceGrid: null,
+  sources: null,
+};
+
+export function getPageReferences() {
+  if (document.documentElement.dataset.urlKey !== 'localized.artistRollingWindow') {
+    return;
+  }
+
+  info.timeframeMonthsBefore =
+    document.getElementById('timeframe-months-before');
+
+  info.timeframeMonthsAfter =
+    document.getElementById('timeframe-months-after');
+
+  info.timeframeMonthsPeek =
+    document.getElementById('timeframe-months-peek');
+
+  info.contributionKind =
+    document.getElementById('contribution-kind');
+
+  info.contributionGroup =
+    document.getElementById('contribution-group');
+
+  info.timeframeSelectionSomeLine =
+    document.getElementById('timeframe-selection-some');
+
+  info.timeframeSelectionNoneLine =
+    document.getElementById('timeframe-selection-none');
+
+  info.timeframeSelectionContributionCount =
+    document.getElementById('timeframe-selection-contribution-count');
+
+  info.timeframeSelectionTimeframeCount =
+    document.getElementById('timeframe-selection-timeframe-count');
+
+  info.timeframeSelectionFirstDate =
+    document.getElementById('timeframe-selection-first-date');
+
+  info.timeframeSelectionLastDate =
+    document.getElementById('timeframe-selection-last-date');
+
+  info.timeframeSelectionControl =
+    document.getElementById('timeframe-selection-control');
+
+  info.timeframeSelectionMenu =
+    document.getElementById('timeframe-selection-menu');
+
+  info.timeframeSelectionPrevious =
+    document.getElementById('timeframe-selection-previous');
+
+  info.timeframeSelectionNext =
+    document.getElementById('timeframe-selection-next');
+
+  info.timeframeEmptyLine =
+    document.getElementById('timeframe-empty');
+
+  info.sourceArea =
+    document.getElementById('timeframe-source-area');
+
+  info.sourceGrid =
+    info.sourceArea.querySelector('.grid-listing');
+
+  info.sources =
+    info.sourceGrid.getElementsByClassName('grid-item');
+}
+
+export function addPageListeners() {
+  if (!info.sourceArea) {
+    return;
+  }
+
+  for (const input of [
+    info.timeframeMonthsBefore,
+    info.timeframeMonthsAfter,
+    info.timeframeMonthsPeek,
+    info.contributionKind,
+    info.contributionGroup,
+  ]) {
+    input.addEventListener('change', () => {
+      updateArtistRollingWindow()
+    });
+  }
+
+  info.timeframeSelectionMenu.addEventListener('change', () => {
+    updateRollingWindowTimeframeSelection();
+  });
+
+  const eatClicks = (element, callback) => {
+    element.addEventListener('click', domEvent => {
+      domEvent.preventDefault();
+      callback();
+    });
+
+    element.addEventListener('mousedown', domEvent => {
+      if (domEvent.detail > 1) {
+        domEvent.preventDefault();
+      }
+    });
+  };
+
+  eatClicks(info.timeframeSelectionNext, nextRollingTimeframeSelection);
+  eatClicks(info.timeframeSelectionPrevious, previousRollingTimeframeSelection);
+}
+
+export function mutatePageContent() {
+  if (!info.sourceArea) {
+    return;
+  }
+
+  updateArtistRollingWindow();
+}
+
+function previousRollingTimeframeSelection() {
+  const menu = info.timeframeSelectionMenu;
+
+  if (menu.selectedIndex > 0) {
+    menu.selectedIndex--;
+  }
+
+  updateRollingWindowTimeframeSelection();
+}
+
+function nextRollingTimeframeSelection() {
+  const menu = info.timeframeSelectionMenu;
+
+  if (menu.selectedIndex < menu.length - 1) {
+    menu.selectedIndex++;
+  }
+
+  updateRollingWindowTimeframeSelection();
+}
+
+function getArtistRollingWindowSourceInfo() {
+  const sourceElements =
+    Array.from(info.sources);
+
+  const sourceTimeElements =
+    sourceElements
+      .map(el => Array.from(el.getElementsByTagName('time')));
+
+  const sourceTimeClasses =
+    sourceTimeElements
+      .map(times => times
+        .map(time => Array.from(time.classList)));
+
+  const sourceKinds =
+    sourceTimeClasses
+      .map(times => times
+        .map(classes => classes
+          .find(cl => cl.endsWith('-contribution-date'))
+          .slice(0, -'-contribution-date'.length)));
+
+  const sourceGroups =
+    sourceElements
+      .map(el =>
+        Array.from(el.querySelectorAll('.contribution-group'))
+          .map(data => data.value));
+
+  const sourceDates =
+    sourceTimeElements
+      .map(times => times
+        .map(time => new Date(time.getAttribute('datetime'))));
+
+  return stitchArrays({
+    element: sourceElements,
+    kinds: sourceKinds,
+    groups: sourceGroups,
+    dates: sourceDates,
+  });
+}
+
+function getArtistRollingWindowTimeframeInfo() {
+  const contributionKind =
+    info.contributionKind.value;
+
+  const contributionGroup =
+    info.contributionGroup.value;
+
+  const sourceInfo =
+    getArtistRollingWindowSourceInfo();
+
+  const principalSources =
+    sourceInfo.filter(source => {
+      if (!source.kinds.includes(contributionKind)) {
+        return false;
+      }
+
+      if (contributionGroup !== '-') {
+        if (!source.groups.includes(contributionGroup)) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+
+  const principalSourceDates =
+    principalSources.map(source =>
+      stitchArrays({
+        kind: source.kinds,
+        date: source.dates,
+      }).find(({kind}) => kind === contributionKind)
+        .date);
+
+  const getPeekDate = inputDate => {
+    const date = new Date(inputDate);
+
+    date.setMonth(
+      (date.getMonth()
+     - parseInt(info.timeframeMonthsBefore.value)
+     - parseInt(info.timeframeMonthsPeek.value)));
+
+    return date;
+  };
+
+  const getEntranceDate = inputDate => {
+    const date = new Date(inputDate);
+
+    date.setMonth(
+      (date.getMonth()
+     - parseInt(info.timeframeMonthsBefore.value)));
+
+    return date;
+  };
+
+  const getExitDate = inputDate => {
+    const date = new Date(inputDate);
+
+    date.setMonth(
+      (date.getMonth()
+     + parseInt(info.timeframeMonthsAfter.value)));
+
+    return date;
+  };
+
+  const principalSourceIndices =
+    Array.from({length: principalSources.length}, (_, i) => i);
+
+  const timeframeSourceChunks =
+    chunkByConditions(principalSourceIndices, [
+      (previous, next) =>
+        +principalSourceDates[previous] !==
+        +principalSourceDates[next],
+    ]);
+
+  const timeframeSourceChunkDates =
+    timeframeSourceChunks
+      .map(indices => indices[0])
+      .map(index => principalSourceDates[index]);
+
+  const timeframeSourceChunkPeekDates =
+    timeframeSourceChunkDates
+      .map(getPeekDate);
+
+  const timeframeSourceChunkEntranceDates =
+    timeframeSourceChunkDates
+      .map(getEntranceDate);
+
+  const timeframeSourceChunkExitDates =
+    timeframeSourceChunkDates
+      .map(getExitDate);
+
+  const peekDateInfo =
+    stitchArrays({
+      peek: timeframeSourceChunkPeekDates,
+      indices: timeframeSourceChunks,
+    }).map(({peek, indices}) => ({
+        date: peek,
+        peek: indices,
+      }));
+
+  const entranceDateInfo =
+    stitchArrays({
+      entrance: timeframeSourceChunkEntranceDates,
+      indices: timeframeSourceChunks,
+    }).map(({entrance, indices}) => ({
+        date: entrance,
+        entrance: indices,
+      }));
+
+  const exitDateInfo =
+    stitchArrays({
+      exit: timeframeSourceChunkExitDates,
+      indices: timeframeSourceChunks,
+    }).map(({exit, indices}) => ({
+        date: exit,
+        exit: indices,
+      }));
+
+  const dateInfoChunks =
+    chunkByProperties(
+      sortByDate([
+        ...peekDateInfo,
+        ...entranceDateInfo,
+        ...exitDateInfo,
+      ]),
+      ['date']);
+
+  const dateInfo =
+    dateInfoChunks
+      .map(({chunk}) =>
+        Object.assign({
+          peek: null,
+          entrance: null,
+          exit: null,
+        }, ...chunk));
+
+  const timeframeInfo =
+    dateInfo.reduce(
+      (accumulator, {date, peek, entrance, exit}) => {
+        const previous = accumulator.at(-1);
+
+        // These mustn't be mutated!
+        let peeking = (previous ? previous.peeking : []);
+        let tracking = (previous ? previous.tracking : []);
+
+        if (peek) {
+          peeking =
+            peeking.concat(peek);
+        }
+
+        if (entrance) {
+          peeking =
+            peeking.filter(index => !entrance.includes(index));
+
+          tracking =
+            tracking.concat(entrance);
+        }
+
+        if (exit) {
+          tracking =
+            tracking.filter(index => !exit.includes(index));
+        }
+
+        return [...accumulator, {
+          date,
+          peeking,
+          tracking,
+          peek,
+          entrance,
+          exit,
+        }];
+      },
+      []);
+
+  const indicesToSources = indices =>
+    (indices
+      ? indices.map(index => principalSources[index])
+      : null);
+
+  const finalizedTimeframeInfo =
+    timeframeInfo.map(({
+      date,
+      peeking,
+      tracking,
+      peek,
+      entrance,
+      exit,
+    }) => ({
+      date,
+      peeking: indicesToSources(peeking),
+      tracking: indicesToSources(tracking),
+      peek: indicesToSources(peek),
+      entrance: indicesToSources(entrance),
+      exit: indicesToSources(exit),
+    }));
+
+  return finalizedTimeframeInfo;
+}
+
+function updateArtistRollingWindow() {
+  const timeframeInfo =
+    getArtistRollingWindowTimeframeInfo();
+
+  if (empty(timeframeInfo)) {
+    cssProp(info.timeframeSelectionControl, 'display', 'none');
+    cssProp(info.timeframeSelectionSomeLine, 'display', 'none');
+    cssProp(info.timeframeSelectionNoneLine, 'display', null);
+
+    updateRollingWindowTimeframeSelection(timeframeInfo);
+
+    return;
+  }
+
+  cssProp(info.timeframeSelectionControl, 'display', null);
+  cssProp(info.timeframeSelectionSomeLine, 'display', null);
+  cssProp(info.timeframeSelectionNoneLine, 'display', 'none');
+
+  // The last timeframe is just the exit of the final tracked sources,
+  // so we aren't going to display a menu option for it, and will just use
+  // it as the end of the final option's date range.
+
+  const usedTimeframes = timeframeInfo.slice(0, -1);
+  const firstTimeframe = timeframeInfo.at(0);
+  const lastTimeframe = timeframeInfo.at(-1);
+
+  const sourceCount =
+    timeframeInfo
+      .flatMap(({entrance}) => entrance ?? [])
+      .length;
+
+  const timeframeCount =
+    usedTimeframes.length;
+
+  info.timeframeSelectionContributionCount.innerText = sourceCount;
+  info.timeframeSelectionTimeframeCount.innerText = timeframeCount;
+
+  const firstDate = firstTimeframe.date;
+  const lastDate = lastTimeframe.date;
+
+  info.timeframeSelectionFirstDate.innerText = formatDate(firstDate);
+  info.timeframeSelectionLastDate.innerText = formatDate(lastDate);
+
+  while (info.timeframeSelectionMenu.firstChild) {
+    info.timeframeSelectionMenu.firstChild.remove();
+  }
+
+  for (const [index, timeframe] of usedTimeframes.entries()) {
+    const nextTimeframe = timeframeInfo[index + 1];
+
+    const option = document.createElement('option');
+
+    option.appendChild(document.createTextNode(
+      `${formatDate(timeframe.date)} – ${formatDate(nextTimeframe.date)}`));
+
+    info.timeframeSelectionMenu.appendChild(option);
+  }
+
+  updateRollingWindowTimeframeSelection(timeframeInfo);
+}
+
+function updateRollingWindowTimeframeSelection(timeframeInfo) {
+  timeframeInfo ??= getArtistRollingWindowTimeframeInfo();
+
+  updateRollingWindowTimeframeSelectionControls(timeframeInfo);
+  updateRollingWindowTimeframeSelectionSources(timeframeInfo);
+}
+
+function updateRollingWindowTimeframeSelectionControls(timeframeInfo) {
+  const currentIndex =
+    info.timeframeSelectionMenu.selectedIndex;
+
+  const atFirstTimeframe =
+    currentIndex === 0;
+
+  // The last actual timeframe is empty and not displayed as a menu option.
+  const atLastTimeframe =
+    currentIndex === timeframeInfo.length - 2;
+
+  if (atFirstTimeframe) {
+    info.timeframeSelectionPrevious.removeAttribute('href');
+  } else {
+    info.timeframeSelectionPrevious.setAttribute('href', '#');
+  }
+
+  if (atLastTimeframe) {
+    info.timeframeSelectionNext.removeAttribute('href');
+  } else {
+    info.timeframeSelectionNext.setAttribute('href', '#');
+  }
+}
+
+function updateRollingWindowTimeframeSelectionSources(timeframeInfo) {
+  const currentIndex =
+    info.timeframeSelectionMenu.selectedIndex;
+
+  const contributionGroup =
+    info.contributionGroup.value;
+
+  cssProp(info.sourceGrid, 'display', null);
+
+  const {peeking: peekingSources, tracking: trackingSources} =
+    (empty(timeframeInfo)
+      ? {peeking: [], tracking: []}
+      : timeframeInfo[currentIndex]);
+
+  const peekingElements =
+    peekingSources.map(source => source.element);
+
+  const trackingElements =
+    trackingSources.map(source => source.element);
+
+  const showingElements =
+    [...trackingElements, ...peekingElements];
+
+  const hidingElements =
+    Array.from(info.sources)
+      .filter(element =>
+        !peekingElements.includes(element) &&
+        !trackingElements.includes(element));
+
+  for (const element of peekingElements) {
+    element.classList.add('peeking');
+    element.classList.remove('tracking');
+  }
+
+  for (const element of trackingElements) {
+    element.classList.remove('peeking');
+    element.classList.add('tracking');
+  }
+
+  for (const element of hidingElements) {
+    element.classList.remove('peeking');
+    element.classList.remove('tracking');
+    cssProp(element, 'display', 'none');
+  }
+
+  for (const element of showingElements) {
+    cssProp(element, 'display', null);
+
+    for (const time of element.getElementsByTagName('time')) {
+      for (const className of time.classList) {
+        if (!className.endsWith('-contribution-date')) continue;
+
+        const kind = className.slice(0, -'-contribution-date'.length);
+        if (kind === info.contributionKind.value) {
+          cssProp(time, 'display', null);
+        } else {
+          cssProp(time, 'display', 'none');
+        }
+      }
+    }
+
+    for (const data of element.getElementsByClassName('contribution-group')) {
+      if (contributionGroup === '-' || data.value !== contributionGroup) {
+        cssProp(data, 'display', null);
+      } else {
+        cssProp(data, 'display', 'none');
+      }
+    }
+  }
+
+  if (empty(peekingElements) && empty(trackingElements)) {
+    cssProp(info.timeframeEmptyLine, 'display', null);
+  } else {
+    cssProp(info.timeframeEmptyLine, 'display', 'none');
+  }
+}
diff --git a/src/static/js/client/index.js b/src/static/js/client/index.js
index aeb9264a..9d7eae86 100644
--- a/src/static/js/client/index.js
+++ b/src/static/js/client/index.js
@@ -7,6 +7,7 @@ import * as albumCommentarySidebarModule from './album-commentary-sidebar.js';
 import * as artTagGalleryFilterModule from './art-tag-gallery-filter.js';
 import * as artTagNetworkModule from './art-tag-network.js';
 import * as artistExternalLinkTooltipModule from './artist-external-link-tooltip.js';
+import * as artistRollingWindowModule from './artist-rolling-window.js';
 import * as cssCompatibilityAssistantModule from './css-compatibility-assistant.js';
 import * as datetimestampTooltipModule from './datetimestamp-tooltip.js';
 import * as draggedLinkModule from './dragged-link.js';
@@ -30,6 +31,7 @@ export const modules = [
   artTagGalleryFilterModule,
   artTagNetworkModule,
   artistExternalLinkTooltipModule,
+  artistRollingWindowModule,
   cssCompatibilityAssistantModule,
   datetimestampTooltipModule,
   draggedLinkModule,
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 75d8f075..a56956f9 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -564,6 +564,10 @@ misc:
     noExternalLinkPlatformName: "Other"
 
     chronology:
+      heading:
+        artistReleases: "Releases by {ARTIST}:"
+        artistTracks: "Tracks by {ARTIST}:"
+
       previous:
         symbol: "←"
         info:
@@ -581,6 +585,7 @@ misc:
         bannerArt: "banner art"
         coverArt: "cover art"
         flash: "flash"
+        release: "release"
         track: "track"
         trackArt: "track art"
         trackContribution: "track contribution"
@@ -789,8 +794,10 @@ misc:
   nav:
     previous: "Previous"
     next: "Next"
+
     info: "Info"
     gallery: "Gallery"
+    rollingWindow: "Rolling Window"
 
   # pageTitle:
   #   Title set under the page's <title> HTML element, which is
@@ -1417,6 +1424,41 @@ artistGalleryPage:
   infoLine: >-
     Contributed to {COVER_ARTS}.
 
+artistRollingWindowPage:
+  title: "{ARTIST} - Rolling Window"
+
+  windowConfigurationLine: >-
+    With a rolling window of {TIME_BEFORE} before a given date, and {TIME_AFTER} after, peeking ahead {PEEK}...
+
+  contributionConfigurationLine: >-
+    Selecting {KIND} contributions from group {GROUP}...
+
+  timeframeSelectionLine:
+    _: >-
+      There are {CONTRIBUTIONS} contributions, making {TIMEFRAMES} timeframes between {FIRST_DATE} and {LAST_DATE}.
+    none: >-
+      There aren't any matching contributions, or those which do aren't dated, so there are no timeframes.
+
+  emptyTimeframeLine: >-
+    This timeframe is empty, since no contributions are in range.
+
+  timeframeSelectionControl:
+    _: "{PREVIOUS} {TIMEFRAMES} {NEXT}"
+    previous: "← Previous"
+    next: "Next →"
+
+  contributionKind:
+    artwork: "Artwork"
+    music: "Music"
+    flash: "Flash"
+
+  contributionGroup:
+    all: "All groups"
+    group: "{GROUP}"
+
+  timeframe:
+    months: "{INPUT} months"
+
 #
 # artTagPage:
 #   Stuff that's common between art tag pages.
diff --git a/src/urls-default.yaml b/src/urls-default.yaml
index cbdd8a23..667f7d8b 100644
--- a/src/urls-default.yaml
+++ b/src/urls-default.yaml
@@ -41,6 +41,7 @@ localized:
 
     artist: 'artist/<>/'
     artistGallery: 'artist/<>/gallery/'
+    artistRollingWindow: 'artist/<>/rolling-window/'
 
     commentaryIndex: 'commentary/'