diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2b20434 --- /dev/null +++ b/.gitignore @@ -0,0 +1,36 @@ +# dependencies +/node_modules + +# build output +/dist +/.vite + +# dotenv environment files (si tu en as) +.env +.env.*.local + +# system files +.DS_Store +Thumbs.db + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# editor stuff +.vscode +.idea +*.swp +*.swo + +# OS junk +*.log + +# optional: nix store link if using nix develop +.result + +# optional: lockfiles you don't use +package-lock.json + diff --git a/README.md b/README.md index 2f89e0d..c38c432 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,8 @@ # website-front +On nix : +nix-shell +To run the dev env : + +cd la-banquise +npm run dev diff --git a/la-banquise/.dockerignore b/la-banquise/.dockerignore new file mode 100644 index 0000000..9b8d514 --- /dev/null +++ b/la-banquise/.dockerignore @@ -0,0 +1,4 @@ +.react-router +build +node_modules +README.md \ No newline at end of file diff --git a/la-banquise/.gitignore b/la-banquise/.gitignore new file mode 100644 index 0000000..9b7c041 --- /dev/null +++ b/la-banquise/.gitignore @@ -0,0 +1,6 @@ +.DS_Store +/node_modules/ + +# React Router +/.react-router/ +/build/ diff --git a/la-banquise/Dockerfile b/la-banquise/Dockerfile new file mode 100644 index 0000000..207bf93 --- /dev/null +++ b/la-banquise/Dockerfile @@ -0,0 +1,22 @@ +FROM node:20-alpine AS development-dependencies-env +COPY . /app +WORKDIR /app +RUN npm ci + +FROM node:20-alpine AS production-dependencies-env +COPY ./package.json package-lock.json /app/ +WORKDIR /app +RUN npm ci --omit=dev + +FROM node:20-alpine AS build-env +COPY . /app/ +COPY --from=development-dependencies-env /app/node_modules /app/node_modules +WORKDIR /app +RUN npm run build + +FROM node:20-alpine +COPY ./package.json package-lock.json /app/ +COPY --from=production-dependencies-env /app/node_modules /app/node_modules +COPY --from=build-env /app/build /app/build +WORKDIR /app +CMD ["npm", "run", "start"] \ No newline at end of file diff --git a/la-banquise/README.md b/la-banquise/README.md new file mode 100644 index 0000000..5c4780a --- /dev/null +++ b/la-banquise/README.md @@ -0,0 +1,87 @@ +# Welcome to React Router! + +A modern, production-ready template for building full-stack React applications using React Router. + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default) + +## Features + +- 🚀 Server-side rendering +- ⚡️ Hot Module Replacement (HMR) +- 📦 Asset bundling and optimization +- 🔄 Data loading and mutations +- 🔒 TypeScript by default +- 🎉 TailwindCSS for styling +- 📖 [React Router docs](https://reactrouter.com/) + +## Getting Started + +### Installation + +Install the dependencies: + +```bash +npm install +``` + +### Development + +Start the development server with HMR: + +```bash +npm run dev +``` + +Your application will be available at `http://localhost:5173`. + +## Building for Production + +Create a production build: + +```bash +npm run build +``` + +## Deployment + +### Docker Deployment + +To build and run using Docker: + +```bash +docker build -t my-app . + +# Run the container +docker run -p 3000:3000 my-app +``` + +The containerized application can be deployed to any platform that supports Docker, including: + +- AWS ECS +- Google Cloud Run +- Azure Container Apps +- Digital Ocean App Platform +- Fly.io +- Railway + +### DIY Deployment + +If you're familiar with deploying Node applications, the built-in app server is production-ready. + +Make sure to deploy the output of `npm run build` + +``` +├── package.json +├── package-lock.json (or pnpm-lock.yaml, or bun.lockb) +├── build/ +│ ├── client/ # Static assets +│ └── server/ # Server-side code +``` + +## Styling + +This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer. + +--- + +Built with ❤️ using React Router. diff --git a/la-banquise/app/app.css b/la-banquise/app/app.css new file mode 100644 index 0000000..99345d8 --- /dev/null +++ b/la-banquise/app/app.css @@ -0,0 +1,15 @@ +@import "tailwindcss"; + +@theme { + --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +html, +body { + @apply bg-white dark:bg-gray-950; + + @media (prefers-color-scheme: dark) { + color-scheme: dark; + } +} diff --git a/la-banquise/app/root.tsx b/la-banquise/app/root.tsx new file mode 100644 index 0000000..9fc6636 --- /dev/null +++ b/la-banquise/app/root.tsx @@ -0,0 +1,75 @@ +import { + isRouteErrorResponse, + Links, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from "react-router"; + +import type { Route } from "./+types/root"; +import "./app.css"; + +export const links: Route.LinksFunction = () => [ + { rel: "preconnect", href: "https://fonts.googleapis.com" }, + { + rel: "preconnect", + href: "https://fonts.gstatic.com", + crossOrigin: "anonymous", + }, + { + rel: "stylesheet", + href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap", + }, +]; + +export function Layout({ children }: { children: React.ReactNode }) { + return ( + + + + + + + + + {children} + + + + + ); +} + +export default function App() { + return ; +} + +export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { + let message = "Oops!"; + let details = "An unexpected error occurred."; + let stack: string | undefined; + + if (isRouteErrorResponse(error)) { + message = error.status === 404 ? "404" : "Error"; + details = + error.status === 404 + ? "The requested page could not be found." + : error.statusText || details; + } else if (import.meta.env.DEV && error && error instanceof Error) { + details = error.message; + stack = error.stack; + } + + return ( +
+

{message}

+

{details}

+ {stack && ( + 
+          {stack}
+
+ )} +
+ ); +} diff --git a/la-banquise/app/routes.ts b/la-banquise/app/routes.ts new file mode 100644 index 0000000..102b402 --- /dev/null +++ b/la-banquise/app/routes.ts @@ -0,0 +1,3 @@ +import { type RouteConfig, index } from "@react-router/dev/routes"; + +export default [index("routes/home.tsx")] satisfies RouteConfig; diff --git a/la-banquise/app/routes/home.tsx b/la-banquise/app/routes/home.tsx new file mode 100644 index 0000000..398e47c --- /dev/null +++ b/la-banquise/app/routes/home.tsx @@ -0,0 +1,13 @@ +import type { Route } from "./+types/home"; +import { Welcome } from "../welcome/welcome"; + +export function meta({}: Route.MetaArgs) { + return [ + { title: "New React Router App" }, + { name: "description", content: "Welcome to React Router!" }, + ]; +} + +export default function Home() { + return ; +} diff --git a/la-banquise/app/welcome/logo-dark.svg b/la-banquise/app/welcome/logo-dark.svg new file mode 100644 index 0000000..dd82028 --- /dev/null +++ b/la-banquise/app/welcome/logo-dark.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/la-banquise/app/welcome/logo-light.svg b/la-banquise/app/welcome/logo-light.svg new file mode 100644 index 0000000..7328492 --- /dev/null +++ b/la-banquise/app/welcome/logo-light.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/la-banquise/app/welcome/welcome.tsx b/la-banquise/app/welcome/welcome.tsx new file mode 100644 index 0000000..8ac6e1d --- /dev/null +++ b/la-banquise/app/welcome/welcome.tsx @@ -0,0 +1,89 @@ +import logoDark from "./logo-dark.svg"; +import logoLight from "./logo-light.svg"; + +export function Welcome() { + return ( +
+
+
+
+ React Router + React Router +
+
+
+ +
+
+
+ ); +} + +const resources = [ + { + href: "https://reactrouter.com/docs", + text: "React Router Docs", + icon: ( + + + + ), + }, + { + href: "https://rmx.as/discord", + text: "Join Discord", + icon: ( + + + + ), + }, +]; diff --git a/la-banquise/index.html b/la-banquise/index.html new file mode 100644 index 0000000..7dedc4b --- /dev/null +++ b/la-banquise/index.html @@ -0,0 +1,13 @@ + + + + + + La Banquise + + +
+ + + + diff --git a/la-banquise/package.json b/la-banquise/package.json new file mode 100644 index 0000000..e730048 --- /dev/null +++ b/la-banquise/package.json @@ -0,0 +1,23 @@ +{ + "name": "la-banquise", + "version": "1.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@vitejs/plugin-react": "^4.3.4", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^7.5.0" + }, + "devDependencies": { + "@vitejs/plugin-react": "^4.3.4", + "autoprefixer": "^10.4.12", + "postcss": "^8.4.18", + "tailwindcss": "^3.2.0", + "vite": "^4.0.0", + "vite-plugin-pages": "^0.33.0" + } +} diff --git a/la-banquise/postcss.config.js b/la-banquise/postcss.config.js new file mode 100644 index 0000000..1d5ee78 --- /dev/null +++ b/la-banquise/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {} + } +} + diff --git a/la-banquise/public/favicon.ico b/la-banquise/public/favicon.ico new file mode 100644 index 0000000..5dbdfcd Binary files /dev/null and b/la-banquise/public/favicon.ico differ diff --git a/la-banquise/react-router.config.ts b/la-banquise/react-router.config.ts new file mode 100644 index 0000000..6ff16f9 --- /dev/null +++ b/la-banquise/react-router.config.ts @@ -0,0 +1,7 @@ +import type { Config } from "@react-router/dev/config"; + +export default { + // Config options... + // Server-side render by default, to enable SPA mode set this to `false` + ssr: true, +} satisfies Config; diff --git a/la-banquise/src/App.css b/la-banquise/src/App.css new file mode 100644 index 0000000..c1506c7 --- /dev/null +++ b/la-banquise/src/App.css @@ -0,0 +1,5 @@ +body { + background: linear-gradient(#002244, #004466); + overflow: hidden; +} + diff --git a/la-banquise/src/App.jsx b/la-banquise/src/App.jsx new file mode 100644 index 0000000..57f9482 --- /dev/null +++ b/la-banquise/src/App.jsx @@ -0,0 +1,21 @@ +import Iceberg from './components/Iceberg'; + +const icebergsData = [ + { href: '/service1', top: '20%', left: '10%' }, + { href: '/service2', top: '40%', left: '70%' }, + { href: '/service3', top: '60%', left: '30%' }, + { href: '/service4', top: '75%', left: '55%' }, +]; + +function App() { + return ( +
+ {icebergsData.map((iceberg, index) => ( + + ))} +
+ ); +} + +export default App; + diff --git a/la-banquise/src/components/Iceberg.jsx b/la-banquise/src/components/Iceberg.jsx new file mode 100644 index 0000000..c10f97f --- /dev/null +++ b/la-banquise/src/components/Iceberg.jsx @@ -0,0 +1,28 @@ +const Iceberg = ({ href, style }) => { + return ( + + + + + + ); +}; + +export default Iceberg; + diff --git a/la-banquise/src/index.css b/la-banquise/src/index.css new file mode 100644 index 0000000..de147e5 --- /dev/null +++ b/la-banquise/src/index.css @@ -0,0 +1,12 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* Fond océan pour l'ensemble du site */ +body { + background: linear-gradient(180deg, #1e3c72, #2a5298); + min-height: 100vh; + margin: 0; + font-family: Arial, sans-serif; +} + diff --git a/la-banquise/src/index.html b/la-banquise/src/index.html new file mode 100644 index 0000000..de58d31 --- /dev/null +++ b/la-banquise/src/index.html @@ -0,0 +1,12 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* Fond océan pour l'ensemble du site */ +body { + background: linear-gradient(180deg, #1e3c72, #2a5298); + min-height: 100vh; + margin: 0; + font-family: 'Arial', sans-serif; +} + diff --git a/la-banquise/src/main.jsx b/la-banquise/src/main.jsx new file mode 100644 index 0000000..7ce3ed0 --- /dev/null +++ b/la-banquise/src/main.jsx @@ -0,0 +1,15 @@ +// src/main.jsx +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { BrowserRouter } from 'react-router-dom'; +import App from './App'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')).render( + + + + + +); + diff --git a/la-banquise/tailwind.config.js b/la-banquise/tailwind.config.js new file mode 100644 index 0000000..f8262f8 --- /dev/null +++ b/la-banquise/tailwind.config.js @@ -0,0 +1,22 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./index.html", + "./src/**/*.{js,jsx}" + ], + theme: { + extend: { + keyframes: { + float: { + '0%, 100%': { transform: 'translateY(0)' }, + '50%': { transform: 'translateY(-10px)' }, + }, + }, + animation: { + float: 'float 4s ease-in-out infinite', + }, + }, + }, + plugins: [], +} + diff --git a/la-banquise/tsconfig.json b/la-banquise/tsconfig.json new file mode 100644 index 0000000..dc391a4 --- /dev/null +++ b/la-banquise/tsconfig.json @@ -0,0 +1,27 @@ +{ + "include": [ + "**/*", + "**/.server/**/*", + "**/.client/**/*", + ".react-router/types/**/*" + ], + "compilerOptions": { + "lib": ["DOM", "DOM.Iterable", "ES2022"], + "types": ["node", "vite/client"], + "target": "ES2022", + "module": "ES2022", + "moduleResolution": "bundler", + "jsx": "react-jsx", + "rootDirs": [".", "./.react-router/types"], + "baseUrl": ".", + "paths": { + "~/*": ["./app/*"] + }, + "esModuleInterop": true, + "verbatimModuleSyntax": true, + "noEmit": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "strict": true + } +} diff --git a/la-banquise/vite.config.ts b/la-banquise/vite.config.ts new file mode 100644 index 0000000..0087b50 --- /dev/null +++ b/la-banquise/vite.config.ts @@ -0,0 +1,15 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import Pages from 'vite-plugin-pages'; + +export default defineConfig({ + plugins: [ + react(), + // Plugin pour générer automatiquement les routes basées sur les fichiers dans src/pages + Pages({ + extensions: ['jsx', 'tsx'], // Extensions reconnues pour les pages + // Vous pouvez ajouter d'autres options ici (path route, etc.) + }) + ] +}); + diff --git a/shell.nix b/shell.nix new file mode 100644 index 0000000..9c86acf --- /dev/null +++ b/shell.nix @@ -0,0 +1,15 @@ +{ pkgs ? import {} }: + +pkgs.mkShell { + buildInputs = [ + pkgs.nodejs_23 + pkgs.nodePackages.tailwindcss + pkgs.nodePackages.postcss + pkgs.nodePackages.autoprefixer + ]; + + shellHook = '' + echo "✅ Environnement Node.js avec Tailwind, PostCSS et Autoprefixer prêt !" + ''; +} +