Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add support for remote [...catchAll] routes #1294

Merged
merged 8 commits into from
Jan 22, 2023
Merged

Conversation

dimaMachina
Copy link
Collaborator

@dimaMachina dimaMachina commented Jan 18, 2023

how look like catch all routes for graphql-eslint repository fetched from git

image

  • add support for remote [...catchAll] routes
  • sanitize remote mdx by removing import statements
  • test collectCatchAll that adds to pageMap meta files and mdx pages
  • fix hydration error
    for some reason remote mdx wrapped with <p/>

image

was caused by extra semi

image

  • be capable provide missing components .<RemoteContent /> now accept components props
  • be capable provide codeHighlight: true and defaultShowCopyCode: true while compiling remote mdx
  • be capable auto-generate meta links for sidebar from dynamic _meta file with createCatchAllMeta()
  • be capable of simple reordering above 👆
  • be capable override internal URLs e.g. [hello](/docs/foo) => [hello](/docs/v2/foo) in remote mdx content
  • folder renaming works for both folders with/without index page
  • better folder structure
{
  "$YOUR_FOLDER_NAME": {
    "type": "folder",
    "title":  "$YOUR_NEW_FOLDER_TITLE",
    "items": {
      "$NESTED_PAGE": "$NESTED_PAGE_TITLE"
    }
  }
}
  • support meta keys with / ❗️this no longer needed

@changeset-bot
Copy link

changeset-bot bot commented Jan 18, 2023

🦋 Changeset detected

Latest commit: fff9f6b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages
Name Type
nextra Patch
nextra-theme-docs Patch
nextra-theme-blog Patch
example-blog Patch
example-docs Patch
swr-site Patch
docs Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link

vercel bot commented Jan 18, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
nextra-theme-docs-dev ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Jan 22, 2023 at 0:29AM (UTC)
nextra-v2 ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Jan 22, 2023 at 0:29AM (UTC)
1 Ignored Deployment
Name Status Preview Comments Updated
nextra ⬜️ Ignored (Inspect) Jan 22, 2023 at 0:29AM (UTC)

Copy link
Owner

@shuding shuding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing work! Left one thing for discussion

Comment on lines 32 to 35
"/getting-started": {
"parser-options": "parser-options",
parser: "parser",
},
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you considered the items proposal from #1239? Or supporting / in keys like:

{
  "configs": "configs",
  "getting-started": "getting-started",
  "getting-started/parser-options": "parser-options",
  "getting-started/parser": "parser"
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can support both?

Update:

I guess the proposal with items is much nicer and later can be used for a global meta file

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shuding after I realised that items solution couldn't be done because there is a case of existing mdx file and folder of the same name

{
  "foo": "Foo", // this is foo.mdx
  "foo": { // this is foo folder but this will overwrite foo file key
    "title": "Foo",
    "type": "Category",
    "items": {}
  } 
}

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think they need to be merged right? It's still 1 item on the sidebar 🤔

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

they should not be merged so nextra under the hood will know if folder has folder index page or not

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tricky thing was i18n. If users can choose foo.en.mdx or foo/index.en.mdx (they point to the same URL), and when accessing /foo, the middleware doesn't know if it's foo.en or foo/index.en. So in the past I documented it as you'll always have to avoid index.en.mdx.

But I think overall the middleware based i18n solution is too hacky and I'd like to fix it properly. I have an idea for that and I'll probably start working on it soon!

Comment on lines 2 to 25
const { listFiles } = require('../../../components/remote-utils')
const { createCatchAllMeta } = require('nextra/catch-all')

module.exports = async () => {
const files = await listFiles()
return createCatchAllMeta(
// Ensure you didn't forget define some file by providing all paths of remote files
files
.filter(filename => filename.startsWith('website/src/pages/docs/'))
.map(filename => filename.replace('website/src/pages/docs/', '')),
// Next you can override order of your meta files, folders should end with / and be nested
{
index: 'Introduction',
'getting-started': 'Getting Started',
'getting-started/': {
parser: 'Parser'
}
}
)
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shuding I still think that nested keys with slashes (I changed the order, now folders should end with slashes, like in .gitignore) are the most friendly way since less code is written.

With the above helper function, I was able to change the original order of items with a few lines coded

from

image

to

image

@shuding
Copy link
Owner

shuding commented Jan 21, 2023

Wow amazing result!! Code LGTM!

dimaMachina and others added 3 commits January 22, 2023 00:17
support meta keys with `/`

fixes

update snapshots

fix hydration error (caused by extra `;`)

correct handle `index` route

use `title` package for dynamic meta's

add createCatchAllMeta() helper function

use createCatchAllMeta in tests

fix meta ordering

fix tests

dry

add another example

fixes

fix folder name

link rewrite

refactor to use `items` prop for folders

simplify

better folder renaming

remove `node:` prefix
@dimaMachina dimaMachina merged commit e10bf74 into main Jan 22, 2023
@dimaMachina dimaMachina deleted the remote-catch-all branch January 22, 2023 00:47
tatukoivisto pushed a commit to tatukoivisto/nextra that referenced this pull request Aug 20, 2023
* add support for remote `[...catchAll]` routes
support meta keys with `/`

fixes

update snapshots

fix hydration error (caused by extra `;`)

correct handle `index` route

use `title` package for dynamic meta's

add createCatchAllMeta() helper function

use createCatchAllMeta in tests

fix meta ordering

fix tests

dry

add another example

fixes

fix folder name

link rewrite

refactor to use `items` prop for folders

simplify

better folder renaming

remove `node:` prefix

* Apply suggestions from code review

* update snapshots after rebase

* add console.log

* bundle nextra esm to es2020

* cache getDynamicMeta

* add prefer-destructuring

* cache result of `globalThis.__nextra_resolvePageMap`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants