@mdguggenbichler/slugbase-core 0.0.11 → 0.0.12

package/frontend/src/App.tsx

@@ -229,6 +229,7 @@ export interface AppProps {
 
 function App({ basePath, apiBaseUrl, routerBasename, skipSetupFlow }: AppProps = {}) {
   const appRootPath = basePath === '/' || !basePath ? '/' : basePath;
+  const pathPrefixForLinks = routerBasename !== undefined ? '' : (basePath ?? '');
   const content = (
     <AuthProvider>
       <TooltipProvider>
@@ -240,7 +241,7 @@ function App({ basePath, apiBaseUrl, routerBasename, skipSetupFlow }: AppProps =
   );
   return (
     <AppErrorBoundary>
-      <AppConfigProvider appBasePath={basePath} apiBaseUrl={apiBaseUrl} appRootPath={appRootPath} skipSetupFlow={skipSetupFlow}>
+      <AppConfigProvider appBasePath={basePath} apiBaseUrl={apiBaseUrl} appRootPath={appRootPath} skipSetupFlow={skipSetupFlow} pathPrefixForLinks={pathPrefixForLinks}>
         {routerBasename !== undefined ? (
           content
         ) : (

package/frontend/src/contexts/AppConfigContext.tsx

@@ -7,12 +7,15 @@ export interface AppConfig {
   appRootPath: string;
   /** When true, skip the first-time setup flow (e.g. in cloud; first user registers via Signup). */
   skipSetupFlow?: boolean;
+  /** Prefix for Link/Navigate paths. Empty when under external Router (e.g. cloud basename="/app"); otherwise appBasePath. Use for all in-app navigation. */
+  pathPrefixForLinks: string;
 }
 
 const defaultConfig: AppConfig = {
   appBasePath: defaultAppBasePath,
   apiBaseUrl: defaultApiBaseUrl,
   appRootPath: defaultAppRootPath,
+  pathPrefixForLinks: defaultAppBasePath,
 };
 
 const AppConfigContext = createContext<AppConfig>(defaultConfig);
@@ -23,18 +26,23 @@ export function AppConfigProvider({
   apiBaseUrl,
   appRootPath,
   skipSetupFlow,
+  pathPrefixForLinks,
 }: {
   children: React.ReactNode;
   appBasePath?: string;
   apiBaseUrl?: string;
   appRootPath?: string;
   skipSetupFlow?: boolean;
+  /** When set (e.g. "" when under external Router), used for Link/Navigate. Omit to use appBasePath. */
+  pathPrefixForLinks?: string;
 }) {
+  const base = appBasePath ?? defaultConfig.appBasePath;
   const value: AppConfig = {
-    appBasePath: appBasePath ?? defaultConfig.appBasePath,
+    appBasePath: base,
     apiBaseUrl: apiBaseUrl ?? defaultConfig.apiBaseUrl,
     appRootPath: appRootPath ?? defaultConfig.appRootPath,
     skipSetupFlow,
+    pathPrefixForLinks: pathPrefixForLinks !== undefined ? pathPrefixForLinks : base,
   };
   return <AppConfigContext.Provider value={value}>{children}</AppConfigContext.Provider>;
 }

package/frontend/src/pages/Signup.tsx

@@ -9,7 +9,7 @@ const MIN_PASSWORD_LENGTH = 8;
 
 export default function Signup() {
   const { t } = useTranslation();
-  const { appBasePath } = useAppConfig();
+  const { pathPrefixForLinks } = useAppConfig();
   const [email, setEmail] = useState('');
   const [name, setName] = useState('');
   const [password, setPassword] = useState('');
@@ -60,7 +60,7 @@ export default function Signup() {
             {t('signup.successMessage')}
           </p>
           <Link
-            to={`${appBasePath}/login`}
+            to={`${pathPrefixForLinks}/login`}
             className="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg"
           >
             {t('signup.backToLogin')}
@@ -188,7 +188,7 @@ export default function Signup() {
           </form>
           <p className="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
             {t('signup.alreadyHaveAccount')}{' '}
-            <Link to={`${appBasePath}/login`} className="font-medium text-blue-600 dark:text-blue-400 hover:underline">
+            <Link to={`${pathPrefixForLinks}/login`} className="font-medium text-blue-600 dark:text-blue-400 hover:underline">
               {t('signup.logIn')}
             </Link>
           </p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdguggenbichler/slugbase-core",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "SlugBase core: backend and frontend entrypoints for self-hosted and cloud apps",
   "type": "module",
   "exports": {