Skip to content
LightNet

Configurations

LightNet provides flexible configuration options to tailor your site to your specific requirements.
This guide gives an overview of the primary configuration file, astro.config.mjs, and walks you through essential settings. It also explains how to solve basic configuration tasks, like setting up the main menu.

Initializing astro.config.mjs

The primary configuration file for your LightNet project is astro.config.mjs. This file defines global settings for your site, such as the title, languages, base URL, and more.

Below is a minimal astro.config.mjs file for a LightNet site:

astro.config.mjs
import lightnet from "lightnet";
import { defineConfig } from "astro/config";


export default defineConfig({
  site: "https://yourdomain.com",
  integrations: [
    lightnet({
      title: "Your Site's Name",
      languages: [
        {
          code: "en",
          label: "English",
          isDefaultUILanguage: true,
        },
      ],
    }),
  ],
});

This highlights essential settings for every site built with LightNet. Make sure you adjust them to match your ministry’s needs:

  1. Site - The site property defines the base URL for your website. Update this to match your deployment URL. 
    site: "https://yourdomain.com"
  2. Title - The title property sets the title for your site, appearing in the browser tab and the header bar. You can set this to your ministry’s or community’s name. 
    title: "Your Site's Name"
  3. Languages - This setting defines the languages available on your site, including UI and content languages. Refer to the Internationalization Guide and Adding Media Items Guide for more details.
    For the beginning, add your default language for the user interface: 
    languages: [
       {
         code: "en",
         label: "English",
         isDefaultUILanguage: true,
       },
     ]
    • code: Use your language’s IETF BCP-47 tag (e.g., es for Spanish).
    • label: Display name for the language selector this can either be a fixed string (e.g., Español) or a translation key (e.g. x.languages.es).
    • translations: Add custom translations for UI elements not covered by LightNet.
      See the Internationalization Guide for more information.
    • isDefaultUILanguage: Set this to true for exactly one language. This becomes the fallback language, used for missing translations or when users visit /.

Common Configuration Tasks

This guide explains how to solve common configuration tasks with LightNet.
For a comprehensive overview of all configuration options, refer to the full Configuration Reference.

The logo appears next to your site name in the header bar. It is optional, but recommended. Set the path to an image inside the ./src/assets folder (or a subfolder). Supported formats include svg, jpg, png, and webp.
LightNet optimizes the image size for better performance. We recommend providing a image file with a width and height of 150px.

astro.config.mjs
// ...
lightnet({
  // ...
  logo: { src: "./src/assets/logo.png" },
});

Set a Favicon

LightNet allows you to set an favicon (icon displayed in browser tabs and bookmarks).

The simplest way to set a favicon is by placing a favicon.ico file in your project’s public/ folder.
This file will be served at /favicon.ico, a standard location recognized by all browsers.

For a better user experience, use multiple icon formats tailored to different platforms. This approach ensures optimal display quality across devices. Reference the icons in your astro.config.mjs file as follows:

astro.config.mjs
// ...
lightnet({
  // ...
  favicon: [
    {
      rel: "icon",
      href: "favicon.ico",
      sizes: "32x32",
    },
    {
      rel: "icon",
      href: "icon.svg",
    },
    {
      rel: "apple-touch-icon",
      href: "apple-touch-icon.png",
    },
  ],
});

Required Files

Place these files in your public/ folder:

  • favicon.ico: A fallback icon for all browsers. Recommended size: 32x32 pixels.
  • icon.svg: A vector graphic for high-resolution displays. Ensure good contrast on light and dark backgrounds.
  • apple-touch-icon.png: Used for home screen shortcuts on iPhones/iPads. Recommended size: 180x180 pixels.

Configure the Main Menu

LightNet supports adding a main menu in the header bar, displayed as a hamburger icon on smaller screens.
The menu can link to internal or external pages, such as the home page, search, or about sections.

Here’s an example configuration:

astro.config.mjs
// ...
lightnet({
  // ...
  mainMenu: [
    {
      href: "/",
      label: "ln.home.title",
    },
    {
      href: "/media",
      label: "ln.search.title",
    },
    {
      href: "/about",
      label: "x.navigation.about",
    },
    {
      href: "https://www.om.org/eng/mediaworks/lightnet",
      label: "LightNet",
    },
  ],
});
  • href: Defines the link destination. It can be relative (e.g., /media) or absolute (e.g., an external URL).
    External links will open in a new browser tab.
  • label: The text displayed on the menu item. Use a translation key for localization or a fixed string for non-localized labels.
    Learn more about translation keys in the Internationalization Guide.

Change the Primary Color

LightNet allows you to customize the primary color to align with your ministry’s branding.
This color is used in various UI elements, such as the hover effect on the search magnifier icon in the header bar.

Update the primary color in the tailwind.config.mjs file. For example:

tailwind.config.mjs
import { lightnetStyles } from "lightnet/tailwind.config.ts";


export default {
  presets: [lightnetStyles({ primaryColor: "#14004B" })],
};

Replace #14004B with the hex color code of your choice.
Ensure that the chosen color contrasts well against white backgrounds.

More Configurations

The configurations explained above should help you get started with your LightNet site. For more advanced configuration options, refer to the full Configuration Reference.