Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Start of dashboard i18n logic & implement on new Auth pages #372

Merged
merged 42 commits into from
Nov 20, 2024
Merged
Show file tree
Hide file tree
Changes from 41 commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
ac18724
start of i18n support
Adammatthiesen Nov 13, 2024
459ce01
add changeset
Adammatthiesen Nov 13, 2024
838fd24
add docs
Adammatthiesen Nov 14, 2024
e4c4966
move functions around and add jsdocs
Adammatthiesen Nov 14, 2024
025cb56
Added translation using Weblate (German) (#374)
Nov 15, 2024
e0b7ed4
add labeler
Adammatthiesen Nov 15, 2024
ab5d092
Add @changesets/write and execa dependencies and implement automatate…
Adammatthiesen Nov 15, 2024
6a06021
Refactor translation-changesets workflow to remove unnecessary code
Adammatthiesen Nov 15, 2024
27dde3d
Update workflow
Adammatthiesen Nov 15, 2024
b149a85
simplify
Adammatthiesen Nov 15, 2024
18b1fb1
Refactor translation-changesets workflow to use GitHub Actions expres…
Adammatthiesen Nov 15, 2024
16e2319
fix
Adammatthiesen Nov 15, 2024
5542979
add new custom script to replace github-script that was not working
Adammatthiesen Nov 15, 2024
86f7990
Refactor translation-changesets workflow to fix command typo
Adammatthiesen Nov 15, 2024
6e06d8c
Core i18n:Translations update from StudioCMS i18n (#376)
Nov 15, 2024
65ace07
Update www/docs/src/content/docs/contributing/getting-started.mdx
Adammatthiesen Nov 16, 2024
d5e2719
move info around to fix the new contributing sections
Adammatthiesen Nov 16, 2024
ce3f543
Merge branch 'issue-0304' into dashboard-i18n
Adammatthiesen Nov 17, 2024
f3c234a
Remove css imports
TheOtterlord Nov 17, 2024
79b0990
Add theme helper, theme toggle component, docs (#377)
louisescher Nov 17, 2024
ee0666c
Add Sentry monitoring (#378)
Adammatthiesen Nov 17, 2024
e20122d
start of i18n support
Adammatthiesen Nov 13, 2024
f598ebe
add changeset
Adammatthiesen Nov 13, 2024
e72177f
add docs
Adammatthiesen Nov 14, 2024
c07a2e3
move functions around and add jsdocs
Adammatthiesen Nov 14, 2024
7ffc807
Added translation using Weblate (German) (#374)
Nov 15, 2024
462a8b5
add labeler
Adammatthiesen Nov 15, 2024
d7e7fc0
Add @changesets/write and execa dependencies and implement automatate…
Adammatthiesen Nov 15, 2024
3401b64
Refactor translation-changesets workflow to remove unnecessary code
Adammatthiesen Nov 15, 2024
c05a858
Update workflow
Adammatthiesen Nov 15, 2024
d92ea4b
simplify
Adammatthiesen Nov 15, 2024
8319d81
Refactor translation-changesets workflow to use GitHub Actions expres…
Adammatthiesen Nov 15, 2024
1ec6137
fix
Adammatthiesen Nov 15, 2024
5cd08ce
add new custom script to replace github-script that was not working
Adammatthiesen Nov 15, 2024
f14387b
Refactor translation-changesets workflow to fix command typo
Adammatthiesen Nov 15, 2024
c0d8cb8
Core i18n:Translations update from StudioCMS i18n (#376)
Nov 15, 2024
625bb99
Update www/docs/src/content/docs/contributing/getting-started.mdx
Adammatthiesen Nov 16, 2024
38a78a9
move info around to fix the new contributing sections
Adammatthiesen Nov 16, 2024
a62c502
fix lockfile
Adammatthiesen Nov 17, 2024
787c190
Merge remote-tracking branch 'origin/dashboard-i18n' into dashboard-i18n
Adammatthiesen Nov 17, 2024
b006140
fix lockfile
Adammatthiesen Nov 17, 2024
b854ea7
update sentry settings to enable session replay
Adammatthiesen Nov 20, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/long-cherries-exercise.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@studiocms/core": patch
---

Translation Updated (PR: #376)
17 changes: 17 additions & 0 deletions .changeset/perfect-hornets-swim.md
Original file line number Diff line number Diff line change
@@ -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).
5 changes: 5 additions & 0 deletions .changeset/sharp-zoos-tickle.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@studiocms/ui": patch
---

Added a theme helper and theme toggle component
5 changes: 5 additions & 0 deletions .github/labeler.yml
Original file line number Diff line number Diff line change
@@ -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/*
11 changes: 11 additions & 0 deletions .github/workflows/changeset-release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
10 changes: 10 additions & 0 deletions .github/workflows/changeset-snapshot.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
17 changes: 17 additions & 0 deletions .github/workflows/labeler.yml
Original file line number Diff line number Diff line change
@@ -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
46 changes: 46 additions & 0 deletions .github/workflows/translation-changesets.yml
Original file line number Diff line number Diff line change
@@ -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: [email protected]
commit_author: StudioCMS <[email protected]>
6 changes: 5 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 6 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
Original file line number Diff line number Diff line change
@@ -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} />)
Expand Down
33 changes: 33 additions & 0 deletions packages/studiocms_auth/src/components/StaticAuthCheck.astro
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 7 additions & 1 deletion packages/studiocms_auth/src/integration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export default defineIntegration({
},
experimental: {
directRenderScript: true,
serverIslands: true,
},
vite: {
optimizeDeps: {
Expand Down Expand Up @@ -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'),
Expand Down Expand Up @@ -170,7 +176,7 @@ export default defineIntegration({
},
{
pattern: 'logout/',
entrypoint: resolve('./routes/logout.ts'),
entrypoint: resolve('./routes/logout.astro'),
enabled: dashboardEnabled && !options.dbStartPage,
},
{
Expand Down
14 changes: 8 additions & 6 deletions packages/studiocms_auth/src/layouts/AuthLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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">
Expand Down Expand Up @@ -87,7 +89,7 @@ const fallbackImageSrc = loginPageBackground === 'custom'

<slot />

<OAuthButtonStack />
{ !disableScreen && <OAuthButtonStack /> }

<div class="form-footer">
<slot name="footer" />
Expand Down
43 changes: 24 additions & 19 deletions packages/studiocms_auth/src/routes/login.astro
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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>
Expand Down
Loading