Merge pull request #503 from live-codes/develop

release v22

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file. See [standa
 
 ---
 
+## [v22](https://github.com/live-codes/livecodes/compare/v21...v22) (2024-02-03)
+
+Add more docs, including for the [Preview in LiveCodes](https://github.com/live-codes/preview-in-livecodes) GitHub action.
+
+### Bug Fixes
+
+- fix importing data url stylesheet ([d57a06c](https://github.com/live-codes/livecodes/commit/d57a06c15f042946b0156a624de8b1dda34bb554))
+
+---
+
 ## [v21](https://github.com/live-codes/livecodes/compare/v20...v21) (2024-01-27)
 
 The major changes in this release include:

docs/docs/features/display-modes.md

@@ -2,7 +2,7 @@
 
 import LiveCodes from '../../src/components/LiveCodes.tsx';
 
-The configuration option `mode` can be used to select different display modes.
+The [configuration](../configuration/configuration-object.md) option [`mode`](../configuration/configuration-object.md#mode), also available as [query param](../configuration/query-params.md), can be used to select different display modes.
 The following display modes are supported:
 
 ## `full`
@@ -51,7 +51,7 @@ Example: https://livecodes.io/?mode=result&template=react
 
 Demo:
 
-<LiveCodes config={{mode:'result'}} template="react"></LiveCodes>
+<LiveCodes params={{mode: 'result', template: 'react'}}></LiveCodes>
 
 The tools pane (e.g. console/compiled code viewer) is hidden by default in `result` mode. It can be shown if set to `open` or `full`. Refer to [Tools pane](./tools-pane.md) documentation for details.
 

docs/docs/features/editor-settings.md

@@ -20,29 +20,32 @@ The following code editors are supported:
 - [**CodeMirror**](https://codemirror.net/): Has [many editing features](https://codemirror.net/docs/extensions/), including autocomplete, with good **mobile support**. (editor-only compressed size: **~180 kB**)
 - [**CodeJar**](https://medv.io/codejar/): A **lightweight** code editor with very basic editing features. [PrismJs](https://prismjs.com/) is used for syntax highlighting. Please note that some editor settings are not supported in CodeJar (see below). (editor-only compressed size: **~18 kB**)
 
+This can be configured using the [`editor`](../configuration/configuration-object.md#editor) configuration option.
+
 By default, Monaco editor is used on desktop, CodeMirror is used on mobile and CodeJar is used in [codeblocks](./display-modes.md#codeblock), in [lite mode](./lite.md) and in [readonly](../configuration/configuration-object.md#readonly) playgrounds.
 
 ### Editor Options
 
 These include:
 
-- Font family
-- Font size
-- Indentation (Spaces/Tabs)
-- Tab size
-- Line numbers
-- Word-wrap
-- Auto-close brackets and quotes
+- [Editor theme](../configuration/configuration-object.md#editortheme)
+- [Font family](../configuration/configuration-object.md#fontfamily)
+- [Font size](../configuration/configuration-object.md#fontsize)
+- [Indentation](../configuration/configuration-object.md#usetabs) (Spaces/Tabs)
+- [Tab size](../configuration/configuration-object.md#tabsize)
+- [Line numbers](../configuration/configuration-object.md#linenumbers)
+- [Word-wrap](../configuration/configuration-object.md#wordwrap)
+- [Auto-close brackets and quotes](../configuration/configuration-object.md#closebrackets)
 
 ### Emmet
 
-Allows using [**Emmet**](https://emmet.io/) [abbreviations and actions](https://docs.emmet.io/).
+Allows using [**Emmet**](https://emmet.io/) [abbreviations and actions](https://docs.emmet.io/). See [`emmet`](../configuration/configuration-object.md#emmet) configuration option.
 
 (Not supported in CodeJar)
 
 ### Editor Modes
 
-Allows using [**Vim**](https://vimhelp.org/) and [**Emacs**](https://www.gnu.org/software/emacs/manual/html_node/emacs/Basic.html) keyboard bindings.
+Allows using [**Vim**](https://vimhelp.org/) and [**Emacs**](https://www.gnu.org/software/emacs/manual/html_node/emacs/Basic.html) keyboard bindings. See [`editorMode`](../configuration/configuration-object.md#editormode) configuration option.
 
 (Not supported in CodeJar)
 
@@ -52,6 +55,6 @@ These are [**Prettier**](https://prettier.io/) [configuration options](https://p
 
 In addition to those specified in [Editor Options](#editor-options), the following options are available:
 
-- Use Semicolons
-- Use Single Quotes
-- Use Trailing Commas
+- [Use Semicolons](../configuration/configuration-object.md#semicolons)
+- [Use Single Quotes](../configuration/configuration-object.md#singlequote)
+- [Use Trailing Commas](../configuration/configuration-object.md#trailingcomma)

docs/docs/features/mobile.md

@@ -0,0 +1,9 @@
+# Mobile Support
+
+LiveCodes provides a responsive layout that adapts to different screen sizes. Don't wait to be on your desk. Try your ideas on the go!
+
+Projects that you created on mobile can be easily [shared](./share.md) or [synched](./sync.md) across devices. You can even share using QR code.
+
+![Responsive layout](../../static/img/screenshots/slider/responsive.jpg)
+
+By default, LiveCodes uses the touch-friendly [CodeMirror 6](https://codemirror.net/) editor on mobile. This is configurable in the [editor settings](./editor-settings.md) and can be changed at any time.

docs/docs/features/themes.md

@@ -1 +1,22 @@
 # Themes
+
+LiveCodes comes with dark and light themes.
+
+Themes can be set in:
+
+- UI: app menu → Dark theme switch.
+
+- [Query params](../configuration/query-params.md): `?theme=dark` or `?theme=light`.  
+  e.g. https://livecodes.io/?theme=light
+
+- [Configuration object](../configuration/configuration-object.md): [`theme`](../configuration/configuration-object.md#theme) property.
+
+![LiveCodes dark theme](../../static/img/screenshots/dark-theme.jpg)
+
+<div className="caption">LiveCodes dark theme</div>
+
+![LiveCodes light theme](../../static/img/screenshots/light-theme-.jpg)
+
+<div className="caption">LiveCodes light theme</div>
+
+Please note that editor themes can be set in the [editor settings](./editor-settings.md) or using the [`editorTheme`](../configuration/configuration-object.md#editortheme) configuration option.

docs/docs/gh-action.md

@@ -0,0 +1,11 @@
+# GitHub Action ⚡
+
+The [Preview in LiveCodes](https://github.com/live-codes/preview-in-livecodes) GitHub Action generates preview links to playgrounds for code changes in pull requests and posts them as pull request comments.
+
+Once added to a repo, it runs when a pull request is created or updated. The new code is optionally built. The action posts in a pull request comment links to playgrounds that can use the new code.
+
+**Screenshot:**
+
+![Screenshot of the action](../static/img/screenshots/preview-in-livecodes-gh-action.png)
+
+For usage and more information, see the [action docs](https://github.com/live-codes/preview-in-livecodes) on GitHub. Also check the [example repo](https://github.com/hatemhosny/preview-in-livecodes-demo) for a working demo.