studiocms 0.1.0-beta.10

package/dist/components/dashboard/sidebarConfig.js

@@ -0,0 +1,88 @@
+import { StudioCMSRoutes, makeDashboardRoute } from "studiocms:lib";
+import logger from "studiocms:logger";
+import { getPluginDashboardPages } from "studiocms:plugin-helpers";
+import { defaultLang } from "../../lib/i18n/config.js";
+const loggerMessage = (title, slug, admin) => `Plugin page ${title} (${slug}) is not an ${admin ? "admin" : "user"} page but is part of the ${admin ? "adminPages" : "userPages"} array, this page will not be shown in the sidebar.`;
+function filterAndProcessPages(pages, admin, permission, lang) {
+  const filteredPages = [];
+  for (const { title: t, icon: ico, slug, requiredPermissions } of pages) {
+    const href = makeDashboardRoute(slug);
+    const icon = ico || "cube-transparent";
+    const title = t[lang] || t[defaultLang];
+    if (admin) {
+      if (requiredPermissions === void 0) {
+        logger.warn(loggerMessage(title, slug, admin));
+        continue;
+      }
+      if (requiredPermissions === "none") {
+        logger.warn(loggerMessage(title, slug, admin));
+        continue;
+      }
+      if (requiredPermissions === "visitor") {
+        filteredPages.push({ title, icon, href });
+        continue;
+      }
+      if (requiredPermissions === "editor") {
+        filteredPages.push({ title, icon, href });
+        continue;
+      }
+    } else {
+      if (requiredPermissions === "admin") {
+        logger.warn(loggerMessage(title, slug, admin));
+        continue;
+      }
+      if (requiredPermissions === "owner") {
+        logger.warn(loggerMessage(title, slug, admin));
+        continue;
+      }
+    }
+    if (permission?.includes(requiredPermissions || "none")) {
+      filteredPages.push({ title, icon, href });
+    }
+  }
+  return filteredPages;
+}
+function getSidebarLinks(lang) {
+  const { adminPages, userPages } = getPluginDashboardPages();
+  const baseLinks = [
+    {
+      key: "dashboard-link-label",
+      icon: "home",
+      href: StudioCMSRoutes.mainLinks.dashboardIndex
+    },
+    ...filterAndProcessPages(userPages, false, ["none", "visitor"], lang)
+  ];
+  const editorLinks = [
+    {
+      key: "content-management-label",
+      icon: "pencil-square",
+      href: StudioCMSRoutes.mainLinks.contentManagement
+    },
+    ...filterAndProcessPages(userPages, false, ["editor"], lang)
+  ];
+  const adminLinks = [
+    {
+      key: "user-management-label",
+      icon: "user-group",
+      href: StudioCMSRoutes.mainLinks.userManagement
+    },
+    ...filterAndProcessPages(adminPages, true, ["admin"], lang)
+  ];
+  const ownerLinks = [
+    {
+      key: "site-configuration-label",
+      icon: "cog-6-tooth",
+      href: StudioCMSRoutes.mainLinks.siteConfiguration
+    },
+    ...filterAndProcessPages(adminPages, true, ["owner"], lang)
+  ];
+  return {
+    baseLinks,
+    editorLinks,
+    adminLinks,
+    ownerLinks
+  };
+}
+export {
+  getSidebarLinks
+};

package/dist/components/default-grid-items/Recently-created-pages.astro

@@ -0,0 +1,91 @@
+---
+import { FormattedDate } from 'studiocms:components';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import studioCMS_SDK from 'studiocms:sdk';
+import { Badge, Button, Card, Center, Icon } from 'studiocms:ui/components';
+import { allowedIdentifiers, sortByDate, withinLast30Days } from './utils.js';
+
+// Get all pages and users from the database
+const allPages = await studioCMS_SDK.GET.database.pages(true);
+
+// Filter out the pages that are not allowed
+const totalPages = allPages.filter((page) => allowedIdentifiers.includes(page.package));
+
+const recentlyUpdatedPages = totalPages
+	.filter((page) => withinLast30Days(new Date(page.publishedAt)))
+	.sort((a, b) => sortByDate(a.publishedAt, b.publishedAt))
+	.slice(0, 3);
+---
+<div class="recently-created-page-container">
+  {
+    recentlyUpdatedPages.length > 0 ? (
+      recentlyUpdatedPages.map(page => (
+        <Card fullWidth class={'recently-created-page-card'} as='a' href={StudioCMSRoutes.mainLinks.contentManagementEdit + `?edit=${page.id}`}>
+            <div class="card-row">
+              <span class="card-title">{page.title} {page.draft && <Badge label="Draft" size="sm" variant="flat" rounding="semi" />}</span>
+              <span class="card-date">Created: <FormattedDate date={page.publishedAt} /></span>
+            </div>
+            
+            <div class="card-row">
+              <span class="card-description">{page.description}</span>
+            </div>
+        </Card>
+      ))
+  ) : (
+      <Card fullWidth style="background-color: hsl(var(--background-step-2));">
+        <Center><span style="color: hsl(var(--text-muted));">No recently created pages found.</span></Center>
+      </Card>
+    )
+  }
+</div>
+
+<style>
+  .recently-created-page-container {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+  }
+
+
+  .recently-created-page-card {
+    display: flex;
+    flex-direction: column;
+    background-color: hsl(var(--background-step-2));
+    text-decoration: none;
+    color: initial;
+    transition: all .15s ease;
+    
+    & .card-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      & .card-title {
+        font-weight: 600;
+        font-size: 1.25rem;
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+      }
+
+      & .card-date {
+        color: hsl(var(--text-muted));
+        font-size: .8rem;
+      }
+
+      & .card-description {
+        font-size: 1rem;
+        color: hsl(var(--text-muted));
+        line-clamp: 1;
+      }
+
+      & .card-icon {
+        color: hsl(var(--text-muted));
+      }
+    }
+  }
+
+  .recently-created-page-card:hover {
+    background-color: hsl(var(--background-step-3)) !important;
+  }
+</style>

package/dist/components/default-grid-items/Recently-signed-up.astro

@@ -0,0 +1,71 @@
+---
+import config from 'studiocms:config';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import studioCMS_SDK from 'studiocms:sdk';
+import { Icon, User } from 'studiocms:ui/components';
+import Card from '@studiocms/ui/components/Card/Card.astro';
+import { sortByDate } from './utils';
+
+const totalUsers = await studioCMS_SDK.GET.database.users();
+
+const recentlyCreatedUsers = totalUsers
+	.sort((a, b) => sortByDate(a.createdAt, b.createdAt))
+	.slice(0, 3);
+---
+<div class="recently-signed-up-users-container">
+    {
+        recentlyCreatedUsers.map((user) => (
+            <a href={`${StudioCMSRoutes.mainLinks.userManagementEdit}/?user=${user.id}`} class="recently-signed-up-user" data-astro-reload>
+                <Card class="user-card" fullWidth>
+                    <div class="user-flex">
+                        <User 
+                            name={user.name}
+                            avatar={user.avatar ?? undefined} 
+                            description={`Created at ${new Date(user.createdAt!).toLocaleDateString(config.dateLocale, config.dateTimeFormat)}`} 
+                            loading='eager',
+                            />
+                        <Icon name="eye" width={24} height={24} />
+                    </div>
+                </Card>
+            </a>
+        ))
+    }
+
+</div>
+
+<style>
+    .recently-signed-up-users-container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        gap: .5rem;
+    }
+    
+    .recently-signed-up-user {
+        text-decoration: none;
+        color: hsl(var(--text-normal));
+    }
+
+    .user-card {
+        background-color: hsl(var(--background-step-2));
+        width: 100%;
+        height: 100%;
+        transition: all .15s ease;
+    }
+    
+    .user-card:hover {
+        background-color: hsl(var(--background-step-3));
+    }
+
+    .user-flex {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .user-card:hover {
+        background-color: hsl(var(--background-step-3));
+    }
+    
+</style>

package/dist/components/default-grid-items/Recently-updated-pages.astro

@@ -0,0 +1,96 @@
+---
+import { FormattedDate } from 'studiocms:components';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import studioCMS_SDK from 'studiocms:sdk';
+import { Badge, Button, Card, Center, Icon } from 'studiocms:ui/components';
+import { allowedIdentifiers, sortByDate, withinLast30Days } from './utils.js';
+
+// Get all pages and users from the database
+const allPages = await studioCMS_SDK.GET.database.pages(true);
+
+// Filter out the pages that are not allowed
+const totalPages = allPages.filter((page) => allowedIdentifiers.includes(page.package));
+
+const recentlyUpdatedPages = totalPages
+	// biome-ignore lint/style/noNonNullAssertion: <explanation>
+	.filter((page) => withinLast30Days(page.updatedAt!))
+	.sort((a, b) => sortByDate(a.updatedAt, b.updatedAt))
+	.slice(0, 3);
+---
+<div class="recently-updated-page-container">
+  {
+    recentlyUpdatedPages.length > 0 ? (
+      recentlyUpdatedPages.map(page => (
+        <Card fullWidth class={'recently-updated-page-card'} as='a' href={StudioCMSRoutes.mainLinks.contentManagementEdit + `?edit=${page.id}`}>
+          <div class="card-row">
+            <span class="card-title">{page.title} {page.draft && <Badge label="Draft" size="sm" variant="flat" rounding="semi" />}</span>
+            <span class="card-date">Edited: <FormattedDate date={page.updatedAt || page.publishedAt} /></span>
+          </div>
+            
+          <div class="card-row">
+            <span class="card-description">{page.description}</span>
+          </div>
+        </Card>
+      ))
+    ) : (
+      <Card fullWidth style="background-color: hsl(var(--background-step-2));">
+        <Center><span style="color: hsl(var(--text-muted));">No recently updated pages found.</span></Center>
+      </Card>
+    )
+  }
+</div>
+
+<style>
+  .recently-updated-page-container {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+  }
+
+
+  .recently-updated-page-card {
+    display: flex;
+    flex-direction: column;
+    background-color: hsl(var(--background-step-2));
+    text-decoration: none;
+    color: initial;
+    transition: all .15s ease;
+    
+    & .card-row:not(:last-of-type) {
+      margin-bottom: .5rem;
+    }
+
+    & .card-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      & .card-title {
+        font-weight: 600;
+        font-size: 1.25rem;
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+      }
+
+      & .card-date {
+        color: hsl(var(--text-muted));
+        font-size: .8rem;
+      }
+
+      & .card-description {
+        font-size: 1rem;
+        color: hsl(var(--text-muted));
+        line-clamp: 1;
+      }
+
+      & .card-icon {
+        color: hsl(var(--text-muted));
+      }
+    }
+  }
+
+  .recently-updated-page-card:hover {
+    background-color: hsl(var(--background-step-3)) !important;
+  }
+</style>

package/dist/components/default-grid-items/Totals.astro

@@ -0,0 +1,107 @@
+---
+import { StudioCMSRoutes } from 'studiocms:lib';
+import studioCMS_SDK from 'studiocms:sdk';
+import { Card, Icon } from 'studiocms:ui/components';
+import { allowedIdentifiers } from './utils.js';
+
+// Get all pages and users from the database
+const allPages = await studioCMS_SDK.GET.database.pages(true);
+const totalUsers = await studioCMS_SDK.GET.database.users();
+
+// Filter out the pages that are not allowed
+const totalPages = allPages.filter((page) => allowedIdentifiers.includes(page.package));
+
+// Filter out for draft pages
+const totalDraftPages = totalPages.filter((page) => page.draft === true);
+---
+<div class="totals-grid-item-container">
+    <div class="totals-grid-item">
+        <a href={StudioCMSRoutes.mainLinks.contentManagement}>
+            <Card class="totals-grid-item-card">
+                <div class="totals-grid-item-content">
+                    <Icon name="document-text" height={24} width={24} />
+                    <div class="totals-grid-item-text">
+                        <span class="totals-grid-item-label">Total Pages</span>
+                        <span>{totalPages.length}</span>
+                    </div>
+                </div>
+            </Card>
+        </a>
+    </div>
+    <div class="totals-grid-item">
+        <a href={StudioCMSRoutes.mainLinks.contentManagement}>
+            <Card class="totals-grid-item-card">
+                <div class="totals-grid-item-content">
+                    <Icon name="document" height={24} width={24} />
+                    <div class="totals-grid-item-text">
+                        <span class="totals-grid-item-label">Draft Pages</span>
+                        <span>{totalDraftPages.length}</span>
+                    </div>
+                </div>
+            </Card>
+        </a>
+    </div>
+    <div class="totals-grid-item">
+        <a href={StudioCMSRoutes.mainLinks.userManagement}>
+            <Card class="totals-grid-item-card">
+                <div class="totals-grid-item-content">
+                    <Icon name="user-group" height={24} width={24} />
+                    <div class="totals-grid-item-text">
+                        <span class="totals-grid-item-label">Total Users</span>
+                        <span>{totalUsers.length}</span>
+                    </div>
+                </div>
+            </Card>
+        </a>
+    </div>
+</div>
+
+<style>
+    a {
+        text-decoration: none;
+        color: inherit;
+    }
+
+    .totals-grid-item-card {
+        background-color: hsl(var(--background-step-2));
+        width: 100%;
+        height: 100%;
+        transition: all .15s ease;
+    }
+
+    .totals-grid-item-card:hover {
+        background-color: hsl(var(--background-step-3));
+    }
+
+    .totals-grid-item-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: .5rem;
+    }
+
+    .totals-grid-item {
+        width: 100%;
+    }
+
+    .totals-grid-item-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem;
+    }
+
+    .totals-grid-item-text {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 1rem;
+        gap: .5rem;
+    }
+
+    .totals-grid-item-label {
+        font-size: small;
+        font-weight: 500;
+    }
+</style>

package/dist/components/default-grid-items/utils.d.ts

@@ -0,0 +1,17 @@
+export declare const allowedIdentifiers: string[];
+/**
+ * Checks if a given date is within the last 30 days from the current date.
+ *
+ * @param date - The date to check.
+ * @returns True if the date is within the last 30 days, otherwise false.
+ */
+export declare function withinLast30Days(date: Date): boolean;
+/**
+ * Sorts two dates in ascending or descending order.
+ *
+ * @param a - The first date to compare. Can be null.
+ * @param b - The second date to compare. Can be null.
+ * @param desc - If true, sorts in descending order. Defaults to ascending order.
+ * @returns A negative number if `a` is less than `b`, zero if they are equal, or a positive number if `a` is greater than `b`.
+ */
+export declare function sortByDate(a: Date | null, b: Date | null, desc?: boolean): number;

package/dist/components/default-grid-items/utils.js

@@ -0,0 +1,26 @@
+const allowedIdentifiers = ["studiocms/markdown"];
+function withinLast30Days(date) {
+  const now = /* @__PURE__ */ new Date();
+  const thirtyDaysAgo = new Date(now.setDate(now.getDate() - 30));
+  return date > thirtyDaysAgo;
+}
+function sortByDate(a, b, desc) {
+  if (!a && !b) {
+    return 0;
+  }
+  if (!a) {
+    a = /* @__PURE__ */ new Date(0);
+  }
+  if (!b) {
+    b = /* @__PURE__ */ new Date(0);
+  }
+  if (desc) {
+    return a.getTime() - b.getTime();
+  }
+  return b.getTime() - a.getTime();
+}
+export {
+  allowedIdentifiers,
+  sortByDate,
+  withinLast30Days
+};

package/dist/components/image/CustomImage.astro

@@ -0,0 +1,90 @@
+---
+/// <reference types="astro/client" />
+import { Image } from 'astro:assets';
+import { getSecret } from 'astro:env/server';
+import Config from 'studiocms:config';
+import { Cloudinary } from '@cloudinary/url-gen';
+import { fill } from '@cloudinary/url-gen/actions/resize';
+
+const CMS_CLOUDINARY_CLOUDNAME = getSecret('CMS_CLOUDINARY_CLOUDNAME');
+
+interface Props {
+	src: string;
+	alt: string;
+	width: number;
+	height: number;
+}
+
+/**
+ * Cloudinary Plugin
+ *
+ * This plugin is used to generate Cloudinary URLs for images using `@cloudinary/url-gen` for the StudioCMS `CustomImage` component.
+ *
+ * @param src the image name or URL
+ * @param props the image props
+ * @returns the Cloudinary image URL for the given source and props
+ */
+export function cloudinaryPlugin(src: string, props: Omit<Props, 'src'>) {
+	// Cloudinary Image Service (JavaScript SDK) - https://cloudinary.com/documentation/javascript_integration#landingpage
+
+	// Initialize Cloudinary
+	const cld = new Cloudinary({
+		cloud: {
+			cloudName: CMS_CLOUDINARY_CLOUDNAME || '',
+		},
+	});
+
+	// Configure the image
+	const cldSrc = cld
+		.image(src)
+		.format('auto')
+		.quality('auto')
+		.resize(fill('auto').width(props.width).height(props.height));
+
+	// Set the delivery type to 'fetch' if the image source is an external URL
+	if (src.startsWith('https://') || src.startsWith('http://')) {
+		cldSrc.setDeliveryType('fetch');
+	}
+
+	// Return the Cloudinary image URL
+	return cldSrc.toURL();
+}
+
+const { src, ...props } = Astro.props;
+
+// Get the current configured image service
+const {
+	imageService: { cdnPlugin },
+} = Config;
+
+// Get the current configured image service
+async function getImageSrc() {
+	switch (cdnPlugin) {
+		case 'cloudinary-js':
+			// Return the Cloudinary image source
+			return cloudinaryPlugin(src, props);
+		default:
+			// Return the original image source if no External image service plugin is configured
+			return src;
+	}
+}
+
+// check if the image source is an external URL
+function inferSizeNeeded(url: string) {
+	if (url.startsWith('https://') || url.startsWith('http://')) {
+		return true;
+	}
+	return false;
+}
+
+// Get the current configured image service source URL
+const currentSrcURL = await getImageSrc();
+
+// Set the image properties
+const imageProps = {
+	src: currentSrcURL,
+	inferSize: inferSizeNeeded(currentSrcURL),
+	...props,
+};
+---
+<Image loading={"lazy"} {...imageProps}/>

package/dist/components/user-quick-tools.d.ts

@@ -0,0 +1,42 @@
+interface UserData {
+    id: string;
+    name: string;
+    email: string | null;
+    avatar: string | null;
+    username: string;
+}
+interface Routes {
+    logout: string;
+    userProfile: string;
+    contentManagement: string;
+    dashboardIndex: string;
+}
+type PermissionLevel = 'editor' | 'visitor' | 'admin' | 'owner' | 'unknown';
+interface MenuItem {
+    name: string;
+    svg: string;
+    href: string;
+    permission: PermissionLevel;
+}
+declare const permissionRanksMap: Record<PermissionLevel, string[]>;
+interface GetSessionResponse {
+    isLoggedIn: boolean;
+    user: UserData;
+    permissionLevel: PermissionLevel;
+    routes: Routes;
+}
+/**
+ * Verifies if the user's permission level meets the required permission rank.
+ *
+ * @param userData - The session data of the user, which includes their permission level.
+ * @param requiredPermission - The required permission rank to be verified against the user's permission level.
+ * @returns A promise that resolves to a boolean indicating whether the user's permission level meets the required rank.
+ */
+declare function verifyUserPermissionLevel(permissionLevel: PermissionLevel, requiredPermission: PermissionLevel): boolean;
+declare class UserQuickTools extends HTMLElement {
+    constructor();
+    connectedCallback(): Promise<void>;
+    render(user: UserData, permissionLevel: PermissionLevel, routes: Routes): void;
+    generateMenuItem(menuItem: MenuItem, index: number): HTMLAnchorElement;
+    getSession(): Promise<GetSessionResponse | null>;
+}