studiocms 0.1.0-beta.7 → 0.1.0-beta.9

package/dist/lib/i18n/LanguageSelector.astro

@@ -0,0 +1,103 @@
+---
+import { languageSelectorOptions, switchLanguage } from './index.js';
+
+const switcher = switchLanguage(Astro);
+
+// TODO: Update the language selector's styles to match StudioCMS's new design
+---
+
+<button
+    id="language-selector"
+    class="language-selector mr-2"
+    >
+    <svg xmlns="http://www.w3.org/2000/svg" class="w-full h-[80%]" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4 5h7M9 3v2c0 4.418-2.239 8-5 8"/><path d="M5 9c0 2.144 2.952 3.908 6.7 4m.3 7l4-9l4 9m-.9-2h-6.2"/></g></svg>
+</button>
+
+<menu id="language-sector-menu" type="context" class="bg-neutral rounded-md p-2">
+    {
+        //Language Buttons Auto-Generated
+        languageSelectorOptions.map(({ key, value }) => (
+            <a class="btn btn-primary" href={switcher(key)}>{value}</a>
+        ))
+    }
+    <div class="flex flex-row-reverse">
+        <button 
+            id="language-sector-menu-cancel" 
+            class="btn btn-sm btn-circle btn-outline text-neutral-content" 
+            type="button">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+        </button>
+    </div>
+</menu>
+
+<style>
+.language-selector {
+        background-color: oklch(var(--b2));
+        border-radius: 50%;
+        border: 0.125rem solid;
+        border-color: oklch(var(--s));
+        box-shadow: 0 0 0.25rem 0.015rem rgba(0, 0, 0, 0.694);
+        width: 2.5rem;
+        height: 2.5rem;
+        cursor: pointer;
+        display: none;
+        opacity: 0;
+        z-index: 99998;
+        transition: opacity 1s ease;
+    }
+    #language-sector-menu {
+        position: absolute;
+        display: none;
+        flex-direction: column;
+        gap: 0.5rem;
+        left: -4rem;
+        top: 3rem;
+        width: max-content;
+        z-index: 99999;
+    }
+
+    #language-sector-menu-cancel {
+        border-radius: 50%;
+    }
+</style>
+
+<script>
+    // Get the Language Selector elements
+    const LanguageSelector = document.getElementById('language-selector') as HTMLButtonElement;
+    const LanguageSectorMenuCancel = document.getElementById('language-sector-menu-cancel') as HTMLButtonElement;
+    const LanguageSectorMenu = document.getElementById('language-sector-menu') as HTMLMenuElement;
+
+    // Show the Language Selector on page load
+    setTimeout(() => {
+        LanguageSelector.style.display = 'block';
+            setTimeout(() => {
+                LanguageSelector.style.opacity = "1";
+            }, 250);
+    }, 200);
+
+    // Toggle the Language Selector
+    function toggleLanguageSelector(element: HTMLMenuElement) {
+        if (
+            !element.style.display 
+            || element.style.display === 'none'
+        ) {
+            element.style.display = 'flex';
+        } else {
+            element.style.display = 'none';
+        }
+    }
+
+    // Language Selector Event Listeners
+    LanguageSelector.addEventListener('click', () => 
+        toggleLanguageSelector(LanguageSectorMenu)
+    );
+    LanguageSelector.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+        toggleLanguageSelector(LanguageSectorMenu)
+    });
+    LanguageSectorMenuCancel.addEventListener('click', () => 
+        toggleLanguageSelector(LanguageSectorMenu)
+    );
+</script>

package/dist/lib/i18n/config.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The UI translations available in the StudioCMS app.
+ */
+export declare const uiTranslationsAvailable: readonly ["en-us"];
+/**
+ * The UI translations available in the StudioCMS app.
+ */
+export type UiTranslationKey = (typeof uiTranslationsAvailable)[number];
+/**
+ * The default language for the StudioCMS app.
+ */
+export declare const defaultLang: UiTranslationKey;
+/**
+ * Whether to show the default language in the language switcher.
+ */
+export declare const showDefaultLang: boolean;

package/dist/lib/i18n/config.js

@@ -0,0 +1,8 @@
+const uiTranslationsAvailable = ["en-us"];
+const defaultLang = "en-us";
+const showDefaultLang = false;
+export {
+  defaultLang,
+  showDefaultLang,
+  uiTranslationsAvailable
+};

package/dist/lib/i18n/index.d.ts

@@ -0,0 +1,228 @@
+import type { AstroGlobal } from 'astro';
+/**
+ * The UI translations available in the StudioCMS app.
+ */
+declare const uiTranslations: {
+    readonly 'en-us': {
+        default: {
+            displayName: string;
+            translations: {
+                "@studiocms/auth:login": {
+                    title: string;
+                    description: string;
+                    header: string;
+                    "sub-header-usernamepasswordoauth": string;
+                    "sub-header-usernamepassword": string;
+                    "sub-header-oauth": string;
+                    "sub-header-noprovider": string;
+                    "username-label": string;
+                    "password-label": string;
+                    "login-button": string;
+                    "allow-registration-noaccount": string;
+                    "allow-registration-register": string;
+                };
+                "@studiocms/auth:signup": {
+                    title: string;
+                    description: string;
+                    header: string;
+                    "sub-header-usernamepasswordoauth": string;
+                    "sub-header-usernamepassword": string;
+                    "sub-header-oauth": string;
+                    "sub-header-noprovider": string;
+                    "username-label": string;
+                    "email-label": string;
+                    "displayname-label": string;
+                    "password-label": string;
+                    "confirm-password-label": string;
+                    "create-account-button": string;
+                    "allow-login-haveaccount": string;
+                    "allow-login-login": string;
+                };
+                "@studiocms/auth:logout": {
+                    title: string;
+                    description: string;
+                };
+                "@studiocms/auth:oauth-stack": {
+                    "or-login-with": string;
+                };
+                "@studiocms/dashboard:index": {
+                    title: string;
+                    "welcome-title": string;
+                    "title-button:discord": string;
+                    "title-button:feedback": string;
+                    "sub-header": string;
+                };
+                "@studiocms/dashboard:sidebar": {
+                    "category-1-header": string;
+                    "dashboard-link-label": string;
+                    "content-management-label": string;
+                    "category-2-header": string;
+                    "site-configuration-label": string;
+                    "user-management-label": string;
+                    "category-3-header": string;
+                    "category-3-empty-placeholder": string;
+                    "user-dropdown:settings": string;
+                    "user-dropdown:view-site": string;
+                    "user-dropdown:logout": string;
+                };
+            };
+        };
+        displayName: string;
+        translations: {
+            "@studiocms/auth:login": {
+                title: string;
+                description: string;
+                header: string;
+                "sub-header-usernamepasswordoauth": string;
+                "sub-header-usernamepassword": string;
+                "sub-header-oauth": string;
+                "sub-header-noprovider": string;
+                "username-label": string;
+                "password-label": string;
+                "login-button": string;
+                "allow-registration-noaccount": string;
+                "allow-registration-register": string;
+            };
+            "@studiocms/auth:signup": {
+                title: string;
+                description: string;
+                header: string;
+                "sub-header-usernamepasswordoauth": string;
+                "sub-header-usernamepassword": string;
+                "sub-header-oauth": string;
+                "sub-header-noprovider": string;
+                "username-label": string;
+                "email-label": string;
+                "displayname-label": string;
+                "password-label": string;
+                "confirm-password-label": string;
+                "create-account-button": string;
+                "allow-login-haveaccount": string;
+                "allow-login-login": string;
+            };
+            "@studiocms/auth:logout": {
+                title: string;
+                description: string;
+            };
+            "@studiocms/auth:oauth-stack": {
+                "or-login-with": string;
+            };
+            "@studiocms/dashboard:index": {
+                title: string;
+                "welcome-title": string;
+                "title-button:discord": string;
+                "title-button:feedback": string;
+                "sub-header": string;
+            };
+            "@studiocms/dashboard:sidebar": {
+                "category-1-header": string;
+                "dashboard-link-label": string;
+                "content-management-label": string;
+                "category-2-header": string;
+                "site-configuration-label": string;
+                "user-management-label": string;
+                "category-3-header": string;
+                "category-3-empty-placeholder": string;
+                "user-dropdown:settings": string;
+                "user-dropdown:view-site": string;
+                "user-dropdown:logout": string;
+            };
+        };
+    };
+};
+/**
+ * Represents the type of UI translations.
+ * This type is derived from the structure of the `uiTranslations` object.
+ */
+export type UiTranslations = typeof uiTranslations;
+/**
+ * Represents the keys of the UiTranslations type.
+ * This type is used to define the possible keys for UI language translations.
+ */
+export type UiLanguageKeys = keyof UiTranslations;
+/**
+ * Represents the keys of the UI component translations for the 'en-us' locale.
+ * This type is derived from the 'translations' property of the 'UiTranslations' interface
+ * for the 'en-us' locale (Source of truth), ensuring that only valid translation keys are used.
+ */
+export type UiComponentKeys = keyof UiTranslations['en-us']['translations'];
+type UiTranslationComponent<L extends UiLanguageKeys, T extends UiComponentKeys> = (typeof uiTranslations)[L]['translations'][T];
+type UiTranslationKey<L extends UiLanguageKeys, T extends UiComponentKeys> = keyof UiTranslationComponent<L, T>;
+/**
+ * Retrieves a translation function for a given language and component.
+ *
+ * @param lang - The language key to use for translations.
+ * @param component - The component key to use for translations.
+ * @returns A function that takes a translation key and returns the corresponding translated string.
+ */
+export declare function useTranslations<L extends UiLanguageKeys, T extends UiComponentKeys>(lang: L, component: T): (key: UiTranslationKey<L, T>) => UiTranslationComponent<L, T>[UiTranslationKey<L, T>];
+/**
+ * Returns a function that translates a given path based on the provided language.
+ *
+ * @param lang - The language key to be used for translation.
+ * @returns A function that takes a path and an optional language key, and returns the translated path.
+ * If the language key is not provided, the default language key is used.
+ * If the language is the default language and `showDefaultLang` is false, the original path is returned.
+ * Otherwise, the path is prefixed with the language key.
+ */
+export declare function useTranslatedPath(lang: UiLanguageKeys): (path: string, l?: string) => string;
+/**
+ * Generates an array of language selector options from the `uiTranslations` object.
+ * Each option contains a `key` and a `value` where:
+ * - `key` is a language key from `UiLanguageKeys`.
+ * - `value` is the display name of the language.
+ *
+ * @returns An array of objects representing language selector options.
+ */
+export declare const languageSelectorOptions: {
+    key: UiLanguageKeys;
+    value: string;
+}[];
+/**
+ * Extracts the language key from the given URL's pathname.
+ *
+ * @param url - The URL object from which to extract the language key.
+ * @returns The language key if it exists in the `uiTranslations`, otherwise returns the default language key.
+ */
+export declare function getLangFromUrl(url: URL): "en-us";
+/**
+ * Retrieves the current URL path, adjusting for language settings.
+ *
+ * This function checks if the URL path includes '/_server-islands'. If it does,
+ * it extracts the referer URL from the request headers and determines the current
+ * language from that URL. If the current language is the default language, it returns
+ * the pathname as is. Otherwise, it replaces the language segment in the pathname with '/'.
+ *
+ * If the URL path does not include '/_server-islands', it uses the Astro URL directly
+ * to determine the current language and adjust the pathname accordingly.
+ *
+ * @param {AstroGlobal} Astro - The global Astro object containing URL and request information.
+ */
+export declare function getCurrentURLPath(Astro: AstroGlobal): string;
+/**
+ * Function to switch the language of the current page.
+ *
+ * @param {AstroGlobal} Astro - The global Astro object.
+ */
+export declare function switchLanguage(Astro: AstroGlobal): (languageKey: UiLanguageKeys) => string;
+/**
+ * Example of how to use this i18n utils on a Static page
+ *
+ * @example
+ * ```ts
+ * export async function getStaticPaths() {
+ *	const paths = staticPaths();
+ *	return paths;
+ * }
+ * ```
+ *
+ * If the default language is hidden, the paths for the default language will be generated without the language prefix while all extra languages will have the prefix. (e.g. When `showDefaultLang` is false: `/en/page` will be `/page` and spanish will be `/es/page`)
+ *
+ * @returns An array of paths for all languages
+ */
+export declare const staticPaths: () => {
+    params: {
+        locale: string | undefined;
+    };
+}[];
+export {};

package/dist/lib/i18n/index.js

@@ -0,0 +1,63 @@
+import { defaultLang, showDefaultLang } from "./config.js";
+const uiTranslations = {
+  "en-us": await import("./translations/en-us.json")
+};
+function useTranslations(lang, component) {
+  return function t(key) {
+    const translation = uiTranslations[lang].translations[component][key];
+    if (translation === void 0 || translation === "") {
+      return uiTranslations[defaultLang].translations[component][key];
+    }
+    return translation;
+  };
+}
+function useTranslatedPath(lang) {
+  return function translatePath(path, l = lang) {
+    return !showDefaultLang && l === defaultLang ? path : `/${l}${path}`;
+  };
+}
+const languageSelectorOptions = Object.keys(uiTranslations).map((key) => {
+  return {
+    key,
+    value: uiTranslations[key].displayName
+  };
+});
+function getLangFromUrl(url) {
+  const [, lang] = url.pathname.split("/");
+  if (lang && lang in uiTranslations) return lang;
+  return defaultLang;
+}
+function getCurrentURLPath(Astro) {
+  if (Astro.url.pathname.includes("/_server-islands")) {
+    const path2 = new URL(Astro.request.headers.get("referer") || "");
+    const currentLang2 = getLangFromUrl(path2);
+    return currentLang2 === defaultLang ? path2.pathname : path2.pathname.replace(`/${currentLang2}/`, "/");
+  }
+  const path = Astro.url;
+  const currentLang = getLangFromUrl(path);
+  return currentLang === defaultLang ? path.pathname : path.pathname.replace(`/${currentLang}/`, "/");
+}
+function switchLanguage(Astro) {
+  return function switcher(languageKey) {
+    const translatePath = useTranslatedPath(languageKey);
+    return translatePath(getCurrentURLPath(Astro));
+  };
+}
+const staticPaths = () => {
+  const paths = [];
+  if (!showDefaultLang) paths.push({ params: { locale: void 0 } });
+  for (const lang in uiTranslations) {
+    if (lang === defaultLang && !showDefaultLang) continue;
+    paths.push({ params: { locale: lang } });
+  }
+  return paths;
+};
+export {
+  getCurrentURLPath,
+  getLangFromUrl,
+  languageSelectorOptions,
+  staticPaths,
+  switchLanguage,
+  useTranslatedPath,
+  useTranslations
+};

package/dist/lib/i18n/translations/de.json

@@ -0,0 +1,63 @@
+{
+  "displayName": "German (de-DE)",
+  "translations": {
+    "@studiocms/auth:login": {
+      "title": "Login-Seite",
+      "description": "Login-Seite",
+      "header": "Login",
+      "sub-header-usernamepasswordoauth": "Gebe deinen Nutzername & Passwort ein oder verwende einen der Login-Anbieter, um dich einzuloggen.",
+      "sub-header-usernamepassword": "Gebe deinen Nutzername und Passwort ein.",
+      "sub-header-oauth": "Wähle einen der Anbieter um dich einzuloggen.",
+      "sub-header-noprovider": "Kein Login-Anbieter konfiguriert. Bitte kontaktiere deinen Administrator.",
+      "username-label": "Nutzername",
+      "password-label": "Passwort",
+      "login-button": "Einloggen",
+      "allow-registration-noaccount": "Du hast keinen Account?",
+      "allow-registration-register": "Registriere dich hier!"
+    },
+    "@studiocms/auth:signup": {
+      "title": "Registrierungsseite",
+      "description": "Registrierungsseite",
+      "header": "Registrierung",
+      "sub-header-usernamepasswordoauth": "Erstelle einen Account mit einer der vorliegenden Optionen.",
+      "sub-header-usernamepassword": "Erstelle einen Account mit dem Registrierungs-Formular.",
+      "sub-header-oauth": "Nutze eine der Optionen, um dich einzuloggen.",
+      "sub-header-noprovider": "Kein Login-Provider konfiguriert. Bitte kontaktiere deinen Administrator.",
+      "username-label": "Benutzername",
+      "email-label": "E-Mail",
+      "displayname-label": "Anzeigename",
+      "password-label": "Passwort",
+      "confirm-password-label": "Passwort bestätigen",
+      "create-account-button": "Account erstellen",
+      "allow-login-haveaccount": "Du hast bereits einen Account?",
+      "allow-login-login": "Logge dich hier ein!"
+    },
+    "@studiocms/auth:logout": {
+      "title": "Logout-Seite",
+      "description": "Logout-Seite"
+    },
+    "@studiocms/auth:oauth-stack": {
+      "or-login-with": "oder logge dich ein mit:"
+    },
+    "@studiocms/dashboard:index": {
+      "title-button:discord": "Trete der Community bei",
+      "sub-header": "StudioCMS ist ein gratis, open-source content management system, welches von Grund auf von der Astro Community erstellt wurde.",
+      "title": "Dashboard",
+      "welcome-title": "Willkommen",
+      "title-button:feedback": "Gib' uns Feedback"
+    },
+    "@studiocms/dashboard:sidebar": {
+      "category-1-header": "Dashboard",
+      "dashboard-link-label": "Dashboard",
+      "content-management-label": "Content Management",
+      "category-2-header": "Admin",
+      "site-configuration-label": "Seitenkonfiguration",
+      "user-management-label": "Nutzermanagement",
+      "category-3-header": "Plugins",
+      "category-3-empty-placeholder": "Keine Plugins mit Einstellungsseiten gefunden.",
+      "user-dropdown:settings": "Nutzereinstellungen",
+      "user-dropdown:view-site": "Website besuchen",
+      "user-dropdown:logout": "Ausloggen"
+    }
+  }
+}

package/dist/lib/i18n/translations/en-us.json

@@ -0,0 +1,63 @@
+{
+  "displayName": "English (en-US)",
+  "translations": {
+    "@studiocms/auth:login": {
+      "title": "Login Page",
+      "description": "Login Page",
+      "header": "Login",
+      "sub-header-usernamepasswordoauth": "Enter your username & password or log in using one of the options below.",
+      "sub-header-usernamepassword": "Enter your username & password.",
+      "sub-header-oauth": "Log in using one of the options below.",
+      "sub-header-noprovider": "No Login provider configured. Please contact your administrator.",
+      "username-label": "Username",
+      "password-label": "Password",
+      "login-button": "Log In",
+      "allow-registration-noaccount": "Don't have an account?",
+      "allow-registration-register": "Register here!"
+    },
+    "@studiocms/auth:signup": {
+      "title": "Sign Up Page",
+      "description": "Sign Up Page",
+      "header": "Sign Up",
+      "sub-header-usernamepasswordoauth": "Create an account or log in using one of the options below.",
+      "sub-header-usernamepassword": "Create an account using the form below.",
+      "sub-header-oauth": "Log in using one of the options below.",
+      "sub-header-noprovider": "No Login provider configured. Please contact your administrator.",
+      "username-label": "Username",
+      "email-label": "Email",
+      "displayname-label": "Display Name",
+      "password-label": "Password",
+      "confirm-password-label": "Confirm Password",
+      "create-account-button": "Create Account",
+      "allow-login-haveaccount": "Already have an account?",
+      "allow-login-login": "Login here!"
+    },
+    "@studiocms/auth:logout": {
+      "title": "Logout Page",
+      "description": "Logout Page"
+    },
+    "@studiocms/auth:oauth-stack": {
+      "or-login-with": "or log in using"
+    },
+    "@studiocms/dashboard:index": {
+      "title": "Dashboard",
+      "welcome-title": "Welcome",
+      "title-button:discord": "Join the Community",
+      "title-button:feedback": "Give Feedback",
+      "sub-header": "StudioCMS is a free and open-source content management system built from the ground up by the Astro community."
+    },
+    "@studiocms/dashboard:sidebar": {
+      "category-1-header": "Dashboard",
+      "dashboard-link-label": "Dashboard",
+      "content-management-label": "Content Management",
+      "category-2-header": "Admin",
+      "site-configuration-label": "Site Configuration",
+      "user-management-label": "User Management",
+      "category-3-header": "Plugins",
+      "category-3-empty-placeholder": "No plugins with settings pages found.",
+      "user-dropdown:settings": "User Settings",
+      "user-dropdown:view-site": "View Site",
+      "user-dropdown:logout": "Log Out"
+    }
+  }
+}

package/dist/lib/i18n/translations/es.json

@@ -0,0 +1,63 @@
+{
+  "displayName": "Español (es)",
+  "translations": {
+    "@studiocms/auth:login": {
+      "title": "Página de Inicio de sesión",
+      "description": "Página de Inicio de sesión",
+      "header": "Inicio de sesión",
+      "sub-header-usernamepasswordoauth": "Ingresa tu usuario y contraseña o inicia sesión con alguna de las opciones de abajo.",
+      "sub-header-usernamepassword": "Ingresa tu usuario y contraseña.",
+      "sub-header-oauth": "Inicia sesión usando alguna de las opciones de abajo.",
+      "sub-header-noprovider": "No se ha configurado ningún proveedor de inicio de sesión. Póngase en contacto con su administrador.",
+      "username-label": "Usuario",
+      "password-label": "Contraseña",
+      "login-button": "Iniciar sesión",
+      "allow-registration-noaccount": "¿Tienes cuenta?",
+      "allow-registration-register": "¡Registrarse aquí!"
+    },
+    "@studiocms/auth:signup": {
+      "title": "Página de registro",
+      "description": "Página de registro",
+      "header": "Registrarse",
+      "sub-header-usernamepasswordoauth": "Crea una cuenta o inicia sesión con una de las opciones de abajo.",
+      "sub-header-usernamepassword": "Crea una cuenta usando el formulario de abajo.",
+      "sub-header-oauth": "Inicia sesión utilizando una de las opciones de abajo.",
+      "sub-header-noprovider": "No se ha configurado ningún proveedor de inicio de sesión. Póngase en contacto con su administrador.",
+      "username-label": "Usuario",
+      "email-label": "Correo electrónico",
+      "displayname-label": "Nombre de visualización",
+      "password-label": "Contraseña",
+      "confirm-password-label": "Confirmar contraseña",
+      "create-account-button": "Crear cuenta",
+      "allow-login-haveaccount": "¿Ya tienes cuenta?",
+      "allow-login-login": "¡Inicia sesión aquí!"
+    },
+    "@studiocms/auth:logout": {
+      "title": "Página de cierre de sesión",
+      "description": "Página de cierre de sesión"
+    },
+    "@studiocms/auth:oauth-stack": {
+      "or-login-with": "o inicia sesión utilizando"
+    },
+    "@studiocms/dashboard:index": {
+      "title": "Panel de control",
+      "welcome-title": "Bienvenido",
+      "title-button:discord": "Unirse a la comunidad",
+      "title-button:feedback": "Dar retroalimentación",
+      "sub-header": "StudioCMS es un sistema de gestión de contenido gratuito y de código abierto construido desde cero por la comunidad Astro."
+    },
+    "@studiocms/dashboard:sidebar": {
+      "category-1-header": "Panel de control",
+      "dashboard-link-label": "Panel de control",
+      "content-management-label": "Gestión de contenido",
+      "category-2-header": "Administrador",
+      "site-configuration-label": "Configuración de sitio",
+      "user-management-label": "Administración de usuarios",
+      "category-3-header": "Complementos",
+      "category-3-empty-placeholder": "No se han encontrado plugins con páginas de configuración.",
+      "user-dropdown:settings": "Configuración de usuario",
+      "user-dropdown:view-site": "Ver sitio",
+      "user-dropdown:logout": "Cerrar sesión"
+    }
+  }
+}