♻️ Chore: Prep docs for new version

.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

.changeset/metal-steaks-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@studiocms/devapps": patch
+---
+
+[Feat]: Add Wordpress importer app

.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

.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"
+  }
 }

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
 

biome.json

@@ -31,7 +31,10 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "warn"
+      }
     }
   },
   "overrides": [

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 };

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') {

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" 

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,

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
 		 */

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
 		 */

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;

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;

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:

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>
 

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).

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;
+}

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",

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';

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);
+		}
+	});
+}