@studiocms/devapps 0.1.0-beta.10

package/dist/schema/wp-api.js

@@ -0,0 +1,72 @@
+import { z } from "astro/zod";
+const OpenClosedSchema = z.enum(["open", "closed", ""]);
+const PageSchema = z.object({
+  id: z.number(),
+  date: z.coerce.date(),
+  date_gmt: z.coerce.date(),
+  guid: z.object({ rendered: z.string() }),
+  modified: z.coerce.date(),
+  modified_gmt: z.coerce.date(),
+  slug: z.string(),
+  status: z.enum(["publish", "future", "draft", "pending", "private"]),
+  type: z.string(),
+  title: z.object({ rendered: z.string() }),
+  content: z.object({ rendered: z.string(), protected: z.boolean() }),
+  excerpt: z.object({ rendered: z.string(), protected: z.boolean() }),
+  author: z.number(),
+  featured_media: z.number(),
+  parent: z.number(),
+  menu_order: z.number(),
+  comment_status: OpenClosedSchema,
+  ping_status: OpenClosedSchema,
+  template: z.string(),
+  meta: z.array(z.any().or(z.record(z.any())))
+});
+const PostSchema = PageSchema.extend({
+  format: z.enum([
+    "standard",
+    "aside",
+    "chat",
+    "gallery",
+    "link",
+    "image",
+    "quote",
+    "status",
+    "video",
+    "audio",
+    ""
+  ]),
+  categories: z.array(z.number()),
+  tags: z.array(z.number())
+});
+const TagSchema = z.object({
+  id: z.number(),
+  count: z.number(),
+  description: z.string(),
+  link: z.string().url(),
+  name: z.string(),
+  slug: z.string(),
+  taxonomy: z.string(),
+  meta: z.array(z.any()).or(z.record(z.any()))
+});
+const CategorySchema = TagSchema.extend({
+  parent: z.number()
+});
+const SiteSettingsSchema = z.object({
+  name: z.string(),
+  description: z.string(),
+  url: z.string(),
+  home: z.string(),
+  gmt_offset: z.coerce.number(),
+  timezone_string: z.string(),
+  site_logo: z.number().optional(),
+  site_icon: z.number().optional(),
+  site_icon_url: z.string().optional()
+});
+export {
+  CategorySchema,
+  PageSchema,
+  PostSchema,
+  SiteSettingsSchema,
+  TagSchema
+};

package/dist/utils/app-utils.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Creates a new window element with the specified content.
+ *
+ * @param content - The HTML content to be inserted into the window element.
+ * @returns The newly created window element with the specified content.
+ */
+export declare function createWindowElement(content: string): import("astro/runtime/client/dev-toolbar/ui-library/window.js").DevToolbarWindow;
+/**
+ * Attaches an event listener to the specified event target that listens for the 'app-toggled' event.
+ * When the 'app-toggled' event is triggered, it adds or removes a click event listener on the document
+ * based on the state provided in the event's detail.
+ *
+ * The click event listener will dispatch a 'toggle-app' event with `state: false` if the click occurs
+ * outside of the specified elements or does not pass the additional check.
+ *
+ * @param eventTarget - The target to which the 'app-toggled' event listener is attached.
+ * @param additionalCheck - An optional function that takes an Element and returns a boolean. If provided,
+ *                          the click event listener will not dispatch the 'toggle-app' event if this function
+ *                          returns true for the clicked target.
+ */
+export declare function closeOnOutsideClick(eventTarget: EventTarget, additionalCheck?: (target: Element) => boolean): void;

package/dist/utils/app-utils.js

@@ -0,0 +1,37 @@
+function createWindowElement(content) {
+  const windowElement = document.createElement("astro-dev-toolbar-window");
+  windowElement.innerHTML = content;
+  windowElement.placement = "bottom-center";
+  return windowElement;
+}
+function closeOnOutsideClick(eventTarget, additionalCheck) {
+  const isCustomEvent = (event) => {
+    return "detail" in event;
+  };
+  function onPageClick(event) {
+    const target = event.target;
+    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) => {
+    if (!isCustomEvent(event)) return;
+    if (event.detail.state === true) {
+      document.addEventListener("click", onPageClick, true);
+    } else {
+      document.removeEventListener("click", onPageClick, true);
+    }
+  });
+}
+export {
+  closeOnOutsideClick,
+  createWindowElement
+};

package/dist/utils/pathGenerator.d.ts

@@ -0,0 +1,10 @@
+/** Get the a root-relative URL path with the site’s `base` prefixed. */
+export declare function pathWithBase(path: string, _base: string): string;
+/** Ensure the passed path does not start with a leading slash. */
+export declare function stripLeadingSlash(href: string): string;
+/** Ensure the passed path does not end with a trailing slash. */
+export declare function stripTrailingSlash(href: string): string;
+/** Ensure the passed path starts with a leading slash. */
+export declare function ensureLeadingSlash(href: string): string;
+/** Endpoint path generator */
+export declare const pathGenerator: (endpointPath: string, _base: string) => (path: string) => string;

package/dist/utils/pathGenerator.js

@@ -0,0 +1,37 @@
+function base(url) {
+  return stripTrailingSlash(url);
+}
+function pathWithBase(path, _base) {
+  let newPath = path;
+  newPath = stripLeadingSlash(newPath);
+  return newPath ? `${base(_base)}/${newPath}` : `${base(_base)}/`;
+}
+function stripLeadingSlash(href) {
+  let newHref = href;
+  if (newHref[0] === "/") newHref = newHref.slice(1);
+  return newHref;
+}
+function stripTrailingSlash(href) {
+  let newHref = href;
+  if (newHref[newHref.length - 1] === "/") newHref = newHref.slice(0, -1);
+  return newHref;
+}
+function ensureLeadingSlash(href) {
+  let newHref = href;
+  if (newHref[0] !== "/") newHref = `/${newHref}`;
+  return newHref;
+}
+const pathGenerator = (endpointPath, _base) => {
+  const newEndpointPath = stripTrailingSlash(endpointPath);
+  return function pathBuilder(path) {
+    const newPath = stripLeadingSlash(path);
+    return `${pathWithBase(newEndpointPath, _base)}${ensureLeadingSlash(newPath)}`;
+  };
+};
+export {
+  ensureLeadingSlash,
+  pathGenerator,
+  pathWithBase,
+  stripLeadingSlash,
+  stripTrailingSlash
+};

package/dist/utils/wp-api/converters.d.ts

@@ -0,0 +1,74 @@
+import type { PageContent, PageData } from './index.js';
+/**
+ * Converts a given page object to a PageData object.
+ *
+ * @param page - The page object to convert. This is expected to be of an unknown type.
+ * @param endpoint - The API endpoint to fetch additional data, such as media.
+ * @returns A promise that resolves to a PageData object containing the converted page data.
+ *
+ * @throws Will throw an error if fetching the title image fails.
+ */
+export declare const ConvertToPageData: (page: unknown, endpoint: string) => Promise<PageData>;
+/**
+ * Converts the provided page data and page content into a PageContent object.
+ *
+ * @param pageData - The data of the page to be converted.
+ * @param page - The raw page content to be converted.
+ * @returns A promise that resolves to a PageContent object.
+ * @throws Will throw an error if the pageData is missing an id.
+ */
+export declare const ConvertToPageContent: (pageData: PageData, page: unknown) => Promise<PageContent>;
+/**
+ * Generates and inserts categories into the database if they do not already exist.
+ *
+ * @param categories - An array of category IDs to be processed.
+ * @param endpoint - The API endpoint to fetch category data from.
+ * @returns A promise that resolves when the categories have been processed and inserted into the database.
+ *
+ * This function performs the following steps:
+ * 1. Iterates over the provided category IDs.
+ * 2. Checks if each category already exists in the database.
+ * 3. If a category does not exist, fetches the category data from the specified API endpoint.
+ * 4. Collects the new category data.
+ * 5. Maps the new category data to the database schema.
+ * 6. Inserts the new categories into the database.
+ */
+export declare const generateCategories: (categories: number[], endpoint: string) => Promise<void>;
+/**
+ * Generates and inserts tags into the database if they do not already exist.
+ *
+ * @param {number[]} tags - An array of tag IDs to be processed.
+ * @param {string} endpoint - The API endpoint to fetch tag data from.
+ * @returns {Promise<void>} A promise that resolves when the operation is complete.
+ *
+ * @example
+ * const tags = [1, 2, 3];
+ * const endpoint = 'https://example.com/wp-json/wp/v2';
+ * await generateTags(tags, endpoint);
+ *
+ * @remarks
+ * This function checks if each tag ID already exists in the database. If a tag does not exist,
+ * it fetches the tag data from the specified API endpoint and inserts it into the database.
+ * The function logs messages to the console for each tag that is processed.
+ */
+export declare const generateTags: (tags: number[], endpoint: string) => Promise<void>;
+/**
+ * Converts a given post object to PageData format.
+ *
+ * @param post - The post object to be converted.
+ * @param useBlogPkg - A boolean indicating whether to use the blog package.
+ * @param endpoint - The API endpoint to fetch additional data.
+ * @returns A promise that resolves to the converted PageData object.
+ *
+ * @throws Will throw an error if fetching the title image or downloading the post image fails.
+ */
+export declare const ConvertToPostData: (post: unknown, useBlogPkg: boolean, endpoint: string) => Promise<PageData>;
+/**
+ * Converts the given post data to a PageContent object.
+ *
+ * @param pageData - The data of the page to which the post content belongs.
+ * @param post - The post data to be converted.
+ * @returns A promise that resolves to a PageContent object.
+ * @throws Will throw an error if the pageData is missing an id.
+ */
+export declare const ConvertToPostContent: (pageData: PageData, post: unknown) => Promise<PageContent>;

package/dist/utils/wp-api/converters.js

@@ -0,0 +1,181 @@
+import path from "node:path";
+import { db, eq } from "astro:db";
+import { userProjectRoot } from "virtual:studiocms-devapps/config";
+import { decode } from "html-entities";
+import { tsPageDataCategories, tsPageDataTags } from "studiocms/sdk/tables";
+import TurndownService from "turndown";
+import {
+  apiEndpoint,
+  cleanUpHtml,
+  downloadAndUpdateImages,
+  downloadPostImage,
+  stripHtml
+} from "./utils";
+const ASTROPUBLICFOLDER = path.resolve(userProjectRoot, "public");
+const WPImportFolder = path.resolve(ASTROPUBLICFOLDER, "wp-import");
+const pagesImagesFolder = path.resolve(WPImportFolder, "pages");
+const postsImagesFolder = path.resolve(WPImportFolder, "posts");
+const ConvertToPageData = async (page, endpoint) => {
+  const data = page;
+  const titleImageId = data.featured_media;
+  const titleImageURL = apiEndpoint(endpoint, "media", `${titleImageId}`);
+  const titleImageResponse = await fetch(titleImageURL);
+  const titleImageJson = await titleImageResponse.json();
+  const titleImage = await downloadPostImage(titleImageJson.source_url, pagesImagesFolder);
+  const pageData = {
+    id: crypto.randomUUID(),
+    title: data.title.rendered,
+    description: decode(stripHtml(data.excerpt.rendered)),
+    slug: data.slug,
+    publishedAt: new Date(data.date_gmt),
+    updatedAt: new Date(data.modified_gmt),
+    showOnNav: false,
+    contentLang: "default",
+    package: "studiocms"
+  };
+  if (titleImage) {
+    pageData.heroImage = titleImage;
+  }
+  return pageData;
+};
+const ConvertToPageContent = async (pageData, page) => {
+  const data = page;
+  if (pageData.id === void 0) {
+    throw new Error("pageData is missing id");
+  }
+  const cleanupContent = cleanUpHtml(data.content.rendered);
+  const htmlWithImages = await downloadAndUpdateImages(cleanupContent, pagesImagesFolder);
+  const turndownService = new TurndownService({
+    bulletListMarker: "-",
+    codeBlockStyle: "fenced",
+    emDelimiter: "*"
+  });
+  const content = turndownService.turndown(htmlWithImages);
+  const pageContent = {
+    id: crypto.randomUUID(),
+    contentId: pageData.id,
+    contentLang: "default",
+    content
+  };
+  return pageContent;
+};
+const generateCategories = async (categories, endpoint) => {
+  const newCategories = [];
+  for (const categoryId of categories) {
+    const categoryExists = await db.select().from(tsPageDataCategories).where(eq(tsPageDataCategories.id, categoryId)).get();
+    if (categoryExists) {
+      console.log(`Category with id ${categoryId} already exists in the database`);
+      continue;
+    }
+    const categoryURL = apiEndpoint(endpoint, "categories", `${categoryId}`);
+    const response = await fetch(categoryURL);
+    const json = await response.json();
+    newCategories.push(json);
+  }
+  if (newCategories.length > 0) {
+    const categoryData = newCategories.map((category) => {
+      const data = {
+        id: category.id,
+        name: category.name,
+        slug: category.slug,
+        description: category.description,
+        meta: JSON.stringify(category.meta)
+      };
+      if (category.parent) {
+        data.parent = category.parent;
+      }
+      return data;
+    });
+    for (const category of categoryData) {
+      console.log(`Inserting category with id ${category.id} into the database`);
+      await db.insert(tsPageDataCategories).values(category);
+    }
+  }
+};
+const generateTags = async (tags, endpoint) => {
+  const newTags = [];
+  for (const tagId of tags) {
+    const tagExists = await db.select().from(tsPageDataTags).where(eq(tsPageDataTags.id, tagId)).get();
+    if (tagExists) {
+      console.log(`Tag with id ${tagId} already exists in the database`);
+      continue;
+    }
+    const tagURL = apiEndpoint(endpoint, "tags", `${tagId}`);
+    const response = await fetch(tagURL);
+    const json = await response.json();
+    newTags.push(json);
+  }
+  if (newTags.length > 0) {
+    const tagData = newTags.map((tag) => {
+      const data = {
+        id: tag.id,
+        name: tag.name,
+        slug: tag.slug,
+        description: tag.description,
+        meta: JSON.stringify(tag.meta)
+      };
+      return data;
+    });
+    for (const tag of tagData) {
+      console.log(`Inserting tag with id ${tag.id} into the database`);
+      await db.insert(tsPageDataTags).values(tag);
+    }
+  }
+};
+const ConvertToPostData = async (post, useBlogPkg, endpoint) => {
+  const data = post;
+  const titleImageId = data.featured_media;
+  const titleImageURL = apiEndpoint(endpoint, "media", `${titleImageId}`);
+  const titleImageResponse = await fetch(titleImageURL);
+  const titleImageJson = await titleImageResponse.json();
+  const titleImage = await downloadPostImage(titleImageJson.source_url, pagesImagesFolder);
+  const pkg = useBlogPkg ? "@studiocms/blog" : "studiocms/markdown";
+  await generateCategories(data.categories, endpoint);
+  await generateTags(data.tags, endpoint);
+  const pageData = {
+    id: crypto.randomUUID(),
+    title: data.title.rendered,
+    description: decode(stripHtml(data.excerpt.rendered)),
+    slug: data.slug,
+    publishedAt: new Date(data.date_gmt),
+    updatedAt: new Date(data.modified_gmt),
+    showOnNav: false,
+    contentLang: "default",
+    package: pkg,
+    categories: JSON.stringify(data.categories),
+    tags: JSON.stringify(data.tags)
+  };
+  if (titleImage) {
+    pageData.heroImage = titleImage;
+  }
+  return pageData;
+};
+const ConvertToPostContent = async (pageData, post) => {
+  const data = post;
+  if (pageData.id === void 0) {
+    throw new Error("pageData is missing id");
+  }
+  const cleanupContent = cleanUpHtml(data.content.rendered);
+  const htmlWithImages = await downloadAndUpdateImages(cleanupContent, postsImagesFolder);
+  const turndownService = new TurndownService({
+    bulletListMarker: "-",
+    codeBlockStyle: "fenced",
+    emDelimiter: "*"
+  });
+  const content = turndownService.turndown(htmlWithImages);
+  const pageContent = {
+    id: crypto.randomUUID(),
+    contentId: pageData.id,
+    contentLang: "default",
+    content
+  };
+  return pageContent;
+};
+export {
+  ConvertToPageContent,
+  ConvertToPageData,
+  ConvertToPostContent,
+  ConvertToPostData,
+  generateCategories,
+  generateTags
+};

package/dist/utils/wp-api/index.d.ts

@@ -0,0 +1,6 @@
+import type { tsPageContent, tsPageData } from 'studiocms/sdk/tables';
+export type PageData = typeof tsPageData.$inferInsert;
+export type PageContent = typeof tsPageContent.$inferInsert;
+export * from './pages.js';
+export * from './posts.js';
+export * from './settings.js';

package/dist/utils/wp-api/index.js

@@ -0,0 +1,3 @@
+export * from "./pages.js";
+export * from "./posts.js";
+export * from "./settings.js";

package/dist/utils/wp-api/pages.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Imports pages from a WordPress API endpoint.
+ *
+ * This function fetches all pages from the specified WordPress API endpoint
+ * and imports each page individually.
+ *
+ * @param endpoint - The WordPress API endpoint to fetch pages from.
+ *
+ * @returns A promise that resolves when all pages have been imported.
+ *
+ * @throws Will throw an error if the pages cannot be imported.
+ */
+export declare const importPagesFromWPAPI: (endpoint: string) => Promise<void>;

package/dist/utils/wp-api/pages.js

@@ -0,0 +1,38 @@
+import { db } from "astro:db";
+import { tsPageContent, tsPageData } from "studiocms/sdk/tables";
+import { ConvertToPageContent, ConvertToPageData } from "./converters.js";
+import { apiEndpoint, fetchAll } from "./utils.js";
+const generatePageFromData = async (page, endpoint) => {
+  const pageData = await ConvertToPageData(page, endpoint);
+  const pageContent = await ConvertToPageContent(pageData, page);
+  return { pageData, pageContent };
+};
+const importPage = async (page, endpoint) => {
+  const { pageData, pageContent } = await generatePageFromData(page, endpoint);
+  const pageDataResult = await db.insert(tsPageData).values(pageData).returning({ id: tsPageData.id, title: tsPageData.title }).get();
+  if (pageDataResult === void 0) {
+    throw new Error("Failed to insert page data");
+  }
+  const pageContentResult = await db.insert(tsPageContent).values(pageContent).returning({ id: tsPageContent.id }).get();
+  if (pageContentResult === void 0) {
+    throw new Error("Failed to insert page content");
+  }
+  console.log("- Imported new page from WP-API: ", pageDataResult.title);
+};
+const importPagesFromWPAPI = async (endpoint) => {
+  const url = apiEndpoint(endpoint, "pages");
+  console.log("fetching pages from: ", url.origin);
+  const pages = await fetchAll(url);
+  console.log("Total pages: ", pages.length);
+  try {
+    for (const page of pages) {
+      console.log("importing page:", page.title.rendered);
+      await importPage(page, endpoint);
+    }
+  } catch (error) {
+    console.error("Failed to import pages from WP-API:", error);
+  }
+};
+export {
+  importPagesFromWPAPI
+};

package/dist/utils/wp-api/posts.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Imports posts from a WordPress API endpoint.
+ *
+ * @param endpoint - The API endpoint to fetch posts from.
+ * @param useBlogPkg - A boolean indicating whether to use the blog package.
+ * @returns A promise that resolves when all posts have been imported.
+ *
+ * @throws Will throw an error if the import process fails.
+ */
+export declare const importPostsFromWPAPI: (endpoint: string, useBlogPkg: boolean) => Promise<void>;

package/dist/utils/wp-api/posts.js

@@ -0,0 +1,38 @@
+import { db } from "astro:db";
+import { tsPageContent, tsPageData } from "studiocms/sdk/tables";
+import { ConvertToPostContent, ConvertToPostData } from "./converters.js";
+import { apiEndpoint, fetchAll } from "./utils.js";
+const generatePostFromData = async (post, useBlogPkg, endpoint) => {
+  const pageData = await ConvertToPostData(post, useBlogPkg, endpoint);
+  const pageContent = await ConvertToPostContent(pageData, post);
+  return { pageData, pageContent };
+};
+const importPost = async (post, useBlogPkg, endpoint) => {
+  const { pageData, pageContent } = await generatePostFromData(post, useBlogPkg, endpoint);
+  const pageDataResult = await db.insert(tsPageData).values(pageData).returning({ id: tsPageData.id, title: tsPageData.title }).get();
+  if (pageDataResult === void 0) {
+    throw new Error("Failed to insert post data");
+  }
+  const pageContentResult = await db.insert(tsPageContent).values(pageContent).returning({ id: tsPageContent.id }).get();
+  if (pageContentResult === void 0) {
+    throw new Error("Failed to insert post content");
+  }
+  console.log("- Imported new post from WP-API:", pageDataResult.title);
+};
+const importPostsFromWPAPI = async (endpoint, useBlogPkg) => {
+  const url = apiEndpoint(endpoint, "posts");
+  console.log("Fetching posts from: ", url.origin);
+  const posts = await fetchAll(url);
+  console.log("Total posts: ", posts.length);
+  try {
+    for (const post of posts) {
+      console.log("importing post: ", post.title.rendered);
+      await importPost(post, useBlogPkg, endpoint);
+    }
+  } catch (error) {
+    console.error("Failed to import posts from WP-API: ", error);
+  }
+};
+export {
+  importPostsFromWPAPI
+};

package/dist/utils/wp-api/settings.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Imports site settings from a WordPress API endpoint and updates the local database.
+ *
+ * @param endpoint - The WordPress API endpoint to fetch settings from.
+ *
+ * This function performs the following steps:
+ * 1. Constructs the URL for the settings endpoint.
+ * 2. Fetches the site settings from the constructed URL.
+ * 3. Logs the fetched settings.
+ * 4. Downloads the site icon if available.
+ * 5. If the site icon is not available, attempts to download the site logo.
+ * 6. Constructs the site configuration object.
+ * 7. Updates the local database with the fetched settings.
+ * 8. Logs the success or failure of the database update.
+ *
+ * @throws Will log an error message if the fetch or database update fails.
+ */
+export declare const importSettingsFromWPAPI: (endpoint: string) => Promise<void>;

package/dist/utils/wp-api/settings.js

@@ -0,0 +1,45 @@
+import path from "node:path";
+import { db, eq } from "astro:db";
+import { userProjectRoot } from "virtual:studiocms-devapps/config";
+import { CMSSiteConfigId } from "studiocms/consts";
+import { tsSiteConfig } from "studiocms/sdk/tables";
+import { apiEndpoint, downloadPostImage } from "./utils.js";
+const ASTROPUBLICFOLDER = path.resolve(userProjectRoot, "public");
+const importSettingsFromWPAPI = async (endpoint) => {
+  const url = apiEndpoint(endpoint, "settings");
+  console.log("Fetching site settings from: ", url.origin);
+  const response = await fetch(url);
+  const settings = await response.json();
+  console.log("Importing site settings: ", settings);
+  let siteIcon = void 0;
+  if (settings.site_icon_url) {
+    siteIcon = await downloadPostImage(settings.site_icon_url, ASTROPUBLICFOLDER);
+  }
+  if (!settings.site_icon_url && settings.site_logo) {
+    const siteLogoURL = apiEndpoint(endpoint, "media", `${settings.site_logo}`);
+    const siteLogoResponse = await fetch(siteLogoURL);
+    const siteLogoJson = await siteLogoResponse.json();
+    siteIcon = await downloadPostImage(siteLogoJson.source_url, ASTROPUBLICFOLDER);
+  }
+  const siteConfig = {
+    id: CMSSiteConfigId,
+    title: settings.name,
+    description: settings.description
+  };
+  if (siteIcon) {
+    siteConfig.siteIcon = siteIcon;
+  }
+  try {
+    const insert = await db.update(tsSiteConfig).set(siteConfig).where(eq(tsSiteConfig.id, CMSSiteConfigId)).returning({ id: tsSiteConfig.id }).get();
+    if (insert) {
+      console.log("Updated site settings");
+    } else {
+      console.error("Failed to update site settings");
+    }
+  } catch (error) {
+    console.error("Failed to import site settings from WP-API: ", error);
+  }
+};
+export {
+  importSettingsFromWPAPI
+};