Content Collections #5291
Merged
Content Collections #5291
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 36ffb39 The changes in this PR will be included in the next version bump. 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 |
github-actions
bot
added
pkg: astro
bholmesdev
force-pushed
the
draft/content
branch
from
e118e1a
to
2defe68
Compare
bholmesdev
force-pushed
the
draft/content
branch
from
a801044
to
94c6792
Compare
github-actions
bot
removed
the
pkg: integration
andersk
reviewed
Nov 29, 2022
github-actions
bot
added
the
pkg: integration
|
chenxsan
reviewed
Nov 30, 2022
| day: 'numeric', | ||
| })} | ||
| </time> | ||
| <a href={'/blog/' + post.slug}>{post.data.title}</a> |
There was a problem hiding this comment.
Seems there's no longer a post.url to use now? Does it mean we have to build it ourselves?
There was a problem hiding this comment.
When using getCollection, post.slug is the replacement for post.url! .url will stick around if you ever import Markdown or MDX in src/pages/ using ESM, but we've added this new solution for anything in src/content/.
There was a problem hiding this comment.
After using these APIs more, we might revisit the type signature for imported Markdown and MDX. We already have some funky translations:
frontmatter->dataurl->slugrawContent()->body
I bet we could align these!
There was a problem hiding this comment.
My point is Astro is able to calculate the full url here, so it may not make much sense for users to build the full url themselves. For example, say I have trailingSlash: 'always' enabled in astro.config.mjs, now I would need to take care of the trailing slash now:
<a href={'/blog/' + post.slug + '/'}>
If I change my mind to rename blog to any other names, I have to update those /blog/ as well.
While in before, I can just use:
<a href={post.url}>
There was a problem hiding this comment.
@chenxsan Actually, we can't calculate the full URL here. Let me explain!
Today, the url property is generated for all Markdown and MDX in your src/pages/ directory. Since we know exactly what route will be generated by using src/pages/, we can return the full URL. That also means url is undefined for Markdown and MDX outside of src/pages/, like a src/posts/ directory. This is frustrating for devs that prefer splitting their content out separately, and wire them up to routes using a [...dynamic] page.
Now let's talk about slug. These are generated based on entries in src/content/ (not src/pages/) based on file path relative to the collection directory. So src/content/blog/post.md will have a slug of post.
This is a big improvement over an undefined url if you were storing in a src/posts/ or some equivalent before. It also gives you the freedom to place your content under any route you choose using getStaticPaths. For instance, say we want our src/content/blog entries to live on /news/blog/*. We can create a /news/blog/[...slug].astro like so:
export function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map(post => { params: { slug: post.slug }, props: post });
}...and generate /news/blog/first-post, /news/blog/second-post, etc. Main takeaway: you can organize your src/content/ collections however you'd like, without the collection name influencing the URL.
Of course, this has the compromise of losing that base /news/blog/ in the generated slug. It's up to you to construct this based on how your getStaticPaths works.
All APIs have tradeoffs! We felt this was the best compromise to fix the undefined url problem mentioned earlier, while giving you the flexibility to map content entries to any URL for your choosing.
If this is insufficient, I'm also working on a way to override our default slugs to generate your own at the collection level. Stay tuned for that!
bholmesdev
force-pushed
the
draft/content
branch
from
1834bca
to
25cf020
Compare
This comment was marked as spam.
This comment was marked as spam.
andersk
reviewed
Dec 5, 2022
matthewp
force-pushed
the
draft/content
branch
from
31159b8
to
ddd4f7f
Compare
|
!preview content-schemas |
|
|
!preview content-schemas |
|
bholmesdev
force-pushed
the
draft/content
branch
from
91f7b80
to
345727e
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
bholmesdev
force-pushed
the
draft/content
branch
from
318fad9
to
a4ee6a3
Compare
bholmesdev
force-pushed
the
draft/content
branch
from
cb4da1a
to
6dae520
Compare
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
src/content/, with the helper functionsrenderContentandfetchContentto efficiently retrieve entrieswith-contentexample to showcase these APIsSee RFC for full details and usage instructions!
Testing
getStaticPathsintegration testsrender()style bleed testsDocs
Guide: withastro/docs#2141
API reference: TODO