studiocms 0.1.0-beta.7 → 0.1.0-beta.8

package/dist/routes/firstTimeSetupRoutes/1-start.astro

@@ -0,0 +1,253 @@
+---
+import { validImages } from 'studiocms:auth/utils/validImages';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import {
+	Accordion,
+	AccordionItem,
+	Button,
+	Card,
+	Divider,
+	Input,
+	Select,
+} from 'studiocms:ui/components';
+import LightVsDark from '../../components/dashboard/islands/configuration/LightVsDark.astro';
+import Layout from './components/Layout.astro';
+import PageHeader from './components/PageHeader.astro';
+
+const ogSelectOptions = validImages.map(({ label, name: value }) => ({ label, value }));
+
+const blobs = validImages.filter(({ name }) => name === 'studiocms-blobs')[0];
+const blocks = validImages.filter(({ name }) => name === 'studiocms-blocks')[0];
+const curves = validImages.filter(({ name }) => name === 'studiocms-curves')[0];
+---
+<Layout title="Welcome to StudioCMS">
+
+    <PageHeader title="Welcome to StudioCMS" badge={{ label: 'Step 1' }} />
+
+    <Card class='card' style="background-color: hsl(var(--background-step-1))" fullWidth>
+
+        <div slot="header">
+            <h2>Basic Site Information</h2>
+        </div>
+
+        <form id="setup-step-one" action={StudioCMSRoutes.fts.step1}>
+            <div class="form-content">
+
+                <div class="form-row">
+                    <Input label='Site Title' name='site-title' placeholder='My Awesome Website' isRequired />
+                    <Input label='Site Description' name='site-description' placeholder='Built with StudioCMS!' isRequired />
+                </div>
+        
+                <div class="form-row">
+                    <Input label="Default Open Graph Image" name="default-og-image" placeholder="'https://...' for local, or '/...' for public/ folder" />
+                    <Input label="Site Icon (Public facing Favicon)" name="site-icon" placeholder="'https://...' for local, or '/...' for public/ folder" />
+                </div>
+        
+                <div class="form-row">
+                    <Select label="Page Diff Tracking" name="diff-enabled" options={[{ label: 'Enabled', value: 'true' }, { label: 'Disabled', value: 'false' }]} fullWidth />
+                    <Input label="Page Diff Tracking Limit (per page)" name="diff-per-page" placeholder="10" />
+                </div>
+        
+                <Divider />
+        
+                <div class="form-row">
+                    <Select label='Login Page Background Image' name='login-page-background' defaultValue={'studiocms-curves'} options={ogSelectOptions} fullWidth />
+                    <Input label="Login Page Background Image (Custom)" name="login-page-background-custom" placeholder="'https://...' for local, or '/...' for public/ folder" />
+                </div>
+
+                
+                <Accordion>
+                    <AccordionItem>
+                        <div slot="summary">Login Page Preview</div>
+
+                        <Card class="login-preview-container">
+                            <div slot="header">
+                                <span>Login Page Preview (Dark/Light)</span>
+                            </div>
+                            <LightVsDark light={curves.light!} dark={curves.dark!} />
+                        </Card>
+                    </AccordionItem>
+                </Accordion>
+
+            </div>
+        </form>
+
+        <div slot="footer">
+            <div class="card-actions">
+                <Button type="submit" form="setup-step-one" color="primary">Continue</Button> 
+            </div>
+        </div>
+
+    </Card>
+
+    <script>
+        import { toast } from 'studiocms:ui/components';
+
+        const form = document.querySelector('#setup-step-one') as HTMLFormElement;
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const formData = new FormData(form);
+
+            const data = {
+                title: formData.get('site-title') as string,
+                description: formData.get('site-description') as string,
+                defaultOgImage: formData.get('default-og-image') as string,
+                siteIcon: formData.get('site-icon') as string,
+                enableDiffs: formData.get('diff-enabled') as string,
+                diffPerPage: formData.get('diff-per-page') as string,
+                loginPageBackground: formData.get('login-page-background') as string,
+                loginPageBackgroundCustom: formData.get('login-page-background-custom') as string,
+            }
+
+            const response = await fetch(form.action, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            })
+
+            const res = await response.json();
+
+            if (response.status === 200) {
+                toast({
+                    title: 'Success',
+                    description: 'Basic site information saved successfully!',
+                    type: 'success',
+                })
+                window.location.assign('/setup/2');
+            }
+
+            if (response.status !== 200) {
+                toast({
+                    title: 'Error',
+                    description: res.error,
+                    type: 'danger',
+                })
+            }
+        })
+    </script>
+
+    <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%;
+        }
+
+        @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>
+
+    <div id="login-page-bgs"
+        data-blobs-light={blobs?.light?.src} data-blobs-dark={blobs?.dark?.src}
+        data-blocks-light={blocks?.light?.src} data-blocks-dark={blocks?.dark?.src}
+        data-curves-light={curves?.light?.src} data-curves-dark={curves?.dark?.src}
+    ></div>
+
+    <script is:inline>
+    async function setupLoginPreview() {
+        // Selectors
+        const loginPageBgSelectOptions = document.querySelector('#login-page-background-dropdown').querySelectorAll('.sui-select-option');
+        const customInput = document.querySelector('input[name="login-page-background-custom"]');
+        const customInputLabel = document.querySelector('label[for="login-page-background-custom"]');
+        const previewContainer = document.querySelector('.login-preview-container');
+        const lightImageHolder = document.querySelector('.light-image-holder');
+        const darkImageHolder = document.querySelector('.dark-image-holder');
+
+        // Backgrounds
+        const loginPageBgs = document.querySelector('#login-page-bgs');
+
+        const blobs = {
+            light: loginPageBgs.getAttribute('data-blobs-light'),
+            dark: loginPageBgs.getAttribute('data-blobs-dark'),
+        }
+
+        const blocks = {
+            light: loginPageBgs.getAttribute('data-blocks-light'),
+            dark: loginPageBgs.getAttribute('data-blocks-dark'),
+        }
+
+        const curves = {
+            light: loginPageBgs.getAttribute('data-curves-light'),
+            dark: loginPageBgs.getAttribute('data-curves-dark'),
+        }
+
+        // Event Listeners
+        loginPageBgSelectOptions.forEach((option) => {
+            option.addEventListener('click', () => {
+                const selectedValue = option.getAttribute('value');
+
+                if (selectedValue === 'custom') {
+                    customInput.removeAttribute('disabled');
+                    customInputLabel.classList.remove('disabled');
+                } else {
+                    customInput.setAttribute('disabled', 'disabled');
+                    customInputLabel.classList.add('disabled');
+                }
+
+                if (selectedValue === 'custom') {
+                    previewContainer.style.display = 'none';
+                } else {
+                    previewContainer.style.display = 'block';
+
+                    if (selectedValue === 'studiocms-blobs') {
+                        lightImageHolder.src = blobs.light;
+                        darkImageHolder.src = blobs.dark;
+                    }
+
+                    if (selectedValue === 'studiocms-blocks') {
+                        lightImageHolder.src = blocks.light;
+                        darkImageHolder.src = blocks.dark;
+                    }
+
+                    if (selectedValue === 'studiocms-curves') {
+                        lightImageHolder.src = curves.light;
+                        darkImageHolder.src = curves.dark;
+                    }
+
+                }
+            });
+        });
+    }
+
+    setupLoginPreview();
+    </script>
+
+</Layout>

package/dist/routes/firstTimeSetupRoutes/2-next.astro

@@ -0,0 +1,208 @@
+---
+import { authEnvCheck } from 'studiocms:auth/utils/authEnvCheck';
+import { AuthConfig } from 'studiocms:config';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import { Button, Card, Center, Input } from 'studiocms:ui/components';
+import Layout from './components/Layout.astro';
+import PageHeader from './components/PageHeader.astro';
+import TabItem from './components/TabItem.astro';
+import Tabs from './components/Tabs.astro';
+
+const { providers } = AuthConfig;
+
+const { SHOW_OAUTH, AUTH0, DISCORD, GITHUB, GOOGLE } = await authEnvCheck(providers);
+
+const githubEnabled = GITHUB.ENABLED && providers.github;
+const discordEnabled = DISCORD.ENABLED && providers.discord;
+const googleEnabled = GOOGLE.ENABLED && providers.google;
+const auth0Enabled = AUTH0.ENABLED && providers.auth0;
+---
+<Layout title="Welcome to StudioCMS">
+
+    <PageHeader title="Welcome to StudioCMS" badge={{ label: 'Step 2' }} />
+
+    <Card class='card' style="background-color: hsl(var(--background-step-1))" fullWidth>
+
+        <div slot="header">
+            <h2>Create an Administrator</h2>
+        </div>
+
+        <Tabs variant='starlight'>
+            <TabItem label='Username and Password'>
+                <form id="setup-step-two" action={StudioCMSRoutes.fts.step2}>
+                    <div class="form-content">
+                        
+                        <Input 
+                            label='Username' 
+                            name='username' 
+                            placeholder='john' 
+                            isRequired 
+                            />
+                        
+                        <Input 
+                            label='Display Name' 
+                            name='displayname' 
+                            placeholder='John Doe' 
+                            isRequired 
+                            />
+                        
+                        <Input 
+                            label='Email' 
+                            name='email' 
+                            placeholder='john@doe.com' 
+                            isRequired 
+                            />
+
+                        <Input 
+                            label='Password' 
+                            name='password' 
+                            placeholder='password' 
+                            type="password" 
+                            isRequired 
+                            />
+
+                        <Input 
+                            label='Confirm Password' 
+                            name='confirm-password' 
+                            placeholder='password' 
+                            type="password" 
+                            isRequired 
+                            />
+
+                    </div>
+                </form>
+            </TabItem>
+
+            {
+                SHOW_OAUTH && githubEnabled && (
+                    <TabItem label='GitHub' icon="simple-icons:github">
+                        <Center><Button color="primary" as="a" href={StudioCMSRoutes.authLinks.githubIndex}>Connect to GitHub</Button></Center>
+                    </TabItem>
+                )
+            }
+            {
+                SHOW_OAUTH && discordEnabled && (
+                    <TabItem label='Discord' icon="simple-icons:discord">
+                        <Center><Button color="primary" as="a" href={StudioCMSRoutes.authLinks.discordIndex}>Connect to Discord</Button></Center>
+                    </TabItem>
+                )
+            }
+            {
+                SHOW_OAUTH && googleEnabled && (
+                    <TabItem label='Google' icon="flat-color-icons:google">
+                        <Center><Button color="primary" as="a" href={StudioCMSRoutes.authLinks.googleIndex}>Connect to Google</Button></Center>
+                    </TabItem>
+                )
+            }
+            {
+                SHOW_OAUTH && auth0Enabled && (
+                    <TabItem label='Auth0' icon="simple-icons:auth0">
+                        <Center><Button color="primary" as="a" href={StudioCMSRoutes.authLinks.auth0Index}>Connect to Auth0</Button></Center>
+                    </TabItem>
+                )
+            }
+
+        </Tabs>
+
+        <div slot="footer">
+            <div class="card-actions">
+                <Button type="submit" form="setup-step-two" color="primary">Continue</Button> 
+            </div>
+        </div>
+
+    </Card>
+
+    <script>
+        import { toast } from 'studiocms:ui/components';
+
+        const form = document.querySelector('#setup-step-two') as HTMLFormElement;
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const formData = new FormData(form);
+
+            const data = {
+                username: formData.get('username') as string,
+                displayname: formData.get('displayname') as string,
+                email: formData.get('email') as string,
+                password: formData.get('password') as string,
+                confirmPassword: formData.get('confirm-password') as string,
+            }
+
+            if (data.password !== data.confirmPassword) {
+                toast({
+                    title: 'Passwords do not match',
+                    description: 'Please make sure the passwords match',
+                    type: 'danger'
+                });
+                return;
+            }
+
+            const response = await fetch(form.action, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            });
+
+            if (response.ok) {
+                window.location.assign('/done');
+            } else {
+                const error = await response.json();
+                toast({
+                    title: 'Error',
+                    description: error.error,
+                    type: 'danger',
+                });
+            }
+        });
+    </script>
+
+    <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%;
+        }
+
+        @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>
+
+</Layout>

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;