alineacms · benmerckx · Jul 23, 2025 · Jul 23, 2025 · Jul 23, 2025 · Jul 23, 2025
diff --git a/apps/dev/src/cms.tsx b/apps/dev/src/cms.tsx
@@ -1,5 +1,6 @@
 import {Config} from 'alinea'
 import {createCMS} from 'alinea/next'
+import {nl} from 'alinea/translations'
 import {IcRoundTranslate} from 'alinea/ui/icons/IcRoundTranslate'
 import {IcRoundUploadFile} from 'alinea/ui/icons/IcRoundUploadFile'
 import * as schema from './schema'
@@ -41,14 +42,17 @@ export const cms = createCMS({
         }),
         media: Config.media()
       }
-    })
-    /*secondary: Config.workspace('Secondary workspace', {
+    }),
+    secondary: Config.workspace('Secondary workspace', {
       source: 'content/secondary',
       roots: {
         pages: Config.root('Pages', {
           contains: ['Page', 'Folder']
         })
       }
-    })*/
+    })
+  },
+  interfaceLanguages: {
+    nl
   }
 })
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -49,7 +49,8 @@
   "dependencies": {
     "@alinea/iso": "^0.3.3",
     "@types/node": "^24.0.15",
-    "esbuild": "^0.25.4"
+    "esbuild": "^0.25.4",
+    "stylus": "^0.0.1-security"
   },
   "peerDependencies": {
     "react": "*",
@@ -85,7 +86,7 @@
     "speedscope": "^1.14.0",
     "symlink-dir": "^6.0.5",
     "typescript": "5.6.2",
-    "typescript-plugin-css-modules": "^5.0.2",
+    "typescript-plugin-css-modules": "^5.2.0",
     "yjs-src": "npm:yjs@13.6.11"
   },
   "packageManager": "yarn@4.5.0",

diff --git a/src/cloud/view/CloudAuth.browser.tsx b/src/cloud/view/CloudAuth.browser.tsx
@@ -1,6 +1,7 @@
 import type {Auth} from 'alinea/core/Auth'
 import {Client} from 'alinea/core/Client'
 import {useDashboard} from 'alinea/dashboard/hook/UseDashboard'
+import {useTranslation} from 'alinea/dashboard/hook/UseTranslation'
 import {Head} from 'alinea/dashboard/util/Head'
 import {Button, HStack, px, Typo, VStack} from 'alinea/ui'
 import {LogoShape} from 'alinea/ui/branding/LogoShape'
@@ -11,6 +12,7 @@ import {useQuery} from 'react-query'
 import {type AuthResult, AuthResultType} from '../AuthResult.js'
 
 export function CloudAuthView({setSession}: Auth.ViewProps) {
+  const {cloudAuthView: t} = useTranslation()
   const {client} = useDashboard()
   if (!(client instanceof Client))
     throw new Error('Cannot authenticate with non http client')
@@ -28,7 +30,7 @@ export function CloudAuthView({setSession}: Auth.ViewProps) {
     return (
       <>
         <Head>
-          <title>Alinea</title>
+          <title>{t.title}</title>
         </Head>
         <div style={{display: 'flex', height: '100%', width: '100%'}}>
           <div style={{margin: 'auto', padding: px(20)}}>
@@ -37,14 +39,15 @@ export function CloudAuthView({setSession}: Auth.ViewProps) {
                 <LogoShape>
                   <IcRoundPublish />
                 </LogoShape>
-                <Typo.H1 flat>Ready to deploy?</Typo.H1>
+                <Typo.H1 flat>{t.deploy}</Typo.H1>
               </HStack>
               <Typo.P>
-                Alinea requires a{' '}
-                <Typo.Link href="https://alineacms.com/docs/deploy" target="_blank">
-                  handler
-                </Typo.Link>{' '}
-                to continue.
+                <Typo.Link
+                  href="https://alineacms.com/docs/deploy"
+                  target="_blank"
+                >
+                  {t.requiresHandler}
+                </Typo.Link>
               </Typo.P>
             </VStack>
           </div>
@@ -67,16 +70,15 @@ export function CloudAuthView({setSession}: Auth.ViewProps) {
       })
       return null
     case AuthResultType.UnAuthenticated:
-      location.href =
-        `${data.redirect}&from=${encodeURIComponent(
-          `${location.protocol}//${location.host}${location.pathname}`
-        )}`
+      location.href = `${data.redirect}&from=${encodeURIComponent(
+        `${location.protocol}//${location.host}${location.pathname}`
+      )}`
       return null
     case AuthResultType.MissingApiKey:
       return (
         <>
           <Head>
-            <title>Alinea</title>
+            <title>{t.title}</title>
           </Head>
           <div style={{display: 'flex', height: '100%', width: '100%'}}>
             <div style={{margin: 'auto', padding: px(20)}}>
@@ -85,21 +87,21 @@ export function CloudAuthView({setSession}: Auth.ViewProps) {
                   <LogoShape>
                     <IcRoundPublish />
                   </LogoShape>
-                  <Typo.H1 flat>Ready to deploy?</Typo.H1>
+                  <Typo.H1 flat>{t.deploy}</Typo.H1>
                 </HStack>
                 <Typo.P>
-                  Alinea requires a backend to continue.
+                  {t.backend}
                   <br />
                   You can{' '}
                   <Typo.Link
                     href="https://alineacms.com/docs/deploy"
                     target="_blank"
                   >
-                    <span>fully configure a custom backend</span>
+                    <span>{t.customBackend}</span>
                   </Typo.Link>
                   .
                   <br />
-                  Or get set up in a few clicks with our cloud offering.
+                  {t.cloud}
                 </Typo.P>
                 <div>
                   <Button
@@ -109,7 +111,7 @@ export function CloudAuthView({setSession}: Auth.ViewProps) {
                     )}`}
                     iconRight={IcRoundArrowForward}
                   >
-                    Continue with alinea.cloud
+                    {t.cloudButton}
                   </Button>
                 </div>
               </VStack>

diff --git a/src/core/Config.ts b/src/core/Config.ts
@@ -1,16 +1,17 @@
 import {CloudAuthView} from 'alinea/cloud/view/CloudAuth'
-import type {Preview} from 'alinea/core/Preview'
 import {MediaFile, MediaLibrary} from 'alinea/core/media/MediaTypes'
+import type {Preview} from 'alinea/core/Preview'
+import type {en} from 'alinea/translations'
 import type {Auth} from './Auth.js'
 import {getWorkspace} from './Internal.js'
 import {Root} from './Root.js'
 import {Schema} from './Schema.js'
 import {getScope} from './Scope.js'
 import {Type} from './Type.js'
-import {Workspace, type WorkspaceInternal} from './Workspace.js'
 import {isValidIdentifier} from './util/Identifiers.js'
 import {entries, values} from './util/Objects.js'
 import * as paths from './util/Paths.js'
+import {Workspace, type WorkspaceInternal} from './Workspace.js'
 
 /** Configuration options */
 export interface Config {
@@ -35,6 +36,9 @@ export interface Config {
   /** Filename of the generated dashboard */
   dashboardFile?: string
 
+  /** Supported interface languages */
+  interfaceLanguages?: Record<string, typeof en>
+
   auth?: Auth.View
 }
 

diff --git a/src/dashboard/App.tsx b/src/dashboard/App.tsx
@@ -2,39 +2,40 @@ import {Config} from 'alinea/core/Config'
 import type {LocalConnection} from 'alinea/core/Connection'
 import {Root} from 'alinea/core/Root'
 import {Icon, Loader, px} from 'alinea/ui'
-import {Statusbar} from 'alinea/ui/Statusbar'
 import {FavIcon} from 'alinea/ui/branding/FavIcon'
 import {IcRoundCheck} from 'alinea/ui/icons/IcRoundCheck'
 import {IcRoundDescription} from 'alinea/ui/icons/IcRoundDescription'
 import {IcRoundSync} from 'alinea/ui/icons/IcRoundSync'
 import {MaterialSymbolsDatabase} from 'alinea/ui/icons/MaterialSymbolsDatabase'
+import {Statusbar} from 'alinea/ui/Statusbar'
 import {atom, useAtom, useAtomValue} from 'jotai'
 import {type ComponentType, useEffect} from 'react'
 import type {QueryClient} from 'react-query'
-import {navMatchers} from './DashboardNav.js'
-import {DashboardProvider} from './DashboardProvider.js'
-import {router} from './Routes.js'
 import {sessionAtom} from './atoms/DashboardAtoms.js'
 import {dbMetaAtom, pendingAtom, useDbUpdater} from './atoms/DbAtoms.js'
 import {errorAtom} from './atoms/ErrorAtoms.js'
 import {locationAtom, matchAtoms} from './atoms/LocationAtoms.js'
 import {usePreferredLanguage} from './atoms/NavigationAtoms.js'
-import {RouteView, RouterProvider} from './atoms/RouterAtoms.js'
+import {RouterProvider, RouteView} from './atoms/RouterAtoms.js'
 import type {WorkerDB} from './boot/WorkerDB.js'
+import {navMatchers} from './DashboardNav.js'
+import {DashboardProvider} from './DashboardProvider.js'
 import {useDashboard} from './hook/UseDashboard.js'
 import {useEntryLocation} from './hook/UseEntryLocation.js'
 import {useLocale} from './hook/UseLocale.js'
 import {useNav} from './hook/UseNav.js'
 import {useRoot} from './hook/UseRoot.js'
+import {useTranslation} from './hook/UseTranslation.js'
 import {useWorkspace} from './hook/UseWorkspace.js'
+import {router} from './Routes.js'
 import {Head} from './util/Head.js'
 import {SuspenseBoundary} from './util/SuspenseBoundary.js'
 import {ErrorBoundary} from './view/ErrorBoundary.js'
 import {Modal} from './view/Modal.js'
 import {Sidebar} from './view/Sidebar.js'
+import {SidebarSettings} from './view/sidebar/SidebarSettings.js'
 import {Toolbar} from './view/Toolbar.js'
 import {Viewport} from './view/Viewport.js'
-import {SidebarSettings} from './view/sidebar/SidebarSettings.js'
 
 const isEntryAtom = atom(get => {
   const location = get(locationAtom)
@@ -43,6 +44,7 @@ const isEntryAtom = atom(get => {
 })
 
 function AppAuthenticated() {
+  const {app: t} = useTranslation()
   useDbUpdater()
   const {alineaDev, fullPage} = useDashboard()
   const nav = useNav()
@@ -117,7 +119,7 @@ function AppAuthenticated() {
                 <Statusbar.Status
                   icon={pending === 0 ? IcRoundCheck : IcRoundSync}
                 >
-                  {pending === 0 ? 'Synced' : 'Saving…'}
+                  {pending === 0 ? t.synced : t.saving}
                 </Statusbar.Status>
 
                 {sha ? (
@@ -126,7 +128,7 @@ function AppAuthenticated() {
                   </Statusbar.Status>
                 ) : (
                   <Statusbar.Status icon={MaterialSymbolsDatabase}>
-                    Syncing
+                    {t.syncing}
                   </Statusbar.Status>
                 )}
               </Statusbar.Root>

diff --git a/src/dashboard/Welcome.tsx b/src/dashboard/Welcome.tsx
@@ -1,14 +1,16 @@
+import {useTranslation} from 'alinea/dashboard/hook/UseTranslation'
 import {px, Typo, VStack} from 'alinea/ui'
 
 export function Welcome() {
+  const {welcome: t} = useTranslation()
   return (
     <VStack gap={20} style={{marginTop: px(20), padding: px(6)}}>
-      <p>Your alinea installation is now ready for configuration.</p>
+      <p>{t.title}</p>
       <Typo.Link
         href="https://alineacms.com/docs/configuration/intro"
         target="_blank"
       >
-        Learn how to configure
+        {t.button}
       </Typo.Link>
     </VStack>
   )