studiocms 0.1.0-beta.10

package/dist/routes/firstTimeSetupRoutes/3-done.astro

@@ -0,0 +1,95 @@
+---
+import { Accordion, AccordionItem, Card } from 'studiocms:ui/components';
+import AstroCodeDiffsScript from '../../components/dashboard/AstroCodeDiffsScript.astro';
+import Layout from './components/Layout.astro';
+import PageHeader from './components/PageHeader.astro';
+import codeSnippet1 from './snippets/opt1-astro.config.diff?raw';
+import codeSnippet2 from './snippets/opt2-astro.config.diff?raw';
+import codeSnippet3 from './snippets/opt2-studiocms.config.diff?raw';
+
+import Code from '../../components/dashboard/Code.astro';
+---
+<Layout title="Welcome to StudioCMS">
+
+    <PageHeader title="Welcome to StudioCMS" badge={{ label: 'Done' }} />
+
+    <Card class='card' style="background-color: hsl(var(--background-step-1))" fullWidth>
+
+        <div slot="header">
+            <h2>Finish Onboarding</h2>
+        </div>
+
+        <div>
+            You're almost done! You can now start using StudioCMS after changing the following config option. If you have any questions, please reach out to us on our <a href="https://chat.studiocms.dev" target="_blank">Discord</a> server.
+        </div>
+        <br />
+
+        <Accordion>
+            <AccordionItem>
+                <div slot="summary">Using StudioCMS with just the <code>astro.config.mjs</code></div>
+                 <Code code={codeSnippet1} ins='11' />
+            </AccordionItem>
+            <AccordionItem>
+                <div slot="summary">Using StudioCMS with the <code>studiocms.config.mjs</code></div>
+
+                <span>astro.config.mjs</span>
+                <Code code={codeSnippet2} />
+
+                <span>studiocms.config.mjs</span>
+                <Code ins="4" code={codeSnippet3} />
+            </AccordionItem>
+        </Accordion>
+
+    </Card>
+
+    <style>
+        .form-content {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+    
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+    
+        .login-preview-container {
+            width: min-content;
+            height: min-content;
+        }
+    
+        @media screen and (max-width: 768px) {
+            .form-row {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .card {
+            margin-left: 20%;
+            margin-right: 20%;
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        @media screen and (max-width: 768px) {
+            .card {
+                margin-left: 0;
+                margin-right: 0;
+                width: 100%;
+            }
+        }
+
+        .card-actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: 1rem;
+        }
+    </style>
+
+    <AstroCodeDiffsScript />
+
+</Layout>

package/dist/routes/firstTimeSetupRoutes/api/step-1.d.ts

@@ -0,0 +1,2 @@
+import type { APIRoute } from 'astro';
+export declare const POST: APIRoute;

package/dist/routes/firstTimeSetupRoutes/api/step-1.js

@@ -0,0 +1,126 @@
+import studioCMS_SDK from "studiocms:sdk";
+const HERO_IMAGE = "https://images.unsplash.com/photo-1707343843982-f8275f3994c5?q=80&w=1032&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
+const LOREM_IPSUM = "## Hello World \nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+const POST = async (context) => {
+  const reqData = await context.request.json();
+  const {
+    title,
+    description,
+    defaultOgImage,
+    siteIcon,
+    enableDiffs,
+    diffPerPage,
+    loginPageBackground,
+    loginPageCustomImage
+  } = reqData;
+  const DefaultHeroOrUserSetOgImage = defaultOgImage || HERO_IMAGE;
+  if (!title) {
+    return new Response(
+      JSON.stringify({
+        error: "Title is required"
+      }),
+      {
+        status: 400
+      }
+    );
+  }
+  if (!description) {
+    return new Response(
+      JSON.stringify({
+        error: "Description is required"
+      }),
+      {
+        status: 400
+      }
+    );
+  }
+  if (loginPageBackground === "custom") {
+    if (!loginPageCustomImage) {
+      return new Response(
+        JSON.stringify({
+          error: 'Custom login page image is required if "custom" login page background is set'
+        }),
+        {
+          status: 400
+        }
+      );
+    }
+  }
+  const Config = await studioCMS_SDK.GET.database.config();
+  if (Config) {
+    return new Response(
+      JSON.stringify({
+        error: "Config already exists, please delete the existing config to run setup again. Or create a new database."
+      }),
+      {
+        status: 400
+      }
+    );
+  }
+  await studioCMS_SDK.INIT.siteConfig({
+    title,
+    description,
+    defaultOgImage,
+    diffPerPage,
+    enableDiffs,
+    loginPageBackground,
+    loginPageCustomImage,
+    siteIcon
+  }).catch(() => {
+    return new Response(
+      JSON.stringify({
+        error: "Config insert error"
+      }),
+      {
+        status: 400
+      }
+    );
+  });
+  await studioCMS_SDK.INIT.ghostUser().catch(() => {
+    return new Response(
+      JSON.stringify({
+        error: "Default Ghost user insert error"
+      }),
+      {
+        status: 400
+      }
+    );
+  });
+  await studioCMS_SDK.POST.databaseEntries.pages([
+    {
+      pageData: {
+        title: "Home",
+        slug: "index",
+        showOnNav: true,
+        contentLang: "default",
+        description: "Index page",
+        heroImage: DefaultHeroOrUserSetOgImage,
+        authorId: null,
+        package: "studiocms/markdown",
+        publishedAt: /* @__PURE__ */ new Date(),
+        showAuthor: false,
+        showContributors: false,
+        updatedAt: /* @__PURE__ */ new Date()
+      },
+      pageContent: {
+        content: LOREM_IPSUM,
+        contentLang: "default"
+      }
+    }
+  ]).catch(() => {
+    return new Response(
+      JSON.stringify({
+        error: "Default pages insert error"
+      }),
+      {
+        status: 400
+      }
+    );
+  });
+  return new Response(JSON.stringify({ message: "Success" }), {
+    status: 200
+  });
+};
+export {
+  POST
+};

package/dist/routes/firstTimeSetupRoutes/api/step-2.d.ts

@@ -0,0 +1,2 @@
+import type { APIRoute } from 'astro';
+export declare const POST: APIRoute;

package/dist/routes/firstTimeSetupRoutes/api/step-2.js

@@ -0,0 +1,110 @@
+import { verifyPasswordStrength } from "studiocms:auth/lib/password";
+import { createLocalUser, verifyUsernameInput } from "studiocms:auth/lib/user";
+import studioCMS_SDK from "studiocms:sdk";
+import { z } from "astro/zod";
+const POST = async (context) => {
+  const reqData = await context.request.json();
+  const { username, displayname, email, password, confirmPassword } = reqData;
+  if (!username) {
+    return new Response(
+      JSON.stringify({
+        error: "Username is required"
+      }),
+      {
+        status: 400
+      }
+    );
+  }
+  if (!displayname) {
+    return new Response(
+      JSON.stringify({
+        error: "Display name is required"
+      }),
+      {
+        status: 400
+      }
+    );
+  }
+  if (!email) {
+    return new Response(
+      JSON.stringify({
+        error: "Email is required"
+      }),
+      {
+        status: 400
+      }
+    );
+  }
+  if (!password) {
+    return new Response(
+      JSON.stringify({
+        error: "Password is required"
+      }),
+      {
+        status: 400
+      }
+    );
+  }
+  if (!confirmPassword) {
+    return new Response(
+      JSON.stringify({
+        error: "Confirm password is required"
+      }),
+      {
+        status: 400
+      }
+    );
+  }
+  if (password !== confirmPassword) {
+    return new Response(
+      JSON.stringify({
+        error: "Passwords do not match"
+      }),
+      {
+        status: 400
+      }
+    );
+  }
+  if (verifyUsernameInput(username) !== true) {
+    return new Response(
+      JSON.stringify({
+        error: "Invalid username: Username must be between 3 and 20 characters, only contain lowercase letters, numbers, -, and _ as well as not be a commonly used username (admin, root, etc.)"
+      }),
+      {
+        status: 400
+      }
+    );
+  }
+  if (await verifyPasswordStrength(password) !== true) {
+    return new Response(
+      JSON.stringify({
+        error: 'Invalid password: Password must be between 6 and 255 characters, and not be in the <a href="https://haveibeenpwned.com/Passwords" target="_blank">pwned password database</a>.'
+      }),
+      {
+        status: 400
+      }
+    );
+  }
+  const checkEmail = z.coerce.string().email({ message: "Email address is invalid" }).safeParse(email);
+  if (!checkEmail.success) {
+    return new Response(
+      JSON.stringify({
+        error: checkEmail.error.message
+      }),
+      {
+        status: 400
+      }
+    );
+  }
+  const newUser = await createLocalUser(displayname, username, email, password);
+  await studioCMS_SDK.UPDATE.permissions({
+    user: newUser.id,
+    rank: "owner"
+  });
+  return new Response(JSON.stringify({ message: "Success" }), {
+    status: 200
+  });
+};
+export {
+  POST
+};

package/dist/routes/firstTimeSetupRoutes/components/Layout.astro

@@ -0,0 +1,41 @@
+---
+import { Toaster } from 'studiocms:ui/components';
+import BaseHead from '../../../components/dashboard/BaseHead.astro';
+
+type Props = {
+	title?: string;
+	description?: string;
+	lang?: string;
+};
+
+const {
+	title = 'StudioCMS Setup',
+	description = 'StudioCMS Onboarding',
+	lang = 'en-us',
+} = Astro.props;
+---
+
+<!DOCTYPE html>
+<html {lang}>
+  <BaseHead {title} {description} />
+  <body>
+    <Toaster />
+    <main>
+      <div class="container">
+        <slot />
+      </div>
+    </main>
+    <style>
+      .container {
+        margin: 0 auto;
+        padding: 0 1rem;
+        padding-top: 2rem;
+
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        width: 100%;
+      }
+    </style>
+  </body>
+</html>

package/dist/routes/firstTimeSetupRoutes/components/PageHeader.astro

@@ -0,0 +1,60 @@
+---
+import { Badge, type HeroIconName } from 'studiocms:ui/components';
+
+interface Props {
+	title: string;
+	badge?: {
+		label: string;
+		icon?: HeroIconName;
+	};
+}
+
+const { title, badge } = Astro.props;
+---
+<header class="page-header">
+  <div class="page-title-container">
+    <h1 class="page-title">{title}</h1>
+    { badge && <Badge label={badge.label} size="lg" /> }
+  </div>
+  <div class="page-actions-container">
+    <slot />
+  </div>
+</header>
+<style>
+.page-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  width: 100%;
+  margin-left: 20%;
+
+  & .page-title-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: .5rem;
+    width: fit-content;
+
+    & .page-title {
+      display: flex;
+      margin: 0;
+      font-size: 3rem;
+    }
+  }
+
+  & .page-actions-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .page-header {
+    margin-left: 0;
+  }
+}
+</style>

package/dist/routes/firstTimeSetupRoutes/components/TabItem.astro

@@ -0,0 +1,44 @@
+---
+import { generateID } from '@studiocms/ui/utils/generateID.js';
+
+/**
+ * The props for the TabItem component.
+ */
+interface Props {
+	/**
+	 * The icon to display next to the tab.
+	 */
+	icon?: string;
+	/**
+	 * The label of the tab.
+	 */
+	label: string;
+	/**
+	 * The color of the tab. Defaults to `primary`.
+	 */
+	color?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'mono';
+}
+
+const id = generateID('tab');
+
+const { icon, label, color = 'primary' } = Astro.props;
+---
+<sui-tab-item 
+  data-icon={icon}
+  data-label={label}
+  data-color={color}
+  data-tab-id={id}
+>
+  <slot />
+</sui-tab-item>
+<style>
+  sui-tab-item {
+    display: none;
+    width: 100%;
+    height: auto;
+  }
+
+  sui-tab-item.active {
+    display: block;
+  }
+</style>

package/dist/routes/firstTimeSetupRoutes/components/Tabs.astro

@@ -0,0 +1,170 @@
+---
+import { IconBase } from 'studiocms:ui/components';
+import { icons as flatColorIcons } from '@iconify-json/flat-color-icons';
+import { icons as simpleIcons } from '@iconify-json/simple-icons';
+import { generateID } from '@studiocms/ui/utils/generateID.js';
+import '@studiocms/ui/components/Tabs/tabs.css';
+
+interface Tab {
+	icon?: string;
+	label: string;
+	color: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'mono';
+	tabId: string;
+}
+
+/**
+ * The props for the Tabs component.
+ */
+interface Props {
+	/**
+	 * The sync key for the tabs. If provided, the active tab will be synced across all instances of the tabs with the same sync key.
+	 * Additionally, the active tab will be stored session- or local storage depending on the `storage` prop.
+	 */
+	syncKey?: string;
+	/**
+	 * The storage type for the tabs. Defaults to `session`.
+	 */
+	storage?: 'session' | 'persistent';
+	/**
+	 * The variant of the tabs. Defaults to `default`.
+	 */
+	variant?: 'default' | 'starlight';
+	/**
+	 * The alignment of the tabs. Defaults to `left`.
+	 */
+	align?: 'left' | 'center' | 'right';
+}
+
+const extractTabInfoWithRegex = (input: string) => {
+	const tabItemRegex = /<sui-tab-item([^>]*)>/g;
+
+	const attributeRegex = /data-([\w-]+)="([^"]*)"/g;
+
+	const tabs: Tab[] = [];
+	let tabMatch: RegExpExecArray | null;
+
+	// biome-ignore lint/suspicious/noAssignInExpressions: Nop
+	while ((tabMatch = tabItemRegex.exec(input)) !== null) {
+		let attributes: { [key: string]: string } = {};
+
+		let attributeMatch: RegExpExecArray | null;
+
+		if (!tabMatch[1]) continue;
+
+		// biome-ignore lint/suspicious/noAssignInExpressions: Nop
+		while ((attributeMatch = attributeRegex.exec(tabMatch[1])) !== null) {
+			if (!attributeMatch[1] || !attributeMatch[2]) continue;
+
+			if (
+				attributeMatch[1] === 'icon' ||
+				attributeMatch[1] === 'label' ||
+				attributeMatch[1] === 'color'
+			) {
+				attributes[attributeMatch[1]] = attributeMatch[2];
+			}
+
+			if (attributeMatch[1] === 'tab-id') {
+				attributes.tabId = attributeMatch[2];
+			}
+		}
+
+		tabs.push(attributes as unknown as Tab);
+	}
+
+	return tabs;
+};
+
+const markTabAsActive = (tabId: string, html: string): string => {
+	if (!tabId) return html;
+
+	const updatedHtml = html.replace(
+		/<sui-tab-item[^>]*data-tab-id="([^"]*)"[^>]*>/g,
+		(match, tabIdValue) => {
+			// Check if the tabId matches
+			if (tabIdValue === tabId) {
+				// Check if the element already has a class attribute
+				if (match.includes('class="')) {
+					// If class attribute exists, add 'active' to the class attribute
+					return match.replace(/(class="[^"]*)"/, '$1 active"');
+				}
+
+				// If class attribute does not exist, add it
+				return match.replace(/(<sui-tab-item[^>]*data-tab-id="[^"]*")/, '$1 class="active"');
+			}
+			return match; // Return original if the tabId does not match
+		}
+	);
+
+	return updatedHtml;
+};
+
+const uniqueId = generateID('sui-tabs-container');
+
+const {
+	syncKey: originalSyncKey,
+	storage = 'session',
+	variant = 'default',
+	align = 'left',
+} = Astro.props;
+
+const syncKey = originalSyncKey ? `sui-tabs-${originalSyncKey}` : undefined;
+
+const tabContents = await Astro.slots.render('default');
+const tabs = extractTabInfoWithRegex(tabContents);
+const finalizedTabContents = markTabAsActive(tabs[0]?.tabId || '', tabContents);
+const containerId = generateID('sui-tabs-container');
+
+const selectCollection = (icon: string) => {
+	if (icon.startsWith('flat-color-icons:')) {
+		return flatColorIcons;
+	}
+	if (icon.startsWith('simple-icons:')) {
+		return simpleIcons;
+	}
+	return simpleIcons;
+};
+
+const selectIcon = (icon: string) => {
+	if (icon.startsWith('flat-color-icons:')) {
+		return icon.replace('flat-color-icons:', '');
+	}
+	if (icon.startsWith('simple-icons:')) {
+		return icon.replace('simple-icons:', '');
+	}
+	return icon;
+};
+---
+
+<div 
+  class="sui-tabs-container"
+  id={containerId}
+  data-sync-key={syncKey}
+  data-unique-id={uniqueId}
+  data-storage-strategy={storage}
+  class:list={[variant, align]}
+>
+  <div class="sui-tabs-list" role="tablist">
+    {tabs.map((tab, i) => (
+      <button 
+        role="tab"
+		type="button"
+        class="sui-tab-header"
+        id={syncKey ? `${syncKey}-${i}` : undefined}
+        tabindex={i === 0 ? 0 : -1}
+        data-tab-child={tab.tabId}
+        class:list={[i === 0 && "active", tab.color, syncKey && `${syncKey}:${i}`]}
+      >
+        {tab.icon && (
+          <IconBase iconCollection={selectCollection(tab.icon)} name={selectIcon(tab.icon)} width={24} height={24} />
+        )}
+        <span>{tab.label}</span>
+      </button>
+    ))}
+  </div>
+  <div class="sui-tabs-content">
+    <Fragment set:html={finalizedTabContents} />
+  </div>
+</div>
+<script>
+import "studiocms:ui/scripts/tabs"
+</script>

package/dist/routes/firstTimeSetupRoutes/snippets/opt1-astro.config.diff

@@ -0,0 +1,14 @@
+import db from '@astrojs/db';
+import { defineConfig } from 'astro/config';
+import studioCMS from 'studiocms';
+
+// https://astro.build/config
+export default defineConfig({
+	// other config options,
+	integrations: [
+		db(),
+		studioCMS({
+			dbStartPage: false,
+		}),
+	],
+});

package/dist/routes/firstTimeSetupRoutes/snippets/opt2-astro.config.diff

@@ -0,0 +1,9 @@
+import db from '@astrojs/db';
+import { defineConfig } from 'astro/config';
+import studioCMS from 'studiocms';
+
+// https://astro.build/config
+export default defineConfig({
+	// other config options,
+	integrations: [db(), studioCMS()],
+});

package/dist/routes/firstTimeSetupRoutes/snippets/opt2-studiocms.config.diff

@@ -0,0 +1,5 @@
+import { defineStudioCMSConfig } from 'studiocms/config';
+
+export default defineStudioCMSConfig({
+	dbStartPage: false,
+});