[Build] Tons of improvements

build/build.js

@@ -46,6 +46,7 @@ const chooseTheme = {
 const args = process.argv.slice( 2 );
 inquirer.default.prompt( [
     chooseWallpaper,
+    chooseLockpaper,
     chooseTheme
 ] ).then( answers => {
     render( path.join( os.homedir(), '/NextCloud/Wallpapers', answers.wallpaper ), path.join( os.homedir(), '/NextCloud/Wallpapers', answers.lockpaper ), answers.theme );

build/render.js

@@ -1,6 +1,10 @@
 const mustache = require( 'mustache' );
 const colorThief = require( '@janishutz/colorthief' );
-const convert = require( 'color-convert' );
+const fs = require( 'fs' );
+const path = require( 'path' );
+const util = require( './util' );
+const renderColourAsRGB = util.renderColourAsRGB;
+const renderColourAsHex = util.renderColourAsHex;
 
 const build = ( wallpaper, lockpaper, theme ) => {
     console.log( '\n=> Extracting colours' );
@@ -21,57 +25,118 @@ const build = ( wallpaper, lockpaper, theme ) => {
             'colour-accent-2-rgb': renderColourAsRGB( palette[ 2 ] ),
             'colour-accent-3-hex': renderColourAsHex( palette[ 3 ] ),
             'colour-accent-3-rgb': renderColourAsRGB( palette[ 3 ] ),
-            'colour-background-hex': '',
-            'colour-background-rgb': '',
-            'colour-shadow-hex': '',
-            'colour-shadow-rgb': '',
-            'colour-inavtive-hex': '',
-            'colour-inavtive-rgb': '',
-
-            // General style
-            'style-corner-rounding': 5000,
+            'colour-background-hex': renderColourAsHex( colours.background[ theme ] ),
+            'colour-background-rgb': renderColourAsRGB( colours.background[ theme ] ),
+            'colour-shadow-hex': renderColourAsHex( colours.shadow[ theme ] ),
+            'colour-shadow-rgb': renderColourAsRGB( colours.shadow[ theme ] ),
+            'colour-inavtive-hex': renderColourAsHex( colours.inactive[ theme ] ),
+            'colour-inavtive-rgb': renderColourAsRGB( colours.inactive[ theme ] ),
 
             // Fonts
-            'font-primary': 'Comfortaa',
-            'font-accent': 'Source Code Pro',
+            'font-primary': fonts.primary[ theme ],
+            'font-accent': fonts.accent[ theme ],
+            'font-mono': fonts.mono[ theme ],
 
             // yazi theme
-            'yazi-theme': 'tokyo-night',
+            'yazi-theme': yaziThemes[ theme ],
 
             // Path to this repo on disk
             'path-to-dotfiles': __dirname.slice(0, __dirname.length - 5),
         }
 
         // TODO: Maybe bar config? Reordering? Same for quick actions?
+        // Those will be read by AGS components though, but generated by
+        // this script
         console.log( view );
+
+        try {
+            fs.mkdir( path.join( __dirname + '../dist' ) );
+        } catch ( e ) {
+
+        }
+
+        // recursively index files from config directory -> Maybe add a file to each
+        // directory to indicate whether or not to index files in it?
+        const fileList = util.treeWalker( path.join( __dirname, '/../config/' ), '*' );
+        for (let index = 0; index < fileList; index++) {
+            try {
+                render( fileList[ index ], view );
+            } catch ( e ) {
+                console.error( '=> Render failed for ' + fileList[ index ] );
+            }
+        }
     } ).catch( () => {
         console.error( '\n=> Failed to load image or retrieve colour palette from it' );
-    } )
+    } );
 }
 
 const colours = {
-
+    background: {
+        'nordic': [ 10, 0, 60 ],
+        'deep-dark': [ 20, 20, 20 ],
+        'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator
+        'light': [ 230, 230, 230 ],
+        'bright': [ 255, 255, 255 ]
+    },
+    shadow: {
+        'nordic': [ 10, 0, 60 ],
+        'deep-dark': [ 20, 20, 20 ],
+        'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator
+        'light': [ 230, 230, 230 ],
+        'bright': [ 255, 255, 255 ]
+    },
+    inactive: {
+        'nordic': [ 200, 200, 200 ],
+        'deep-dark': [ 200, 200, 200 ],
+        'material': [ 200, 200, 200 ], // TODO: Will be calculated by material theme generator
+        'light': [ 65, 65, 65 ],
+        'bright': [ 60, 60, 60 ]
+    }
 }
 
 const fonts = {
-    
+    'primary': {
+        'nordic': 'Comfortaa',
+        'deep-dark': 'Comfortaa',
+        'material': 'Comfortaa',
+        'light': 'Adwaita Sans',
+        'bright': 'Adwaita Sans Extralight'
+    },
+    'accent': {
+        'nordic': 'Adwaita Sans',
+        'deep-dark': 'Adwaita Sans',
+        'material': 'Adwaita Sans',
+        'light': 'Cantarell',
+        'bright': 'Contarell Thin'
+    },
+    'mono': {
+        'nordic': 'Source Code Pro',
+        'deep-dark': 'Source Code Pro',
+        'material': 'Source Code Pro',
+        'light': 'Jetbrains Mono',
+        'bright': 'Jetbrains Mono',
+    }
 }
 
+// TODO
 const yaziThemes = {
-
+    'nordic': 'tokyo-night',
+    'deep-dark': 'tokyo-night',
+    'material': 'tokyo-night',
+    'light': 'tokyo-night',
+    'bright': 'tokyo-night',
 }
 
-const renderColourAsHex = ( colour ) => {
-    return '#' + convert.default.rgb.hex( colour[ 0 ], colour[ 1 ], colour[ 2 ] );
-}
-
-const renderColourAsRGB = ( colour ) => {
-    return `rgb( ${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] } )`
-}
 
+/**
+ * @param {string} templatePath - Path relative to config root
+ * @param {object} view - View rendering config
+ */
 const render = ( templatePath, view ) => {
-
+    // Load template from disk (all can be found in <project-root>/config)
+    const template = '' + fs.readFileSync( path.join( __dirname, '/../config/', templatePath ) );
+    const outPath = '';
+    fs.writeFileSync( outPath, mustache.render( template, view ) );
 }
 
-
 module.exports = build;

build/util.js

@@ -0,0 +1,40 @@
+const convert = require( 'color-convert' );
+
+/**
+ * Recursively find all HTML files in a directory
+ * @param {string} dir The directory to search. Either absolute or relative path
+ * @param {string} extension The file extension to look for
+ * @returns {string[]} returns a list of html files with their full path
+ */
+const treeWalker = ( dir, extension ) => {
+    const ls = fs.readdirSync( dir );
+    const fileList = [];
+    for ( let file in ls ) {
+        if ( !ls[ file ].includes( '.' ) ) {
+            const newFiles = treeWalker( dir + '/' + ls[ file ], extension );
+            for ( let file in newFiles ) {
+                fileList.push( newFiles[ file ] );
+            }
+        } else if ( extension == '*' ) {
+            fileList.push( dir + '/' + ls[ file ] );
+        } else if ( ls[ file ].includes( extension ) ) {
+            fileList.push( dir + '/' + ls[ file ] );
+        }
+    }
+
+    return fileList;
+}
+
+const renderColourAsHex = ( colour ) => {
+    return '#' + convert.default.rgb.hex( colour[ 0 ], colour[ 1 ], colour[ 2 ] );
+}
+
+const renderColourAsRGB = ( colour ) => {
+    return `rgb( ${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] } )`
+}
+
+module.exports = {
+    treeWalker,
+    renderColourAsHex,
+    renderColourAsRGB
+}