I’m attempting to make something like the auto-index on https://minecrafthopper.net, where the other pages in a folder are all linked to on the main page. Is this possible with astro?
#Templating based on files in directory
hearty saddle
faint dome
I’m attempting to make something like the auto-index on https://minecrafthopper....
If your pages are created using markdown you could use Astro.glob to get all .md files in your project, then use getHeadings() on each file to create an array of all headings inside your project, then you can map over the array and create links to each page
hearty saddle
they use .astro files
inland kite
If you want to do this based on .astro files instead of .md, you might want to check out this thread:
https://discord.com/channels/830184174198718474/1025577039438286919
hearty saddle
hmm. the thing with MD is that there isn’t a great way to render it
inland kite
Let me take a look at something
hearty saddle
and the astro files don’t expose their content or paths
inland kite
I was able to get something like this to work, but it's kind of gross and typescript is not happy 😅
hearty saddle
i’m just trying to make a static site
I could always add steps to the build but that would suck
hearty saddle
I can’t really access that
inland kite
You can use Astro.glob like: const pages = await Astro.glob('../pages/your_directory/*.astro') and then in each .astro page's codefence export any "front matter" you need to form the links:
example_page.astro:
---
export const title = "Test Title 1";
export const description = "This is test page 1."
---
<h1>Test Page 1</h1>
well the biggest problem atm is filenames
inland kite
Your index.astro could look like this:
---
const pages = await Astro.glob('../pages/test/*.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>
<div>
{pages.slice(0, 3).map((page) => (
<article>
<h1>{page.title}</h1>
<p>{page.description}</p>
<a href={page.url}>Read more</a>
</article>
))}
</div>
</body>
</html>
You can access page.url and page.file
Here pages[0].url returns /test/TestPage1