Merge pull request #502 from erzabytyci/user-tiers

Add BasePath

Dockerfile

@@ -38,7 +38,8 @@ ENV SESSION_SECRET=$SESSION_SECRET \
     DB_USER=$DB_USER \
     DB_PASSWORD=$DB_PASSWORD \
     DB_NAME=$DB_NAME \
-    NODE_ENV=$NODE_ENV
+    NODE_ENV=$NODE_ENV \
+    NEXT_PUBLIC_BASE_PATH=$NEXT_PUBLIC_BASE_PATH
 
 # Install ALL dependencies (including dev) for build
 RUN npm ci

gradesa/next.config.mjs

@@ -1,8 +1,12 @@
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
+
 /** @type {import('next').NextConfig} */
 const nextConfig =
 {
     output: 'standalone',
 
+    basePath,
+
     eslint: {
         ignoreDuringBuilds: true,
     },
@@ -14,7 +18,8 @@ const nextConfig =
         DB_PORT: process.env.DB_PORT || '5432',
         DB_USER: process.env.DB_USER || 'postgres',
         DB_PASSWORD: process.env.DB_PASSWORD || 'password',
-        DB_NAME: process.env.DB_NAME || 'postgres'
+        DB_NAME: process.env.DB_NAME || 'postgres',
+        NEXT_PUBLIC_BASE_PATH: basePath
     }
 };
 

gradesa/src/app/admin/create-exercise/click/page.js

@@ -10,6 +10,7 @@ import "./click.css";
 import WordSelectionExercise from "@/components/ui/click/click.js";
 import Editor from "@/components/ui/editor";
 import { htmlToPlainText } from "@/shared/utils/normalizeEditorText";
+import { withBasePath } from "@/shared/utils/basePath";
 
 function escapeHtml(value) {
   return String(value || "")
@@ -90,17 +91,20 @@ export default function CreateExercise() {
   const handleSaveExercise = async () => {
     try {
       if (isEditMode) {
-        const response = await fetch(`/api/admin/exercises/click/${click_id}`, {
+        const response = await fetch(
-          method: "PUT",
+          withBasePath(`/api/admin/exercises/click/${click_id}`),
-          headers: { "Content-Type": "application/json" },
+          {
-          body: JSON.stringify({
+            method: "PUT",
-            title,
+            headers: { "Content-Type": "application/json" },
-            targetCategory,
+            body: JSON.stringify({
-            targetWords: selectedWords,
+              title,
-            allWords,
+              targetCategory,
-            sourceHtml: allWordsHtml,
+              targetWords: selectedWords,
-          }),
+              allWords,
-        });
+              sourceHtml: allWordsHtml,
+            }),
+          }
+        );
 
         const data = await response.json();
         if (!response.ok) {

gradesa/src/app/admin/create-exercise/dnd-match/page.js

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Row } from "@/components/ui/layout/container";
 import useQuery from "@/shared/hooks/useQuery";
 import "./admin.css";
+import { withBasePath } from "@/shared/utils/basePath";
 
 const EMPTY_PAIR = () => ({ leftItem: "", rightItem: "" });
 
@@ -90,20 +91,26 @@ export default function DndMatchAdminPage() {
       setIsSubmitting(true);
 
       if (isEditMode) {
-        const res = await fetch(`/api/admin/exercises/dnd-match/${match_id}`, {
+        const res = await fetch(
-          method: "PUT",
+          withBasePath(`/api/admin/exercises/dnd-match/${match_id}`),
-          headers: { "Content-Type": "application/json" },
+          {
-          body: JSON.stringify(payload),
+            method: "PUT",
-        });
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+          }
+        );
         const data = await res.json();
         if (!res.ok) throw new Error(data.error || "Fehler beim Speichern.");
         router.push("/grammar/exercises/dnd-match");
       } else {
-        const res = await fetch(`/api/admin/exercises/dnd-match`, {
+        const res = await fetch(
-          method: "POST",
+          withBasePath(`/api/admin/exercises/dnd-match`),
-          headers: { "Content-Type": "application/json" },
+          {
-          body: JSON.stringify(payload),
+            method: "POST",
-        });
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+          }
+        );
         const data = await res.json();
         if (!res.ok) throw new Error(data.error || "Fehler beim Erstellen.");
         router.push(`/grammar/exercises/dnd-match/${data.id}`);

gradesa/src/app/admin/create-exercise/dragdrop/page.js

@@ -9,6 +9,7 @@ import { useRequest } from "@/shared/hooks/useRequest";
 import { useParams, useRouter } from "next/navigation";
 import useQuery from "@/shared/hooks/useQuery";
 import PreviewDragDrop from "@/components/ui/dragdrop/dragdrop_preview";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function DragdropAdminPage() {
   const { dnd_id } = useParams();
@@ -85,7 +86,7 @@ export default function DragdropAdminPage() {
 
       if (isEditMode) {
         const response = await fetch(
-          `/api/admin/exercises/dragdrop/${dnd_id}`,
+          withBasePath(`/api/admin/exercises/dragdrop/${dnd_id}`),
           {
             method: "PUT",
             headers: { "Content-Type": "application/json" },

gradesa/src/app/admin/create-exercise/free-form/[exercise_id]/edit/page.js

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { useRouter, useParams } from "next/navigation";
 import useQuery from "@/shared/hooks/useQuery";
 import "../../../multichoice/multichoice.css";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function EditFreeFormExercisePage() {
   const router = useRouter();
@@ -130,7 +131,7 @@ export default function EditFreeFormExercisePage() {
       }
 
       const response = await fetch(
-        `/api/admin/exercises/free-form/${exercise_id}`,
+        withBasePath(`/api/admin/exercises/free-form/${exercise_id}`),
         {
           method: "PUT",
           headers: {

gradesa/src/app/admin/create-exercise/memory-game/page.js

@@ -4,6 +4,7 @@ import { useRouter, useSearchParams, useParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Column, Row } from "@/components/ui/layout/container";
 import { useRequest } from "@/shared/hooks/useRequest";
+import { withBasePath } from "@/shared/utils/basePath";
 
 const emptyPair = { left_item: "", right_item: "" };
 
@@ -30,7 +31,7 @@ export default function CreateMemoryGame() {
       setIsLoading(true);
       try {
         const response = await fetch(
-          `/api/admin/exercises/memory-game/${gameId}`
+          withBasePath(`/api/admin/exercises/memory-game/${gameId}`)
         );
         const data = await response.json();
         if (!response.ok) {

gradesa/src/app/admin/create-exercise/multichoice/page.js

@@ -4,6 +4,7 @@ import { useParams, useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import useQuery from "@/shared/hooks/useQuery";
 import "./multichoice.css";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function CreateMultichoicePage() {
   const router = useRouter();
@@ -173,8 +174,8 @@ export default function CreateMultichoicePage() {
       });
 
       const endpoint = isEditMode
-        ? `/api/admin/exercises/multichoice/${exercise_id}`
+        ? withBasePath(`/api/admin/exercises/multichoice/${exercise_id}`)
-        : `/api/admin/exercises/multichoice`;
+        : withBasePath(`/api/admin/exercises/multichoice`);
 
       const res = await fetch(endpoint, {
         method: isEditMode ? "PUT" : "POST",

gradesa/src/app/admin/edit-page/[type]/[slug]/editor-section.js

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import Editor from "@/components/ui/editor";
 import layout from "@/shared/styles/layout.module.css";
 import { useRouter, useSearchParams } from "next/navigation";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function EditorSection({
   initialContent,
@@ -49,16 +50,19 @@ export default function EditorSection({
     const jsonData = JSON.stringify(requestBody);
 
     if (!pageExists && type === "grammar") {
-      const createRes = await fetch(`/api/admin/pages/${type}/${slug}`, {
+      const createRes = await fetch(
-        headers: {
+        withBasePath(`/api/admin/pages/${type}/${slug}`),
-          Accept: "application/json",
+        {
-          "Content-Type": "application/json",
+          headers: {
-        },
+            Accept: "application/json",
-        method: "POST",
+            "Content-Type": "application/json",
-        body: JSON.stringify({
+          },
-          title: titleInput,
+          method: "POST",
-        }),
+          body: JSON.stringify({
-      });
+            title: titleInput,
+          }),
+        }
+      );
 
       if (!createRes.ok && createRes.status !== 200) {
         setEditorMessage({
@@ -68,7 +72,7 @@ export default function EditorSection({
         return;
       }
     }
-    const res = await fetch(`/api/admin/pages/${type}/${slug}`, {
+    const res = await fetch(withBasePath(`/api/admin/pages/${type}/${slug}`), {
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",

gradesa/src/app/admin/glossary/create/page.js

@@ -6,6 +6,7 @@ import { useRequest } from "@/shared/hooks/useRequest";
 import { useRouter, useSearchParams } from "next/navigation";
 import { zodErrorToFormErrors } from "@/shared/schemas/schema-utils";
 import Editor from "@/components/ui/editor";
+import { withBasePath } from "@/shared/utils/basePath";
 
 const defaultFormErrors = {
   word: "",
@@ -31,7 +32,9 @@ export default function CreateGlossaryEntry() {
     const loadEntry = async () => {
       try {
         setIsLoadingEntry(true);
-        const response = await fetch(`/api/admin/glossary?id=${entryId}`);
+        const response = await fetch(
+          withBasePath(`/api/admin/glossary?id=${entryId}`)
+        );
         if (!response.ok) {
           throw new Error("Failed to load glossary entry");
         }

gradesa/src/app/admin/new-page/page.js

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import layout from "@/shared/styles/layout.module.css";
 import styles from "./new-page.module.css";
 import { useRouter } from "next/navigation";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function NewPage() {
   const [type, setType] = useState("resources");
@@ -17,7 +18,7 @@ export default function NewPage() {
 
   useEffect(() => {
     if (type !== "grammar") return;
-    fetch("/api/admin/grammar-topics")
+    fetch(withBasePath("/api/admin/grammar-topics"))
       .then((res) => res.json())
       .then((data) => {
         setGrammarTopics(data);
@@ -49,7 +50,7 @@ export default function NewPage() {
       }
     }
 
-    const response = await fetch(`/api/admin/pages`, {
+    const response = await fetch(withBasePath(`/api/admin/pages`), {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

gradesa/src/app/edit_info/edit_email/page.js

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Container } from "@/components/ui/layout/container";
 import { Button } from "@/components/ui/button";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function EditEmail() {
   const [user, setUser] = useState("");
@@ -16,7 +17,7 @@ export default function EditEmail() {
   useEffect(() => {
     const fetchCurrentUser = async () => {
       try {
-        const res = await fetch("/api/edit_email", {
+        const res = await fetch(withBasePath("/api/edit_email"), {
           method: "GET",
         });
         if (res.ok) {
@@ -43,7 +44,7 @@ export default function EditEmail() {
       return;
     }
 
-    const res = await fetch("/api/edit_email", {
+    const res = await fetch(withBasePath("/api/edit_email"), {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

gradesa/src/app/edit_info/edit_password/page.js

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { Container } from "@/components/ui/layout/container";
 import { Button } from "@/components/ui/button";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function EditPassword() {
   const [currentPassword, setCurrentPassword] = useState("");
@@ -24,7 +25,7 @@ export default function EditPassword() {
       return;
     }
 
-    const res = await fetch("/api/edit_password", {
+    const res = await fetch(withBasePath("/api/edit_password"), {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

gradesa/src/app/edit_info/page.js

@@ -6,6 +6,7 @@ import styles from "../page.module.css";
 import { Container } from "@/components/ui/layout/container";
 import { LinkButton } from "@/components/ui/linkbutton";
 import { Grid } from "@radix-ui/themes";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function EditInfo() {
   const [user, setUser] = useState(null);
@@ -13,7 +14,7 @@ export default function EditInfo() {
 
   useEffect(() => {
     const getUser = async () => {
-      const res = await fetch("/api/edit_info");
+      const res = await fetch(withBasePath("/api/edit_info"));
 
       if (res.status === 401) {
         router.replace("/auth/login");

gradesa/src/app/grammar/exercises/click/page.js

@@ -5,6 +5,7 @@ import { Container, Row, Column } from "@/components/ui/layout/container";
 import useQuery from "@/shared/hooks/useQuery";
 import { ExerciseLinkButton } from "@/components/ui/button/exercise-link-button";
 import { Button } from "@/components/ui/button";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function ClickExercisesPage() {
   const {
@@ -20,9 +21,12 @@ export default function ClickExercisesPage() {
     if (!confirmed) return;
 
     try {
-      const response = await fetch(`/api/admin/exercises/click/${exerciseId}`, {
+      const response = await fetch(
-        method: "DELETE",
+        withBasePath(`/api/admin/exercises/click/${exerciseId}`),
-      });
+        {
+          method: "DELETE",
+        }
+      );
 
       if (!response.ok) {
         throw new Error("Fehler beim Löschen der Übung.");

gradesa/src/app/grammar/exercises/dnd-match/page.js

@@ -5,6 +5,7 @@ import { Container, Row, Column } from "@/components/ui/layout/container";
 import useQuery from "@/shared/hooks/useQuery";
 import { ExerciseLinkButton } from "@/components/ui/button/exercise-link-button";
 import { Button } from "@/components/ui/button";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function DndMatchExercisesPage() {
   const {
@@ -20,7 +21,7 @@ export default function DndMatchExercisesPage() {
 
     try {
       const response = await fetch(
-        `/api/admin/exercises/dnd-match/${exerciseId}`,
+        withBasePath(`/api/admin/exercises/dnd-match/${exerciseId}`),
         {
           method: "DELETE",
         }

gradesa/src/app/grammar/exercises/dragdrop/page.js

@@ -5,6 +5,7 @@ import { Container, Row, Column } from "@/components/ui/layout/container";
 import useQuery from "@/shared/hooks/useQuery";
 import { ExerciseLinkButton } from "@/components/ui/button/exercise-link-button";
 import { Button } from "@/components/ui/button";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function DragdropExercisesPage() {
   const {
@@ -21,7 +22,7 @@ export default function DragdropExercisesPage() {
 
     try {
       const response = await fetch(
-        `/api/admin/exercises/dragdrop/${exerciseId}`,
+        withBasePath(`/api/admin/exercises/dragdrop/${exerciseId}`),
         {
           method: "DELETE",
         }

gradesa/src/app/grammar/exercises/fillinthegap/page.js

@@ -5,6 +5,7 @@ import { Container, Row, Column } from "@/components/ui/layout/container";
 import useQuery from "@/shared/hooks/useQuery";
 import { ExerciseLinkButton } from "@/components/ui/button/exercise-link-button";
 import { Button } from "@/components/ui/button";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function FillInTheGapExercisesPage() {
   const {
@@ -21,7 +22,7 @@ export default function FillInTheGapExercisesPage() {
 
     try {
       const response = await fetch(
-        `/api/admin/exercises/fillinthegap/${exerciseId}`,
+        withBasePath(`/api/admin/exercises/fillinthegap/${exerciseId}`),
         {
           method: "DELETE",
         }

gradesa/src/app/grammar/exercises/freeform/page.js

@@ -5,6 +5,7 @@ import { Container, Row, Column } from "@/components/ui/layout/container";
 import useQuery from "@/shared/hooks/useQuery";
 import { ExerciseLinkButton } from "@/components/ui/button/exercise-link-button";
 import { Button } from "@/components/ui/button";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function FreeFormExercisesPage() {
   const {
@@ -21,7 +22,7 @@ export default function FreeFormExercisesPage() {
 
     try {
       const response = await fetch(
-        `/api/admin/exercises/free-form/${exerciseId}`,
+        withBasePath(`/api/admin/exercises/free-form/${exerciseId}`),
         {
           method: "DELETE",
         }

gradesa/src/app/grammar/exercises/memory-game/[memory_game_id]/page.js

@@ -7,6 +7,7 @@ import useQuery from "@/shared/hooks/useQuery";
 import { Column, Container, Row } from "@/components/ui/layout/container";
 import { Button } from "@/components/ui/button";
 import { MemoryGame } from "@/components/ui/memory-game/MemoryGame";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function MemoryGamePlayerPage() {
   const { memory_game_id } = useParams();
@@ -27,7 +28,7 @@ export default function MemoryGamePlayerPage() {
 
       try {
         const response = await fetch(
-          `/api/exercises/memory-game/${memory_game_id}/answers`,
+          withBasePath(`/api/exercises/memory-game/${memory_game_id}/answers`),
           {
             method: "POST",
             headers: {

gradesa/src/app/grammar/exercises/multichoice/page.js

@@ -5,6 +5,7 @@ import { Container, Column, Row } from "@/components/ui/layout/container";
 import useQuery from "@/shared/hooks/useQuery";
 import { ExerciseLinkButton } from "@/components/ui/button/exercise-link-button";
 import { Button } from "@/components/ui/button";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function MultichoiceExercisesPage() {
   const {
@@ -21,7 +22,7 @@ export default function MultichoiceExercisesPage() {
 
     try {
       const response = await fetch(
-        `/api/admin/exercises/multichoice/${exerciseId}`,
+        withBasePath(`/api/admin/exercises/multichoice/${exerciseId}`),
         {
           method: "DELETE",
         }

gradesa/src/app/pages/[type]/[slug]/admin-buttons.js

@@ -6,6 +6,7 @@ import { useRouter } from "next/navigation";
 import { useUser } from "@/context/user.context";
 import { Row } from "@/components/ui/layout/container";
 import { useSearchParams } from "next/navigation";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export default function AdminButtons({ type, slug, pageExists = true }) {
   const { setActAs } = useUser();
@@ -17,7 +18,7 @@ export default function AdminButtons({ type, slug, pageExists = true }) {
   const handleReset = async () => {
     if (!confirm("Möchten Sie den Inhalt dieser Seite wirklich leeren?"))
       return;
-    const res = await fetch(`/api/admin/pages/${type}/${slug}`, {
+    const res = await fetch(withBasePath(`/api/admin/pages/${type}/${slug}`), {
       method: "PATCH",
     });
 
@@ -63,7 +64,7 @@ export default function AdminButtons({ type, slug, pageExists = true }) {
     } else if (type === "resources") {
       redirectPath = "/learning"; // fallback
       try {
-        const listRes = await fetch(`/api/pages/${type}`);
+        const listRes = await fetch(withBasePath(`/api/pages/${type}`));
         if (listRes.ok) {
           const data = await listRes.json();
           const pages = Array.isArray(data?.pages) ? data.pages : [];
@@ -82,7 +83,7 @@ export default function AdminButtons({ type, slug, pageExists = true }) {
       redirectPath = getFallbackPath(type);
     }
 
-    const res = await fetch(`/api/admin/pages/${type}/${slug}`, {
+    const res = await fetch(withBasePath(`/api/admin/pages/${type}/${slug}`), {
       method: "DELETE",
     });
 

gradesa/src/app/talkback/page.js

@@ -44,7 +44,7 @@ export default function TalkbackPage() {
     try {
       setIsSending(true);
 
-      const response = await fetch("/api/talkback", {
+      const response = await fetch(withBasePath("/api/talkback"), {
         method: "POST",
         headers: {
           "Content-Type": "application/json",

gradesa/src/components/ui/button/exercise-link-button.js

@@ -1,5 +1,6 @@
 "use client";
 import { Button } from "@/components/ui/button";
+import { withBasePath } from "@/shared/utils/basePath";
 
 export function ExerciseLinkButton({ href, children, ...props }) {
   const copyToClipboard = async (e) => {
@@ -7,7 +8,7 @@ export function ExerciseLinkButton({ href, children, ...props }) {
     e.stopPropagation();
     try {
       const origin = window.location.origin;
-      const url = `${origin}${href}`;
+      const url = `${origin}${withBasePath(href)}`;
       await navigator.clipboard.writeText(url);
       alert("Link kopiert!");
       return true;

gradesa/src/components/ui/dnd-match/MatchArea.js

@@ -7,6 +7,7 @@ import { MatchCard } from "./MatchCard";
 import { MatchSlot } from "./MatchSlot";
 import { Button } from "@/components/ui/button";
 import "./dnd-match.css";
+import { withBasePath } from "@/shared/utils/basePath";
 
 function shuffle(arr) {
   const a = [...arr];
@@ -109,7 +110,7 @@ const MatchAreaInner = ({ exercise, exerciseId }) => {
       }));
 
       const res = await fetch(
-        `/api/exercises/dnd-match/${exerciseId}/answers`,
+        withBasePath(`/api/exercises/dnd-match/${exerciseId}/answers`),
         {
           method: "POST",
           headers: { "Content-Type": "application/json" },

gradesa/src/components/ui/dragdrop/area.js

@@ -2,6 +2,7 @@ import { memo, useCallback, useState, useEffect } from "react";
 import { WordBox } from "./wordbox.js";
 import { Dustbin } from "./dustbin.js";
 import { Button } from "@/components/ui/button";
+import { withBasePath } from "@/shared/utils/basePath.js";
 
 const Area = ({ exerciseID }) => {
   const [dustbins, setDustbins] = useState([]);
@@ -22,7 +23,9 @@ const Area = ({ exerciseID }) => {
       if (!exerciseID) return;
 
       try {
-        const response = await fetch(`/api/exercises/dragdrop/${exerciseID}`);
+        const response = await fetch(
+          withBasePath(`/api/exercises/dragdrop/${exerciseID}`)
+        );
         if (!response.ok) throw new Error("Fehler beim Laden der Übung.");
 
         const data = await response.json();

gradesa/src/components/ui/render-html/render-html.jsx

@@ -5,6 +5,7 @@ import {
   GlossaryParagraph,
   GlossaryListItem,
 } from "@/components/ui/glossary/GlossaryText";
+import { BASE_PATH, withBasePath } from "@/shared/utils/basePath";
 
 /**
  * Normalize HTML attributes for use in React elements.
@@ -34,6 +35,15 @@ const normalizeAttribs = (attributes = {}) => {
   return normalized;
 };
 
+const prefixRootRelativePath = (value) => {
+  if (typeof value !== "string") return value;
+  if (!value.startsWith("/") || value.startsWith("//")) return value;
+  if (BASE_PATH && (value === BASE_PATH || value.startsWith(`${BASE_PATH}/`))) {
+    return value;
+  }
+  return withBasePath(value);
+};
+
 /**
  * RenderHTML
  *
@@ -84,11 +94,27 @@ export default function RenderHTML({ data, disableGlossary = false }) {
     // Legacy DB content can contain <Container> tags from old React markup.
     // Render only children to preserve previous look without invalid tag warnings.
     container: (_attributes, children) => <Fragment>{children}</Fragment>,
+
+    a: (attributes, children) => {
+      const safeAttribs = { ...attributes };
+      if (safeAttribs.href) {
+        safeAttribs.href = prefixRootRelativePath(safeAttribs.href);
+      }
+      return <a {...safeAttribs}>{children}</a>;
+    },
+    img: (attributes) => {
+      const safeAttribs = { ...attributes };
+      if (safeAttribs.src) {
+        safeAttribs.src = prefixRootRelativePath(safeAttribs.src);
+      }
+      return <img {...safeAttribs} />;
+    },
+
     anchor: (attributes, children) => {
       const safeAttribs = { ...attributes };
       const href = safeAttribs.href || safeAttribs["data-href"];
       if (href) {
-        safeAttribs["data-href"] = href;
+        safeAttribs["data-href"] = prefixRootRelativePath(href);
         delete safeAttribs.href;
       }
       safeAttribs.className = [safeAttribs.className, "glossary-anchor"]

gradesa/src/components/ui/sidebar/sidebar.js

@@ -14,6 +14,7 @@ import {
 import { Button } from "../button";
 import { useEffect, useState } from "react";
 import { useIsMounted } from "@/shared/hooks/useIsMounted";
+import { withBasePath } from "@/shared/utils/basePath";
 
 const Sidebar = () => {
   const { auth, setActAs, actAs } = useUser();
@@ -79,7 +80,7 @@ function StudentSideBar() {
   const pathname = usePathname();
 
   useEffect(() => {
-    fetch("/api/pages/resources")
+    fetch(withBasePath("/api/pages/resources"))
       .then((res) => res.json())
       .then((data) => {
         setChapters(

gradesa/src/shared/hooks/useQuery.js

@@ -4,9 +4,10 @@ import { useState, useEffect, useRef, useMemo, memo } from "react";
 import { useIsMounted } from "./useIsMounted";
 import { useUser } from "@/context/user.context";
 import { useSessionId } from "./useSessionId";
+import { withBasePath } from "../utils/basePath";
 
 export const axiosInstance = axios.create({
-  baseURL: "/api",
+  baseURL: withBasePath("/api"),
 });
 
 /**

gradesa/src/shared/utils/basePath.js

@@ -0,0 +1,6 @@
+export const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || "";
+
+export function withBasePath(path) {
+  if (!path.startsWith("/")) return path;
+  return `${BASE_PATH}${path}`;
+}