feature: make offline overlay configurable

docusaurus.config.ts

@@ -42,6 +42,7 @@ import {
 } from './src/siteConfig/markdownPluginConfigs';
 import { remarkPdfPluginConfig } from '@tdev/remark-pdf';
 import { GlobExcludeDefault } from '@docusaurus/utils';
+import { TdevCustomFields } from '@tdev/siteConfig/TdevCustomFields';
 
 const BUILD_LOCATION = __dirname;
 const GIT_COMMIT_SHA = process.env.GITHUB_SHA || Math.random().toString(36).substring(7);
@@ -97,6 +98,7 @@ const docusaurusConfig = withSiteConfig().then(async (siteConfig) => {
     loadedPlugins.push(excalidrawPluginConfig);
   }
 
+
   const config: Config = applyTransformers(
     {
       title: TITLE,
@@ -120,7 +122,7 @@ const docusaurusConfig = withSiteConfig().then(async (siteConfig) => {
         /** Use test user in local dev: set DEFAULT_TEST_USER to the default test users email adress*/
         TEST_USER: DEFAULT_TEST_USER,
         OFFLINE_API: OFFLINE_API,
-        NO_AUTH: (process.env.NODE_ENV !== 'production' && !!DEFAULT_TEST_USER) || OFFLINE_API,
+        NO_AUTH: (process.env.NODE_ENV !== 'production' && !!DEFAULT_TEST_USER) || !!OFFLINE_API,
         /** The Domain Name where the api is running */
         APP_URL: process.env.NETLIFY
           ? process.env.CONTEXT === 'production'
@@ -140,7 +142,7 @@ const docusaurusConfig = withSiteConfig().then(async (siteConfig) => {
           (['github', 'github-dev', 'cms'] satisfies EditThisPageOption[]),
         editThisPageCmsUrl: siteConfig.editThisPageCmsUrl ?? '/cms/',
         tdevConfig: siteConfig.tdevConfig ?? ({} satisfies Partial<TdevConfig>)
-      },
+      } satisfies TdevCustomFields,
       future: {
         v4: true,    
         faster: {

package.json

@@ -24,12 +24,12 @@
         "updateTdev": "ts-node --files updateSync/updateTdev.ts"
     },
     "dependencies": {
-        "@docusaurus/core": "^3.10.0",
-        "@docusaurus/faster": "^3.10.0",
-        "@docusaurus/preset-classic": "^3.10.0",
-        "@docusaurus/theme-classic": "^3.10.0",
-        "@docusaurus/theme-common": "^3.10.0",
-        "@docusaurus/theme-mermaid": "^3.10.0",
+        "@docusaurus/core": "^3.10.1",
+        "@docusaurus/faster": "^3.10.1",
+        "@docusaurus/preset-classic": "^3.10.1",
+        "@docusaurus/theme-classic": "^3.10.1",
+        "@docusaurus/theme-common": "^3.10.1",
+        "@docusaurus/theme-mermaid": "^3.10.1",
         "@lexical/clipboard": "^0.35.0",
         "@lexical/link": "^0.35.0",
         "@lexical/list": "^0.35.0",
@@ -90,10 +90,10 @@
         "uuid": "^13.0.0"
     },
     "devDependencies": {
-        "@docusaurus/module-type-aliases": "^3.10.0",
-        "@docusaurus/plugin-rsdoctor": "^3.10.0",
-        "@docusaurus/tsconfig": "^3.10.0",
-        "@docusaurus/types": "^3.10.0",
+        "@docusaurus/module-type-aliases": "^3.10.1",
+        "@docusaurus/plugin-rsdoctor": "^3.10.1",
+        "@docusaurus/tsconfig": "^3.10.1",
+        "@docusaurus/types": "^3.10.1",
         "@types/exceljs": "^1.3.2",
         "@types/fs-extra": "^11.0.4",
         "@types/js-yaml": "^4.0.9",

src/components/Cms/MdxEditor/CmsMdxEditor.tsx

@@ -75,7 +75,7 @@ import { extractOptions } from '@tdev-plugins/helpers';
 import { GenericDirectiveDescriptor } from './plugins/CatchAllUnknown/GenericDirectiveDescriptor';
 import { keepImportsPlugin } from './plugins/keepImportsPlugin';
 import useLocalStorage from '@tdev-hooks/useLocalStorage';
-import { mdiCodeJson, mdiScript } from '@mdi/js';
+import { mdiCodeJson } from '@mdi/js';
 import { SIZE_S } from '@tdev-components/shared/iconSizes';
 import { registerKeydownHandler } from './plugins/focusHandler/keyDownHandler';
 

src/components/LoggedOutOverlay/index.tsx

@@ -6,6 +6,9 @@ import Admonition from '@theme/Admonition';
 import { useLocation } from '@docusaurus/router';
 import { useStore } from '@tdev-hooks/useStore';
 import { observer } from 'mobx-react-lite';
+import customFields from '@tdev-components/util/customFields';
+import useLocalStorage from '@tdev-hooks/useLocalStorage';
+const { loggedOutOverlay } = customFields.tdevConfig;
 
 const ALLOWED_PATHS = new Set(['/login', '/signIn'].map((p) => p.toLowerCase()));
 
@@ -104,6 +107,7 @@ const LoggedOutOverlay = observer((props: Props) => {
     const isLoggedIn = !!userStore.current;
     const documentRootStore = useStore('documentRootStore');
     const socketStore = useStore('socketStore');
+    const [isDismissed, updateDismissed] = useLocalStorage<boolean>('LoggedOutOverlayDismissed', false);
 
     React.useEffect(() => {
         const onVisibilityChange = () => {
@@ -161,6 +165,10 @@ const LoggedOutOverlay = observer((props: Props) => {
         return () => clearTimeout(timeout);
     }, [socketStore.isLive, ignoredIssues, location, isVisible, isUserSwitched]);
 
+    if (loggedOutOverlay?.disable || isDismissed) {
+        return null;
+    }
+
     if (!isVisible) {
         return null;
     }
@@ -182,6 +190,9 @@ const LoggedOutOverlay = observer((props: Props) => {
             <NotLoggedInWarning
                 onDismiss={() => {
                     setIgnoredIssues((s) => new Set([...s, 'not-logged-in']));
+                    if (loggedOutOverlay?.persistChoiceTo === 'localStorage') {
+                        updateDismissed(true);
+                    }
                     setSyncIssue(null);
                 }}
             />
@@ -193,6 +204,9 @@ const LoggedOutOverlay = observer((props: Props) => {
                 <DisconnectedWarning
                     onDismiss={() => {
                         setIgnoredIssues((s) => new Set([...s, 'offline']));
+                        if (loggedOutOverlay?.persistChoiceTo === 'localStorage') {
+                            updateDismissed(true);
+                        }
                         setSyncIssue(null);
                     }}
                 />
@@ -202,6 +216,9 @@ const LoggedOutOverlay = observer((props: Props) => {
                 <StalledWarning
                     onDismiss={() => {
                         setIgnoredIssues((s) => new Set([...s, 'stalled']));
+                        if (loggedOutOverlay?.persistChoiceTo === 'localStorage') {
+                            updateDismissed(true);
+                        }
                         setSyncIssue(null);
                     }}
                 />

src/components/util/customFields.ts

@@ -0,0 +1,6 @@
+import siteConfig from '@generated/docusaurus.config';
+import { TdevCustomFields } from '@tdev/siteConfig/TdevCustomFields';
+
+const customFields = (siteConfig.customFields ?? {}) as unknown as TdevCustomFields;
+
+export default customFields;

src/siteConfig/TdevCustomFields.d.ts

@@ -0,0 +1,20 @@
+import { EditThisPageOption, ShowEditThisPage, TdevConfig } from './siteConfig';
+
+export interface TdevCustomFields {
+    /** Use test user in local dev: set DEFAULT_TEST_USER to the default test users email adress*/
+    TEST_USER?: string;
+    OFFLINE_API: 'indexedDB' | boolean;
+    NO_AUTH: boolean;
+    /** The Domain Name where the api is running */
+    APP_URL?: string;
+    /** The Domain Name of this app */
+    BACKEND_URL: string;
+    GIT_COMMIT_SHA: string;
+    SENTRY_DSN?: string;
+    GH_OAUTH_CLIENT_ID?: string;
+    PERSONAL_SPACE_DOC_ROOT_ID: string;
+    showEditThisPage: ShowEditThisPage;
+    showEditThisPageOptions: EditThisPageOption[];
+    editThisPageCmsUrl: string;
+    tdevConfig: Partial<TdevConfig>;
+}

src/siteConfig/siteConfig.d.ts

@@ -17,6 +17,11 @@ export interface TdevConfig {
         disableImageMarkupEditor?: boolean;
         excalidoc?: boolean;
     };
+    loggedOutOverlay: {
+        // default: session
+        persistChoiceTo?: 'session' | 'localStorage';
+        disable?: boolean;
+    };
 }
 
 export interface SiteConfig {

src/stores/utils/Storage.ts

@@ -12,7 +12,8 @@ export const StorageKey = Object.freeze({
     SessionStore: _.upperFirst(_.camelCase(`SessionStore${siteConfig.projectName || ''}`)),
     QrScannerDeviceId: 'QrScannerDeviceId',
     CmsViewMode: 'CmsViewMode',
-    CodeTheme: 'CodeTheme'
+    CodeTheme: 'CodeTheme',
+    LoggedOutOverlayDismissed: 'LoggedOutOverlayDismissed'
 });
 
 /**

tdev-website/siteConfig.ts

@@ -95,6 +95,11 @@ const getSiteConfig: SiteConfigProvider = () => {
         tdevConfig: {
             excalidraw: {
                 excalidoc: true
+            },
+            loggedOutOverlay: {
+                persistChoiceTo: 'localStorage',
+                // disable for netlify previews and for local development.
+                disable: process.env.NODE_ENV !== 'production' || !!process.env.NETLIFY
             }
         },
         plugins: [brythonCodePluginConfig()],