Skip to content

Commit c9a9bf0

Browse files
rozwaderrozwader
committed
feature: added translations for whole site, fixed scaling and sizing in few components, added .readme file
1 parent 8a0d30a commit c9a9bf0

File tree

16 files changed

+434
-214
lines changed

16 files changed

+434
-214
lines changed

‎README.md‎

Lines changed: 151 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,161 @@
1-
# Astro Starter Kit: Basics
21

3-
```sh
4-
npm create astro@latest -- --template basics
2+
# Documentation
3+
- Project is created in `astro` framework.
4+
- Project is based on Typescript mixed with Javascript language.
5+
- All the project components files are created in `.astro` format.
6+
- Project uses `i18n` for easy translations.
7+
8+
# Running project in dev mode
9+
Run commands to setup project:
10+
`npm install`
11+
`npm run dev`
12+
13+
Project should be stationed on `localhost` on `:4321` port.
14+
15+
# Project file tree
16+
```
17+
agency-v2
18+
node_modules
19+
public
20+
static
21+
locales
22+
de.json // German translation ( not implemented )
23+
en.json // English translations
24+
pl.json // Polish translations
25+
src
26+
assets // All of the project static images directory
27+
...
28+
components // Multi-use components directory
29+
...
30+
i18n // Functionalities of i18n mechanic directory
31+
ui.ts // Simple variables for language definition
32+
utils.ts // Functions for i18n mechanics
33+
layouts // Predefined components for layouts and site content directory
34+
Content.astro // Predefined main page content for all language based views
35+
Layout.astro // Predefined layout for every view
36+
pages // Astro views for given langauage directory ( default polish language )
37+
en // Site content for english view directory
38+
about.astro // About view
39+
index.astro // Main view
40+
about.astro // About view in Polish
41+
index.astro // Main view in Polish
42+
scripts // Helper modules for site functionality directory
43+
api.ts // API requests file
44+
helpers.ts // Helper functions
45+
NavbarScripts.js // Navbar functions
46+
sections // Site sections directory
47+
...
48+
global.css // All of the site predefined colors and css
49+
types.ts // All of the site types in one file
50+
i18next-parser.config.js // Config for i18n parser
51+
```
52+
# i18n parser mechanic
53+
i18n `.json` files can be found in `public/static/locales/` directory.
54+
Each file represents specific language which contains translations for every sentence/word.
55+
## i18n parser run mechanic
56+
Firstly, run `npm run i18n` in your console.
57+
The parser checks every file for defined translations, then it adds them to language `.json` files with every value set to `__NOT_TRANSLATED__` by default.
58+
59+
## Use case for translations defined in custom tags
60+
61+
```ts
62+
---
63+
import { getLangFromUrl, useTranslations } from "../i18n/utils";
64+
65+
const lang = getLangFromUrl(Astro.url);
66+
const t = useTranslations(lang);
67+
---
68+
69+
<CustomTag>
70+
<!-- t("Object.key") -->
71+
<p>{t("Object.key")}</p>
72+
</CustomTag>
573
```
74+
If you put translation in custom tag, then the `i18next-parser` won't see it. You need to put translation function inside comment, preferably above the tag you are using it in.
675

7-
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
8-
9-
## 🚀 Project Structure
10-
11-
Inside of your Astro project, you'll see the following folders and files:
12-
13-
```text
14-
/
15-
├── public/
16-
│ └── favicon.svg
17-
├── src
18-
│   ├── assets
19-
│   │   └── astro.svg
20-
│   ├── components
21-
│   │   └── Welcome.astro
22-
│   ├── layouts
23-
│   │   └── Layout.astro
24-
│   └── pages
25-
│   └── index.astro
26-
└── package.json
76+
## English example
77+
78+
```json
79+
{
80+
"ExampleTranslationsHeader": {
81+
"ExampleTitle": "Translation"
82+
},
83+
"ExampleTranslationsObjectForSpecificContentList": {
84+
"ExampleTitle": "Translation",
85+
"ExampleDescription": "Translation"
86+
}
87+
}
2788
```
2889

29-
To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
90+
## Polish example
91+
92+
```json
93+
{
94+
"ExampleTranslationsHeader": {
95+
"ExampleTitle": "Tłumaczenie"
96+
},
97+
"ExampleTranslationsObjectForSpecificContentList": {
98+
"ExampleTitle": "Tłumaczenie",
99+
"ExampleDescription": "Tłumaczenie"
100+
}
101+
}
102+
```
103+
The name of given object and key of translation stay in the same langauge, in this case english.
104+
Only the translations should always refer to given language.
105+
106+
## Use case for i18n in server-side rendering
107+
108+
```ts
109+
---
110+
import { getLangFromUrl, useTranslations } from "../i18n/utils";
111+
112+
const lang = getLangFromUrl(Astro.url);
113+
const t = useTranslations(lang);
114+
---
115+
116+
<div>
117+
<p>{t("Object.key")}</p>
118+
</div>
119+
```
120+
121+
## Use case for i18n in client-side rendering
122+
123+
```html
124+
---
125+
---
126+
127+
<div>
128+
<p id="paragraph"></p>
129+
</div>
130+
131+
<script>
132+
import { getLangFromUrl, useTranslations } from "../i18n/utils";
133+
134+
const lang = getLangFromUrl(new URL(window.location.href));
135+
const t = useTranslations(lang);
136+
137+
const paragraph = document.querySelector("#paragraph");
138+
paragraph.innerText = t("Object.key");
139+
</script>
140+
```
141+
142+
The use case for server-side and client-side differs.
143+
Variable `lang` that is assigned to `getLandFromUrl` gets different prop.
144+
145+
Argument `Astro.url` only works on server-side.
146+
So in client-side you need to use `new URL(window.location.href)` to get language from url.
147+
148+
# All of the project used dependencies
30149

31-
## 🧞 Commands
150+
### Icons
151+
Icons are used thru `<Icon />` tag.
152+
Icons libraries used in project are:
32153

33-
All commands are run from the root of the project, from a terminal:
154+
`uil` ( Unicons ),
155+
`tabler` ( Tabler Icons ),
34156

35-
| Command | Action |
36-
| :------------------------ | :----------------------------------------------- |
37-
| `npm install` | Installs dependencies |
38-
| `npm run dev` | Starts local dev server at `localhost:4321` |
39-
| `npm run build` | Build your production site to `./dist/` |
40-
| `npm run preview` | Preview your build locally, before deploying |
41-
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
42-
| `npm run astro -- --help` | Get help using the Astro CLI |
157+
### Carousel library
43158

44-
## 👀 Want to learn more?
159+
Carousel component is based on `embla-carousel`.
160+
Component is using plugin `Autoscroll` defined by `embla-carousel`.
45161

46-
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

‎public/static/locales/de.json‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,67 @@
11
{
2+
"ContactForm": {
3+
"Company": "__NOT_TRANSLATED__",
4+
"Content": "__NOT_TRANSLATED__",
5+
"Description": "__NOT_TRANSLATED__",
6+
"Email": "__NOT_TRANSLATED__",
7+
"Error": "__NOT_TRANSLATED__",
8+
"Name": "__NOT_TRANSLATED__",
9+
"Phone": "__NOT_TRANSLATED__",
10+
"Send": "__NOT_TRANSLATED__",
11+
"Subject": "__NOT_TRANSLATED__",
12+
"Surname": "__NOT_TRANSLATED__",
13+
"Title": "__NOT_TRANSLATED__"
14+
},
215
"hero": {
316
"header": "__NOT_TRANSLATED__"
417
},
518
"iconsSection": {
619
"perfect": "__NOT_TRANSLATED__",
720
"time": "__NOT_TRANSLATED__"
821
},
22+
"language": {
23+
"current": "__NOT_TRANSLATED__"
24+
},
925
"links": {
1026
"about": "__NOT_TRANSLATED__",
1127
"aboutus": "__NOT_TRANSLATED__",
1228
"contact": "__NOT_TRANSLATED__",
1329
"joinus": "__NOT_TRANSLATED__",
1430
"learnmore": "__NOT_TRANSLATED__"
1531
},
32+
"Offers": {
33+
"Card1": {
34+
"Paragraph1": "__NOT_TRANSLATED__",
35+
"Paragraph2": "__NOT_TRANSLATED__",
36+
"Title": "__NOT_TRANSLATED__"
37+
},
38+
"Card2": {
39+
"Paragraph1": "__NOT_TRANSLATED__",
40+
"Paragraph2": "__NOT_TRANSLATED__",
41+
"Title": "__NOT_TRANSLATED__"
42+
},
43+
"Offer1": {
44+
"Header": "__NOT_TRANSLATED__",
45+
"Price": "__NOT_TRANSLATED__"
46+
},
47+
"Offer2": {
48+
"Header": "__NOT_TRANSLATED__",
49+
"Price": "__NOT_TRANSLATED__"
50+
},
51+
"Offer3": {
52+
"Header": "__NOT_TRANSLATED__",
53+
"Price": "__NOT_TRANSLATED__"
54+
},
55+
"Offer4": {
56+
"Header": "__NOT_TRANSLATED__",
57+
"Price": "__NOT_TRANSLATED__"
58+
},
59+
"Offer5": {
60+
"Header": "__NOT_TRANSLATED__",
61+
"Price": "__NOT_TRANSLATED__"
62+
}
63+
},
1664
"urls": {
17-
"about": "__NOT_TRANSLATED__",
18-
"contact": "__NOT_TRANSLATED__"
65+
"about": "__NOT_TRANSLATED__"
1966
}
2067
}

‎public/static/locales/en.json‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,67 @@
11
{
2+
"ContactForm": {
3+
"Company": "Company",
4+
"Content": "Content",
5+
"Description": "You will receive a response at the provided email address within 24 hours. We will address all your questions and propose solutions tailored to the specified budget.",
6+
"Email": "E-mail",
7+
"Error": "Please ensure all required fields are filled out correctly before submitting.",
8+
"Name": "Name",
9+
"Phone": "Phone",
10+
"Send": "Send",
11+
"Subject": "Subject",
12+
"Surname": "Surname",
13+
"Title": "Achieve your company’s goals with Vitresoft."
14+
},
215
"hero": {
316
"header": "Today is your| day to grow| in ideas."
417
},
518
"iconsSection": {
619
"perfect": "Perfect for freelancers",
720
"time": "Quick service delivery time"
821
},
22+
"language": {
23+
"current": "EN"
24+
},
925
"links": {
1026
"about": "About",
1127
"aboutus": "About us",
1228
"contact": "Contact",
1329
"joinus": "Join us",
1430
"learnmore": "learn more"
1531
},
32+
"Offers": {
33+
"Card1": {
34+
"Paragraph1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi nunc, condimentum vitae lectus eget, dapibus luctus ex.",
35+
"Paragraph2": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi nunc, condimentum vitae lectus eget, dapibus luctus ex.",
36+
"Title": "Lorem Ipsum"
37+
},
38+
"Card2": {
39+
"Paragraph1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi nunc, condimentum vitae lectus eget, dapibus luctus ex.",
40+
"Paragraph2": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mi nunc, condimentum vitae lectus eget, dapibus luctus ex.",
41+
"Title": "Lorem Ipsum"
42+
},
43+
"Offer1": {
44+
"Header": "Event Planning",
45+
"Price": "from 100 USD"
46+
},
47+
"Offer2": {
48+
"Header": "Event Managment",
49+
"Price": "from 500 USD"
50+
},
51+
"Offer3": {
52+
"Header": "Event Marketing",
53+
"Price": "from 300 USD"
54+
},
55+
"Offer4": {
56+
"Header": "Event Setup",
57+
"Price": "from 800 USD"
58+
},
59+
"Offer5": {
60+
"Header": "Consultation",
61+
"Price": "from 200 USD"
62+
}
63+
},
1664
"urls": {
17-
"about": "about",
18-
"contact": "contact"
65+
"about": "about"
1966
}
2067
}

0 commit comments

Comments
 (0)