♻️ Chore: Prep docs for new version (#352)

* Create draft PR for #351 [skip ci] * version and prep docs * Style adjustments to docs * Revert text change * update og images to conform to twitter guidelines * update lockfile * fix lint errors * refactor docs to cleanup the whole thing * remove now unneeded package * update typedoc config * dep cleanup * Refactor Integration.astro to display "N/A" for unreleased packages * update pageTitle to support integrations * add sponsors section * up * Refactor Sponsors.astro to add target and rel attributes to sponsor link * Update sidebar label * Refactor Integration.astro to add support for plugins * add note to styles * update label * Refactor Astro config to add support for @studiocms/blog plugin * fix * Refactor Astro config to remove isScoped and scope properties * Refactor Astro config to remove unused code and improve package name parsing * Refactor Sponsors component styles to center align links and headings * fix icon * Refactor packagecatalog config to remove extra code and improve package name parsing * fix config reference * Refactor PackageCatalog component to filter and sort packages based on pkgType prop * Refactor PackageCatalog component to use 'catalog' prop instead of 'pkgType' * Refactor Astro.props in Integration.astro to include publiclyUsable prop * Refactor config.ts to include redirectSchema * refactor * Refactor Astro.config.mts to include @shikijs/twoslash integration * Refactor Astro.config.mts to use StudioCMSOptions instead of StudioCMSOptionsSchema._input * Dashboard additions removals (#354) * Purge mentions of Astro Studio * Add UI docs (getting started & button) * Update packages/studiocms/src/index.ts Co-authored-by: Adam Matthiesen <[email protected]> * Fix border rounding * Shrink hero * Update www/docs/astro.config.mts Co-authored-by: Adam Matthiesen <[email protected]> * Finish button docs, fix merge conflicts * Add more UI lib docs, adjust UI package - Fixed a typo that caused a typedoc warning. -Fixed a CSS leak in the UI library. - Adjusted the DropdownHelper API (added an individual show toggle and renamed some functions) - Looooooooooots more docs stuff * Update button.mdx * Adjust wording * Update dropdown.mdx * Add more UI docs, fix UI lib css * Adjust sponsors css, add more UI lib docs * Improve code snippets * Document textarea, toggle, and user * Changes to UI lib, new UI lib docs * Fix missing comma * Update custom.css * mention include styles * Adjustments for twoslash * Update custom.css * Twoslash more like twobitch * Funny markdown support :) * Made twoslash appear correctly * Add changesets * Add explicitTrigger for twoslash --------- Co-authored-by: Reuben Tier <[email protected]> Co-authored-by: Adam Matthiesen <[email protected]> * start of adding transformers and their css * more twoslash! * Update '@astrojs/starlight' version to 0.28.3 * Update dependencies for '@astrojs/starlight', '@astrojs/db', '@astrojs/node', '@astrojs/react', and '@astrojs/web-vitals' * test * apply fix * update docs and re-enable astro check * Update configuration.mdx with link to reference pages * Add description for StudioCMS DevApps * Refactor StudioCMS package.json exports * more progress * Update Astro version to 4.16.3 and adjust button position in custom.css * update default bracketPairs comment * update to conform to new astro docs and update other links * add ts-nocheck to prevent warnings/errors for shiki transformer * revert * new title transformer for shiki * add titles * cleanup * update demo link in code snippet * Update custom.css styles for code snippets * Update studiocms/src/index.ts and www/docs/src/content/docs/config-reference/options-schema.mdx * Refactor import statement in defineStudioCMSConfig.ts * fix the TS error that was being caused by a `.` instead of a `,` * some css styling for the copy button * update css * Update custom.css with new color tokens and styling for highlighted words and diffs * remove spacing * Update custom.css to add background color for highlighted words and diffs * Update custom.css to adjust background colors for highlighted words and diffs * fixed css * Update custom.css to remove inline-block display for diff spans * Remove test comment, fix copy SVGs, color changes * Add image zoom, remove carousel, adjust hero buttons * refactor css file into multiple files * Refactor shiki transformers and update import paths * Refactor Docs landing page * Refactor SplitCard component CSS * Refactor Youtube.astro component CSS * Refactor why-studioCMS.mdx file * Refactor card CSS to include all the cards from starlight * Refactor index.mdx to include instructions for setting up Turso database * Refactor Getting started guide and remove unused components * Refactor getting started guide * Refactor config references * Refactor config references and add Renderer type * Refactor StudioCMS custom renderer documentation to include information about defining custom renderers and their usage. * cleanup docs * Refactor environment variable documentation and add ReadMore component * Refactor YouTube and landing card components * Refactor Discord button styling in index.mdx and starlight.css * Refactor starlight.css: Add gap to LinkButton button styling * fix * Refactor SplitCard component: Add padding to split container * Refactor SplitCard component: Remove unnecessary padding in split container * Refactor landing page: Update StudioCMS card icon * Custom head component to preload the fonts * Add new component for planned Contributor guide page * Update sidebar component name, and update SiteTitle component * Update astro.config.mts: Add 'x.com' link to StudioCMS social media * Contributing guide! * Update astro.config.mts: Add remotePatterns for images Add new Contributing guide * Update FacePile component: Adjust avatar size and alignment * Update contributing guide * Update contributing guide: Add link to contributing guide in README.md * Update astro.config.mts: Add badge to @studiocms/ui label * Update contributing guide: Update link to contributors list in contributing.mdx * Update dependencies: Add hast-util-to-string, html-escaper, rehype-slug, rehype-autolink-headings, rehype-external-links, and @types/html-escaper * Update anchor link icon style * Update anchor link icon style and display of content elements * Update dependencies: Add shiki-transformer-color-highlight and unified * Update contributor list component and styles * Refactor getContributorsByPath function to remove ignored commit keywords and improve author handling * cleanup * Update external link icon and remove underline from anchor links * Update SiteTitle.astro * Add bun as a package manager option * Refactor getContributorsByPath function to improve author handling and remove ignored commit keywords * Refactor TursoCLI command builder for improved handling of authentication and database commands * Refactor to use dynamic sponsor links * Update strings.ts * Update why-studioCMS.mdx * Feat(devapps): Wordpress Importer (#360) * initial progress * okay well it works! * Add Wordpress importer app * Add WordPress Importer app and update README.md * update readme * update docs * Add Toolbar app image and update README.md * remove unnecessary footnote * Refactor wp-api converters and utils This commit refactors the wp-api converters and utils in the studiocms_devapps package. It introduces the following changes: - Added async/await functionality to ConvertToPageData and ConvertToPostData functions. - Implemented fetching and downloading of title images for pages and posts. - Updated the apiEndpoint function to include the 'media' type. These changes improve the efficiency and functionality of the wp-api converters and utils. * Refactor wp-api converters and utils, and add closeOnOutsideClick function * Refactor createWindowElement function and add closeOnOutsideClick function * Refactor TypeDoc configuration to include additional files * Refactor devApps configuration to include WP API Importer * typo * Refactor wp-api converters and utils, and fix success check in wp-importer * Refactor to remove warning as per @dreyfus92 * Update www/docs/src/content/docs/start-here/why-studioCMS.mdx Co-authored-by: Adam Matthiesen <[email protected]> * Update www/docs/src/content/docs/start-here/why-studioCMS.mdx Co-authored-by: Adam Matthiesen <[email protected]> * Update www/docs/src/content/docs/start-here/why-studioCMS.mdx Co-authored-by: Adam Matthiesen <[email protected]> * Update www/docs/src/content/docs/start-here/why-studioCMS.mdx Co-authored-by: Adam Matthiesen <[email protected]> * Update title in how-it-works/index.mdx * Fix twoslash popups overflowing parent container --------- Co-authored-by: create-issue-branch[bot] <53036503+create-issue-branch[bot]@users.noreply.github.com> Co-authored-by: Adam Matthiesen <[email protected]> Co-authored-by: Louis Escher <[email protected]> Co-authored-by: Reuben Tier <[email protected]> Co-authored-by: Louis Escher <[email protected]>
withstudiocms · Oct 22, 2024 · 27ac5ad · 27ac5ad
1 parent 95eb9e9
commit 27ac5ad
Show file tree

Hide file tree

Showing 270 changed files with 9,891 additions and 8,352 deletions.
diff --git a/.changeset/curvy-mirrors-play.md b/.changeset/curvy-mirrors-play.md
@@ -0,0 +1,10 @@
+---
+"@studiocms/ui": patch
+---
+
+Applied various changes and fixes to different parts of the UI libary.
+
+- Fixed a CSS leak caused by importing css files instead of having scoped styles
+- Adjusted dropdown helper API for better DX
+- Adjusted modal helper API for better DX
+- Various CSS fixes for different components
diff --git a/.changeset/metal-steaks-sparkle.md b/.changeset/metal-steaks-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@studiocms/devapps": patch
+---
+
+[Feat]: Add Wordpress importer app
diff --git a/.changeset/thin-hounds-happen.md b/.changeset/thin-hounds-happen.md
@@ -0,0 +1,7 @@
+---
+"@studiocms/dashboard": patch
+"@studiocms/core": patch
+"studiocms": patch
+---
+
+Adjusted strings to account for Astro Studio sunsetting
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,5 +4,8 @@
     "quickfix.biome": "explicit",
     "source.organizeImports.biome": "explicit"
   },
-  "editor.defaultFormatter": "biomejs.biome"
+  "editor.defaultFormatter": "biomejs.biome",
+  "[mdx]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/README.md b/README.md
@@ -19,28 +19,7 @@ To see how to get started, check out the [StudioCMS README](./packages/studiocms
 
 ## Contributing
 
-We welcome contributions from the community! Whether it's bug reports, feature requests, or code contributions, we appreciate your help in making this project better.
-
-### Bug Reports and Feature Requests
-
-If you encounter any bugs or have ideas for new features, please open an issue on our [GitHub repository](https://github.com/astrolicious/studiocms). When creating a new issue, please provide as much detail as possible, including steps to reproduce the issue (for bugs) and a clear description of the proposed feature.
-
-### Code Contributions
-
-If you'd like to contribute code to this project, please follow these steps:
-
-1. Fork the repository and create a new branch for your contribution.
-2. Make your changes and ensure that the code follows our coding conventions and style guidelines.
-3. Write tests for your changes, if applicable.
-4. Update the documentation, if necessary.
-5. Commit your changes and push them to your forked repository.
-6. Open a pull request against the main repository, providing a clear description of your changes and their purpose.
-
-We will review your contribution as soon as possible and provide feedback or merge it into the main codebase if everything looks good.
-
-Please note that by contributing to this project, you agree to our [Code of Conduct](https://github.com/astrolicious/.github/blob/main/.github/CODE_OF_CONDUCT.md).
-
-Thank you for your interest in contributing to this project!
+We welcome contributions from the community! Whether it's bug reports, feature requests, or code contributions, we appreciate your help in making this project better. To get started read our [Contributing Guide](https://docs.studiocms.xyz/start-here/contributing/)
 
 ## Chat with Us
 
@@ -80,7 +59,6 @@ Steps to get a running playground should be the following:
   Commands to run:
 
   - `pnpm playground:login` - Login your CLI to Astro Studio
-  - `pnpm playground:link` - Link to Astro Studio and Create a new DB for your CMS Installation
   - `pnpm playground:push` - Creates the base tables on the remote database.
   - `pnpm playground:dev` - Starts the Dev server connected to the linked database
 

diff --git a/biome.json b/biome.json
@@ -31,7 +31,10 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "warn"
+      }
     }
   },
   "overrides": [

diff --git a/packages/studiocms/src/index.ts b/packages/studiocms/src/index.ts
@@ -1,25 +1,27 @@
 import { defineStudioCMSConfig, defineStudioCMSPlugin } from '@studiocms/core/lib';
+import type { CustomRenderer, Renderer, StudioCMSOptions } from '@studiocms/core/schemas';
 import type { StudioCMSPluginOptions } from '@studiocms/core/types';
 import integration from './integration';
 
 /**
- * # Astro Studio CMS Integration
+ * **StudioCMS Integration**
  *
  * A CMS built for Astro by the Astro Community for the Astro Community.
  *
- * Checkout our [GitHub Repo `@astrolicious/studiocms`](https://github.com/astrolicious/studiocms)
- *
- * Check out [Astro-StudioCMS.xyz](https://astro-studiocms.xyz) or the Built-in JSDocs *(Hover Docs like this)* for more information.
- *
  * > **Note: Astro SSR adapters that are configured for Image Optimization will automatically take full control of the Image Optimization Service. Making the `imageService` option in this integration not have any effect.**
  *
+ * @see [GitHub Repo: 'astrolicious/studiocms'](https://github.com/astrolicious/studiocms) for more information on how to contribute to StudioCMS.
+ * @see [StudioCMS Docs](https://docs.studiocms.xyz) for more information on how to use StudioCMS.
+ *
  */
 export const studioCMS = integration;
 
 export default studioCMS;
 
 // Config Utility
-export { defineStudioCMSConfig };
+export { defineStudioCMSConfig, type StudioCMSOptions };
 
 // Plugin System
 export { defineStudioCMSPlugin, type StudioCMSPluginOptions };
+
+export type { CustomRenderer, Renderer };
diff --git a/packages/studiocms_blog/index.ts b/packages/studiocms_blog/index.ts
@@ -14,12 +14,14 @@ const studioCMSBlogTheme = defineTheme({
 export type ATP_ThemeOptions = Parameters<typeof studioCMSBlogTheme>[0];
 
 /**
- * # StudioCMS Blog Theme(Integration)
- * #### Powered by [`astro-theme-provider`](https://github.com/astrolicious/astro-theme-provider) by [Bryce Russell](https://github.com/BryceRussell)
+ * **StudioCMS Blog Theme(Integration)**
+ *
+ * **Powered by [`astro-theme-provider`](https://github.com/astrolicious/astro-theme-provider) by [Bryce Russell](https://github.com/BryceRussell)**
  *
  * This theme provides a Blog Index Page and RSS Feed for your StudioCMS Site as well as route handling for Blog Posts.
  *
  * @example
+ * ```js
  * import { defineConfig } from 'astro/config';
  * import db from '@astrojs/db';
  * import studioCMS from 'studiocms';
@@ -41,8 +43,9 @@ export type ATP_ThemeOptions = Parameters<typeof studioCMSBlogTheme>[0];
  *     }),
  *   ],
  * });
+ * ```
  */
-export function studioCMSBlog(options: ATP_ThemeOptions) {
+export function studioCMSBlog(options?: ATP_ThemeOptions) {
 	let slug: string;
 
 	if (typeof options?.pages?.['/blog'] === 'string') {

diff --git a/packages/studiocms_core/src/components/Avatar.astro b/packages/studiocms_core/src/components/Avatar.astro
@@ -33,7 +33,7 @@ const { isLoggedIn, dbUser: userProfile } = Astro.locals;
     ))
 }
 { enabled === false && (
-    <a href="#" aria-disabled="true" title="Please Edit your Database through your Studio Dashboard">
+    <a href="#" aria-disabled="true" title="Please Edit your database through your provider's dashboard">
         <img 
             src={profileImg.src} 
             alt="Authentication Disabled" 

diff --git a/packages/studiocms_core/src/lib/defineStudioCMSConfig.ts b/packages/studiocms_core/src/lib/defineStudioCMSConfig.ts
@@ -16,7 +16,7 @@ import type { StudioCMSOptions } from '../schemas';
  * @example
  * ```js
  * // studiocms.config.mjs
- * import { defineStudioCMSConfig } from '@astrolicious/studiocms';
+ * import { defineStudioCMSConfig } from 'studiocms';
  *
  * export default defineStudioCMSConfig({
  *  dbStartPage: true,

diff --git a/packages/studiocms_core/src/schemas/config/dashboard.ts b/packages/studiocms_core/src/schemas/config/dashboard.ts
@@ -6,7 +6,7 @@ import { unocssConfigSchema } from './unocss';
 export const dashboardConfigSchema = z
 	.object({
 		/**
-		 * OPTIONAL - This allows the user to enable or disable the Astro Studio CMS Dashboard but still provide all the helper's and utilities to those who are customizing their setup, doing so will disable the dashboard and you will need to manage your content via the Astro Studio Dashboard at http://studio.astro.build
+		 * OPTIONAL - This allows the user to enable or disable the Astro StudioCMS dashboard but still provide all the helper's and utilities to those who are customizing their setup, doing so will disable the dashboard and you will need to manage your content via your database
 		 *
 		 * @default true
 		 */

diff --git a/packages/studiocms_core/src/schemas/config/developer.ts b/packages/studiocms_core/src/schemas/config/developer.ts
@@ -13,7 +13,7 @@ export const developerConfigSchema = z
 		/**
 		 * Enable Testing and Demo Mode
 		 *
-		 * This will enable the testing and demo mode for the Astro Studio CMS Dashboard, this will allow you to test the dashboard without having to authenticate. This is useful for testing and demo purposes as it will allow you to see how the dashboard works and looks but disable any changes to the database.
+		 * This will enable the testing and demo mode for the Astro StudioCMS dashboard, this will allow you to test the dashboard without having to authenticate. This is useful for testing and demo purposes as it will allow you to see how the dashboard works and looks but disable any changes to the database.
 		 *
 		 * @default false
 		 */

diff --git a/packages/studiocms_core/src/schemas/config/index.ts b/packages/studiocms_core/src/schemas/config/index.ts
@@ -4,12 +4,22 @@ import { dashboardConfigSchema } from './dashboard';
 import { DefaultFrontEndConfigSchema } from './defaultFrontend';
 import { imageServiceSchema } from './imageService';
 import { includedIntegrationsSchema } from './integrations';
-import { type StudioCMSRendererConfig, StudioCMSRendererConfigSchema } from './rendererConfig';
+import {
+	type CustomRenderer,
+	type Renderer,
+	type StudioCMSRendererConfig,
+	StudioCMSRendererConfigSchema,
+} from './rendererConfig';
 
 //
 // Exported Schemas for use in other internal packages
 //
-export { StudioCMSRendererConfigSchema, type StudioCMSRendererConfig };
+export {
+	StudioCMSRendererConfigSchema,
+	type StudioCMSRendererConfig,
+	type CustomRenderer,
+	type Renderer,
+};
 export { dashboardConfigSchema, DefaultFrontEndConfigSchema, imageServiceSchema, overridesSchema };
 
 //
@@ -64,4 +74,4 @@ export const StudioCMSOptionsSchema = z
 	.optional()
 	.default({});
 
-export type StudioCMSOptions = z.infer<typeof StudioCMSOptionsSchema>;
+export type StudioCMSOptions = typeof StudioCMSOptionsSchema._input;
diff --git a/packages/studiocms_core/src/schemas/config/rendererConfig.ts b/packages/studiocms_core/src/schemas/config/rendererConfig.ts
@@ -6,6 +6,20 @@ import { mdxConfigSchema } from './mdx';
 export type Renderer = (content: string) => Promise<string>;
 export type { markdocRenderer };
 
+/**
+ * Custom Renderer Type
+ * @description A custom renderer that can be used in StudioCMS
+ * @property {string} name - The name of the renderer
+ * @property {Renderer} renderer - The renderer function
+ * @example
+ * ```ts
+ * const customRenderer: CustomRenderer = {
+ * 	name: 'custom',
+ * 	renderer: async (content: string) => {
+ * 		return content;
+ * 	},
+ * };
+ */
 export type CustomRenderer = {
 	name: string;
 	renderer: Renderer;

diff --git a/packages/studiocms_core/src/strings.ts b/packages/studiocms_core/src/strings.ts
@@ -9,9 +9,9 @@ export const CoreStrings = {
 };
 
 export const DbErrors = {
-	AstroConfigOutput: "Astro Studio CMS is only supported in 'Output: server' SSR mode.",
+	AstroConfigOutput: "StudioCMS is only supported in 'Output: server' SSR mode.",
 	AstroConfigSiteURL:
-		"Astro Studio CMS requires a 'site' configuration in your Astro Config. This can be your domain ( 'https://example.com' ) or localhost ( 'http://localhost:4321' - localhost should only be used during development and should not be used in production).",
+		"StudioCMS requires a 'site' configuration in your Astro Config. This can be your domain ( 'https://example.com' ) or localhost ( 'http://localhost:4321' - localhost should only be used during development and should not be used in production).",
 	DbStartPage:
 		'Start Page is Enabled.  This will be the only page available until you initialize your database and disable the config option forcing this page to be displayed. To get started, visit http://localhost:4321/start/ in your browser to initialize your database. And Setup your installation.',
 	astroDbMissingMessage: 'Astro DB Integration not found in Astro Config',
@@ -39,10 +39,10 @@ export const DashboardStrings = {
 	Setup: 'Setting up StudioCMS Dashboard...',
 	AddIntegrations: 'Adding Dashboard Integrations...',
 	TestAndDemo:
-		'Testing and Demo Mode is Enabled, Authentication will not be required to access dashboard pages.  But you will only be able to edit the database from the Astro Studio Dashboard, https://studio.astro.build/',
+		'Testing and Demo Mode is Enabled, Authentication will not be required to access dashboard pages.  But you will only be able to edit the database directly',
 	AuthEnabled: 'Auth is Enabled, Setting Up...',
 	AuthDisabled:
-		'Auth is Disabled by the User Configuration.  You will only be able to edit the database from the Astro Studio Dashboard, https://studio.astro.build/',
+		'Auth is Disabled by the User Configuration.  You will only be able to edit the database directly',
 	AuthRoutes: 'Setting up Auth Routes...',
 	DashboardEnabled: 'Dashboard is Enabled.',
 	DashboardDisabled:

diff --git a/packages/studiocms_dashboard/src/routes/configuration/admins.astro b/packages/studiocms_dashboard/src/routes/configuration/admins.astro
@@ -87,7 +87,7 @@ if (permissionLevel !== 'admin') {
 
         <div class="py-2">
             <span>
-                Note: To delete admins you can do this from your Astro Studio Dashboard.
+                Note: To delete admins you can do this from your database.
             </span>
         </div>
 

diff --git a/packages/studiocms_devapps/README.md b/packages/studiocms_devapps/README.md
@@ -72,6 +72,20 @@ The following env variables set (`@astrojs/db`):
 
 ![pageview](./assets/preview-page.png)
 
+### WordPress Importer
+
+#### Requires
+
+- StudioCMS Integration
+- A current WP Install
+- `@studiocms/blog` (Optional for importing Posts under a blog)
+
+#### Preview
+
+- Toolbar app
+
+![WP-importer](./assets/wp-importer.png)
+
 ## Licensing
 
 [MIT Licensed](https://github.com/astrolicious/studiocms/blob/main/LICENSE).

diff --git a/packages/studiocms_devapps/assets/wp-importer.png b/packages/studiocms_devapps/assets/wp-importer.png
diff --git a/packages/studiocms_devapps/env.d.ts b/packages/studiocms_devapps/env.d.ts
@@ -13,3 +13,17 @@ declare module 'virtual:studiocms-devapps/libsql-viewer' {
 	};
 	export default value;
 }
+
+declare module 'virtual:studiocms-devapps/wp-api/configPath' {
+	const value: {
+		readonly projectRoot: string;
+	};
+	export default value;
+}
+
+declare module 'virtual:studiocms-devapps/wp-api-importer' {
+	const value: {
+		readonly endpointPath: string;
+	};
+	export default value;
+}
diff --git a/packages/studiocms_devapps/package.json b/packages/studiocms_devapps/package.json
@@ -38,8 +38,14 @@
   },
   "type": "module",
   "dependencies": {
+    "@studiocms/core": "workspace:*",
     "@libsql/client": "^0.14.0",
-    "astro-integration-kit": "catalog:"
+    "astro-integration-kit": "catalog:",
+    "cheerio": "^1.0.0",
+    "@types/cheerio": "^0.22.35",
+    "turndown": "^7.2.0",
+    "@types/turndown": "^5.0.5",
+    "html-entities": "^2.5.2"
   },
   "peerDependencies": {
     "@astrojs/db": "catalog:min",

diff --git a/packages/studiocms_devapps/src/apps/libsqlViewer.ts b/packages/studiocms_devapps/src/apps/libsqlViewer.ts
@@ -1,12 +1,15 @@
 import config from 'virtual:studiocms-devapps/libsql-viewer';
 import { defineToolbarApp } from 'astro/toolbar';
+import { closeOnOutsideClick } from './utils';
 
 export default defineToolbarApp({
-	init(canvas) {
+	init(canvas, eventTarget) {
 		const appWindow = document.createElement('astro-dev-toolbar-window');
 		appWindow.style.width = '95%';
 		appWindow.style.height = '80vh';
 
+		closeOnOutsideClick(eventTarget);
+
 		const link = document.createElement('a');
 		link.href = config.endpointPath;
 		link.target = '_blank';

diff --git a/packages/studiocms_devapps/src/apps/utils/index.ts b/packages/studiocms_devapps/src/apps/utils/index.ts
@@ -0,0 +1,42 @@
+export function createWindowElement(content: string) {
+	const windowElement = document.createElement('astro-dev-toolbar-window');
+	windowElement.innerHTML = content;
+	windowElement.placement = 'bottom-center';
+	return windowElement;
+}
+
+export function closeOnOutsideClick(
+	eventTarget: EventTarget,
+	additionalCheck?: (target: Element) => boolean
+) {
+	interface AppToggledEventDetail {
+		state: boolean;
+	}
+
+	const isCustomEvent = (event: Event): event is CustomEvent<AppToggledEventDetail> => {
+		return 'detail' in event;
+	};
+
+	function onPageClick(event: MouseEvent) {
+		const target = event.target as Element | null;
+		if (!target) return;
+		if (!target.closest) return;
+		if (target.closest('astro-dev-toolbar')) return;
+		if (additionalCheck?.(target)) return;
+		eventTarget.dispatchEvent(
+			new CustomEvent('toggle-app', {
+				detail: {
+					state: false,
+				},
+			})
+		);
+	}
+	eventTarget.addEventListener('app-toggled', (event: Event) => {
+		if (!isCustomEvent(event)) return;
+		if (event.detail.state === true) {
+			document.addEventListener('click', onPageClick, true);
+		} else {
+			document.removeEventListener('click', onPageClick, true);
+		}
+	});
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -87,7 +87,7 @@ if (permissionLevel !== 'admin') { @@
             <div class="py-2">
                 <span>
-                    Note: To delete admins you can do this from your Astro Studio Dashboard.
+                    Note: To delete admins you can do this from your database.
                 </span>
             </div>
@@ Expand Down @@