Astro - LightNet's foundation

LightNet is built on the foundation of Astro. To understand how LightNet integrates with Astro, this chapter introduces Astro’s main concepts and how LightNet uses them. Astro is a JavaScript web framework optimized for building fast, content-driven websites. We recommend consulting the Astro documentation for a deeper understanding.

Static Site Generation

Astro implements static site generation (SSG) to produce static HTML, CSS, and JavaScript that can be hosted on any web server. It also supports server-side rendering (SSR) for dynamic scenarios.

Every LightNet site is an Astro project utilizing Astro’s SSG capabilities to generate a static media library. LightNet does not rely on Astro’s SSR features.

Developer Experience

Astro offers an excellent developer experience with a fast development server, quick build times, comprehensive documentation, and adherence to web standards.

LightNet enhances this experience by adding tools that simplify the development of static media libraries.

Templates

Astro templates allow you to kickstart new projects by copying the structure and configuration of an existing project. Using the npm create astro command in the terminal, you can initialize a new project by providing the template’s URL. The create astro application then guides you through the setup process.

This approach is utilized in our getting started guide. For instance, the Sk8-Ministry project serves as a template for creating a LightNet media site, providing a foundational structure to build upon. It includes the required dependencies, an initial configuration and example content.

Integrations

Astro can be extended with integrations that add support for tools like React or automate page generation.

LightNet is developed as an Astro integration. It automatically generates pages such as search and detail pages and adds additional integrations like React and Tailwind CSS to the Astro project. By configuring the LightNet integration, you can customize the main menu, add support for new languages — including right-to-left (RTL) languages — and adjust other settings to tailor the media library to your needs.

Pages

The pages folder in an Astro project maps to the generated static folder, defining the routes of the final website.

LightNet builds upon this by automatically adding essential pages, such as a search page, media item details pages, a 404 page and a redirect to your site’s default language. Learn more in the chapters on pages.

Components

Astro allows for defining reusable components that accept parameters and render static HTML. For example, a video player component can be reused with different video URLs.

LightNet provides several prebuilt Astro components to assist in building a media library. These include components for page layouts, a video player, and UI elements such as media galleries.

Astro Islands

Astro supports embedding components from other JavaScript frameworks like React, enabling interactive elements within static pages.

LightNet uses React to implement the search page and allows for adding interactive elements to other pages as well.

Content Collections

Astro projects manage content metadata through files in a dedicated content folder, ensuring structural consistency and accessible data.

LightNet uses content collections to structure media library data. It utilizes this data to generate pages like the media items details pages and offers helper functions for simplified data access, such as a query function to filter media items. Learn more in the chapter on adding content.

Project Structure

LightNet projects follow the Astro project layout. Below is an example directory structure:

• Directory.astro/

  • …
• Directory.vscode/

  • …
• Directorynode_modules/

  • …
• Directorypublic/

  • …
• Directorysrc/

  • Directoryassets/

    • …
  • Directorycontent/

    • …
  • Directorypages/

    • …
  • Directorytranslations/

    • …
• .gitignore
• astro.config.mjs
• package-lock.json
• package.json
• README.md
• tailwind.config.mjs
• tsconfig.json

Directory Overview

• .astro/: Files auto generated by Astro. You must not modify this. Sometimes deleting this can be helpful to reset Astro’s state.
• .vscode/: Configuration for VS Code, like recommended extensions and launch settings.
• node_modules: This is where npm downloads your dependencies to when you run npm install. Do not modify this directly.
• public/: Static files (e.g., PDFs, MP3s) served directly by the web server.
• src/: Core development directory.
  • assets/: Images and fonts referenced in pages.
  • content/: Media Metadata files (JSON).
  • pages/: Defines site routes (e.g. homepage or custom pages).
  • translations/: Language files for internationalization.
• .gitignore: Lists directories and files that should ignored by git. Likely you will not change this.
• astro.config.mjs: Configures LightNet and Astro settings.
• package-lock.json: This file is auto generated during npm install. It lists the actual version numbers of all your dependencies.
• package.json: Configures dependencies and scripts.
• README.md: Describes your project to other developers. It is shown when viewing your repository on GitLab. You can change this however you like.
• tailwind.config.mjs: Configures Tailwind CSS styling for the site.
• tsconfig.json: TypeScript configuration for the project.