Initial commit: site cours Énergétique - Thermique

.env.example

@@ -0,0 +1,7 @@
+# Variables d'environnement Appwrite
+VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+VITE_APPWRITE_PROJECT_ID=your_project_id
+VITE_APPWRITE_DATABASE_ID=your_database_id
+VITE_APPWRITE_MODULES_COLLECTION_ID=your_modules_collection_id
+VITE_APPWRITE_SECTIONS_COLLECTION_ID=your_sections_collection_id
+VITE_APPWRITE_RESOURCES_COLLECTION_ID=your_resources_collection_id

.github/workflows/deploy.yml

@@ -0,0 +1,57 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+        env:
+          VITE_APPWRITE_ENDPOINT: ${{ secrets.VITE_APPWRITE_ENDPOINT }}
+          VITE_APPWRITE_PROJECT_ID: ${{ secrets.VITE_APPWRITE_PROJECT_ID }}
+          VITE_APPWRITE_DATABASE_ID: ${{ secrets.VITE_APPWRITE_DATABASE_ID }}
+          VITE_APPWRITE_MODULES_COLLECTION_ID: ${{ secrets.VITE_APPWRITE_MODULES_COLLECTION_ID }}
+          VITE_APPWRITE_SECTIONS_COLLECTION_ID: ${{ secrets.VITE_APPWRITE_SECTIONS_COLLECTION_ID }}
+          VITE_APPWRITE_RESOURCES_COLLECTION_ID: ${{ secrets.VITE_APPWRITE_RESOURCES_COLLECTION_ID }}
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -0,0 +1,101 @@
+# Site du cours Énergétique - Thermique
+
+Site React déployé sur GitHub Pages avec Appwrite comme backend.
+
+## Configuration Appwrite
+
+### 1. Créer le projet
+
+- Se connecter à [Appwrite Cloud](https://cloud.appwrite.io/)
+- Créer un nouveau projet
+
+### 2. Créer la base de données
+
+- Aller dans **Databases** → **Create Database**
+- Nommer la base `cours_enise`
+
+### 3. Collections
+
+Créer les 3 collections suivantes :
+
+#### `modules`
+| Attribut | Type |
+|----------|------|
+| title | string |
+| code | string |
+| description | string |
+| year | integer |
+| semester | string |
+
+#### `sections`
+| Attribut | Type |
+|----------|------|
+| moduleId | string |
+| title | string |
+| order | integer |
+
+#### `resources`
+| Attribut | Type |
+|----------|------|
+| moduleId | string |
+| sectionId | string |
+| title | string |
+| type | string |
+| url | string |
+| description | string |
+| order | integer |
+
+### 4. Permissions
+
+Pour chaque collection :
+- Ouvrir l'onglet **Settings** → **Permissions**
+- Ajouter le rôle `any` avec permission `read`
+
+### 5. Données示例
+
+**Module :**
+- title: `Énergétique – Thermique`
+- code: `4A-S7-ET`
+- year: `4`
+- semester: `S7`
+
+**Sections :**
+- Cours (order: 1)
+- TD (order: 2)
+- TP (order: 3)
+
+**Resources :**
+- Pointer vers PDF stockés dans Appwrite Storage ou Google Drive
+
+## Variables d'environnement
+
+Copier `.env.example` vers `.env` et remplir :
+
+```bash
+cp .env.example .env
+```
+
+## Installation
+
+```bash
+npm install
+npm run dev
+```
+
+## Déploiement
+
+Le projet est configuré avec GitHub Actions. Pousser sur `main` déclenche le déploiement.
+
+## Structure du projet
+
+```
+src/
+├── appwrite.js          # Configuration Appwrite
+├── App.jsx              # Point d'entrée
+├── main.jsx             # Mount React
+├── index.css            # Styles
+└── components/
+    ├── ModulePage.jsx   # Page principale du module
+    ├── SectionList.jsx  # Navigation par section
+    └── ResourceList.jsx # Liste des ressources
+```

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Énergétique - Thermique</title>
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "enise-site-2",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "appwrite": "^14.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "^5.0.0"
+  }
+}

src/App.jsx

@@ -0,0 +1,13 @@
+import ModulePage from './components/ModulePage';
+
+function App() {
+  const moduleCode = '4A-S7-ET';
+
+  return (
+    <div className="app">
+      <ModulePage moduleCode={moduleCode} />
+    </div>
+  );
+}
+
+export default App;

src/appwrite.js

@@ -0,0 +1,16 @@
+import { Client, Databases, Query } from 'appwrite';
+
+const client = new Client()
+  .setEndpoint(import.meta.env.VITE_APPWRITE_ENDPOINT)
+  .setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID);
+
+const databases = new Databases(client);
+
+export { client, databases, Query };
+
+export const CONFIG = {
+  databaseId: import.meta.env.VITE_APPWRITE_DATABASE_ID,
+  modulesCollectionId: import.meta.env.VITE_APPWRITE_MODULES_COLLECTION_ID,
+  sectionsCollectionId: import.meta.env.VITE_APPWRITE_SECTIONS_COLLECTION_ID,
+  resourcesCollectionId: import.meta.env.VITE_APPWRITE_RESOURCES_COLLECTION_ID,
+};

src/components/ModulePage.jsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { databases, Query, CONFIG } from '../appwrite';
+import SectionList from './SectionList';
+
+export default function ModulePage({ moduleCode }) {
+  const [module, setModule] = useState(null);
+  const [sections, setSections] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchModuleAndSections = async () => {
+    try {
+      const modulesRes = await databases.listDocuments(
+        CONFIG.databaseId,
+        CONFIG.modulesCollectionId,
+        [Query.equal('code', moduleCode)]
+      );
+
+      if (modulesRes.total === 0) {
+        setLoading(false);
+        return;
+      }
+
+      const mod = modulesRes.documents[0];
+      setModule(mod);
+
+      const sectionsRes = await databases.listDocuments(
+        CONFIG.databaseId,
+        CONFIG.sectionsCollectionId,
+        [Query.equal('moduleId', mod.$id), Query.orderAsc('order')]
+      );
+
+      setSections(sectionsRes.documents);
+    } catch (err) {
+      console.error('Erreur fetchModuleAndSections:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchModuleAndSections();
+  }, [moduleCode]);
+
+  if (loading) return <div className="loading">Chargement...</div>;
+  if (!module) return <div className="error">Module introuvable.</div>;
+
+  return (
+    <div className="module-page">
+      <header className="module-header">
+        <h1>{module.title}</h1>
+        <p className="module-meta">{module.year}A - {module.semester}</p>
+        <p className="module-description">{module.description}</p>
+      </header>
+      <SectionList module={module} sections={sections} />
+    </div>
+  );
+}

src/components/ResourceList.jsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import { databases, Query, CONFIG } from '../appwrite';
+
+export default function ResourceList({ moduleId, sectionId, sectionTitle }) {
+  const [resources, setResources] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchResources = async () => {
+    try {
+      const res = await databases.listDocuments(
+        CONFIG.databaseId,
+        CONFIG.resourcesCollectionId,
+        [
+          Query.equal('moduleId', moduleId),
+          Query.equal('sectionId', sectionId),
+          Query.orderAsc('order'),
+        ]
+      );
+      setResources(res.documents);
+    } catch (err) {
+      console.error('Erreur fetchResources:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    setLoading(true);
+    fetchResources();
+  }, [moduleId, sectionId]);
+
+  if (loading) return <div className="loading">Chargement des ressources...</div>;
+
+  return (
+    <div className="resources-container">
+      <h2>{sectionTitle}</h2>
+      {resources.length === 0 ? (
+        <p className="no-resources">Aucune ressource pour cette section.</p>
+      ) : (
+        <ul className="resources-list">
+          {resources.map((r) => (
+            <li key={r.$id} className="resource-item">
+              <a
+                href={r.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="resource-link"
+              >
+                <span className="resource-icon">{getIcon(r.type)}</span>
+                <span className="resource-title">{r.title}</span>
+              </a>
+              {r.description && (
+                <p className="resource-description">{r.description}</p>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function getIcon(type) {
+  switch (type) {
+    case 'pdf': return '📄';
+    case 'video': return '🎬';
+    case 'link': return '🔗';
+    case 'image': return '🖼️';
+    default: return '📎';
+  }
+}

src/components/SectionList.jsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import ResourceList from './ResourceList';
+
+export default function SectionList({ module, sections }) {
+  const [activeSectionId, setActiveSectionId] = useState(
+    sections[0]?.$id || null
+  );
+
+  const activeSection = sections.find(s => s.$id === activeSectionId);
+
+  return (
+    <div className="section-layout">
+      <nav className="section-nav">
+        <h3>Contents</h3>
+        <ul className="nav-list">
+          {sections.map((sec) => (
+            <li key={sec.$id}>
+              <button
+                className={`nav-button ${sec.$id === activeSectionId ? 'active' : ''}`}
+                onClick={() => setActiveSectionId(sec.$id)}
+              >
+                {sec.title}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      <main className="section-content">
+        {activeSectionId && activeSection && (
+          <ResourceList
+            moduleId={module.$id}
+            sectionId={activeSectionId}
+            sectionTitle={activeSection.title}
+          />
+        )}
+      </main>
+    </div>
+  );
+}

src/index.css

@@ -0,0 +1,187 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Google Sans', Roboto, Arial, sans-serif;
+  background-color: #f8f9fa;
+  color: #202124;
+  line-height: 1.6;
+}
+
+.app {
+  min-height: 100vh;
+}
+
+.module-page {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 40px 24px;
+}
+
+.module-header {
+  margin-bottom: 40px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.module-header h1 {
+  font-size: 2.5rem;
+  font-weight: 400;
+  color: #202124;
+  margin-bottom: 8px;
+}
+
+.module-meta {
+  font-size: 1rem;
+  color: #5f6368;
+  margin-bottom: 16px;
+}
+
+.module-description {
+  font-size: 1.1rem;
+  color: #3c4043;
+  max-width: 800px;
+}
+
+.section-layout {
+  display: flex;
+  gap: 32px;
+}
+
+.section-nav {
+  width: 240px;
+  flex-shrink: 0;
+}
+
+.section-nav h3 {
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #5f6368;
+  margin-bottom: 12px;
+  padding-left: 12px;
+}
+
+.nav-list {
+  list-style: none;
+}
+
+.nav-button {
+  width: 100%;
+  text-align: left;
+  padding: 10px 12px;
+  border: none;
+  background: transparent;
+  font-size: 0.95rem;
+  color: #3c4043;
+  cursor: pointer;
+  border-radius: 0 24px 24px 0;
+  transition: background-color 0.2s ease;
+}
+
+.nav-button:hover {
+  background-color: #f1f3f4;
+}
+
+.nav-button.active {
+  background-color: #e8f0fe;
+  color: #1a73e8;
+  font-weight: 500;
+}
+
+.section-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.resources-container h2 {
+  font-size: 1.5rem;
+  font-weight: 400;
+  color: #202124;
+  margin-bottom: 24px;
+}
+
+.no-resources {
+  color: #5f6368;
+  font-style: italic;
+}
+
+.resources-list {
+  list-style: none;
+}
+
+.resource-item {
+  margin-bottom: 16px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.1);
+  transition: box-shadow 0.2s ease;
+}
+
+.resource-item:hover {
+  box-shadow: 0 2px 8px rgba(60, 64, 67, 0.15);
+}
+
+.resource-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+  color: #1a73e8;
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.resource-link:hover {
+  text-decoration: underline;
+}
+
+.resource-icon {
+  font-size: 1.25rem;
+}
+
+.resource-description {
+  margin-top: 8px;
+  margin-left: 36px;
+  font-size: 0.9rem;
+  color: #5f6368;
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  color: #5f6368;
+  font-size: 1rem;
+}
+
+.error {
+  text-align: center;
+  padding: 60px 24px;
+  color: #5f6368;
+}
+
+@media (max-width: 768px) {
+  .section-layout {
+    flex-direction: column;
+  }
+
+  .section-nav {
+    width: 100%;
+  }
+
+  .nav-button {
+    border-radius: 4px;
+    margin-bottom: 4px;
+  }
+
+  .module-header h1 {
+    font-size: 1.75rem;
+  }
+}

src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  base: '/enise-site-2/',
+});