Fundamentals

This chapter introduces how pages are created with LightNet. Most of the concepts presented here come from Astro, so use the Astro documentation if you want to dig deeper.

Defining routes with the pages folder

Routes on your site are determined by the files in the src/pages folder. The file path maps directly to the page route. For instance, a file at src/pages/en/about.astro corresponds to https://your.site/en/about.

In addition to your own pages, LightNet automatically adds:

• Homepage Redirect: Visiting the root path (https://your.site) redirects to the homepage in the default site language.
• Search Page: Lists all media items at [locale]/media.
• Details Pages: Displays details of a media item at [locale]/media/[id].
• 404 Page: Shown by convention when a non-existent page is accessed. Available at /404.

All pages, except 404 and /, reside in folders defining their locale.

There are two different types of locale folders: static and dynamic. You can use both inside the same project.

Note

Static and dynamic routes are based on Astro’s routing concept.

Static locale folder

Create separate folders for each locale, such as src/pages/en/ and src/pages/de/. This approach allows for completely unique page structures per language. For example, you could build an English homepage that starts with a gallery and a German homepage that starts with text.

Use static locale folders when:

• Rendering Markdown content for different locales.
• Customizing page layouts for each locale.
• You only need to support one language.

Dynamic locale folder

Create a single folder for all locales named src/pages/[locale]/ (use exactly this name for the folder). The [locale] placeholder is resolved by Astro during the build process, using a getStaticPaths function exported by each page in this folder.

To provide a getStaticPaths function with all locales, you can use our helper function getLocalePaths:

src/pages/[locale]/some-page.astro

---
export { getLocalePaths as getStaticPaths } from "lightnet/i18n";
---

Tip

To access the current locale within a dynamic folder, use Astro.locals.i18n.currentLocale.

Use dynamic locale folders for pages with the same structure but different translations.

File layout

Here’s a basic layout for a LightNet page file:

some-page.astro

---
import { Page } from "lightnet/components";
---
<Page>
    {/* Add components and HTML here */}
</Page>

• The frontmatter (inside ---) runs during the build and is used for imports and variable definitions.
• Below the frontmatter is the page content. You can insert HTML and any Astro component including LightNet’s reusable components.

LightNet’s Page component ensures a consistent layout by adding the header, language selection menu, and navigation menus.

File to URL mapping

Each component inside the src/pages folder maps to an HTML file in the output directory, based on its filename:

• src/pages/en/index.astro → /en/index.html
• src/pages/en/about.astro → /en/about/index.html
• src/pages/en/info.md → /en/info/index.html

Note

Notice how Astro generates index.html files. Browsers serve index.html when accessing a folder path. This simplifies URLs (e.g., https://your.site/en/about instead of https://your.site/en/about.html).