feat: add themer to cli

package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "@diplodoc/client": "^2.7.0",
     "@diplodoc/translation": "^1.4.3",
+    "chroma-js": "^3.0.0",
     "katex": "^0.16.9",
     "shelljs": "0.8.5",
     "threads": "1.7.0",
@@ -54,6 +55,7 @@
     "@octokit/core": "4.2.4",
     "@types/async": "^3.2.15",
     "@types/chalk": "2.2.0",
+    "@types/chroma-js": "^2.4.4",
     "@types/glob": "^8.1.0",
     "@types/html-escaper": "^3.0.0",
     "@types/js-yaml": "4.0.9",

src/cmd/build/index.ts

@@ -17,6 +17,7 @@ import {
     processLogs,
     processPages,
     processServiceFiles,
+    processThemer,
 } from '../../steps';
 import {prepareMapFile} from '../../steps/processMapFile';
 import {copyFiles, logger} from '../../utils';
@@ -199,6 +200,7 @@ async function handler(args: Arguments<any>) {
             lintDisabled,
             buildDisabled,
             addMapFile,
+            useThemer,
         } = ArgvService.getConfig();
 
         preparingTemporaryFolders(userOutputFolder);
@@ -234,6 +236,10 @@ async function handler(args: Arguments<any>) {
                 userOutputFolder,
             });
 
+            if (useThemer) {
+                await processThemer({args, outputFormat, outputBundlePath, tmpOutputFolder});
+            }
+
             await processChangelogs();
 
             // Copy all generated files to user' output folder

src/commands/build/index.ts

@@ -21,6 +21,11 @@ const parser = yargs
         describe: 'YFM configuration file',
         type: 'string',
     })
+    // .option('theme-config', {
+    //     alias: 'tc',
+    //     describe: 'Theme config file',
+    //     type: 'string',
+    // })
     .option('strict', {
         alias: 's',
         default: false,
@@ -33,7 +38,8 @@ const parser = yargs
         describe: "Run in quiet mode. Don't write logs to stdout",
         type: 'boolean',
     })
-    .group(['config', 'strict', 'quiet', 'help', 'version'], 'Common options:')
+    // ? may be need to add theme-config command, etc
+    .group(['config', /*'theme-config', */'strict', 'quiet', 'help', 'version'], 'Common options:')
     .version(typeof VERSION !== 'undefined' ? VERSION : '')
     .help();
 
@@ -80,8 +86,6 @@ export class Build
                 process.exit(1);
             }
 
-            console.log(output);
-
             process.exit(0);
         });
     }

src/commands/publish/config.ts

@@ -49,6 +49,7 @@ const hidden = option({
 export const options = {
     input: globalOptions.input,
     config: globalOptions.config,
+    // themeConfig: globalOptions.themeConfig,
     endpoint,
     bucket,
     prefix,

src/commands/publish/index.ts

@@ -57,6 +57,7 @@ export class Publish
         options.accessKeyId,
         options.secretAccessKey,
         options.config(YFM_CONFIG_FILENAME),
+        // options.themeConfig(THEME_CONFIG_FILENAME),
         options.region,
         options.hidden,
     ];

src/commands/translate/config.ts

@@ -119,6 +119,7 @@ export const options = {
     input: globalOptions.input,
     output: globalOptions.output,
     config: globalOptions.config,
+    // themeConfig: globalOptions.themeConfig,
     provider,
     source,
     target,

src/commands/translate/index.ts

@@ -108,6 +108,7 @@ export class Translate
         options.vars,
         options.dryRun,
         options.config(YFM_CONFIG_FILENAME),
+        // options.themeConfig(THEME_CONFIG_FILENAME),
     ];
 
     readonly provider: IProvider | undefined;

src/constants.ts

@@ -32,6 +32,7 @@ export const TMP_INPUT_FOLDER = '.tmp_input';
 export const TMP_OUTPUT_FOLDER = '.tmp_output';
 export const MAIN_TIMER_ID = 'Build time';
 export const YFM_CONFIG_FILENAME = '.yfm';
+export const THEME_CONFIG_FILENAME = 'theme.yaml';
 export const REDIRECTS_FILENAME = 'redirects.yaml';
 export const LINT_CONFIG_FILENAME = '.yfmlint';
 export const SINGLE_PAGE_FILENAME = 'single-page.html';

src/models.ts

@@ -5,6 +5,7 @@ import type {DocAnalytics} from '@diplodoc/client';
 
 import {IncludeMode, Lang, ResourceType, Stage} from './constants';
 import {FileContributors, VCSConnector, VCSConnectorConfig} from './vcs-connector/connector-models';
+import {Color} from './steps/themer';
 
 export type VarsPreset = 'internal' | 'external';
 
@@ -83,9 +84,40 @@ interface YfmConfig {
      */
     changelogs?: string | boolean;
     analytics?: DocAnalytics;
+    useThemer?: boolean;
 }
 
-export interface YfmArgv extends YfmConfig {
+// THEMER START =================================================================
+export interface ThemeConfig {
+    light?: Partial<ThemeVariantConfig>;
+    dark?: Partial<ThemeVariantConfig>;
+}
+
+export interface ThemeVariantConfig {
+    'brand-color': Color;
+    'text-on-brand-color': Color;
+    'page-background': Color;
+    'advanced-settings': {
+        'brand-palette': {
+            'hovered-brand-color': Color;
+            'brand-text': Color;
+            'hc-brand-text': Color;
+            'brand-line-color': Color;
+            'selection-background': Color;
+            'hovered-selection-background': Color;
+        };
+        'link-colors': {
+            link: Color;
+            'hovered-link': Color;
+            'visited-link': Color;
+            'hovered-visited-link': Color;
+        };
+    };
+}
+
+// THEMER END =================================================================
+
+export interface YfmArgv extends YfmConfig, ThemeConfig {
     rootInput: string;
     input: string;
     output: string;

src/program/base.ts

@@ -137,6 +137,26 @@ export const BaseProgram = <
                     fallback: args.config === YFM_CONFIG_FILENAME ? defaults() : null,
                 }));
 
+            // ? delete this ?
+            // if (config.useThemer) {
+            //     const themeConfigPath =
+            //         isAbsolute(args.themeConfig) || isRelative(args.themeConfig)
+            //             ? resolve(args.themeConfig)
+            //             : resolve(args.input, args.themeConfig);
+
+            //     // ?: what about unnecessary props like:
+            //     // * [Symbol(configRoot)]: '/Users/bagautdinovrl/Desktop/projects/diplodoc-meta-3/docs',
+            //     // * [Symbol(configPath)]: '/Users/bagautdinovrl/Desktop/projects/diplodoc-meta-3/docs/theme.yaml
+            //     config = this.config?.theme ? this.config : {
+            //         ...config,
+            //         theme: await resolveConfig(themeConfigPath, {
+            //             filter: filter || undefined,
+            //             // defaults: defaults(),
+            //             fallback: args.themeConfig === THEME_CONFIG_FILENAME ? defaults() : null,
+            //         }),
+            //     };
+            // }
+
             return this.hooks.Config.promise(config, args);
         }
 

src/program/config.ts

@@ -78,13 +78,31 @@ const config = (defaultConfig: string) =>
         default: defaultConfig,
     });
 
+// ? may be need to add
+// const themeConfig = (defaultConfig: string) =>
+//     option({
+//         flags: '-tc, --theme-config <string>',
+//         desc: `
+//                 Configure path to {{PROGRAM}} theme config.
+
+//                 Relative paths resolves from execution directory.
+//                 Other paths resolves from --input argument if present or from execution directory.
+
+//                 Example:
+//                   {{PROGRAM}} -c ./theme.yaml
+//                   {{PROGRAM}} -c .theme
+//             `,
+//         default: defaultConfig,
+//     });
+
 const absolute = (path: string) => resolve(process.cwd(), path);
 
 export const options = {
     quiet,
     strict,
     extensions,
     config,
+    // themeConfig,
     input,
     output,
 };

src/program/index.ts

@@ -20,6 +20,7 @@ export type ExtensionInfo = {
 export type ProgramConfig = {
     input: string;
     config: string;
+    // themeConfig: string;
     extensions: ExtensionInfo[];
     quiet: boolean;
     strict: boolean;
@@ -28,6 +29,7 @@ export type ProgramConfig = {
 export type ProgramArgs = {
     input: string;
     config: string;
+    // themeConfig: string;
     extensions: string[];
     quiet: boolean;
     strict: boolean;
@@ -63,6 +65,7 @@ export class Program
     protected options = [
         options.input('./'),
         options.config(YFM_CONFIG_FILENAME),
+        // options.themeConfig(THEME_CONFIG_FILENAME),
         options.extensions,
         options.quiet,
         options.strict,
@@ -71,6 +74,7 @@ export class Program
     private readonly parser: Command = new Command(NAME)
         .addOption(options.input('./'))
         .addOption(options.config(YFM_CONFIG_FILENAME))
+        // .addOption(options.themeConfig(THEME_CONFIG_FILENAME))
         .addOption(options.extensions)
         .helpOption(false)
         .allowUnknownOption(true);

src/steps/index.ts

@@ -5,3 +5,4 @@ export * from './processPages';
 export * from './processLinter';
 export * from './processServiceFiles';
 export * from './processChangelogs';
+export * from './processThemer';