1 files changed, 51 insertions, 32 deletions

diff --git a/src/content/dependencies/generateTrackInfoPageContent.js b/src/content/dependencies/generateTrackInfoPageContent.js
index 2f346d65..ed2662e6 100644
--- a/src/content/dependencies/generateTrackInfoPageContent.js
+++ b/src/content/dependencies/generateTrackInfoPageContent.js
@@ -129,6 +129,32 @@ export default {
           topLevelGroups);
     }
 
+    // Section: Sampled tracks
+
+    if (!empty(track.sampledTracks)) {
+      const samples = sections.samples = {};
+
+      samples.heading =
+        relation('generateContentHeading');
+
+      samples.list =
+        relation('generateTrackList', track.sampledTracks);
+    }
+
+    // Section: Tracks that sample
+
+    if (!empty(track.sampledByTracks)) {
+      const sampledBy = sections.sampledBy = {};
+
+      sampledBy.heading =
+        relation('generateContentHeading');
+
+      sampledBy.list =
+        relation('generateTrackListDividedByGroups',
+          track.sampledByTracks,
+          topLevelGroups);
+    }
+
     // Section: Flashes that feature
 
     if (sprawl.enableFlashesAndGames) {
@@ -401,6 +427,31 @@ export default {
           sec.referencedBy.list,
         ],
 
+        sec.samples && [
+          sec.samples.heading
+            .slots({
+              id: 'samples',
+              title:
+                language.$('releaseInfo.tracksSampled', {
+                  track: html.tag('i', data.name),
+                }),
+            }),
+
+          sec.samples.list,
+        ],
+
+        sec.sampledBy && [
+          sec.sampledBy.heading
+            .slots({
+              id: 'referenced-by',
+              title:
+                language.$('releaseInfo.tracksThatSample', {
+                  track: html.tag('i', data.name),
+                }),
+            }),
+
+          sec.sampledBy.list,
+        ],
         sec.flashesThatFeature && [
           sec.flashesThatFeature.heading
             .slots({
@@ -669,38 +720,6 @@ export function write(track, {wikiData}) {
           color: track.color,
         },
 
-        main: {
-          headingMode: 'sticky',
-
-          content: [
-            ...html.fragment(
-              !empty(sampledTracks) && [
-                generateContentHeading({
-                  id: 'samples',
-                  title:
-                    language.$('releaseInfo.tracksSampled', {
-                      track: html.tag('i', track.name),
-                    }),
-                }),
-
-                html.tag('ul', sampledTracks.map(getTrackItem)),
-              ]),
-
-            ...html.fragment(
-              !empty(sampledByTracks) && [
-                generateContentHeading({
-                  id: 'sampled-by',
-                  title:
-                    language.$('releaseInfo.tracksThatSample', {
-                      track: html.tag('i', track.name),
-                    })
-                }),
-
-                html.tag('ul', sampledByTracks.map(getTrackItem)),
-              ]),
-          ],
-        },
-
         sidebarLeft: generateAlbumSidebar(album, track, {
           fancifyURL,
           getLinkThemeString,