What is this post.url?

[yinhx3]

📚 Subject area/topic

Guides and recipes

📋 Page(s) affected (or suggested, for new content)

https://docs.astro.build/en/guides/markdown-content/#dynamic-jsx-like-expressions

📋 Description of content that is out-of-date or incorrect

src/pages/my-posts.astro

---
import * as greatPost from '../posts/great-post.md';
const posts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
---

<p>{greatPost.frontmatter.title}</p>
<p>Written by: {greatPost.frontmatter.author}</p>

<p>Post Archive:</p>
<ul>
  {posts.map(post => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
</ul>

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

'../posts/*.md' isn't in pages folder. What is the URL should be? Did I miss something?

[kannansuresh]

Markdown files loaded with import.meta.glob() return MarkdownInstance interface.

url represents the rendered path of the file.

You can read more here https://docs.astro.build/en/guides/imports/#import-type-utilities

[yinhx3]

Markdown files loaded with import.meta.glob() return MarkdownInstance interface.

url represents the rendered path of the file.

You can read more here https://docs.astro.build/en/guides/imports/#import-type-utilities

What is a rendered path of a file outside of pages folder?
At the first example at https://docs.astro.build/en/guides/imports/#importmetaglob, posts are in pages folder, so the post.url is clear.

src/components/my-component.astro

---
// imports all files that end with `.md` in `./src/pages/post/`
const matches = import.meta.glob('../pages/post/*.md', { eager: true });
const posts = Object.values(matches);
---
<!-- Renders an <article> for the first 5 blog posts -->
<div>
{posts.slice(0, 4).map((post) => (
  <article>
    <h2>{post.frontmatter.title}</h2>
    <p>{post.frontmatter.description}</p>
    <a href={post.url}>Read more</a>
  </article>
))}
</div>

Comment at https://docs.astro.build/en/guides/imports/#astro-files says /* The URL for this file (if it is in the pages directory) */

export interface AstroInstance {
  /* The file path of this file */
  file: string;
  /* The URL for this file (if it is in the pages directory) */
  url: string | undefined;
  default: AstroComponentFactory;
}

But https://docs.astro.build/en/guides/imports/#markdown-files doesn't have similar description.

So, what does <a href={post.url}> in https://docs.astro.build/en/guides/markdown-content/#dynamic-jsx-like-expressions actually mean? Navigate to a page generated implicitly by astro, or download the markdown file?

[delucis]

I think this example is assuming files in the src/pages/ directory, so url would be available.

The docs for MarkdownInstance show that url can be undefined, but don't specify that it's undefined for Markdown outside of src/pages/.

I guess we could update the example to avoid using post.url as that's not the main point of the example?

[yinhx3]

I think this example is assuming files in the src/pages/ directory, so url would be available.

In the example of https://docs.astro.build/en/guides/markdown-content/#dynamic-jsx-like-expressions, the file itself is src/pages/my-posts.astro, so '../posts/*.md' is src/posts/*.md, and it use <a href={post.url}>

[delucis]

Yeah, I just think that’s a detail someone missed — probably the filename was added later without attention to the detail in the example content or something.

[sarah11918]

Agreed, this seems to be a matter of fixing the file paths so that we're talking about pages within src/pages/ and files at the right path in relation to each other. Will add help wanted and good first issue here so someone can update file names and paths so everything is consistent!