content: generateAlbumStyleRules: provide album & track directory

5 files changed, 46 insertions, 34 deletions

diff --git a/src/content/dependencies/generateAlbumCommentaryPage.js b/src/content/dependencies/generateAlbumCommentaryPage.js
index de61925..5979ed3 100644
--- a/src/content/dependencies/generateAlbumCommentaryPage.js
+++ b/src/content/dependencies/generateAlbumCommentaryPage.js
@@ -21,7 +21,7 @@ export default {
       relation('generatePageLayout');
 
     relations.albumStyleRules =
-      relation('generateAlbumStyleRules', album);
+      relation('generateAlbumStyleRules', album, null);
 
     relations.albumLink =
       relation('linkAlbum', album);
diff --git a/src/content/dependencies/generateAlbumGalleryPage.js b/src/content/dependencies/generateAlbumGalleryPage.js
index 68b56bd..b98abc4 100644
--- a/src/content/dependencies/generateAlbumGalleryPage.js
+++ b/src/content/dependencies/generateAlbumGalleryPage.js
@@ -51,7 +51,7 @@ export default {
       relation('generatePageLayout');
 
     relations.albumStyleRules =
-      relation('generateAlbumStyleRules', album);
+      relation('generateAlbumStyleRules', album, null);
 
     relations.albumLink =
       relation('linkAlbum', album);
diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index ce17ab2..5c4344b 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -37,7 +37,7 @@ export default {
       relation('generatePageLayout');
 
     relations.albumStyleRules =
-      relation('generateAlbumStyleRules', album);
+      relation('generateAlbumStyleRules', album, null);
 
     relations.socialEmbed =
       relation('generateAlbumSocialEmbed', album);
diff --git a/src/content/dependencies/generateAlbumStyleRules.js b/src/content/dependencies/generateAlbumStyleRules.js
index 1acaea1..9269ae8 100644
--- a/src/content/dependencies/generateAlbumStyleRules.js
+++ b/src/content/dependencies/generateAlbumStyleRules.js
@@ -3,14 +3,13 @@ import {empty} from '#sugar';
 export default {
   extraDependencies: ['to'],
 
-  data(album) {
+  data(album, track) {
     const data = {};
 
     data.hasWallpaper = !empty(album.wallpaperArtistContribs);
     data.hasBanner = !empty(album.bannerArtistContribs);
 
     if (data.hasWallpaper) {
-      data.hasWallpaperStyle = !!album.wallpaperStyle;
       data.wallpaperPath = ['media.albumWallpaper', album.directory, album.wallpaperFileExtension];
       data.wallpaperStyle = album.wallpaperStyle;
     }
@@ -20,40 +19,53 @@ export default {
       data.bannerStyle = album.bannerStyle;
     }
 
+    data.albumDirectory = album.directory;
+
+    if (track) {
+      data.trackDirectory = track.directory;
+    }
+
     return data;
   },
 
   generate(data, {to}) {
-    const wallpaperPart =
-      (data.hasWallpaper
-        ? [
-            `body::before {`,
-            `    background-image: url("${to(...data.wallpaperPath)}");`,
-            ...(data.hasWallpaperStyle
-              ? data.wallpaperStyle
-                  .split('\n')
-                  .map(line => `    ${line}`)
-              : []),
-            `}`,
-          ]
-        : []);
+    const indent = parts =>
+      (parts ?? [])
+        .filter(Boolean)
+        .join('\n')
+        .split('\n')
+        .map(line => ' '.repeat(4) + line)
+        .join('\n');
 
-    const bannerPart =
-      (data.hasBannerStyle
-        ? [
-            `#banner img {`,
-            ...data.bannerStyle
-              .split('\n')
-              .map(line => `    ${line}`),
-            `}`,
-          ]
+    const rule = (selector, parts) =>
+      (!empty(parts.filter(Boolean))
+        ? [`${selector} {`, indent(parts), `}`]
         : []);
 
-    return [
-      ...wallpaperPart,
-      ...bannerPart,
-    ]
-      .filter(Boolean)
-      .join('\n');
+    const wallpaperRule =
+      data.hasWallpaper &&
+        rule(`body::before`, [
+          `background-image: url("${to(...data.wallpaperPath)}");`,
+          data.wallpaperStyle,
+        ]);
+
+    const bannerRule =
+      data.hasBanner &&
+        rule(`#banner img`, [
+          data.bannerStyle,
+        ]);
+
+    const dataRule =
+      rule(`:root`, [
+        data.albumDirectory &&
+          `--album-directory: ${data.albumDirectory};`,
+        data.trackDirectory &&
+          `--track-directory: ${data.trackDirectory};`,
+      ]);
+
+    return (
+      [...wallpaperRule, ...bannerRule, ...dataRule]
+        .filter(Boolean)
+        .join('\n'));
   },
 };
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index 334c542..c20c0d0 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -44,7 +44,7 @@ export default {
       relation('generatePageLayout');
 
     relations.albumStyleRules =
-      relation('generateAlbumStyleRules', track.album);
+      relation('generateAlbumStyleRules', track.album, track);
 
     relations.socialEmbed =
       relation('generateTrackSocialEmbed', track);