Projects top navigation (#590)

Author: atilafassina

global.d.ts

@@ -4,8 +4,8 @@ declare module "solid:collection/tree" {
 	export default tree;
 }
 
-declare module "solid:collection/entries" {
-	import entries from ".solid/entries";
+declare module "solid:collection/flat-entries" {
+	import entries from ".solid/flat-entries";
 	// eslint-disable-next-line
 	export default entries;
 }

scripts/collections/index.mjs

@@ -6,6 +6,7 @@ import { createI18nEntries } from "../create-i18n-entries.mjs";
 import { createI18nTree } from "../create-i18n-tree.mjs";
 
 export const languages = ["pt-br"];
+const projects = ["solid-router"];
 export const COLLECTIONS_ROOT = "src/routes";
 
 (async () => {
@@ -16,6 +17,44 @@ export const COLLECTIONS_ROOT = "src/routes";
 		learn: createFlatEntryList(tree.learn, []),
 		reference: createFlatEntryList(tree.reference, []),
 	};
+	const projectTrees = {};
+	const projectFlatEntries = {};
+
+	for (const project of projects) {
+		projectTrees[project] = await createNavTree(
+			`${COLLECTIONS_ROOT}/${project}`
+		);
+
+		projectFlatEntries[project] = {
+			learn: await createFlatEntryList(projectTrees[project].learn, []),
+			reference: await createFlatEntryList(projectTrees[project].reference, []),
+		};
+
+		writeFile(`${project}-tree.ts`, projectTrees[project]);
+		writeFile(`${project}-flat-entries.ts`, projectFlatEntries[project]);
+
+		for (const locale of languages) {
+			const entryTitles = await createI18nEntries(
+				projectFlatEntries[project],
+				locale,
+				project
+			);
+
+			writeFile(`${project}-flat-entries-${locale}.ts`, entryTitles);
+			writeFile(`${project}-tree-${locale}.ts`, {
+				learn: await createI18nTree(
+					projectTrees[project].learn,
+					locale,
+					project
+				),
+				reference: await createI18nTree(
+					projectTrees[project].reference,
+					locale,
+					project
+				),
+			});
+		}
+	}
 
 	for (const locale of languages) {
 		const entryTitles = await createI18nEntries(defaultFlatEntries, locale);
@@ -29,6 +68,9 @@ export const COLLECTIONS_ROOT = "src/routes";
 	await Promise.all([
 		writeFile("tree.ts", tree),
 		writeFile("entriesList.js", defaultFlatEntries, true),
-		writeFile("entries.ts", defaultFlatEntries),
+		writeFile("flat-entries.ts", defaultFlatEntries),
+		Object.keys(projectTrees).forEach((project) =>
+			writeFile(`${project}-entries.ts`, projectTrees[project])
+		),
 	]);
 })();

scripts/create-i18n-entries.mjs

@@ -21,8 +21,10 @@ import { getFrontMatterData } from "./collections/utils/get-frontamtter.mjs";
 /**
  *
  * @param {DocsEntry[]} entryList
+ * @param {string} locale
+ * @param {string | undefined} project
  */
-async function buildSectionList(entryList = [], locale) {
+async function buildSectionList(entryList = [], locale, project = "") {
 	const sectionList = [];
 
 	for (const entry of entryList) {
@@ -32,6 +34,7 @@ async function buildSectionList(entryList = [], locale) {
 		const i18nEntryPath = path.join(
 			process.cwd(),
 			COLLECTIONS_ROOT,
+			project,
 			locale,
 			entryPath
 		);
@@ -58,11 +61,12 @@ async function buildSectionList(entryList = [], locale) {
 /**
  * @param {DefaultEntries} defaultEntries
  * @param {string} locale
+ * @param {string} project
  */
-export async function createI18nEntries(defaultEntries, locale) {
+export async function createI18nEntries(defaultEntries, locale, project) {
 	const referenceLearn = await Promise.all([
-		buildSectionList(defaultEntries.learn, locale),
-		buildSectionList(defaultEntries.reference, locale),
+		buildSectionList(defaultEntries.learn, locale, project),
+		buildSectionList(defaultEntries.reference, locale, project),
 	]);
 
 	return {

scripts/create-i18n-tree.mjs

@@ -48,13 +48,14 @@ function traverseTree(children) {
  *
  * @param {Tree["reference" | "learn"]} entryList
  * @param {string} locale
+ * @param {string | undefined} project
  */
-export async function createI18nTree(entryList, locale) {
+export async function createI18nTree(entryList, locale, project = "") {
 	const entries = [];
 
 	for (const entry of entryList) {
 		if (entry.type === "section") {
-			const nested = await createI18nTree(entry.children, locale);
+			const nested = await createI18nTree(entry.children, locale, project);
 			entries.push({
 				...entry,
 				children: nested.filter(Boolean),
@@ -63,9 +64,11 @@ export async function createI18nTree(entryList, locale) {
 			const i18nEntryPath = path.join(
 				process.cwd(),
 				COLLECTIONS_ROOT,
+				project,
 				locale,
-				entry.path.endsWith("/") ? entry.path + "index" : entry.path
+				entry?.path?.endsWith("/") ? entry?.path + "index" : entry.path
 			);
+
 			if (existsSync(i18nEntryPath + ".mdx")) {
 				const { title } = await getFrontMatterData(i18nEntryPath + ".mdx");
 				entries.push({

src/app.tsx

@@ -10,6 +10,7 @@ import { Layout } from "~/ui/layout";
 import "~/styles.css";
 import { ThemeProvider, useThemeContext } from "./data/theme-provider";
 import { I18nProvider } from "@kobalte/core";
+import { NotFound } from "./ui/not-found";
 
 export default function App() {
 	return (
@@ -30,24 +31,7 @@ export default function App() {
 							<I18nProvider>
 								<MetaProvider>
 									<Title>Solid Docs</Title>
-									<ErrorBoundary
-										fallback={(e) => {
-											return (
-												<>
-													<Title>404 - SolidDocs</Title>
-													<Layout isError={Boolean(e)}>
-														<HttpStatusCode code={404} />
-														<div class="flex flex-col items-center">
-															<h1 class="inline pb-1 bg-gradient-to-r from-indigo-200 via-blue-400 to-indigo-200 bg-clip-text font-display text-5xl tracking-tight text-transparent">
-																Page Not Found
-															</h1>
-															<A href="/">Take me back.</A>
-														</div>
-													</Layout>
-												</>
-											);
-										}}
-									>
+									<ErrorBoundary fallback={<NotFound />}>
 										<Layout>
 											<MDXProvider components={Md}>
 												<Suspense>{props.children}</Suspense>

src/entry-server.tsx

@@ -10,24 +10,32 @@ export default createHandler(() => (
 						const ctx = useThemeContext();
 
 						return (
-							<html lang="en" class={ctx.selectedTheme().value} data-theme={ctx.selectedTheme().theme}>
+							<html
+								lang="en"
+								class={ctx.selectedTheme().value}
+								data-theme={ctx.selectedTheme().theme}
+							>
 								<head>
 									<meta charset="utf-8" />
 									<meta
 										name="viewport"
 										content="width=device-width, initial-scale=1"
 									/>
 									<link rel="icon" href="/favicon.ico" />
-									<link rel="alternate icon" href="/favicon.svg" type="image/svg+xml" />
+									<link
+										rel="alternate icon"
+										href="/favicon.svg"
+										type="image/svg+xml"
+									/>
 									<script src="/scripts/browser-specific.js" type="module" />
 									{assets}
 								</head>
-								<body>
+								<body class="min-h-screen dark:bg-slate-900 bg-slate-50">
 									<div id="app">{children}</div>
 									{scripts}
 								</body>
 							</html>
-						)
+						);
 					})()}
 				</ThemeProvider>
 			);

src/i18n/dictionaries/index.ts

@@ -3,10 +3,10 @@ import ptbr from "./pt-br/ui";
 
 export const dictionaries = {
 	default: english,
-	"pt-br": ptbr,
+	// "pt-br": ptbr,
 };
 
 export const languages: { [key: string]: string } = {
 	en: "English",
-	"pt-br": "Português do Brasil",
+	// "pt-br": "Português do Brasil",
 };

src/i18n/helpers.ts

@@ -1,3 +1,4 @@
+import { useMatch } from "@solidjs/router";
 import { SUPPORTED_LOCALES } from "./config";
 
 export function getLocaleFromPathname(pathname: string) {

src/routes/[...404].tsx

@@ -1,7 +1,5 @@
-import { useI18n } from "~/i18n/i18n-context";
+import { NotFound } from "~/ui/not-found";
 
 export default function NoEntry() {
-	const i18n = useI18n();
-
-	return <p>{i18n.t("missing.translation")}</p>;
+	throw new Error("404");
 }

src/routes/data.json

@@ -4,7 +4,6 @@
 		"index.mdx",
 		"quick-start.mdx",
 		"concepts",
-		"routing",
 		"advanced-concepts",
 		"guides",
 		"configuration"