Miscellaneous improvements to @lunariajs/core (#18)

* Improve `tsconfig.json` config

* Add `scrollbar-gutter: stable` to default styles

* Ensure the dashboard is properly generated when a translation is missing

* Add another locale with fake pages to `examples/vitepress`

* Fix table column with multiple locales

* Avoid `undefined` in replace call

* Rollback `@lunariajs/core` to `0.0.0`

* Add `lint` scripts to root `package.json`

* Update workspace references to `@lunariajs/core`

* Add `README.md`

examples/vitepress/es/first-page.md

@@ -0,0 +1,7 @@
+---
+i18nReady: false
+---
+
+# First page
+
+This is the first page for demonstration.

examples/vitepress/es/index.md

@@ -0,0 +1,15 @@
+---
+i18nReady: true
+layout: home
+
+hero:
+  name: 'VitePress Example'
+  tagline: Example showcasing Lunaria + VitePress
+  actions:
+    - theme: brand
+      text: First page
+      link: /first-page
+    - theme: alt
+      text: Second page
+      link: /second-page
+---

examples/vitepress/es/second-page.md

@@ -0,0 +1,3 @@
+# Second page
+
+This is the second page for demonstration.

examples/vitepress/package.json

@@ -14,6 +14,6 @@
     "vitepress": "1.0.0-rc.20"
   },
   "dependencies": {
-    "@lunariajs/core": "workspace:0.0.5"
+    "@lunariajs/core": "workspace:0.0.0"
   }
 }

examples/vitepress/scripts/translation-status.ts

@@ -42,6 +42,16 @@ const tracker = await createTracker({
 				location: 'ui/pt/*.{js,cjs,mjs,ts,yml}',
 			},
 		},
+		{
+			label: 'Spanish',
+			lang: 'es',
+			content: {
+				location: 'es/**/*.md',
+			},
+			dictionaries: {
+				location: 'ui/es/*.{js,cjs,mjs,ts,yml}',
+			},
+		},
 	],
 	translatableProperty: 'i18nReady',
 });

package.json

@@ -7,6 +7,8 @@
     "dev:core": "pnpm --filter @lunariajs/core dev",
     "build": "pnpm run build:core",
     "build:core": "pnpm --filter @lunariajs/core build",
+    "lint": "pnpm run lint:core",
+    "lint:core": "pnpm --filter @lunariajs/core lint",
     "format": "prettier -w --cache --plugin prettier-plugin-astro .",
     "version": "pnpm changeset version && pnpm i --no-frozen-lockfile"
   },

packages/core/README.md

@@ -0,0 +1,76 @@
+# `@lunariajs/core`
+
+The `@lunariajs/core` package contains the base tracking and dashboard generation systems used across its related packages. You should use this package if:
+
+- You need fine-grained control over your dashboard
+- You want to build a package over it
+- There isn't a framework-specific `@lunariajs` package for your use-case
+
+## Installation
+
+You can install `@lunariajs/core` using your preferred package manager:
+
+```bash
+# npm
+npm install @lunariajs/core
+
+# pnpm
+pnpm add @lunariajs/core
+
+# yarn
+yarn add @lunariajs/core
+```
+
+## Basic Usage
+
+Start using `@lunariajs/core` by setting up a script to generate your translation dashboard status.
+
+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
+// scripts/translation-status.js
+import { createTracker } from '@lunariajs/core';
+
+const tracker = await createTracker({
+  // Current repository of this script and content
+  repository: 'https://github.com/me/cool-docs',
+  dashboard: {
+    // Generated dashboard URL used in meta tags
+    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',
+    },
+  },
+  // Array of objects of your translated locales.
+  locales: [
+    {
+      label: 'Português',
+      lang: 'pt',
+      content: {
+        location: 'content/pt/**/*.md',
+      },
+    },
+    {
+      label: 'Spanish',
+      lang: 'es',
+      content: {
+        location: 'content/es/**/*.md',
+      },
+    },
+  ],
+  /** Property containing a boolean value used in files that support frontmatter to mark that the content should be translated */
+  translatableProperty: 'i18nReady',
+});
+
+tracker.run();
+```
+
+Want other usage examples? Head over to the [`examples/` directory](https://github.com/Yan-Thomas/lunaria/tree/main/examples/) and inspect the source code for tips & tricks about using `@lunariajs/core` with other frameworks and environments.

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lunariajs/core",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.0",
   "description": "Translation management system for open-source projects",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

packages/core/src/dashboard/styles.ts

@@ -51,6 +51,7 @@ export const defaultStyles = html`
 
 		html {
 			background: var(--background);
+			scrollbar-gutter: stable;
 		}
 
 		body {

packages/core/src/dashboard/template.ts

@@ -74,11 +74,12 @@ const StatusByLocale = (opts: LunariaConfig, translationStatus: FileTranslationS
 		</h2>
 		${locales.map(({ label, lang }) => {
 			const missingPages = translationStatus.filter(
-				(content) => content.translations[lang].isMissing
+				(content) => content.translations[lang]?.isMissing
 			);
 			const outdatedPages = translationStatus.filter(
 				(content) =>
-					content.translations[lang].isOutdated || !content.translations[lang].completeness.complete
+					content.translations[lang]?.isOutdated ||
+					!content.translations[lang]?.completeness.complete
 			);
 			const doneLength = translationStatus.length - outdatedPages.length - missingPages.length;
 
@@ -145,29 +146,30 @@ const StatusByContent = (opts: LunariaConfig, translationStatus: FileTranslation
 					(page) => html`
 						<tr>
 							<td>${GitHostingLink(page.gitHostingUrl, page.sharedPath)}</td>
-							<td>
 								${Object.keys(page.translations).map(
 									(lang) => html`
-										${page.translations[lang].isMissing
-											? html`<span title="${dashboard.ui['status.missing']}"
-													><span aria-hidden="true"
-														>${dashboard.ui['status.emojiMissing']}</span
-													></span
-											  >`
-											: page.translations[lang].isOutdated ||
-											  !page.translations[lang].completeness.complete
-											? html`<a
-													href="${page.translations[lang].gitHostingUrl}"
-													title="${dashboard.ui['status.outdated']}"
-													><span aria-hidden="true"
-														>${dashboard.ui['status.emojiOutdated']}</span
-													></a
-											  >`
-											: html`<a
-													href="${page.translations[lang].gitHostingUrl}"
-													title="${dashboard.ui['status.done']}"
-													><span aria-hidden="true">${dashboard.ui['status.emojiDone']}</span></a
-											  >`}
+										<td>
+											${page.translations[lang]?.isMissing
+												? html`<span title="${dashboard.ui['status.missing']}"
+														><span aria-hidden="true"
+															>${dashboard.ui['status.emojiMissing']}</span
+														></span
+												  >`
+												: page.translations[lang]?.isOutdated ||
+												  !page.translations[lang]?.completeness.complete
+												? html`<a
+														href="${page.translations[lang]?.gitHostingUrl}"
+														title="${dashboard.ui['status.outdated']}"
+														><span aria-hidden="true"
+															>${dashboard.ui['status.emojiOutdated']}</span
+														></a
+												  >`
+												: html`<a
+														href="${page.translations[lang]?.gitHostingUrl}"
+														title="${dashboard.ui['status.done']}"
+														><span aria-hidden="true">${dashboard.ui['status.emojiDone']}</span></a
+												  >`}
+										</td>
 									`
 								)}
 							</td>
@@ -199,14 +201,14 @@ const OutdatedPages = (
 			${outdatedPages.map(
 				(page) => html`
 					<li>
-						${!page.translations[lang].completeness.complete
+						${!page.translations[lang]?.completeness.complete
 							? html`
 									<details>
 										<summary>${ContentDetailsLinks(page, lang, dashboard)}</summary>
 										${html`
 											<h4>${dashboard.ui['statusByLocale.missingKeys']}</h4>
 											<ul>
-												${page.translations[lang].completeness.missingKeys!.map(
+												${page.translations[lang]?.completeness.missingKeys!.map(
 													(key) => html`<li>${key}</li>`
 												)}
 											</ul>
@@ -225,16 +227,18 @@ const ContentDetailsLinks = (
 	dashboard: Dashboard
 ) => html`
 	${GitHostingLink(page.gitHostingUrl, page.sharedPath)}
-	(${GitHostingLink(
-		page.translations[lang].gitHostingUrl,
-		!page.translations[lang].completeness.complete
-			? dashboard.ui['statusByLocale.incompleteTranslationLink']
-			: dashboard.ui['statusByLocale.outdatedTranslationLink']
-	)},
-	${GitHostingLink(
-		page.translations[lang].sourceHistoryUrl,
-		dashboard.ui['statusByLocale.sourceChangeHistoryLink']
-	)})
+	${page.translations[lang]
+		? html`(${GitHostingLink(
+				page.translations[lang]?.gitHostingUrl!,
+				!page.translations[lang]?.completeness.complete
+					? dashboard.ui['statusByLocale.incompleteTranslationLink']
+					: dashboard.ui['statusByLocale.outdatedTranslationLink']
+		  )},
+		  ${GitHostingLink(
+				page.translations[lang]?.sourceHistoryUrl!,
+				dashboard.ui['statusByLocale.sourceChangeHistoryLink']
+		  )})`
+		: ''}
 `;
 
 // TODO: See if this needs to be escaped