How to Add Multiple Languages to Your Website Using JavaScript and Astro I18N
-
Making your website support multiple languages (called Internationalization or I18N) can seem tricky, but it's actually quite simple! In this guide, I'll show you how to do it step by step using just plain JavaScript. No libraries or frameworks are needed.
-
-
-
-
-
→ Folder Structure
-
-
-
-
-
-
-
→ Step 1: Create Language Files
-
-
English (en.json):
-
-
-
Spanish (es.json):
-
-
-
-
-
-
-
-
-
→ Step 2: Create an index.html page
-
-
-
-
-
-
-
-
-
→ Step 3: Create an i18n.js file
-
-
-
-
-
\ No newline at end of file
diff --git a/Family-Tree/src/content/i18nblog.md b/Family-Tree/src/content/i18nblog.md
new file mode 100644
index 0000000..8b7050e
--- /dev/null
+++ b/Family-Tree/src/content/i18nblog.md
@@ -0,0 +1,209 @@
+
Implemention of I18N in Astro with Vanilla JavaScript
+
+Internationalization (i18n) is essential for creating websites that support multiple languages, providing a seamless experience for users worldwide. This guide will show you how to set up i18n in an Astro project using Vanilla JavaScript.
+
+---
+
+## Why Use i18n?
+
+- **User Engagement**: Users feel more comfortable navigating a website in their native language.
+- **Wider Audience**: Makes your website accessible to a global audience.
+- **Scalability**: Simplifies adding new languages as your project grows.
+
+---
+
+## File Structure
+
+- The folder and file organization to keep our code neat:
+
+```plaintext
+project/
+тФЬтФАтФА public/
+тФВ тФЬтФАтФА locales/
+тФВ тФВ тФЬтФАтФА en.json # English translations
+тФВ тФВ тФЬтФАтФА es.json # Spanish translations
+тФВ тФФтФАтФА favicon.ico # (Optional) Favicon for the site
+тФЬтФАтФА src/
+тФВ тФЬтФАтФА components/
+тФВ тФВ тФФтФАтФА Header.astro # Header with language selector
+тФВ тФЬтФАтФА pages/
+тФВ тФВ тФФтФАтФА index.astro # Home page
+тФВ тФЬтФАтФА layouts/
+тФВ тФВ тФФтФАтФА BaseLayout.astro # Optional layout for reusability
+тФВ тФФтФАтФА scripts/
+тФВ тФФтФАтФА i18n.js # Script to fetch translation files
+тФЬтФАтФА astro.config.mjs # Astro configuration file
+тФФтФАтФА package.json # Project dependencies
+```
+
+---
+
+## Step 1: Set Up the Project
+
+### Install Astro ЁЯЪА
+
+- Start by creating a new Astro project:
+
+```bash
+npm create astro@latest project
+cd project
+npm install
+```
+
+---
+
+## Step 2: Create Translation Files
+
+- WeтАЩll store translations in JSON files, one for each language. Create a `locales` folder inside `public/` and add the following files:
+
+### **English (en.json)**
+
+```json
+{
+ "greeting": "Hello, World!"
+}
+```
+
+### **Spanish (es.json)**
+
+```json
+{
+ "greeting": "┬бHola, Mundo!"
+}
+```
+
+---
+
+## Step 3: Write the i18n Script
+
+- Add a script to fetch translations dynamically. Create `src/scripts/i18n.js`:
+
+```javascript
+export async function fetchTranslation(lang) {
+ try {
+ const response = await fetch(`/locales/${lang}.json`);
+ if (!response.ok) {
+ throw new Error("Translation file not found");
+ }
+ return response.json();
+ } catch (error) {
+ console.error(error);
+ return { greeting: "Translation error" };
+ }
+}
+```
+
+**This script handles:**
+- Fetching the translation file based on the language code.
+- Returning an error message if the file isnтАЩt found.
+
+---
+
+## Step 4: Build the Header Component
+
+- The `Header.astro` component will allow users to switch languages.
+
+### **Header.astro**
+
+```astro
+
+
+
+
Welcome to Astro i18n
+
+
+
+```
+
+---
+
+## Step 5: Create the Main Page
+
+- The main page will display the greeting based on the selected language.
+
+### **index.astro**
+
+```astro
+---
+import Header from '../components/Header.astro';
+---
+
+
+
+
Loading...
+
+```
+
+---
+
+## Step 6: Add an Optional Layout
+
+- To keep things reusable, wrap your content in a layout.
+
+### **BaseLayout.astro**
+
+```astro
+---
+const title = "Astro i18n Demo";
+---
+
+
+
+
+
+ {title}
+
+
+
+
+
+```
+
+---
+
+## Step 7: Test the Project
+
+- Run the development server to see your `i18n` in action:
+
+```bash
+npm run dev
+```
+
+Visit `http://localhost:3000`, and you should be able to:
+1. View the default greeting in English.
+2. Change the language using the dropdown to see the Spanish greeting.
+
+---
+
+## Key Takeaways
+
+1. **Dynamic Fetching**: Language files are loaded dynamically to reduce initial load time.
+2. **Scalable Design**: Adding new languages is as simple as creating a new JSON file.
+3. **Customizable**: The i18n script can be extended to handle fallback languages, pluralization, or other localization features.
+
+---
+
+## Next Steps
+
+- Add more translations for other sections of your website.
+- Use browser settings to detect the user's preferred language.
+- Implement fallback logic for unsupported languages.
+
+---
\ No newline at end of file
diff --git a/Family-Tree/src/layouts/Card.astro b/Family-Tree/src/layouts/Card.astro
index 2e88f9f..5f83fa6 100644
--- a/Family-Tree/src/layouts/Card.astro
+++ b/Family-Tree/src/layouts/Card.astro
@@ -63,7 +63,7 @@ import "../styles/card.css";
+
diff --git a/Family-Tree/src/layouts/Home.astro b/Family-Tree/src/layouts/Home.astro
index dbd67d2..cdca375 100644
--- a/Family-Tree/src/layouts/Home.astro
+++ b/Family-Tree/src/layouts/Home.astro
@@ -1,21 +1,36 @@
---
-
+import i18nInit from "../utils/i18n";
---
-