Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theelegantcoding/astro_template_webpage
📦️ This repository that contains an Astro template ready for any website you can imagine. It's like a Swiss Army knife for developers, offering pre-built modules and flexible configurations to kickstart your project, regardless of its type.
https://github.com/theelegantcoding/astro_template_webpage
accessibility astro bun clean-architecture clean-code design-system eslint i18n node performance postcss sass seo style-guide stylelint typescript vite web-development
Last synced: about 1 month ago
JSON representation
📦️ This repository that contains an Astro template ready for any website you can imagine. It's like a Swiss Army knife for developers, offering pre-built modules and flexible configurations to kickstart your project, regardless of its type.
- Host: GitHub
- URL: https://github.com/theelegantcoding/astro_template_webpage
- Owner: TheElegantCoding
- Created: 2023-12-31T19:41:20.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-29T22:49:00.000Z (2 months ago)
- Last Synced: 2024-10-30T00:46:33.378Z (2 months ago)
- Topics: accessibility, astro, bun, clean-architecture, clean-code, design-system, eslint, i18n, node, performance, postcss, sass, seo, style-guide, stylelint, typescript, vite, web-development
- Language: SCSS
- Homepage:
- Size: 4.04 MB
- Stars: 14
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: .github/readme.md
- Code of conduct: .github/code_of_conduct.md
Awesome Lists containing this project
README
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](#about)
- [
Features](#features)
- [
Requirements](#requirements)
- [
Installation](#installation)
- [
Configuration](#configuration)
- [Site configuration](#site-configuration)
- [Environment varaibles](#enviroment-varaible)
- [i18n configuration](#i18n-configuration)
- [
Usage](#usage)
- [
Scripts](#scripts)
- [
Browser support](#browser-support)
(
Back to top
)
---
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
- 
`i18n` - Internationalization and translations
- 
`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` - Ready to use optimize image component
- `Show` - Ready to use conditional render component
- `For` - Ready to use for map components
- `Link` - Ready to use for redirect external and internal links
- 
`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
- 
`Bun` - Fast package manager
- 
`Perfect lighthouse score` - Because performance matters
(
Back to top
)
---
Requirements
- 
node >= **20.10.0**
- git >= **2.38**
- bun >= **1.1.0**
- 
aws cli >= **2.17.8**
(
Back to top
)
---
Installation
After cloning the repo run this command to install all the dependencies.
Bun
```bash
bun i
```
(
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
- `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
- `copyright` - Copyright of the owner of the website
- `googleAnalyticId` - Id of the google analytics
- `defaultLocale` - Default locale of the webpage
- `languages` - Object with all the languages you want to support
- `example` - `languages: { en: 'English' }`
Evironment varaibles
This environment variables are located in `src/global/env/**.env`
file: **.example.dev.env**
```yml
PORT=4321
BASE_URL=http://localhost:$PORT
```
file: **.example.prod.env**
```yml
BASE_URL=
```
file: **.example.staging.env**
```yml
PORT=4321
BASE_URL=http://localhost:$PORT
```
i18n configuration
1.- To start using i18n in this project you have to add the languages you want to support in the configuration file `src/global/configuration/site_configuration.ts`, here you will find an object with the key `languages`, also remenber to ser the default language to your preferences, you can set the languages like this:
```ts
const siteConfiguration =
{
defaultLanguage: 'en',
languages:
{
en: 'English',
es: 'Español'
}
}
```
2.- Next you will create in the `src/pages` a directory called `[language]`, here you will duplicate and put all the pages of your project, this is an example:
```
- /pages
- /[language]
- about-us.astro
- index.astro
- 404.astro
- about-us.astro
- index.astro
```
3.- The pages inside this directory will need to add an aditionnal validation for know if the language is correct and it is listeng in the configuration, you can add tis like this
`pages/[language]/index.astro`
```ts
---
import { getStaticLanguage } from '@global/util/language';
export const getStaticPaths = getStaticLanguage;
---
```
4.- Next you will create the translation files, we recommend to use ts files instead of json but you can aslo use json files
```ts
const aboutUsLocale =
{
en:
{
welcome: 'Hello world',
},
es:
{
welcome: 'Hola mundo',
}
};
export { aboutUsLocale };
```
5.- To end you will use this file and make the translation, use this inside you component page and not in the `pages/**` components
```ts
---
import { getI18n, getStaticLanguage, getLanguageFromUrl } from '@global/util/language';
import { aboutUsLocale } from '@module/landing/locale/about_us';
const language = getLanguageFromUrl(Astro.url);
const i18n = getI18n(language, aboutUsLocale);
---
{i18n.welcome}
```
6.- Create the file `src/middleware.ts` and add the following code, this will redirect the default language urls to the base urls, and examples of this is, `/en/about-us` redirect to `/about-us`
```ts
import { getLanguagePathname, validateDefaultLanguage } from '@global/util/language';
import { defineMiddleware } from 'astro/middleware';
const onRequest = defineMiddleware(async (context, next) =>
{
if(validateDefaultLanguage(context.url))
{
const pathname = getLanguagePathname(context.url);
const redirectCode = 302;
return Response.redirect(new URL(pathname, context.url), redirectCode);
}
return next();
});
export { onRequest };
```
That's all the configuration nedeed for i18n in this project.
(
Back to top
)
---
Usage
Before installing all the dependencies you can run the project with
```bash
pnpm dev
```
To see the production ready page you can run
```bash
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
)
---
Copyright © All rights reserved,
developed by ElegantCoder and
