📦️ Astro template webpage

---

📦 SETUP • ⚙️ CONFIGURATION • ️️️🛰️ FEATURES

---

📝 About

Tired of sluggish websites and SEO headaches? Unleash the power of lightning-fast performance and built-in optimization with this Astro template builder! Crafted for developers who value speed and simplicity, this robust toolkit empowers you to build stunning websites that soar in search engines and captivate users. Ditch the struggle and focus on what matters most - crafting impactful content that drives engagement. Welcome to the future of web development - where SEO and performance work hand-in-hand. (⬆️ back to top)

---

📚 Table of content

• 📝 About
• 🛰️ Features
• ⚡️ Requirements
• 📦 Installation
• ⚙️ Configuration
  • Site configuration
  • Environment Varaibles
• 🚀 Usage
• ⚡️ Scripts
• 🌎 Browser support

---

🛰️ Features

• 🌌 Astro - Astro Framework
• 🦾 Typescript - Extremely strict type checking
  • ✅ Absolute imports - No more bad imports
• 💎 Sass - Css framework for ui development
  • ✅ BEMIT - Arquitecture for sass
  • ✅ Mobile firts - Best performance for css
  • ✅ Reset - Reset css for match style between browsers
  • ✅ Join media queries - Join media queries for small file size
  • ✅ Vendor prefixes - Vendor prefixes for all support
  • ✅ Remove unused css - Remove unused css in build
• 🏗️ Clean arquitecture - For clean code and scalablility
• 🌎 SEO - SEO meta data, open graph and more
  • ✅ Sitemap - Sitemap generator
  • ✅ RSS - RSS generator
  • ✅ Open graph - Advanced open graph SEO
  • ✅ ️Robot - Robot txt configuration
  • ✅ Canonical - Auto canonical url
  • ✅ Google search console - For SEO stadistics
  • ✅ Google analytic - For analytics of the webpage
• 📐 Linter - Linter and formatting all kind of files
  • ✅ Eslint - Litner and formatting ts and js files
  • ✅ Stylelint - Linter css files
• 🕹️ Git - Control version and more
  • ✅ Github issue template - Github issues organization
  • ✅ Githooks - Git hook for validate code quality
  • ✅ Changelog - Changelog and realese for github
  • ✅ Sematic release - Automatization of releases
• ⚙️ Configuration - Vscode, env variables and more
  • ✅ Vscode configuration - Vscode recommendations, extensions and more
  • ✅ Env validation - Enviroment variables validation
  • ✅ Htaccess snipets - Differents htaccess for all kind of situations
• 🧩 Components
  • ✅ Image component - Ready to use optimize image component
  • ✅ Show component - Ready to use show component
  • ✅ For component - Ready to use for map components
• ️⚡️ Performance
  • ✅ Web worker (partytown) - For lazy-loaded large libraries
  • ✅ Bundler analizer - Analize your bundle size
  • ✅ Compress - Compress images, font, css, js, and html
  • ✅ Non blocking - Non blocking js, css and more
  • ✅ Font optimization - Font transformation and declaration
• 📦 Pnpm - Fast package manager
• 💯 Perfect lighthouse score - Because performance matters

---

⚡️ Requirements

• node >= 20.10.0
• git >= 2.38
• pnpm >= 8.2.0

(back to top)

---

📦 Installation

After cloning the repo run this command to install all the dependencies

pnpm install

(back to top)

---

⚙️ Configuration

The configuration needed for this project is to set up the env variables and also the site configuration object here are the examples:

Site configuration

This file is located in src/global/configuration/site_configuration.ts

• siteName - Global title of the webpage
• description - Global description of the webpage
• defaultLocale - Default locale of the webpage
• autor - Author object that appears in a meta tag
  • author.name - Name of the author
  • author.email - Email of the author
  • author.web - Web of the author
• googleSiteVerificationId - Id of google search console
• googleAnalyticId - Id of the google analytics

Evironment varaibles

This environment variables are located in src/global/env/**.env

file: .example.dev.env

PORT=3000
BASE_URL=http://localhost:$VITE_PORT

file: .example.prod.env

BASE_URL=

file: .example.staging.env

PORT=4173
BASE_URL=http://localhost:$VITE_PORT

(back to top)

---

🚀 Usage

Before installing all the dependencies you can run the project with

pnpm dev

To see the production ready page you can run

pnpm staging

Builds the app for production to the dist folder.

It correctly bundles Solid in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes, also it compress all the assets and images in the dist folder.

Your app is ready to be deployed.

(back to top)

---

⚡️ Scripts

The following scripts are available in the package.json:

• preinstall: This script is for only allow pnpm as package manager
• postinstall: This script is for setting up the git hooks and validate the error after commit to github
• dev: This script is for see the webpage in dev mode
• staging: This script is for see production, this run the env variables an set the webpage with all the settings
• build-dev: This script compile the project in dev mode
• build: This script is for build in production
• lint: This script is for format and lint all the files
• lint-eslint: This script is for lint ts, tsx and more files
• lint-stylelint: This script is for lint css files

(back to top)

---

🌎 Browser support

Here is the list of all the browser this website support

IE / Edge	Firefox	Safari	Safari IOS	Samsung	Opera
✔️	✔️	✔️	✔️	✔️	✔️

(back to top)