Feature: Example With Paraglide JS

examples/with-paraglide/README.md

@@ -0,0 +1,30 @@
+# SolidStart
+
+Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
+
+## Creating a project
+
+```bash
+# create a new project in the current directory
+npm init solid@latest
+
+# create a new project in my-app
+npm init solid@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Solid apps are built with _presets_, which optimise your project for deployment to different environments.
+
+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

@@ -0,0 +1,12 @@
+import { defineConfig } from "@solidjs/start/config";
+import { paraglideVitePlugin } from "@inlang/paraglide-js";
+export default defineConfig({
+  vite: {
+    plugins: [
+      paraglideVitePlugin({
+        project: "./project.inlang",
+        outdir: "./src/paraglide",
+      }),
+    ],
+  }
+});

examples/with-paraglide/messages/de.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "menu_home": "Startseite",
+  "menu_about": "Über uns",
+  "hello_world": "Hallo Welt!",
+  "error_404": "Seite nicht gefunden",
+  "visit": "Besuchen Sie",
+  "learn_solidstart": "um zu lernen, wie man SolidStart-Apps erstellt.",
+  "example_message": "Benutzer: {username}",
+  "example_name": "Hallo, {firstname} {lastname}",
+  "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.",
+  "features_title": "Funktionen",
+  "feature_auto_detection": "Automatische Spracherkennung",
+  "feature_url_routing": "URL-basiertes Sprach-Routing",
+  "feature_type_safe": "Typsicheres Nachrichtensystem",
+  "feature_fast_lightweight": "Schnell und leichtgewichtig",
+  "feature_seo_friendly": "SSR und SEO-freundlich mit korrekten Sprachattributen"
+}

examples/with-paraglide/messages/en.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "menu_home": "Home",
+  "menu_about": "About",
+  "hello_world": "Hello World!",
+  "error_404": "Page Not Found",
+  "visit": "Visit",
+  "learn_solidstart": "to learn how to build SolidStart apps.",
+  "example_message": "User: {username}",
+  "example_name": "Hi, {firstname} {lastname}",
+  "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.",
+  "features_title": "Features",
+  "feature_auto_detection": "Automatic language detection",
+  "feature_url_routing": "URL-based language routing",
+  "feature_type_safe": "Type-safe message system",
+  "feature_fast_lightweight": "Fast and lightweight",
+  "feature_seo_friendly": "SSR and SEO-friendly with proper lang attributes"
+}

examples/with-paraglide/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "example-with-paraglide",
+  "type": "module",
+  "scripts": {
+    "dev": "vinxi dev",
+    "build": "paraglide-js compile --project ./project.inlang --outdir ./src\\paraglide && vinxi build",
+    "start": "vinxi start",
+    "version": "vinxi version"
+  },
+  "dependencies": {
+    "@solidjs/meta": "^0.29.4",
+    "@solidjs/router": "^0.15.0",
+    "@solidjs/start": "^1.1.0",
+    "@inlang/paraglide-js": "2.2.0",
+    "solid-js": "^1.9.5",
+    "vinxi": "^0.5.7"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

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

@@ -0,0 +1 @@
+cache

examples/with-paraglide/project.inlang/project_id

@@ -0,0 +1 @@
+ilUDEMg7qcdswMDx3J

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

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://inlang.com/schema/project-settings",
+  "baseLocale": "en",
+  "locales": [
+    "en",
+    "de"
+  ],
+  "modules": [
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
+  ],
+  "plugin.inlang.messageFormat": {
+    "pathPattern": "./messages/{locale}.json"
+  }
+}

examples/with-paraglide/src/app.css

@@ -0,0 +1,257 @@
+/* ============================================
+   CSS RESET & VARIABLES
+   ============================================ */
+
+:root {
+  --primary-color: #2c4f7c;
+  --primary-hover: #446b9e;
+  --secondary-color: #66e888;
+  --text-color: #1a202c;
+  --text-secondary: #4a5568;
+  --bg-color: #ffffff;
+  --bg-secondary: #f7fafc;
+  --border-color: #e2e8f0;
+  --max-width: 1200px;
+  --radius: 8px;
+  --transition: all 0.2s ease;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ============================================
+   BASE STYLES
+   ============================================ */
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  color: var(--text-color);
+  background-color: var(--bg-color);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ============================================
+   LAYOUT
+   ============================================ */
+
+#app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+main, .container {
+  flex: 1;
+  width: 100%;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+/* ============================================
+   TYPOGRAPHY
+   ============================================ */
+
+h1 {
+  color: var(--primary-color);
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 1.5rem;
+  text-align: center;
+  letter-spacing: -0.02em;
+}
+
+h2, h3, h4, h5, h6 {
+  color: var(--text-color);
+  font-weight: 600;
+  line-height: 1.3;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+p {
+  color: var(--text-secondary);
+  font-size: 1.125rem;
+  line-height: 1.7;
+  margin-bottom: 1.5rem;
+  text-align: center;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* ============================================
+   NAVIGATION & LINKS
+   ============================================ */
+
+nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+  flex-wrap: wrap;
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: 500;
+  transition: var(--transition);
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius);
+  display: inline-block;
+}
+
+a:hover {
+  color: var(--primary-hover);
+  background-color: var(--bg-secondary);
+}
+
+a[aria-current="page"] {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+a[aria-current="page"]:hover {
+  background-color: var(--primary-hover);
+  color: white;
+}
+
+/* External links */
+a[target="_blank"]::after {
+  content: " ↗";
+  font-size: 0.875em;
+  opacity: 0.7;
+}
+
+/* ============================================
+   COMPONENTS
+   ============================================ */
+
+/* Button styles */
+button {
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: var(--radius);
+  background-color: var(--primary-color);
+  color: white;
+  cursor: pointer;
+  transition: var(--transition);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+button:hover {
+  background-color: var(--primary-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(44, 79, 124, 0.2);
+}
+
+button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(44, 79, 124, 0.2);
+}
+
+/* Language selector */
+.lang-selector {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius);
+  margin-left: auto;
+}
+
+.lang-selector a {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  min-width: 3rem;
+  text-align: center;
+}
+
+.
+
+/* ============================================
+   UTILITIES
+   ============================================ */
+
+.text-center {
+  text-align: center;
+}
+
+.mt-4 {
+  margin-top: 2rem;
+}
+
+.mb-4 {
+  margin-bottom: 2rem;
+}
+
+/* ============================================
+   RESPONSIVE DESIGN
+   ============================================ */
+
+@media (max-width: 640px) {
+  nav {
+    padding: 1rem;
+  }
+
+  a {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.875rem;
+  }
+
+  button {
+    padding: 0.625rem 1.25rem;
+    font-size: 0.875rem;
+  }
+}
+
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+main > * {
+  animation: fadeIn 0.5s ease-out;
+}
+