studiocms 0.1.0-beta.10

package/dist/components/dashboard/MainSidebarContent.astro

@@ -0,0 +1,317 @@
+---
+import { getUserData, verifyUserPermissionLevel } from 'studiocms:auth/lib/user';
+import { dashboardConfig } from 'studiocms:config';
+import { useTranslations } from 'studiocms:i18n';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import pluginList from 'studiocms:plugins';
+import { Button, Divider, Dropdown, Group, Icon } from 'studiocms:ui/components';
+import Footer from './Footer.astro';
+import SidebarLink from './SidebarLink.astro';
+import SidebarPluginLink from './SidebarPluginLink.astro';
+import StudioCMSLogo from './StudioCMSLogo.astro';
+import UserAccount from './islands/sidebar/UserAccount.astro';
+import VersionCheck from './islands/sidebar/VersionCheck.astro';
+import { getSidebarLinks } from './sidebarConfig.js';
+
+const { versionCheck } = dashboardConfig;
+const lang = 'en-us';
+const t = useTranslations(lang, '@studiocms/dashboard:sidebar');
+const sidebar = getSidebarLinks(lang);
+const userData = await getUserData(Astro);
+const isEditor = await verifyUserPermissionLevel(userData, 'editor');
+const isAdmin = await verifyUserPermissionLevel(userData, 'admin');
+const isOwner = await verifyUserPermissionLevel(userData, 'owner');
+
+const filteredPluginList = pluginList.filter((plugin) => !!plugin.settingsPage);
+---
+
+<div class="sidebar-links-container">
+  <div class="sidebar-header">
+    <div class="sidebar-header-text">
+      <StudioCMSLogo class={'sidebar-logo'} />
+      <span class="sidebar-title">StudioCMS</span>
+    </div>
+    <div class="sidebar-subtitle">
+      <Group>
+        { versionCheck && <VersionCheck /> }
+        <Button size='sm' variant="outlined" color={'default'} id={'studiocms-theme-toggle'}>
+          <div id="dark-content">
+            <Icon name='moon-16-solid' width={16} height={16} slot="dark" />
+          </div>
+          <div id="light-content">
+            <Icon name='sun-16-solid' width={16} height={16} slot="light" />
+          </div>
+          <div id="fallback-content">
+            <Icon name='arrow-path-16-solid' width={16} height={16} slot="fallback" />
+          </div>
+        </Button>
+      </Group>
+      <Button color='primary' size='sm' id='nav-close' class='mobile-btn mid-size-btn'>
+        <Icon name="x-mark" height={16} width={16} />
+      </Button>
+    </div>
+  </div>
+  
+  <Divider background='background-step-1'>
+    <t-sidebar key="category-1-header">{t("category-1-header")}</t-sidebar>
+  </Divider>
+  
+  <div class="sidebar-link-group">
+    {
+      sidebar.baseLinks.map(({ href, icon, title, key }) => {
+        if (title) {
+          return <SidebarLink {icon} {href}>{title}</SidebarLink>
+        }
+        if (key) {
+          // @ts-ignore
+          return <SidebarLink {icon} {href}><t-sidebar key={key}>{t(key)}</t-sidebar></SidebarLink>
+        }
+      })
+    }
+  
+    { isEditor && sidebar.editorLinks.map(({ href, icon, title, key }) => {
+      if (title) {
+        return <SidebarLink {icon} {href}>{title}</SidebarLink>
+      }
+      if (key) {
+        // @ts-ignore
+        return <SidebarLink {icon} {href}><t-sidebar key={key}>{t(key)}</t-sidebar></SidebarLink>
+      }
+    })}
+  
+  </div>
+
+  {isAdmin && (
+    <Divider background='background-step-1'>
+      <t-sidebar key="category-2-header">{t('category-2-header')}</t-sidebar>
+    </Divider>
+    <div class="sidebar-link-group">
+      {
+        isOwner && sidebar.ownerLinks.map(({ href, icon, title, key }) => {
+          if (title) {
+            return <SidebarLink {icon} {href}>{title}</SidebarLink>
+          }
+          if (key) {
+            // @ts-ignore
+            return <SidebarLink {icon} {href}><t-sidebar key={key}>{t(key)}</t-sidebar></SidebarLink>
+          }
+        })
+      }
+      {
+        sidebar.adminLinks.map(({ href, icon, title, key }) => {
+          if (title) {
+            return <SidebarLink {icon} {href}>{title}</SidebarLink>
+          }
+          if (key) {
+            // @ts-ignore
+            return <SidebarLink {icon} {href}><t-sidebar key={key}>{t(key)}</t-sidebar></SidebarLink>
+          }
+        })
+      }
+    </div>
+    <Divider background='background-step-1'>
+      <t-sidebar key="category-3-header">{t('category-3-header')}</t-sidebar>
+    </Divider>
+    <div class="sidebar-link-group">
+      { filteredPluginList.length > 0 
+        ? filteredPluginList.map(({ identifier, name }) => (
+          <SidebarPluginLink 
+            identifier={identifier}
+            name={name}
+          />
+        )) 
+        : ( 
+          <span class="empty-placeholder-span">
+            <t-sidebar key="category-3-empty-placeholder">
+              {t('category-3-empty-placeholder')}
+            </t-sidebar>
+          </span>
+        )}
+    </div>
+  )}
+
+</div>  
+
+<div>
+  <Dropdown 
+    transition:persist
+    transition:persist-props
+    id='sidebar-user-dropdown'
+    options={[
+      { label: t("user-dropdown:settings"), icon: "user", value: StudioCMSRoutes.mainLinks.userProfile },
+      { label: t("user-dropdown:view-site"), icon: "globe-alt", value: StudioCMSRoutes.mainLinks.baseSiteURL },
+      { label: t("user-dropdown:logout"), icon: "arrow-left-start-on-rectangle", color: 'danger', value: StudioCMSRoutes.authLinks.logoutURL },
+    ]}
+    offset={8}
+    >
+
+    <div class="user-dropdown-trigger-container">
+      <UserAccount />
+    </div>
+    
+  </Dropdown>
+
+  <Footer />
+</div>
+
+<div style="display: none;" id="dropdown-user-options"
+  data-settings={StudioCMSRoutes.mainLinks.userProfile}
+  data-view-site={StudioCMSRoutes.mainLinks.baseSiteURL}
+  data-logout={StudioCMSRoutes.authLinks.logoutURL}
+></div>
+
+<script>
+    import { 
+        $i18n,
+        baseTranslation,
+        makeTranslation,
+    } from 'studiocms:i18n/client';
+
+    const dropdownUserOptions = document.getElementById('dropdown-user-options') as HTMLDivElement;
+
+    const userDropdownOptions = {
+        settings: dropdownUserOptions.dataset.settings,
+        viewSite: dropdownUserOptions.dataset.viewSite,
+        logout: dropdownUserOptions.dataset.logout,
+    };
+
+    const getDropdownUserOptionsElms = () => {
+      const DropdownElm = document.getElementById('sidebar-user-dropdown-dropdown') as HTMLUListElement;
+
+      const DropdownOptions = DropdownElm.querySelectorAll('.sui-dropdown-option') as NodeListOf<HTMLLIElement>;
+
+      const Options: { 
+        settings: HTMLSpanElement | null; 
+        viewSite: HTMLSpanElement | null; 
+        logout: HTMLSpanElement | null; 
+      } = {
+        settings: null,
+        viewSite: null,
+        logout: null,
+      };
+
+      for (const Elm of DropdownOptions) {
+        const value = Elm.dataset.value;
+
+        const SelectedValue = Object.entries(userDropdownOptions).find(([key, val]) => val === value)?.[0] as 'settings' | 'viewSite' | 'logout';
+
+        if (!SelectedValue) {
+          continue;
+        }
+
+        if (userDropdownOptions[SelectedValue]) {
+
+          const SelectedElm = (Elm.querySelector('.sui-dropdown-line-container') as HTMLDivElement).querySelector('span');
+
+          Options[SelectedValue] = SelectedElm;
+        }
+      }
+
+      return Options;
+    }
+
+    const currentPage = '@studiocms/dashboard:sidebar';
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+    
+    i18n.subscribe(comp => {
+        const DropdownUserOptions = getDropdownUserOptionsElms();
+
+        if (DropdownUserOptions.settings) {
+          DropdownUserOptions.settings.textContent = comp['user-dropdown:settings'];
+        }
+
+        if (DropdownUserOptions.viewSite) {
+          DropdownUserOptions.viewSite.textContent = comp['user-dropdown:view-site'];
+        }
+
+        if (DropdownUserOptions.logout) {
+          DropdownUserOptions.logout.textContent = comp['user-dropdown:logout'];
+        }
+    });
+
+    if (!customElements.get('t-sidebar')) {
+        customElements.define('t-sidebar', makeTranslation(currentPage, i18n));
+    }
+</script>
+
+<script>
+  import { DropdownHelper } from "studiocms:ui/components";
+  import { ThemeHelper } from '@studiocms/ui/utils/ThemeHelper.js';
+  import { navigate } from 'astro:transitions/client';
+
+  function setup() {
+    const userDropdown = new DropdownHelper('sidebar-user-dropdown', true);
+
+    userDropdown.registerClickCallback((value) => {
+      navigate(value)
+    });
+
+    const themeToggle = document.getElementById('studiocms-theme-toggle');
+    const themeHelper = new ThemeHelper();
+    
+    themeHelper.registerToggle(themeToggle);
+
+    themeHelper.onThemeChange((newTheme) => {
+      localStorage.setItem('studiocms-theme-preference', newTheme);
+    });
+  }
+  
+  document.addEventListener('astro:page-load', setup);
+  setup();
+</script>
+
+<style>
+  #nav-close {
+    display: none;
+  }
+
+  @media screen and (max-width: 840px) {
+    #nav-close {
+      display: flex;
+      margin-left: .75rem;
+    }
+  }
+
+  .sidebar-link-group {
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    width: 100%;
+  }
+
+  .sidebar-link-group.hidden {
+    display: none;
+  }
+
+  .empty-placeholder-span {
+    width: 100%;
+    text-align: center;
+    color: hsl(var(--text-muted));
+    font-size: .875em;
+  }
+
+  .user-dropdown-trigger-container {
+    width: calc(280px - 3rem);
+    cursor: pointer;
+    border: 1px solid hsl(var(--border));
+    padding: .5rem;
+    border-radius: .5rem;
+    transition: all .15s ease;
+  }
+
+  .user-dropdown-trigger-container:hover {
+    background-color: hsla(var(--border) / .5);
+  }
+
+  .sidebar {
+    justify-content: space-between;
+  }
+
+  .sidebar-links-container {
+    gap: .75rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>

package/dist/components/dashboard/PageHeader.astro

@@ -0,0 +1,52 @@
+---
+import { Button, Icon } from 'studiocms:ui/components';
+
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+<header class="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">{title}</h1>
+  </div>
+  <div class="page-actions-container">
+    <slot />
+  </div>
+</header>
+<style>
+.page-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 2rem;
+    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;
+  }
+}
+</style>

package/dist/components/dashboard/SidebarLink.astro

@@ -0,0 +1,61 @@
+---
+import { StudioCMSRoutes } from 'studiocms:lib';
+import { Icon } from 'studiocms:ui/components';
+import type { HeroIconName } from '@studiocms/ui/components/Icon/iconType.js';
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'a'> {
+	/**
+	 * ONLY USE OUTLINED ICONS! Shit will break otherwise
+	 */
+	icon: HeroIconName;
+	href: string;
+}
+
+const { icon, ...props } = Astro.props;
+
+const activeIcon = `${icon}-solid`;
+
+const compId = crypto.randomUUID();
+---
+<a id={compId} class="sidebar-link" {...props}>
+  <Icon name={icon} id="not-selected-icon" class='sidebar-link-icon not-selected' width={24} height={24} />
+  <Icon name={activeIcon as HeroIconName} id="selected-icon" class="sidebar-link-icon selected" width={24} height={24} />
+  <span class="sidebar-link-text">
+    <slot />
+  </span>
+</a>
+
+<script is:inline data-astro-rerun define:vars={{ compId, dashboardIndex: StudioCMSRoutes.mainLinks.dashboardIndex }}>
+  function setSidebarLinks() {
+    const link = document.getElementById(compId)
+
+    const notSelectedIcon = link.querySelector('#not-selected-icon')
+    const selectedIcon = link.querySelector('#selected-icon')
+
+    notSelectedIcon.style.display = 'block';
+    selectedIcon.style.display = 'none';
+    link.classList.remove('active');
+
+    const windowLocation = window.location.pathname;
+    const elemPath = new URL(link.href).pathname;
+
+    const webDashboardIndex = new URL(window.location.origin + dashboardIndex).pathname;
+
+    if (elemPath === windowLocation) {
+      notSelectedIcon.style.display = 'none';
+      selectedIcon.style.display = 'block';
+      link.classList.add('active');
+    }
+
+    if (windowLocation.includes(elemPath) && elemPath !== webDashboardIndex) {
+      notSelectedIcon.style.display = 'none';
+      selectedIcon.style.display = 'block';
+      link.classList.add('active');
+    }
+
+  }
+  document.addEventListener('astro:page-load', setSidebarLinks);
+  setSidebarLinks();
+</script>
+

package/dist/components/dashboard/SidebarModals.astro

@@ -0,0 +1,6 @@
+---
+import UserManagementModals from './sidebar-modals/UserManagementModals.astro';
+import VersionModal from './sidebar-modals/VersionModal.astro';
+---
+<VersionModal />
+<UserManagementModals />

package/dist/components/dashboard/SidebarPluginLink.astro

@@ -0,0 +1,45 @@
+---
+import { StudioCMSRoutes } from 'studiocms:lib';
+
+interface Props {
+	identifier: string;
+	name: string;
+}
+
+const { name, identifier } = Astro.props;
+
+const href = StudioCMSRoutes.mainLinks.plugins + identifier;
+
+const isActive = Astro.url.pathname === href && 'active';
+---
+<a class="sidebar-plugin-link" {href} class:list={[ isActive && 'active' ]}>
+  <span class="sidebar-plugin-name">{name}</span>
+  <span class="sidebar-plugin-identifier">{identifier}</span>
+</a>
+
+<style>
+  .sidebar-plugin-link {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    border-radius: .5rem;
+    transition: all .15s ease;
+    width: 100%;
+    padding: .375rem .5rem;
+    text-decoration: none;
+    color: hsl(var(--text-muted));
+  }
+
+  .sidebar-plugin-link:hover {
+    background-color: hsl(var(--background-step-2));
+  }
+
+  .sidebar-plugin-link.active {
+    color: hsl(var(--text));
+  }
+
+  .sidebar-plugin-identifier {
+    font-weight: 300;
+    font-size: .875em;
+  }
+</style>

package/dist/components/dashboard/SingleSidebar.astro

@@ -0,0 +1,23 @@
+---
+import { Sidebar } from 'studiocms:ui/components';
+import MainSidebarContent from './MainSidebarContent.astro';
+---
+<Sidebar class='sidebar'>
+  <MainSidebarContent transition:persist transition:persist-props />
+</Sidebar>
+
+<script>
+  import { SingleSidebarHelper } from "studiocms:ui/components";
+
+  function setupSidebar() {
+    if (!document.getElementById('sui-sidebar')) return;
+
+    const sidebar = new SingleSidebarHelper();
+    
+    sidebar.showSidebarOnClick('nav-open');
+    sidebar.hideSidebarOnClick('nav-close');
+  }
+
+  document.addEventListener('astro:page-load', setupSidebar);
+  setupSidebar();
+</script>

package/dist/components/dashboard/StudioCMSLogo.astro

@@ -0,0 +1,12 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'svg'> {}
+
+const { width = 755, height = 792, ...props } = Astro.props;
+---
+<svg width={width} height={height} viewBox="0 0 755 792" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <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/dashboard/ThemeManager.astro

@@ -0,0 +1,53 @@
+<script is:inline>
+    window.theme ??= (() => {
+        const defaultTheme = "system";
+        const storageKey = "studiocms-theme-preference";
+        const store =
+            typeof localStorage !== "undefined"
+            ? localStorage
+            : { getItem: () => null, setItem: () => {} };
+    
+        const mediaMatcher = window.matchMedia("(prefers-color-scheme: light)");
+        let systemTheme = mediaMatcher.matches ? "light" : "dark";
+        mediaMatcher.addEventListener("change", (event) => {
+            systemTheme = event.matches ? "light" : "dark";
+            applyTheme(theme.getTheme());
+        });
+    
+        function applyTheme(theme) {
+            const resolvedTheme = theme === "system" ? systemTheme : theme;
+            document.documentElement.dataset.theme = resolvedTheme;
+            document.dispatchEvent(
+            new CustomEvent("theme-changed", {
+                detail: { theme, systemTheme, defaultTheme },
+            })
+            );
+        }
+    
+        function setTheme(theme = defaultTheme) {
+            store.setItem(storageKey, theme);
+            applyTheme(theme);
+        }
+    
+        function getTheme() {
+            return store.getItem(storageKey) || defaultTheme;
+        }
+    
+        function getSystemTheme() {
+            return systemTheme;
+        }
+    
+        function getDefaultTheme() {
+            return defaultTheme;
+        }
+    
+        return { setTheme, getTheme, getSystemTheme, getDefaultTheme };
+    })();
+    theme.setTheme(theme.getTheme());
+</script>
+
+<script>
+    document.addEventListener("astro:after-swap", () =>
+        window.theme.setTheme(window.theme.getTheme()),
+    );
+</script>