Core configuration rework (#49)

* Remove package minification

* Rework core configuration system

* Move Vitepress example into new configuration system

* Add new configuration system support to `create-lunaria` package

* Update README to reflect new configuration system

* Create stale-gorillas-cross.md

* Update README.md

.changeset/stale-gorillas-cross.md

@@ -0,0 +1,6 @@
+---
+"@lunariajs/core": patch
+"create-lunaria": patch
+---
+
+Reworked core configuration system

build.preset.ts

@@ -7,7 +7,6 @@ export default definePreset({
 	rollup: {
 		esbuild: {
 			target: 'es2022',
-			minify: true,
 		},
 	},
 });

examples/vitepress/lunaria.config.json

@@ -0,0 +1,51 @@
+{
+  "repository": "https://github.com/Yan-Thomas/lunaria",
+  "rootDir": "./examples/vitepress",
+  "dashboard": {
+    "url": "https://localhost:3000/"
+  },
+  "defaultLocale": {
+    "label": "English",
+    "lang": "en",
+    "content": {
+      "location": "**/*.md",
+      "ignore": ["pt/*.md", "es/*.md"]
+    },
+    "dictionaries": {
+      "location": "ui/en/*.{js,cjs,mjs,ts,yml,json}",
+      "optionalKeys": {
+        "ui/nav.json": ["today"],
+        "ui/ui.cjs": ["type"],
+        "ui/ui.js": ["type"],
+        "ui/ui.mjs": ["type"],
+        "ui/ui.mts": ["type"],
+        "ui/ui.ts": ["type"],
+        "ui/ui.yml": ["here"]
+      }
+    }
+  },
+  "locales": [
+    {
+      "label": "Português",
+      "lang": "pt",
+      "content": {
+        "location": "pt/**/*.md"
+      },
+      "dictionaries": {
+        "location": "ui/pt/*.{js,cjs,mjs,ts,yml,json}"
+      }
+    },
+    {
+      "label": "Spanish",
+      "lang": "es",
+      "content": {
+        "location": "es/**/*.md"
+      },
+      "dictionaries": {
+        "location": "ui/es/*.{js,cjs,mjs,ts,yml,json}"
+      }
+    }
+  ],
+  "translatableProperty": "i18nReady",
+  "renderer": "./renderer.config.js"
+}

examples/vitepress/renderer.config.ts

@@ -0,0 +1,7 @@
+import { defineRendererConfig, html } from '@lunariajs/core';
+
+export default defineRendererConfig({
+	slots: {
+		afterTitle: () => html`<p>This is an example slotted component!</p>`,
+	},
+});

packages/core/README.md

@@ -23,51 +23,40 @@ yarn add @lunariajs/core
 
 ## Basic Usage
 
-Start using `@lunariajs/core` by setting up your own `lunaria.config` file and adding a script to your `package.json` file.
+Start using `@lunariajs/core` by setting up your own `lunaria.config.json` file and adding a script to your `package.json` file.
 
 The example below contains all of the **required** options to generate a dashboard tracking the status of both the Portuguese and Spanish translations of a site:
 
-```js
-// lunaria.config.ts
-import { defineConfig } from '@lunariajs/core';
-
-export default defineConfig({
-  // Current repository of your content
-  repository: 'https://github.com/me/cool-docs',
-  dashboard: {
-    // Generated dashboard URL used in meta tags
-    url: 'https://tracker.cool-docs.com',
+```json
+// lunaria.config.json
+{
+  "repository": "https://github.com/me/cool-docs",
+  "dashboard": {
+    "url": "https://tracker.cool-docs.com"
   },
-  // Information about the source locale of your content
-  defaultLocale: {
-    // User-friendly label/name of the language
-    label: 'English',
-    // BCP-47 tag of the language
-    lang: 'en',
-    content: {
-      // Glob pattern of where your content is
-      location: 'content/en/**/*.md',
-    },
+  "defaultLocale": {
+    "label": "English",
+    "lang": "en",
+    "content": {
+      "location": "content/en/**/*.md"
+    }
   },
-  // Array of objects of your translated locales.
-  locales: [
+  "locales": [
     {
-      label: 'Português',
-      lang: 'pt',
-      content: {
-        location: 'content/pt/**/*.md',
-      },
+      "label": "Português",
+      "lang": "pt",
+      "content": {
+        "location": "content/pt/**/*.md"
+      }
     },
     {
-      label: 'Spanish',
-      lang: 'es',
-      content: {
-        location: 'content/es/**/*.md',
-      },
-    },
-  ],
-  // Property to find in valid frontmatter files marking if a page should be translated or not
-  translatableProperty: 'i18nReady',
+      "label": "Spanish",
+      "lang": "es",
+      "content": {
+        "location": "content/es/**/*.md"
+      }
+    }
+  ]
 });
 ```
 

packages/core/package.json

@@ -48,7 +48,7 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "c12": "^1.5.1",
+    "destr": "^2.0.2",
     "fast-glob": "^3.3.1",
     "jiti": "^1.21.0",
     "lit-html": "^3.0.0",

packages/core/src/cli.ts

@@ -1,21 +1,22 @@
 #!/usr/bin/env node
-import { loadConfig } from 'c12';
-import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
+import { destr } from 'destr';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
-import { LunariaConfigSchema } from './schemas/config.js';
+import { LunariaConfigSchema, LunariaRendererConfigSchema } from './schemas/config.js';
 import { generateDashboardHtml, getContentIndex, getTranslationStatus } from './tracker.js';
 import { handleShallowRepo } from './utils/git.js';
+import { loadFile } from './utils/misc.js';
 
-const { config } = await loadConfig({
-	name: 'lunaria',
-});
+const configPath = './lunaria.config.json';
 
-if (config === null) {
-	console.error(new Error('Could not find a `lunaria.config.*` file, does it exist?'));
-	process.exit(1);
+if (!existsSync(configPath)) {
+	console.error(
+		new Error(`Could not find a \`lunaria.config.json\` file in ${process.cwd()}, does it exist?`)
+	);
 }
 
-const parsedConfig = LunariaConfigSchema.safeParse(config);
+const configContents = destr(readFileSync(configPath, 'utf-8'));
+const parsedConfig = LunariaConfigSchema.safeParse(configContents);
 
 if (!parsedConfig.success) {
 	console.error(
@@ -28,14 +29,39 @@ if (!parsedConfig.success) {
 }
 
 const userConfig = parsedConfig.data;
+
+if (userConfig.renderer && !existsSync(userConfig.renderer)) {
+	console.error(
+		new Error(
+			`Could not find your specified renderer file at \`${userConfig.renderer}\`, does it exist?`
+		)
+	);
+	process.exit(1);
+}
+
+const rendererConfigContents = userConfig.renderer ? loadFile(userConfig.renderer) : {};
+const parsedRendererConfig = LunariaRendererConfigSchema.safeParse(rendererConfigContents);
+
+if (!parsedRendererConfig.success) {
+	console.error(
+		new Error(
+			'Invalid renderer configuration options passed to `@lunariajs/core`\n' +
+				parsedRendererConfig.error.issues.map((i) => i).join('\n')
+		)
+	);
+	process.exit(1);
+}
+
+const userRendererConfig = parsedRendererConfig.data;
+
 const isShallowRepo = await handleShallowRepo(userConfig);
 
 console.time('⌛ Building translation dashboard');
 console.log(`➡️  Dashboard output path: ${resolve(userConfig.outDir)}`);
 
 const contentIndex = await getContentIndex(userConfig, isShallowRepo);
 const translationStatus = await getTranslationStatus(userConfig, contentIndex);
-const html = await generateDashboardHtml(userConfig, translationStatus);
+const html = await generateDashboardHtml(userConfig, userRendererConfig, translationStatus);
 
 const outputDir = dirname(userConfig.outDir);
 

packages/core/src/dashboard/components.ts

@@ -4,27 +4,34 @@ import type {
 	FileTranslationStatus,
 	Locale,
 	LunariaConfig,
+	LunariaRendererConfig,
 	TranslationStatus,
 } from '../types.js';
 import { getTextFromFormat } from '../utils/misc.js';
 import { Styles } from './styles.js';
 
-export const Page = (opts: LunariaConfig, translationStatus: FileTranslationStatus[]) => {
+export const Page = (
+	opts: LunariaConfig,
+	rendererOpts: LunariaRendererConfig,
+	translationStatus: FileTranslationStatus[]
+) => {
 	const { dashboard } = opts;
+	const { slots, overrides } = rendererOpts;
+
 	return html`
 		<!doctype html>
 		<html dir="${dashboard.ui.dir}" lang="${dashboard.ui.lang}">
 			<head>
 				<!-- Built-in/custom meta tags -->
-				${dashboard.overrides.meta?.(opts) ?? Meta(dashboard)}
+				${overrides.meta?.(opts) ?? Meta(dashboard)}
 				<!-- Additional head tags -->
-				${dashboard.slots.head?.(opts) ?? ''}
+				${slots.head?.(opts) ?? ''}
 				<!-- Built-in/custom styles -->
-				${dashboard.overrides.styles?.(opts) ?? Styles}
+				${overrides.styles?.(opts) ?? Styles}
 			</head>
 			<body>
 				<!-- Built-in/custom body content -->
-				${dashboard.overrides.body?.(opts, translationStatus) ?? Body(opts, translationStatus)}
+				${overrides.body?.(opts, translationStatus) ?? Body(opts, rendererOpts, translationStatus)}
 			</body>
 		</html>
 	`;
@@ -42,18 +49,24 @@ export const Meta = (dashboard: Dashboard) => html`
 	<meta property="og:description" content="${dashboard.description}" />
 `;
 
-export const Body = (opts: LunariaConfig, translationStatus: FileTranslationStatus[]) => {
+export const Body = (
+	opts: LunariaConfig,
+	rendererOpts: LunariaRendererConfig,
+	translationStatus: FileTranslationStatus[]
+) => {
 	const { dashboard } = opts;
+	const { slots, overrides } = rendererOpts;
+
 	return html`
 		<main>
 			<div class="limit-to-viewport">
-				${dashboard.slots.beforeTitle?.(opts) ?? ''}
+				${slots.beforeTitle?.(opts) ?? ''}
 				<h1>${dashboard.title}</h1>
-				${dashboard.slots.afterTitle?.(opts) ?? ''}
-				${dashboard.overrides.statusByLocale?.(opts, translationStatus) ??
+				${slots.afterTitle?.(opts) ?? ''}
+				${overrides.statusByLocale?.(opts, translationStatus) ??
 				StatusByLocale(opts, translationStatus)}
 			</div>
-			${dashboard.overrides.statusByContent?.(opts, translationStatus) ??
+			${overrides.statusByContent?.(opts, translationStatus) ??
 			StatusByContent(opts, translationStatus)}
 		</main>
 	`;

packages/core/src/index.ts

@@ -1,8 +1,8 @@
-import type { LunariaUserConfig } from './types.js';
+import type { LunariaUserRendererConfig } from './types.js';
 
 export { html } from 'lit-html';
 export type * from './types.js';
 
-export function defineConfig(opts: LunariaUserConfig) {
+export function defineRendererConfig(opts: LunariaUserRendererConfig) {
 	return opts;
 }