live-codes · hatemhosny · Nov 25, 2024 · Aug 26, 2024 · Aug 26, 2024 · Aug 27, 2024
diff --git a/.bundlewatch.config.js b/.bundlewatch.config.js
@@ -18,12 +18,12 @@ module.exports = {
     // },
     {
       path: './build/livecodes/*.css',
-      maxSize: '15kB',
-    },
-    {
-      path: './build/livecodes/i18n-*.json',
-      maxSize: '10kB',
+      maxSize: '25kB',
     },
+    // {
+    //   path: './build/livecodes/i18n-*.json',
+    //   maxSize: '10kB',
+    // },
   ],
   defaultCompression: 'brotli',
   normalizeFilenames: /^.+?((\.[^.]{8,}}?)|())\.\w+$/,

diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 # LiveCodes
 
-Code Playground That Just Works!
+A Code Playground That Just Works!
 
 <p align="center">
 <img width="300" src="https://dev.livecodes.io/docs/img/livecodes-logo.svg"></img>
@@ -30,7 +30,7 @@ A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-sid
 
 ![LiveCodes list of languages screenshot](https://dev.livecodes.io/docs/img/screenshots/livecodes-languages.jpg)
 
-## Code Playground That Just Works!
+## A Code Playground That Just Works!
 
 - No servers to configure (or pay for!)
 - No databases to maintain (or pay for!)

diff --git a/docs/docs/about.md b/docs/docs/about.md
@@ -1,6 +1,6 @@
 # About us
 
-LiveCodes is built and maintained primarily by [Hatem Hosny](https://github.com/hatemhosny), from Egypt <img style={{ height: '0.8em' }} src="https://flagcdn.com/h20/eg.png" alt="Egypt"></img>.
+LiveCodes is built and maintained by [Hatem Hosny](https://github.com/hatemhosny), and wonderful [contributors](https://github.com/live-codes/livecodes/graphs/contributors).
 
 Feature requests and bug reports are received on the [GitHub repo](https://github.com/live-codes/livecodes/issues).
 

diff --git a/docs/docs/configuration/configuration-object.md b/docs/docs/configuration/configuration-object.md
@@ -59,23 +59,23 @@ Type: [`string`](../api/interfaces/Config.md#title)
 
 Default: `"Untitled Project"`
 
-Project title. This is used as [result page](../features/result.md) title and title meta tag. Also used in [project](../features/projects.md) search. This can be set in the UI from the title input (above result page) or from app menu → Project Info.
+Project title. This is used as [result page](../features/result.md) title and title meta tag. Also used in [project](../features/projects.md) search. This can be set in the UI from the title input (above result page) or from Project menu → Project Info.
 
 ### `description`
 
 Type: [`string`](../api/interfaces/Config.md#description)
 
 Default: `""`
 
-Project description. Used in [project](../features/projects.md) search and result page description meta tag. This can be set in the UI from app menu → Project Info.
+Project description. Used in [project](../features/projects.md) search and result page description meta tag. This can be set in the UI from Project menu → Project Info.
 
 ### `head`
 
 Type: [`string`](../api/interfaces/Config.md#head)
 
 Default: `'<meta charset="UTF-8" />\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />'`
 
-Content added to the [result page](../features/result.md) `<head>` element. This can be set in the UI from app menu → Project Info.
+Content added to the [result page](../features/result.md) `<head>` element. This can be set in the UI from Project menu → Project Info.
 
 ### `htmlAttrs`
 
@@ -88,15 +88,15 @@ Attributes added to the [result page](../features/result.md) `<html>` element. I
 Example: `{ lang: "en", class: "dark" }` or `'lang="en" class="dark"'`,  
 become `<html lang="en" class="dark">`.
 
-This can be set in the UI from app menu → Project Info.
+This can be set in the UI from Project menu → Project Info.
 
 ### `tags`
 
 Type: [`string[]`](../api/interfaces/Config.md#tags)
 
 Default: `[]`
 
-Project tags. Used in [project](../features/projects.md) filter and search. This can be set in the UI from app menu → Project Info.
+Project tags. Used in [project](../features/projects.md) filter and search. This can be set in the UI from Project menu → Project Info.
 
 ### `activeEditor`
 
@@ -114,7 +114,7 @@ Default: all supported languages in full app and only current editor languages i
 
 List of enabled languages. Languages that are not already loaded in the editors ([markup](#markup), [style](#style) and [script](#script)) can be selected from a drop down menu at the editor title.
 
-![Change Language](../../static/img/screenshots/languages.jpg)
+![Change Language](../../static/img/screenshots/languages-3.jpg)
 
 ### `markup`
 
@@ -485,6 +485,14 @@ Default: `"dark"`
 
 Sets the app [theme](../features/themes.md) to light/dark mode.
 
+### `themeColor`
+
+Type: [`string | undefined`](../api/interfaces/Config.md#themecolor)
+
+Default: `"hsl(214, 40%, 50%)"`
+
+A string representing a [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value), used to set the app [theme color](../features/themes.md). It can be any valid CSS color value, such as `"#4DB39E"`, `"rgb(245, 225, 49)"`, `"hsl(324, 40%, 50%)"` and `"lightblue"`.
+
 ### `editorTheme`
 
 Type: [`EditorTheme[] | string | undefined`](../api/interfaces/Config.md#editortheme)

diff --git a/docs/docs/configuration/query-params.md b/docs/docs/configuration/query-params.md
@@ -37,11 +37,14 @@ https://livecodes.io?js=console.log('Hello World!')&console=open
   [delay](./configuration-object.md#delay),
   [formatOnsave](./configuration-object.md#formatOnsave),
   [theme](./configuration-object.md#theme),
+  [themeColor](./configuration-object.md#themecolor),
   [appLanguage](./configuration-object.md#applanguage),
   [recoverUnsaved](./configuration-object.md#recoverUnsaved),
   [welcome](./configuration-object.md#welcome),
   [showSpacing](./configuration-object.md#showSpacing),
+  [layout](./configuration-object.md#layout),
   [editor](./configuration-object.md#editor),
+  [editorTheme](./configuration-object.md#editortheme),
   [fontFamily](./configuration-object.md#fontFamily),
   [fontSize](./configuration-object.md#fontSize),
   [useTabs](./configuration-object.md#useTabs),

diff --git a/docs/docs/features/ai.md b/docs/docs/features/ai.md
@@ -32,13 +32,13 @@ The AI code assistant can be enabled from:
 
 ### UI
 
-The [editor settings](./editor-settings.md) screen (App menu → Editor Settings → Enable AI Code Assistant).
+The [editor settings](./editor-settings.md) screen (Settings menu → Editor Settings → Enable AI Code Assistant).
 
 import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
 
 <RunInLiveCodes params={{screen: 'editor-settings'}} linkText="direct link" />
 
-![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-1.png)
+![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-1.jpg)
 
 **Note**
 

diff --git a/docs/docs/features/assets.md b/docs/docs/features/assets.md
@@ -6,7 +6,9 @@ The assets are saved locally on the user's device and are available across proje
 
 In addition, assets are supported in [sync](./sync.md), [backup](./backup-restore.md#backup) and [restore](./backup-restore.md#restore).
 
-The `Assets` screen can be accessed from app menu → Assets
+The `Assets` screen can be accessed from Settings menu → Assets
+
+![Assets](/img/screenshots/assets-1.jpg)
 
 import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
 
@@ -21,4 +23,4 @@ Assets are either:
 
 When an asset item is clicked, the URL is copied to clipboard. The URL can then be used in projects.
 
-![Assets](/img/screenshots/assets.png)
+![Assets](/img/screenshots/assets-2.jpg)
diff --git a/docs/docs/features/backup-restore.md b/docs/docs/features/backup-restore.md
@@ -2,15 +2,15 @@
 
 LiveCodes data can be backed-up, so that it can be later restored on the same or different device.
 
-The Backup/Restore screen can be accessed from the app menu → Backup / Restore.
+The Backup/Restore screen can be accessed from the Settings menu → Backup / Restore.
 
 import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
 
 <RunInLiveCodes params={{screen: 'backup'}} linkText="direct link" />
 
 ## Backup
 
-![LiveCode Backup](../../static/img/screenshots/backup.jpg)
+![LiveCode Backup](../../static/img/screenshots/backup-restore-1.jpg)
 
 The backup can include one or more of the following:
 
@@ -24,7 +24,7 @@ A zip file containing the (base64-encoded binary) backup data is downloaded. Thi
 
 ## Restore
 
-![LiveCode Restore](../../static/img/screenshots/restore.jpg)
+![LiveCode Restore](../../static/img/screenshots/backup-restore-2.jpg)
 
 When restoring a backup, there are 2 options for managing the current data:
 

diff --git a/docs/docs/features/broadcast.md b/docs/docs/features/broadcast.md
@@ -10,23 +10,23 @@ Broadcast can only be performed from the full app, and not from embedded playgro
 
 :::
 
-The `Broadcast` screen can be accessed from the Broadcast icon in the [tools pane](./tools-pane.md) (below the result page), or from the app menu → Broadcast.
+The `Broadcast` screen can be accessed from the Broadcast icon in the [tools pane](./tools-pane.md) (below the result page), or from the Project menu → Broadcast.
 
 import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
 
 <RunInLiveCodes params={{screen: 'broadcast'}} linkText="direct link" />
 
-![Broadcast UI](./../../static/img/screenshots/broadcast.jpg)
+![Broadcast UI](./../../static/img/screenshots/broadcast-1.jpg)
 
 On connecting to the server, the channel URL returned by the server is displayed. The channel URL can be shared to different clients (browsers on same or different devices) to view result page or code updates in real-time.
 
 If the option `Include source code` is enabled, the source and compiled code together with the current project configuration are also posted to the server with each update.
 
-![Broadcast UI - broadcasting](./../../static/img/screenshots/broadcasting.jpg)
+![Broadcast UI - broadcasting](./../../static/img/screenshots/broadcast-2.jpg)
 
 The Broadcast icon (in tools pane), shows the broadcast status. Clicking the icon, opens the broadcast UI, where the channel URL is displayed and the broadcast can be stopped.
 
-![Broadcast icon - broadcasting](./../../static/img/screenshots/broadcasting2.jpg)
+![Broadcast icon - broadcasting](./../../static/img/screenshots/broadcast-3.jpg)
 
 :::info Server
 
@@ -57,9 +57,9 @@ You can use one of these links to self-host it:
 
 These are screenshots for the live-updated result page and code:
 
-![Broadcasting result](./../../static/img/screenshots/broadcasting-result.jpg)
+![Broadcasting result](./../../static/img/screenshots/broadcast-4.jpg)
 
-![Broadcasting code](./../../static/img/screenshots/broadcasting-code.jpg)
+![Broadcasting code](./../../static/img/screenshots/broadcast-5.jpg)
 
 ## Technical Details
 

diff --git a/docs/docs/features/code-format.md b/docs/docs/features/code-format.md
@@ -16,15 +16,15 @@ For example:
 
 Code formatting for the code in the active editor can be triggered by the `Format` button below the editor.
 
-![code format](../../static/img/screenshots/format.jpg)
+![code format](../../static/img/screenshots/format-1.jpg)
 
 ## Keyboard Shortcut
 
 Code formatting can also be trigger by the keyboard shortcut <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd>.
 
 ## Format on-save
 
-Format on-save can be enabled from the app menu → Format on-save.
+Format on-save can be enabled from the Settings menu → Format on-save.
 
 ## Format Options
 

diff --git a/docs/docs/features/compiled-code.md b/docs/docs/features/compiled-code.md
@@ -6,6 +6,8 @@ The resulting compiled/transpiled code can be seen in the compiled code viewer (
 
 This can be a great tool for learning. As you write code, you see the compiled code and the resulting page at the same time. The compiled code viewer shows the code compiled from the currently active editor (markup/style/script). This includes the CSS produced by CSS processors (e.g. Autoprefixer), if enabled.
 
+![Compiled Code Viewer](./../../static/img/screenshots/compiled-code-1.jpg)
+
 e.g. https://livecodes.io/?ts&compiled=full <br />
 sets TypeScript as the active editor and shows compiled code viewer maximized.
 

diff --git a/docs/docs/features/css.md b/docs/docs/features/css.md
@@ -8,7 +8,7 @@ The [result page](./result.md) can be styled with CSS using various methods, inc
 
 Code added to [style editor](./projects.md#style-editor) is [compiled](#languages) and [processed](#css-processors), then added as CSS to the [result page](./result.md) `head` element.
 
-![LiveCodes styles](../../static/img/screenshots/css-processors.png)
+![LiveCodes styles](../../static/img/screenshots/css-processors.jpg) <!-- http://127.0.0.1:8080/?x=id/8gvn866qvh5 -->
 
 ### Languages
 

diff --git a/docs/docs/features/data-urls.md b/docs/docs/features/data-urls.md
@@ -16,7 +16,7 @@ Data URLs can be created from:
 
 For local files on user's device.
 
-[Assets screen](./assets.md) can be accessed from app menu → Assets. This works for any file type, including text files (e.g. stylesheets or scripts) and binary files like images. Generated data URLs are saved locally in the user's browser storage and are available across projects.
+[Assets screen](./assets.md) can be accessed from Settings menu → Assets. This works for any file type, including text files (e.g. stylesheets or scripts) and binary files like images. Generated data URLs are saved locally in the user's browser storage and are available across projects.
 
 ### "Copy code as data URL" button
 

diff --git a/docs/docs/features/default-template-language.md b/docs/docs/features/default-template-language.md
@@ -6,9 +6,9 @@ The app can also be configured to load a default [user template](./templates.md#
 
 If you do not already have any user templates, save any loaded project as template:
 
-App menu → Save as → Template.
+Project menu → Save as → Template.
 
-Then, in the user templates screen (app menu → New ... → My Templates), find your template and click "Set as default".
+Then, in the user templates screen (Project menu → New ... → My Templates), find your template and click "Set as default".
 
 If you wish to clear that selection, find the default template in user templates and click "unset".
 

diff --git a/docs/docs/features/deploy.md b/docs/docs/features/deploy.md
@@ -2,13 +2,13 @@
 
 The result page (of any number of projects) can be deployed and hosted at [GitHub Pages](https://pages.github.com/) (a free service from GitHub for hosting static websites). This requires login with a [GitHub account](./github-integration.md).
 
-The `Deploy` screen can be accessed from the app menu → Deploy.
+The `Deploy` screen can be accessed from the Project menu → Deploy.
 
 import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
 
 <RunInLiveCodes params={{screen: 'deploy'}} linkText="direct link" />
 
-![LiveCodes Deploy](../../static/img/screenshots/deploy.jpg)
+![LiveCodes Deploy](../../static/img/screenshots/deploy-1.jpg)
 
 The result page (and optionally the source code) is pushed to `gh-pages` branch of a **public** GitHub repo (new or existing). The page, shortly, becomes available on `https://{user}.github.io/{repo}/`.
 

diff --git a/docs/docs/features/display-modes.md b/docs/docs/features/display-modes.md
@@ -13,7 +13,7 @@ Example: https://livecodes.io/?template=react
 
 Screenshot: (App in full mode)
 
-![full-mode](../../static/img/screenshots/focus-mode.png)
+![full-mode](../../static/img/screenshots/mode-full.jpg)
 
 Demo: (Embedded playground in full mode)
 
@@ -27,7 +27,7 @@ Example: https://livecodes.io/?template=react&mode=focus
 
 Screenshot: (focus mode)
 
-![focus-mode](../../static/img/screenshots/focus-mode.png)
+![focus-mode](../../static/img/screenshots/mode-focus.jpg)
 
 ## `simple`
 
@@ -90,7 +90,7 @@ Demo:
 
 ## `result`
 
-Shows the result page only, with a small overlay (appears on hover) that allows opening the project in the full playground.
+Shows the result page only, with a drawer at the bottom (which can be closed) that allows opening the project in the full playground.
 
 Example: https://livecodes.io/?mode=result&template=react
 

diff --git a/docs/docs/features/editor-settings.md b/docs/docs/features/editor-settings.md
@@ -2,30 +2,22 @@
 
 LiveCodes allows a lot of flexibility for configuring which code editor to use and its settings.
 
-`Editor Settings` screen can be accessed from app menu → Editor Settings.
+`Editor Settings` screen can be accessed from Settings menu → Editor Settings.
 
 import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
 
 <RunInLiveCodes params={{screen: 'editor-settings'}} linkText="direct link" />
 
-![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-1.png)
+![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-1.jpg)
 
-![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-2.png)
+![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-2.jpg)
 
-![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-3.png)
-
-![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-4.png)
+![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-3.jpg)
 
 A preview code editor is displayed to preview the settings in real time.
 
 The settings selected in the `Editor Settings` screen are saved locally to [user settings](./user-settings.md) and are used subsequently. These include:
 
-### App UI Language
-
-Explore and use LiveCodes in [your preferred language](./i18n.md).
-
-This is actually a global option and is **not specific to the editor**. Might be moved to a separate [User Settings](./user-settings.md) screen in the future.
-
 ### Enable AI Code Assistant
 
 Enables the [AI code assistant](./ai.md). (Free and no account required)

diff --git a/docs/docs/features/embeds.md b/docs/docs/features/embeds.md
@@ -16,17 +16,17 @@ The embedding web page can communicate with the playground using a powerful [SDK
 
 ### App Embed Screen
 
-In the [standalone app](../getting-started.md#standalone-app), the Embed Screen can be accessed from app menu → Embed.
+In the [standalone app](../getting-started.md#standalone-app), the Embed Screen can be accessed from Project menu → Embed.
 
 import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
 
 <RunInLiveCodes params={{screen: 'embed'}} linkText="direct link" />
 
 It shows a preview of the embedded playground, allows customizations of [embed options](../sdk/js-ts.md#embed-options) and provides generated code that can be added to the web page that will embed the playground.
 
-![LiveCodes embed](../../static/img/screenshots/embed1.png)
-![LiveCodes embed](../../static/img/screenshots/embed2.png)
-![LiveCodes embed](../../static/img/screenshots/embed3.png)
+![LiveCodes embed](../../static/img/screenshots/embed-1.jpg)
+![LiveCodes embed](../../static/img/screenshots/embed-2.jpg)
+![LiveCodes embed](../../static/img/screenshots/embed-3.jpg)
 
 :::info Note
 
@@ -70,7 +70,7 @@ Some of the features of the full standalone app are not available or shown by de
 - All features that require authentication:  
   e.g. [login/logout](./github-integration.md), [sync](./sync.md), [deploy](./deploy.md), [importing](./import.md) from private github repos.
 - [Broadcast](./broadcast.md).
-- App menu.
+- App menus.
 - Some tools in [tools pane](./tools-pane.md):  
   e.g. open result page in new window, broadcast status.
 - [Welcome screen](./welcome.md).