Homepage Customization

The homepage is the first page that users see when they visit your site. You can customize the homepage to include a hero image, a call to action, or a content gallery, add your own components…

The homepage is defined by the src/pages/[locale]/index.astro file. You can customize the homepage by editing this file.

Basic file layout

This is the basic layout of the homepage’s index.astro file:

src/pages/[locale]/index.astro

---
export { getLocalePaths as getStaticPaths } from "lightnet/i18n"
import { Page } from "lightnet/components"
---
<Page>
    {/* Add your content here */}
</Page>

This file is an Astro component. Everything inside the --- is the frontmatter. It will be executed while your site is being built. Use this part to import your components and define your page’s variables. For example, you will query media items here.

The export of getLocalePaths is used to generate the static paths for the site. This will export all available locales for the site. You need this because the homepage is a localized page that will be translated into all available user interface languages.

Everything below the frontmatter is the actual content of the page. You can add any HTML here. We provide reusable components that you can use to build your page. More details below.

The Page component handles the layout of the page. This will add the header, language switcher, menu system… You should wrap your content with this component to ensure that your page is styled correctly.

Tip

The homepage file is using the Astro templating language. It is highly recommended to learn more about Astro to get a deep understanding of how to extend it.

Common Customizations

Most LightNet instance will share some common customizations. Here are some examples of what you can do:

Add a Hero image

The hero image is the first thing that users see when they visit your site. It is a large image that takes up the full width of the screen with a big centered title on top of it. You can add a hero image to your homepage by adding the following code:

src/pages/[locale]/index.astro

---
export { getLocalePaths as getStaticPaths } from "lightnet/i18n"
import { Page, Hero } from "lightnet/components"
import heroImage from "../../assets/hero.jpg"
---

<Page>
    <Hero
        image={heroImage}
        title={"Your Title"}
        subtitle={"Some slogan or description"}
        titleSize="xl"
        subtitleSize="xl"
    />
</Page>

Make sure you add your image to the src/assets folder and import it at the top of the file. We suggest to add a image that is at least 3000px wide to ensure that it looks good on all devices. The image will automatically be optimized for performance.

If your site is multilingual, make sure pass a translated string for the title and subtitle props. Learn more about how to use translations.

Choose a font size for your title and subtitle according to their length. The available sizes are sm, md, lg, xl. The default for both sizes is md.

Add a media item gallery

You can add a gallery of media items to your homepage. This is a great way to showcase your content. We provide a Gallery component that you can use to display your media items. Also we offer a getMediaItems function that you can use to query your media items. Here is an example on how to use both:

src/pages/[locale]/index.astro

---
export { getLocalePaths as getStaticPaths } from "lightnet/i18n"
import { Page, Section, Gallery } from "lightnet/components"
import { getMediaItems } from "lightnet/content"

const someEnglishBooks = await getMediaItems({
  where: { type: "book", language: "en" },
  orderBy: "dateCreated",
  limit: 10
})
---

<Page>
    <Section title="Some English Books">
        <Gallery items={someEnglishBooks} layout="book"/>
    </Section>
</Page>

Inside the frontmatter the someEnglishBooks variable is prepared. This will be executed only once when the site is built. The getMediaItems function helps to query media items (Alternatively you could also use Astro’s getCollection function to query media items). It takes a sql-like query object as an argument. We filter for all media items that have the media-type book and the language en. We order them by the date they were created (newest first) and limit the result to 10 items.

Tip

You can use Astro’s Astro.currentLocale to get the current user interface language of the site. This can be useful if you want to query media items matching the current language.

Use the Section component to layout your content. It will add spacing around your content, make sure it is centered horizontally and add a title. For multilingual sites you should pass a translated string for the title prop.

The Gallery component will display your media items. It will show the title and image of each media item. Pass your media items to the items prop. Also choose a layout to define the appearance of the gallery. Use the Components Reference to learn more about the available layouts.

Add a highlight section

If you have some content to highlight you can use the HighlightSection component. This component will display a large image with a title, a description and a optional link to another page. Here is an example on how to use it:

src/pages/[locale]/index.astro

---
import { Page, HighlightSection } from "lightnet/components"
import highlightImage from "../../assets/highlightImage.jpg"
---
<Page>
    <HighlightSection
        image={highlightImage}
        title="Your Title"
        text="Some description"
        link={{
            href: "/some-page",
            text: "Link Text",
        }}
    />
</Page>

Make sure you add your image to the src/assets folder and import it at the top of the file. We recommend to use a image that is at least 1500px wide to ensure that it looks good on all devices. The image will be optimized for performance. Supported Image formats are jpg, png, webp.

For multilingual sites make sure to pass a translated string for the title, text props.

Add a categories overview

Use the CategoriesOverview component to display a list of all categories. This is a great way to give users an overview of your content. The categories will link to the search page filtered by the category. Here is an example on how to use it:

src/pages/[locale]/index.astro

---
import { Page, CategoriesOverview } from "lightnet/components"
---
<Page>
    <CategoriesOverview />
</Page>

Add your own components

You can also add your own components to the homepage. All HTML, Astro and React components are supported. Use TailwindCSS to style your components. Here is an example on create a custom html section: Refer to the Astro and TailwindCSS documentation to learn more about how to create custom components.

src/pages/[locale]/index.astro

---
import { Page } from "lightnet/components"
---
<Page>
    <section class="bg-gray-800 py-12 mt-24 md:mt-28 text-gray-100">
        <div class="container mx-auto">
            <h2 class="text-3xl font-bold text-center">Your Title</h2>
            <p class="text-lg text-center">Some description</p>
        </div>
    </section>
</Page>

More Customizations

This is not an extensive list of all available options to customize your homepage. Refer to the Components Reference to learn more about the available components and how to use them.