Merge pull request #36 from evilmartians/25-add-support-for-multiple-…

…entrypoints

Edit navigation format

.gitignore

@@ -4,3 +4,4 @@ coverage/
 
 test/website-*/src/pages/docs/**/*
 test/website-*/src/nav.json
+tsconfig.generic.json

README.md

@@ -11,11 +11,14 @@ There are 3 subfolders is `test/` folder.
 3. `website-nanostores` - a sample site which is generated from `nanostores` package.
    [`nanostores`](https://github.com/nanostores/nanostores) repository needs to be cloned locally.
 
+   [`@nanostores/router`](https://github.com/nanostores/router) respository needs to be cloned locally.
+
    Folder structure should look like this:
 
    ```
    .
    ├── astro-typedoc
+   ├── router
    └── nanostores
    ```
 

index.js

@@ -27,27 +27,48 @@ ${objectToFrontmatter(frontmatterObject)}
   event.contents = prependix + event.contents
 }
 
-const getNavigationFromProject = (baseUrl = '', project) => {
+const buildNavigationFromProjectReflection = (baseUrl = '', project) => {
   let baseUrlWithoutTrailingSlash = baseUrl.replace(/\/$/gm, '')
+  let result = { type: 'flat' }
+
+  let isGroupOfModules = group => group.title === 'Modules'
+  let reflectionToNavItem = reflection => {
+    return {
+      title: reflection.name,
+      url: `${baseUrlWithoutTrailingSlash}/${reflection.url}`.replace(
+        /\.md$/,
+        ''
+      )
+    }
+  }
+  let modulesGroupToNavigationGroup = module => ({
+    items: module.groups.flatMap(group =>
+      group.children.map(reflectionToNavItem)
+    ),
+    name: module.name
+  })
 
-  let nav = project?.groups
-    .map(group => {
-      return group.children.map(groupChild => {
-        return {
-          title: groupChild.name,
-          url: `${baseUrlWithoutTrailingSlash}/${groupChild.url}`.replace(
-            /\.md$/,
-            ''
-          )
-        }
-      })
+  let navFromReflectionGroups = (groups, nav = {}) => {
+    groups.forEach(group => {
+      if (isGroupOfModules(group)) {
+        nav.type = 'modular'
+        nav.modules = group.children.map(modulesGroupToNavigationGroup)
+      } else {
+        nav.items = nav?.items?.length ? nav.items : []
+        nav.items = nav.items.concat(
+          group.children.flatMap(reflectionToNavItem)
+        )
+      }
     })
-    .flat()
 
-  return nav ?? []
+    return nav
+  }
+
+  return navFromReflectionGroups(project.groups, result)
 }
 
 const typedocConfig = {
+  excludeExternals: true,
   excludeInternal: true,
   excludePrivate: true,
   excludeProtected: true,
@@ -66,11 +87,14 @@ const removeTrailingSlash = (pathString = '') =>
     ? pathString.slice(0, pathString.length - 1)
     : pathString
 
-export const initAstroTypedoc = async ({
-  baseUrl = '/docs/',
-  entryPoints,
-  tsconfig
-}) => {
+export const initAstroTypedoc = async ({ baseUrl = '/docs/', entryPoints }) => {
+  // Hack to make sure entrypoints will be loaded
+  await writeFile(
+    resolve(__dirname, './tsconfig.generic.json'),
+    JSON.stringify({
+      include: entryPoints
+    })
+  )
   let app = await Application.bootstrapWithPlugins({
     ...typedocConfig,
     ...markdownPluginConfig,
@@ -79,7 +103,7 @@ export const initAstroTypedoc = async ({
     plugin: ['typedoc-plugin-markdown', resolve(__dirname, './theme.js')],
     readme: 'none',
     theme: 'custom-markdown-theme',
-    tsconfig
+    tsconfig: resolve(__dirname, './tsconfig.generic.json')
   })
 
   app.options.addReader(new TSConfigReader())
@@ -95,7 +119,7 @@ export const initAstroTypedoc = async ({
     await app.generateDocs(project, outputFolder)
   }
   let generateNavigationJSON = async (project, outputFolder) => {
-    let navigation = getNavigationFromProject(baseUrl, project)
+    let navigation = buildNavigationFromProjectReflection(baseUrl, project)
 
     await writeFile(
       `${removeTrailingSlash(outputFolder)}/nav.json`,

pnpm-workspace.yaml

@@ -3,3 +3,5 @@ packages:
   - 'test/website-types'
   # Astro site for nanostores project
   - 'test/website-nanostores'
+  # Astro site for nanostores project (multiple entrypoints)
+  - 'test/website-nanostores-multiple-ep'

test/website-nanostores-multiple-ep/.gitignore

@@ -0,0 +1,15 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production

test/website-nanostores-multiple-ep/README.md

@@ -0,0 +1,17 @@
+This site is generated from `nanostores` codebase types.
+
+## `nanstores` repo is needed
+
+To make it work please make sure you have cloned following repos locally:
+
+- [`nanostores`](https://github.com/nanostores/nanostores)
+- [`@nanostores/router`](https://github.com/nanostores/router)
+
+and follow folder structure:
+
+```
+.
+├── astro-typedoc
+├── router
+└── nanostores
+```

test/website-nanostores-multiple-ep/astro.config.mjs

@@ -0,0 +1,29 @@
+import { defineConfig } from 'astro/config'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import initAstroTypedoc from '../../index.js'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const astroTypedoc = await initAstroTypedoc({
+  baseUrl: '/docs/',
+  entryPoints: [
+    resolve(__dirname, '../../../nanostores/index.d.ts'),
+    resolve(__dirname, '../../../router/index.d.ts')
+  ]
+})
+
+const project = await astroTypedoc.getReflections()
+
+await astroTypedoc.generateDocs({
+  frontmatter: {
+    layout: resolve(__dirname, './src/layouts/DocLayout.astro')
+  },
+  outputFolder: 'src/pages/docs',
+  project
+})
+await astroTypedoc.generateNavigationJSON(project, resolve(__dirname, './src/'))
+
+// https://astro.build/config
+export default defineConfig({})

test/website-nanostores-multiple-ep/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "website-nanostores",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^2.10.14"
+  }
+}

test/website-nanostores-multiple-ep/src/components/Sidebar.astro

@@ -0,0 +1,26 @@
+---
+import nav from '../nav.json'
+---
+
+{
+  nav?.modules.length && (
+    <nav class="navigation">
+      {nav.modules.map(mod => (
+        <div>
+          Module: {mod.name} <br />
+          {mod.items.map(modItem => (
+            <div>
+              <a href={modItem.url}>{modItem.title} </a>
+            </div>
+          ))}
+        </div>
+      ))}
+    </nav>
+  )
+}
+<style>
+  .navigation {
+    display: flex;
+    flex-direction: column;
+  }
+</style>

test/website-nanostores-multiple-ep/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

test/website-nanostores-multiple-ep/src/layouts/DocLayout.astro

@@ -0,0 +1,32 @@
+---
+import Sidebar from '../components/Sidebar.astro'
+
+const { frontmatter } = Astro.props
+const { title } = frontmatter
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <div class="layout">
+      <Sidebar />
+      <main>
+        <h1>{title}</h1>
+        <article>
+          <slot />
+        </article>
+      </main>
+    </div>
+  </body>
+</html>
+
+<style>
+  .layout {
+    display: grid;
+    grid-template-columns: 25% 75%;
+  }
+</style>

test/website-nanostores-multiple-ep/src/pages/index.astro

@@ -0,0 +1,17 @@
+---
+import Sidebar from '../components/Sidebar.astro'
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Astro</title>
+  </head>
+  <body>
+    <h1>Nanostores</h1>
+    <Sidebar />
+  </body>
+</html>

test/website-nanostores-multiple-ep/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/base"
+}

test/website-nanostores/src/components/Sidebar.astro

@@ -3,9 +3,9 @@ import nav from '../nav.json'
 ---
 
 {
-  nav?.length && (
+  nav?.items?.length && (
     <nav class="navigation">
-      {nav.map(item => {
+      {nav.items.map(item => {
         return <a href={item.url}>{item.title}</a>
       })}
     </nav>

test/website-types/src/components/Sidebar.astro

@@ -3,9 +3,9 @@ import nav from '../nav.json'
 ---
 
 {
-  nav?.length && (
+  nav?.items?.length && (
     <nav class="navigation">
-      {nav.map(item => {
+      {nav.items.map(item => {
         return <a href={item.url}>{item.title}</a>
       })}
     </nav>