ode-explorer 1.0.0-explorer

package/src/i18n.ts

@@ -0,0 +1,31 @@
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+
+/* function getLoadPath(): string {
+  if (import.meta.env.DEV) {
+    return "/locales/{{lng}}/{{ns}}.json";
+  }
+
+  return "assets/js/explorer/locales/{{lng}}/{{ns}}.json";
+} */
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector) // detect user language
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    fallbackLng: "fr",
+    lng: "fr", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+    /* backend: {
+      loadPath: getLoadPath(),
+    }, */
+  });
+
+export default i18n;

package/src/index.css

@@ -0,0 +1,129 @@
+.card .app-card p {
+  display: none;
+}
+
+/* :root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  margin-inline: 0.5rem;
+}
+ */

package/src/main.tsx

@@ -0,0 +1,34 @@
+// import { StrictMode } from "react";
+import ExplorerContextProvider from "@contexts/ExplorerContext";
+import OdeProvider, { OdeProviderParams } from "@contexts/OdeContext";
+import { APP, App as AppName, RESOURCE } from "ode-ts-client";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+
+import App from "./app/App";
+// import "./i18n";
+
+const rootElement = document.querySelector<HTMLElement>("[data-ode-app]");
+if (rootElement && rootElement.dataset && rootElement.dataset.odeApp) {
+  const { odeApp } = rootElement.dataset;
+  const params: OdeProviderParams = { app: APP.PORTAL };
+  // Inject params (JSON object or string) read from index.html in OdeProvider
+  try {
+    const p = JSON.parse(odeApp);
+    Object.assign(params, p);
+  } catch {
+    params.app = odeApp as AppName;
+  }
+
+  createRoot(rootElement!).render(
+    <BrowserRouter>
+      <OdeProvider params={params}>
+        <ExplorerContextProvider types={[RESOURCE.BLOG]}>
+          <App />
+        </ExplorerContextProvider>
+      </OdeProvider>
+    </BrowserRouter>,
+  );
+} else {
+  // HTTP 500 screen ?
+}

package/src/pages/Blog.tsx

@@ -0,0 +1,3 @@
+export default function Blog() {
+  return <div>Welcome Blog</div>;
+}

package/src/pages/Home.tsx

@@ -0,0 +1,20 @@
+export default function Home() {
+  return (
+    <div>
+      <h1>Explore</h1>
+      <div>
+        <p>
+          Edit<code>src/App.tsx</code> and save to test HMR
+        </p>
+        <p className="read-the-docs">
+          Click on the Vite and React logos to learn more
+        </p>
+      </div>
+      <div>
+        <p>Change language:</p>
+        <button type="button">fr</button>
+        <button type="button">en</button>
+      </div>
+    </div>
+  );
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": "./src",
+    "paths": {
+      "@components/*": ["./components/*"],
+      "@pages/*": ["./pages/*"],
+      "@hooks/*": ["./hooks/*"],
+      "@contexts/*": ["./contexts/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["./vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,73 @@
+import { defineConfig } from "vite";
+import path from "path";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: [
+      { find: "~", replacement: path.resolve(__dirname, "src") },
+      {
+        find: "@components",
+        replacement: path.resolve(__dirname, "./src/components"),
+      },
+      {
+        find: "@pages",
+        replacement: path.resolve(__dirname, "./src/pages"),
+      },
+      {
+        find: "@hooks",
+        replacement: path.resolve(__dirname, "./src/hooks"),
+      },
+      {
+        find: "@contexts",
+        replacement: path.resolve(__dirname, "./src/contexts"),
+      },
+    ],
+  },
+  build: {
+    assetsDir: "assets/js/explorer/",
+  },
+  plugins: [react()],
+  /* server: {
+    host: "0.0.0.0",
+    port: 3000,
+    open: true,
+  }, */
+  server: {
+    proxy: {
+      // List of all applications
+      "/applications-list": {
+        target: "http://localhost:8090",
+        changeOrigin: false,
+      },
+      // Public Conf
+      "/conf/public": {
+        target: "http://localhost:8090",
+        changeOrigin: false,
+      },
+      "^/(?=assets|theme|locale|i18n|skin)": {
+        target: "http://localhost:8090",
+        changeOrigin: false,
+      },
+      // Entcore urls
+      "^/(?=auth|cas|userbook|directory|communication|conversation|portal|session|timeline|workspace)":
+        {
+          target: "http://localhost:8090",
+          changeOrigin: false,
+        },
+      // App urls
+      "/blog": {
+        target: "http://localhost:8090",
+        changeOrigin: false,
+      },
+      "/explorer": {
+        target: "http://localhost:8090",
+        changeOrigin: false,
+      },
+    },
+    host: "0.0.0.0",
+    port: 3000,
+    //open: true,
+  },
+});