Create internal links

This chapter explains how to create internal links to your pages.

When creating internal links, make sure you always add the locale in front of the link. For example this is how you can create a link to the about page inside an Astro component using JavaScript template strings:

`/${Astro.locals.i18n.currentLocale}/about`

LightNet also provides utility functions in lightnet/utils for creating paths:

• detailsPagePath: To build the localized path to a media item’s details page
• searchPagePath: To build the localized path to the search page including preset filters.

Reference

detailsPagePath(locale, mediaItem)

Returns the localized path to a media item’s details page.

• locale: The current locale as provided by Astro.locals.i18n.currentLocale
• mediaItem: A media item as provided by Astro’s getEntry, getCollection or LightNet’s getMediaItems.

Example code that creates an anchor link to a media item’s details page:

---
import { getEntry } from "astro:content"
import { detailsPagePath } from "lightnet/utils"

const { currentLocale } = Astro.locals.i18n
const mediaItem = await getEntry("media", "your-media-item-id")
if(!mediaItem) {
    throw new Error("No media item found")
}
---
<a href={detailsPagePath(currentLocale, mediaItem)}>Link</a>

searchPagePath(locale, query)

Returns the localized path to the search page including preset filters.

• locale: The current locale as provided by Astro.locals.i18n.currentLocale
• query (optional): Sets filters for the search page. Supported options are:
  • category (optional): Filter for a category identifier.
  • type (optional): Filter for a media type identifier.
  • language (optional): Filter for a content language.
  • search (optional): Prefill the search input with a search term.

Example code that creates an anchor link to the search page filtered by the category children:

---
import { searchPagePath } from "lightnet/utils"

const { currentLocale } = Astro.locals.i18n
---
<a href={searchPagePath(locale, {category: "children"})}>Search page</a>