1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
  | 
import {getTotalDuration} from '#wiki-data';
export default {
  sprawl({albumData, trackData, wikiInfo}) {
    return {
      wikiName: wikiInfo.name,
      numTracks: trackData.length,
      numAlbums: albumData.length,
      totalDuration:
        getTotalDuration(
          trackData.filter(track => track.countInArtistTotals)),
    };
  },
  relations(relation) {
    const relations = {};
    relations.layout =
      relation('generatePageLayout');
    relations.sidebar =
      relation('generateListingSidebar', null);
    relations.list =
      relation('generateListingIndexList', null);
    return relations;
  },
  data(sprawl) {
    return {
      wikiName: sprawl.wikiName,
      numTracks: sprawl.numTracks,
      numAlbums: sprawl.numAlbums,
      totalDuration: sprawl.totalDuration,
    };
  },
  generate(data, relations, {html, language}) {
    return relations.layout.slots({
      title: language.$('listingIndex.title'),
      headingMode: 'static',
      mainContent: [
        html.tag('p',
          language.$('listingIndex.infoLine', {
            wiki: data.wikiName,
            tracks:
              html.tag('b',
                language.countTracks(data.numTracks, {unit: true})),
            albums:
              html.tag('b',
                language.countAlbums(data.numAlbums, {unit: true})),
            duration:
              html.tag('b',
                language.formatDuration(data.totalDuration, {
                  approximate: true,
                  unit: true,
                })),
          })),
        html.tag('hr'),
        html.tag('p',
          language.$('listingIndex.exploreList')),
        relations.list.slot('mode', 'content'),
      ],
      navLinkStyle: 'hierarchical',
      navLinks: [
        {auto: 'home'},
        {auto: 'current'},
      ],
      leftSidebar: relations.sidebar,
    });
  },
};
  |