docs: add example and guide to the repo

.npmignore

@@ -9,4 +9,6 @@ CODE_OF_CONDUCT.md
 CONTRIBUTING.md
 tsconfig.json
 vitest.config.ts
-vitest.setup.ts
+vitest.setup.ts
+examples
+LICENSE.md

examples/README.md

@@ -0,0 +1,68 @@
+## Remix Paraglide Examples
+
+This repository contains various examples demonstrating the usage and configuration of remix-paraglide.
+
+Below, we outline the steps to set up a basic environment with Remix and ParaglideJS.
+
+### Remix basic setup
+
+To begin, we'll install Remix using the `create vite` command:
+
+```bash
+npm create vite@latest
+```
+
+When prompted, provide a project name, select the React framework, and choose the Remix variant:
+
+```yml
+✔ Project name: … remix-paraglidejs-example
+✔ Select a framework: › React
+✔ Select a variant: › Remix ↗
+```
+
+After answering additional questions, you'll have a basic Remix app resembling the one in the `remix-paraglidejs-example` folder.
+
+### ParaglideJS
+
+Within your app folder, initialize ParaglideJS using the following command:
+
+```bash
+npx @inlang/paraglide-js@latest init
+```
+
+You have to answer this when it asks you about the stack.
+
+```
+Which tech stack are you using? Vite
+```
+
+This sets up ParaglideJS with a folder named `project.inlang` and a file named `project.inlang/settings.json`. In this `settings.json` file, you can specify the languages you need. For instance, let's include Spanish (ES).
+
+```json
+{
+  "$schema": "https://inlang.com/schema/project-settings",
+  "sourceLanguageTag": "en",
+  "languageTags": [
+    "en",
+    "es"
+  ],
+  "modules": [
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-valid-js-identifier@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@latest/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@latest/dist/index.js"
+  ],
+  "plugin.inlang.messageFormat": {
+    "pathPattern": "./messages/{languageTag}.json"
+  }
+}
+```
+
+After this, create a new folder named `messages` since it's the name specified in our `settings.json`.
+
+Following the README guide, you'll need to modify three files: `vite.config.ts`, `entry.client.tsx`, and `entry.server.tsx`. Once these modifications are complete, your app will be ready to use ParaglideJS.
+
+Feel free to explore the `remix-paraglidejs-example` for a detailed implementation.

examples/remix-paraglidejs-example/.eslintrc.cjs

@@ -0,0 +1,83 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

examples/remix-paraglidejs-example/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+.env
+paraglide

examples/remix-paraglidejs-example/README.md

@@ -0,0 +1,74 @@
+# Welcome to Remix + Vite!
+
+📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/future/vite) for details on supported features.
+
+## Development
+
+Run the Vite dev server:
+
+```shellscript
+npm run dev
+```
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+- `build/server`
+- `build/client`
+
+
+
+
+### Remix basic setup
+
+This dependency relies on Remix vite installation.
+
+```
+npm create vite@latest
+```
+
+Once you run that command create a new project name, select React framework and Remix variant.
+
+```
+✔ Project name: … remix-paraglidejs-example
+✔ Select a framework: › React
+✔ Select a variant: › Remix ↗
+```
+
+After a few more question that you will have a basic Remix app.
+
+### ParaglideJS
+
+Initialize paraglide-js whith:
+
+```
+npx @inlang/paraglide-js@latest init
+```
+
+You have to answer this when it asks you about the stack.
+
+```
+Which tech stack are you using? Vite
+```
+
+Now you have the ParaglideJS setup. Check [official usage doc](https://inlang.com/m/gerre34r/library-inlang-paraglideJs#usage) or our example.
+

examples/remix-paraglidejs-example/app/entry.client.tsx

@@ -0,0 +1,22 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { hydrateLang } from '../../../src/client';
+import { availableLanguageTags, setLanguageTag } from "../paraglide/runtime";
+
+startTransition(() => {
+  const lang = hydrateLang('language-tag', availableLanguageTags);
+  setLanguageTag(lang);
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>
+  );
+});