ASTRAL - static pages generator

based on https://astro.build/

Requirements

npm version: 18.17

install

npm i astral-spg@latest

Scripts

npm run start: Opens a selected project in development server.

npm run build {PROJECT_NAME}: Creates a production build of the specified project.

npm run buildAll: Generates production builds for all projects in the projects folder.

Built-in features

Reset.css

import "astral-spg/reset.css";

import reset.css into layout component to reset default browser styles

Helpers

Importing:

import { helperName } from "astral-spg";

1. debounce:

   Reduces the rate of function calls. Accepts a function and a delay in milliseconds.

Usage example:

import { debounce } from "astral-spg";
const debouncedFunction = debounce(() => console.log("Function call"), 200);
window.addEventListener("resize", debouncedFunction);

2. isElementInView

   Checks if an HTML element is within the viewport. Returns true or false.

Usage example:

import { isElementInView } from "astral-spg";
const isVisible = isElementInView(document.getElementById("elementId"));

Custom Helpers and UI-Kit

Adding Custom Helpers and UI Elements

• You can add your own helper functions or common UI elements by creating a ui-kit or helpers folder at the root folder. Importing
• Utilize absolute imports to integrate these custom components or helpers into your project.

Example:

import Heading from "ui-kit/Heading/Heading.astro"; // should be an astro component
import { isDesktopView } from "helpers/helpers"; //should be js code
import Slider from "components/Slider/Slider.astro"; //should be an astro component

With this approach, you can easily extend the functionality of the Static Pages Generator by incorporating your own utilities and UI components, enhancing the customizability and versatility of your projects.

To include new folders (such as a shared folder for components or modules at the root) in absolute imports, you need to modify the tsconfig.json file located at the root of your project.

Working with Translations

Translations are stored in the translations folder within the project directory as JSON files. Additionally, you need to create a utility file responsible for importing these translation files, accepting the locale selected by the user, and returning the appropriate translation. An example of how to organize such a file can be found in the template_project, which is generated during the initial project setup.

Next, in your .astro file, you use this utility in the following manner, treating the object t as a standard JavaScript object with keys and values.

import { getLangSettings } from "path-to-your-translate-folder";
const { t } = getLangSettings(Astro.url);

In your .astro file, you can then use the t object to dynamically render translated text based on the user's locale. This approach ensures that your application can support multiple languages efficiently, adapting to the preferences of different users.

If your default language is different from English, pass it as the second argument:

const { localePrefix } = getLangSettings(Astro.url, "es");

Next, create a translations .json file in the translations folder, as well as a folder within the pages folder with the same name.

For example, if you need a Spanish version, the translations file can be named es, and a folder with the same name should be created within the pages folder to hold the files.