Skip to content

Commit f2d0bba

Browse files
italoalmeida0italoalmeida0
committed
Feature: Example With Paraglide JS
1 parent 7d98afa commit f2d0bba

22 files changed

Lines changed: 938 additions & 0 deletions

File tree

‎examples/with-paraglide/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# SolidStart
2+
3+
Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
4+
5+
## Creating a project
6+
7+
```bash
8+
# create a new project in the current directory
9+
npm init solid@latest
10+
11+
# create a new project in my-app
12+
npm init solid@latest my-app
13+
```
14+
15+
## Developing
16+
17+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
18+
19+
```bash
20+
npm run dev
21+
22+
# or start the server and open the app in a new browser tab
23+
npm run dev -- --open
24+
```
25+
26+
## Building
27+
28+
Solid apps are built with _presets_, which optimise your project for deployment to different environments.
29+
30+
By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.

‎examples/with-paraglide/app.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineConfig } from "@solidjs/start/config";
2+
import { paraglideVitePlugin } from "@inlang/paraglide-js";
3+
export default defineConfig({
4+
vite: {
5+
plugins: [
6+
paraglideVitePlugin({
7+
project: "./project.inlang",
8+
outdir: "./src/paraglide",
9+
}),
10+
],
11+
}
12+
});

‎examples/with-paraglide/messages/de.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://inlang.com/schema/inlang-message-format",
3+
"menu_home": "Startseite",
4+
"menu_about": "Über uns",
5+
"hello_world": "Hallo Welt!",
6+
"error_404": "Seite nicht gefunden",
7+
"visit": "Besuchen Sie",
8+
"learn_solidstart": "um zu lernen, wie man SolidStart-Apps erstellt.",
9+
"example_message": "Benutzer: {username}",
10+
"example_name": "Hallo, {firstname} {lastname}",
11+
"about_content": "Dies ist eine Demonstration von SolidStart mit Paraglide JS für Internationalisierung. Es zeigt, wie man mehrsprachige Anwendungen mit automatischem Routing und Nachrichtenverwaltung erstellt.",
12+
"features_title": "Funktionen",
13+
"feature_auto_detection": "Automatische Spracherkennung",
14+
"feature_url_routing": "URL-basiertes Sprach-Routing",
15+
"feature_type_safe": "Typsicheres Nachrichtensystem",
16+
"feature_fast_lightweight": "Schnell und leichtgewichtig",
17+
"feature_seo_friendly": "SSR und SEO-freundlich mit korrekten Sprachattributen"
18+
}

‎examples/with-paraglide/messages/en.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://inlang.com/schema/inlang-message-format",
3+
"menu_home": "Home",
4+
"menu_about": "About",
5+
"hello_world": "Hello World!",
6+
"error_404": "Page Not Found",
7+
"visit": "Visit",
8+
"learn_solidstart": "to learn how to build SolidStart apps.",
9+
"example_message": "User: {username}",
10+
"example_name": "Hi, {firstname} {lastname}",
11+
"about_content": "This is a demonstration of SolidStart with Paraglide JS for internationalization. It showcases how to build multilingual applications with automatic routing and message management.",
12+
"features_title": "Features",
13+
"feature_auto_detection": "Automatic language detection",
14+
"feature_url_routing": "URL-based language routing",
15+
"feature_type_safe": "Type-safe message system",
16+
"feature_fast_lightweight": "Fast and lightweight",
17+
"feature_seo_friendly": "SSR and SEO-friendly with proper lang attributes"
18+
}

‎examples/with-paraglide/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "example-with-paraglide",
3+
"type": "module",
4+
"scripts": {
5+
"dev": "vinxi dev",
6+
"build": "paraglide-js compile --project ./project.inlang --outdir ./src\\paraglide && vinxi build",
7+
"start": "vinxi start",
8+
"version": "vinxi version"
9+
},
10+
"dependencies": {
11+
"@solidjs/meta": "^0.29.4",
12+
"@solidjs/router": "^0.15.0",
13+
"@solidjs/start": "^1.1.0",
14+
"@inlang/paraglide-js": "2.2.0",
15+
"solid-js": "^1.9.5",
16+
"vinxi": "^0.5.7"
17+
},
18+
"engines": {
19+
"node": ">=22"
20+
}
21+
}

‎examples/with-paraglide/project.inlang/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
cache

‎examples/with-paraglide/project.inlang/project_id‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
ilUDEMg7qcdswMDx3J

‎examples/with-paraglide/project.inlang/settings.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"$schema": "https://inlang.com/schema/project-settings",
3+
"baseLocale": "en",
4+
"locales": [
5+
"en",
6+
"de"
7+
],
8+
"modules": [
9+
"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
10+
"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
11+
],
12+
"plugin.inlang.messageFormat": {
13+
"pathPattern": "./messages/{locale}.json"
14+
}
15+
}

‎examples/with-paraglide/public/favicon.ico‎

664 Bytes
Binary file not shown.

‎examples/with-paraglide/src/app.css‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
/* ============================================
2+
CSS RESET & VARIABLES
3+
============================================ */
4+
5+
:root {
6+
--primary-color: #2c4f7c;
7+
--primary-hover: #446b9e;
8+
--secondary-color: #66e888;
9+
--text-color: #1a202c;
10+
--text-secondary: #4a5568;
11+
--bg-color: #ffffff;
12+
--bg-secondary: #f7fafc;
13+
--border-color: #e2e8f0;
14+
--max-width: 1200px;
15+
--radius: 8px;
16+
--transition: all 0.2s ease;
17+
}
18+
19+
* {
20+
box-sizing: border-box;
21+
margin: 0;
22+
padding: 0;
23+
}
24+
25+
/* ============================================
26+
BASE STYLES
27+
============================================ */
28+
29+
html {
30+
font-size: 16px;
31+
scroll-behavior: smooth;
32+
}
33+
34+
body {
35+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
36+
color: var(--text-color);
37+
background-color: var(--bg-color);
38+
line-height: 1.6;
39+
-webkit-font-smoothing: antialiased;
40+
-moz-osx-font-smoothing: grayscale;
41+
}
42+
43+
/* ============================================
44+
LAYOUT
45+
============================================ */
46+
47+
#app {
48+
min-height: 100vh;
49+
display: flex;
50+
flex-direction: column;
51+
}
52+
53+
main, .container {
54+
flex: 1;
55+
width: 100%;
56+
max-width: var(--max-width);
57+
margin: 0 auto;
58+
padding: 2rem 1rem;
59+
}
60+
61+
.container {
62+
display: flex;
63+
justify-content: center;
64+
align-items: center;
65+
flex-direction: column;
66+
width: 100%;
67+
max-width: var(--max-width);
68+
margin: 0 auto;
69+
padding: 2rem 1rem;
70+
}
71+
72+
/* ============================================
73+
TYPOGRAPHY
74+
============================================ */
75+
76+
h1 {
77+
color: var(--primary-color);
78+
font-size: clamp(2.5rem, 5vw, 4rem);
79+
font-weight: 700;
80+
line-height: 1.2;
81+
margin-bottom: 1.5rem;
82+
text-align: center;
83+
letter-spacing: -0.02em;
84+
}
85+
86+
h2, h3, h4, h5, h6 {
87+
color: var(--text-color);
88+
font-weight: 600;
89+
line-height: 1.3;
90+
margin-bottom: 1rem;
91+
text-align: center;
92+
}
93+
94+
p {
95+
color: var(--text-secondary);
96+
font-size: 1.125rem;
97+
line-height: 1.7;
98+
margin-bottom: 1.5rem;
99+
text-align: center;
100+
max-width: 600px;
101+
margin-left: auto;
102+
margin-right: auto;
103+
}
104+
105+
/* ============================================
106+
NAVIGATION & LINKS
107+
============================================ */
108+
109+
nav {
110+
display: flex;
111+
justify-content: center;
112+
align-items: center;
113+
gap: 0.5rem;
114+
padding: 1.5rem;
115+
border-bottom: 1px solid var(--border-color);
116+
flex-wrap: wrap;
117+
}
118+
119+
a {
120+
color: var(--primary-color);
121+
text-decoration: none;
122+
font-weight: 500;
123+
transition: var(--transition);
124+
padding: 0.5rem 1rem;
125+
border-radius: var(--radius);
126+
display: inline-block;
127+
}
128+
129+
a:hover {
130+
color: var(--primary-hover);
131+
background-color: var(--bg-secondary);
132+
}
133+
134+
a[aria-current="page"] {
135+
background-color: var(--primary-color);
136+
color: white;
137+
}
138+
139+
a[aria-current="page"]:hover {
140+
background-color: var(--primary-hover);
141+
color: white;
142+
}
143+
144+
/* External links */
145+
a[target="_blank"]::after {
146+
content: " ↗";
147+
font-size: 0.875em;
148+
opacity: 0.7;
149+
}
150+
151+
/* ============================================
152+
COMPONENTS
153+
============================================ */
154+
155+
/* Button styles */
156+
button {
157+
font-family: inherit;
158+
font-size: 1rem;
159+
font-weight: 500;
160+
padding: 0.75rem 1.5rem;
161+
border: none;
162+
border-radius: var(--radius);
163+
background-color: var(--primary-color);
164+
color: white;
165+
cursor: pointer;
166+
transition: var(--transition);
167+
display: inline-flex;
168+
align-items: center;
169+
gap: 0.5rem;
170+
}
171+
172+
button:hover {
173+
background-color: var(--primary-hover);
174+
transform: translateY(-1px);
175+
box-shadow: 0 4px 12px rgba(44, 79, 124, 0.2);
176+
}
177+
178+
button:active {
179+
transform: translateY(0);
180+
box-shadow: 0 2px 4px rgba(44, 79, 124, 0.2);
181+
}
182+
183+
/* Language selector */
184+
.lang-selector {
185+
display: flex;
186+
gap: 0.25rem;
187+
padding: 0.25rem;
188+
background-color: var(--bg-secondary);
189+
border-radius: var(--radius);
190+
margin-left: auto;
191+
}
192+
193+
.lang-selector a {
194+
padding: 0.5rem 0.75rem;
195+
font-size: 0.875rem;
196+
font-weight: 600;
197+
min-width: 3rem;
198+
text-align: center;
199+
}
200+
201+
.
202+
203+
/* ============================================
204+
UTILITIES
205+
============================================ */
206+
207+
.text-center {
208+
text-align: center;
209+
}
210+
211+
.mt-4 {
212+
margin-top: 2rem;
213+
}
214+
215+
.mb-4 {
216+
margin-bottom: 2rem;
217+
}
218+
219+
/* ============================================
220+
RESPONSIVE DESIGN
221+
============================================ */
222+
223+
@media (max-width: 640px) {
224+
nav {
225+
padding: 1rem;
226+
}
227+
228+
a {
229+
padding: 0.4rem 0.8rem;
230+
font-size: 0.875rem;
231+
}
232+
233+
button {
234+
padding: 0.625rem 1.25rem;
235+
font-size: 0.875rem;
236+
}
237+
}
238+
239+
/* ============================================
240+
ANIMATIONS
241+
============================================ */
242+
243+
@keyframes fadeIn {
244+
from {
245+
opacity: 0;
246+
transform: translateY(10px);
247+
}
248+
to {
249+
opacity: 1;
250+
transform: translateY(0);
251+
}
252+
}
253+
254+
main > * {
255+
animation: fadeIn 0.5s ease-out;
256+
}
257+

0 commit comments

Comments
 (0)