Start of dashboard i18n logic & implement on new Auth pages

.changeset/long-cherries-exercise.md

@@ -0,0 +1,5 @@
+---
+"@studiocms/core": patch
+---
+
+Translation Updated (PR: #376)

.changeset/perfect-hornets-swim.md

@@ -0,0 +1,17 @@
+---
+"studiocms": patch
+"@studiocms/auth": patch
+"@studiocms/core": patch
+---
+
+Introduce Dashboard i18n logic
+
+- `studiocms` & `@studiocms/core`:
+    - Introduce new virtual module `studiocms:i18n`:
+    This module includes utilities for our new i18n system.
+    - Add new LanguageSelector component
+    - Add `en-us` translation file. (`packages/studiocms_core/i18n/translations/`)
+
+- `@studiocms/auth`:
+    - Update login/signup routes to utilize new i18n translations
+    - Transition routes to Hybrid type setup, All API routes will remain server rendered, while pages are now prerendered (Server islands when needed).

.changeset/sharp-zoos-tickle.md

@@ -0,0 +1,5 @@
+---
+"@studiocms/ui": patch
+---
+
+Added a theme helper and theme toggle component

.github/labeler.yml

@@ -0,0 +1,5 @@
+# See https://github.com/actions/labeler/tree/main for more information about the labeler action
+
+translations:
+  - changed-files:
+      - any-glob-to-any-file: packages/studiocms_core/src/i18n/translations/*

.github/workflows/changeset-release.yml

@@ -47,6 +47,17 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.STUDIOCMS_SERVICE_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
+      - name: Create Sentry release
+        if: steps.changesets.outputs.published == 'true'
+        uses: getsentry/action-release@v1
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_ORG: studiocms
+          SENTRY_URL: https://sentry.studiocms.xyz/
+        with:
+          environment: production
+          projects: studiocms-playground studiocms-ui-testing
+
       - name: Add Label to CI PR
         if: ${{ steps.changesets.outputs.hasChangesets == 'true' }}
         run: gh pr edit "$PR_URL" --add-label "ci"

.github/workflows/changeset-snapshot.yml

@@ -134,6 +134,16 @@ jobs:
           FORCE_COLOR: 0
           NO_COLOR: 1
 
+      - name: Create Sentry release
+        uses: getsentry/action-release@v1
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_ORG: studiocms
+          SENTRY_URL: https://sentry.studiocms.xyz/
+        with:
+          environment: production
+          projects: studiocms-playground studiocms-ui-testing
+
       - name: Pull Request Notification
         uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
         env:

.github/workflows/labeler.yml

@@ -0,0 +1,17 @@
+name: Pull Request Labeler
+
+on: [pull_request_target]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  label:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/labeler@v5
+        with:
+          repo-token: "${{ secrets.STUDIOCMS_SERVICE_TOKEN }}"
+          configuration-path: .github/labeler.yml
+          sync-labels: true

.github/workflows/translation-changesets.yml

@@ -0,0 +1,46 @@
+name: Translation Changesets
+
+on:
+    pull_request:
+      types: [labeled, synchronize]
+
+permissions:
+  contents: write
+
+jobs:
+  build-translation-changesets:
+    runs-on: ubuntu-latest
+    if: contains(github.event.pull_request.labels.*.name, 'translations') && github.event.pull_request.user.login == 'studiocms-no-reply'
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+        with:
+            ref: ${{ github.head_ref }}
+            token: ${{ secrets.STUDIOCMS_SERVICE_TOKEN }}
+
+      - name: Setup pnpm (corepack enabled)
+        uses: pnpm/action-setup@v3
+
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4
+        with:
+          node-version-file: '.node-version'
+          cache: 'pnpm'
+
+      - name: Install Dependencies
+        run: pnpm ci:install
+        shell: bash
+
+      - name: Create Translation Changesets
+        run: pnpm translations:changeset
+        env:
+          CI_PULL_REQUEST_NUMBER: ${{ github.event.pull_request.number }}
+
+      - name: Commit changes
+        uses: stefanzweifel/git-auto-commit-action@8621497c8c39c72f3e2a999a26b4ca1b5058a842 # v5
+        with:
+          commit_message: '[ci] changesets'
+          branch: ${{ github.head_ref }}
+          commit_user_name: astrolicious
+          commit_user_email: no-reply@studiocms.xyz
+          commit_author: StudioCMS <no-reply@studiocms.xyz>

README.md

@@ -17,9 +17,13 @@ To see how to get started, check out the [StudioCMS README](./packages/studiocms
 
 <a href="https://turso.tech" rel="sponsored" target="_blank"><img src="https://turso.tech/logokit/turso-logo-illustrated.svg" width="400px" /></a>
 
+## StudioCMS Dashboard i18n Status
+
+<a href="https://i18n.studiocms.xyz/engage/studiocms/"><img src="https://i18n.studiocms.xyz/widget/studiocms/287x66-black.png" alt="Translation status" /></a>
+
 ## Contributing
 
-We welcome contributions from the community! Whether it's bug reports, feature requests, or code contributions, we appreciate your help in making this project better. To get started read our [Contributing Guide](https://docs.studiocms.xyz/start-here/contributing/)
+We welcome contributions from the community! Whether it's bug reports, feature requests, or code contributions, we appreciate your help in making this project better. To get started read our [Contributing Guide](https://docs.studiocms.xyz/contributing/getting-started/)
 
 ## Chat with Us
 

package.json

@@ -27,14 +27,18 @@
     "update:web": "pnpm --filter web up --latest",
     "update:docs": "pnpm --filter docs up --latest",
     "web:dev": "pnpm --filter web dev",
-    "docs:dev": "pnpm --filter docs dev"
+    "docs:dev": "pnpm --filter docs dev",
+    "translations:changeset": "tsm --require=./scripts/filter-warnings.cjs ./scripts/translation-changeset.ts"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.3",
     "@moonrepo/cli": "1.28.3",
     "@changesets/cli": "2.27.9",
     "@changesets/config": "3.0.3",
     "@changesets/changelog-github": "^0.5.0",
-    "typescript": "catalog:"
+    "@changesets/write": "0.3.2",
+    "execa": "9.5.1",
+    "typescript": "catalog:",
+    "tsm": "2.3.0"
   }
 }

packages/studiocms_auth/src/components/OAuthButtonStack.astro

@@ -1,12 +1,16 @@
 ---
+import { getLangFromUrl, useTranslations } from 'studiocms:i18n';
 import { Divider } from '@studiocms/ui/components';
 import OAuthButton from './OAuthButton.astro';
 import { providerData, showOAuth } from './oAuthButtonProviders';
 
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang, '@studiocms/auth:oauth-stack');
+
 const shouldShowOAuth = showOAuth && providerData.some(({ enabled }) => enabled);
 ---
 { shouldShowOAuth && ( 
-	<Divider>or log in using</Divider>
+	<Divider>{t('or-login-with')}</Divider>
     <div class="button-stack">
 	{
 		providerData.map(({enabled, ...props}) => enabled && <OAuthButton {...props} />)

packages/studiocms_auth/src/components/StaticAuthCheck.astro

@@ -0,0 +1,33 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+import { StudioCMSRoutes } from 'studiocms:helpers/routemap';
+import { getLangFromUrl, useTranslatedPath } from 'studiocms:i18n';
+
+const { isLoggedIn } = await getUserData(Astro);
+// Get the language and translations
+const referer = Astro.request.headers.get('referer');
+
+if (!referer) {
+	throw new Error('No referer found');
+}
+
+const lang = getLangFromUrl(new URL(referer));
+const translatePath = useTranslatedPath(lang);
+const {
+	mainLinks: { dashboardIndex },
+} = StudioCMSRoutes;
+---
+<div 
+  id="login-check" 
+  style="display: none;" 
+  data-isloggedin={`${isLoggedIn}`}
+  data-redirectroute={translatePath(dashboardIndex)}
+  ></div>
+
+<script is:inline>
+  const loginCheck = document.getElementById('login-check');
+
+  if (loginCheck.dataset.isloggedin === 'true') {
+    window.location.href = loginCheck.dataset.redirectroute;
+  }
+</script>

packages/studiocms_auth/src/integration.ts

@@ -83,6 +83,7 @@ export default defineIntegration({
 						},
 						experimental: {
 							directRenderScript: true,
+							serverIslands: true,
 						},
 						vite: {
 							optimizeDeps: {
@@ -112,6 +113,11 @@ export default defineIntegration({
 								entrypoint: resolve('./routes/api/login.ts'),
 								enabled: usernameAndPasswordAPI,
 							},
+							{
+								pattern: 'logout',
+								entrypoint: resolve('./routes/api/logout.ts'),
+								enabled: dashboardEnabled && !options.dbStartPage,
+							},
 							{
 								pattern: 'register',
 								entrypoint: resolve('./routes/api/register.ts'),
@@ -170,7 +176,7 @@ export default defineIntegration({
 							},
 							{
 								pattern: 'logout/',
-								entrypoint: resolve('./routes/logout.ts'),
+								entrypoint: resolve('./routes/logout.astro'),
 								enabled: dashboardEnabled && !options.dbStartPage,
 							},
 							{

packages/studiocms_auth/src/layouts/AuthLayout.astro

@@ -21,10 +21,11 @@ const {
 interface Props {
 	title: string;
 	description: string;
-	lang?: string;
+	lang: string;
+	disableScreen?: boolean;
 }
 
-const { title, description, lang = 'en' } = Astro.props;
+const { title, description, lang, disableScreen } = Astro.props;
 
 // Get the site config
 const siteConfig = await db
@@ -37,9 +38,10 @@ const siteConfig = await db
 const loginPageBackground = siteConfig?.loginPageBackground;
 const loginPageCustomImage = siteConfig?.loginPageCustomImage;
 
-const fallbackImageSrc = loginPageBackground === 'custom'
-	?	loginPageCustomImage
-	: validImages.find((x) => x.name !== 'custom' && x.name === loginPageBackground)?.dark; // TODO: Adapt to theme
+const fallbackImageSrc =
+	loginPageBackground === 'custom'
+		? loginPageCustomImage
+		: validImages.find((x) => x.name !== 'custom' && x.name === loginPageBackground)?.dark; // TODO: Adapt to theme
 ---
 <!doctype html>
 <html lang={lang} data-theme="dark">
@@ -87,7 +89,7 @@ const fallbackImageSrc = loginPageBackground === 'custom'
 
 			<slot />
 
-			<OAuthButtonStack />
+			{ !disableScreen && <OAuthButtonStack /> }
 
 			<div class="form-footer">
 				<slot name="footer" />

packages/studiocms_auth/src/routes/login.astro

@@ -1,11 +1,21 @@
 ---
-import { getUserData } from 'studiocms:auth/lib/user';
 import { authEnvCheck } from 'studiocms:auth/utils/authEnvCheck';
 import { StudioCMSRoutes } from 'studiocms:helpers/routemap';
+import { getLangFromUrl, staticPaths, useTranslatedPath, useTranslations } from 'studiocms:i18n';
 import Config from 'virtual:studiocms/config';
 import { Button, Input } from '@studiocms/ui/components';
+import type { GetStaticPaths } from 'astro';
+import StaticAuthCheck from '../components/StaticAuthCheck.astro';
 import AuthLayout from '../layouts/AuthLayout.astro';
-import { hashPassword } from '../lib/password';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang, '@studiocms/auth:login');
+const tPath = useTranslatedPath(lang);
+
+export const getStaticPaths = (() => {
+	const paths = staticPaths();
+	return paths;
+}) satisfies GetStaticPaths;
 
 const {
 	dashboardConfig: {
@@ -21,50 +31,45 @@ const {
 
 const {
 	authLinks: { loginAPI, signupURL },
-	mainLinks: { dashboardIndex },
 } = StudioCMSRoutes;
 
 const { SHOW_OAUTH } = await authEnvCheck(providers);
 
 let paragraph: string;
 
 if (usernameAndPassword && SHOW_OAUTH) {
-	paragraph = 'Enter your username & password or log in using one of the options below.';
+	paragraph = t('sub-header-usernamepasswordoauth');
 } else if (usernameAndPassword && !SHOW_OAUTH) {
-	paragraph = 'Enter your username & password.';
+	paragraph = t('sub-header-usernamepassword');
 } else if (!usernameAndPassword && SHOW_OAUTH) {
-	paragraph = 'Log in using one of the options below.';
+	paragraph = t('sub-header-oauth');
 } else {
-	paragraph = 'No Login provider configured. Please contact your administrator.';
-}
-
-const user = await getUserData(Astro);
-
-if (user.isLoggedIn) {
-	return Astro.redirect(dashboardIndex);
+	paragraph = t('sub-header-noprovider');
 }
 ---
-<AuthLayout title="Login Page" description="Login Page">
+<AuthLayout title={t('title')} description={t('description')} lang={lang}>
 
     <div slot="header" class="form-header">
-        <h1>Login</h1>
+        <h1>{t('header')}</h1>
         <p>{paragraph}</p>
     </div>
 
     { usernameAndPassword && (
         <form class="form" id="login-form" method="post" action={loginAPI}>
 
-            <Input label="Username" name="username" type="text" />
-            <Input label="Password" name="password" type='password' />
+            <Input label={t('username-label')} name="username" type="text" />
+            <Input label={t('password-label')} name="password" type='password' />
 
-            <Button as="button" type="submit" color='primary' size='md' variant='solid'><span>Log In</span></Button>
+            <Button as="button" type="submit" color='primary' size='md' variant='solid'><span>{t('login-button')}</span></Button>
         </form>
     )}
 
     { allowUserRegistration && (
-        <p slot="footer">Don't have an account? <a href={signupURL}>Register here!</a></p>
+        <p slot="footer">{t('allow-registration-noaccount')} <a href={tPath(signupURL)}>{t('allow-registration-register')}</a></p>
     )}
 
+    <StaticAuthCheck server:defer />
+
 </AuthLayout>
 
 <script>