🧞 Commands

npm create astro@latest --template minimal
npm install sass

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

Every section of the home page is added as a component in /pages/[lang]/index.astro

All copywrite is passed to those components and can be edited in /data/i18n.js

/
├── public/images/
│   └── slides/
│   └── EN/
│   └── ES/
│
├── src/
│   └── data/
│   │   └── links.js
│   │   └── i18n.js
│   │
│   └── layout/
│   │   └── mainLayout.astro
│   │
│   └── components/
│   │   └── footer.astro
│   │   └── gameplay.astro
│   │   └── header.astro
│   │   └── hero.astro
│   │   └── links.astro
│   │   └── lore.astro
│   │   └── menu.astro
│   │   └── newsletter.astro
│   │   └── reviews.astro
│   │   └── specs.astro
│   │
│   └── pages/
│       └── index.astro
│       └── 404.astro
│       └── [lang]/
│           └── index.astro
└── package.json

Relative Paths, Copywriting & URLS

To Add, Update or Delete copywriting or urls you'll need to modify the info in the following files:

• URLS & Relative Paths info: src/data/links.js
• Copywrite [EN/ES] info: src/data/i18n.js

Translations

In order to add a new translation you'll need to create a new copywriting following the default format at src/data/i18n.js and update the attributes for getStaticPaths() function on src/pages/[lang]/index.js

export function getStaticPaths () { 
  return [
    {params: {lang: 'en'}},
    {params: {lang: 'es'}},
  ];
}

How does it works?

getStaticPaths() will receive these attributes from the URL and save them as a const [lang] variable. Another function will then compare the value of this variable with an attribute in src/data/i18n.js. In case the function finds a match, it will load the appropriate translation and pass the data as a parameter to the corresponding components..

Example: website.com/ES/ is a positive match for es attribute at i18n.js file:

export const ui = {
  es: {name:'el camino hacia el abismo'}
  en: {name:'the path into the abyss'}
}

Note: In case the url doesn't exist it'll return the default homepage in english.

Important Links:

Design Sample	Source Code