studiocms 0.1.0-beta.10

package/dist/components/DefaultEditor.astro

@@ -0,0 +1,138 @@
+---
+interface Props {
+	content?: string;
+}
+
+const { content } = Astro.props;
+---
+<div id="editor-toolbar"></div>
+<div class="editor-container">
+    <textarea id="page-content" name="page-content">{content}</textarea>
+</div>
+<script>
+    function listener() {
+    const pageContentTextarea = document.querySelector('#page-content');
+    const editorToolbar = document.querySelector('#editor-toolbar');
+    // Setup the TinyMDE editor
+    // See https://github.com/jefago/tiny-markdown-editor/tree/main for more details
+    // @ts-expect-error - Added TinyMDE to the window object
+    var tinyMDE = new TinyMDE.Editor({ textarea: pageContentTextarea });
+    // @ts-expect-error - Added TinyMDE to the window object
+    var commandBar = new TinyMDE.CommandBar({
+        element: editorToolbar,
+        editor: tinyMDE,
+        commands: [
+            {
+                name: 'bold',
+                action: 'bold',
+                innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18px" height="18px" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linejoin="round" d="M6.75 3.744h-.753v8.25h7.125a4.125 4.125 0 0 0 0-8.25H6.75Zm0 0v.38m0 16.122h6.747a4.5 4.5 0 0 0 0-9.001h-7.5v9h.753Zm0 0v-.37m0-15.751h6a3.75 3.75 0 1 1 0 7.5h-6m0-7.5v7.5m0 0v8.25m0-8.25h6.375a4.125 4.125 0 0 1 0 8.25H6.75m.747-15.38h4.875a3.375 3.375 0 0 1 0 6.75H7.497v-6.75Zm0 7.5h5.25a3.75 3.75 0 0 1 0 7.5h-5.25v-7.5Z" /> </svg> ',
+                title: 'Bold',
+                hotkey: 'Mod-B',
+            }, 
+            {
+                name: 'italic',
+                action: 'italic',
+                innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18px" height="18px" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M5.248 20.246H9.05m0 0h3.696m-3.696 0 5.893-16.502m0 0h-3.697m3.697 0h3.803" /> </svg> ',
+                title: 'Italic',
+                hotkey: 'Mod-I',
+            }, 
+            {
+                name: 'strikethrough',
+                action: 'strikethrough',
+                innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18px" height="18px" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 12a8.912 8.912 0 0 1-.318-.079c-1.585-.424-2.904-1.247-3.76-2.236-.873-1.009-1.265-2.19-.968-3.301.59-2.2 3.663-3.29 6.863-2.432A8.186 8.186 0 0 1 16.5 5.21M6.42 17.81c.857.99 2.176 1.812 3.761 2.237 3.2.858 6.274-.23 6.863-2.431.233-.868.044-1.779-.465-2.617M3.75 12h16.5" /> </svg> ',
+                title: 'Strikethrough',
+                hotkey: 'Mod2-Shift-5',
+            }, 
+            {
+                name: 'h1',
+                action: 'h1',
+                innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18px" height="18px" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501m4.501-8.627 2.25-1.5v10.126m0 0h-2.25m2.25 0h2.25" /> </svg> ',
+                title: 'Level 1 heading',
+                hotkey: 'Mod-Shift-1',
+            },
+            {
+                name: 'h2',
+                action: 'h2',
+                innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18px" height="18px" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 19.5H16.5v-1.609a2.25 2.25 0 0 1 1.244-2.012l2.89-1.445c.651-.326 1.116-.955 1.116-1.683 0-.498-.04-.987-.118-1.463-.135-.825-.835-1.422-1.668-1.489a15.202 15.202 0 0 0-3.464.12M2.243 4.492v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" /> </svg> ',
+                title: 'Level 2 heading',
+                hotkey: 'Mod-Shift-2',
+            },
+            {
+                name: 'h3',
+                action: 'h3',
+                innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18px" height="18px" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.905 14.626a4.52 4.52 0 0 1 .738 3.603c-.154.695-.794 1.143-1.504 1.208a15.194 15.194 0 0 1-3.639-.104m4.405-4.707a4.52 4.52 0 0 0 .738-3.603c-.154-.696-.794-1.144-1.504-1.209a15.19 15.19 0 0 0-3.639.104m4.405 4.708H18M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" /> </svg> ',
+                title: 'Level 3 heading',
+            },
+            '|', 
+            {
+                name: 'ul',
+                action: 'ul',
+                innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18px" height="18px" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /> </svg> ',
+                title: 'Bulleted list',
+            },
+            {
+                name: 'ol',
+                action: 'ol',
+                innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18px" height="18px" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99" /> </svg> ',
+                title: 'Numbered list',
+            }, 
+            '|', 
+            'blockquote',
+            {
+                name: 'code',
+                action: 'code',
+                innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18px" height="18px" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" /> </svg> ',
+                title: 'Format as code',
+            },
+            '|', 
+            {
+                name: 'insertLink',
+                // @ts-expect-error - Added TinyMDE to the window object
+                action: (editor) => {if (editor.isInlineFormattingAllowed()) editor.wrapSelection('[', ']()')},
+                // @ts-expect-error - Added TinyMDE to the window object
+                enabled: (editor, focus, anchor) => editor.isInlineFormattingAllowed(focus, anchor) ? false : null,
+                innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18px" height="18px" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" /> </svg> ',
+                title: 'Insert link',
+                hotkey: 'Mod-K',
+            }, 
+            {
+                name: 'insertImage',
+                // @ts-expect-error - Added TinyMDE to the window object
+                action: (editor) => {if (editor.isInlineFormattingAllowed()) editor.wrapSelection('![', ']()')},
+                // @ts-expect-error - Added TinyMDE to the window object
+                enabled: (editor, focus, anchor) => editor.isInlineFormattingAllowed(focus, anchor) ? false : null,
+                innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18px" height="18px" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /> </svg> ',
+                title: 'Insert image',
+                hotkey: 'Mod2-Shift-I',
+            },
+        ]
+    });
+
+    // @ts-expect-error - Added TinyMDE to the window object
+    tinyMDE.addEventListener('change', e => { 
+        pageContentTextarea!.textContent = e.content; 
+    });
+
+    // @ts-expect-error - Added TinyMDE to the window object
+    tinyMDE.addEventListener("drop", function (event) {
+        let formData = new FormData();
+
+        // You can add use event.dataTransfer.items or event.dataTransfer.files
+        // to build the form data object:
+        for (let i = 0; i < event.dataTransfer.items.length; i++) {
+            if (event.dataTransfer.items[i].kind === "file") {
+            let file = event.dataTransfer.items[i].getAsFile();
+            formData.append("image", file);
+            }
+        }
+
+        // Call your API endpoint that accepts "Content-Type": "multipart/form-data"
+        // requests and responds with the image names and URL-s.
+        //
+        // Now you can add Markdown images like so:
+        // editor.paste(`![${imageName}](${imageUrl})`);
+        alert("Image upload coming soon!");
+    });
+    }
+    listener();
+</script>

package/dist/components/FormattedDate.astro

@@ -0,0 +1,12 @@
+---
+import config from 'studiocms:config';
+
+interface Props {
+	date: Date;
+}
+
+const datetime = Astro.props.date.toISOString();
+const formattedDate = Astro.props.date.toLocaleDateString(config.dateLocale, config.dateTimeFormat);
+---
+
+<time {datetime}>{formattedDate}</time>

package/dist/components/Generator.astro

@@ -0,0 +1,7 @@
+---
+import uiVersion from 'studiocms:ui/version';
+import version from 'studiocms:version';
+---
+<meta name="generator" content={Astro.generator} />
+<meta name="generator" content=`StudioCMS v${version}` />
+<meta name="generator" content=`StudioCMS UI v${uiVersion}` />

package/dist/components/Renderer.astro

@@ -0,0 +1,13 @@
+---
+import contentRenderer from 'studiocms:renderer/current';
+
+interface Props {
+	content: string;
+}
+
+const { content } = Astro.props;
+
+// @ts-ignore
+const renderedContent = await contentRenderer(content, $$result);
+---
+<Fragment set:html={renderedContent}></Fragment>

package/dist/components/auth/OAuthButton.astro

@@ -0,0 +1,21 @@
+---
+import { Button } from 'studiocms:ui/components';
+
+interface Props {
+	href: string;
+	label: string;
+	image: string;
+}
+
+const { href, label, image } = Astro.props;
+---
+<Button fullWidth as="a" href={href} variant="solid" size="lg">
+    <Fragment set:html={image} />
+    <span>{label}</span>
+</Button>
+
+<style>
+    .button {
+        color: var(--text-inverted) !important;
+    }
+</style>

package/dist/components/auth/OAuthButtonStack.astro

@@ -0,0 +1,36 @@
+---
+import { useTranslations } from 'studiocms:i18n';
+import { Divider } from 'studiocms:ui/components';
+import OAuthButton from './OAuthButton.astro';
+import { providerData, showOAuth } from './oAuthButtonProviders.js';
+
+const lang = 'en-us';
+const t = useTranslations(lang, '@studiocms/auth:oauth-stack');
+
+const shouldShowOAuth = showOAuth && providerData.some(({ enabled }) => enabled);
+---
+{ shouldShowOAuth && ( 
+	<Divider>
+		<t-comp-oauth key="or-login-with">{t('or-login-with')}</t-comp-oauth>
+	</Divider>
+    <div class="button-stack">
+	{
+		providerData.map(({enabled, ...props}) => enabled && <OAuthButton {...props} />)
+	}
+    </div>
+)}
+<script>
+	import { 
+		$i18n,
+		baseTranslation,
+		makeTranslation,
+	} from 'studiocms:i18n/client';
+
+	const currentPage = '@studiocms/auth:oauth-stack';
+
+	const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+
+	if (!customElements.get('t-comp-oauth')) {
+		customElements.define('t-comp-oauth', makeTranslation(currentPage, i18n));
+	}
+</script>

package/dist/components/auth/StaticAuthCheck.astro

@@ -0,0 +1,20 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+import { StudioCMSRoutes } from 'studiocms:lib';
+
+const { isLoggedIn } = await getUserData(Astro);
+---
+<div 
+  id="login-check" 
+  style="display: none;" 
+  data-is_logged_in={`${isLoggedIn}`}
+  data-redirect_route={StudioCMSRoutes.mainLinks.dashboardIndex}
+  ></div>
+
+<script is:inline>
+  const loginCheck = document.getElementById('login-check');
+
+  if (loginCheck.dataset.is_logged_in === 'true') {
+    window.location.href = loginCheck.dataset.redirect_route;
+  }
+</script>

package/dist/components/auth/StudioCMSLogoSVG.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {}
+
+const { class: className } = Astro.props;
+---
+
+<svg class:list={[className]} width="755" height="792" viewBox="0 0 755 792" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="295" width="460" height="466" rx="32" fill="currentColor"/>
+  <path d="M272 434V166H180C162.327 166 148 180.327 148 198V597C148 614.673 162.327 629 180 629H577.5C595.173 629 609.5 614.673 609.5 597V490H328C297.072 490 272 464.928 272 434Z" fill="currentColor"/>
+  <path d="M124 597V329H32C14.3269 329 0 343.327 0 361V760C0 777.673 14.3269 792 32 792H429.5C447.173 792 461.5 777.673 461.5 760V653H180C149.072 653 124 627.928 124 597Z" fill="currentColor"/>
+</svg>

package/dist/components/auth/oAuthButtonProviders.d.ts

@@ -0,0 +1,8 @@
+export declare const showOAuth: boolean;
+export type ProviderData = {
+    enabled: boolean;
+    href: string;
+    label: string;
+    image: string;
+};
+export declare const providerData: ProviderData[];

package/dist/components/auth/oAuthButtonProviders.js

@@ -0,0 +1,35 @@
+import { authEnvCheck } from "studiocms:auth/utils/authEnvCheck";
+import { AuthConfig } from "studiocms:config";
+import { StudioCMSRoutes } from "studiocms:lib";
+const authEnv = await authEnvCheck(AuthConfig.providers);
+const showOAuth = authEnv.SHOW_OAUTH;
+const providerData = [
+  {
+    enabled: authEnv.GITHUB.ENABLED,
+    href: StudioCMSRoutes.authLinks.githubIndex,
+    label: "GitHub",
+    image: `<svg width="24px" height="24px" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg" class="oauth-logo"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/></svg>`
+  },
+  {
+    enabled: authEnv.DISCORD.ENABLED,
+    href: StudioCMSRoutes.authLinks.discordIndex,
+    label: "Discord",
+    image: `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 256 199" class="oauth-logo"><path fill="currentColor" d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"/></svg>`
+  },
+  {
+    enabled: authEnv.GOOGLE.ENABLED,
+    href: StudioCMSRoutes.authLinks.googleIndex,
+    label: "Google",
+    image: `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 256 262" class="oauth-logo"><path fill="#4285f4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"/><path fill="#34a853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"/><path fill="#fbbc05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"/><path fill="#eb4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"/></svg>`
+  },
+  {
+    enabled: authEnv.AUTH0.ENABLED,
+    href: StudioCMSRoutes.authLinks.auth0Index,
+    label: "Auth0",
+    image: `<svg xmlns="http://www.w3.org/2000/svg"  width="24px" height="24px" viewBox="0 0 32 32" class="oauth-logo"><path fill="currentColor" d="M29.307 9.932L26.161 0H5.796L2.692 9.932c-1.802 5.75.042 12.271 5.089 16.021L16.01 32l8.208-6.068c5.005-3.75 6.911-10.25 5.089-16.021l-8.214 6.104l3.12 9.938l-8.208-6.13l-8.208 6.104l3.141-9.911l-8.25-6.063l10.177-.063l3.146-9.891l3.141 9.87z"/></svg>`
+  }
+];
+export {
+  providerData,
+  showOAuth
+};

package/dist/components/dashboard/AstroCodeDiffsScript.astro

@@ -0,0 +1,25 @@
+<script>
+  const codesWithDiff = document.querySelectorAll('.custom-code.diff');
+
+  for (const code of codesWithDiff) {
+    const linesInserted = code.getAttribute('data-lines-inserted');
+    const linesDeleted = code.getAttribute('data-lines-deleted');
+
+    if (!linesInserted && !linesDeleted) continue;
+
+    const parsedInsertedLines = linesInserted?.split(',').map((line) => parseInt(line, 10)) || [];
+    const parsedDeletedLines = linesDeleted?.split(',').map((line) => parseInt(line, 10)) || [];
+
+    const codeLines = code.querySelectorAll('.line');
+
+    codeLines.forEach((line, index) => {
+      if (parsedInsertedLines.includes(index + 1)) {
+        line.classList.add('diff', 'ins');
+      }
+
+      if (parsedDeletedLines.includes(index + 1)) {
+        line.classList.add('diff', 'del');
+      }
+    });
+  }
+</script>

package/dist/components/dashboard/BaseHead.astro

@@ -0,0 +1,41 @@
+---
+import 'studiocms:ui/global-css';
+import '../../styles/dashboard-base.css';
+import '../../styles/dashboard-diff.css';
+import '../../styles/dashboard-code.css';
+import '@fontsource-variable/onest/index.css';
+import { Generator } from 'studiocms:components';
+import onestWoff2 from '@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url';
+import ThemeManager from './ThemeManager.astro';
+
+export interface Props {
+	title: string;
+	description: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<head>
+  {/* Global Metadata */}
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <Generator />
+
+  {/* Favicon */}
+  <link rel="icon" href="https://cdn.studiocms.dev/favicon.svg" type="image/svg+xml" />
+  <link rel="icon" href="https://cdn.studiocms.dev/favicon-light.png" type="image/svg+xml" media="(prefers-color-scheme: dark)" />
+  <link rel="icon" href="https://cdn.studiocms.dev/favicon-dark.png" type="image/png" media="(prefers-color-scheme: light)" />
+
+  {/* Primary Meta Tags */}
+  <title>{title}</title>
+  <meta name="title" content={title} />
+  <meta name="description" content={description} />
+  <meta name="theme-color" content="#a581f3" />
+
+  {/* Theme Manager */}
+  <ThemeManager />
+
+  {/* Fonts */}
+  <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href={onestWoff2} />
+</head>

package/dist/components/dashboard/Code.astro

@@ -0,0 +1,23 @@
+---
+
+interface Props {
+	code: string;
+	ins?: string;
+	del?: string;
+}
+
+const { code, del, ins } = Astro.props;
+
+const htmlCode = code.split('\n').map((line) => `<span class="line">${line}</span>\n`);
+
+const props: Record<string, string> = {};
+
+if (del) {
+	props['data-lines-deleted'] = del;
+}
+
+if (ins) {
+	props['data-lines-inserted'] = ins;
+}
+---
+<pre class="code-container scrollbar"><code class="custom-code" class:list={[(del || ins) && 'diff']} {...props} set:html={htmlCode}></code></pre>

package/dist/components/dashboard/DashboardPageHeader.astro

@@ -0,0 +1,77 @@
+---
+import { useTranslations } from 'studiocms:i18n';
+import { Button, Icon } from 'studiocms:ui/components';
+import UserName from './islands/dashboard/UserName.astro';
+
+const lang = 'en-us';
+const t = useTranslations(lang, '@studiocms/dashboard:index');
+---
+
+<header class="index-page-header">
+  <div class="page-title-container">
+    <Button color='primary' id='nav-open' class='mobile-btn'>
+      <Icon name="bars-3" height={24} width={24} />
+    </Button>
+    <h1 class="page-title">
+      <t-dashboard-header key="welcome-title">{t("welcome-title")}</t-dashboard-header>, <UserName />.
+    </h1>
+  </div>
+  <div class="page-actions-container">
+    <Button color='primary' variant='flat' as="a" href={'https://chat.studiocms.dev'} target='_blank' rel='noreferrer,noopener'>
+      <Fragment set:html={`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"><path fill="currentColor" d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011a.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0a8 8 0 0 0-.412-.833a.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02a.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595a.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085a8 8 0 0 1-1.249.594a.05.05 0 0 0-.03.03a.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019a13.2 13.2 0 0 0 4.001-2.02a.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613c0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613c0 .888-.631 1.612-1.438 1.612"/></svg>`} slot='start-content' />
+      <t-dashboard-header key="title-button:discord">{t("title-button:discord")}</t-dashboard-header>
+    </Button>
+    <Button color='success' variant='flat' as="a" href={'https://github.com/withstudiocms/studiocms/discussions/new?category=feedback'} target='_blank' rel='noreferrer,noopener'>
+      <Icon name='chat-bubble-oval-left-ellipsis' width={24} height={24} />
+      <t-dashboard-header key="title-button:feedback">{t("title-button:feedback")}</t-dashboard-header>
+    </Button>
+  </div>
+</header>
+<script>
+    import { 
+        $i18n,
+        baseTranslation,
+        makeTranslation,
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:index';
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+
+    if (!customElements.get('t-dashboard-header')) {
+        customElements.define('t-dashboard-header', makeTranslation(currentPage, i18n));
+    }
+</script>
+<style>
+  .index-page-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: .5rem;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+  
+  .page-title-container {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    width: fit-content;
+  }
+  
+  .page-title {
+    display: block;
+    width: fit-content;
+    margin: 0;
+  }
+  
+  .page-actions-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+    margin-left: auto;
+  }
+</style>

package/dist/components/dashboard/DoubleSidebar.astro

@@ -0,0 +1,26 @@
+---
+import { DoubleSidebar as SuiDoubleSidebar } from 'studiocms:ui/components';
+import MainSidebarContent from './MainSidebarContent.astro';
+---
+
+<SuiDoubleSidebar class='sidebar'>
+  <div slot="outer" class="outer-sidebar-container">
+    <MainSidebarContent transition:persist transition:persist-props />
+  </div>
+  <div slot="inner">
+    <slot />
+  </div>
+</SuiDoubleSidebar>
+
+<script>
+  import { DoubleSidebarHelper } from "studiocms:ui/components";
+
+  if (document.getElementById('sui-sidebars')) {
+    const sidebar = new DoubleSidebarHelper();
+
+    sidebar.showInnerOnClick('nav-open');
+    sidebar.showInnerOnClick('nav-close');
+    sidebar.showOuterOnClick('back-to-outer');
+    sidebar.hideSidebarOnClick('show-page');
+  }
+</script>

package/dist/components/dashboard/Footer.astro

@@ -0,0 +1,16 @@
+---
+
+const year = new Date().getFullYear();
+
+const footerYear = year === 2024 ? year : `2024 - ${year}`;
+
+const repoLink = 'https://github.com/withstudiocms/studiocms/';
+const licenseLink =
+	'https://github.com/withstudiocms/studiocms/blob/main/packages/studiocms/LICENSE';
+---
+<footer class="dashboard-footer">
+
+  <span>&copy; {footerYear} <a href={licenseLink}><strong>MIT Licensed</strong></a></span>
+
+  <span><a href={repoLink}>withstudiocms/studiocms</a></span>
+</footer>