Custom Pages

LightNet will automatically generate this pages for you:

• Homepage: The first page that users see when they visit your site. This is on the / route.
• Search Page: A page that displays all media items. This is on the /media route.
• Details Page: A page that displays the details of a specific media item. This is on the /media/:id route.
• 404 Page: A page that is displayed when a user tries to access a page that does not exist. This is on the /404 route.

All other pages have to be added manually. This guide will show you how to add custom pages to your LightNet site.

Understand the page folder structure

All pages are stored in the src/pages folder. The path within the src/pages folder will be the route of the page. For example, a file at src/pages/en/about.astro will be available at the /en/about route.

By convention all LightNet pages are stored in a folder with the locale code. For example, the English version of the about page would be stored in src/pages/en/about.astro. The locale code is used to infer the language of the page.

With Astro you have two options on how to name your locale folders:

• static: You can create a folder for each locale. For example, src/pages/en/about.astro and src/pages/de/about.astro.
• dynamic: You can use square brackets in the file name to create dynamic routes. For example, a file at src/pages/[locale]/about.astro will be available at the /:locale/about route. The :locale part will be replaced by the actual locale of the site. You need to export all available locales in the getStaticPaths function. We offer a helper function to generate the static paths for all locales. You can use it like this:

We offer a helper function to generate the dynamic paths for all locales. You can use it like this:

src/pages/[locale]/about.astro

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

Inside a component on dynamic path you can use Astro.currentLocale to get the current locale of the site.

Scenarios for custom pages

To learn about how to create custom pages, we will go through some scenarios. We offer opinions on how to solve the problems. Feel free to mix and match the solutions to fit your needs.

Add an About page

The about page is a common page that provides information about your ministry or community. You can add an about page by creating a markdown file for each locale. For example, if your site supports English and German, you would create the following files:

• Directorysrc

  • Directorypages

    • Directoryen

      • about.md
    • Directoryde

      • about.md

The content of the /en/about.md file would look like this:

src/pages/en/about.md

---
layout: "lightnet/layouts/MarkdownPage.astro"
---

# About

Some text about your ministry or community.

![Community Picture](../../assets/my-community-picture.jpg)

Inside the frontmatter you choose the layout that you want to use. We offer a MarkdownPage layout that will render the markdown content. This will make sure your page includes the header and looks good on all screen sizes. You can also create your own layout if you want to customize the look of the page. Astro will take care of optimizing your images that are referenced in the markdown file. You will also need to add the about page to the navigation. You can do this by adding the following code to the astro.config.mjs file:

astro.config.mjs

export default defineConfig({
  integrations: [
    lightnet({
      mainMenu: [
        {
          href: "/about",
          label: "x.navigation.about",
        },
      ],
    }),
  ],
});